Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: eject fixes #1943

Merged
merged 2 commits into from
Mar 15, 2024
Merged

fix: eject fixes #1943

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
26ce167
fix: eject fixes
vidhi499 Mar 14, 2024
1e5a4d5
fix: eject docs
vidhi499 Mar 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion example/storybook/.storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export const parameters = {
'Theme',
['Default Tokens', 'Default Components'],
'Customizing Theme',
['Eject Library', 'Eject Theme'],
['Eject Components', 'Eject Theme'],
],
'Styling',
[
Expand Down
14 changes: 7 additions & 7 deletions ...ook/src/ui/theme-configuration/customizing-theme/EjectLibrary/index.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -15,7 +15,7 @@ import {
import { transformedCode } from '../../../utils';
import { AppProvider, CodePreview, Text } from '@gluestack/design-system';

<Meta title="ui/Theme Configuration/Customizing Theme/Eject Library" />
<Meta title="ui/Theme Configuration/Customizing Theme/Eject Components" />

`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.

Expand Down Expand Up @@ -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
<GluestackUIProvider>{children}</GluestackUIProvider>
```

**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
Expand Down Expand Up @@ -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

Expand Down
Loading