shru-design-system 0.0.1

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "shru-design-system",
+  "version": "0.0.1",
+  "description": "A comprehensive design system with theme toggle, components, and token-based theming",
+  "license": "MIT",
+  "keywords": [
+    "design-system",
+    "theme-toggle",
+    "react",
+    "components",
+    "tailwind",
+    "css-variables",
+    "theming",
+    "ui-components"
+  ],
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/tokens",
+    "scripts",
+    "apps/design-system/styles/globals.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles": "./apps/design-system/styles/globals.css"
+  },
+  "workspaces": [
+    "apps/*"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --dts --format esm,cjs",
+    "build:lib": "tsup src/index.ts --dts --format esm,cjs",
+    "postinstall": "npm run build:lib",
+    "copy:tokens": "node scripts/copy-tokens.js",
+    "copy:globals": "node scripts/copy-globals.js",
+    "dev": "turbo run dev --parallel",
+    "lint": "turbo run lint",
+    "lint:fix": "turbo run lint:fix",
+    "preview": "turbo run preview",
+    "typecheck": "turbo run typecheck",
+    "format:write": "turbo run format:write",
+    "format:check": "turbo run format:check",
+    "check": "turbo lint typecheck format:check"
+  },
+  "bin": {
+    "copy-tokens": "./scripts/copy-tokens.js",
+    "copy-globals": "./scripts/copy-globals.js"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "packageManager": "pnpm@9.0.6",
+  "dependencies": {
+    "@babel/core": "^7.22.1",
+    "@commitlint/cli": "^17.6.3",
+    "@commitlint/config-conventional": "^17.6.3",
+    "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
+    "@manypkg/cli": "^0.20.0",
+    "@typescript-eslint/parser": "^5.59.7",
+    "autoprefixer": "^10.4.14",
+    "concurrently": "^8.0.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.41.0",
+    "eslint-config-next": "13.3.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-turbo": "^1.9.9",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-tailwindcss": "3.13.1",
+    "motion": "^12.12.1",
+    "prettier": "^2.8.8",
+    "pretty-quick": "^3.1.3",
+    "tailwindcss": "^3.4.18",
+    "tsx": "^4.1.4",
+    "turbo": "^1.9.9",
+    "vite": "^7.1.12",
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^2.1.9"
+  },
+  "devDependencies": {
+    "@types/hast": "^3.0.4",
+    "@types/node": "^20.11.27",
+    "@types/react": "^18.2.65",
+    "@types/react-dom": "^18.2.22",
+    "tsup": "^8.5.1",
+    "typescript": "^5.5.3"
+  },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "19.2.2",
+      "@types/react-dom": "19.2.2"
+    }
+  }
+}

package/scripts/copy-globals.js

@@ -0,0 +1,106 @@
+#!/usr/bin/env node
+
+/**
+ * Copy Globals CSS Script
+ * Copies globals.css from the package to the user's project
+ */
+
+const fs = require('fs')
+const path = require('path')
+
+// Try to find globals.css in multiple locations
+let sourceFile
+const nodeModulesPath = path.join(process.cwd(), 'node_modules/@shru/theme-toggle')
+
+// Try different possible locations
+const possibleSources = [
+  path.join(nodeModulesPath, 'apps/design-system/styles/globals.css'), // GitHub install
+  path.join(nodeModulesPath, 'globals.css'), // If included in package files
+  path.join(__dirname, '../apps/design-system/styles/globals.css'), // Development/repo root
+]
+
+for (const possibleSource of possibleSources) {
+  if (fs.existsSync(possibleSource)) {
+    sourceFile = possibleSource
+    break
+  }
+}
+
+// Default target locations to try (in order of preference)
+const possibleTargets = [
+  path.join(process.cwd(), 'app/globals.css'),
+  path.join(process.cwd(), 'src/app/globals.css'),
+  path.join(process.cwd(), 'styles/globals.css'),
+  path.join(process.cwd(), 'src/styles/globals.css'),
+]
+
+function findExistingGlobals() {
+  for (const target of possibleTargets) {
+    if (fs.existsSync(target)) {
+      return target
+    }
+  }
+  return null
+}
+
+function findBestTarget() {
+  // Check if any globals.css already exists
+  const existing = findExistingGlobals()
+  if (existing) {
+    return existing
+  }
+  
+  // Use the first possible target that has a parent directory
+  for (const target of possibleTargets) {
+    const parentDir = path.dirname(target)
+    if (fs.existsSync(parentDir)) {
+      return target
+    }
+  }
+  
+  // Default to app/globals.css
+  return possibleTargets[0]
+}
+
+try {
+  if (!sourceFile || !fs.existsSync(sourceFile)) {
+    console.error('Source file not found. Tried:')
+    const possibleSources = [
+      path.join(nodeModulesPath, 'apps/design-system/styles/globals.css'),
+      path.join(nodeModulesPath, 'globals.css'),
+      path.join(__dirname, '../apps/design-system/styles/globals.css'),
+    ]
+    possibleSources.forEach(src => console.error(`  - ${src}`))
+    console.error('\nMake sure you are running this from a project that has @shru/theme-toggle installed')
+    console.error('Or run this from the repository root if developing')
+    process.exit(1)
+  }
+
+  const targetFile = findBestTarget()
+  const targetDir = path.dirname(targetFile)
+
+  // Create target directory if it doesn't exist
+  if (!fs.existsSync(targetDir)) {
+    fs.mkdirSync(targetDir, { recursive: true })
+  }
+
+  // Check if file already exists
+  if (fs.existsSync(targetFile)) {
+    console.warn(`⚠️  File already exists: ${targetFile}`)
+    console.warn('Skipping copy. If you want to overwrite, delete the file first.')
+    console.log(`\nCurrent globals.css location: ${targetFile}`)
+    process.exit(0)
+  }
+
+  console.log(`Copying globals.css from ${sourceFile} to ${targetFile}...`)
+  fs.copyFileSync(sourceFile, targetFile)
+  console.log('✅ globals.css copied successfully!')
+  console.log(`\nFile location: ${targetFile}`)
+  console.log('\nNext steps:')
+  console.log(`  1. Import it in your root layout: import './globals.css'`)
+  console.log('  2. Make sure Tailwind v4 is installed: npm install tailwindcss@next @tailwindcss/postcss@next')
+  console.log('  3. Configure PostCSS with @tailwindcss/postcss plugin')
+} catch (error) {
+  console.error('Error copying globals.css:', error)
+  process.exit(1)
+}

package/scripts/copy-tokens.js

@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+
+/**
+ * Copy Tokens Script
+ * Copies token files from the package to the user's public folder
+ */
+
+const fs = require('fs')
+const path = require('path')
+
+const sourceDir = path.join(__dirname, '../src/tokens')
+const targetDir = path.join(process.cwd(), 'public/tokens')
+
+function copyRecursive(src, dest) {
+  const exists = fs.existsSync(src)
+  const stats = exists && fs.statSync(src)
+  const isDirectory = exists && stats.isDirectory()
+
+  if (isDirectory) {
+    if (!fs.existsSync(dest)) {
+      fs.mkdirSync(dest, { recursive: true })
+    }
+    fs.readdirSync(src).forEach(childItemName => {
+      copyRecursive(
+        path.join(src, childItemName),
+        path.join(dest, childItemName)
+      )
+    })
+  } else {
+    // Ensure parent directory exists
+    const parentDir = path.dirname(dest)
+    if (!fs.existsSync(parentDir)) {
+      fs.mkdirSync(parentDir, { recursive: true })
+    }
+    fs.copyFileSync(src, dest)
+  }
+}
+
+try {
+  if (!fs.existsSync(sourceDir)) {
+    console.error(`Source directory not found: ${sourceDir}`)
+    console.error('Make sure you are running this from a project that has @shru/theme-toggle installed')
+    process.exit(1)
+  }
+
+  // Create target directory if it doesn't exist
+  if (!fs.existsSync(path.join(process.cwd(), 'public'))) {
+    fs.mkdirSync(path.join(process.cwd(), 'public'), { recursive: true })
+  }
+
+  console.log(`Copying tokens from ${sourceDir} to ${targetDir}...`)
+  copyRecursive(sourceDir, targetDir)
+  console.log('✅ Tokens copied successfully!')
+  console.log(`\nTokens are now available at: ${targetDir}`)
+  console.log('\nYou can now add custom token files to extend themes:')
+  console.log('  - Add new theme files to public/tokens/themes/{category}/{name}.json')
+  console.log('  - Use registerTheme() or they will be auto-discovered on next load')
+} catch (error) {
+  console.error('Error copying tokens:', error)
+  process.exit(1)
+}
+

package/src/tokens/base.json

@@ -0,0 +1,161 @@
+{
+  "color": {
+    "primary": "{palette.blue.500}",
+    "primary-hover": "{palette.blue.600}",
+    "primary-foreground": "{palette.white}",
+    "secondary": "{palette.gray.100}",
+    "secondary-foreground": "{palette.gray.900}",
+    "background": "{palette.white}",
+    "foreground": "{palette.gray.900}",
+    "card": "{palette.white}",
+    "card-foreground": "{palette.gray.900}",
+    "popover": "{palette.white}",
+    "popover-foreground": "{palette.gray.900}",
+    "muted": "{palette.gray.100}",
+    "muted-foreground": "{palette.gray.500}",
+    "accent": "{palette.gray.100}",
+    "accent-foreground": "{palette.gray.900}",
+    "destructive": "{palette.red.500}",
+    "destructive-foreground": "{palette.white}",
+    "border": "{palette.gray.200}",
+    "input": "{palette.gray.200}",
+    "ring": "{palette.gray.400}",
+    "chart-1": "{palette.blue.300}",
+    "chart-2": "{palette.blue.500}",
+    "chart-3": "{palette.blue.600}",
+    "chart-4": "{palette.blue.700}",
+    "chart-5": "{palette.blue.800}",
+    "sidebar": "{palette.white}",
+    "sidebar-foreground": "{palette.gray.900}",
+    "sidebar-primary": "{palette.blue.600}",
+    "sidebar-primary-foreground": "{palette.white}",
+    "sidebar-accent": "{palette.gray.100}",
+    "sidebar-accent-foreground": "{palette.gray.900}",
+    "sidebar-border": "{palette.gray.200}",
+    "sidebar-ring": "{palette.gray.400}",
+    "surface": "{palette.gray.50}",
+    "surface-foreground": "{palette.gray.900}",
+    "code": "{palette.gray.50}",
+    "code-foreground": "{palette.gray.900}",
+    "code-highlight": "{palette.gray.100}",
+    "code-number": "{palette.gray.500}",
+    "selection": "{palette.gray.900}",
+    "selection-foreground": "{palette.white}",
+    "skeleton": "{palette.gray.200}"
+  },
+  "spacing": {
+    "component": {
+      "xs": "0.25rem",
+      "sm": "0.5rem",
+      "md": "1rem",
+      "lg": "1.5rem",
+      "xl": "2rem"
+    },
+    "layout": {
+      "sm": "1rem",
+      "md": "2rem",
+      "lg": "3rem",
+      "xl": "4rem",
+      "2xl": "6rem"
+    },
+    "section": {
+      "sm": "2rem",
+      "md": "4rem",
+      "lg": "6rem",
+      "xl": "8rem"
+    },
+    "base": "0.25rem"
+  },
+  "typography": {
+    "font": {
+      "sans": "var(--font-sans)",
+      "mono": "var(--font-mono)"
+    },
+    "fontSize": {
+      "xs": "0.75rem",
+      "sm": "0.875rem",
+      "base": "1rem",
+      "lg": "1.125rem",
+      "xl": "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem",
+      "6xl": "3.75rem",
+      "7xl": "4.5rem",
+      "8xl": "6rem"
+    },
+    "fontWeight": {
+      "normal": "400",
+      "medium": "500",
+      "semibold": "600",
+      "bold": "700"
+    },
+    "lineHeight": {
+      "tight": "1.25",
+      "normal": "1.5",
+      "relaxed": "1.75"
+    }
+  },
+  "shape": {
+    "radius": {
+      "none": "0",
+      "sm": "0.25rem",
+      "md": "0.5rem",
+      "lg": "0.625rem",
+      "xl": "0.75rem",
+      "2xl": "1rem",
+      "full": "9999px"
+    },
+    "radiusComponent": {
+      "button": "{shape.radius.md}",
+      "card": "{shape.radius.lg}",
+      "input": "{shape.radius.md}",
+      "modal": "{shape.radius.xl}",
+      "tooltip": "{shape.radius.md}",
+      "badge": "{shape.radius.full}"
+    }
+  },
+  "motion": {
+    "duration": {
+      "fast": "150ms",
+      "normal": "200ms",
+      "slow": "300ms"
+    },
+    "easing": {
+      "ease": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "ease-in": "cubic-bezier(0.4, 0, 1, 1)",
+      "ease-out": "cubic-bezier(0, 0, 0.2, 1)",
+      "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
+    }
+  },
+  "shadow": {
+    "xs": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    "sm": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    "md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    "lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    "xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+    "none": "none"
+  },
+  "zIndex": {
+    "base": "0",
+    "dropdown": "1000",
+    "sticky": "1020",
+    "fixed": "1030",
+    "modal-backdrop": "1040",
+    "modal": "1050",
+    "popover": "1060",
+    "tooltip": "1070"
+  },
+  "breakpoint": {
+    "sm": "640px",
+    "md": "768px",
+    "lg": "1024px",
+    "xl": "1280px",
+    "2xl": "1536px",
+    "3xl": "1600px",
+    "4xl": "2000px"
+  }
+}
+