This pull request bootstraps a React+Vite application that will be used to migrate our existing frontend, which is currently written in vanilla JS and CSS, to this new framework.
The new application is added in a new directory b6-frontend and is not yet integrated with the rest of the infrastructure. Unsure if this is the best setup for this work - @andreweland any thoughts on this?
Description
The new setup is a React application written in TypeScript. We use Vite as the build tool and TailwindCSS for styling. We introduce Storybook for component development.
As an initial step, we add the first tokens of the design system (colors, typography, icons), fetching the necessary resources from Figma. Three Storybook stories are added to see and validate this.
The first primitive components are added, and we follow a composition over configuration approach, this allows for more flexibility at this stage while still enforcing the patterns from the design system. We make use of Radix Primitives that are accessible and unstyled.
Comments
The plan for the migration is to first develop the components for the design system, making sure they are expressive and reflect the design intentions. Once this is accomplished, we will proceed with migrating the application. So, at the moment, it's more useful to start Storybook with pnpm run storybook than the app itself to review the work.
Goal
This pull request bootstraps a React+Vite application that will be used to migrate our existing frontend, which is currently written in vanilla JS and CSS, to this new framework.
The new application is added in a new directory
b6-frontendand is not yet integrated with the rest of the infrastructure. Unsure if this is the best setup for this work - @andreweland any thoughts on this?Description
The new setup is a React application written in TypeScript. We use Vite as the build tool and TailwindCSS for styling. We introduce Storybook for component development.
As an initial step, we add the first tokens of the design system (colors, typography, icons), fetching the necessary resources from Figma. Three Storybook stories are added to see and validate this.
The first primitive components are added, and we follow a composition over configuration approach, this allows for more flexibility at this stage while still enforcing the patterns from the design system. We make use of Radix Primitives that are accessible and unstyled.
Comments
The plan for the migration is to first develop the components for the design system, making sure they are expressive and reflect the design intentions. Once this is accomplished, we will proceed with migrating the application. So, at the moment, it's more useful to start Storybook with
pnpm run storybookthan the app itself to review the work.