Merge pull request #8 from lobor/addTheme

Add theme
Paymium · Sep 24, 2023 · e37aae6 · e37aae6
2 parents 9c3eff7 + 4aa0db6
commit e37aae6
Show file tree

Hide file tree

Showing 82 changed files with 6,257 additions and 5,945 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["crossed-docs", "crossed-expo", "@crossed/demo"]
+  "ignore": ["crossed-docs", "crossed-expo", "@crossed/demo", "server-component"]
 }
diff --git a/.changeset/weak-squids-stare.md b/.changeset/weak-squids-stare.md
@@ -0,0 +1,7 @@
+---
+'@crossed/primitive': minor
+'@crossed/styled': minor
+'@crossed/ui': minor
+---
+
+add theme dark light
diff --git a/.github/workflows/merge-request.yml b/.github/workflows/merge-request.yml
@@ -14,12 +14,28 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
       # 👇 Build steps
-      - name: Set up Node.js
-        uses: pnpm/action-setup@v2
+      - name: Install Node.js
+        uses: actions/setup-node@v3
         with:
-          version: 7
+          node-version: 18
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lock
       - name: Linter
         run: pnpm lint
       - name: Build

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -0,0 +1,53 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lock
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          # This expects you to have a script called release which does a build for your packages and calls changeset publish
+          publish: pnpm build
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/apps/docs/components/CodeDemo.tsx b/apps/docs/components/CodeDemo.tsx
@@ -1,4 +1,4 @@
-import { UilCheck } from '@iconscout/react-native-unicons';
+import { UilCheck, UilEye, UilEyeSlash } from '@iconscout/react-native-unicons';
 import { Props } from '@crossed/demo/lib/typescript/props';
 import {
   Box,
@@ -33,14 +33,18 @@ export const CodeDemo = ({
 }) => {
   const code = (useData() || { [name]: '' })[name] || '';
   const [show, setShow] = useState(false);
-  const [color, setColor] = useState('zinc');
+  const [color, setColor] = useState('neutral');
   const [space, setSpace] = useState('md');
   const [size, setSize] = useState('md');
   const [variant, setVariant] = useState(actions.variant?.[0] || '');
   const hasActions = Object.keys(actions || {}).length > 0;
 
   return (
-    <Box className="dark:border-zinc-800 border-zinc-800 border rounded-md flex-col">
+    <Box
+      $dark={{ className: ['border-neutral-800 bg-neutral-900'] }}
+      $light={{ className: ['border-neutral-200 bg-neutral-100'] }}
+      className="border rounded-md flex-col overflow-hidde"
+    >
       <Box className="flex-row flex">
         <Box className="flex-1 p-4 justify-center items-center">
           <Demo
@@ -53,23 +57,25 @@ export const CodeDemo = ({
         </Box>
         <YBox
           className={`${
-            hasActions ? 'border-l-2 p-4' : 'w-0'
-          } dark:border-zinc-800 border-zinc-200 relative pb-8 max-w-[26%]`}
+            hasActions ? 'border-l p-4' : 'w-0'
+          } relative pb-8 max-w-[26%]`}
+          $dark={{ className: ['border-neutral-800'] }}
+          $light={{ className: ['border-neutral-200'] }}
           space="sm"
         >
           {hasActions && (
             <>
               {actions.variant && (
                 <Select
-                  value={variant}
+                  value={variant as any}
                   onChangeValue={setVariant}
                   label="Variant"
                   items={actions.variant.map((v) => ({ value: v, label: v }))}
                 />
               )}
               {actions.space && (
                 <Select
-                  value={space}
+                  value={space as any}
                   onChangeValue={setSpace}
                   label="Space"
                   items={[
@@ -83,7 +89,7 @@ export const CodeDemo = ({
               )}
               {actions.size && (
                 <Select
-                  value={size}
+                  value={size as any}
                   onChangeValue={setSize}
                   label="Size"
                   items={[
@@ -107,7 +113,7 @@ export const CodeDemo = ({
                       ).map((c) => {
                         return (
                           <Button
-                            aria-label={`Color ${color}`}
+                            aria-label={`Color ${c}`}
                             variant="filled"
                             size="xs"
                             key={c}
@@ -132,13 +138,15 @@ export const CodeDemo = ({
           {code.length > 0 && (
             <Box className="absolute bottom-0 right-0">
               <Button
+                className="relative"
                 aria-label="Show code"
-                color="violet"
-                variant="filled"
                 onPress={() => setShow((e) => !e)}
                 size="xs"
+                variant="unstyled"
               >
-                <Button.Text>{show ? 'Hide' : 'Show'}</Button.Text>
+                <Button.Icon>
+                  {!show ? <UilEye /> : <UilEyeSlash />}
+                </Button.Icon>
               </Button>
             </Box>
           )}

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -31,9 +31,11 @@
     "nextra": "latest",
     "nextra-theme-docs": "latest",
     "postcss": "^8.4.27",
+    "raf": "^3.4.1",
     "react": "^18.2.0",
     "react-code-blocks": "^0.1.3",
     "react-dom": "^18.2.0",
+    "react-native-reanimated-swc-plugin": "^0.3.0",
     "react-native-svg": "^13.10.0",
     "react-native-web": "^0.19.7",
     "tailwindcss": "^3.3.3"

diff --git a/apps/docs/pages/_app.mdx b/apps/docs/pages/_app.mdx
@@ -1,10 +1,14 @@
+import 'raf/polyfill';
 import '../styles/global.css';
-import { CrossedProvider } from '@crossed/ui';
+import { CrossedTheme } from '@crossed/ui';
+import { PortalProvider } from '@gorhom/portal';
 
 export default function App({ Component, pageProps }) {
   return (
-    <CrossedProvider defaultTheme={'dark'}>
-      <Component {...pageProps} />
-    </CrossedProvider>
+    <PortalProvider>
+      <CrossedTheme defaultTheme={'dark'}>
+        <Component {...pageProps} />
+      </CrossedTheme>
+    </PortalProvider>
   );
 }
diff --git a/apps/docs/pages/components/display/menu.mdx → apps/docs/pages/components/display/list.mdx b/apps/docs/pages/components/display/menu.mdx → apps/docs/pages/components/display/list.mdx
@@ -1,29 +1,29 @@
-import { MenuDemo } from '@crossed/demo';
+import { ListDemo } from '@crossed/demo';
 import { CodeDemo } from 'components/CodeDemo';
 import { getStaticDemo } from 'components/getStaticDemo';
 import { Tabs } from 'components/Tabs';
 import { Table, Tr, Td, Th } from 'nextra/components';
 
-export const getStaticProps = getStaticDemo('ui/display/Menu');
+export const getStaticProps = getStaticDemo('ui/display/List');
 
-# Menu
+# List
 
 <Tabs items={['Demo', 'Anatomy', 'Props']}>
   <Tabs.Tab>
-    <CodeDemo Demo={MenuDemo} actions={{ color: true }} />
+    <CodeDemo Demo={ListDemo} actions={{ color: true, size: true }} />
   </Tabs.Tab>
   <Tabs.Tab>
     ```tsx
-    <Menu>
-      <Menu.Item>
-        <Menu.Item.Title />
-        <Menu.Item.Subtitle />
-      </Menu.Item>
-    </Menu>
+    <List>
+      <List.Item>
+        <List.Item.Title />
+        <List.Item.Subtitle />
+      </List.Item>
+    </List>
     ```
   </Tabs.Tab>
   <Tabs.Tab>
-    ## Menu
+    ## List
     <Table className="table-auto overflow-hidden w-full">
       <Tr>
         <Th>Props</Th>

diff --git a/apps/docs/pages/components/forms/button.mdx b/apps/docs/pages/components/forms/button.mdx
@@ -36,7 +36,7 @@ export const getStaticProps = getStaticDemo('ui/forms/Button');
       ["loading", "boolean", "false", "Loading state button"],
       ["variant", "outline | filled", "outline", "Variant of button"],
       ["size", "xs | sm | md | lg | xl", "md", "Size of button"],
-      ["color", "type Colors", "zinc", "Color of button"],
+      ["color", "type Colors", "neutral", "Color of button"],
       ["text", "string", "-", "Text of button in simple usage"],
       ["icon", "ComponentType<{ size: number; color: string; }>", "-", "Icon on left in simple usage"],
       ["iconAfter", "ComponentType<{ size: number; color: string; }>", "-", "Icon on right in simple usage"],
@@ -47,7 +47,7 @@ export const getStaticProps = getStaticDemo('ui/forms/Button');
     <Table props={[
       ["variant", "outline | filled", "outline", "Specify variant of text without global context of button"],
       ["size", "xs | sm | md | lg | xl", "md", "Specify size of text without global context of button"],
-      ["color", "type Colors", "zinc", "Specify color of text without global context of button"],
+      ["color", "type Colors", "neutral", "Specify color of text without global context of button"],
     ]} />
 
 ## Button.Icon

diff --git a/apps/docs/pages/components/forms/checkbox.mdx b/apps/docs/pages/components/forms/checkbox.mdx
@@ -34,7 +34,7 @@ export const getStaticProps = getStaticDemo('ui/forms/Checkbox');
           ["onChangeValue", "(value: boolean) => void", "undefined", "Fire when user toggle checkbox"],
           ["variant", "outline | filled", "outline", "Variant of button"],
           ["size", "xs | sm | md | lg | xl", "md", "Size of button"],
-          ["color", "type Colors", "zinc", "Color of button"],
+          ["color", "type Colors", "neutral", "Color of button"],
         ]}
       />
 
@@ -46,7 +46,7 @@ export const getStaticProps = getStaticDemo('ui/forms/Checkbox');
           ["onChangeValue", "(value: boolean) => void", "undefined", "Fire when user toggle checkbox"],
           ["variant", "outline | filled", "outline", "Variant of button"],
           ["size", "xs | sm | md | lg | xl", "md", "Size of button"],
-          ["color", "type Colors", "zinc", "Color of button"],
+          ["color", "type Colors", "neutral", "Color of button"],
         ]}
       />
 

diff --git a/apps/docs/pages/components/forms/input.mdx b/apps/docs/pages/components/forms/input.mdx
@@ -38,7 +38,7 @@ export const getStaticProps = getStaticDemo('ui/forms/Input');
     ["onChangeValue", "(params: string) => void", "undefined", "Event when on change value of input"],
     ["variant", "outline | filled", "outline", "Variant of button"],
     ["size", "xs | sm | md | lg | xl", "md", "Size of button"],
-    ["color", "type Colors", "zinc", "Color of button"],
+    ["color", "type Colors", "neutral", "Color of button"],
     ["className", "string", "undefined", "Classname pass to children"],
    ]} />
 

diff --git a/apps/docs/pages/components/forms/select.mdx b/apps/docs/pages/components/forms/select.mdx
@@ -38,7 +38,7 @@ export const getStaticProps = getStaticDemo('ui/forms/Select');
     <Table props={[
       ["variant", "outline | filled", "outline", "Variant of button"],
       ["size", "xs | sm | md | lg | xl", "md", "Size of button"],
-      ["color", "type Colors", "zinc", "Color of button"],
+      ["color", "type Colors", "neutral", "Color of button"],
       ["value", "any", "undefined", "Value of select"],
       ["defaultValue", "any", "undefined", "Default value of select"],
       ["placeholder", "string", "undefined", "Placeholder of Select"],

diff --git a/apps/docs/pages/components/installation.mdx b/apps/docs/pages/components/installation.mdx
@@ -46,7 +46,7 @@ const config: Config = {
   ],
   // ...
 };
-export default config;/@crossed/ui/lib/**/*.{js,jsx,ts,tsx,md,mdx}',
+export default config;,
 
 ```
 ### Postcss
@@ -80,15 +80,15 @@ module.exports = {
 
 ```
 
-### Add CrossedProvider
+### Add CrossedTheme
 ```typescript
-import { CrossedProvider } from "@crossed/ui"
+import { CrossedTheme } from "@crossed/ui"
 
 export default function App({ Component, pageProps }) {
   return (
-    <CrossedProvider defaultTheme={'dark'}>
+    <CrossedTheme defaultTheme={'dark'}>
       <Component {...pageProps} />
-    </CrossedProvider>
+    </CrossedTheme>
   );
 }
 ```

diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
@@ -21,16 +21,16 @@ export default function LandingPage() {
               <path d="M5 70.48l19.108-19.108a2.029 2.029 0 0 0 0-2.87L5.058 29.45l7.545-7.546 21.89 21.89a8.685 8.685 0 0 1 0 12.283L12.659 77.912 5 70.48zm90-41.03L75.892 48.559a2.029 2.029 0 0 0 0 2.87l19.05 19.051-7.545 7.546-21.89-21.89a8.685 8.685 0 0 1 0-12.283l21.834-21.834L95 29.45zM29.428 5l19.108 19.108a2.029 2.029 0 0 0 2.87 0l19.052-19.05 7.546 7.545-21.89 21.89a8.685 8.685 0 0 1-12.283 0L21.997 12.659 29.428 5zm41.144 90L51.463 75.892a2.029 2.029 0 0 0-2.87 0l-19.051 19.05-7.546-7.545 21.89-21.89a8.685 8.685 0 0 1 12.283 0l21.834 21.834L70.572 95z"></path>
             </g>
           </svg>
-          <h1 className="text-6xl mb-5">crossed</h1>
-          <h2 className="border-0 text-2xl text-center mb-10">
+          <h1 className="text-6xl mb-5 text-white">crossed</h1>
+          <h2 className="border-0 text-2xl text-center mb-10 text-white">
             Universal Headless Components built with tailwindcss for{" "}
             <b>react-native</b> + <b>web</b>
           </h2>
           <XBox space="md" className="justify-center">
             <Button
               text="Star us"
               variant="filled"
-              color="zinc"
+              color="neutral"
               iconAfter={UilGithub}
               href={config.project.link}
               target="_blank"

diff --git a/apps/docs/pages/primitive/_meta.json b/apps/docs/pages/primitive/_meta.json
@@ -14,6 +14,8 @@
   "createLabel": "createLabel",
   "createList": "createList",
   "createDropdown": "createDropdown",
+  "createSelect": "createSelect",
   "createSheet": "createSheet",
-  "createModal": "createModal"
+  "createModal": "createModal",
+  "createInput": "createInput"
 }