jasmincss 1.0.0

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "jasmincss",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A modern, future-proof CSS framework with design philosophy",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "bin": {
+    "jasmin": "./bin/jasmin.js"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./js": {
+      "import": "./src/js/index.js",
+      "types": "./src/js/types/index.d.ts"
+    },
+    "./config": {
+      "types": "./src/js/types/config.d.ts"
+    },
+    "./css": "./dist/jasmin.css",
+    "./css/min": "./dist/jasmin.min.css",
+    "./dist/jasmin.css": "./dist/jasmin.css",
+    "./dist/jasmin.min.css": "./dist/jasmin.min.css",
+    "./plugins/next": "./dist/plugin/nextjs.js",
+    "./plugins/vite": "./dist/plugin/vite.js",
+    "./plugin/nextjs": "./dist/plugin/nextjs.js",
+    "./plugin/vite": "./dist/plugin/vite.js"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "src"
+  ],
+  "scripts": {
+    "build": "node scripts/build.js",
+    "build:css": "node scripts/build-css.js",
+    "dev": "node scripts/dev.js",
+    "test": "node --test tests/**/*.test.js",
+    "test:browser": "npx playwright test --config=tests/browser/playwright.config.js",
+    "test:a11y": "npx playwright test tests/accessibility/",
+    "test:perf": "node tests/performance/benchmark.js",
+    "test:all": "npm run test && npm run test:browser && npm run test:a11y",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "css",
+    "framework",
+    "utility-first",
+    "components",
+    "tailwind",
+    "design-system",
+    "jasmin",
+    "nextjs",
+    "react",
+    "vue"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jasmaine/JasminCSS"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "chokidar": "^3.5.3",
+    "commander": "^11.1.0",
+    "cssnano": "^6.0.2",
+    "fast-glob": "^3.3.2",
+    "inquirer": "^9.2.12",
+    "picocolors": "^1.0.0",
+    "postcss": "^8.4.32"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.40.0",
+    "esbuild": "^0.19.10",
+    "serve": "^14.2.0",
+    "vitepress": "^1.6.4"
+  },
+  "peerDependencies": {
+    "next": ">=13.0.0",
+    "vite": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    }
+  }
+}

package/src/cli/add.js

@@ -0,0 +1,83 @@
+import fs from 'fs';
+import path from 'path';
+import pc from 'picocolors';
+import { components } from '../components/index.js';
+
+const availableComponents = {
+  buttons: 'Interactive button styles with variants',
+  cards: 'Card containers with various layouts',
+  forms: 'Form inputs, selects, checkboxes, radios',
+  navigation: 'Navbars, sidebars, breadcrumbs',
+  modals: 'Modal dialogs and overlays',
+  tables: 'Data tables with sorting indicators',
+  alerts: 'Alert and notification banners',
+  badges: 'Status badges and tags',
+  avatars: 'User avatar components',
+  tooltips: 'Hover tooltips and popovers',
+  progress: 'Progress bars and spinners',
+  skeleton: 'Loading skeleton placeholders',
+  accordion: 'Collapsible accordion panels',
+  tabs: 'Tab navigation components',
+  dropdown: 'Dropdown menus',
+  pagination: 'Page navigation',
+  breadcrumb: 'Breadcrumb navigation',
+  toast: 'Toast notifications',
+  drawer: 'Side drawer panels',
+  hero: 'Hero section layouts'
+};
+
+export async function addCommand(component, options) {
+  if (options.list || component === 'list') {
+    console.log(pc.cyan('\n🌸 Available JasminCSS Components\n'));
+
+    Object.entries(availableComponents).forEach(([name, description]) => {
+      console.log(pc.white(`  ${name.padEnd(15)}`), pc.dim(description));
+    });
+
+    console.log(pc.dim('\nUsage: jasmin add <component>\n'));
+    return;
+  }
+
+  if (!availableComponents[component]) {
+    console.log(pc.red(`Unknown component: ${component}`));
+    console.log(pc.dim('Run "jasmin add --list" to see available components'));
+    return;
+  }
+
+  const cwd = process.cwd();
+  const configPath = path.join(cwd, 'jasmin.config.js');
+
+  if (!fs.existsSync(configPath)) {
+    console.log(pc.yellow('No jasmin.config.js found. Run "jasmin init" first.'));
+    return;
+  }
+
+  // Read and update config
+  const configContent = fs.readFileSync(configPath, 'utf-8');
+
+  // Simple regex to find and update components array
+  const componentRegex = /components:\s*\[([\s\S]*?)\]/;
+  const match = configContent.match(componentRegex);
+
+  if (match) {
+    const existingComponents = match[1]
+      .split(',')
+      .map(c => c.trim().replace(/['"]/g, ''))
+      .filter(Boolean);
+
+    if (existingComponents.includes(component)) {
+      console.log(pc.yellow(`Component "${component}" is already included.`));
+      return;
+    }
+
+    existingComponents.push(component);
+    const newComponentsArray = existingComponents.map(c => `'${c}'`).join(', ');
+    const newConfigContent = configContent.replace(componentRegex, `components: [${newComponentsArray}]`);
+
+    fs.writeFileSync(configPath, newConfigContent);
+    console.log(pc.green(`✓ Added "${component}" component to jasmin.config.js`));
+    console.log(pc.dim('Run "jasmin run build" to regenerate CSS'));
+  } else {
+    console.log(pc.yellow('Could not update config. Please add the component manually.'));
+  }
+}

package/src/cli/init.js

@@ -0,0 +1,210 @@
+import fs from 'fs';
+import path from 'path';
+import pc from 'picocolors';
+import inquirer from 'inquirer';
+import { defaultConfig, templates } from '../config/defaults.js';
+
+export async function initCommand(options) {
+  const cwd = process.cwd();
+  const configPath = path.join(cwd, 'jasmin.config.js');
+
+  console.log(pc.cyan('🌸 Welcome to JasminCSS Setup\n'));
+
+  if (fs.existsSync(configPath) && !options.yes) {
+    const { overwrite } = await inquirer.prompt([{
+      type: 'confirm',
+      name: 'overwrite',
+      message: 'jasmin.config.js already exists. Overwrite?',
+      default: false
+    }]);
+
+    if (!overwrite) {
+      console.log(pc.yellow('Setup cancelled.'));
+      return;
+    }
+  }
+
+  let config = { ...defaultConfig };
+
+  if (options.yes) {
+    // Use defaults
+    console.log(pc.dim('Using default configuration...'));
+  } else if (options.template && templates[options.template]) {
+    // Use template
+    config = { ...config, ...templates[options.template] };
+    console.log(pc.green(`Using ${options.template} template`));
+  } else {
+    // Interactive setup
+    const answers = await inquirer.prompt([
+      {
+        type: 'input',
+        name: 'projectName',
+        message: 'Project name:',
+        default: path.basename(cwd)
+      },
+      {
+        type: 'list',
+        name: 'template',
+        message: 'Choose a design template:',
+        choices: [
+          { name: 'Futuristic - Bold, modern, tech-forward', value: 'futuristic' },
+          { name: 'Minimal - Clean, elegant, understated', value: 'minimal' },
+          { name: 'Corporate - Professional, trustworthy', value: 'corporate' },
+          { name: 'Creative - Vibrant, expressive, artistic', value: 'creative' },
+          { name: 'Custom - Define your own', value: 'custom' }
+        ]
+      }
+    ]);
+
+    if (answers.template === 'custom') {
+      const brandingAnswers = await inquirer.prompt([
+        {
+          type: 'input',
+          name: 'primaryColor',
+          message: 'Primary brand color (hex):',
+          default: '#6366f1',
+          validate: (input) => /^#[0-9A-Fa-f]{6}$/.test(input) || 'Please enter a valid hex color'
+        },
+        {
+          type: 'input',
+          name: 'secondaryColor',
+          message: 'Secondary brand color (hex):',
+          default: '#ec4899',
+          validate: (input) => /^#[0-9A-Fa-f]{6}$/.test(input) || 'Please enter a valid hex color'
+        },
+        {
+          type: 'input',
+          name: 'accentColor',
+          message: 'Accent color (hex):',
+          default: '#14b8a6',
+          validate: (input) => /^#[0-9A-Fa-f]{6}$/.test(input) || 'Please enter a valid hex color'
+        },
+        {
+          type: 'list',
+          name: 'fontFamily',
+          message: 'Primary font family:',
+          choices: [
+            { name: 'Inter (Modern sans-serif)', value: 'Inter' },
+            { name: 'Space Grotesk (Futuristic)', value: 'Space Grotesk' },
+            { name: 'DM Sans (Friendly)', value: 'DM Sans' },
+            { name: 'Outfit (Geometric)', value: 'Outfit' },
+            { name: 'System fonts', value: 'system-ui' }
+          ]
+        },
+        {
+          type: 'list',
+          name: 'borderRadius',
+          message: 'Border radius style:',
+          choices: [
+            { name: 'Sharp (0px)', value: '0' },
+            { name: 'Subtle (4px)', value: '0.25rem' },
+            { name: 'Rounded (8px)', value: '0.5rem' },
+            { name: 'Pill (16px)', value: '1rem' },
+            { name: 'Full (9999px)', value: '9999px' }
+          ]
+        },
+        {
+          type: 'confirm',
+          name: 'darkMode',
+          message: 'Include dark mode support?',
+          default: true
+        }
+      ]);
+
+      config.branding = {
+        ...config.branding,
+        colors: {
+          primary: brandingAnswers.primaryColor,
+          secondary: brandingAnswers.secondaryColor,
+          accent: brandingAnswers.accentColor
+        },
+        typography: {
+          fontFamily: brandingAnswers.fontFamily
+        },
+        borderRadius: {
+          default: brandingAnswers.borderRadius
+        }
+      };
+      config.darkMode = brandingAnswers.darkMode;
+    } else {
+      config = { ...config, ...templates[answers.template] };
+    }
+
+    config.projectName = answers.projectName;
+
+    // Component selection
+    const componentAnswers = await inquirer.prompt([
+      {
+        type: 'checkbox',
+        name: 'components',
+        message: 'Select components to include:',
+        choices: [
+          { name: 'Buttons', value: 'buttons', checked: true },
+          { name: 'Cards', value: 'cards', checked: true },
+          { name: 'Forms', value: 'forms', checked: true },
+          { name: 'Navigation', value: 'navigation', checked: true },
+          { name: 'Modals', value: 'modals', checked: false },
+          { name: 'Tables', value: 'tables', checked: false },
+          { name: 'Alerts', value: 'alerts', checked: true },
+          { name: 'Badges', value: 'badges', checked: true },
+          { name: 'Avatars', value: 'avatars', checked: false },
+          { name: 'Tooltips', value: 'tooltips', checked: false },
+          { name: 'Progress', value: 'progress', checked: false },
+          { name: 'Skeleton', value: 'skeleton', checked: false }
+        ]
+      },
+      {
+        type: 'checkbox',
+        name: 'utilities',
+        message: 'Select utility modules:',
+        choices: [
+          { name: 'Layout (flex, grid, container)', value: 'layout', checked: true },
+          { name: 'Spacing (margin, padding)', value: 'spacing', checked: true },
+          { name: 'Typography', value: 'typography', checked: true },
+          { name: 'Colors', value: 'colors', checked: true },
+          { name: 'Effects (shadows, blur)', value: 'effects', checked: true },
+          { name: 'Animations', value: 'animations', checked: true },
+          { name: 'Transforms', value: 'transforms', checked: false },
+          { name: 'Filters', value: 'filters', checked: false }
+        ]
+      }
+    ]);
+
+    config.components = componentAnswers.components;
+    config.utilities = componentAnswers.utilities;
+  }
+
+  // Generate config file
+  const configContent = `/** @type {import('jasmincss').JasminConfig} */
+export default ${JSON.stringify(config, null, 2)};
+`;
+
+  fs.writeFileSync(configPath, configContent);
+  console.log(pc.green('\n✓ Created jasmin.config.js'));
+
+  // Create CSS entry point
+  const cssDir = path.join(cwd, 'styles');
+  if (!fs.existsSync(cssDir)) {
+    fs.mkdirSync(cssDir, { recursive: true });
+  }
+
+  const mainCssPath = path.join(cssDir, 'jasmin.css');
+  const mainCssContent = `/* JasminCSS - Main Entry Point */
+@import 'jasmincss/css';
+
+/* Your custom styles below */
+`;
+
+  fs.writeFileSync(mainCssPath, mainCssContent);
+  console.log(pc.green('✓ Created styles/jasmin.css'));
+
+  // Print next steps
+  console.log(pc.cyan('\n📦 Next steps:\n'));
+  console.log(pc.white('  1. Run'), pc.yellow('jasmin run dev'), pc.white('to compile the full library'));
+  console.log(pc.white('  2. Run'), pc.yellow('jasmin run build'), pc.white('for production (tree-shaken)'));
+  console.log(pc.white('  3. Run'), pc.yellow('jasmin run watch'), pc.white('for development with hot reload'));
+  console.log(pc.white('\n  Import in your project:'));
+  console.log(pc.dim('  import \'./dist/jasmin.min.css\';'));
+  console.log(pc.dim('  // or'));
+  console.log(pc.dim('  import \'jasmincss/css\';\n'));
+}

package/src/cli/run.js

@@ -0,0 +1,142 @@
+import fs from 'fs';
+import path from 'path';
+import pc from 'picocolors';
+import chokidar from 'chokidar';
+import { compileCSS, scanForUsedClasses } from '../core/compiler.js';
+import { loadConfig } from '../config/loader.js';
+
+export async function runCommand(task, options) {
+  const cwd = process.cwd();
+  const configPath = path.resolve(cwd, options.config);
+  const outputDir = path.resolve(cwd, options.output);
+
+  // Load config
+  let config;
+  try {
+    config = await loadConfig(configPath);
+  } catch (err) {
+    console.log(pc.yellow('No jasmin.config.js found. Using defaults.'));
+    config = (await import('../config/defaults.js')).defaultConfig;
+  }
+
+  // Ensure output directory exists
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  switch (task) {
+    case 'build':
+      await buildTask(config, outputDir, cwd, true);
+      break;
+
+    case 'dev':
+      await buildTask(config, outputDir, cwd, false);
+      break;
+
+    case 'watch':
+      await watchTask(config, outputDir, cwd, options);
+      break;
+
+    default:
+      console.log(pc.red(`Unknown task: ${task}`));
+      console.log(pc.dim('Available tasks: build, dev, watch'));
+      process.exit(1);
+  }
+}
+
+async function buildTask(config, outputDir, cwd, isProduction) {
+  const startTime = Date.now();
+
+  console.log(pc.cyan(`\n🌸 JasminCSS ${isProduction ? 'Production' : 'Development'} Build\n`));
+
+  let usedClasses = null;
+
+  if (isProduction) {
+    // Scan project for used classes (tree-shaking)
+    console.log(pc.dim('Scanning project for used classes...'));
+    usedClasses = await scanForUsedClasses(cwd, config.content || [
+      './**/*.{html,js,jsx,ts,tsx,vue,svelte}',
+      '!./node_modules/**'
+    ]);
+    console.log(pc.dim(`Found ${usedClasses.size} unique class references`));
+  }
+
+  // Compile CSS
+  console.log(pc.dim('Compiling CSS...'));
+  const { css, minified, stats } = await compileCSS(config, {
+    usedClasses,
+    minify: isProduction,
+    includeAll: !isProduction
+  });
+
+  // Write output files
+  const outputPath = path.join(outputDir, 'jasmin.css');
+  const minOutputPath = path.join(outputDir, 'jasmin.min.css');
+
+  fs.writeFileSync(outputPath, css);
+  console.log(pc.green(`✓ ${outputPath}`), pc.dim(`(${formatSize(css.length)})`));
+
+  if (isProduction && minified) {
+    fs.writeFileSync(minOutputPath, minified);
+    console.log(pc.green(`✓ ${minOutputPath}`), pc.dim(`(${formatSize(minified.length)})`));
+  }
+
+  const elapsed = Date.now() - startTime;
+  console.log(pc.cyan(`\n✨ Built in ${elapsed}ms`));
+
+  if (stats) {
+    console.log(pc.dim(`   ${stats.utilities} utilities, ${stats.components} components`));
+  }
+}
+
+async function watchTask(config, outputDir, cwd, options) {
+  console.log(pc.cyan('\n🌸 JasminCSS Watch Mode\n'));
+  console.log(pc.dim('Watching for changes...\n'));
+
+  // Initial build
+  await buildTask(config, outputDir, cwd, false);
+
+  // Watch for changes
+  const watchPaths = config.content || [
+    './**/*.{html,js,jsx,ts,tsx,vue,svelte}',
+    'jasmin.config.js'
+  ];
+
+  const watcher = chokidar.watch(watchPaths, {
+    ignored: /node_modules/,
+    persistent: true,
+    cwd
+  });
+
+  let rebuildTimeout;
+  const debouncedRebuild = () => {
+    clearTimeout(rebuildTimeout);
+    rebuildTimeout = setTimeout(async () => {
+      console.log(pc.dim('\nChange detected, rebuilding...'));
+      try {
+        // Reload config
+        const newConfig = await loadConfig(path.resolve(cwd, options.config));
+        await buildTask(newConfig, outputDir, cwd, false);
+      } catch (err) {
+        console.log(pc.red('Build error:'), err.message);
+      }
+    }, 100);
+  };
+
+  watcher.on('change', debouncedRebuild);
+  watcher.on('add', debouncedRebuild);
+  watcher.on('unlink', debouncedRebuild);
+
+  // Handle exit
+  process.on('SIGINT', () => {
+    console.log(pc.dim('\n\nStopping watch mode...'));
+    watcher.close();
+    process.exit(0);
+  });
+}
+
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}