@vertis-components/components 1.0.0

package/dist/tailwind-helper.js

@@ -0,0 +1,60 @@
+const path = require('path');
+const fs = require('fs');
+
+
+//  Auto-load theme.js from the consumer's project root.
+ 
+//  Usage in consumer's tailwind.config.js:
+ 
+//    const { loadTheme } = require('@vertis/components/tailwind-helper');
+//    const theme = loadTheme();
+ 
+//    module.exports = {
+//      darkMode: 'class',
+//      content: [
+//        './src/**/*.{js,ts,jsx,tsx}',
+//        './node_modules/@vertis/components/dist/**/*.{js,mjs}',
+//      ],
+//      theme: {
+//        extend: {
+//          colors: theme.colors,
+//          spacing: theme.spacing,
+//          borderRadius: theme.borderRadius,
+//        },
+//      },
+//    };
+
+function loadTheme() {
+  // Find project root (where node_modules is)
+  let currentDir = __dirname;
+  
+  // Walk up until we find node_modules or hit root
+  while (currentDir !== path.dirname(currentDir)) {
+    const nodeModulesPath = path.join(currentDir, 'node_modules');
+    if (fs.existsSync(nodeModulesPath)) {
+      // Found node_modules, so parent is project root
+      currentDir = path.dirname(nodeModulesPath);
+      break;
+    }
+    currentDir = path.dirname(currentDir);
+  }
+  
+  const themePath = path.join(currentDir, 'theme.js');
+  
+  if (!fs.existsSync(themePath)) {
+    console.warn('\n⚠️  No theme.js found in project root.');
+    console.warn('   Run "npx vertis-sync-figma && npx vertis-generate-theme" to create it.\n');
+    console.warn('   Falling back to empty theme (components may not display correctly).\n');
+    
+    return {
+      colors: {},
+      spacing: {},
+      borderRadius: {},
+    };
+  }
+  
+  console.log(`✅ Loaded theme from: ${themePath}`);
+  return require(themePath);
+}
+
+module.exports = { loadTheme };

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@vertis-components/components",
+  "version": "1.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tailwind-helper": "./dist/tailwind-helper.js",
+    "./scripts/*": "./scripts/*"
+  },
+  "files": [
+    "dist",
+    "scripts",
+    "README.md",
+    "USAGE.md"
+  ],
+  "bin": {
+    "vertis-sync-figma": "./scripts/sync-figma.js",
+    "vertis-generate-theme": "./scripts/convert-tailwind.js"
+  },
+  "dependencies": {
+    "axios": "^1.6.0",
+    "clsx": "^2.1.0",
+    "dotenv": "^16.0.0",
+    "react-icons": "^5.5.0",
+    "swiper": "^12.0.3",
+    "tailwind-merge": "^2.2.0"
+  },
+  "scripts": {
+    "build": "tsup && node scripts/build-css.js && cp tailwind-helper.js dist/",
+    "dev": "tsup --watch",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "storybook": "storybook dev -p 6006 -h 0.0.0.0 --ci",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.6.0",
+    "@storybook/addon-interactions": "^7.6.0",
+    "@storybook/addon-links": "^7.6.0",
+    "@storybook/blocks": "^7.6.0",
+    "@storybook/react": "^7.6.0",
+    "@storybook/react-vite": "^7.6.0",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "autoprefixer": "^10.0.0",
+    "postcss": "^8.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "storybook": "^7.6.0",
+    "tailwindcss": "^3.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  }
+}

package/scripts/build-css.js

@@ -0,0 +1,54 @@
+const fs = require('fs');
+const path = require('path');
+const postcss = require('postcss');
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+
+async function buildCSS() {
+  console.log('🔄 Building styles.css with default theme...\n');
+  
+  // Read source CSS files
+  const indexCSS = fs.readFileSync(path.join(__dirname, '../src/index.css'), 'utf-8');
+  const carouselCSS = fs.readFileSync(path.join(__dirname, '../src/components/Carousel.css'), 'utf-8');
+  
+  // Combine CSS
+  const combinedCSS = indexCSS + '\n\n' + carouselCSS;
+  
+  // Use root default theme
+  const defaultTheme = require(path.join(__dirname, '../../../theme.js'));
+  
+  // Create temporary Tailwind config with default theme
+  const tailwindConfig = {
+    content: [
+      { raw: '', extension: 'html' } // No content scanning needed
+    ],
+    darkMode: 'class',
+    theme: {
+      extend: {
+        colors: defaultTheme.colors,
+        spacing: defaultTheme.spacing,
+        borderRadius: defaultTheme.borderRadius,
+      },
+    },
+  };
+  
+  // Process CSS
+  const result = await postcss([
+    tailwindcss(tailwindConfig),
+    autoprefixer,
+  ]).process(combinedCSS, {
+    from: undefined,
+  });
+  
+  // Ensure dist directory exists
+  const distDir = path.join(__dirname, '../dist');
+  if (!fs.existsSync(distDir)) {
+    fs.mkdirSync(distDir, { recursive: true });
+  }
+  
+  // Write output
+  fs.writeFileSync(path.join(distDir, 'styles.css'), result.css, 'utf-8');
+  console.log('✅ Built dist/styles.css with default theme');
+}
+
+buildCSS().catch(console.error);

package/scripts/color.js

@@ -0,0 +1,49 @@
+/**
+ * Compares two colors for approximate equality since converting between Figma RGBA objects (from 0 -> 1) and
+ * hex colors can result in slight differences.
+ */
+function colorApproximatelyEqual(colorA, colorB) {
+  return rgbToHex(colorA) === rgbToHex(colorB)
+}
+
+function parseColor(color) {
+  color = color.trim()
+  const hexRegex = /^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2}){0,1}$/
+  const hexShorthandRegex = /^#([A-Fa-f0-9]{3})([A-Fa-f0-9]){0,1}$/
+
+  if (hexRegex.test(color) || hexShorthandRegex.test(color)) {
+    const hexValue = color.substring(1)
+    const expandedHex =
+      hexValue.length === 3 || hexValue.length === 4
+        ? hexValue
+            .split('')
+            .map((char) => char + char)
+            .join('')
+        : hexValue
+
+    const alphaValue = expandedHex.length === 8 ? expandedHex.slice(6, 8) : undefined
+
+    return {
+      r: parseInt(expandedHex.slice(0, 2), 16) / 255,
+      g: parseInt(expandedHex.slice(2, 4), 16) / 255,
+      b: parseInt(expandedHex.slice(4, 6), 16) / 255,
+      ...(alphaValue ? { a: parseInt(alphaValue, 16) / 255 } : {}),
+    }
+  } else {
+    throw new Error('Invalid color format')
+  }
+}
+
+function rgbToHex({ r, g, b, ...rest }) {
+  const a = 'a' in rest ? rest.a : 1
+
+  const toHex = (value) => {
+    const hex = Math.round(value * 255).toString(16)
+    return hex.length === 1 ? '0' + hex : hex
+  }
+
+  const hex = [toHex(r), toHex(g), toHex(b)].join('')
+  return `#${hex}` + (a !== 1 ? toHex(a) : '')
+}
+
+module.exports = { colorApproximatelyEqual, parseColor, rgbToHex }

package/scripts/convert-tailwind.js

@@ -0,0 +1,288 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+
+/**
+ * Convert Figma design tokens to Tailwind CSS theme configuration.
+ * 
+ * Generates:
+ *   theme.js - Palette colors, spacing, and border radius for Tailwind
+ * 
+ * Components use Tailwind's dark: variants directly:
+ *   className="bg-secondary-300 dark:bg-secondary-300 text-grey-900 dark:text-white"
+ * 
+ * Usage:
+ *   npx vertis-generate-theme
+ */
+
+const rootDir = process.cwd();
+const tokensDir = path.join(rootDir, "tokens");
+
+// Check if tokens directory exists
+if (!fs.existsSync(tokensDir)) {
+  console.error('\n❌ Tokens directory not found!');
+  console.error('Run "npx vertis-sync-figma" first to fetch tokens from Figma.\n');
+  process.exit(1);
+}
+
+const tokenFiles = fs.readdirSync(tokensDir).filter(file => file.endsWith(".json"));
+
+if (tokenFiles.length === 0) {
+  console.error('\n❌ No token files found in ./tokens/');
+  console.error('Run "npx vertis-sync-figma" first to fetch tokens from Figma.\n');
+  process.exit(1);
+}
+
+console.log('\n🔄 Converting tokens to Tailwind theme...\n');
+
+const allData = {};
+tokenFiles.forEach(file => {
+  const filePath = path.join(tokensDir, file);
+  allData[file] = JSON.parse(fs.readFileSync(filePath, "utf-8"));
+  console.log(`  ✓ Loaded ${file}`);
+});
+
+// ============================================================================
+// FILE DETECTION (Flexible pattern matching)
+// ============================================================================
+
+function findFileByPattern(patterns) {
+  const patternArray = Array.isArray(patterns) ? patterns : [patterns];
+  
+  for (const fileName of Object.keys(allData)) {
+    const lowerName = fileName.toLowerCase();
+    for (const pattern of patternArray) {
+      if (lowerName.includes(pattern.toLowerCase())) {
+        return { fileName, data: allData[fileName] };
+      }
+    }
+  }
+  return null;
+}
+
+const colorFile = findFileByPattern(['colours', 'colors', 'colour', 'color']);
+const spacingFile = findFileByPattern(['spacing']);
+const radiusFile = findFileByPattern(['radius']);
+
+if (colorFile) console.log(`\n  🎨 Using color file: ${colorFile.fileName}`);
+if (spacingFile) console.log(`  📏 Using spacing file: ${spacingFile.fileName}`);
+if (radiusFile) console.log(`  ⭕ Using radius file: ${radiusFile.fileName}`);
+
+// ============================================================================
+// HELPERS
+// ============================================================================
+
+function isToken(obj) {
+  return obj && typeof obj === "object" && "$value" in obj;
+}
+
+function extractTokens(obj, prefix = "") {
+  const tokens = {};
+  for (const [key, value] of Object.entries(obj)) {
+    const tokenName = prefix ? `${prefix}-${key}` : key;
+    if (isToken(value)) {
+      tokens[tokenName] = value;
+    } else if (typeof value === "object" && value !== null) {
+      Object.assign(tokens, extractTokens(value, tokenName));
+    }
+  }
+  return tokens;
+}
+
+// ============================================================================
+// TOKEN EXTRACTION - PALETTE COLORS
+// ============================================================================
+
+const paletteColors = {};
+
+if (colorFile) {
+  const colorTokens = extractTokens(colorFile.data);
+  
+  for (const [name, token] of Object.entries(colorTokens)) {
+    if (token.$type === "color") {
+      const parts = name.toLowerCase().split("-");
+      
+      if (parts.length >= 2) {
+        const colorGroup = parts[0];
+        const shade = parts.slice(1).join("-");
+        
+        if (!paletteColors[colorGroup]) {
+          paletteColors[colorGroup] = {};
+        }
+        paletteColors[colorGroup][shade] = token.$value;
+      } else {
+        paletteColors[name.toLowerCase()] = token.$value;
+      }
+    }
+  }
+} else {
+  console.warn('\n  ⚠️ No color file found.');
+}
+
+// Add Tailwind color aliases
+const colorAliases = {
+  blue: 'primary',
+  green: 'secondary',
+  yellow: 'tertiary',
+  gray: 'grey',
+};
+
+for (const [alias, source] of Object.entries(colorAliases)) {
+  if (paletteColors[source]) {
+    paletteColors[alias] = { ...paletteColors[source] };
+  }
+}
+
+// ============================================================================
+// PROCESS SPACING AND BORDER RADIUS
+// ============================================================================
+
+const spacing = {};
+const borderRadius = {};
+
+if (spacingFile) {
+  const spacingTokens = extractTokens(spacingFile.data);
+  for (const [name, token] of Object.entries(spacingTokens)) {
+    if (token.$type === "number") {
+      const match = name.match(/spacing-(\d+)/i);
+      if (match) {
+        spacing[match[1]] = `${token.$value}px`;
+      }
+    }
+  }
+}
+
+if (radiusFile) {
+  const radiusTokens = extractTokens(radiusFile.data);
+  for (const [name, token] of Object.entries(radiusTokens)) {
+    if (token.$type === "number") {
+      const match = name.match(/radius-(.+)/i);
+      if (match) {
+        let value = token.$value;
+        if (typeof value === "string" && value.startsWith("{") && value.endsWith("}")) {
+          value = value.slice(1, -1);
+        }
+        borderRadius[match[1]] = `${value}px`;
+      }
+    }
+  }
+}
+
+console.log(`\n  📦 Processed ${Object.keys(spacing).length} spacing tokens`);
+console.log(`  📦 Processed ${Object.keys(borderRadius).length} border radius tokens`);
+
+// ============================================================================
+// GENERATE theme.js (Palette colors only)
+// ============================================================================
+
+const colorOrder = ['base', 'primary', 'secondary', 'tertiary', 'grey', 'blue', 'green', 'yellow', 'gray'];
+
+function formatColors(colors) {
+  const lines = [];
+  
+  function formatValue(value, indent = 6) {
+    const spaces = ' '.repeat(indent);
+    if (typeof value === 'object' && value !== null) {
+      const subLines = [];
+      subLines.push('{');
+      for (const [key, subValue] of Object.entries(value)) {
+        const keyStr = /[^a-zA-Z0-9_]/.test(key) ? `"${key}"` : key;
+        if (typeof subValue === 'object' && subValue !== null) {
+          subLines.push(`${spaces}  ${keyStr}: ${formatValue(subValue, indent + 2)},`);
+        } else {
+          subLines.push(`${spaces}  ${keyStr}: "${subValue}",`);
+        }
+      }
+      subLines.push(`${spaces}}`);
+      return subLines.join('\n');
+    }
+    return `"${value}"`;
+  }
+  
+  // Output in preferred order
+  for (const group of colorOrder) {
+    if (colors[group] && typeof colors[group] === 'object') {
+      lines.push(`    ${group}: ${formatValue(colors[group], 4)},`);
+    }
+  }
+  
+  // Output remaining groups
+  for (const [group, shades] of Object.entries(colors)) {
+    if (!colorOrder.includes(group)) {
+      if (typeof shades === 'object') {
+        lines.push(`    ${group}: ${formatValue(shades, 4)},`);
+      } else {
+        lines.push(`    "${group}": "${shades}",`);
+      }
+    }
+  }
+  
+  return lines.join('\n');
+}
+
+const themeJSOutput = `/**
+ * Generated Tailwind theme from Figma design tokens.
+ * DO NOT EDIT MANUALLY - regenerate with: npx vertis-generate-theme
+ * 
+ * This file contains palette colors for Tailwind.
+ * Components use Tailwind's dark: variants directly.
+ * 
+ * Usage in components:
+ *   className="bg-secondary-300 text-grey-900"
+ *   className="dark:bg-secondary-300 dark:text-white"
+ * 
+ * To customize for your project, override colors in tailwind.config.js:
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         secondary: { 300: '#FF6600' } // Your brand color
+ *       }
+ *     }
+ *   }
+ * 
+ * Generated: ${new Date().toISOString()}
+ */
+module.exports = {
+  colors: {
+${formatColors(paletteColors)}
+  },
+  
+  spacing: ${JSON.stringify(spacing, null, 4).replace(/\n/g, '\n  ')},
+  
+  borderRadius: ${JSON.stringify(borderRadius, null, 4).replace(/\n/g, '\n  ')},
+};
+`;
+
+fs.writeFileSync(path.join(rootDir, "theme.js"), themeJSOutput, "utf-8");
+
+// ============================================================================
+// SUMMARY
+// ============================================================================
+
+let totalPaletteColors = 0;
+let paletteGroups = 0;
+for (const group of Object.values(paletteColors)) {
+  if (typeof group === 'object') {
+    totalPaletteColors += Object.keys(group).length;
+    paletteGroups++;
+  } else {
+    totalPaletteColors += 1;
+  }
+}
+
+console.log('\n✅ Theme generation complete!\n');
+console.log('  Output file:');
+console.log('    ✓ ./theme.js - Palette colors for Tailwind\n');
+console.log('  Summary:');
+console.log(`    - Palette colors: ${totalPaletteColors} in ${paletteGroups} groups`);
+console.log(`    - Spacing: ${Object.keys(spacing).length} tokens`);
+console.log(`    - Border radius: ${Object.keys(borderRadius).length} tokens`);
+console.log('\n  Usage in components (with dark mode):');
+console.log('    bg-secondary-300 dark:bg-secondary-300');
+console.log('    text-grey-900 dark:text-white');
+console.log('    border-grey-300 dark:border-grey-700');
+console.log('\n  Dark mode toggle:');
+console.log('    document.documentElement.classList.toggle("dark");');
+console.log('\n  Next step: Configure Tailwind to use this theme.');
+console.log('  See the @vertis/components USAGE.md for details.\n');

package/scripts/figma-api.js

@@ -0,0 +1,37 @@
+const axios = require('axios')
+
+class FigmaApi {
+  baseUrl = 'https://api.figma.com'
+
+  constructor(token) {
+    this.token = token
+  }
+
+  async getLocalVariables(fileKey) {
+    const resp = await axios.request({
+      url: `${this.baseUrl}/v1/files/${fileKey}/variables/local`,
+      headers: {
+        Accept: '*/*',
+        'X-Figma-Token': this.token,
+      },
+    })
+
+    return resp.data
+  }
+
+  async postVariables(fileKey, payload) {
+    const resp = await axios.request({
+      url: `${this.baseUrl}/v1/files/${fileKey}/variables`,
+      method: 'POST',
+      headers: {
+        Accept: '*/*',
+        'X-Figma-Token': this.token,
+      },
+      data: payload,
+    })
+
+    return resp.data
+  }
+}
+
+module.exports = FigmaApi

package/scripts/sync-figma.js

@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+
+const path = require('path');
+require('dotenv').config({ path: path.join(process.cwd(), '.env') });
+const FigmaApi = require('./figma-api.js');
+const fs = require('fs');
+const { green } = require('./utils.js');
+const { tokenFilesFromLocalVariables } = require('./token-export.js');
+
+/**
+ * Sync design tokens from Figma to local JSON files.
+ * 
+ * Prerequisites:
+ *   Create .env in your project root with:
+ *     FIGMA_PAT=your_personal_access_token
+ *     FIGMA_FILE_KEY=your_figma_file_key
+ * 
+ * Usage:
+ *   npx vertis-sync-figma                    # Writes to ./tokens directory
+ *   npx vertis-sync-figma -- --output dir    # Writes to specified directory
+ */
+
+async function main() {
+  if (!process.env.FIGMA_PAT || !process.env.FIGMA_FILE_KEY) {
+    console.error('\n❌ Missing Figma credentials!\n');
+    console.error('Create .env.local in your project root with:');
+    console.error('  FIGMA_PAT=your_personal_access_token');
+    console.error('  FIGMA_FILE_KEY=your_figma_file_key\n');
+    console.error('To get these values:');
+    console.error('  1. FIGMA_PAT: Figma → Settings → Account → Personal access tokens');
+    console.error('  2. FIGMA_FILE_KEY: From your Figma URL: https://www.figma.com/file/FILE_KEY/...\n');
+    throw new Error('FIGMA_PAT and FIGMA_FILE_KEY environment variables are required');
+  }
+
+  const fileKey = process.env.FIGMA_FILE_KEY;
+
+  console.log('🔄 Fetching tokens from Figma...');
+  const api = new FigmaApi(process.env.FIGMA_PAT);
+  const localVariables = await api.getLocalVariables(fileKey);
+
+  const tokensFiles = tokenFilesFromLocalVariables(localVariables);
+
+  // Default output to 'tokens' directory in consumer's project root
+  let outputDir = path.join(process.cwd(), 'tokens');
+  const outputArgIdx = process.argv.indexOf('--output');
+  if (outputArgIdx !== -1) {
+    outputDir = path.join(process.cwd(), process.argv[outputArgIdx + 1]);
+  }
+
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  Object.entries(tokensFiles).forEach(([fileName, fileContent]) => {
+    fs.writeFileSync(path.join(outputDir, fileName), JSON.stringify(fileContent, null, 2));
+    console.log(`  ✓ Wrote ${fileName}`);
+  });
+
+  console.log(green(`\n✅ Tokens synced to ${outputDir}`));
+  console.log('\nNext step: Run "npx vertis-generate-theme" to create the Tailwind theme.');
+}
+
+main();

package/scripts/token-export.js

@@ -0,0 +1,79 @@
+const { rgbToHex } = require('./color.js')
+
+function tokenTypeFromVariable(variable) {
+  switch (variable.resolvedType) {
+    case 'BOOLEAN':
+      return 'boolean'
+    case 'COLOR':
+      return 'color'
+    case 'FLOAT':
+      return 'number'
+    case 'STRING':
+      return 'string'
+  }
+}
+
+function tokenValueFromVariable(variable, modeId, localVariables) {
+  const value = variable.valuesByMode[modeId]
+  if (typeof value === 'object') {
+    if ('type' in value && value.type === 'VARIABLE_ALIAS') {
+      const aliasedVariable = localVariables[value.id]
+      return `{${aliasedVariable.name.replace(/\//g, '.')}}`
+    } else if ('r' in value) {
+      return rgbToHex(value)
+    }
+
+    throw new Error(`Format of variable value is invalid: ${value}`)
+  } else {
+    return value
+  }
+}
+
+function tokenFilesFromLocalVariables(localVariablesResponse) {
+  const tokenFiles = {}
+  const localVariableCollections = localVariablesResponse.meta.variableCollections
+  const localVariables = localVariablesResponse.meta.variables
+
+  Object.values(localVariables).forEach((variable) => {
+    // Skip remote variables because we only want to generate tokens for local variables
+    if (variable.remote) {
+      return
+    }
+
+    const collection = localVariableCollections[variable.variableCollectionId]
+
+    collection.modes.forEach((mode) => {
+      const fileName = `${collection.name}.${mode.name}.json`
+
+      if (!tokenFiles[fileName]) {
+        tokenFiles[fileName] = {}
+      }
+
+      let obj = tokenFiles[fileName]
+
+      variable.name.split('/').forEach((groupName) => {
+        obj[groupName] = obj[groupName] || {}
+        obj = obj[groupName]
+      })
+
+      const token = {
+        $type: tokenTypeFromVariable(variable),
+        $value: tokenValueFromVariable(variable, mode.modeId, localVariables),
+        $description: variable.description,
+        $extensions: {
+          'com.figma': {
+            hiddenFromPublishing: variable.hiddenFromPublishing,
+            scopes: variable.scopes,
+            codeSyntax: variable.codeSyntax,
+          },
+        },
+      }
+
+      Object.assign(obj, token)
+    })
+  })
+
+  return tokenFiles
+}
+
+module.exports = { tokenFilesFromLocalVariables }