feat/nativewind-grid

example/storybook-nativewind/.ondevice/storybook.requires.js

@@ -49,6 +49,7 @@ try {
 
 const getStories = () => {
   return [
+    require('../src/components/Grid/Grid.stories.tsx'),
     // require('../src/components/Disclosure/Actionsheet/Actionsheet.stories.tsx'),
     // require('../src/components/Disclosure/Accordion/Accordion.stories.tsx'),
     // require('../src/components/Typography/Text/Text.stories.tsx'),
@@ -57,7 +58,7 @@ const getStories = () => {
     // require('../src/components/Feedback/Alert/Alert.stories.tsx'),
     // require('../src/components/Forms/Button/Button.stories.tsx'),
     // require('../src/components/DataDisplay/Badge/Badge.stories.tsx'),
-    require('../src/components/primitives/Button/Button.stories.tsx'),
+    // require('../src/components/primitives/Button/Button.stories.tsx'),
     // require('../src/components/Forms/Checkbox/Checkbox.stories.tsx'),
     // require('../src/components/DataDisplay/Divider/Divider.stories.tsx'),
     // require('../src/components/Others/Fab/Fab.stories.tsx'),

example/storybook-nativewind/.storybook/preview.js

@@ -46,7 +46,7 @@ export const parameters = {
           'Typography',
           ['Heading', 'Text'],
           'Layout',
-          ['Box', 'Center', 'Divider', 'HStack', 'VStack'],
+          ['Box', 'Center', 'Divider', 'HStack', 'VStack', 'Grid'],
           'Feedback',
           ['Alert', 'Progress', 'Spinner', 'Toast'],
           'Data Display',
@@ -75,9 +75,7 @@ export const parameters = {
           ['Fab'],
         ],
         'Guides',
-        'Recipes',
-        ['Linear Gradient'],
-        ['More', ['Changelog']],
+        ['Recipes', ['Linear Gradient'], 'More', ['Changelog']],
       ],
       icons: [
         {

example/storybook-nativewind/src/components/Grid/Grid.stories.tsx

@@ -0,0 +1,17 @@
+import type { ComponentMeta } from '@storybook/react-native';
+import Grid from './Grid';
+import GridExampleOne from './GridExampleOne';
+import GridSpacing from './GridSpacing';
+
+const GridMeta: ComponentMeta<typeof Grid> = {
+  title: 'stories/Grid',
+  component: Grid,
+  // metaInfo is required for figma generation
+  // @ts-ignore
+  metaInfo: {
+    componentDescription: `This is a Grid component.`,
+  },
+};
+
+export default GridMeta;
+export { Grid, GridExampleOne, GridSpacing };

example/storybook-nativewind/src/components/Grid/Grid.tsx

@@ -0,0 +1,36 @@
+import { Grid, GridItem } from '@/components/ui/grid';
+import React from 'react';
+import { Text } from 'react-native';
+
+const GridBasic = () => {
+  return (
+    <Grid numColumns={8} className="gap-x-5 gap-y-5 p-4 flex-col">
+      <GridItem colSpan={2} className="bg-pink-500 p-10">
+        <Text>2</Text>
+      </GridItem>
+      <GridItem colSpan={4} className="bg-pink-500">
+        <Text>4</Text>
+      </GridItem>
+      <GridItem colSpan={2} className="bg-pink-500">
+        <Text>2</Text>
+      </GridItem>
+
+      <GridItem colSpan={8} className="bg-pink-500">
+        <Text>8</Text>
+      </GridItem>
+
+      <GridItem colSpan={8} className="bg-pink-500">
+        <Text>12</Text>
+      </GridItem>
+
+      <GridItem colSpan={2} className="bg-pink-500">
+        <Text>2</Text>
+      </GridItem>
+      <GridItem colSpan={6} className="bg-pink-500">
+        <Text>6</Text>
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default GridBasic;

example/storybook-nativewind/src/components/Grid/GridExampleOne.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Grid, GridItem } from '@/components/ui/grid';
+import { Text } from '@/components/ui/text';
+
+const GridExampleOne = () => {
+  return (
+    <Grid numColumns={8}>
+      <GridItem
+        colSpan={3}
+        className="bg-background-100 p-4 rounded-md text-center"
+      >
+        <Text>colSpan = 3</Text>
+      </GridItem>
+      <GridItem
+        colSpan={5}
+        className="bg-background-100 p-4 rounded-md text-center"
+      >
+        <Text>colSpan = 5</Text>
+      </GridItem>
+      <GridItem
+        colSpan={6}
+        className="bg-background-100 p-4 rounded-md text-center"
+      >
+        <Text>colSpan = 6</Text>
+      </GridItem>
+      <GridItem
+        colSpan={4}
+        className="bg-background-100 p-4 rounded-md text-center"
+      >
+        <Text>colSpan = 4</Text>
+      </GridItem>
+      <GridItem
+        colSpan={4}
+        className="bg-background-100 p-4 rounded-md text-center"
+      >
+        <Text>colSpan = 4</Text>
+      </GridItem>
+    </Grid>
+  );
+};
+
+export default GridExampleOne;

example/storybook-nativewind/src/components/Grid/GridSpacing.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Grid, GridItem } from '@/components/ui/grid';
+
+const GridSpacing = () => {
+  return (
+    <Grid numColumns={9}>
+      <GridItem colSpan={3} className="bg-background-100 p-4 rounded-md " />
+
+      <GridItem colSpan={3} className="bg-background-100 p-4 rounded-md " />
+
+      <GridItem colSpan={3} className="bg-background-100 p-4 rounded-md" />
+    </Grid>
+  );
+};
+
+export default GridSpacing;