Setup the foundation for Twenty UI library. #4423
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…nent with hard-coded theme values into it, and use the component inside twenty-front to complete the setup
…the AppThemeProvider component inside twenty-front to consume themes from twenty-ui
… to storybook development server
…nvention for theme declarations
…lve imports for theme type within the package
…th the story for it
…ommand for storybook init
…d starting the storybook development server
…ont to complete front-jest job
|
Nice ! Thank you @mabdullahabaid I just copied the preview-head so that it renders correctly as in the twenty-front storybooks, we'll see later how we can fix that if we can get the font-family from theme instead of preview head. |
- Added theme addon for light/dark switch - Added ComponentDecorator
|
Also added what's needed for light/dark theme switch and ComponentDecorator we use everywhere. |
lucasbordeau
approved these changes
Mar 13, 2024
|
Sounds amazing! Thank you for making the setup more complete, @lucasbordeau - just learned how to add a theme switch to storybook by revisiting your changes. Time for me to extract more components! 😃 |
arnavsaxena17
pushed a commit
to arnavsaxena17/twenty
that referenced
this pull request
Oct 6, 2024
* feat: create a separate package for twenty-ui, extract the pill component with hard-coded theme values into it, and use the component inside twenty-front to complete the setup * feat: extract the light and the dark theme into twenty-ui and update the AppThemeProvider component inside twenty-front to consume themes from twenty-ui * fix: create a decorator inside preview.tsx to provide a default theme to storybook development server * fix: remove redundant type declarations and revert back the naming convention for theme declarations * fix: introduce a default value for pill label within the story for development server * fix: introduce the nx script into package.json for twenty-ui and resolve imports for theme type within the package * fix: remove the pill component from the twenty-front package along with the story for it * fix: revert the package versions to those before running the nx cli command for storybook init * feat: update readme to include details for building the ui library and starting the storybook development server * fix: include details about twenty-ui inside jest.config for twenty-front to complete front-jest job * - Added preview head for font - Added theme addon for light/dark switch - Added ComponentDecorator --------- Co-authored-by: Lucas Bordeau <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Creating this PR to get the package for
twenty-uiup and running. The following list contains the step-by-step details for changes in this PR.nx g @nx/storybook:configuration twenty-ui. This command updated the root level nx.json and added packages to the root level package.json (which we might be able to move to package level package.json - need to experiment, not messing with the setup for now).twenty-frontintotwenty-uiand updated AppThemeProvider insidetwenty-frontto use the theme withintwenty-ui. Have not removed the theme fromtwenty-frontaltogether due to dependencies, which we can resolve as the next step (or delay till we have extracted all the components).twenty-frontwithout any changes to the component code.twenty-frontimports fromtwenty-uiinstead ofmodules/ui.twenty-uifor anyone planning to play around with the library on their local machine.Have not updated
twenty-docsin this PR - need a little experimentation to get started with Docusaurus and MDX.