@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.8

package/dist/components/ui/token-demo.esm.js

@@ -0,0 +1,183 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
+import { Badge } from './badge';
+import { Button } from './button';
+import { useTheme } from '../../themes';
+import { createTokenManager } from '../../tokens';
+
+export const TokenDemo= () => {
+  const { currentTheme, currentThemeConfig } = useTheme();
+  const [tokenManager] = useState(() => createTokenManager());
+  const [exportFormat, setExportFormat] = useState<'json' | 'css' | 'scss' | 'js' | 'ts'>('json');
+  const [exportedTokens, setExportedTokens] = useState<string>('');
+  const [tokenStats, setTokenStats] = useState<any>(null);
+
+  const generateTokens = () => {
+    if (currentThemeConfig) {
+      const tokens = tokenManager.generateTokens(currentThemeConfig);
+      const stats = tokenManager.getTokenStats();
+      setTokenStats(stats);
+      return tokens;
+    }
+    return null;
+  };
+
+  const exportTokens = () => {
+    if (currentThemeConfig) {
+      const tokens = tokenManager.generateTokens(currentThemeConfig);
+      const exported = tokenManager.exportTokens(tokens, exportFormat);
+      setExportedTokens(exported);
+    }
+  };
+
+  const exportAllFormats = () => {
+    if (currentThemeConfig) {
+      const tokens = tokenManager.generateTokens(currentThemeConfig);
+      const allFormats = ['json', 'css', 'scss', 'js', 'ts'] as const;
+      const results = allFormats.map(format => ({
+        format,
+        content, format)
+      }));
+      
+      const combined = results.map(r => `=== ${r.format.toUpperCase()} ===\n${r.content}\n\n`).join('');
+      setExportedTokens(combined);
+    }
+  };
+
+  const clearTokens = () => {
+    tokenManager.clearTokens();
+    setTokenStats(null);
+    setExportedTokens('');
+  };
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            🎨 Design Token System
+            <Badge variant="outline">Story 8</Badge>
+          </CardTitle>
+          <CardDescription>
+            Generate, validate, and export design tokens from your current theme
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex flex-wrap gap-2">
+            <Button onClick={generateTokens} variant="default">
+              Generate Tokens
+            </Button>
+            <Button onClick={exportTokens} variant="outline">
+              Export {exportFormat.toUpperCase()}
+            </Button>
+            <Button onClick={exportAllFormats} variant="outline">
+              Export All Formats
+            </Button>
+            <Button onClick={clearTokens} variant="destructive">
+              Clear Tokens
+            </Button>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <label className="text-sm font-medium">Export Format={exportFormat}
+              onChange={(e) => setExportFormat(e.target.value as any)}
+              className="px-3 py-1 border rounded text-sm"
+            >
+              <option value="json">JSON</option>
+              <option value="css">CSS</option>
+              <option value="scss">SCSS</option>
+              <option value="js">JavaScript</option>
+              <option value="ts">TypeScript</option>
+            </select>
+          </div>
+
+          {tokenStats && (
+            <div className="p-4 bg-gray-50 dark="font-semibold mb-3">Token Statistics</h4>
+              <div className="grid grid-cols-2 md="font-medium">Total Themes="text-lg font-bold">{tokenStats.totalThemes}</div>
+                </div>
+                <div>
+                  <span className="font-medium">Total Tokens="text-lg font-bold">{tokenStats.totalTokens}</div>
+                </div>
+                <div>
+                  <span className="font-medium">Current Theme="text-lg font-bold">{currentTheme}</div>
+                </div>
+                <div>
+                  <span className="font-medium">Theme Version="text-lg font-bold">{currentThemeConfig?.meta.version || 'N/A'}</div>
+                </div>
+              </div>
+              
+              {tokenStats.tokenBreakdown && (
+                <div className="mt-4">
+                  <h5 className="font-medium mb-2">Token Breakdown="flex flex-wrap gap-2">
+                    {Object.entries(tokenStats.tokenBreakdown).map(([category, count]) => (
+                      <Badge key={category} variant="secondary">
+                        {category}}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {exportedTokens && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Exported Tokens</CardTitle>
+            <CardDescription>
+              Tokens exported in {exportFormat.toUpperCase()} format
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="relative">
+              <Button
+                onClick={() => navigator.clipboard.writeText(exportedTokens)}
+                variant="outline"
+                size="sm"
+                className="absolute top-2 right-2"
+              >
+                Copy
+              </Button>
+              <pre className="bg-gray-900 text-green-400 p-4 rounded-lg text-sm overflow-x-auto max-h-96">
+                <code>{exportedTokens}</code>
+              </pre>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Current Theme Info</CardTitle>
+          <CardDescription>
+            Information about the currently active theme
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md="font-medium mb-2">Theme Details</h4>
+              <div className="space-y-2 text-sm">
+                <div><span className="font-medium">Name}</div>
+                <div><span className="font-medium">Description}</div>
+                <div><span className="font-medium">Category}</div>
+                <div><span className="font-medium">Version}</div>
+                <div><span className="font-medium">Author}</div>
+              </div>
+            </div>
+            <div>
+              <h4 className="font-medium mb-2">Font Configuration</h4>
+              <div className="space-y-2 text-sm">
+                <div><span className="font-medium">Primary}</div>
+                <div><span className="font-medium">Secondary}</div>
+                <div><span className="font-medium">Display}</div>
+                <div><span className="font-medium">Body}</div>
+                <div><span className="font-medium">Mono}</div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

package/dist/components/ui/token-demo.js

@@ -0,0 +1,183 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
+import { Badge } from './badge';
+import { Button } from './button';
+import { useTheme } from '../../themes';
+import { createTokenManager } from '../../tokens';
+
+export const TokenDemo= () => {
+  const { currentTheme, currentThemeConfig } = useTheme();
+  const [tokenManager] = useState(() => createTokenManager());
+  const [exportFormat, setExportFormat] = useState<'json' | 'css' | 'scss' | 'js' | 'ts'>('json');
+  const [exportedTokens, setExportedTokens] = useState<string>('');
+  const [tokenStats, setTokenStats] = useState<any>(null);
+
+  const generateTokens = () => {
+    if (currentThemeConfig) {
+      const tokens = tokenManager.generateTokens(currentThemeConfig);
+      const stats = tokenManager.getTokenStats();
+      setTokenStats(stats);
+      return tokens;
+    }
+    return null;
+  };
+
+  const exportTokens = () => {
+    if (currentThemeConfig) {
+      const tokens = tokenManager.generateTokens(currentThemeConfig);
+      const exported = tokenManager.exportTokens(tokens, exportFormat);
+      setExportedTokens(exported);
+    }
+  };
+
+  const exportAllFormats = () => {
+    if (currentThemeConfig) {
+      const tokens = tokenManager.generateTokens(currentThemeConfig);
+      const allFormats = ['json', 'css', 'scss', 'js', 'ts'] as const;
+      const results = allFormats.map(format => ({
+        format,
+        content, format)
+      }));
+      
+      const combined = results.map(r => `=== ${r.format.toUpperCase()} ===\n${r.content}\n\n`).join('');
+      setExportedTokens(combined);
+    }
+  };
+
+  const clearTokens = () => {
+    tokenManager.clearTokens();
+    setTokenStats(null);
+    setExportedTokens('');
+  };
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            🎨 Design Token System
+            <Badge variant="outline">Story 8</Badge>
+          </CardTitle>
+          <CardDescription>
+            Generate, validate, and export design tokens from your current theme
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex flex-wrap gap-2">
+            <Button onClick={generateTokens} variant="default">
+              Generate Tokens
+            </Button>
+            <Button onClick={exportTokens} variant="outline">
+              Export {exportFormat.toUpperCase()}
+            </Button>
+            <Button onClick={exportAllFormats} variant="outline">
+              Export All Formats
+            </Button>
+            <Button onClick={clearTokens} variant="destructive">
+              Clear Tokens
+            </Button>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <label className="text-sm font-medium">Export Format={exportFormat}
+              onChange={(e) => setExportFormat(e.target.value as any)}
+              className="px-3 py-1 border rounded text-sm"
+            >
+              <option value="json">JSON</option>
+              <option value="css">CSS</option>
+              <option value="scss">SCSS</option>
+              <option value="js">JavaScript</option>
+              <option value="ts">TypeScript</option>
+            </select>
+          </div>
+
+          {tokenStats && (
+            <div className="p-4 bg-gray-50 dark="font-semibold mb-3">Token Statistics</h4>
+              <div className="grid grid-cols-2 md="font-medium">Total Themes="text-lg font-bold">{tokenStats.totalThemes}</div>
+                </div>
+                <div>
+                  <span className="font-medium">Total Tokens="text-lg font-bold">{tokenStats.totalTokens}</div>
+                </div>
+                <div>
+                  <span className="font-medium">Current Theme="text-lg font-bold">{currentTheme}</div>
+                </div>
+                <div>
+                  <span className="font-medium">Theme Version="text-lg font-bold">{currentThemeConfig?.meta.version || 'N/A'}</div>
+                </div>
+              </div>
+              
+              {tokenStats.tokenBreakdown && (
+                <div className="mt-4">
+                  <h5 className="font-medium mb-2">Token Breakdown="flex flex-wrap gap-2">
+                    {Object.entries(tokenStats.tokenBreakdown).map(([category, count]) => (
+                      <Badge key={category} variant="secondary">
+                        {category}}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {exportedTokens && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Exported Tokens</CardTitle>
+            <CardDescription>
+              Tokens exported in {exportFormat.toUpperCase()} format
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="relative">
+              <Button
+                onClick={() => navigator.clipboard.writeText(exportedTokens)}
+                variant="outline"
+                size="sm"
+                className="absolute top-2 right-2"
+              >
+                Copy
+              </Button>
+              <pre className="bg-gray-900 text-green-400 p-4 rounded-lg text-sm overflow-x-auto max-h-96">
+                <code>{exportedTokens}</code>
+              </pre>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Current Theme Info</CardTitle>
+          <CardDescription>
+            Information about the currently active theme
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md="font-medium mb-2">Theme Details</h4>
+              <div className="space-y-2 text-sm">
+                <div><span className="font-medium">Name}</div>
+                <div><span className="font-medium">Description}</div>
+                <div><span className="font-medium">Category}</div>
+                <div><span className="font-medium">Version}</div>
+                <div><span className="font-medium">Author}</div>
+              </div>
+            </div>
+            <div>
+              <h4 className="font-medium mb-2">Font Configuration</h4>
+              <div className="space-y-2 text-sm">
+                <div><span className="font-medium">Primary}</div>
+                <div><span className="font-medium">Secondary}</div>
+                <div><span className="font-medium">Display}</div>
+                <div><span className="font-medium">Body}</div>
+                <div><span className="font-medium">Mono}</div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};