Feat/codeblock nw

example/storybook-nativewind/babel.config.js

@@ -12,6 +12,11 @@ module.exports = function (api) {
         'module-resolver',
         {
           alias: {
+            '@/components/ui/gluestack-ui-provider/providerContext':
+              path.resolve(
+                __dirname,
+                './src/extra-components/storybook-components/useMode.tsx'
+              ),
             '@/components/ui':
               process.env.STYLE_ENGINE === 'nativewind'
                 ? path.resolve(__dirname, './src/core-components/nativewind')

example/storybook-nativewind/package.json

@@ -52,15 +52,18 @@
     "@react-native-community/slider": "4.2.4",
     "@react-stately/collections": "^3.6.0",
     "@react-stately/tree": "^3.5.0",
-    "@unitools/link": "^0.0.4",
+    "@typescript-eslint/parser": "^8.10.0",
     "@unitools/image": "^0.0.5",
+    "@unitools/link": "^0.0.4",
     "expo": "^47.0.0",
     "expo-linear-gradient": "^12.3.0",
     "expo-status-bar": "~1.4.2",
     "fs": "^0.0.1-security",
     "lucide-react-native": "^0.236.0",
     "nativewind": "^4.0.36",
     "next": "^13.5.3",
+    "prettier": "^3.3.3",
+    "prettier-standalone": "^1.3.1-0",
     "prism-react-renderer": "^1.3.5",
     "re-resizable": "^6.9.11",
     "react": "^18.2.0",

example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx

@@ -31,12 +31,12 @@ import colors from 'tailwindcss/colors';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
-  CodePreview,
   Table,
   TableContainer,
   InlineCode,
   Tabs
 } from '@gluestack/design-system';
+import { CodePreview } from '../../extra-components/design-system/CodePreview'
 import { CollapsibleCode } from '@gluestack/design-system';
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
@@ -49,7 +49,7 @@ This is an illustration of **Avatar** component.
     showArgsController = { true}
     metaData = {{
       code: `
-        <Avatar {...props}>
+        <Avatar {...props} className='mx-auto'>
           <AvatarFallbackText>Jane Doe</AvatarFallbackText>
         <AvatarImage
           source={{
@@ -646,7 +646,7 @@ Fallback text is shown when the image fails to load, the image is not available
     metaData={{
       code: `
      <HStack space="md" h="100%" justifyContent="center" alignItems="center">
-          <Avatar size="md">
+          <Avatar size="md" className='mx-auto'>
             <AvatarFallbackText>John Doe</AvatarFallbackText>
             <AvatarImage
               source={{

example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx

@@ -37,7 +37,7 @@ import {
   ButtonText,
   GlobeIcon,
 } from '../../core-components/nativewind';
-
+import { CodePreview } from '../../extra-components/design-system/CodePreview'
 import {
   PaintBucket,
   PuzzleIcon,
@@ -46,7 +46,6 @@ import {
 } from 'lucide-react-native';
 import {
   AppProvider,
-  CodePreview,
   Table,
   TableContainer,
   InlineCode,
@@ -63,7 +62,7 @@ This is an illustration of **Badge** component.
   <CodePreview
     metaData={{
       code: `
-        <Badge {...props}>
+        <Badge {...props} className='mx-auto'>
           <BadgeText>Verified</BadgeText>
           <BadgeIcon as={GlobeIcon} className="ml-2" />
         </Badge>
@@ -257,7 +256,7 @@ An example of the Badge component being used with the Avatar component to displa
     metaData={{
       code: `
         <VStack space="2xl">
-          <HStack space="md">
+          <HStack space="md" className='items-center'>
             <Avatar>
               <AvatarFallbackText>SS</AvatarFallbackText>
               <AvatarImage

example/storybook-nativewind/src/components/Box/index.nw.stories.mdx

@@ -21,8 +21,8 @@ import { Box } from '../../core-components/nativewind';
 import { Text } from '../../core-components/nativewind/text';
 
 import { transformedCode } from '../../utils';
-import { AppProvider, CodePreview, Tabs, InlineCode } from '@gluestack/design-system';
-
+import { AppProvider, Tabs, InlineCode } from '@gluestack/design-system';
+import { CodePreview } from '../../extra-components/design-system/CodePreview'
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode, Table, TableContainer, } from '@gluestack/design-system';
 
@@ -37,7 +37,7 @@ This is an illustration of **Box** component.
 <Box
   className="bg-primary-500 p-5"
 >
-  <Text className='text-typography-0'>
+  <Text className='text-typography-0 text-center'>
     This is the Box
   </Text>
 </Box>

example/storybook-nativewind/src/components/Button/index.nw.stories.mdx

@@ -36,12 +36,12 @@ import {
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
-  CodePreview,
   Table,
   TableContainer,
   InlineCode,
   Tabs
 } from '@gluestack/design-system';
+import { CodePreview } from '../../extra-components/design-system/CodePreview'
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 import colors from 'tailwindcss/colors';

example/storybook-nativewind/src/components/Card/index.nw.stories.mdx

@@ -37,7 +37,6 @@ import {
 } from '../../core-components/nativewind';
 import {
   AppProvider,
-  CodePreview,
   Table,
   TableContainer,
   InlineCode,
@@ -47,6 +46,7 @@ import { transformedCode } from '../../utils';
 
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
+import { CodePreview } from '../../extra-components/design-system/CodePreview'
 
 This is an illustration of a **Card** component.
 
@@ -275,7 +275,7 @@ function App(){
         source={{
           uri: 'https://images.unsplash.com/photo-1529693662653-9d480530a697?q=80&w=2831&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
         }}
-        className="mb-6 h-[240px] w-full rounded-md"
+        className="mb-6 min-h-[160px] max-h-[240px]  w-full rounded-md"
       />
       <Text
         className="text-sm font-normal mb-2 text-typography-700"
@@ -392,7 +392,7 @@ function App(){
         </VStack>
       </Box>
       <Box
-        className="mb-5 flex-col sm:mb-6 sm:flex-row"
+        className="mb-5 flex-col sm:mb-6 sm:flex-row flex-wrap "
       >
         <Image
           source={{
@@ -471,16 +471,16 @@ function App(){
         </Text>
       </VStack>
       <Box
-        className="flex-col sm:flex-row"
+        className="flex flex-col sm:flex-row flex-wrap gap-2"
       >
         <Button
-          className="px-4 py-2 mr-0 mb-3 sm:mr-3 sm:mb-0 sm:flex-1"
+          className="px-4 py-2 sm:flex-1 min-w-[80px]"
         >
-          <ButtonText size="sm">Add to cart</ButtonText>
+          <ButtonText size="sm" >Add to cart</ButtonText>
         </Button>
         <Button
           variant="outline"
-          className="px-4 py-2 border-outline-300 sm:flex-1"
+          className="px-4 py-2 border-outline-300 sm:flex-1 min-w-[80px]"
         >
           <ButtonText
             size="sm"

example/storybook-nativewind/src/components/Center/index.nw.stories.mdx

@@ -20,8 +20,8 @@ import { Center } from '../../core-components/nativewind';
 import { Text } from '../../core-components/nativewind/text';
 
 import { transformedCode } from '../../utils';
-import { AppProvider, CodePreview, Table, TableContainer, InlineCode } from '@gluestack/design-system';
-
+import { AppProvider, Table, TableContainer, InlineCode } from '@gluestack/design-system';
+import { CodePreview } from '../../extra-components/design-system/CodePreview'
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode, Tabs } from '@gluestack/design-system';
 
@@ -34,7 +34,7 @@ This is an illustration of **Center** component.
   showArgsController = { false}
   metaData = {{
     code: `
-<Center className="bg-primary-500 h-[200px] w-[300px]">
+<Center className="bg-primary-500 h-[200px] max-w-[300px] w-full ">
   <Text className="text-typography-0 font-bold">
     This is the center.
   </Text>

example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx

@@ -35,13 +35,12 @@ import { useState, useRef } from 'react';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
-  CodePreview,
   Table,
   TableContainer,
   InlineCode,
   Tabs
 } from '@gluestack/design-system';
-
+import { CodePreview } from '../../extra-components/design-system/CodePreview'
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
@@ -54,7 +53,7 @@ This is an illustration of **Checkbox** component.
     showArgsController={true}
     metaData={{
       code: `
-          <Checkbox   {...props}  >
+          <Checkbox   {...props}  className='mx-auto'>
             <CheckboxIndicator>
               <CheckboxIcon as={CheckIcon}/>
             </CheckboxIndicator>
@@ -730,8 +729,10 @@ Checkbox provide a mutually exclusive selection mechanism, allowing users to cho
             return (
               <CheckboxGroup value={values}  onChange={(keys) => {
                 setValues(keys)
-              }}>
-                <VStack space="xl">
+              }}
+              className='mx-auto'
+              >
+                <VStack space="xl" >
                   <Checkbox value="Eng">
                         <CheckboxIndicator>
                           <CheckboxIcon as={CheckIcon}/>
@@ -792,7 +793,7 @@ A horizontal component incorporating a checkbox allows for intuitive and space-e
              <CheckboxGroup value={values}  onChange={(keys) => {
         setValues(keys)
       }}>
-                <HStack space="2xl">
+                <HStack space="2xl" className='flex-wrap'>
                   <Checkbox value="Illustration">
                     <CheckboxIndicator>
                       <CheckboxIcon as={CheckIcon}/>
@@ -972,7 +973,9 @@ A checkbox component with Label left configuration aligns the label to the left,
            return (
              <CheckboxGroup value={values}  onChange={(keys) => {
         setValues(keys)
-      }}>
+      }}
+      className='mx-auto'
+      >
      <VStack space="lg" className='w-40'>
             <Checkbox className='justify-between' value="Jane">
               <CheckboxLabel >Jane Cooper</CheckboxLabel>
@@ -1090,7 +1093,7 @@ function App() {
             const checkboxValue = radioRef.current.checked;
           };
         return (
-          <CheckboxGroup  ref={radioRef} >
+          <CheckboxGroup  ref={radioRef} className='mx-auto'>
           <VStack space="md">
                   <Checkbox  onChange={handleCheckboxChange}  value="Apartments">
                     <CheckboxIndicator>

example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx

@@ -75,7 +75,6 @@ import {
 } from '../../core-components/nativewind';
 import {
   AppProvider,
-  CodePreview,
   Table,
   TableContainer,
   Text,
@@ -85,6 +84,7 @@ import {
 } from '@gluestack/design-system';
 import { transformedCode } from '../../utils';
 import { useState } from 'react';
+import { CodePreview } from '../../extra-components/design-system/CodePreview'
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';
 

example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx

@@ -22,7 +22,6 @@ import {Grid, GridItem} from '../../core-components/nativewind/grid';
 import {Text} from '../../core-components/nativewind/text';
 import {
   AppProvider,
-  CodePreview,
   Table,
   TableContainer,
   InlineCode,
@@ -32,7 +31,7 @@ import {
   Tabs,
   CollapsibleCode
 } from '@gluestack/design-system';
-
+import { CodePreview } from '../../extra-components/design-system/CodePreview'
 
 This is an illustration of **Grid** component.
 

example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx

@@ -20,13 +20,12 @@ import { HStack } from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
-  CodePreview,
   Table,
   TableContainer,
   Text,
   InlineCode,
 } from '@gluestack/design-system';
-
+import { CodePreview } from '../../extra-components/design-system/CodePreview'
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode, Tabs } from '@gluestack/design-system';
 import { Box } from '../../core-components/nativewind/box';

example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx

@@ -20,7 +20,6 @@ import { Heading, Center } from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
-  CodePreview,
   Table,
   TableContainer,
   Text,
@@ -29,6 +28,7 @@ import {
 
 import Wrapper from '../../core-components/nativewind/Wrapper';
 import { CollapsibleCode, Tabs } from '@gluestack/design-system';
+import { CodePreview } from '../../extra-components/design-system/CodePreview'
 
 This is an illustration of **Heading** component.
 
@@ -38,7 +38,7 @@ This is an illustration of **Heading** component.
   showArgsController = { false}
   metaData = {{
     code: `
-        <Heading>I am a Heading</Heading>
+        <Heading className='text-center'>I am a Heading</Heading>
       `,
       transformCode: (code) => {
         return transformedCode(code);

example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx

@@ -84,13 +84,12 @@ import {
   FacebookIcon,
   Camera,
 } from 'lucide-react-native';
-
+import { CodePreview } from '../../extra-components/design-system/CodePreview'
 import { Path, Rect } from 'react-native-svg';
 import { CollapsibleCode } from "@gluestack/design-system"
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
-  CodePreview,
   Table,
   TableContainer,
   InlineCode,
@@ -107,7 +106,7 @@ This is an illustration of **Icon** component.
     showArgsController={true}
     metaData={{
       code: `
-        <Icon as={EditIcon} {...props} />
+        <Icon as={EditIcon} {...props} className='mx-auto'/>
       `,
       transformCode: (code) => {
         return transformedCode(code);
@@ -460,7 +459,7 @@ on Native :
           ),
         });
       function App () {
-        return <Icon as={GluestackIcon} size='xl' className="text-typography-black"/>;
+        return <Icon as={GluestackIcon} size='xl' className="text-typography-black mx-auto"/>;
       }
       `,
       transformCode: (code) => {