add primitive

apps/docs/components/CodeDemo.tsx

@@ -21,6 +21,7 @@ const DefaultDemo = () => {
 export const CodeDemo = ({
   Demo = DefaultDemo,
   actions = {},
+  name,
 }: {
   Demo?: ComponentType<Props>;
   actions?: {
@@ -29,8 +30,9 @@ export const CodeDemo = ({
     color?: boolean;
     variant?: string[];
   };
+  name?: string;
 }) => {
-  const { code } = useData() || { code: '' };
+  const code = (useData() || { [name]: '' })[name];
   const [show, setShow] = useState(false);
   const [color, setColor] = useState('zinc');
   const [space, setSpace] = useState('md');

apps/docs/pages/_meta.json

@@ -11,8 +11,20 @@
       "layout": "raw"
     }
   },
-  "doc": {
-    "title": "Documentation",
+  "styled": {
+    "title": "styled()",
+    "type": "page"
+  },
+  "primitive": {
+    "title": "Primitive",
+    "type": "page"
+  },
+  "components": {
+    "title": "Components",
+    "type": "page"
+  },
+  "unicons": {
+    "title": "Unicons",
     "type": "page"
   }
 }

apps/docs/pages/index.mdx

@@ -9,7 +9,6 @@ export default function LandingPage() {
   const config = useConfig();
   return (
     <>
-      <div className="min-h-screen">
         <div className="flex flex-col items-center gap-2 bg-brand-800 py-20 px-5">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -42,13 +41,32 @@ export default function LandingPage() {
             <Button
               text="Star us"
               variant="filled"
+              color="zinc"
               iconAfter={UilGithub}
               href={config.project.link}
               target="_blank"
             />
           </XBox>
         </div>
-      </div>
+        <div className="w-1/2 mx-auto">
+          <h3>Introduction</h3>
+
+          <p>
+            Crossed is UI lib component which worked on react-native and web based on <a href="https://tailwindcss.com/" title="tailwindcss" target="_blank">tailwindcss</a>.
+            </p><p>
+            Crossed transform className in style for native, and use power of css for web.
+            </p><p><a href="https://moti.fyi/" title="Moti" target="_blank">Moti</a> used for animation
+          </p>
+
+          <h3>Packages</h3>
+
+          <ul>
+            <li>@crossed/core</li>
+            <li>- @crossed/ui</li>
+            <li>- @crossed/unicons ([unicons](https://iconscout.com/unicons))</li>
+          </ul>
+        </div>
     </>
-  );
+
+);
 }

apps/docs/pages/primitive/_meta.json

@@ -0,0 +1,8 @@
+{
+  "introduction": {
+    "title": "Intoduction"
+  },
+  "createButton": {
+    "title": "createButton"
+  }
+}

apps/docs/pages/primitive/createButton.mdx

@@ -0,0 +1,54 @@
+import { CreateButtonWithContextDemo, CreateButtonDemo } from '@crossed/demo';
+import { CodeDemo } from 'components/CodeDemo';
+import { getStaticDemo } from 'components/getStaticDemo';
+import { Tabs } from 'components/Tabs';
+import { Table } from 'components/Table';
+
+export const getStaticProps = async (e) => {
+  const [
+    {
+      props: {
+        ssg: { code: codeSimple },
+      },
+    },
+    {
+      props: {
+        ssg: { code: codeWithContext },
+      },
+    },
+  ] = await Promise.all([
+    getStaticDemo('primitive/createButton/simple')(e),
+    getStaticDemo('primitive/createButton/withContext')(e),
+  ]);
+
+  return {
+    props: {
+      ssg: { codeSimple, codeWithContext },
+    },
+  };
+};
+
+# createButton
+
+<Tabs items={['Demo', 'Anatomy', 'Props']}>
+  <Tabs.Tab>
+    ## simple
+    <CodeDemo Demo={CreateButtonDemo} name="codeSimple" />
+    ## With context
+    <CodeDemo Demo={CreateButtonWithContextDemo} name="codeWithContext" />
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```tsx
+    <Menu>
+      <Menu.Item>
+        <Menu.Item.Title />
+        <Menu.Item.Subtitle />
+      </Menu.Item>
+    </Menu>
+    ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ## Menu
+    <Table props={[]} />
+  </Tabs.Tab>
+</Tabs>

apps/docs/pages/primitive/introduction.mdx

@@ -0,0 +1 @@
+# Introduction

packages/demo/package.json

@@ -49,6 +49,7 @@
     "tsconfig": "*"
   },
   "dependencies": {
+    "@crossed/primitive": "workspace:*",
     "@crossed/ui": "*",
     "fuse.js": "^6.6.2",
     "react-aria": "^3.27.0"

packages/demo/src/index.ts

@@ -1,3 +1,4 @@
 export * from './core/styled';
 export * from './ui';
 export * from './unicons';
+export * from './primitive';

packages/demo/src/primitive/createButton/index.ts

@@ -0,0 +1,2 @@
+export * from './simple';
+export * from './withContext';

packages/demo/src/primitive/createButton/simple.tsx

@@ -0,0 +1,24 @@
+import { createButton } from '@crossed/primitive';
+import { Box } from '@crossed/ui';
+
+const Button = createButton({
+  Root: (props) => {
+    return <button className="bg-blue-500" {...props} />;
+  },
+  Text: ({ title }: { title: string }) => {
+    return <span className="text-white">{title}</span>;
+  },
+  Icon: () => {
+    return <span>€</span>;
+  },
+});
+
+export const CreateButtonDemo = () => {
+  return (
+    <Box>
+      <Button>
+        <Button.Text title="text button" />
+      </Button>
+    </Box>
+  );
+};

packages/demo/src/primitive/createButton/withContext.tsx

@@ -0,0 +1,32 @@
+import { createButton, useButtonContext } from '@crossed/primitive';
+import { Box } from '@crossed/ui';
+
+const Button = createButton(
+  {
+    Root: (props) => {
+      return <button className="bg-blue-500" {...props} />;
+    },
+    Text: () => {
+      // const { title } = useButtonContext();
+      return <span className="text-white">{"title"}</span>;
+    },
+    Icon: () => {
+      return <span>€</span>;
+    },
+  },
+  {
+    context: {
+      title: 'Hello World!',
+    },
+  }
+);
+
+export const CreateButtonWithContextDemo = () => {
+  return (
+    <Box>
+      <Button>
+        <Button.Text title="text button" />
+      </Button>
+    </Box>
+  );
+};

packages/demo/src/primitive/index.ts

@@ -0,0 +1 @@
+export * from './createButton';

packages/primitive/.gitignore

@@ -0,0 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# misc
+.DS_Store
+*.pem
+
+# build
+dist
+lib
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo

packages/primitive/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@crossed/primitive",
+  "description": "A universal & performant styling library for React Native, Next.js & React",
+  "version": "1.0.0",
+  "main": "lib/commonjs/index",
+  "types": "lib/typescript/index.d.ts",
+  "module": "lib/module/index",
+  "react-native": "src/index",
+  "source": "src/index",
+  "typings": "lib/typescript/index.d.ts",
+  "scripts": {
+    "release": "release-it",
+    "clean": "rm -rf lib",
+    "watch": "crossed-build --watch",
+    "build": "crossed-build",
+    "dev:web": "cd example/native && yarn web --clear"
+  },
+  "devDependencies": {
+    "@crossed/build": "*",
+    "@types/react": "^18.2.20",
+    "@types/react-native": "^0.72.2",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "jest": "^29.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-native": "^0.72.3",
+    "react-native-web": "^0.19.7",
+    "tsconfig": "*"
+  },
+  "dependencies": {
+    "@crossed/core": "*",
+    "@floating-ui/react": "^0.25.1",
+    "@gorhom/portal": "^1.0.14",
+    "@react-native-aria/focus": "^0.2.8",
+    "@react-native-aria/interactions": "^0.2.10",
+    "react-aria": "^3.27.0"
+  },
+  "files": [
+    "lib/",
+    "src/"
+  ]
+}

packages/primitive/src/Button/Button.tsx

@@ -0,0 +1,8 @@
+import { forwardRef } from 'react';
+import { useContext } from './context';
+
+export const createButtonMain = <T,>(StyledButton: React.ComponentType<T>) =>
+  forwardRef<any, T>((props, ref) => {
+    const context = useContext();
+    return <StyledButton {...context} {...props} ref={ref} />;
+  });

packages/primitive/src/Button/ButtonIcon.tsx

@@ -0,0 +1,8 @@
+import { ComponentType, forwardRef } from 'react';
+import { useContext } from './context';
+
+export const createButtonIcon = <T,>(StyledIcon: ComponentType<T>) =>
+  forwardRef<any, T>((props, ref) => {
+    const context = useContext();
+    return <StyledIcon {...context} {...props} ref={ref} />;
+  });

packages/primitive/src/Button/ButtonText.tsx

@@ -0,0 +1,8 @@
+import { ComponentType, forwardRef } from 'react';
+import { useContext } from './context';
+
+export const createButtonText = <T,>(StyledText: ComponentType<T>) =>
+  forwardRef<any, T>((props, ref) => {
+    const context = useContext();
+    return <StyledText {...context} {...props} ref={ref} />;
+  });

packages/primitive/src/Button/context.ts

@@ -0,0 +1,3 @@
+import { createScope } from '@crossed/core';
+
+export const [Provider, useContext] = createScope<any>({});