feat: added a quick start page

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

@@ -34,7 +34,7 @@ export const parameters = {
         'Home',
         [
           'Overview',
-          ['Introduction'],
+          ['Introduction', 'QuickStart'],
           'Getting Started',
           [
             'Installation',

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/ColorMode'
+              ),
             '@/components/ui':
               process.env.STYLE_ENGINE === 'nativewind'
                 ? path.resolve(__dirname, './src/core-components/nativewind')

example/storybook-nativewind/src/extra-components/nativewind/quick-start-components/App.tsx

@@ -0,0 +1,25 @@
+import { Text } from '@/components/ui/text';
+import { VStack } from '@/components/ui/vstack';
+import { Box } from '@/components/ui/box';
+import Fold2 from './Fold2';
+import Socail from './Socail';
+import Card1 from './Card1';
+import React from 'react';
+
+function App() {
+  return (
+    <Box className="my-6">
+      <VStack space="sm">
+        <Text className="font-bold text-2xl">Explore Components</Text>
+        <Text size="md">
+          30+ responsive components for every screen and style
+        </Text>
+      </VStack>
+      <Fold2 />
+    </Box>
+  );
+}
+
+export default App;
+
+export { App, Socail, Card1 };

example/storybook-nativewind/src/extra-components/nativewind/quick-start-components/AvatarDemo.tsx

@@ -0,0 +1,17 @@
+import {
+  Avatar,
+  AvatarBadge,
+  AvatarFallbackText,
+} from '@/components/ui/avatar';
+import React from 'react';
+
+const AvatarDemo = () => {
+  return (
+    <Avatar size="md">
+      <AvatarFallbackText>Jane Doe</AvatarFallbackText>
+      <AvatarBadge />
+    </Avatar>
+  );
+};
+
+export default AvatarDemo;

example/storybook-nativewind/src/extra-components/nativewind/quick-start-components/BadgeDemo.tsx

@@ -0,0 +1,14 @@
+import { GlobeIcon } from '@/components/ui/icon';
+import { Badge, BadgeText, BadgeIcon } from '@/components/ui/badge';
+import React from 'react';
+
+const BadgeDemo = () => {
+  return (
+    <Badge size="md" variant="solid" action="muted">
+      <BadgeText>Verified</BadgeText>
+      <BadgeIcon as={GlobeIcon} className="ml-2" />
+    </Badge>
+  );
+};
+
+export default BadgeDemo;

example/storybook-nativewind/src/extra-components/nativewind/quick-start-components/Card.tsx

@@ -0,0 +1,32 @@
+import { Text } from '@/components/ui/text';
+import { Box } from '@/components/ui/box';
+import React from 'react';
+import NextLink from 'next/link';
+
+export const Card = ({
+  title,
+  child,
+  href,
+}: {
+  title: string;
+  child: React.ReactNode;
+  href: string;
+}) => {
+  return (
+    <Box className="min-w-[240px] min-h-[240px] flex-1 rounded-xl border border-background-100  bg-background-100   dark:border-background-300">
+      <Box className="flex flex-row flex-4 min-h-[200px] px-6 w-full justify-center items-center  border-b-background-100  bg-background-50  dark:border-b-borderDark-300  dark:bg-black rounded-tl-xl rounded-tr-xl">
+        {child}
+      </Box>
+      <NextLink
+        href={href}
+        style={{
+          textDecoration: 'none',
+        }}
+      >
+        <Box>
+          <Text className="text-xl font-medium my-3 px-6">{title}</Text>
+        </Box>
+      </NextLink>
+    </Box>
+  );
+};

example/storybook-nativewind/src/extra-components/nativewind/quick-start-components/Card1.tsx

@@ -0,0 +1,195 @@
+import { Link } from '@/components/ui/link';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+import { VStack } from '@/components/ui/vstack';
+import { HStack } from '@/components/ui/hstack';
+import { Box } from '@/components/ui/box';
+import React, { useState } from 'react';
+import Next from './Next';
+import MySvgComponent from './MySvgComponent';
+import Expo1 from './Expo1';
+import ReactN from './ReactN';
+import VsCode from './VsCode';
+import NextLink from 'next/link';
+import Tilde from './Tilde';
+import Copied from './Copied';
+import Copy from './Copy';
+import Figma from './Figma';
+import Unitools from './Unitools';
+
+function Card1() {
+  const [copied, setCopied] = useState(false);
+  const [showCopy, setShowCopy] = useState(false);
+
+  const copyToClipboard = async () => {
+    const text = 'npm create gluestack';
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  };
+
+  return (
+    <Box className="py-6 flex-1 ">
+      <Box className="gap-5 mb-6 flex lg:flex-row flex-col w-full">
+        <Box className="rounded-xl border lg:flex-1 border-background-100 bg-background-50  dark:border-background-300 web:bg-[linear-gradient(329deg, rgba(0, 56, 255, 0.08) 0%, rgba(39, 87, 255, 0.00) 99.99%, rgba(0, 56, 255, 0.00) 100%), linear-gradient(123deg, rgba(233, 185, 255, 0.60) 0%, rgba(15, 24, 86, 0.00) 100%)]  web:dark:bg-[linear-gradient(329deg, rgba(0, 16, 71, 0.40) 0%, rgba(77, 77, 77, 0.00) 100%), linear-gradient(123deg, rgba(115, 41, 150, 0.60) 0%, rgba(15, 24, 86, 0.00) 100%)] ">
+          <Box className="p-6">
+            <VStack space="lg" className="justify-center">
+              <HStack className="justify-between items-center">
+                <Text className="text-xl font-bold font-plus-jakarta my-0">
+                  Quickstart
+                </Text>
+                <MySvgComponent />
+              </HStack>
+              <HStack
+                onPointerEnter={() => {
+                  setShowCopy(true);
+                }}
+                onPointerLeave={() => {
+                  setShowCopy(false);
+                }}
+                className="items-center justify-start py-6 px-7 rounded-lg md:px-9 shadow-[0px 0px 100px 0px rgba(0, 119, 230, 0.60)]  dark:shadow-[0px 0px 100px 0px rgba(0, 119, 230, 0.60)]  dark:bg-black bg-white"
+              >
+                <Tilde />
+                <Text className="text-lg leading-sm mx-3 font-sourcecode font-medium text-typography-900    md:text-xl  md:leading-md">
+                  npm create{' '}
+                  <Text className="text-lg leading-sm font-medium text-primary-300 font-sourcecode md:text-xl  md:leading-md">
+                    gluestack
+                  </Text>
+                </Text>
+                {showCopy ? (
+                  <Button
+                    onPress={copyToClipboard}
+                    // variant=""
+                    variant="outline"
+                    className="absolute right-3 p-0 web:cursor-pointer md:right-9 border-none data-[hover=true]:bg-none"
+                  >
+                    {copied ? <Copied /> : <Copy />}
+                  </Button>
+                ) : null}
+              </HStack>
+            </VStack>
+          </Box>
+        </Box>
+        <Box className="rounded-xl border lg:flex-1 border-background-100  dark:border-background-300  dark:bg-[linear-gradient(150.32deg, #3E485B 18.15%, rgba(55, 65, 81, 0) 92.97%), linear-gradient(0deg, rgba(62, 72, 91, 0.2), rgba(62, 72, 91, 0.2)] bg-rgb(212,226,255) bg-background-50">
+          <Box className="p-6">
+            <VStack space="lg">
+              <Text className="text-xl font-bold font-plus-jakarta">
+                Manual Installation
+              </Text>
+              <HStack className="flex-wrap gap-2.5">
+                <NextLink
+                  href="/ui/docs/home/getting-started/installation"
+                  style={{
+                    borderRadius: 8,
+                    height: 72,
+                  }}
+                >
+                  <Next />
+                </NextLink>
+                <NextLink
+                  href="/ui/docs/home/getting-started/installation"
+                  style={{
+                    borderRadius: 8,
+                    height: 72,
+                  }}
+                >
+                  <Expo1 />
+                </NextLink>
+                <NextLink
+                  href="/ui/docs/home/getting-started/installation"
+                  style={{
+                    borderRadius: 8,
+                    height: 72,
+                  }}
+                >
+                  <ReactN />
+                </NextLink>
+              </HStack>
+            </VStack>
+          </Box>
+        </Box>
+      </Box>
+      <Box className="gap-5 flex lg:flex-row  lg:flex-wrap flex-col w-full">
+        <Box className="rounded-xl border border-background-100 bg-background-50 dark:border-background-300 web:bg-[linear-gradient(99deg, rgba(248, 207, 106, 0.20) 5.76%, rgba(80, 228, 255, 0.20) 87.08%)] ">
+          <Box className="p-6">
+            <VStack space="lg">
+              <Text className="text-xl font-bold font-plus-jakarta">
+                VS Code Extension
+              </Text>
+              <HStack>
+                <NextLink
+                  href="/ui/docs/getting-started/vscode-extensions"
+                  style={{
+                    borderRadius: 8,
+                    height: 72,
+                  }}
+                >
+                  <VsCode />
+                </NextLink>
+              </HStack>
+            </VStack>
+          </Box>
+        </Box>
+        <Box className="rounded-xl border border-background-100 bg-background-50 dark:border-background-300 web:bg-[linear-gradient(99deg, rgba(20, 82, 119, 0.20) 5.76%, rgba(197, 58, 148, 0.20) 87.08%)] ">
+          <Box className="p-6">
+            <VStack space="lg">
+              <Text className="text-xl font-bold font-plus-jakarta">
+                Figma UI Kit
+              </Text>
+              <HStack className="flex-wrap gap-2.5">
+                <Link
+                  href="https://www.figma.com/@gluestack"
+                  isExternal
+                  className="rounded-lg"
+                >
+                  <Figma />
+                </Link>
+              </HStack>
+            </VStack>
+          </Box>
+        </Box>
+        <Box className="rounded-xl border lg:flex-1 border-background-100 bg-background-50 dark:border-background-300 web:bg-[linear-gradient(99deg, rgba(247, 162, 161, 0.20) 5.76%, rgba(33, 120, 221, 0.20) 87.08%)] ">
+          <Box className="p-6">
+            <VStack space="lg">
+              <Text className="text-xl font-bold font-plus-jakarta">
+                Head Starter Kit
+              </Text>
+              <HStack className="flex-wrap gap-2.5">
+                <Link
+                  href="https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/next"
+                  isExternal
+                  className="rounded-lg"
+                >
+                  <Next />
+                </Link>
+                <Link
+                  href="https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/expo-app"
+                  isExternal
+                  className="rounded-lg"
+                >
+                  <Expo1 />
+                </Link>
+                <Link
+                  href="https://github.com/gluestack/gluestack-ui-starter-kits/tree/main/universal"
+                  isExternal
+                  className="rounded-lg flex items-center bg-white justify-center p-4 dark:bg-neutral-600"
+                >
+                  <HStack className="gap-2 items-center">
+                    <Unitools />
+                    <Text className="text-black dark:text-white text-xl font-thin">
+                      Universal
+                    </Text>
+                  </HStack>
+                </Link>
+              </HStack>
+            </VStack>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default Card1;

example/storybook-nativewind/src/extra-components/nativewind/quick-start-components/CardTalk.tsx

@@ -0,0 +1,41 @@
+import { Link } from '@/components/ui/link';
+import { VStack } from '@/components/ui/vstack';
+import { Text } from '@/components/ui/text';
+import { Box } from '@/components/ui/box';
+//@ts-nocheck
+import React from 'react';
+import NextImage from 'next/image';
+export const CardTalk = ({
+  title,
+  name,
+  date,
+  bannerImage,
+  link,
+  isExternal,
+}: {
+  title: string;
+  name: string;
+  date: string;
+  bannerImage: string;
+  link: string;
+  isExternal: boolean;
+}) => {
+  return (
+    <Box className="rounded-xl border max-w-[327px] border-trueGray-400  background-[linear-gradient(90deg, rgba(240, 239, 255, 0.20) 0%, rgba(205, 201, 255, 0.00) 100%), rgba(187, 210, 255, 0.20)]  dark:border-borderDark-800  dark:background-[linear-gradient(90deg, rgba(43, 39, 90, 0.20) 0%, rgba(43, 39, 90, 0.00) 100%), rgba(62, 72, 91, 0.20)] overflow-hidden">
+      <Link href={link} isExternal={isExternal}>
+        <Box className="w-[327px] h-[165px]">
+          <NextImage src={bannerImage} alt="architecture" fill={true} />
+        </Box>
+        <VStack className="py-4 px-6">
+          <Text className="pb-3 text-xl font-medium">{title}</Text>
+          <Text className="leading-md text-trueGray-700  dark:text-trueGray-400">
+            {name}
+          </Text>
+          <Text className="text-trueGray-700  dark:text-trueGray-400 text-sm font-inter">
+            {date}
+          </Text>
+        </VStack>
+      </Link>
+    </Box>
+  );
+};

example/storybook-nativewind/src/extra-components/nativewind/quick-start-components/Checkbox.tsx

@@ -0,0 +1,43 @@
+import { useMode } from '@/components/ui/gluestack-ui-provider/providerContext';
+import React from 'react';
+
+function Checkbox() {
+  const { colorMode } = useMode();
+  return colorMode === 'light' ? (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_10404_112294)">
+        <path d="M0 24H24V0H0V2.455H21.546V21.545H2.454V0H0V24Z" fill="black" />
+      </g>
+      <defs>
+        <clipPath id="clip0_10404_112294">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  ) : (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_10267_68881)">
+        <path d="M0 24H24V0H0V2.455H21.546V21.545H2.454V0H0V24Z" fill="white" />
+      </g>
+      <defs>
+        <clipPath id="clip0_10267_68881">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default Checkbox;