Openlane UI

Openlane UI monorepo which holds all the frontend assets for Openlane

What's inside?

This monorepo is run on Bun and built using Turborepo. It includes the following packages/apps:

Apps and Packages

Applications

• console: Openlane Console
• storybook: Storybook Components

Packages

• @repo/codegen: Generated graphQL functions using urql to make requests to the Openlane graphql api. See the README for details.
• @repo/ui: UI component library shared by our applications
• @repo/dally: DAL library for sharing common patterns and functionality in our other apps
• @repo/eslint-config: eslint configurations (includes eslint-config-next and eslint-config-prettier)
• @repo/config-typescript: tsconfig.jsons used throughout the monorepo
• @repo/tailwind-config: the tailwind.config.ts used throughout the monorepo

Stack

• TypeScript for static type-checking
• Bun to bundle, dev, test, deploy and run apps
• ESLint for code linting
• Prettier for code formatting
• Next.js a framework to help with building web applications using React
• React for creating user interfaces
• SWR for client-side data fetching, caching, and de-deduping API requests
• Tailwindcss for styles without leaving TSX syntax

Prerequisites

1. Install Bun and other dependencies:

   task local-setup

The above should work on macOS environments. If you are using Linux/Windows you may need to look at the Taskfile and find the equivalent commands.

Build

To build all apps and packages, run the following commands:

task install
task build

Develop

1. Copy the .env, this is in .gitignore so you do not have to worry about accidentally committing it. This hold example of environment configurations which you should review and potentially override depending on your needs.

   cp ./config/.env-example ./config/.env

2. To develop all apps and packages, run the following command:

   task dev

3. Alternatively, you can run a single app instead of all the apps with the specific task commands. For example to develop on the console app run:

   task dev:console
   

API Backend

The backend used by the console UI is located in the Open core repo. Please refer to the README in that repository for details on standing up the api locally.

Contributing

See the contributing guide for more information.