style: code formatted

Author: coderdiaz

README.md

@@ -6,7 +6,6 @@
 ![GitHub Issues](https://img.shields.io/github/issues/coderdiaz/jacaranda?style=flat)
 ![GitHub Stars](https://img.shields.io/github/stars/coderdiaz/jacaranda?style=flat)
 
-
 > ⚠️ **BETA SOFTWARE**: This library is in active development and not yet recommended for production use. APIs may change without notice. Feel free to try it out and provide feedback!
 
 Provides a way to styling components in React Native with better experience and composability. The key feature is the ability to create multi-variants styles with a type-safe definition inspired by [Stitches](https://stitches.dev/docs/variants) and [CVA](https://cva.style/docs/getting-started/variants) (for React apps).
@@ -26,6 +25,7 @@ Provides a way to styling components in React Native with better experience and
 - [ ] Default design tokens.
 
 ### Create your config file
+
 To configure `Jacaranda`, create a `jacaranda.config.ts` file (`.js` works too) to define your reusable design tokens and import the `defineTokens` function.
 
 ```tsx
@@ -34,6 +34,7 @@ import { defineTokens } from 'jacaranda';
 ```
 
 This function receives an object with the design tokens.
+
 - `colors`: Define your colors design tokens.
 - `space`: Define your spacing.
 - `fonts`: Define your fonts.
@@ -42,7 +43,7 @@ This function receives an object with the design tokens.
 
 And returns a `styles` function that you can use to style your components.
 
-```tsx 
+```tsx
 // jacaranda.config.ts
 import { defineTokens } from 'jacaranda';
 
@@ -73,8 +74,9 @@ export const { styles } = defineTokens({
     xl: 32,
     xxl: 40,
   },
-})
+});
 ```
+
 ### Import and use it
 
 After the tokens are defined, you can use the design tokens in your components. You'll be importing the `styles` function from the `jacaranda.config.ts` file.
@@ -124,6 +126,7 @@ const buttonStyles = styles({
 ```
 
 ### TypeScript
+
 #### Extract variants from a component
 
 You can use the `VariantProps` type to extract the variants from a component.

packages/app-typescript/App.tsx

@@ -23,6 +23,6 @@ const sty = StyleSheet.create({
     backgroundColor: '#fff',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 12
+    gap: 12,
   },
 });

packages/app-typescript/components/Button.tsx

@@ -1,18 +1,19 @@
 import { TouchableOpacity } from 'react-native';
-import { type VariantProps } from 'jacaranda'
+import { type VariantProps } from 'jacaranda';
 import { Typography } from './Typography';
 import { styles } from '../jacaranda.config';
 
-
 type ButtonProps = VariantProps<typeof buttonStyles> & {
   children?: React.ReactNode;
 };
 
 export const Button = (props: ButtonProps) => {
-  return <TouchableOpacity style={buttonStyles(props)}>
-    <Typography>{props.children}</Typography>
-  </TouchableOpacity>
-}
+  return (
+    <TouchableOpacity style={buttonStyles(props)}>
+      <Typography>{props.children}</Typography>
+    </TouchableOpacity>
+  );
+};
 
 const buttonStyles = styles({
   base: {
@@ -28,9 +29,9 @@ const buttonStyles = styles({
       secondary: {
         backgroundColor: '$colors.secondary500',
       },
-    }
+    },
   },
   defaultVariants: {
-    color: 'primary'
-  }
-})
+    color: 'primary',
+  },
+});

packages/app-typescript/components/Typography.tsx

@@ -7,8 +7,8 @@ type TypographyProps = VariantProps<typeof typographyStyles> & {
 };
 
 export const Typography = (props: TypographyProps) => {
-  return <Text style={typographyStyles(props)}>{props.children}</Text>
-}
+  return <Text style={typographyStyles(props)}>{props.children}</Text>;
+};
 
 const typographyStyles = styles({
   base: {},
@@ -34,12 +34,12 @@ const typographyStyles = styles({
       left: { textAlign: 'left' },
       center: { textAlign: 'center' },
       right: { textAlign: 'right' },
-    }
+    },
   },
   defaultVariants: {
     level: 3,
     color: 'white',
     weight: 'medium',
-    align: 'left'
-  }
-})
+    align: 'left',
+  },
+});

packages/app-typescript/jacaranda.config.ts

@@ -31,5 +31,5 @@ export const { styles } = createTokens({
     6: 24,
     7: 28,
     8: 32,
-  }
+  },
 });

packages/app/App.js

@@ -2,10 +2,12 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { styles } from './jacaranda.config';
 
 export const Button = (props) => {
-  return (<TouchableOpacity style={buttonStyles({ intent: props.intent, size: props.size })}>
-    <Text>Button</Text>
-  </TouchableOpacity>)
-}
+  return (
+    <TouchableOpacity style={buttonStyles({ intent: props.intent, size: props.size })}>
+      <Text>Button</Text>
+    </TouchableOpacity>
+  );
+};
 
 const buttonStyles = styles({
   base: { borderRadius: '$spacing.md' },
@@ -16,20 +18,20 @@ const buttonStyles = styles({
       },
       secondary: {
         backgroundColor: '$colors.secondary50',
-      }
+      },
     },
     size: {
       md: {
         paddingHorizontal: '$spacing.md',
         paddingVertical: '$spacing.sm',
-      }
-    }
+      },
+    },
   },
   defaultVariants: {
     intent: 'primary',
-    size: 'md'
-  }
-})
+    size: 'md',
+  },
+});
 
 export default function App() {
   return (

packages/app/jacaranda.config.js

@@ -1,4 +1,4 @@
-import { defineTokens } from "jacaranda";
+import { defineTokens } from 'jacaranda';
 
 export const { styles } = defineTokens({
   colors: {
@@ -28,4 +28,4 @@ export const { styles } = defineTokens({
     xl: 32,
     xxl: 40,
   },
-})
+});

packages/jacaranda/package.json

@@ -78,4 +78,4 @@
     "stylsheets",
     "design-system"
   ]
-}
+}

packages/jacaranda/src/index.test.ts

@@ -200,13 +200,15 @@ describe('defineTokens', () => {
         size: { small: {} },
         type: { primary: {} },
       },
-      compoundVariants: [{
-        variants: { size: 'small' as const, type: 'primary' as const },
-        style: {
-          backgroundColor: '$colors.primary',
-          padding: '$space.sm',
+      compoundVariants: [
+        {
+          variants: { size: 'small' as const, type: 'primary' as const },
+          style: {
+            backgroundColor: '$colors.primary',
+            padding: '$space.sm',
+          },
         },
-      }],
+      ],
     });
 
     expect(result({ size: 'small', type: 'primary' })).toEqual({
@@ -263,4 +265,4 @@ describe('defineTokens', () => {
       lineHeight: 1.5,
     });
   });
-}); 
+});

packages/jacaranda/src/index.ts

@@ -48,9 +48,9 @@ type ResolvedStyle = ViewStyle & TextStyle & ImageStyle;
 // StyleObject now extends ResolvedStyle
 type StyleObject = {
   [K in keyof ResolvedStyle]?:
-  | ResolvedStyle[K]
-  | (string extends ResolvedStyle[K] ? `$${string}` : never)
-  | (number extends ResolvedStyle[K] ? `$${string}` : never);
+    | ResolvedStyle[K]
+    | (string extends ResolvedStyle[K] ? `$${string}` : never)
+    | (number extends ResolvedStyle[K] ? `$${string}` : never);
 };
 
 // Define the VariantOptions type to ensure type safety in variant definitions
@@ -147,7 +147,6 @@ export function styles<V extends VariantOptions<V>>(config: VariantStyleConfig<V
   };
 }
 
-
 /**** Tokens definition */
 
 // Define allowed token categories and their value types
@@ -206,15 +205,20 @@ export function defineTokens<T extends TokenConfig>(tokenConfig: T): CreateToken
     const resolvedBase = config.base ? resolveTokens(config.base, tokens) : config.base;
 
     // Resolve tokens in variants
-    const resolvedVariants = config.variants ? Object.entries(config.variants).reduce((acc, [key, variantGroup]: [string, any]) => {
-      const resolvedGroup = Object.entries(variantGroup).reduce((groupAcc, [variantKey, styles]: [string, any]) => {
-        return {
-          ...groupAcc,
-          [variantKey]: resolveTokens(styles, tokens),
-        };
-      }, {});
-      return { ...acc, [key]: resolvedGroup };
-    }, {}) : {};
+    const resolvedVariants = config.variants
+      ? Object.entries(config.variants).reduce((acc, [key, variantGroup]: [string, any]) => {
+          const resolvedGroup = Object.entries(variantGroup).reduce(
+            (groupAcc, [variantKey, styles]: [string, any]) => {
+              return {
+                ...groupAcc,
+                [variantKey]: resolveTokens(styles, tokens),
+              };
+            },
+            {},
+          );
+          return { ...acc, [key]: resolvedGroup };
+        }, {})
+      : {};
 
     // Resolve tokens in compound variants
     const resolvedCompoundVariants = config.compoundVariants?.map((compound: any) => ({

pnpm-workspace.yaml

@@ -1,2 +1,2 @@
 packages:
-  - 'packages/*'
+  - 'packages/*'