feat: bump pakages, fixed types, added Theme in colors and remove The…

…me props in primitives

.changeset/witty-teachers-dance.md

@@ -0,0 +1,12 @@
+---
+'@design-blocks/primitives': minor
+'@design-blocks/colors': minor
+'@design-blocks/system': minor
+'@design-blocks/theme': minor
+'@design-blocks/types': minor
+'@design-blocks/utils': minor
+'@design-blocks/core': minor
+'@design-blocks/native': minor
+---
+
+Bump pakages, fixed types, added Theme in colors and remove Theme props in primitives

.github/workflows/pull_request_stats.yml

@@ -5,8 +5,8 @@ on:
     types: [opened, synchronize]
 
 env:
-  TURBO_VERSION: 1.10.12
-  PNPM_VERSION: 8.6.12
+  TURBO_VERSION: 1.10.14
+  PNPM_VERSION: 8.7.6
 
 jobs:
   format:
@@ -24,7 +24,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           registry-url: https://registry.npmjs.org/
           scope: '@design-blocks'
 

.github/workflows/release.yml

@@ -6,8 +6,8 @@ on:
       - main
 
 env:
-  TURBO_VERSION: 1.10.12
-  PNPM_VERSION: 8.6.12
+  TURBO_VERSION: 1.10.14
+  PNPM_VERSION: 8.7.6
 
 jobs:
   stats:
@@ -25,7 +25,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           registry-url: https://registry.npmjs.org/
           scope: '@design-blocks'
 

README.md

@@ -28,6 +28,9 @@ yarn add @design-blocks/native
 
 // with npm
 npm add  @design-blocks/native
+
+// with bun
+bun bun add @design-blocks/native
 ```
 
 ### Configure Design Blocks
@@ -122,7 +125,7 @@ And as a result has improved the development experience
 ```tsx
 import { block } from '@/blocks';
 
-const Description = block.Text(({ theme }) => ({
+const DescriptionBlock = block.Text(({ theme }) => ({
   color: theme.colors.violet[400],
   fontSize: 30,
 }));

examples/basic/blocks.d.ts

@@ -1,12 +1,11 @@
-//import { TailwindCssColors } from '@design-blocks/colors';
-//import type { Theme as BlockTheme } from '@design-blocks/theme';
+// import '@design-blocks/native';
 
-// declare module '@design-blocks/theme' {
+// import { TailwindCssColors } from '@design-blocks/colors';
+// import type { Theme as BlockTheme } from '@design-blocks/native';
+
+// declare module '@design-blocks/native' {
 //   export interface Theme extends BlockTheme {
 //     colors: TailwindCssColors;
-//     fontSizes: {
-//       '10xl': number;
-//     };
 //   }
 // }
 

examples/basic/package.json

@@ -12,7 +12,6 @@
   "dependencies": {
     "@design-blocks/colors": "workspace:*",
     "@design-blocks/native": "workspace:*",
-    "@design-blocks/theme": "workspace:*",
     "expo": "~48.0.5",
     "expo-status-bar": "~1.4.4",
     "react": "18.2.0",

examples/basic/src/screens/demo/screen.tsx

@@ -1,6 +1,7 @@
 import { ScrollView } from 'react-native';
 
 import { Box, Stack, YStack, XStack, Text } from '@design-blocks/native';
+import { tailwindCss } from '@design-blocks/colors';
 
 import { block } from '../../../blocks.config';
 
@@ -40,15 +41,15 @@ function DemoScreen() {
           <SquareBlock bgColor='amber.400' />
         </XStack>
 
-        <XStack alignItems='center' justifyContent='space-around'>
+        <XStack alignItems='center' justifyContent='center' sx={{ justifyContent: 'space-between' }}>
           <CircleBlock bgColor='yellow.600' />
           <SquareBlock bgColor='indigo.600' />
           <CircleBlock bgColor='fuchsia.600' />
         </XStack>
 
         <XStack alignItems='center' justifyContent='space-around'>
-          <CircleBlock bgColor='emerald.600' />
-          <SquareBlock bgColor='lime.400' />
+          <CircleBlock bgColor={tailwindCss.emerald[600]} />
+          <SquareBlock bgColor={tailwindCss.lime[400]} />
         </XStack>
 
         <Stack gap={3} alignItems='center' direction='column'>

package.json

@@ -44,7 +44,7 @@
     "@commitlint/cli": "17.6.1",
     "@commitlint/config-conventional": "17.6.1",
     "@types/eslint": "8.37.0",
-    "@types/node": "18.16.2",
+    "@types/node": "20.7.0",
     "@typescript-eslint/eslint-plugin": "5.59.1",
     "@typescript-eslint/parser": "5.59.1",
     "cross-env": "7.0.3",
@@ -55,13 +55,13 @@
     "lint-staged": "13.2.2",
     "prettier": "2.8.8",
     "tsconfig": "workspace:*",
-    "turbo": "1.10.12",
+    "turbo": "1.10.14",
     "typescript": "5.0.4"
   },
-  "packageManager": "pnpm@8.6.12",
+  "packageManager": "pnpm@8.7.6",
   "pnpm": {
     "overrides": {
-      "react-native-builder-bob": "0.21.3"
+      "react-native-builder-bob": "0.22.0"
     }
   }
 }

packages/@blocks-colors/package.json

@@ -37,9 +37,12 @@
       "maxSize": "0.5kB"
     }
   ],
+  "dependencies": {
+    "@design-blocks/types": "workspace:*"
+  },
   "devDependencies": {
     "bundlesize": "0.18.1",
-    "react-native-builder-bob": "0.21.3",
+    "react-native-builder-bob": "0.22.0",
     "rimraf": "4.1.2",
     "tsconfig": "workspace:*",
     "typescript": "5.0.4"

packages/@blocks-colors/src/colorSchemes.ts

@@ -1,3 +1,5 @@
+import type { Leaves } from '@design-blocks/types';
+
 import { colors as tailwindCssColors } from './tailwindCss';
 import { colors as radixUiColors } from './radixUi';
 
@@ -14,10 +16,10 @@ export interface ColorSchemes {
   radixUi: RadixUiColors;
 }
 
-export type ITailwindCssColors = keyof typeof tailwindCss;
+export type ITailwindCssColors = Leaves<typeof tailwindCss>;
 export type TailwindCssColors = typeof tailwindCss;
 
-export type IRadixUiColors = keyof typeof radixUi;
+export type IRadixUiColors = Leaves<typeof radixUi>;
 export type RadixUiColors = typeof radixUi;
 
 export default colorSchemes;

packages/@blocks-colors/src/radixUi/amber.ts

@@ -11,6 +11,6 @@ export const amber = {
   amber10: '#ffa01c',
   amber11: '#ad5700',
   amber12: '#4e2009',
-};
+} as const;
 
 export default amber;

packages/@blocks-colors/src/radixUi/amberA.ts

@@ -11,6 +11,6 @@ export const amberA = {
   amberA10: '#ff9500',
   amberA11: '#ab5300',
   amberA12: '#481800',
-};
+} as const;
 
 export default amberA;

packages/@blocks-colors/src/radixUi/amberDark.ts

@@ -11,6 +11,6 @@ export const amberDark = {
   amber10: '#ffcb47',
   amber11: '#f1a10d',
   amber12: '#fef3dd',
-};
+} as const;
 
 export default amberDark;

packages/@blocks-colors/src/radixUi/amberDarkA.ts

@@ -11,6 +11,6 @@ export const amberDarkA = {
   amberA10: '#ffce48',
   amberA11: '#ffab0e',
   amberA12: '#fff8e1',
-};
+} as const;
 
 export default amberDarkA;

packages/@blocks-colors/src/radixUi/blackA.ts

@@ -11,6 +11,6 @@ export const blackA = {
   blackA10: '#000000',
   blackA11: '#000000',
   blackA12: '#000000',
-};
+} as const;
 
 export default blackA;

packages/@blocks-colors/src/radixUi/blue.ts

@@ -11,6 +11,6 @@ export const blue = {
   blue10: '#0081f1',
   blue11: '#006adc',
   blue12: '#00254d',
-};
+} as const;
 
 export default blue;

packages/@blocks-colors/src/radixUi/blueA.ts

@@ -11,6 +11,6 @@ export const blueA = {
   blueA10: '#0080f1',
   blueA11: '#0066db',
   blueA12: '#002149',
-};
+} as const;
 
 export default blueA;

packages/@blocks-colors/src/radixUi/blueDark.ts

@@ -11,6 +11,6 @@ export const blueDark = {
   blue10: '#369eff',
   blue11: '#52a9ff',
   blue12: '#eaf6ff',
-};
+} as const;
 
 export default blueDark;

packages/@blocks-colors/src/radixUi/blueDarkA.ts

@@ -11,6 +11,6 @@ export const blueDarkA = {
   blueA10: '#37a1ff',
   blueA11: '#53acff',
   blueA12: '#effbff',
-};
+} as const;
 
 export default blueDarkA;

packages/@blocks-colors/src/radixUi/bronze.ts

@@ -11,6 +11,6 @@ export const bronze = {
   bronze10: '#977669',
   bronze11: '#846358',
   bronze12: '#43302b',
-};
+} as const;
 
 export default bronze;

packages/@blocks-colors/src/radixUi/bronzeA.ts

@@ -11,6 +11,6 @@ export const bronzeA = {
   bronzeA10: '#4e1600',
   bronzeA11: '#431100',
   bronzeA12: '#1d0600',
-};
+} as const;
 
 export default bronzeA;

packages/@blocks-colors/src/radixUi/bronzeDark.ts

@@ -11,6 +11,6 @@ export const bronzeDark = {
   bronze10: '#b08c7d',
   bronze11: '#cba393',
   bronze12: '#f9ede7',
-};
+} as const;
 
 export default bronzeDark;

packages/@blocks-colors/src/radixUi/bronzeDarkA.ts

@@ -11,6 +11,6 @@ export const bronzeDarkA = {
   bronzeA10: '#ffcab4',
   bronzeA11: '#ffccb8',
   bronzeA12: '#fff3ed',
-};
+} as const;
 
 export default bronzeDarkA;

packages/@blocks-colors/src/radixUi/brown.ts

@@ -11,6 +11,6 @@ export const brown = {
   brown10: '#a07653',
   brown11: '#886349',
   brown12: '#3f2c22',
-};
+} as const;
 
 export default brown;

packages/@blocks-colors/src/radixUi/brownA.ts

@@ -11,5 +11,5 @@ export const brownA = {
   brownA10: '#723300',
   brownA11: '#582500',
   brownA12: '#220c00',
-};
+} as const;
 export default brownA;

packages/@blocks-colors/src/radixUi/brownDark.ts

@@ -11,6 +11,6 @@ export const brownDark = {
   brown10: '#bd8b60',
   brown11: '#dba16e',
   brown12: '#faf0e5',
-};
+} as const;
 
 export default brownDark;

packages/@blocks-colors/src/radixUi/brownDarkA.ts

@@ -11,6 +11,6 @@ export const brownDarkA = {
   brownA10: '#ffbb7f',
   brownA11: '#ffbb7f',
   brownA12: '#fff5e9',
-};
+} as const;
 
 export default brownDarkA;

packages/@blocks-colors/src/radixUi/crimson.ts

@@ -11,6 +11,6 @@ export const crimson = {
   crimson10: '#e03177',
   crimson11: '#d31e66',
   crimson12: '#3d0d1d',
-};
+} as const;
 
 export default crimson;

packages/@blocks-colors/src/radixUi/crimsonA.ts

@@ -11,6 +11,6 @@ export const crimsonA = {
   crimsonA10: '#d90057',
   crimsonA11: '#cd0052',
   crimsonA12: '#330011',
-};
+} as const;
 
 export default crimsonA;

packages/@blocks-colors/src/radixUi/crimsonDark.ts

@@ -11,6 +11,6 @@ export const crimsonDark = {
   crimson10: '#f04f88',
   crimson11: '#f76190',
   crimson12: '#feecf4',
-};
+} as const;
 
 export default crimsonDark;

packages/@blocks-colors/src/radixUi/crimsonDarkA.ts

@@ -11,6 +11,6 @@ export const crimsonDarkA = {
   crimsonA10: '#ff538f',
   crimsonA11: '#ff6495',
   crimsonA12: '#fff0f8',
-};
+} as const;
 
 export default crimsonDarkA;

packages/@blocks-colors/src/radixUi/cyan.ts

@@ -11,6 +11,6 @@ export const cyan = {
   cyan10: '#0894b3',
   cyan11: '#0c7792',
   cyan12: '#04313c',
-};
+} as const;
 
 export default cyan;

packages/@blocks-colors/src/radixUi/cyanA.ts

@@ -11,6 +11,6 @@ export const cyanA = {
   cyanA10: '#0090b0',
   cyanA11: '#00718d',
   cyanA12: '#002d38',
-};
+} as const;
 
 export default cyanA;

packages/@blocks-colors/src/radixUi/cyanDark.ts

@@ -11,6 +11,6 @@ export const cyanDark = {
   cyan10: '#00b1cc',
   cyan11: '#00c2d7',
   cyan12: '#e1f8fa',
-};
+} as const;
 
 export default cyanDark;

packages/@blocks-colors/src/radixUi/cyanDarkA.ts

@@ -11,6 +11,6 @@ export const cyanDarkA = {
   cyanA10: '#00ddff',
   cyanA11: '#00e5fe',
   cyanA12: '#e6fdff',
-};
+} as const;
 
 export default cyanDarkA;

packages/@blocks-colors/src/radixUi/gold.ts

@@ -11,6 +11,6 @@ export const gold = {
   gold10: '#8c795d',
   gold11: '#776750',
   gold12: '#3b352b',
-};
+} as const;
 
 export default gold;

packages/@blocks-colors/src/radixUi/goldA.ts

@@ -11,6 +11,6 @@ export const goldA = {
   goldA10: '#4a2d00',
   goldA11: '#392100',
   goldA12: '#130c00',
-};
+} as const;
 
 export default goldA;