Merge pull request #1227 from gluestack/surajahmed-patch-2

fix: installation page
gluestack · Oct 9, 2023 · 2083056 · 2083056
2 parents f7c5b0f + 15285ad
commit 2083056
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/example/storybook/src/components/Provider/GluestackUIProvider/index.stories.mdx b/example/storybook/src/components/Provider/GluestackUIProvider/index.stories.mdx
@@ -75,7 +75,9 @@ import { GluestackUIProvider } from '@gluestack-ui/themed';
 The structure provided below can help you identify and understand a GluestackUIProvider component's various parts.
 
 ```jsx
-export default () => <GluestackUIProvider>{children}</GluestackUIProvider>;
+export default () => (
+  <GluestackUIProvider config={config}>{children}</GluestackUIProvider>
+);
 ```
 
 ## Advanced
@@ -142,6 +144,7 @@ const GluestackUIProvider = ({ children, ...props }: any) => {
 We have a function called `createProvider` which can be used to create provider with `StyledProvider` exported from `@gluestack-style/react`. You can pass configuration object which consists theme. You can change the theme object specific to your brand. Refer [gluestack.io/style](/style) for more information on how to create a theme.
 
 #### Usage
+
 https://style.gluestack.io/style
 You can import the config For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/tree/main/example/storybook/src/ui-components/Provider).
 

diff --git a/example/storybook/src/getting-started/Installation/App.tsx b/example/storybook/src/getting-started/Installation/App.tsx
@@ -6,10 +6,11 @@ import Socail from './Socail';
 import Card1 from './Card1';
 import Card2 from './Card2';
 import { GluestackUIProvider } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
 
 function App() {
   return (
-    <GluestackUIProvider>
+    <GluestackUIProvider config={config}>
       <Box my="$6">
         <VStack space="sm">
           <Text fontWeight="$bold" fontSize="$2xl">

diff --git a/example/storybook/src/theme-configuration/theme/default-tokens/DefaultComponent.tsx b/example/storybook/src/theme-configuration/theme/default-tokens/DefaultComponent.tsx
@@ -49,7 +49,7 @@ sortedColorPalette.others = { ...colorPalette.others };
 
 const ColorPaletteComponent = () => {
   return (
-    <GluestackUIProvider>
+    <GluestackUIProvider config={config}>
       <VStack flex={1}>
         {Object.keys(sortedColorPalette).map((category: string) => {
           return (
@@ -154,7 +154,7 @@ mapEntries.sort(([keyA, valueA]: any, [keyB, valueB]: any) => {
 
 const SpaceComponent = () => {
   return (
-    <GluestackUIProvider>
+    <GluestackUIProvider config={config}>
       <VStack>
         <HStack h="$8" alignItems="center">
           <Text w={100} mr="$4">
@@ -192,7 +192,7 @@ const opacity: any = config.tokens.opacity;
 
 const OpacityComponent = () => {
   return (
-    <GluestackUIProvider>
+    <GluestackUIProvider config={config}>
       <HStack
         flexWrap="wrap"
         sx={{
@@ -248,7 +248,7 @@ const OpacityComponent = () => {
 
 const ShadowsComponent = () => {
   return (
-    <GluestackUIProvider>
+    <GluestackUIProvider config={config}>
       <VStack>
         <Heading size="sm" mb="$4">
           Hard Shadows
@@ -316,7 +316,7 @@ const ShadowsComponent = () => {
 const borderWidths = config.tokens.borderWidths;
 const BorderWidthComponent = () => {
   return (
-    <GluestackUIProvider>
+    <GluestackUIProvider config={config}>
       <HStack
         sx={{
           _web: {
@@ -351,7 +351,7 @@ const BorderWidthComponent = () => {
 const radii = config.tokens.radii;
 const RadiiComponent = () => {
   return (
-    <GluestackUIProvider>
+    <GluestackUIProvider config={config}>
       <HStack
         sx={{
           _web: {