@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.10

package/dist/tokens/tokenExporter.esm.js

@@ -1,37 +1,46 @@
-
+import type { ThemeTokens, TokenExportOptions } from './types';
 
 export class TokenExporter {
   /**
    * Exports tokens in the specified format
    */
-  static exportTokens(tokens, options)) {
-      case 'json', options);
-      case 'css', options);
-      case 'scss', options);
-      case 'js', options);
-      case 'ts', options);
-      default}`);
+  static exportTokens(tokens: ThemeTokens, options: TokenExportOptions): string {
+    switch (options.format) {
+      case 'json':
+        return this.exportAsJSON(tokens, options);
+      case 'css':
+        return this.exportAsCSS(tokens, options);
+      case 'scss':
+        return this.exportAsSCSS(tokens, options);
+      case 'js':
+        return this.exportAsJS(tokens, options);
+      case 'ts':
+        return this.exportAsTS(tokens, options);
+      default:
+        throw new Error(`Unsupported export format: ${options.format}`);
     }
   }
 
   /**
    * Exports tokens as JSON
    */
-  private static exportAsJSON(tokens, options)= options.includeMetadata ? tokens ;
+  private static exportAsJSON(tokens: ThemeTokens, options: TokenExportOptions): string {
+    const exportData = options.includeMetadata ? tokens : tokens.tokens;
     return JSON.stringify(exportData, null, 2);
   }
 
   /**
    * Exports tokens as CSS custom properties
    */
-  private static exportAsCSS(tokens, options)= '';
+  private static exportAsCSS(tokens: ThemeTokens, options: TokenExportOptions): string {
+    let css = '';
     
     if (options.includeComments) {
       css += `/* ${tokens.theme} Design Tokens - v${tokens.version} */\n`;
-      css += `/* Generated on).toISOString()} */\n\n`;
+      css += `/* Generated on: ${new Date().toISOString()} */\n\n`;
     }
 
-    css += `;
+    css += `:root {\n`;
     
     // Export color tokens
     if (tokens.tokens.color) {
@@ -70,18 +79,19 @@ export class TokenExporter {
   /**
    * Exports color tokens as CSS custom properties
    */
-  private static exportColorTokensAsCSS(colorTokens, indent)= '';
+  private static exportColorTokensAsCSS(colorTokens: any, indent: number): string {
+    let css = '';
     const spaces = ' '.repeat(indent);
 
-    Object.entries(colorTokens).forEach(([category, categoryTokens], any]) => {
+    Object.entries(colorTokens).forEach(([category, categoryTokens]: [string, any]) => {
       if (typeof categoryTokens === 'object' && categoryTokens.value) {
         // Single token
-        css += `${spaces}--color-${category}};\n`;
+        css += `${spaces}--color-${category}: ${categoryTokens.value};\n`;
       } else if (typeof categoryTokens === 'object') {
         // Token group
-        Object.entries(categoryTokens).forEach(([shade, token], any]) => {
+        Object.entries(categoryTokens).forEach(([shade, token]: [string, any]) => {
           if (token && typeof token === 'object' && token.value) {
-            css += `${spaces}--color-${category}-${shade}};\n`;
+            css += `${spaces}--color-${category}-${shade}: ${token.value};\n`;
           }
         });
       }
@@ -93,13 +103,14 @@ export class TokenExporter {
   /**
    * Exports font tokens as CSS custom properties
    */
-  private static exportFontTokensAsCSS(fontTokens, indent)= '';
+  private static exportFontTokensAsCSS(fontTokens: any, indent: number): string {
+    let css = '';
     const spaces = ' '.repeat(indent);
 
-    Object.entries(fontTokens).forEach(([name, token], any]) => {
+    Object.entries(fontTokens).forEach(([name, token]: [string, any]) => {
       if (token && typeof token === 'object' && token.value) {
         const cssVarName = this.getFontCSSVarName(name, token.type);
-        css += `${spaces}--font-${cssVarName}};\n`;
+        css += `${spaces}--font-${cssVarName}: ${token.value};\n`;
       }
     });
 
@@ -109,7 +120,8 @@ export class TokenExporter {
   /**
    * Gets the CSS variable name for font tokens
    */
-  private static getFontCSSVarName(name, type)=== 'fontFamily') {
+  private static getFontCSSVarName(name: string, type: string): string {
+    if (type === 'fontFamily') {
       return name;
     }
     if (type === 'fontSize') {
@@ -127,12 +139,13 @@ export class TokenExporter {
   /**
    * Exports spacing tokens as CSS custom properties
    */
-  private static exportSpacingTokensAsCSS(spacingTokens, indent)= '';
+  private static exportSpacingTokensAsCSS(spacingTokens: any, indent: number): string {
+    let css = '';
     const spaces = ' '.repeat(indent);
 
-    Object.entries(spacingTokens).forEach(([scale, token], any]) => {
+    Object.entries(spacingTokens).forEach(([scale, token]: [string, any]) => {
       if (token && typeof token === 'object' && token.value) {
-        css += `${spaces}--spacing-${scale}}px;\n`;
+        css += `${spaces}--spacing-${scale}: ${token.value}px;\n`;
       }
     });
 
@@ -142,12 +155,13 @@ export class TokenExporter {
   /**
    * Exports shadow tokens as CSS custom properties
    */
-  private static exportShadowTokensAsCSS(shadowTokens, indent)= '';
+  private static exportShadowTokensAsCSS(shadowTokens: any, indent: number): string {
+    let css = '';
     const spaces = ' '.repeat(indent);
 
-    Object.entries(shadowTokens).forEach(([elevation, token], any]) => {
+    Object.entries(shadowTokens).forEach(([elevation, token]: [string, any]) => {
       if (token && typeof token === 'object' && token.value) {
-        css += `${spaces}--shadow-${elevation}};\n`;
+        css += `${spaces}--shadow-${elevation}: ${token.value};\n`;
       }
     });
 
@@ -157,12 +171,13 @@ export class TokenExporter {
   /**
    * Exports transition tokens as CSS custom properties
    */
-  private static exportTransitionTokensAsCSS(transitionTokens, indent)= '';
+  private static exportTransitionTokensAsCSS(transitionTokens: any, indent: number): string {
+    let css = '';
     const spaces = ' '.repeat(indent);
 
-    Object.entries(transitionTokens).forEach(([name, token], any]) => {
+    Object.entries(transitionTokens).forEach(([name, token]: [string, any]) => {
       if (token && typeof token === 'object' && token.value) {
-        css += `${spaces}--transition-${name}};\n`;
+        css += `${spaces}--transition-${name}: ${token.value};\n`;
       }
     });
 
@@ -172,12 +187,13 @@ export class TokenExporter {
   /**
    * Exports breakpoint tokens as CSS custom properties
    */
-  private static exportBreakpointTokensAsCSS(breakpointTokens, indent)= '';
+  private static exportBreakpointTokensAsCSS(breakpointTokens: any, indent: number): string {
+    let css = '';
     const spaces = ' '.repeat(indent);
 
-    Object.entries(breakpointTokens).forEach(([name, token], any]) => {
+    Object.entries(breakpointTokens).forEach(([name, token]: [string, any]) => {
       if (token && typeof token === 'object' && token.value) {
-        css += `${spaces}--breakpoint-${name}}px;\n`;
+        css += `${spaces}--breakpoint-${name}: ${token.value}px;\n`;
       }
     });
 
@@ -187,11 +203,12 @@ export class TokenExporter {
   /**
    * Exports tokens as SCSS variables
    */
-  private static exportAsSCSS(tokens, options)= '';
+  private static exportAsSCSS(tokens: ThemeTokens, options: TokenExportOptions): string {
+    let scss = '';
     
     if (options.includeComments) {
       scss += `// ${tokens.theme} Design Tokens - v${tokens.version}\n`;
-      scss += `// Generated on).toISOString()}\n\n`;
+      scss += `// Generated on: ${new Date().toISOString()}\n\n`;
     }
 
     // Export color tokens
@@ -230,17 +247,18 @@ export class TokenExporter {
   /**
    * Exports color tokens as SCSS variables
    */
-  private static exportColorTokensAsSCSS(colorTokens)= '\n// Color Tokens\n';
+  private static exportColorTokensAsSCSS(colorTokens: any): string {
+    let scss = '\n// Color Tokens\n';
     
-    Object.entries(colorTokens).forEach(([category, categoryTokens], any]) => {
+    Object.entries(colorTokens).forEach(([category, categoryTokens]: [string, any]) => {
       if (typeof categoryTokens === 'object' && categoryTokens.value) {
         // Single token
-        scss += `$color-${category}};\n`;
+        scss += `$color-${category}: ${categoryTokens.value};\n`;
       } else if (typeof categoryTokens === 'object') {
         // Token group
-        Object.entries(categoryTokens).forEach(([shade, token], any]) => {
+        Object.entries(categoryTokens).forEach(([shade, token]: [string, any]) => {
           if (token && typeof token === 'object' && token.value) {
-            scss += `$color-${category}-${shade}};\n`;
+            scss += `$color-${category}-${shade}: ${token.value};\n`;
           }
         });
       }
@@ -252,12 +270,13 @@ export class TokenExporter {
   /**
    * Exports font tokens as SCSS variables
    */
-  private static exportFontTokensAsSCSS(fontTokens)= '\n// Font Tokens\n';
+  private static exportFontTokensAsSCSS(fontTokens: any): string {
+    let scss = '\n// Font Tokens\n';
     
-    Object.entries(fontTokens).forEach(([name, token], any]) => {
+    Object.entries(fontTokens).forEach(([name, token]: [string, any]) => {
       if (token && typeof token === 'object' && token.value) {
         const scssVarName = this.getFontSCSSVarName(name, token.type);
-        scss += `$font-${scssVarName}};\n`;
+        scss += `$font-${scssVarName}: ${token.value};\n`;
       }
     });
 
@@ -267,7 +286,8 @@ export class TokenExporter {
   /**
    * Gets the SCSS variable name for font tokens
    */
-  private static getFontSCSSVarName(name, type)=== 'fontFamily') {
+  private static getFontSCSSVarName(name: string, type: string): string {
+    if (type === 'fontFamily') {
       return name;
     }
     if (type === 'fontSize') {
@@ -285,11 +305,12 @@ export class TokenExporter {
   /**
    * Exports spacing tokens as SCSS variables
    */
-  private static exportSpacingTokensAsSCSS(spacingTokens)= '\n// Spacing Tokens\n';
+  private static exportSpacingTokensAsSCSS(spacingTokens: any): string {
+    let scss = '\n// Spacing Tokens\n';
     
-    Object.entries(spacingTokens).forEach(([scale, token], any]) => {
+    Object.entries(spacingTokens).forEach(([scale, token]: [string, any]) => {
       if (token && typeof token === 'object' && token.value) {
-        scss += `$spacing-${scale}}px;\n`;
+        scss += `$spacing-${scale}: ${token.value}px;\n`;
       }
     });
 
@@ -299,11 +320,12 @@ export class TokenExporter {
   /**
    * Exports shadow tokens as SCSS variables
    */
-  private static exportShadowTokensAsSCSS(shadowTokens)= '\n// Shadow Tokens\n';
+  private static exportShadowTokensAsSCSS(shadowTokens: any): string {
+    let scss = '\n// Shadow Tokens\n';
     
-    Object.entries(shadowTokens).forEach(([elevation, token], any]) => {
+    Object.entries(shadowTokens).forEach(([elevation, token]: [string, any]) => {
       if (token && typeof token === 'object' && token.value) {
-        scss += `$shadow-${elevation}};\n`;
+        scss += `$shadow-${elevation}: ${token.value};\n`;
       }
     });
 
@@ -313,11 +335,12 @@ export class TokenExporter {
   /**
    * Exports transition tokens as SCSS variables
    */
-  private static exportTransitionTokensAsSCSS(transitionTokens)= '\n// Transition Tokens\n';
+  private static exportTransitionTokensAsSCSS(transitionTokens: any): string {
+    let scss = '\n// Transition Tokens\n';
     
-    Object.entries(transitionTokens).forEach(([name, token], any]) => {
+    Object.entries(transitionTokens).forEach(([name, token]: [string, any]) => {
       if (token && typeof token === 'object' && token.value) {
-        scss += `$transition-${name}};\n`;
+        scss += `$transition-${name}: ${token.value};\n`;
       }
     });
 
@@ -327,11 +350,12 @@ export class TokenExporter {
   /**
    * Exports breakpoint tokens as SCSS variables
    */
-  private static exportBreakpointTokensAsSCSS(breakpointTokens)= '\n// Breakpoint Tokens\n';
+  private static exportBreakpointTokensAsSCSS(breakpointTokens: any): string {
+    let scss = '\n// Breakpoint Tokens\n';
     
-    Object.entries(breakpointTokens).forEach(([name, token], any]) => {
+    Object.entries(breakpointTokens).forEach(([name, token]: [string, any]) => {
       if (token && typeof token === 'object' && token.value) {
-        scss += `$breakpoint-${name}}px;\n`;
+        scss += `$breakpoint-${name}: ${token.value}px;\n`;
       }
     });
 
@@ -341,12 +365,13 @@ export class TokenExporter {
   /**
    * Exports tokens as JavaScript object
    */
-  private static exportAsJS(tokens, options)= options.includeMetadata ? tokens ;
+  private static exportAsJS(tokens: ThemeTokens, options: TokenExportOptions): string {
+    const exportData = options.includeMetadata ? tokens : tokens.tokens;
     let js = '';
     
     if (options.includeComments) {
       js += `// ${tokens.theme} Design Tokens - v${tokens.version}\n`;
-      js += `// Generated on).toISOString()}\n\n`;
+      js += `// Generated on: ${new Date().toISOString()}\n\n`;
     }
 
     js += `module.exports = ${JSON.stringify(exportData, null, 2)};\n`;
@@ -356,16 +381,17 @@ export class TokenExporter {
   /**
    * Exports tokens as TypeScript object
    */
-  private static exportAsTS(tokens, options)= options.includeMetadata ? tokens ;
+  private static exportAsTS(tokens: ThemeTokens, options: TokenExportOptions): string {
+    const exportData = options.includeMetadata ? tokens : tokens.tokens;
     let ts = '';
     
     if (options.includeComments) {
       ts += `// ${tokens.theme} Design Tokens - v${tokens.version}\n`;
-      ts += `// Generated on).toISOString()}\n\n`;
+      ts += `// Generated on: ${new Date().toISOString()}\n\n`;
     }
 
     ts += `export const tokens = ${JSON.stringify(exportData, null, 2)} as const;\n`;
-    ts += `\n`;
+    ts += `export type Tokens = typeof tokens;\n`;
     return ts;
   }
 }