refactor: use a monorepo to split component styles and react implemen…

…tation

.eslintrc

@@ -1,32 +1,65 @@
 {
+  "$schema": "https://json.schemastore.org/eslintrc.json",
+  "env": {
+    "browser": false,
+    "es2021": true,
+    "node": true
+  },
   "parser": "@typescript-eslint/parser",
   "extends": ["airbnb", "airbnb-typescript", "airbnb/hooks", "prettier", "plugin:storybook/recommended"],
   "parserOptions": {
-    "project": "./tsconfig.json"
+    "project": "tsconfig.json",
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   },
   "rules": {
-    "@typescript-eslint/consistent-type-imports": "error",
+    "no-console": "warn",
+    "react/prop-types": "off",
     "react/jsx-uses-react": "off",
-    "react/jsx-props-no-spreading": "off",
     "react/react-in-jsx-scope": "off",
-    "react/prop-types": "off",
-    "react/function-component-definition": [2, { "namedComponents": "arrow-function" }],
-    "no-console": ["error", { "allow": ["warn", "error"] }],
-    "sort-imports": [
+    "react/jsx-props-no-spreading": "off",
+    "import/extensions": "off",
+    "import/order": [
       "error",
       {
-        "ignoreDeclarationSort": true,
-        "ignoreMemberSort": false
+        "groups": ["type", "builtin", "object", "external", "internal", "parent", "sibling", "index"],
+        "pathGroups": [
+          {
+            "pattern": "~/**",
+            "group": "external",
+            "position": "after"
+          }
+        ],
+        "newlines-between": "always"
       }
     ],
-    "import/extensions": "off",
-    "import/prefer-default-export": "off",
-    "import/order": [
-      "error",
+    "react/self-closing-comp": "warn",
+    "react/jsx-sort-props": [
+      "warn",
+      {
+        "callbacksLast": true,
+        "shorthandFirst": true,
+        "noSortAlphabetically": false,
+        "reservedFirst": true
+      }
+    ],
+    "react/function-component-definition": ["error", { "namedComponents": "arrow-function" }],
+    "padding-line-between-statements": [
+      "warn",
+      { "blankLine": "always", "prev": "*", "next": "return" },
+      { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
       {
-        "groups": ["type", "builtin", "external", "parent", "sibling", "internal", "index", "object"],
-        "newlines-between": "always",
-        "alphabetize": { "order": "asc", "caseInsensitive": true }
+        "blankLine": "any",
+        "prev": ["const", "let", "var"],
+        "next": ["const", "let", "var"]
       }
     ]
   }

.gitignore

@@ -8,11 +8,11 @@ node_modules
 # testing
 coverage
 
-# typescript
-dist
-
-# storybook
-.storybook/tailwind.css
+# next.js
+.next/
+out/
+build
+dist/
 
 # misc
 .DS_Store
@@ -22,4 +22,16 @@ dist
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
+
+# vercel
+.vercel

.npmrc

@@ -0,0 +1 @@
+auto-install-peers = true

package.json

@@ -2,58 +2,26 @@
   "name": "@giantnodes/design-system",
   "version": "0.0.0",
   "description": "",
-  "author": "Jordan Phillips <[email protected]>",
   "license": "AGPL-3.0",
-  "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "packageManager": "[email protected]",
+  "author": {
+    "name": "Jordan Phillips",
+    "email": "[email protected]"
+  },
   "repository": {
     "type": "git",
     "url": "ssh://[email protected]/giantnodes/design-system.git"
   },
-  "engines": {
-    "node": ">=16"
-  },
   "scripts": {
-    "build": "tsup src",
-    "---": "",
-    "lint:eslint": "eslint src --ext cjs,js,jsx,mjs,ts,tsx --max-warnings=0",
-    "lint:prettier": "pretty-quick 'src/**/*.{cjs,js,jsx,mjs,ts,tsx,json,md,mdx,css,html,yml,yaml,scss}'",
-    "lint:fix": "pnpm run lint:eslint --fix && pnpm run lint:prettier --write",
-    "lint": "pnpm run lint:prettier && pnpm run lint:eslint",
-    "--": "",
-    "storybook": "concurrently 'pnpm:sb:watch:*'",
-    "sb:watch:sb": "storybook dev -p 6006",
-    "sb:watch:css": "npx tailwindcss -i ./.storybook/style.css -o ./.storybook/tailwind.css --watch",
-    "sb:build:css": "npx tailwindcss -i ./.storybook/style.css -o ./.storybook/tailwind.css",
-    "sb:build": "pnpm run sb:build:css && storybook build",
-    "-": "",
-    "test": "jest --passWithNoTests",
-    "typecheck": "tsc --noEmit"
-  },
-  "dependencies": {
-    "clsx": "^1.2.1",
-    "tailwind-variants": "^0.1.5"
+    "build": "turbo run build",
+    "lint": "turbo run lint",
+    "typecheck": "turbo run typecheck",
+    "test": "turbo run test"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.6.3",
     "@commitlint/config-conventional": "^17.6.3",
-    "@jest/types": "^29.5.0",
-    "@storybook/addon-essentials": "7.0.18",
-    "@storybook/addon-interactions": "7.0.18",
-    "@storybook/addon-links": "7.0.12",
-    "@storybook/addon-styling": "^1.0.8",
-    "@storybook/blocks": "7.0.12",
-    "@storybook/react": "^7.0.12",
-    "@storybook/react-vite": "7.0.12",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.9",
     "@typescript-eslint/eslint-plugin": "^5.53.0",
     "@typescript-eslint/parser": "^5.53.0",
-    "autoprefixer": "^10.4.14",
-    "concurrently": "^8.1.0",
     "eslint": "^8.28.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "17.0.0",
@@ -64,23 +32,13 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.12",
     "husky": "^8.0.3",
-    "jest": "^29.5.0",
-    "postcss": "^8.4.24",
     "prettier": "^2.8.3",
     "pretty-quick": "^3.1.3",
-    "prop-types": "15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "7.0.18",
-    "tailwindcss": "^3.3.2",
-    "ts-jest": "^29.1.0",
     "tsup": "^6.7.0",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.8"
+    "turbo": "latest",
+    "typescript": "^5.0.4"
   },
-  "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "tailwindcss": ">=3"
+  "engines": {
+    "node": ">=16.x"
   }
 }

packages/core/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@giantnodes/design-system",
+  "version": "0.0.0",
+  "description": "",
+  "license": "AGPL-3.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "author": {
+    "name": "Jordan Phillips",
+    "email": "[email protected]"
+  },
+  "repository": {
+    "type": "git",
+    "url": "ssh://[email protected]/giantnodes/design-system.git"
+  },
+  "scripts": {
+    "build": "tsup src",
+    "--": "",
+    "lint:eslint": "eslint src --ext cjs,js,jsx,mjs,ts,tsx --max-warnings=0",
+    "lint:prettier": "pretty-quick 'src/**/*.{cjs,js,jsx,mjs,ts,tsx,json,md,mdx,css,html,yml,yaml,scss}'",
+    "lint:fix": "pnpm run lint:eslint --fix && pnpm run lint:prettier --write",
+    "lint": "pnpm run lint:prettier && pnpm run lint:eslint",
+    "-": "",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "tailwind-variants": "^0.1.8"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=3"
+  },
+  "engines": {
+    "node": ">=16.x"
+  }
+}

src/components/avatar/Avatar.styles.ts → packages/core/src/components/avatar.ts

@@ -2,7 +2,7 @@ import type { VariantProps } from 'tailwind-variants'
 
 import { tv } from 'tailwind-variants'
 
-const avatar = tv({
+export const avatar = tv({
   slots: {
     group: ['isolate', 'flex', '-space-x-2', 'overflow-hidden'],
     base: [
@@ -78,9 +78,7 @@ const avatar = tv({
   defaultVariants: {
     size: 'md',
     radius: 'full',
-    zoomed: false,
   },
 })
 
 export type AvatarVariantProps = VariantProps<typeof avatar>
-export default avatar

src/components/badge/Badge.styles.ts → packages/core/src/components/badge.ts

@@ -2,7 +2,7 @@ import type { VariantProps } from 'tailwind-variants'
 
 import { tv } from 'tailwind-variants'
 
-const badge = tv({
+export const badge = tv({
   slots: {
     base: ['inline-flex', 'items-center', 'gap-1.5', 'font-medium'],
   },
@@ -67,4 +67,3 @@ const badge = tv({
 })
 
 export type BadgeVariantProps = VariantProps<typeof badge>
-export default badge

src/components/navbar/Navbar.styles.ts → packages/core/src/components/navbar.ts

@@ -2,7 +2,7 @@ import type { VariantProps } from 'tailwind-variants'
 
 import { tv } from 'tailwind-variants'
 
-const navbar = tv({
+export const navbar = tv({
   slots: {
     base: ['relative', 'flex', 'flex-row', 'w-full', 'z-50'],
     container: [
@@ -104,4 +104,3 @@ const navbar = tv({
 })
 
 export type NavbarVariantProps = VariantProps<typeof navbar>
-export default navbar

src/components/sidebar/Sidebar.styles.ts → packages/core/src/components/sidebar.ts

@@ -2,7 +2,7 @@ import type { VariantProps } from 'tailwind-variants'
 
 import { tv } from 'tailwind-variants'
 
-const sidebar = tv({
+export const sidebar = tv({
   slots: {
     base: ['relative', 'flex', 'flex-col', 'h-full', 'z-50'],
     container: [
@@ -69,4 +69,3 @@ const sidebar = tv({
 })
 
 export type SidebarVariantProps = VariantProps<typeof sidebar>
-export default sidebar

packages/core/src/index.ts

@@ -0,0 +1,4 @@
+export * from '@/theme/avatar'
+export * from '@/theme/badge'
+export * from '@/theme/navbar'
+export * from '@/theme/sidebar'

packages/core/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": false,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules"]
+}

tsup.config.ts → packages/core/tsup.config.ts

@@ -4,13 +4,13 @@ import { defineConfig } from 'tsup'
 
 const config: Options = {
   clean: true,
-  minify: true,
-  treeshake: true,
   dts: true,
+  minify: true,
+  entry: ['src/index.ts'],
   format: ['esm'],
+  sourcemap: true,
+  target: 'esnext',
   outDir: 'dist',
-  target: ['es2019'],
-  tsconfig: 'tsconfig.json',
 }
 
 export { config }