Merge pull request #31 from mj-studio-library/typography

Typography Theme Support

.github/workflows/publish.yml

@@ -28,14 +28,14 @@ jobs:
         uses: actions/cache@v3
         with:
           path: '**/node_modules'
-          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**/cli.tgz') }}
           restore-keys: |
-            ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+            ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**/cli.tgz') }}
             ${{ runner.os }}-node-
 
       - name: Install dependencies
         if: steps.cache.outputs.cache-hit != 'true'
-        run: yarn install --immutable
+        run: yarn build:cli && yarn up cli@file:./cli.tgz && yarn install --immutable
 
       - name: Build
         run: yarn build

.github/workflows/static-check.yml

@@ -26,14 +26,14 @@ jobs:
         uses: actions/cache@v3
         with:
           path: '**/node_modules'
-          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**/cli.tgz') }}
           restore-keys: |
-            ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+            ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**/cli.tgz') }}
             ${{ runner.os }}-node-
 
       - name: Install dependencies
         if: steps.cache.outputs.cache-hit != 'true'
-        run: yarn install --immutable
+        run: yarn build:cli && yarn up cli@file:./cli.tgz && yarn install --immutable
 
       - name: Check Lint
         run: yarn lint

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.1.1.cjs
+yarnPath: .yarn/releases/yarn-4.1.1.cjs

bin/ret.d.ts

@@ -3,26 +3,9 @@
 import type { ColorsValue, RadiiValue, SizesValue, SpaceValue } from './Token';
 
 export interface ThemedTypings {
-
-
-
-
-
-colors: ColorsValue |  "white" | "black" | "transparent" | "gray50" | "gray100" | "gray200" | "gray300" | "gray400" | "gray500" | "gray600" | "gray700" | "gray800" | "gray900" | "violet50" | "violet100" | "violet200" | "violet300" | "violet400" | "violet500" | "violet600" | "violet700" | "violet800" | "violet900" | "green50" | "green100" | "green200" | "green300" | "green400" | "green500" | "green600" | "yellow50" | "yellow100" | "yellow200" | "yellow300" | "yellow400" | "yellow500" | "yellow600" | "red50" | "red100" | "red200" | "red300" | "red400" | "red500" | "red600" | "blue50" | "blue100" | "blue200" | "blue300" | "blue400" | "blue500" | "blue600" | "blue700" | "blue800" | "blue900" 
-
-
-
-
-
-
-
+  colors: ColorsValue |  "white" | "black" | "transparent" | "gray50" | "gray100" | "gray200" | "gray300" | "gray400" | "gray500" | "gray600" | "gray700" | "gray800" | "gray900" | "violet50" | "violet100" | "violet200" | "violet300" | "violet400" | "violet500" | "violet600" | "violet700" | "violet800" | "violet900" | "green50" | "green100" | "green200" | "green300" | "green400" | "green500" | "green600" | "yellow50" | "yellow100" | "yellow200" | "yellow300" | "yellow400" | "yellow500" | "yellow600" | "red50" | "red100" | "red200" | "red300" | "red400" | "red500" | "red600" | "blue50" | "blue100" | "blue200" | "blue300" | "blue400" | "blue500" | "blue600" | "blue700" | "blue800" | "blue900" 
 radii: RadiiValue | `${number}` | `${number}px` | `${any}px` |  "1" | "2" | "sm" | "md" 
-
 sizes: SizesValue | `${number}` | `${number}px` | `${any}px` |  "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "12" | "14" | "16" | "18" | "20" | "24" | "28" | "30" | "32" | "40" | "48" | "px" | "0.5" 
 space: SpaceValue | `${number}` | `${number}px` | `${any}px` |  "0" | "-0" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "12" | "-12" | "14" | "-14" | "16" | "-16" | "18" | "-18" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "30" | "-30" | "32" | "-32" | "40" | "-40" | "48" | "-48" | "px" | "-px" | "0.5" | "-0.5" 
-
-
-
-
-
+typography: "h1" 
 }

bin/theme-gen.mjs

@@ -6,7 +6,7 @@ import fs from 'fs-extra';
 const join = path.join;
 const filename = path.basename(__filename);
 const _printTag = 'Theme Gen' || filename;
-$.verbose = false;
+// $.verbose = false;
 
 function exist(path) {
   return fs.existsSync(path);
@@ -137,7 +137,7 @@ const outputFile =
   './node_modules/react-native-themed-styled-system/lib/typescript/@types/ThemedTypings.d.ts';
 
 try {
-  await $`npx @chakra-ui/cli tokens --no-format --out ${tmpFile} ${source}`;
+  await $`yarn cli generate --out ${tmpFile} ${source}`;
 
   /**
    * export interface ThemedTypings {
@@ -151,23 +151,6 @@ try {
   );
   result = result.replace(/export.*/, 'export interface ThemedTypings {');
   result = result.replace(/\/\/.*/g, '');
-  result = result.replace(/blur.*/, '');
-  result = result.replace(/borders.*/, '');
-  result = result.replace(/borderStyles.*/, '');
-  result = result.replace(/borderWidths.*/, '');
-  result = result.replace(/breakpoints.*/, '');
-  result = result.replace(/colorSchemes.*/, '');
-  result = result.replace(/fonts.*/, '');
-  result = result.replace(/fontSizes.*/, '');
-  result = result.replace(/fontWeights.*/, '');
-  result = result.replace(/layerStyles.*/, '');
-  result = result.replace(/letterSpacings.*/, '');
-  result = result.replace(/lineHeights.*/, '');
-  result = result.replace(/shadows.*/, '');
-  result = result.replace(/textStyles.*/, '');
-  result = result.replace(/transition.*/, '');
-  result = result.replace(/zIndices.*/, '');
-  result = result.replace(/components.*\n.*\n.*/, '');
   result = result.replace(/\|? ?\(?string & {}\)?;/g, '');
   result = result.replaceAll('string & {}', '');
 
@@ -185,11 +168,8 @@ try {
     'radii:',
     'radii: RadiiValue | `${number}` | `${number}px` | `${any}px` | ',
   );
-
-  result = result.replace(
-    'colors:',
-    'colors: ColorsValue | ',
-  );
+
+  result = result.replace('colors:', 'colors: ColorsValue | ');
 
   result = result.replace(/\|[\s ]*\n/g, ';');
 

bin/theme.ts

@@ -94,4 +94,10 @@ export default {
     sm: 48,
     md: 12,
   },
+  typography: {
+    h1: {
+      fontFamily: 'Noto Sans',
+      fontSize: 20,
+    },
+  },
 } satisfies ThemedDict;

cli/.gitignore

@@ -0,0 +1,141 @@
+# tsc outDir, build directory
+dist/
+esm/
+lib/
+
+# Webstorm(or any other Intellij IDE) config
+.idea/
+
+# Node modules
+node_modules/
+
+# Built files
+tsconfig.tsbuildinfo
+
+# Jest Cache
+.jest/
+coverage/
+
+# Yarn
+yarn-error.log
+
+# bundled assets
+
+android/app/src/main/assets/*.bundle
+android/app/src/main/assets/*.map
+android/app/src/main/assets/drawable*
+android/app/src/main/assets/raw
+
+report.*.json
+
+# react-native-config codegen
+ios/tmp.xcconfig
+
+.env
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+!.env.sample
+
+# sentry
+.sentryclirc
+
+# OSX
+#
+.DS_Store
+
+# Xcode
+
+ios/assets/**/*
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+vendor/bundle
+
+# Android/IntelliJ
+
+android/drawable*
+android/raw
+java_pid*
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+
+npm-debug.log
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+#*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+*/vendor/bundle
+*/vendor/cache
+
+# Bundle artifact
+*.jsbundle
+*.jsbundle.map
+*.index.android.bundle
+*.index.android.bundle.map
+*.index.ios.bundle
+*.index.ios.bundle.map
+*.main.jsbundle
+*.main.jsbundle.map
+
+
+#npm
+package-lock.json
+
+#Pods
+ios/Pods/
+
+
+#VSCode
+.vscode
+
+#GraphQL fetched scheme (Prevent all queries are allowed in Hasura)
+src/graphql/schema.graphql
+
+#Eslint
+.eslintcache
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# Code Push Bundle
+ios-bundle.zip
+android-bundle.zip
+codepush-ios/
+codepush-ios-sourcemap/
+codepush-android/
+codepush-android-sourcemap/
+
+# OpenApi
+
+.openapi.json
+# generated by bob