remove moti, move classname on data-, add postprocessor

README.md

@@ -22,13 +22,11 @@
 ### Introduction
 Crossed is UI lib component which worked on react-native and web based on [tailwindcss](https://tailwindcss.com/).  
 Crossed transform className in style for native, and use power of css for web.  
-[Moti](https://moti.fyi/) used for animation.
 
 ### Documentation
 See [documentation](https://lobor.github.io/crossed).
 
 ### Inspiration
- - [moti](https://moti.fyi/)
  - [tamagui](https://tamagui.dev/)
  - [gluestack-ui](https://ui.gluestack.io/)
  - [gluestack-style](https://style.gluestack.io/)

apps/docs/package.json

@@ -41,6 +41,8 @@
     "@types/node": "18.11.10",
     "@types/react": "^18.2.20",
     "babel-preset-react-native": "^4.0.1",
+    "modify-selectors": "^2.0.0",
+    "postcss-load-config": "^4.0.1",
     "typescript": "^5.1.6"
   }
 }

apps/docs/pages/components/_meta.json

@@ -2,9 +2,6 @@
   "layout": {
     "title": "Layout"
   },
-  "animations": {
-    "title": "Animations"
-  },
   "typography": {
     "title": "Typography"
   },

apps/docs/pages/index.mdx

@@ -55,8 +55,7 @@ export default function LandingPage() {
             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>
+            </p>
 
           <h3>Packages</h3>
 

apps/docs/postcss.config.js

@@ -1,6 +1,27 @@
-module.exports = {
+/** @type {import('postcss-load-config').Config} */
+const config = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    'tailwindcss': {},
+    'autoprefixer': {},
+    'modify-selectors': {
+      enable: true,
+      modify: [
+        {
+          match: '*',
+          with: (selector) => {
+            const regEx = new RegExp('^\\.', 'g');
+            if (selector.match(regEx)) {
+              return `${selector}, [data-class-name~="${selector.replace(
+                regEx,
+                ''
+              )}"]`;
+            }
+            return selector;
+          },
+        },
+      ],
+    },
   },
 };
+
+module.exports = config;

apps/docs/tailwind.config.js

@@ -1,4 +1,5 @@
-const path = require('path');
+// const path = require('path');
+// const plugin = require('tailwindcss/plugin');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -9,17 +10,7 @@ module.exports = {
     './node_modules/@crossed/demo/lib/**/*.{js,jsx,ts,tsx,md,mdx}',
     './node_modules/@crossed/ui/lib/**/*.{js,jsx,ts,tsx,md,mdx}',
     './theme.config.tsx',
-    // path.join(
-    //   path.dirname(require.resolve('@crossed/demo')),
-    //   '**/*.{js,jsx,ts,tsx,md,mdx}'
-    // ),
-    // path.join(path.dirname(require.resolve('@crossed/ui')), '**/*.{js,jsx,ts,tsx,md,mdx}')
   ],
-  // safelist: [
-  //   {
-  //     pattern: /./,
-  //   },
-  // ],
   theme: {
     extend: {
       colors: {
@@ -37,5 +28,4 @@ module.exports = {
       },
     },
   },
-  plugins: [],
 };

apps/expo/app/(tabs)/index.tsx

@@ -1,32 +1,14 @@
-import { YBox, Heading, Text, Button, Input, Select } from '@crossed/ui';
+import { YBox, Heading, Text, Button } from '@crossed/ui';
 
 export default function TabOneScreen() {
   return (
     <YBox space="lg">
       <Heading order={3}>Heading</Heading>
       <Text className="text-white">Text</Text>
-      <Button variant={'filled'} color="rose">
+      <Button variant={'filled'}>
         <Button.Text>Press</Button.Text>
       </Button>
-      <Input label="Test" />
-      <Select>
-        <Select.Label>Size</Select.Label>
-        <Select.Content>
-          <Select.Option value={'xs'}>
-            <Text>xs</Text>
-          </Select.Option>
-          <Select.Option value={'sm'}>
-            <Text>sm</Text>
-          </Select.Option>
-          <Select.Option value={'md'}>
-            <Text>md</Text>
-          </Select.Option>
-          {/* <Select.Option value={'sm'}>sm</Select.Option>
-          <Select.Option value={'md'}>md</Select.Option>
-          <Select.Option value={'lg'}>lg</Select.Option>
-          <Select.Option value={'xl'}>xl</Select.Option> */}
-        </Select.Content>
-      </Select>
+      {/* <Input label="Test" /> */}
     </YBox>
   );
 }

package.json

@@ -5,7 +5,7 @@
   "description": "cross ui lib react-native and web",
   "scripts": {
     "web": "cd apps/web && yarn dev",
-    "native": "cd apps/native && yarn start",
+    "expo": "turbo run start --filter=crossed-expo",
     "docs": "turbo run dev --filter=crossed-docs",
     "test": "bash ./scripts/test.sh",
     "dev": "turbo run dev",

packages/core/package.json

@@ -69,7 +69,6 @@
     "src/"
   ],
   "peerDependencies": {
-    "moti": "^0.26.0",
     "react-native-reanimated": "^3.4.2"
   }
 }

packages/core/src/index.ts

@@ -8,5 +8,4 @@ export * from './useUncontrolled';
 export * from './cva';
 export { twMerge as merge } from 'tailwind-merge';
 export { useDeviceContext, useAppColorScheme, default as tw } from 'twrnc';
-export type * from 'moti/build/index';
 export type * from 'react-native-reanimated';

packages/core/src/styleSheet/index.ts

@@ -0,0 +1,7 @@
+import tw from 'twrnc';
+
+export class StyleSheet {
+  static create(baseClassName: string) {
+    return tw.style(baseClassName);
+  }
+}

packages/core/src/styleSheet/index.web.ts

@@ -0,0 +1,5 @@
+export class StyleSheet {
+  static create(baseClassName: string) {
+    return baseClassName;
+  }
+}

packages/core/src/styled.tsx

@@ -1,4 +1,3 @@
-import 'raf/polyfill';
 import type {
   ComponentType,
   ForwardRefExoticComponent,
@@ -7,7 +6,7 @@ import type {
 } from 'react';
 import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import tw from 'twrnc';
-import { Platform, StyleSheet } from 'react-native';
+import { Platform } from 'react-native';
 import type { GetProps } from './types';
 import { withStaticProperties } from './withStaticProperties';
 import { composeEventHandlers } from './composeEventHandlers';
@@ -17,10 +16,11 @@ import {
   ConfigSchema,
   Props,
   crossed,
+  cx,
   merge,
 } from './cva';
 import { twMerge } from 'tailwind-merge';
-import type { Style } from 'twrnc/dist/esm/types';
+import { StyleSheet } from './styleSheet';
 
 export const styled = <
   P extends Record<string, any>,
@@ -60,6 +60,20 @@ export const styled = <
     const [hover, setHover] = useState(false);
     const [focus, setFocus] = useState(false);
 
+    const stateRef = useRef({
+      active,
+      focus,
+      hover,
+    });
+
+    useEffect(() => {
+      stateRef.current = {
+        active,
+        focus,
+        hover,
+      };
+    }, [hover, focus, active]);
+
     const { componentProps, variantProps } = Object.entries(props).reduce<{
       componentProps: P;
       variantProps: Props<T, P>;
@@ -95,33 +109,32 @@ export const styled = <
       );
     }, [extendClassName?.className, props.className, styles.className]);
 
+    const variantClassName = useMemo(() => {
+      const {
+        active: activeRef,
+        focus: focusRef,
+        hover: hoverRef,
+      } = stateRef.current;
+      let from =
+        (focusRef
+          ? styles[':focus']?.className
+          : hoverRef
+          ? styles[':hover']?.className
+          : activeRef
+          ? styles[':active']?.className
+          : styles.className) || styles.className;
+      return from;
+    }, [hover, active, props.disabled, focus, styles]);
+
     const styleProps = useMemo(() => {
       return Platform.OS === 'web'
-        ? StyleSheet.create({
-            root: {
-              $$css: true,
-              ...baseClassName.split(' ').reduce<any>((acc, className) => {
-                acc[`___${className}`] = className;
-                return acc;
-              }, {}),
-            },
-          }).root
-        : tw.style(baseClassName);
-    }, [baseClassName]);
-
-    const stateRef = useRef({
-      active,
-      focus,
-      hover,
-    });
-
-    useEffect(() => {
-      stateRef.current = {
-        active,
-        focus,
-        hover,
-      };
-    }, [hover, focus, active]);
+        ? {
+            className: StyleSheet.create(
+              `${baseClassName} ${variantClassName}`
+            ),
+          }
+        : { style: tw.style(baseClassName, variantClassName) };
+    }, [baseClassName, variantClassName]);
 
     const NewComp = useMemo(() => {
       return styles.props?.as ? styles.props?.as : Component;
@@ -131,7 +144,14 @@ export const styled = <
       <NewComp
         ref={ref}
         {...(componentProps as any)}
-        style={[styleProps, convertValueToString(componentProps.style || {})]}
+        dataSet={{
+          className: cx(
+            styleProps.className,
+            variantClassName,
+            componentProps.className
+          ),
+        }}
+        style={[styleProps.style || {}, componentProps.style || {}]}
         onPressIn={composeEventHandlers(componentProps?.onPressIn, () => {
           setActive(true);
         })}
@@ -162,41 +182,3 @@ export const styled = <
     },
   });
 };
-
-const convertValueToString = (json: Style) => {
-  return Object.entries(json).reduce((acc, [key, value]) => {
-    let valueTmp = value;
-
-    if (typeof value === 'number') {
-      if (
-        key.startsWith('padding') ||
-        key.startsWith('margin') ||
-        ['fontSize', 'lineHeight'].includes(key)
-      ) {
-        valueTmp = `${value}px`;
-      }
-      if (
-        [
-          'zIndex',
-          'borderRadius',
-          'gap',
-          'flexShrink',
-          'borderWidth',
-          'borderLeftWidth',
-          'borderRightWidth',
-          'borderBottomWidth',
-          'borderTopWidth',
-          'flexGrow',
-          'height',
-          'width',
-        ].includes(key)
-      ) {
-        valueTmp = value.toString();
-      }
-    }
-    return {
-      ...acc,
-      [key]: valueTmp,
-    };
-  }, {});
-};

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

@@ -1,4 +1,4 @@
-import { createButton, useButtonContext } from '@crossed/primitive';
+import { createButton } from '@crossed/primitive';
 import { Box } from '@crossed/ui';
 
 const Button = createButton(
@@ -8,7 +8,7 @@ const Button = createButton(
     },
     Text: () => {
       // const { title } = useButtonContext();
-      return <span className="text-white">{"title"}</span>;
+      return <span className="text-white">{'title'}</span>;
     },
     Icon: () => {
       return <span>€</span>;

packages/next-adapter/src/withCrossed.ts

@@ -81,7 +81,6 @@ export default function withCrossed(nextConfig: any = {}) {
     new Set([
       '@iconscout/react-native-unicons',
       'react-native-reanimated',
-      'moti',
       ...rootDependencyList,
       ...parentDependencyList,
       ...rootExactDependencyList,

packages/ui/package.json

@@ -56,7 +56,6 @@
     "@iconscout/react-native-unicons": "^2.0.2",
     "class-variance-authority": "^0.7.0",
     "inline-style-prefixer": "^6.0.1",
-    "moti": "^0.26.0",
     "normalize-css-color": "^1.0.2",
     "raf": "^3.4.1",
     "react-aria": "^3.27.0",