shru-design-system 0.0.8 → 0.1.0

package/scripts/build-css.js

@@ -1,231 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Build script to pre-generate all Tailwind utilities needed by components
- * This ensures users don't need to configure Tailwind - they just import the CSS
- */
-
-import { readFileSync, writeFileSync, readdirSync, statSync } from 'fs'
-import { join, dirname } from 'path'
-import { fileURLToPath } from 'url'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
-const rootDir = join(__dirname, '..')
-const componentsDir = join(rootDir, 'apps/design-system/src/design-system/components')
-const stylesDir = join(rootDir, 'apps/design-system/styles')
-const outputFile = join(stylesDir, 'globals.css')
-
-// Extract all Tailwind classes from a string
-function extractTailwindClasses(content) {
-  const classRegex = /className=["']([^"']+)["']/g
-  const cnRegex = /cn\(["']([^"']+)["']/g
-  const classes = new Set()
-  
-  // Match className="..."
-  let match
-  while ((match = classRegex.exec(content)) !== null) {
-    match[1].split(/\s+/).forEach(cls => {
-      if (cls && !cls.startsWith('{') && !cls.includes('${')) {
-        classes.add(cls)
-      }
-    })
-  }
-  
-  // Match cn("...")
-  while ((match = cnRegex.exec(content)) !== null) {
-    match[1].split(/\s+/).forEach(cls => {
-      if (cls) classes.add(cls)
-    })
-  }
-  
-  return Array.from(classes)
-}
-
-// Recursively find all component files
-function findComponentFiles(dir, fileList = []) {
-  const files = readdirSync(dir)
-  
-  files.forEach(file => {
-    const filePath = join(dir, file)
-    const stat = statSync(filePath)
-    
-    if (stat.isDirectory()) {
-      findComponentFiles(filePath, fileList)
-    } else if (file.endsWith('.tsx') || file.endsWith('.ts')) {
-      fileList.push(filePath)
-    }
-  })
-  
-  return fileList
-}
-
-// Collect all classes from components
-const componentFiles = findComponentFiles(componentsDir)
-const allClasses = new Set()
-
-console.log(`Scanning ${componentFiles.length} component files...`)
-
-componentFiles.forEach(file => {
-  try {
-    const content = readFileSync(file, 'utf-8')
-    const classes = extractTailwindClasses(content)
-    classes.forEach(cls => allClasses.add(cls))
-  } catch (err) {
-    console.warn(`Warning: Could not read ${file}:`, err.message)
-  }
-})
-
-// Also add common utilities that are always needed
-const commonUtilities = [
-  // Layout
-  'flex', 'inline-flex', 'grid', 'block', 'inline-block', 'hidden',
-  'items-center', 'items-start', 'items-end', 'justify-center', 'justify-between', 'justify-start', 'justify-end',
-  'flex-col', 'flex-row', 'flex-wrap', 'flex-nowrap',
-  'gap-1', 'gap-2', 'gap-3', 'gap-4', 'gap-6', 'gap-8',
-  
-  // Spacing
-  'p-0', 'p-1', 'p-2', 'p-3', 'p-4', 'p-6', 'p-8',
-  'px-1', 'px-2', 'px-3', 'px-4', 'px-6', 'px-8',
-  'py-1', 'py-2', 'py-3', 'py-4', 'py-6', 'py-8',
-  'm-0', 'm-1', 'm-2', 'm-4', 'm-6', 'm-8',
-  'mx-auto', 'my-auto',
-  'mb-1', 'mb-2', 'mb-4', 'mb-6', 'mb-8',
-  'mt-1', 'mt-2', 'mt-4', 'mt-6', 'mt-8',
-  'mr-1', 'mr-2', 'mr-4',
-  'ml-1', 'ml-2', 'ml-4',
-  
-  // Sizing
-  'w-full', 'w-auto', 'w-fit', 'w-1/2', 'w-1/3', 'w-2/3', 'w-1/4', 'w-3/4',
-  'h-full', 'h-auto', 'h-fit', 'h-screen', 'min-h-screen',
-  'h-4', 'h-5', 'h-6', 'h-8', 'h-9', 'h-10', 'h-12', 'h-14', 'h-16',
-  'w-4', 'w-5', 'w-6', 'w-8', 'w-10', 'w-12', 'w-14', 'w-16',
-  'min-w-0', 'max-w-full', 'max-w-screen-xl', 'max-w-screen-2xl',
-  
-  // Border radius
-  'rounded-none', 'rounded-sm', 'rounded', 'rounded-md', 'rounded-lg', 'rounded-xl', 'rounded-2xl', 'rounded-full',
-  
-  // Colors (common variants)
-  'bg-transparent', 'bg-current',
-  'text-transparent', 'text-current',
-  'border-transparent', 'border-current',
-  
-  // Typography
-  'text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl', 'text-4xl',
-  'font-thin', 'font-light', 'font-normal', 'font-medium', 'font-semibold', 'font-bold', 'font-extrabold',
-  'leading-none', 'leading-tight', 'leading-normal', 'leading-relaxed', 'leading-loose',
-  'text-left', 'text-center', 'text-right', 'text-justify',
-  'uppercase', 'lowercase', 'capitalize', 'normal-case',
-  'whitespace-normal', 'whitespace-nowrap', 'whitespace-pre',
-  
-  // Effects
-  'shadow-sm', 'shadow', 'shadow-md', 'shadow-lg', 'shadow-xl', 'shadow-2xl', 'shadow-none',
-  'opacity-0', 'opacity-25', 'opacity-50', 'opacity-75', 'opacity-100',
-  
-  // Transitions
-  'transition', 'transition-all', 'transition-colors', 'transition-opacity', 'transition-transform',
-  'duration-75', 'duration-100', 'duration-150', 'duration-200', 'duration-300', 'duration-500',
-  'ease-in', 'ease-out', 'ease-in-out',
-  
-  // Transforms
-  'scale-95', 'scale-100', 'scale-105', 'scale-110',
-  'rotate-0', 'rotate-90', 'rotate-180',
-  
-  // Position
-  'relative', 'absolute', 'fixed', 'sticky', 'static',
-  'inset-0', 'top-0', 'right-0', 'bottom-0', 'left-0',
-  'z-0', 'z-10', 'z-20', 'z-30', 'z-40', 'z-50',
-  
-  // Overflow
-  'overflow-hidden', 'overflow-auto', 'overflow-scroll', 'overflow-visible',
-  'overflow-x-hidden', 'overflow-y-hidden',
-  
-  // Display
-  'sr-only', 'not-sr-only',
-  
-  // Interactive
-  'cursor-pointer', 'cursor-not-allowed', 'cursor-default',
-  'select-none', 'select-text', 'select-all',
-  'pointer-events-none', 'pointer-events-auto',
-  
-  // States
-  'hover:opacity-80', 'hover:opacity-90', 'hover:scale-105', 'hover:scale-110',
-  'active:scale-95', 'active:opacity-80',
-  'focus:outline-none', 'focus:ring-2', 'focus:ring-offset-2',
-  'disabled:opacity-50', 'disabled:cursor-not-allowed', 'disabled:pointer-events-none',
-  
-  // Responsive (common breakpoints)
-  'sm:block', 'sm:hidden', 'md:block', 'md:hidden', 'lg:block', 'lg:hidden',
-  'sm:flex', 'md:flex', 'lg:flex',
-]
-
-commonUtilities.forEach(cls => allClasses.add(cls))
-
-console.log(`Found ${allClasses.size} unique Tailwind classes`)
-
-// Read the current globals.css
-let globalsContent = readFileSync(outputFile, 'utf-8')
-
-// Remove the old @layer utilities section if it exists
-const utilitiesStart = globalsContent.indexOf('@layer utilities {')
-const utilitiesEnd = globalsContent.indexOf('}\n\n@layer components', utilitiesStart)
-if (utilitiesStart !== -1 && utilitiesEnd !== -1) {
-  globalsContent = globalsContent.slice(0, utilitiesStart) + globalsContent.slice(utilitiesEnd + 2)
-}
-
-// Generate safelist comment
-const safelistComment = `/* 
- * Pre-generated utility classes for design system components
- * These utilities are explicitly defined to ensure they work in consuming apps
- * without requiring Tailwind configuration or scanning
- * 
- * Generated from ${componentFiles.length} component files
- * Total classes: ${allClasses.size}
- */\n\n`
-
-// Generate utility classes
-const utilityClasses = Array.from(allClasses)
-  .sort()
-  .map(cls => {
-    // Skip complex classes with variables for now - handle common ones
-    if (cls.includes('${') || cls.includes('{')) return null
-    
-    // Generate CSS for common patterns
-    if (cls.startsWith('rounded-')) {
-      if (cls === 'rounded-full') return `.${cls} { border-radius: 9999px !important; }`
-      if (cls === 'rounded-none') return `.${cls} { border-radius: 0 !important; }`
-      if (cls === 'rounded') return `.${cls} { border-radius: var(--radius) !important; }`
-      if (cls === 'rounded-sm') return `.${cls} { border-radius: var(--radius-sm) !important; }`
-      if (cls === 'rounded-md') return `.${cls} { border-radius: var(--radius-md) !important; }`
-      if (cls === 'rounded-lg') return `.${cls} { border-radius: var(--radius-lg) !important; }`
-      if (cls === 'rounded-xl') return `.${cls} { border-radius: var(--radius-xl) !important; }`
-      if (cls === 'rounded-2xl') return `.${cls} { border-radius: calc(var(--radius) + 8px) !important; }`
-    }
-    
-    // For other classes, we'll let Tailwind generate them
-    // But we need to ensure they're in the safelist
-    return null
-  })
-  .filter(Boolean)
-  .join('\n')
-
-// Insert the safelist and utilities before @layer components
-const componentsMarker = globalsContent.indexOf('@layer components')
-if (componentsMarker !== -1) {
-  const beforeComponents = globalsContent.slice(0, componentsMarker)
-  const afterComponents = globalsContent.slice(componentsMarker)
-  
-  globalsContent = beforeComponents + 
-    safelistComment +
-    `@layer utilities {\n${utilityClasses}\n}\n\n` +
-    afterComponents
-} else {
-  // Append if no components layer found
-  globalsContent += '\n\n' + safelistComment + `@layer utilities {\n${utilityClasses}\n}\n`
-}
-
-writeFileSync(outputFile, globalsContent, 'utf-8')
-console.log(`✅ Updated ${outputFile}`)
-console.log(`   Added ${utilityClasses.split('\n').filter(l => l.trim()).length} explicit utility overrides`)
-console.log(`   Total classes scanned: ${allClasses.size}`)
-

package/scripts/copy-globals.js

@@ -1,106 +0,0 @@
-#!/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

@@ -1,62 +0,0 @@
-#!/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

@@ -1,161 +0,0 @@
-{
-  "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"
-  }
-}
-