Merge pull request #2156 from gluestack/feat/sidebar-apps

feat/sidebar-apps
gluestack · May 15, 2024 · 436651a · 436651a
2 parents b845d7f + 2270159
commit 436651a
Show file tree

Hide file tree

Showing 7 changed files with 496 additions and 0 deletions.
diff --git a/example/storybook-nativewind/.storybook/preview.js b/example/storybook-nativewind/.storybook/preview.js
@@ -74,6 +74,8 @@ export const parameters = {
           'Others',
           ['Fab', 'Skeleton'],
         ],
+        'Apps',
+        ['Dashboard App'],
         'Guides',
         ['Recipes', ['Linear Gradient'], 'More', ['Changelog']],
       ],
@@ -88,6 +90,11 @@ export const parameters = {
           name: 'Component',
           headerTitle: 'Components',
         },
+        {
+          source: 'lucide-react-native',
+          name: 'Layers',
+          headerTitle: 'Apps',
+        },
         {
           source: 'lucide-react-native',
           name: 'BookOpen',

diff --git a/example/storybook-nativewind/src/apps/dashboard-app/Expand.tsx b/example/storybook-nativewind/src/apps/dashboard-app/Expand.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Expand = () => {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="0.5" y="0.5" width="39" height="39" rx="19.5" fill="black" />
+      <path
+        d="M27.235 21.234H12.765V24.728L8 19.964L12.765 15.199V18.693H27.235V15.199L32 19.964L27.235 24.729V21.234Z"
+        fill="#FAFAFA"
+      />
+      <rect x="0.5" y="0.5" width="39" height="39" rx="19.5" stroke="#525252" />
+    </svg>
+  );
+};
diff --git a/example/storybook-nativewind/src/apps/dashboard-app/index.stories.mdx b/example/storybook-nativewind/src/apps/dashboard-app/index.stories.mdx
@@ -0,0 +1,19 @@
+---
+title: Dashboard App | gluestack-ui
+description: A dashboard app created using all the components of gluestack-ui styled with NativeWind
+toc: false
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import Responsiveness from '../../extra-components/nativewind/Responsive';
+
+
+<Meta title="with-nativewind/Apps/Dashboard App" />
+
+# Dashboard App
+
+This [Dashboard App](https://ui-example-nativewind.vercel.app/) is built using `@gluestack-ui` components styled with `NativeWind`.
+
+<Responsiveness />
+
+GitHub link for this [Dashboard App](https://github.com/gluestack/ui-example-nativewind)
diff --git a/example/storybook-nativewind/src/apps/starter-kit/Expand.tsx b/example/storybook-nativewind/src/apps/starter-kit/Expand.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Expand = () => {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="0.5" y="0.5" width="39" height="39" rx="19.5" fill="black" />
+      <path
+        d="M27.235 21.234H12.765V24.728L8 19.964L12.765 15.199V18.693H27.235V15.199L32 19.964L27.235 24.729V21.234Z"
+        fill="#FAFAFA"
+      />
+      <rect x="0.5" y="0.5" width="39" height="39" rx="19.5" stroke="#525252" />
+    </svg>
+  );
+};
diff --git a/example/storybook-nativewind/src/apps/starter-kit/index.stories.mdx b/example/storybook-nativewind/src/apps/starter-kit/index.stories.mdx
@@ -0,0 +1,19 @@
+---
+title: Starter Kit | gluestack-ui
+description: A dashboard app created using all the components of gluestack-ui styled with NativeWind
+toc: false
+---
+
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import Responsiveness from '../../extra-components/nativewind/Responsive';
+
+
+<Meta title="with-nativewind/Apps/Starter Kit" />
+
+# Dashboard App
+
+This [Dashboard App](https://ui-example-nativewind.vercel.app/) is built using `@gluestack-ui` components styled with `NativeWind`.
+
+<Responsiveness />
+
+GitHub link for this [Dashboard App](https://github.com/gluestack/ui-example-nativewind)