From 26ce167ade843e7f1ab925602227e49d749dfcd2 Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Thu, 14 Mar 2024 20:02:52 +0530 Subject: [PATCH 1/2] fix: eject fixes --- example/storybook/.storybook/preview.js | 2 +- .../customizing-theme/EjectLibrary/index.stories.mdx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/example/storybook/.storybook/preview.js b/example/storybook/.storybook/preview.js index 1e6f013a4f..eba42f09af 100644 --- a/example/storybook/.storybook/preview.js +++ b/example/storybook/.storybook/preview.js @@ -37,7 +37,7 @@ export const parameters = { 'Theme', ['Default Tokens', 'Default Components'], 'Customizing Theme', - ['Eject Library', 'Eject Theme'], + ['Eject Components', 'Eject Theme'], ], 'Styling', [ diff --git a/example/storybook/src/ui/theme-configuration/customizing-theme/EjectLibrary/index.stories.mdx b/example/storybook/src/ui/theme-configuration/customizing-theme/EjectLibrary/index.stories.mdx index d2e13327ff..1ee762129c 100644 --- a/example/storybook/src/ui/theme-configuration/customizing-theme/EjectLibrary/index.stories.mdx +++ b/example/storybook/src/ui/theme-configuration/customizing-theme/EjectLibrary/index.stories.mdx @@ -1,8 +1,8 @@ --- -title: Eject Library +title: Eject Components description: Customizing the theme and components in gluestack-ui involves defining a theme, components configuration and applying it using GluestackUIProvider, enabling you to style your application's visual elements according to your design preferences. showHeader: true -tag: beta +tag: Recommended --- import { Canvas, Meta, Story } from '@storybook/addon-docs'; @@ -15,7 +15,7 @@ import { import { transformedCode } from '../../../utils'; import { AppProvider, CodePreview, Text } from '@gluestack/design-system'; - + `gluestack-ui` is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer. For users looking for a seamless integration experience, we offer the `@gluestack-ui/config` package, which comes with pre-configured theme that can easily be integrated with `@gluestack-ui/themed` for a convenient styling solution. From 1e5a4d5501021da16df51f0eaa9cec6c5f23e645 Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Thu, 14 Mar 2024 20:14:37 +0530 Subject: [PATCH 2/2] fix: eject docs --- .../customizing-theme/EjectLibrary/index.stories.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/example/storybook/src/ui/theme-configuration/customizing-theme/EjectLibrary/index.stories.mdx b/example/storybook/src/ui/theme-configuration/customizing-theme/EjectLibrary/index.stories.mdx index 1ee762129c..451acadeca 100644 --- a/example/storybook/src/ui/theme-configuration/customizing-theme/EjectLibrary/index.stories.mdx +++ b/example/storybook/src/ui/theme-configuration/customizing-theme/EjectLibrary/index.stories.mdx @@ -49,15 +49,15 @@ npx gluestack-ui-scripts eject This will overwrite the existing styles with default one. (It is NOT RECOMMENDED to eject again) If you need to eject the components, then save the changes and copy/paste them manually. -**Step 3:**: If you are already using `@gluestack-ui/themed` inside your project, running this command will automatically change the imports from `@gluestack-ui/themed` to the components folder path. +> Note: If you are already using `@gluestack-ui/themed` inside your project, running this command will automatically change the imports from `@gluestack-ui/themed` to the components folder path. -**Step 4:**: Remove the config file passed inside provides at the root of the project. Wrap the root of the project with `GluestackUIProvider` only. +**Step 3: Remove the config file passed inside provides at the root of the project. Wrap the root of the project with `GluestackUIProvider` only. ```jsx {children} ``` -**Step 5: Update Tokens**: go to `components/gluestack-ui.config.ts` file. Update the tokens as per your requirements. +**Step 4: Update Tokens**: go to `components/gluestack-ui.config.ts` file. Update the tokens as per your requirements. ```jsx // gluestack-ui.config.ts @@ -97,7 +97,7 @@ declare module '@gluestack-style/react' { You can customize all the tokens of the theme in `config`. For a complete list of tokens and default values, please check [default Tokens](https://gluestack.io/ui/docs/theme-configuration/theme/default-tokens). -**Step 6: Update Components**: you can find all of your components theme inside `./components` folder. For example, if you want to customize `Button` component, you can find its theme file at `./components/button/index.tsx`. Update component's style as per your requirements. +**Step 5: Update Components**: you can find all of your components theme inside `./components` folder. For example, if you want to customize `Button` component, you can find its theme file at `./components/button/index.tsx`. Update component's style as per your requirements. ## Customizing Animations