diff --git a/archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx b/archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx index 4b51da75..4e7e1e7f 100644 --- a/archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx +++ b/archon-ui-main/src/features/style-guide/components/StyleGuideView.tsx @@ -1,20 +1,16 @@ import { useState } from "react"; -import { Palette, Layout, Settings } from "lucide-react"; +import { Palette, Layout } from "lucide-react"; import { PillNavigation, type PillNavigationItem } from "../shared/PillNavigation"; import { StyleGuideTab } from "../tabs/StyleGuideTab"; import { LayoutsTab } from "../tabs/LayoutsTab"; -import { ConfiguratorsTab } from "../tabs/ConfiguratorsTab"; import { ThemeToggle } from "../../../components/ui/ThemeToggle"; export const StyleGuideView = () => { - const [activeTab, setActiveTab] = useState<"style-guide" | "layouts" | "configurators">( - "style-guide", - ); + const [activeTab, setActiveTab] = useState<"style-guide" | "layouts">("style-guide"); const navigationItems: PillNavigationItem[] = [ { id: "style-guide", label: "Style Guide", icon: }, { id: "layouts", label: "Layouts", icon: }, - { id: "configurators", label: "Configurators", icon: }, ]; return ( @@ -29,7 +25,7 @@ export const StyleGuideView = () => { Archon UI Style Guide

- Design system foundations, layout patterns, and interactive component configurators. + Design system foundations and layout patterns for building consistent interfaces.

@@ -51,7 +47,6 @@ export const StyleGuideView = () => {
{activeTab === "style-guide" && } {activeTab === "layouts" && } - {activeTab === "configurators" && }
); diff --git a/archon-ui-main/src/features/style-guide/configurators/ButtonConfigurator.tsx b/archon-ui-main/src/features/style-guide/configurators/ButtonConfigurator.tsx deleted file mode 100644 index a5d33a96..00000000 --- a/archon-ui-main/src/features/style-guide/configurators/ButtonConfigurator.tsx +++ /dev/null @@ -1,214 +0,0 @@ -import { useState } from 'react'; -import { Button } from '@/features/ui/primitives/button'; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/features/ui/primitives/select'; -import { Switch } from '@/features/ui/primitives/switch'; -import { Input } from '@/features/ui/primitives/input'; -import { LivePreview } from '../shared/LivePreview'; -import { CodeDisplay } from '../shared/CodeDisplay'; -import { ConfigPanel } from '../shared/ConfigPanel'; -import { ConfigRow } from '../shared/ConfigRow'; -import { Loader2, Download, Eye, Code } from 'lucide-react'; -import type { ButtonVariant, ButtonSize } from '../types'; - -interface ButtonConfig { - variant: ButtonVariant; - size: ButtonSize; - loading: boolean; - disabled: boolean; - withIcon: boolean; - text: string; -} - -export const ButtonConfigurator = () => { - const [config, setConfig] = useState({ - variant: 'default', - size: 'default', - loading: false, - disabled: false, - withIcon: false, - text: 'Click me' - }); - const [activeTab, setActiveTab] = useState<'preview' | 'code'>('preview'); - - const generateCode = (config: ButtonConfig) => { - const imports = [`import { Button } from '@/features/ui/primitives/button';`]; - - if (config.loading) { - imports.push(`import { Loader2 } from 'lucide-react';`); - } - if (config.withIcon) { - imports.push(`import { Download } from 'lucide-react';`); - } - - const aiContext = `/** - * 🤖 AI CONTEXT: Button Component - * - * VARIANT DECISION TREE: - * - default: Primary actions, main CTAs, submit buttons - * - destructive: Delete, remove, cancel dangerous operations - * - outline: Secondary actions, alternative options - * - ghost: Tertiary actions, minimal emphasis - * - link: Navigation, text-only actions - * - cyan: Special emphasis, Tron-themed primary - * - knowledge: Knowledge base specific actions - * - * SIZE GUIDELINES: - * - xs: Inline actions, table cells - * - sm: Dense UI, secondary actions - * - default: Most use cases - * - lg: Primary CTAs, hero sections - * - icon: Icon-only buttons - */`; - - const props: string[] = []; - if (config.variant !== 'default') props.push(`variant="${config.variant}"`); - if (config.size !== 'default') props.push(`size="${config.size}"`); - if (config.loading) props.push(`loading={true}`); - if (config.disabled) props.push(`disabled={true}`); - - const content = config.loading - ? `<>\n \n ${config.text}\n ` - : config.withIcon - ? `<>\n \n ${config.text}\n ` - : config.text; - - const component = `export const MyButton = () => { - return ( - 0 ? '\n ' + props.join('\n ') : ''}> - ${content} - - ); -};`; - - return `${imports.join('\n')}\n\n${aiContext}\n\n${component}`; - }; - - return ( -
- {/* LEFT: Configuration Panel (1/4 width) */} -
- -
- - - - - - - - - - setConfig({...config, loading})} - /> - - - - setConfig({...config, disabled})} - /> - - - - setConfig({...config, withIcon})} - /> - - - {config.size !== 'icon' && ( - - setConfig({...config, text: e.target.value})} - placeholder="Button text..." - className="w-24 text-xs" - /> - - )} -
- - {/* Preview/Code Tabs INSIDE configurator */} -
-
- - -
-
- -
- - {/* RIGHT: Preview or Code Content (3/4 width) */} -
- {activeTab === 'preview' ? ( - - - - ) : ( - - )} -
-
- ); -}; \ No newline at end of file diff --git a/archon-ui-main/src/features/style-guide/configurators/CheckboxConfigurator.tsx b/archon-ui-main/src/features/style-guide/configurators/CheckboxConfigurator.tsx deleted file mode 100644 index d68edd7a..00000000 --- a/archon-ui-main/src/features/style-guide/configurators/CheckboxConfigurator.tsx +++ /dev/null @@ -1,315 +0,0 @@ -import React, { useState } from "react"; -import { Checkbox, type CheckboxColor } from "../../../features/ui/primitives/checkbox"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue -} from "../../../features/ui/primitives/select"; -import { ConfiguratorCard } from "../shared/ConfiguratorCard"; -import { Label } from "../../../features/ui/primitives/label"; - -const colorOptions = [ - { value: "purple", label: "Purple" }, - { value: "blue", label: "Blue" }, - { value: "green", label: "Green" }, - { value: "pink", label: "Pink" }, - { value: "orange", label: "Orange" }, - { value: "cyan", label: "Cyan" }, -]; - -const stateOptions = [ - { value: "unchecked", label: "Unchecked" }, - { value: "checked", label: "Checked" }, - { value: "indeterminate", label: "Indeterminate" }, -]; - -/** - * 🤖 AI CONTEXT: Checkbox Configurator - * - * CONFIGURATION OPTIONS: - * 1. COLOR - Six accent colors with neon glow - * - Each color has associated glow effects - * - Glow intensity increases on check - * - * 2. STATE - Three checkbox states - * - Unchecked: Empty glass box - * - Checked: Check icon with glow - * - Indeterminate: Minus icon (partial selection) - * - * 3. LABEL - Optional label positioning - * - Can be placed left or right - * - Click target includes label - * - * 4. DISABLED - Interactive state control - */ -export function CheckboxConfigurator() { - const [color, setColor] = useState("cyan"); - const [state, setState] = useState<"unchecked" | "checked" | "indeterminate">("checked"); - const [disabled, setDisabled] = useState(false); - const [showLabel, setShowLabel] = useState(true); - - const getCheckedState = () => { - if (state === "indeterminate") return "indeterminate"; - return state === "checked"; - }; - - const generateCode = () => { - const props: string[] = []; - - if (color !== "cyan") props.push(`color="${color}"`); - if (state === "indeterminate") { - props.push(`indeterminate`); - props.push(`checked="indeterminate"`); - } else if (state === "checked") { - props.push(`checked={true}`); - } else { - props.push(`checked={false}`); - } - if (disabled) props.push(`disabled`); - props.push(`onCheckedChange={(checked) => console.log(checked)}`); - - const checkboxCode = ``; - - if (showLabel) { - return `import { Checkbox } from "@/features/ui/primitives/checkbox"; -import { Label } from "@/features/ui/primitives/label"; - -/** - * 🤖 AI CONTEXT: Checkbox with Label - * - * STATE: ${state} - * COLOR: ${color} - Neon glow effect - * - * GLASS PROPERTIES: - * - Transparency: bg-white/10 backdrop-blur - * - Glow: ${color} shadow on checked state - * - Animation: Zoom in/out on check - * ${state === "indeterminate" ? "* Indeterminate: Partial selection state" : ""} - */ - -
- - -
`; - } - - return `import { Checkbox } from "@/features/ui/primitives/checkbox"; - -/** - * 🤖 AI CONTEXT: Standalone Checkbox - * - * STATE: ${state} - * COLOR: ${color} - Neon glow effect - * - * GLASS PROPERTIES: - * - Transparency: bg-white/10 backdrop-blur - * - Glow: ${color} shadow on checked state - * - Animation: Zoom in/out on check - * ${state === "indeterminate" ? "* Indeterminate: Partial selection state" : ""} - */ - -${checkboxCode}`; - }; - - return ( - -
- {/* Preview */} -
- {showLabel ? ( -
- { - // Cycle through states - if (state === "unchecked") setState("checked"); - else if (state === "checked") setState("indeterminate"); - else setState("unchecked"); - }} - /> - -
- ) : ( - { - // Cycle through states - if (state === "unchecked") setState("checked"); - else if (state === "checked") setState("indeterminate"); - else setState("unchecked"); - }} - /> - )} -
- - {/* Configuration */} -
- {/* Color */} -
- - -
- - {/* State */} -
- - -
- - {/* Label */} -
- -
- -
-
- - {/* Disabled */} -
- -
- -
-
-
- - {/* Examples */} -
-

Examples

- - {/* Color Grid */} -
-

All Colors

-
- {colorOptions.map(opt => ( - - ))} -
-
- - {/* States */} -
-

States

-
-
- - Unchecked -
-
- - Checked -
-
- - Indeterminate -
-
- - Disabled -
-
-
- - {/* List Example */} -
-

List Example

-
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
- - ); -} \ No newline at end of file diff --git a/archon-ui-main/src/features/style-guide/configurators/FormConfigurator.tsx b/archon-ui-main/src/features/style-guide/configurators/FormConfigurator.tsx deleted file mode 100644 index a0b36293..00000000 --- a/archon-ui-main/src/features/style-guide/configurators/FormConfigurator.tsx +++ /dev/null @@ -1,219 +0,0 @@ -import { useState } from 'react'; -import { Input } from '@/features/ui/primitives/input'; -import { Button } from '@/features/ui/primitives/button'; -import { Label } from '@/features/ui/primitives/label'; -import { Switch } from '@/features/ui/primitives/switch'; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/features/ui/primitives/select'; -import { LivePreview } from '../shared/LivePreview'; -import { CodeDisplay } from '../shared/CodeDisplay'; -import { ConfigPanel } from '../shared/ConfigPanel'; -import { Eye, Code } from 'lucide-react'; -import type { InputType } from '../types'; - -interface FormConfig { - error: boolean; - disabled: boolean; - placeholder: string; - inputType: InputType; -} - -export const FormConfigurator = () => { - const [config, setConfig] = useState({ - error: false, - disabled: false, - placeholder: 'Enter your text...', - inputType: 'text' - }); - const [activeTab, setActiveTab] = useState<'preview' | 'code'>('preview'); - - const generateCode = (config: FormConfig) => { - const imports = `import { Input } from '@/features/ui/primitives/input'; -import { Label } from '@/features/ui/primitives/label'; -import { Button } from '@/features/ui/primitives/button';`; - - const aiContext = `/** - * 🤖 AI CONTEXT: Form Input Component - * - * PURPOSE: Text input with glass morphism styling and validation states - * WHEN TO USE: Forms, search bars, data entry fields - * WHEN NOT TO USE: Large text content (use textarea), complex selections (use select) - * - * INPUT TYPE GUIDELINES: - * - text: General text input, names, titles - * - email: Email addresses (includes validation) - * - password: Passwords (masks input) - * - number: Numeric values (shows number pad on mobile) - * - * ERROR STATE: - * - Use when validation fails - * - Shows red border and focus ring - * - Pair with error message below input - * - * DISABLED STATE: - * - Use when input is temporarily unavailable - * - Shows reduced opacity and prevents interaction - * - Consider using readonly for permanent restrictions - */`; - - const props: string[] = []; - if (config.inputType !== 'text') props.push(`type="${config.inputType}"`); - if (config.error) props.push(`error={true}`); - if (config.disabled) props.push(`disabled={true}`); - if (config.placeholder) props.push(`placeholder="${config.placeholder}"`); - - const component = `export const MyForm = () => { - const [value, setValue] = useState(''); - - return ( -
-
- - setValue(e.target.value)}${props.length > 0 ? '\n ' + props.join('\n ') : ''} - /> - ${config.error ? `

- This field is required -

` : ''} -
- - -
- ); -};`; - - return `${imports}\n\n${aiContext}\n\n${component}`; - }; - - return ( -
- {/* LEFT: Configuration Panel (1/4 width) */} -
- -
- {/* Input Type */} -
- - -
- - {/* States */} -
-
- - setConfig({...config, error})} - /> -
- -
- - setConfig({...config, disabled})} - /> -
-
- - {/* Placeholder */} -
- - setConfig({...config, placeholder: e.target.value})} - /> -
-
- - {/* Preview/Code Tabs INSIDE configurator */} -
-
- - -
-
- -
- - {/* RIGHT: Preview or Code Content (3/4 width) */} -
- {activeTab === 'preview' ? ( - -
-
- - - {config.error && ( -

- This field is required -

- )} -
- - -
- - ) : ( - - )} -
-
- ); -}; \ No newline at end of file diff --git a/archon-ui-main/src/features/style-guide/configurators/GlassCardConfigurator.tsx b/archon-ui-main/src/features/style-guide/configurators/GlassCardConfigurator.tsx deleted file mode 100644 index 4343af08..00000000 --- a/archon-ui-main/src/features/style-guide/configurators/GlassCardConfigurator.tsx +++ /dev/null @@ -1,453 +0,0 @@ -import { useState } from 'react'; -import { Card } from '@/features/ui/primitives/card'; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/features/ui/primitives/select'; -import { Input } from '@/features/ui/primitives/input'; -import { CodeDisplay } from '../shared/CodeDisplay'; -import { cn } from '@/features/ui/primitives/styles'; -import type { GlowColor, GlowType, EdgePosition, EdgeColor, CardSize, Transparency, BlurLevel, GlassTint } from '../types'; - -interface GlassCardConfig { - blur: BlurLevel; - transparency: Transparency; - glassTint: GlassTint; - glowColor: GlowColor; - glowType: GlowType; - edgePosition: EdgePosition; - edgeColor: EdgeColor; - size: CardSize; - content: string; -} - -// Glass card showcase examples -const GLASS_CARD_EXAMPLES = [ - { - name: 'Clear Glass', - transparency: 'light' as const, - glassTint: 'none' as const, - glowColor: 'none' as const, - edgePosition: 'none' as const, - description: 'Pure transparent glass', - usage: 'Default containers, neutral elements' - }, - { - name: 'Purple Glass', - transparency: 'medium' as const, - glassTint: 'purple' as const, - glowColor: 'none' as const, - edgePosition: 'none' as const, - description: 'Purple-tinted transparent glass', - usage: 'Primary content areas' - }, - { - name: 'Cyan Inner Glow', - transparency: 'light' as const, - glassTint: 'none' as const, - glowColor: 'cyan' as const, - edgePosition: 'none' as const, - description: 'Glass with cyan inner glow', - usage: 'Active/selected states' - }, - { - name: 'Purple Outer Glow', - transparency: 'light' as const, - glassTint: 'none' as const, - glowColor: 'purple' as const, - edgePosition: 'none' as const, - description: 'Glass with purple outer glow', - usage: 'Featured content, CTAs' - }, - { - name: 'Purple Edge', - transparency: 'light' as const, - glassTint: 'none' as const, - glowColor: 'none' as const, - edgePosition: 'top' as const, - description: 'Glass with purple top edge', - usage: 'Knowledge cards, headers' - }, - { - name: 'Blue Left Edge', - transparency: 'light' as const, - glassTint: 'blue' as const, - glowColor: 'none' as const, - edgePosition: 'left' as const, - description: 'Light blue glass with blue left edge', - usage: 'Task cards, side content' - } -]; - -export const GlassCardConfigurator = () => { - const [activeView, setActiveView] = useState<'showcase' | 'configurator'>('showcase'); - const [config, setConfig] = useState({ - blur: 'xl', - transparency: 'light', - glassTint: 'none', - glowColor: 'none', - glowType: 'none', - edgePosition: 'none', - edgeColor: 'cyan', - size: 'lg', - content: 'Your glass card content here' - }); - - const generateCode = (config: GlassCardConfig) => { - const props: string[] = []; - if (config.blur !== 'xl') props.push(`blur="${config.blur}"`); - if (config.transparency !== 'medium') props.push(`transparency="${config.transparency}"`); - if (config.glassTint !== 'none') props.push(`glassTint="${config.glassTint}"`); - if (config.glowColor !== 'none' && config.glowType === 'inner') props.push(`glowColor="${config.glowColor}"`); - if (config.edgePosition !== 'none') props.push(`edgePosition="${config.edgePosition}"`); - if (config.edgePosition !== 'none' && config.edgeColor !== 'cyan') props.push(`edgeColor="${config.edgeColor}"`); - if (config.size !== 'md') props.push(`size="${config.size}"`); - - let additionalClasses = ''; - if (config.glowType === 'outer' && config.glowColor !== 'none') { - additionalClasses = `\n className="shadow-[0_0_30px_${config.glowColor}-500/80,_0_0_60px_${config.glowColor}-500/40]"`; - } else if (config.glowType === 'inner' && config.glowColor !== 'none') { - additionalClasses = `\n className="bg-${config.glowColor}-500/40 border border-${config.glowColor}-500 shadow-[inset_0_0_20px_${config.glowColor}-500/60]"`; - } - - return `import { Card } from '@/features/ui/primitives/card'; - -export const MyCard = () => { - return ( - 0 ? '\n ' + props.join('\n ') : ''}${additionalClasses}> - ${config.content} - - ); -};`; - }; - - return ( -
- {/* Small Pill Navigation */} -
-
-
- - -
-
-
- - {/* Content based on active view */} - {activeView === 'showcase' ? ( - -
-

Glass Card Showcase

-
- {GLASS_CARD_EXAMPLES.map((example) => ( -
- {/* Apply proper effects based on example type */} - {example.name === 'Cyan Inner Glow' ? ( - -

{example.name}

-

{example.description}

-

{example.usage}

- - ) : example.name === 'Purple Outer Glow' ? ( -
- -

{example.name}

-

{example.description}

-

{example.usage}

- -
- ) : example.name === 'Purple Edge' ? ( - -

{example.name}

-

{example.description}

-

{example.usage}

- - ) : example.name === 'Blue Left Edge' ? ( - -

{example.name}

-

{example.description}

-

{example.usage}

- - ) : ( - -

{example.name}

-

{example.description}

-

{example.usage}

- - )} -
- ))} -
-
- - ) : ( -
- {/* Configurator with side-by-side layout */} - -

Card Configurator

- -
- {/* Left: Configuration Controls */} -
-
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - setConfig({...config, content: e.target.value})} - placeholder="Card content..." - className="text-xs" - /> -
-
-
- - {/* Right: Live Preview on grid background */} -
-
- -

Glass Card

-

- {config.content} -

- -
-
-
- - - {/* Generated Code - Full Width Bottom */} - -

Generated Code

- - -
- )} -
- ); -}; \ No newline at end of file diff --git a/archon-ui-main/src/features/style-guide/configurators/ModalConfigurator.tsx b/archon-ui-main/src/features/style-guide/configurators/ModalConfigurator.tsx deleted file mode 100644 index 33716924..00000000 --- a/archon-ui-main/src/features/style-guide/configurators/ModalConfigurator.tsx +++ /dev/null @@ -1,235 +0,0 @@ -import { useState } from 'react'; -import { Button } from '@/features/ui/primitives/button'; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/features/ui/primitives/select'; -import { CodeDisplay } from '../shared/CodeDisplay'; -import { ConfigPanel } from '../shared/ConfigPanel'; -import { ConfigRow } from '../shared/ConfigRow'; -import { MODAL_TYPES } from '../standards/modalStandards'; -import { Eye, Code, X } from 'lucide-react'; -import type { ModalSize, GlowColor } from '../types'; - -export const ModalConfigurator = () => { - const [selectedType, setSelectedType] = useState('confirmation'); - const [activeTab, setActiveTab] = useState<'preview' | 'code'>('preview'); - const [customSize, setCustomSize] = useState('sm'); - const [customGlowColor, setCustomGlowColor] = useState>('red'); - - const generateCode = (type: keyof typeof MODAL_TYPES) => { - - const imports = `import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel, AlertDialogTrigger } from '@/features/ui/primitives/alert-dialog'; -import { Button } from '@/features/ui/primitives/button';`; - - const aiContext = `/** - * 🤖 AI CONTEXT: ${type.charAt(0).toUpperCase() + type.slice(1)} Modal - * - * PURPOSE: ${MODAL_TYPES[type].purpose} - * SIZE: ${customSize.toUpperCase()} - ${customSize === 'sm' ? 'Compact for simple confirmations' : - customSize === 'md' ? 'Standard for forms and content' : - customSize === 'lg' ? 'Large for detailed displays' : - 'Extra large for code/data views'} - * GLOW: ${customGlowColor.toUpperCase()} - ${customGlowColor === 'red' ? 'Danger/destructive actions' : - customGlowColor === 'green' ? 'Success/creation actions' : - customGlowColor === 'blue' ? 'Information/editing' : - customGlowColor === 'purple' ? 'Primary/featured content' : - 'Special emphasis/code display'} - * - * WHEN TO USE: - * ${type === 'confirmation' ? '- Delete operations\n * - Irreversible actions\n * - Warning confirmations' : - type === 'formCreate' ? '- Creating new resources\n * - Data entry forms\n * - Positive actions' : - type === 'formEdit' ? '- Editing existing data\n * - Update operations\n * - Modification forms' : - type === 'display' ? '- Showing detailed information\n * - Read-only content\n * - Feature showcases' : - type === 'codeViewer' ? '- Code snippets display\n * - JSON/data viewing\n * - Technical content' : - '- Application settings\n * - Configuration panels\n * - User preferences'} - * - * IMPLEMENTATION: Use AlertDialog for modal behavior, wrap trigger in AlertDialogTrigger - */`; - - const component = `export const ${type.charAt(0).toUpperCase() + type.slice(1)}Modal = ({ trigger, onConfirm }) => { - return ( - - - {trigger} - - - - ${type === 'confirmation' ? 'Confirm Action' : - type === 'formCreate' ? 'Create New Item' : - type === 'formEdit' ? 'Edit Item' : - type === 'display' ? 'Details' : - type === 'codeViewer' ? 'Code Viewer' : - 'Settings'} - - ${MODAL_TYPES[type].purpose} - - - - {/* Modal content goes here */} - - - Cancel - - ${type === 'confirmation' ? 'Confirm' : - type === 'formCreate' ? 'Create' : - type === 'formEdit' ? 'Save Changes' : - 'Close'} - - - - - ); -};`; - - return `${imports}\n\n${aiContext}\n\n${component}`; - }; - - const currentConfig = MODAL_TYPES[selectedType]; - - return ( -
- {/* LEFT: Configuration Panel (1/4 width) */} -
- -
- - - - - - - - - - - - - -
- {currentConfig.purpose} -
- -
- - {/* Preview/Code Tabs INSIDE configurator */} -
-
- - -
-
- -
- - {/* RIGHT: Preview or Code Content (3/4 width) */} -
- {activeTab === 'preview' ? ( -
- {/* Inline Modal Preview - No Button Trigger */} -
-
-
-

- {selectedType === 'confirmation' ? 'Confirm Action' : - selectedType === 'formCreate' ? 'Create New Item' : - selectedType === 'formEdit' ? 'Edit Item' : - selectedType === 'display' ? 'Details' : - selectedType === 'codeViewer' ? 'Code Viewer' : - 'Settings'} -

- -
- -
-

- {currentConfig.purpose} - This is an inline preview of the {selectedType} modal type. -

-
- -
-

- Modal content would go here. This {customSize} sized modal uses {customGlowColor} color theming. -

-
- -
- - -
-
-
-
- ) : ( - - )} -
-
- ); -}; \ No newline at end of file diff --git a/archon-ui-main/src/features/style-guide/configurators/NavigationConfigurator.tsx b/archon-ui-main/src/features/style-guide/configurators/NavigationConfigurator.tsx deleted file mode 100644 index 73b1f15f..00000000 --- a/archon-ui-main/src/features/style-guide/configurators/NavigationConfigurator.tsx +++ /dev/null @@ -1,489 +0,0 @@ -import React, { useState } from 'react'; -import { Card } from '@/features/ui/primitives/card'; -import { Checkbox } from '@/features/ui/primitives/checkbox'; -import { CodeDisplay } from '../shared/CodeDisplay'; -import { cn } from '@/features/ui/primitives/styles'; -import { - Home, - FileText, - BarChart, - Settings, - ChevronRight, - Palette, - Component, - Layout, - Code -} from 'lucide-react'; - -// Pill Navigation Configurator -const PillNavigationConfigurator = () => { - const [activeSection, setActiveSection] = useState('foundations'); - const [activeItem, setActiveItem] = useState('Colors'); - const [openDropdown, setOpenDropdown] = useState('foundations'); - - // Configuration options - const [colorVariant, setColorVariant] = useState('cyan'); - const [size, setSize] = useState('default'); - const [showIcons, setShowIcons] = useState(true); - const [showText, setShowText] = useState(true); - const [hasSubmenus, setHasSubmenus] = useState(true); - - // Editable navigation items - const [navigationItems, setNavigationItems] = useState([ - { - id: 'foundations', - label: 'Foundations', - icon: , - items: ['Colors', 'Typography', 'Spacing', 'Effects'] - }, - { - id: 'components', - label: 'Components', - icon: , - items: ['Cards', 'Buttons', 'Forms', 'Tables'] - }, - { - id: 'patterns', - label: 'Patterns', - icon: , - items: ['Layouts', 'Navigation', 'Data Display'] - }, - { - id: 'examples', - label: 'Examples', - icon: , - items: ['Compositions', 'Pages', 'Workflows'] - } - ]); - - const handleSectionClick = (sectionId: string) => { - if (activeSection === sectionId && openDropdown === sectionId) { - setOpenDropdown(null); - } else { - setActiveSection(sectionId); - if (hasSubmenus) { - setOpenDropdown(sectionId); - // Set first item as default - const section = navigationItems.find(item => item.id === sectionId); - if (section?.items?.[0]) { - setActiveItem(section.items[0]); - } - } - } - }; - - const handleItemClick = (item: string) => { - setActiveItem(item); - }; - - const updateItemLabel = (itemIndex: number, newLabel: string) => { - setNavigationItems(prev => - prev.map((item, index) => - index === itemIndex ? { ...item, label: newLabel } : item - ) - ); - }; - - const getColorClasses = (variant: string, isSelected: boolean) => { - const colors = { - cyan: isSelected - ? "bg-cyan-500/20 dark:bg-cyan-400/20 text-cyan-700 dark:text-cyan-300 border border-cyan-400/50 shadow-[0_0_10px_rgba(34,211,238,0.5)]" - : "text-gray-700 dark:text-gray-300 hover:bg-white/10 dark:hover:bg-white/5", - purple: isSelected - ? "bg-purple-500/20 dark:bg-purple-400/20 text-purple-700 dark:text-purple-300 border border-purple-400/50 shadow-[0_0_10px_rgba(147,51,234,0.5)]" - : "text-gray-700 dark:text-gray-300 hover:bg-white/10 dark:hover:bg-white/5", - emerald: isSelected - ? "bg-emerald-500/20 dark:bg-emerald-400/20 text-emerald-700 dark:text-emerald-300 border border-emerald-400/50 shadow-[0_0_10px_rgba(16,185,129,0.5)]" - : "text-gray-700 dark:text-gray-300 hover:bg-white/10 dark:hover:bg-white/5", - orange: isSelected - ? "bg-orange-500/20 dark:bg-orange-400/20 text-orange-700 dark:text-orange-300 border border-orange-400/50 shadow-[0_0_10px_rgba(251,146,60,0.5)]" - : "text-gray-700 dark:text-gray-300 hover:bg-white/10 dark:hover:bg-white/5" - }; - return colors[variant as keyof typeof colors] || colors.cyan; - }; - - const getSizeClasses = (sizeVariant: string) => { - const sizes = { - small: "px-4 py-2 text-xs", - default: "px-6 py-3 text-sm", - large: "px-8 py-4 text-base" - }; - return sizes[sizeVariant as keyof typeof sizes] || sizes.default; - }; - - const selectedSectionData = navigationItems.find(item => item.id === activeSection); - - const renderPillNavigation = () => ( -
-
- {navigationItems.map((item) => { - const isSelected = activeSection === item.id; - const hasDropdown = hasSubmenus && item.items && item.items.length > 0; - const isThisExpanded = openDropdown === item.id && hasDropdown; - - return ( -
- {/* Extended pill for selected item with dropdown */} - {isSelected && hasDropdown ? ( -
- {showIcons && item.icon} - {showText && item.label} - - {/* Dropdown selector inside the pill */} -
- -
- - handleSectionClick(item.id)} - /> -
- ) : ( - /* Regular pill for non-selected items */ - - )} -
- ); - })} -
-
- ); - - return { - renderPillNavigation, - activeSection, - activeItem, - colorVariant, - setColorVariant, - size, - setSize, - showIcons, - setShowIcons, - showText, - setShowText, - hasSubmenus, - setHasSubmenus, - navigationItems, - updateItemLabel - }; -}; - - - -const generateCode = (configurator: ReturnType) => { - const hasSubmenus = configurator.hasSubmenus; - const colorVariant = configurator.colorVariant; - const size = configurator.size; - const showIcons = configurator.showIcons; - const showText = configurator.showText; - const navigationItems = configurator.navigationItems; - - const itemsCode = navigationItems.map(item => { - const iconName = item.icon?.type?.displayName || item.icon?.type?.name || 'Icon'; - return ` { - id: '${item.id}', - label: '${item.label}',${showIcons ? ` - icon: <${iconName} className="w-4 h-4" />,` : ''}${hasSubmenus ? ` - items: [${item.items?.map(subItem => `'${subItem}'`).join(', ')}]` : ''} - }`; - }).join(',\n'); - - return `import { useState } from 'react'; -import { cn } from '@/features/ui/primitives/styles';${hasSubmenus ? ` -import { ChevronRight } from 'lucide-react';` : ''}${showIcons ? ` -import { ${navigationItems.map(item => { - const iconName = item.icon?.type?.displayName || item.icon?.type?.name || 'Icon'; - return iconName; - }).filter((name, index, arr) => arr.indexOf(name) === index).join(', ')} } from 'lucide-react';` : ''} - -export const PillNavigation = () => { - const [activeSection, setActiveSection] = useState('${configurator.activeSection}');${hasSubmenus ? ` - const [activeItem, setActiveItem] = useState('${configurator.activeItem}'); - const [openDropdown, setOpenDropdown] = useState('${configurator.activeSection}');` : ''} - - const navigationItems = [ -${itemsCode} - ]; - - const handleSectionClick = (sectionId: string) => {${hasSubmenus ? ` - if (activeSection === sectionId && openDropdown === sectionId) { - setOpenDropdown(null); - } else { - setActiveSection(sectionId); - setOpenDropdown(sectionId); - // Set first item as default - const section = navigationItems.find(item => item.id === sectionId); - if (section?.items?.[0]) { - setActiveItem(section.items[0]); - } - }` : ` - setActiveSection(sectionId);`} - };${hasSubmenus ? ` - - const handleItemClick = (item: string) => { - setActiveItem(item); - };` : ''} - - const getColorClasses = (isSelected: boolean) => { - return isSelected - ? "bg-${colorVariant}-500/20 dark:bg-${colorVariant}-400/20 text-${colorVariant}-700 dark:text-${colorVariant}-300 border border-${colorVariant}-400/50 shadow-[0_0_10px_rgba(${colorVariant === 'cyan' ? '34,211,238' : colorVariant === 'purple' ? '147,51,234' : colorVariant === 'emerald' ? '16,185,129' : '251,146,60'},0.5)]" - : "text-gray-700 dark:text-gray-300 hover:bg-white/10 dark:hover:bg-white/5"; - };${hasSubmenus ? ` - - const selectedSectionData = navigationItems.find(item => item.id === activeSection);` : ''} - - return ( -
-
- {navigationItems.map((item) => { - const isSelected = activeSection === item.id;${hasSubmenus ? ` - const hasDropdown = item.items && item.items.length > 0; - const isThisExpanded = openDropdown === item.id && hasDropdown;` : ''} - - return ( -
${hasSubmenus ? ` - {/* Extended pill for selected item with dropdown */} - {isSelected && hasDropdown ? ( -
- ${showIcons ? '{item.icon}' : ''}${showText ? `${showIcons ? ' ' : ''}{item.label}` : ''} - - {/* Dropdown selector inside the pill */} -
- -
- - handleSectionClick(item.id)} - /> -
- ) : ( - /* Regular pill for non-selected items */` : ''} - ${hasSubmenus ? ` - )}` : ''} -
- ); - })} -
-
- ); -};`; -}; - -export const NavigationPattern = () => { - const configurator = PillNavigationConfigurator(); - - return ( -
- {/* Header Description */} -
-

Pill Navigation

-

- Modern glassmorphism pill-style navigation with optional sub-menu support. Perfect for primary navigation, - tab switching, and section selection with hierarchical options. Features an extended pill design for selected - items with internal dropdown selectors. -

-
- - {/* Full Width Live Preview */} - -

Live Preview

-
- {configurator.renderPillNavigation()} -
- - {/* Current Selection Display */} - {configurator.hasSubmenus && ( -
-

Current Selection

-

- Section: {configurator.activeSection} - {configurator.activeItem && ( - <> | Item: {configurator.activeItem} - )} -

-
- )} - - - {/* Split Layout: Configurator + Code */} -
- - {/* Left Half: Configuration Controls */} - -

Configuration Options

-
- - {/* Color and Size */} -
-
- - -
-
- - -
-
- - {/* Checkboxes */} -
-
- - -
-
- - -
-
- - {/* Submenu toggle */} -
- - -
- - {/* Editable Navigation Items */} -
- -
- {configurator.navigationItems.map((item, index) => ( - configurator.updateItemLabel(index, e.target.value)} - className="w-full p-2 text-sm border rounded-md bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600" - placeholder={`Item ${index + 1} label`} - /> - ))} -
-
-
- - - {/* Right Half: Generated Code */} - -

Generated Code

- - -
-
- ); -}; \ No newline at end of file diff --git a/archon-ui-main/src/features/style-guide/configurators/SwitchConfigurator.tsx b/archon-ui-main/src/features/style-guide/configurators/SwitchConfigurator.tsx deleted file mode 100644 index 5adf791d..00000000 --- a/archon-ui-main/src/features/style-guide/configurators/SwitchConfigurator.tsx +++ /dev/null @@ -1,319 +0,0 @@ -import { useState } from "react"; -import { - Moon, Sun, Power, Wifi, WifiOff, - Volume2, VolumeX, Bell, BellOff, - Eye, EyeOff, Lock, Unlock -} from "lucide-react"; -import { Switch, type SwitchSize, type SwitchColor } from "../../../features/ui/primitives/switch"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue -} from "../../../features/ui/primitives/select"; -import { ConfiguratorCard } from "../shared/ConfiguratorCard"; - -const sizeOptions = [ - { value: "sm", label: "Small (16px)" }, - { value: "md", label: "Medium (24px)" }, - { value: "lg", label: "Large (32px)" }, -]; - -const colorOptions = [ - { value: "purple", label: "Purple" }, - { value: "blue", label: "Blue" }, - { value: "green", label: "Green" }, - { value: "pink", label: "Pink" }, - { value: "orange", label: "Orange" }, - { value: "cyan", label: "Cyan" }, -]; - -const iconOptions = [ - { value: "none", label: "No Icon", iconOn: null, iconOff: null }, - { value: "theme", label: "Theme", iconOn: , iconOff: }, - { value: "power", label: "Power", iconOn: , iconOff: }, - { value: "wifi", label: "WiFi", iconOn: , iconOff: }, - { value: "sound", label: "Sound", iconOn: , iconOff: }, - { value: "notifications", label: "Notifications", iconOn: , iconOff: }, - { value: "visibility", label: "Visibility", iconOn: , iconOff: }, - { value: "lock", label: "Lock", iconOn: , iconOff: }, -]; - -/** - * 🤖 AI CONTEXT: Switch Configurator - * - * CONFIGURATION OPTIONS: - * 1. SIZE - Three variants for different use cases - * - Small: Clean minimal switches for dense UIs - * - Medium: Standard switches with optional icons - * - Large: Feature toggles with prominent icons - * - * 2. COLOR - Six accent colors matching the design system - * - Each color has associated glow effects - * - * 3. ICONS - Dynamic icon switching - * - Different icons for on/off states - * - Icons scale based on size variant - * - * 4. STATE - Interactive toggle preview - * - Live preview updates as configuration changes - */ -export function SwitchConfigurator() { - const [checked, setChecked] = useState(false); - const [size, setSize] = useState("lg"); - const [color, setColor] = useState("cyan"); - const [iconOption, setIconOption] = useState("theme"); - const [disabled, setDisabled] = useState(false); - const [transparency, setTransparency] = useState("medium"); - const [glowIntensity, setGlowIntensity] = useState("normal"); - const [iconColorSync, setIconColorSync] = useState(true); - - const selectedIcon = iconOptions.find(opt => opt.value === iconOption); - - const generateCode = () => { - const imports = ["Switch"]; - const props: string[] = []; - - if (size !== "md") props.push(`size="${size}"`); - if (color !== "cyan") props.push(`color="${color}"`); - if (selectedIcon?.iconOn && selectedIcon?.iconOff) { - if (selectedIcon.value === "theme") { - imports.push("Moon", "Sun"); - props.push(`iconOn={}`); - props.push(`iconOff={}`); - } else if (selectedIcon.value === "power") { - imports.push("Power"); - props.push(`icon={}`); - } else if (selectedIcon.value === "wifi") { - imports.push("Wifi", "WifiOff"); - props.push(`iconOn={}`); - props.push(`iconOff={}`); - } - // Add other icon cases as needed - } - if (disabled) props.push(`disabled`); - props.push(`checked={checked}`); - props.push(`onCheckedChange={setChecked}`); - - const iconImports = imports.filter(i => i !== "Switch").length > 0 - ? `import { ${imports.filter(i => i !== "Switch").join(", ")} } from "lucide-react";\n` - : ""; - - return `${iconImports}import { Switch } from "@/features/ui/primitives/switch"; - -/** - * 🤖 AI CONTEXT: Switch Component - * - * SIZE: ${size} - ${sizeOptions.find(s => s.value === size)?.label} - * COLOR: ${color} - Neon glow effect - * ICONS: ${iconOption === "none" ? "No icons" : `${selectedIcon?.label} icons`} - * ${size === "sm" ? "* Note: Small switches don't display icons" : ""} - * - * GLASS PROPERTIES: - * - Transparency: bg-white/10 backdrop-blur - * - Glow: ${color} shadow on checked state - * - Transition: 500ms cubic-bezier animation - */ - -`; - }; - - return ( - -
- {/* Preview */} -
- -
- - {/* Configuration */} -
- {/* Size */} -
- - -
- - {/* Color */} -
- - -
- - {/* Icon */} -
- - -
- - {/* Transparency */} -
- - -
- - {/* Glow Intensity */} -
- - -
- - {/* State & Icon Color */} -
- -
- - -
-
-
- - {/* Examples */} -
-

Examples

-
-
-

Small

-
- {colorOptions.slice(0, 3).map(opt => ( - - ))} -
-
-
-

Medium with Icons

-
- } iconOff={} defaultChecked /> - } /> -
-
-
-

Large Feature

-
- } - iconOff={} - defaultChecked - /> -
-
-
-
-
- - ); -} \ No newline at end of file diff --git a/archon-ui-main/src/features/style-guide/configurators/TableConfigurator.tsx b/archon-ui-main/src/features/style-guide/configurators/TableConfigurator.tsx deleted file mode 100644 index 8d459953..00000000 --- a/archon-ui-main/src/features/style-guide/configurators/TableConfigurator.tsx +++ /dev/null @@ -1,196 +0,0 @@ -import { useState } from 'react'; -import { Button } from '@/features/ui/primitives/button'; -import { Switch } from '@/features/ui/primitives/switch'; -import { Label } from '@/features/ui/primitives/label'; -import { LivePreview } from '../shared/LivePreview'; -import { CodeDisplay } from '../shared/CodeDisplay'; -import { ConfigPanel } from '../shared/ConfigPanel'; -import { Edit, Trash2, Eye, Code } from 'lucide-react'; - -interface TableConfig { - glassMorphism: boolean; - actions: boolean; - headers: boolean; - striped: boolean; -} - -const sampleData = [ - { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' }, - { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' }, - { id: 3, name: 'Bob Johnson', email: 'bob@example.com', status: 'Active' }, -]; - -export const TableConfigurator = () => { - const [config, setConfig] = useState({ - glassMorphism: true, - actions: true, - headers: true, - striped: true - }); - const [activeTab, setActiveTab] = useState<'preview' | 'code'>('preview'); - - const generateCode = (_config: TableConfig) => { - const imports = `import { Button } from '@/features/ui/primitives/button'; -import { Edit, Trash2, Eye } from 'lucide-react';`; - - const aiContext = `/** - * 🤖 AI CONTEXT: Glass Morphism Table - * - * PURPOSE: Data display with glass morphism styling and interactive elements - * WHEN TO USE: Data grids, lists with actions, dashboard tables - * WHEN NOT TO USE: Simple lists (use basic ul/li), massive datasets (use virtualization) - */`; - - return `${imports}\n\n${aiContext}\n\n// Table component code here...`; - }; - - return ( -
- {/* LEFT: Configuration Panel (1/4 width) */} -
- -
-
- - setConfig({...config, glassMorphism})} - /> -
- -
- - setConfig({...config, actions})} - /> -
- -
- - setConfig({...config, headers})} - /> -
- -
- - setConfig({...config, striped})} - /> -
-
- - {/* Preview/Code Tabs INSIDE configurator */} -
-
- - -
-
- -
- - {/* RIGHT: Preview or Code Content (3/4 width) */} -
- {activeTab === 'preview' ? ( - -
- - {config.headers && ( - - - - - - {config.actions && ( - - )} - - - )} - - {sampleData.map((item, index) => ( - - - - - {config.actions && ( - - )} - - ))} - -
- Name - - Email - - Status - - Actions -
- {item.name} - - {item.email} - - - {item.status} - - -
- - - -
-
-
- - ) : ( - - )} -
-
- ); -}; \ No newline at end of file diff --git a/archon-ui-main/src/features/style-guide/configurators/ToggleConfigurator.tsx b/archon-ui-main/src/features/style-guide/configurators/ToggleConfigurator.tsx deleted file mode 100644 index ff282c9b..00000000 --- a/archon-ui-main/src/features/style-guide/configurators/ToggleConfigurator.tsx +++ /dev/null @@ -1,219 +0,0 @@ -import { useState } from 'react'; -import { Switch } from '@/features/ui/primitives/switch'; -import { Button } from '@/features/ui/primitives/button'; -import { Label } from '@/features/ui/primitives/label'; -import { RadioGroup, RadioGroupItem } from '@/features/ui/primitives/radio-group'; -import { LivePreview } from '../shared/LivePreview'; -import { CodeDisplay } from '../shared/CodeDisplay'; -import { ConfigPanel } from '../shared/ConfigPanel'; -import { Eye, Code, Moon, Sun, Volume2, VolumeX, Wifi, WifiOff } from 'lucide-react'; -import type { LabelPosition } from '../types'; - -interface ToggleConfig { - disabled: boolean; - size: 'sm' | 'default' | 'lg'; - labelPosition: LabelPosition; - labelText: string; -} - -export const ToggleConfigurator = () => { - const [config, setConfig] = useState({ - disabled: false, - size: 'default', - labelPosition: 'right', - labelText: 'Enable notifications' - }); - const [activeTab, setActiveTab] = useState<'preview' | 'code'>('preview'); - const [toggleState, setToggleState] = useState(false); - - const generateCode = (_config: ToggleConfig) => { - const imports = `import { Switch } from '@/features/ui/primitives/switch'; -import { Label } from '@/features/ui/primitives/label';`; - - const aiContext = `/** - * 🤖 AI CONTEXT: Switch Toggle Component - * - * PURPOSE: Binary on/off controls with accessible labeling - * WHEN TO USE: Settings, preferences, feature toggles, boolean states - * WHEN NOT TO USE: Multiple options (use RadioGroup), momentary actions (use Button) - */`; - - return `${imports}\n\n${aiContext}\n\n// Toggle component code here...`; - }; - - const layoutClasses = { - left: 'flex-row-reverse', - right: 'flex-row', - top: 'flex-col', - bottom: 'flex-col-reverse' - }; - - const gapClasses = { - left: 'gap-3', - right: 'gap-3', - top: 'gap-2', - bottom: 'gap-2' - }; - - return ( -
- {/* LEFT: Configuration Panel (1/4 width) */} -
- -
- {/* Label Position */} -
- - setConfig({...config, labelPosition: value as LabelPosition})} - > -
- {['left', 'right', 'top', 'bottom'].map(position => ( -
- - -
- ))} -
- -
- - {/* States */} -
- - setConfig({...config, disabled})} - /> -
- - {/* Label Text */} -
- - setConfig({...config, labelText: e.target.value})} - className="w-full mt-1 px-3 py-2 border rounded-md dark:bg-gray-800 text-sm" - /> -
-
- - {/* Preview/Code Tabs INSIDE configurator */} -
-
- - -
-
- -
- - {/* RIGHT: Preview or Code Content (3/4 width) */} -
- {activeTab === 'preview' ? ( - <> - -
- {(config.labelPosition === 'top' || config.labelPosition === 'left') ? ( - <> - - - - ) : ( - <> - - - - )} -
- - - {/* Icon Switch Examples */} -
-

Switches with Icons

- -
- {/* Dark Mode Toggle */} -
- - } - iconOff={} - defaultChecked - /> -
- - {/* Volume Toggle */} -
- - } - iconOff={} - /> -
- - {/* WiFi Toggle */} -
- - } - iconOff={} - defaultChecked - /> -
-
- -
- - ) : ( - - )} -
-
- ); -}; \ No newline at end of file diff --git a/archon-ui-main/src/features/style-guide/foundations/ColorsFoundation.tsx b/archon-ui-main/src/features/style-guide/foundations/ColorsFoundation.tsx deleted file mode 100644 index 3e01d9f3..00000000 --- a/archon-ui-main/src/features/style-guide/foundations/ColorsFoundation.tsx +++ /dev/null @@ -1,368 +0,0 @@ -import { Card } from '@/features/ui/primitives/card'; -import { useState } from 'react'; -import { Copy, Check } from 'lucide-react'; - -// Core color palette with neon variations -const CORE_COLORS = [ - { - name: 'Cyan', - base: '#06b6d4', - variants: { - 50: '#ecfeff', - 100: '#cffafe', - 200: '#a5f3fc', - 300: '#67e8f9', - 400: '#22d3ee', - 500: '#06b6d4', - 600: '#0891b2', - 700: '#0e7490', - 800: '#155e75', - 900: '#164e63' - }, - usage: 'Primary brand, active states, focus indicators' - }, - { - name: 'Blue', - base: '#3b82f6', - variants: { - 50: '#eff6ff', - 100: '#dbeafe', - 200: '#bfdbfe', - 300: '#93c5fd', - 400: '#60a5fa', - 500: '#3b82f6', - 600: '#2563eb', - 700: '#1d4ed8', - 800: '#1e40af', - 900: '#1e3a8a' - }, - usage: 'Information, links, secondary actions' - }, - { - name: 'Purple', - base: '#a855f7', - variants: { - 50: '#faf5ff', - 100: '#f3e8ff', - 200: '#e9d5ff', - 300: '#d8b4fe', - 400: '#c084fc', - 500: '#a855f7', - 600: '#9333ea', - 700: '#7c3aed', - 800: '#6b21a8', - 900: '#581c87' - }, - usage: 'Secondary actions, creative elements, highlights' - }, - { - name: 'Emerald', - base: '#10b981', - variants: { - 50: '#ecfdf5', - 100: '#d1fae5', - 200: '#a7f3d0', - 300: '#6ee7b7', - 400: '#34d399', - 500: '#10b981', - 600: '#059669', - 700: '#047857', - 800: '#065f46', - 900: '#064e3b' - }, - usage: 'Success states, positive feedback, growth indicators' - }, - { - name: 'Orange', - base: '#f97316', - variants: { - 50: '#fff7ed', - 100: '#ffedd5', - 200: '#fed7aa', - 300: '#fdba74', - 400: '#fb923c', - 500: '#f97316', - 600: '#ea580c', - 700: '#c2410c', - 800: '#9a3412', - 900: '#7c2d12' - }, - usage: 'Warnings, notifications, energy elements' - }, - { - name: 'Pink', - base: '#ec4899', - variants: { - 50: '#fdf2f8', - 100: '#fce7f3', - 200: '#fbcfe8', - 300: '#f9a8d4', - 400: '#f472b6', - 500: '#ec4899', - 600: '#db2777', - 700: '#be185d', - 800: '#9d174d', - 900: '#831843' - }, - usage: 'Special features, premium content, creativity' - }, - { - name: 'Red', - base: '#ef4444', - variants: { - 50: '#fef2f2', - 100: '#fee2e2', - 200: '#fecaca', - 300: '#fca5a5', - 400: '#f87171', - 500: '#ef4444', - 600: '#dc2626', - 700: '#b91c1c', - 800: '#991b1b', - 900: '#7f1d1d' - }, - usage: 'Errors, dangerous actions, critical alerts' - } -]; - -// Effect types for demonstration -const EFFECT_TYPES = [ - { name: 'Solid', key: 'solid' }, - { name: 'Border', key: 'border' }, - { name: 'Inner Glow', key: 'inner-glow' }, - { name: 'Outer Glow', key: 'outer-glow' }, - { name: 'Text', key: 'text' } -]; - -// Interactive Color Swatch with Selector and Slider -const InteractiveColorSwatch = ({ color }: { color: any }) => { - const [selectedVariant, setSelectedVariant] = useState(500); - const [copied, setCopied] = useState(false); - - const currentColor = color.variants[selectedVariant as keyof typeof color.variants]; - - const handleCopy = () => { - navigator.clipboard.writeText(currentColor); - setCopied(true); - setTimeout(() => setCopied(false), 2000); - }; - - return ( -
-
-

{color.name}

-
-
- -

{color.usage}

- - {/* Color Selector with Current Swatch */} -
-
-
-
-
-

{color.name}-{selectedVariant}

-

{currentColor}

-
-
- {copied ? ( - - ) : ( - - )} -
-
-
-
- - {/* Variant Slider */} -
- - setSelectedVariant(Number(e.target.value))} - className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer" - style={{ - background: `linear-gradient(to right, - ${color.variants[100]}, - ${color.variants[200]}, - ${color.variants[300]}, - ${color.variants[400]}, - ${color.variants[500]}, - ${color.variants[600]}, - ${color.variants[700]}, - ${color.variants[800]}, - ${color.variants[900]})` - }} - /> -
- 100 - 500 - 900 -
-
-
- ); -}; - -// Enhanced Effect demonstration component with improved glow -const EffectDemo = ({ color, effectType }: { color: any, effectType: string }) => { - const getEffectStyles = () => { - switch (effectType) { - case 'solid': - return { - backgroundColor: color.base, - color: 'white' - }; - case 'border': - return { - border: `2px solid ${color.base}`, - backgroundColor: 'transparent', - color: color.base - }; - case 'inner-glow': - return { - backgroundColor: `${color.base}40`, // More opaque for visibility - border: `1px solid ${color.base}`, - boxShadow: `inset 0 0 20px ${color.base}60`, - color: color.base - }; - case 'outer-glow': - return { - backgroundColor: `${color.base}20`, - border: `1px solid ${color.base}`, - boxShadow: `0 0 30px ${color.base}80, 0 0 60px ${color.base}40`, - color: color.base - }; - case 'text': - return { - color: color.base, - backgroundColor: 'transparent' - }; - default: - return {}; - } - }; - - const getEffectName = () => { - switch (effectType) { - case 'solid': return 'Solid'; - case 'border': return 'Border'; - case 'inner-glow': return 'Inner Glow'; - case 'outer-glow': return 'Outer Glow'; - case 'text': return 'Text'; - default: return effectType; - } - }; - - return ( -
-

{getEffectName()}

-
- ); -}; - -export const ColorsFoundation = () => { - const [copiedColor, setCopiedColor] = useState(null); - - const handleColorCopy = (color: string) => { - navigator.clipboard.writeText(color); - setCopiedColor(color); - setTimeout(() => setCopiedColor(null), 2000); - }; - - return ( -
- {/* Header */} -
-

Color System

-

- Neon-inspired color palette with solid fills, borders, glows, and text treatments for Tron-style interfaces. -

-
- - {/* Semantic Colors Overview */} -
-
-
-

Primary

-

#111827

-
-
-
-

Secondary

-

#374151

-
-
-
-

Accent

-

#3b82f6

-
-
-
-

Success

-

#10b981

-
-
-
-

Warning

-

#f97316

-
-
-
-

Error

-

#ef4444

-
-
- - {/* Interactive Color Palette */} -
- {CORE_COLORS.map((color) => ( - - - - {/* Effect Demonstrations */} -
-

Effects

-
- {EFFECT_TYPES.map((effect) => ( - - ))} -
-
- - ))} -
- - - {/* Copy Notification */} - {copiedColor && ( -
- Copied {copiedColor} to clipboard! -
- )} -
- ); -}; \ No newline at end of file diff --git a/archon-ui-main/src/features/style-guide/foundations/EffectsFoundation.tsx b/archon-ui-main/src/features/style-guide/foundations/EffectsFoundation.tsx deleted file mode 100644 index b623f24f..00000000 --- a/archon-ui-main/src/features/style-guide/foundations/EffectsFoundation.tsx +++ /dev/null @@ -1,645 +0,0 @@ -import { useState, useEffect } from 'react'; -import { Card } from '@/features/ui/primitives/card'; -import { Button } from '@/features/ui/primitives/button'; -import { CodeDisplay } from '../shared/CodeDisplay'; -import { cn } from '@/features/ui/primitives/styles'; -import { Loader2, Zap, Sparkles, MousePointer } from 'lucide-react'; - -// Add Tron animations to the page -const addTronAnimations = () => { - const style = document.createElement('style'); - style.textContent = ` - @keyframes dataStream { - 0%, 100% { transform: translateY(-100%); } - 50% { transform: translateY(100%); } - } - - @keyframes progressSweep { - 0%, 100% { background: linear-gradient(to right, #3b82f6, #ef4444, #3b82f6); } - 50% { background: linear-gradient(to right, #ef4444, #3b82f6, #ef4444); } - } - - @keyframes lightTrail { - 0% { transform: translateX(-100%); } - 100% { transform: translateX(400%); } - } - - @keyframes energyCascade { - 0% { transform: translateX(-100%) skewX(12deg); } - 100% { transform: translateX(200%) skewX(12deg); } - } - - @keyframes recognitionScan { - 0%, 100% { height: 0.5rem; opacity: 0.3; } - 50% { height: 2rem; opacity: 1; } - } - - @keyframes spectrumWave { - 0%, 100% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } - } - - @keyframes sparkRace { - 0% { - top: 0; - left: 0; - transform: translateX(0); - } - 25% { - top: 0; - left: 100%; - transform: translateX(-100%); - } - 25.01% { - top: 0; - left: 100%; - transform: translateY(0); - } - 50% { - top: 100%; - left: 100%; - transform: translateY(-100%); - } - 50.01% { - top: 100%; - left: 100%; - transform: translateX(0); - } - 75% { - top: 100%; - left: 0; - transform: translateX(0); - } - 75.01% { - top: 100%; - left: 0; - transform: translateY(0); - } - 100% { - top: 0; - left: 0; - transform: translateY(0); - } - } - - .animate-spin-reverse { - animation: spin 1s linear infinite reverse; - } - - .animate-dataStream { - animation: dataStream 1.5s ease-in-out infinite; - } - - .animate-progressSweep { - animation: progressSweep 3s ease-in-out infinite; - } - - .animate-lightTrail { - animation: lightTrail 2s ease-in-out infinite; - } - - .animate-energyCascade { - animation: energyCascade 2s linear infinite; - } - - .animate-recognitionScan { - animation: recognitionScan 2s ease-in-out infinite; - } - - .animate-spectrumWave { - animation: spectrumWave 4s ease-in-out infinite; - } - - .animate-borderRace { - animation: borderRace 2s linear infinite; - } - `; - document.head.appendChild(style); - return () => style.remove(); -}; - -const EFFECT_OPTIONS = [ - 'Interaction', - 'Loading', - 'Neon', - 'Animation' -]; - -export const EffectsFoundation = () => { - const [activeOption, setActiveOption] = useState('Interaction'); - const [selectedEffect, setSelectedEffect] = useState('hover-glow'); - - // Add custom animations when component mounts - useEffect(() => { - const cleanup = addTronAnimations(); - return cleanup; - }, []); - - // Option 1: Hover & Interaction Effects - const renderOption1 = () => ( -
-

- - Hover & Interaction Effects -

- -
- {/* Racing Border Effect */} - -

Racing Border

-
- Hover Me - {/* Racing spark */} -
-
- - - {/* Blue Glass Button */} - -

Blue Glass

- - - - {/* Red Alert Hover */} - -

Red Alert

-
Alert
- - - {/* Neon Text Glow */} - -

Neon Text

-
- BLUE NEON -
- - - {/* Program Recognition */} - -

Program ID

-
- ID: 7364 -
- - - {/* Pulse Activation */} - -

Pulse Hover

-
- Pulse Me -
- -
-
- ); - - // Option 2: Loading & Skeleton Effects - const renderOption2 = () => ( -
-

- - Loading & Skeleton Effects -

- -
- {/* Light Cycle Circuit */} - -

Light Cycle Circuit

-
-
-
-
- - - {/* Data Stream */} - -

Data Stream

-
-
-
-
- - - {/* Tron Grid Progress */} - -

Grid Progress

-
-
-
- - - {/* Light Trail Skeleton */} - -

Light Trails

-
-
-
-
-
-
-
-
-
-
-
- - - {/* Energy Cascade */} - -

Energy Cascade

-
-
-
-
- - - {/* Recognition Pattern */} - -

Recognition Pattern

-
- {[0, 1, 2, 3, 4].map(i => ( -
- ))} -
- -
- - {/* Custom Tron Animations CSS */} - -

Tron Animation Keyframes (Add to CSS)

- - -
- ); - - // Option 3: Gradient & Neon Effects - const renderOption3 = () => ( -
-

- - Gradient & Neon Effects -

- -
- {/* Multi-Color Neon Text */} - -

Neon Typography

-
-
BLUE NEON
-
PINK NEON
-
GREEN NEON
-
- - - {/* Neon Orb Constellation */} - -

Neon Orbs

-
-
-
-
-
-
- - - {/* Rainbow Laser Grid */} - -

Laser Grid

-
-
-
-
-
-
- - - {/* Gradient Borders */} - -

Neon Borders

-
-
-
Purple
-
-
-
Blue
-
-
- - - {/* Spectrum Wave */} - -

Spectrum Wave

-
-
-
- - - {/* Pulsing Circuit */} - -

Pulsing Circuit

-
-
-
-
-
- -
- - {/* Neon Animation Keyframes */} - -

Neon Animation Keyframes (Add to CSS)

- - -
- ); - - // Option 4: Motion & Animation Effects - const renderOption4 = () => ( -
-

- - Motion & Animation Effects -

- -
- {/* Fade In */} - -

Fade In

-
- - - {/* Slide Up */} - -

Slide Up

-
- - - {/* Bounce */} - -

Bounce

-
- - - {/* Wiggle */} - -

Wiggle

-
- - - {/* Float */} - -

Float

-
- - - {/* Rotate */} - -

Rotate

-
- -
- - {/* Custom Animations CSS */} - -

Custom Animations (Add to CSS)

- - -
- ); - - const renderContent = () => { - switch (activeOption) { - case 'Interaction': - return renderOption1(); - case 'Loading': - return renderOption2(); - case 'Neon': - return renderOption3(); - case 'Animation': - return renderOption4(); - default: - return renderOption1(); - } - }; - - const generateCode = () => { - switch (activeOption) { - case 'Interaction': - return `// Hover & Interaction Effects - - -
- Scale Hover -
- -
- Neon Border Hover -
- -
- Glowing Text -
`; - - case 'Loading': - return `// Tron-style Loading Effects -
- -
-
-
- -
-
-
-
`; - - case 'Neon': - return `// Gradient & Neon Effects -
-
Gradient Border
-
- - - NEON TEXT - - -
-
- -
`; - - case 'Animation': - return `// Motion & Animation Effects -
- Fade In -
- -
- Slide Up -
- -
- Bounce -
- -
- Float -
`; - - default: - return ''; - } - }; - - return ( -
- {/* Header */} -
-

Effects System

-

- Animation, interaction, and visual effects library -

-
- - {/* Option Tabs */} -
-
-
- {EFFECT_OPTIONS.map((option) => ( - - ))} -
-
-
- - {/* Content */} - - {renderContent()} - - {/* Generated Code */} -
-

Generated Code

- -
- -
- ); -}; \ No newline at end of file diff --git a/archon-ui-main/src/features/style-guide/foundations/SpacingFoundation.tsx b/archon-ui-main/src/features/style-guide/foundations/SpacingFoundation.tsx deleted file mode 100644 index 059afcc6..00000000 --- a/archon-ui-main/src/features/style-guide/foundations/SpacingFoundation.tsx +++ /dev/null @@ -1,233 +0,0 @@ -import { useState } from 'react'; -import { Card } from '@/features/ui/primitives/card'; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/features/ui/primitives/select'; -import { CodeDisplay } from '../shared/CodeDisplay'; -import { cn } from '@/features/ui/primitives/styles'; - -// Simplified spacing scale -const SPACING_VALUES = [ - { name: '1', pixels: '4px', value: '0.25rem' }, - { name: '2', pixels: '8px', value: '0.5rem' }, - { name: '3', pixels: '12px', value: '0.75rem' }, - { name: '4', pixels: '16px', value: '1rem' }, - { name: '6', pixels: '24px', value: '1.5rem' }, - { name: '8', pixels: '32px', value: '2rem' }, - { name: '12', pixels: '48px', value: '3rem' }, - { name: '16', pixels: '64px', value: '4rem' }, - { name: '20', pixels: '80px', value: '5rem' }, - { name: '24', pixels: '96px', value: '6rem' } -]; - -const SPACING_TYPES = [ - { name: 'Padding', prefix: 'p' }, - { name: 'Margin', prefix: 'm' }, - { name: 'Gap', prefix: 'gap' }, - { name: 'Space Y', prefix: 'space-y' }, - { name: 'Space X', prefix: 'space-x' } -]; - -export const SpacingFoundation = () => { - const [selectedValue, setSelectedValue] = useState('4'); - const [selectedType, setSelectedType] = useState('Padding'); - - const currentSpacing = SPACING_VALUES.find(s => s.name === selectedValue); - const currentType = SPACING_TYPES.find(t => t.name === selectedType); - - const generateCode = () => { - if (!currentSpacing || !currentType) return ''; - - const className = `${currentType.prefix}-${selectedValue}`; - const pixelValue = currentSpacing.pixels; - const remValue = currentSpacing.value; - - return `// ${selectedType} with ${pixelValue} spacing -
- Content with ${selectedType.toLowerCase()} of ${pixelValue} -
- -// Values: -// ${className} = ${remValue} (${pixelValue})`; - }; - - const renderDemo = () => { - if (!currentSpacing || !currentType) return null; - - const className = `${currentType.prefix}-${selectedValue}`; - - switch (selectedType) { - case 'Padding': - return ( -
-
-
- Content with {currentSpacing.pixels} padding -
-
-
- ); - - case 'Margin': - return ( -
-
- Content with {currentSpacing.pixels} margin -
-
- ); - - case 'Gap': - return ( -
- {[1, 2, 3].map((i) => ( -
- Item {i} -
- ))} -
- ); - - case 'Space Y': - return ( -
- {[1, 2, 3].map((i) => ( -
- Item {i} -
- ))} -
- ); - - case 'Space X': - return ( -
- {[1, 2, 3].map((i) => ( -
- Item {i} -
- ))} -
- ); - - default: - return null; - } - }; - - return ( -
- {/* Header */} -
-

Spacing System

-

- Interactive spacing scale explorer -

-
- - {/* Spacing Explorer - Above the Fold */} - -
- {/* Left: Controls */} -
-
- - -
- -
- - -
- - {/* Current Selection Info */} -
-
- {currentType?.prefix}-{selectedValue} -
-
- {currentSpacing?.pixels} • {currentSpacing?.value} -
-
-
- - {/* Center: Live Demo */} -
-
- {renderDemo()} -
-
- - {/* Right: Spacing Scale */} -
-

Spacing Scale

-
- {SPACING_VALUES.map((spacing) => ( -
setSelectedValue(spacing.name)} - > -
-
- {spacing.name} -
- {spacing.pixels} -
- ))} -
-
-
- - {/* Generated Code */} -
-

Generated Code

- -
- -
- ); -}; \ No newline at end of file diff --git a/archon-ui-main/src/features/style-guide/foundations/TypographyFoundation.tsx b/archon-ui-main/src/features/style-guide/foundations/TypographyFoundation.tsx deleted file mode 100644 index 9dd31726..00000000 --- a/archon-ui-main/src/features/style-guide/foundations/TypographyFoundation.tsx +++ /dev/null @@ -1,169 +0,0 @@ -import { useState } from 'react'; -import { Card } from '@/features/ui/primitives/card'; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/features/ui/primitives/select'; -import { CodeDisplay } from '../shared/CodeDisplay'; -import { cn } from '@/features/ui/primitives/styles'; - -// Typography scale -const TYPOGRAPHY_SCALE = [ - { name: 'Display', className: 'text-4xl md:text-5xl font-bold', example: 'Hero Title' }, - { name: 'H1', className: 'text-3xl font-bold', example: 'Page Title' }, - { name: 'H2', className: 'text-2xl font-bold', example: 'Section Title' }, - { name: 'H3', className: 'text-xl font-semibold', example: 'Subsection Title' }, - { name: 'H4', className: 'text-lg font-semibold', example: 'Component Header' }, - { name: 'Body Large', className: 'text-lg font-normal', example: 'Large body text for important content' }, - { name: 'Body', className: 'text-base font-normal', example: 'Standard body text for regular content' }, - { name: 'Body Small', className: 'text-sm font-normal', example: 'Small text for descriptions' }, - { name: 'Caption', className: 'text-xs font-normal', example: 'Caption and metadata text' }, - { name: 'Button', className: 'text-sm font-medium', example: 'Button Label' }, - { name: 'Code', className: 'text-sm font-mono', example: 'const variable = value;' } -]; - -// Color variations -const TEXT_COLORS = [ - { name: 'Primary', className: 'text-gray-900 dark:text-gray-100' }, - { name: 'Secondary', className: 'text-gray-700 dark:text-gray-300' }, - { name: 'Muted', className: 'text-gray-500 dark:text-gray-400' }, - { name: 'Accent', className: 'text-cyan-500' }, - { name: 'Success', className: 'text-emerald-500' }, - { name: 'Warning', className: 'text-orange-500' }, - { name: 'Error', className: 'text-red-500' } -]; - -export const TypographyFoundation = () => { - const [selectedColor, setSelectedColor] = useState('Primary'); - const [selectedType, setSelectedType] = useState('H1'); - - const currentColorClass = TEXT_COLORS.find(color => color.name === selectedColor)?.className || 'text-gray-900 dark:text-gray-100'; - - const generateCode = () => { - const selectedTypeData = TYPOGRAPHY_SCALE.find(type => type.name === selectedType); - const selectedColorData = TEXT_COLORS.find(color => color.name === selectedColor); - - if (!selectedTypeData || !selectedColorData) return ''; - - const className = selectedColorData.name === 'Primary' - ? selectedTypeData.className - : `${selectedTypeData.className} ${selectedColorData.className}`; - - return `// ${selectedTypeData.name} with ${selectedColorData.name} color -<${selectedType.toLowerCase().startsWith('h') ? selectedType.toLowerCase() : 'p'} className="${className}"> - ${selectedTypeData.example} -`; - }; - - return ( -
- {/* Header */} -
-

Typography System

-

- Interactive typography configurator with live examples -

-
- - {/* Typography Configurator */} - -
- {/* Left: Controls */} -
-

Typography Configurator

- -
-
- - -
- -
- - -
- - {/* Current Selection */} -
-
Current Selection
-
- {selectedType} • {selectedColor} -
-
- {TYPOGRAPHY_SCALE.find(t => t.name === selectedType)?.className} {selectedColor !== 'Primary' ? TEXT_COLORS.find(c => c.name === selectedColor)?.className : ''} -
-
-
-
- - {/* Right: Live Examples */} -
-

Live Examples

- - {/* Card Example */} - -
t.name === selectedType)?.className, currentColorClass)}> - Sample {selectedType} Text -
-
- This is how your typography appears in a card component -
- - - {/* Code Example */} - -
// Code example
-
t.name === selectedType)?.className, currentColorClass, 'font-mono')}> - function example() {'{'} -
-
- console.log('Typography in code context'); -
-
t.name === selectedType)?.className, currentColorClass, 'font-mono')}> - {'}'} -
- - - {/* Section Example */} -
-
t.name === selectedType)?.className, currentColorClass)}> - Section Header Example -
-
- This demonstrates how the typography works as section headers with descriptions below. -
-
-
-
- - {/* Generated Code */} -
-

Generated Code

- -
- -
- ); -}; \ No newline at end of file diff --git a/archon-ui-main/src/features/style-guide/index.ts b/archon-ui-main/src/features/style-guide/index.ts index c6d851b8..bd5234a9 100644 --- a/archon-ui-main/src/features/style-guide/index.ts +++ b/archon-ui-main/src/features/style-guide/index.ts @@ -3,4 +3,3 @@ export { PillNavigation } from "./shared/PillNavigation"; export { SideNavigation } from "./shared/SideNavigation"; export { StyleGuideTab } from "./tabs/StyleGuideTab"; export { LayoutsTab } from "./tabs/LayoutsTab"; -export { ConfiguratorsTab } from "./tabs/ConfiguratorsTab"; diff --git a/archon-ui-main/src/features/style-guide/shared/CodeDisplay.tsx b/archon-ui-main/src/features/style-guide/shared/CodeDisplay.tsx deleted file mode 100644 index 3a6823f9..00000000 --- a/archon-ui-main/src/features/style-guide/shared/CodeDisplay.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { useState } from 'react'; -import { Check, Copy } from 'lucide-react'; -import { Button } from '@/features/ui/primitives/button'; -import { cn } from '@/features/ui/primitives/styles'; - -interface CodeDisplayProps { - code: string; - showLineNumbers?: boolean; - className?: string; -} - -export const CodeDisplay = ({ - code, - showLineNumbers = false, - className -}: CodeDisplayProps) => { - const [copied, setCopied] = useState(false); - - const handleCopy = async () => { - await navigator.clipboard.writeText(code); - setCopied(true); - setTimeout(() => setCopied(false), 2000); - }; - - const lines = code.split('\n'); - - // Basic syntax highlighting with regex - const highlightCode = (line: string) => { - // Escape HTML - line = line.replace(/&/g, '&').replace(//g, '>'); - - // Keywords - line = line.replace( - /\b(import|export|from|const|let|var|function|return|if|else|interface|type|class|extends|implements)\b/g, - '$1' - ); - - // Strings - line = line.replace( - /(["'`])([^"'`]*)\1/g, - '$1$2$1' - ); - - // Comments - line = line.replace( - /(\/\/.*$|\/\*.*\*\/)/g, - '$1' - ); - - // JSX tags - line = line.replace( - /<([A-Z][A-Za-z0-9]*)(\s|>|\/>)/g, - '<$1$2' - ); - - // Props - line = line.replace( - /(\w+)=/g, - '$1=' - ); - - return line; - }; - - return ( -
- {/* Copy Button */} - - - {/* Code Content */} - 
-        
-          {lines.map((line, index) => (
-            

-              {showLineNumbers && (
-                
-                  {index + 1}
-                
-              )}
-              
-            

-          ))}
-        
-
-
- ); -}; \ No newline at end of file diff --git a/archon-ui-main/src/features/style-guide/shared/ConfigPanel.tsx b/archon-ui-main/src/features/style-guide/shared/ConfigPanel.tsx deleted file mode 100644 index ca02127b..00000000 --- a/archon-ui-main/src/features/style-guide/shared/ConfigPanel.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Card } from '@/features/ui/primitives/card'; -import { cn } from '@/features/ui/primitives/styles'; - -interface ConfigPanelProps { - title?: string; - children: React.ReactNode; - className?: string; -} - -export const ConfigPanel = ({ title, children, className }: ConfigPanelProps) => ( - - {title &&

{title}

} - {children} - -); \ No newline at end of file diff --git a/archon-ui-main/src/features/style-guide/shared/ConfigRow.tsx b/archon-ui-main/src/features/style-guide/shared/ConfigRow.tsx deleted file mode 100644 index 8461ceb5..00000000 --- a/archon-ui-main/src/features/style-guide/shared/ConfigRow.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Label } from '@/features/ui/primitives/label'; -import { cn } from '@/features/ui/primitives/styles'; - -interface ConfigRowProps { - label: string; - children: React.ReactNode; - className?: string; -} - -export const ConfigRow = ({ label, children, className }: ConfigRowProps) => ( -
- -
- {children} -
-
-); \ No newline at end of file diff --git a/archon-ui-main/src/features/style-guide/shared/ConfiguratorCard.tsx b/archon-ui-main/src/features/style-guide/shared/ConfiguratorCard.tsx deleted file mode 100644 index 4c682662..00000000 --- a/archon-ui-main/src/features/style-guide/shared/ConfiguratorCard.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React, { useState } from 'react'; -import { Card } from '@/features/ui/primitives/card'; -import { Button } from '@/features/ui/primitives/button'; -import { Eye, Code } from 'lucide-react'; - -interface ConfiguratorCardProps { - title: string; - description?: string; - code: string; - children: React.ReactNode; -} - -export function ConfiguratorCard({ title, description, code, children }: ConfiguratorCardProps) { - const [showCode, setShowCode] = useState(false); - - return ( - -
-
-
-

{title}

- {description && ( -

{description}

- )} -
-
- - -
-
- - {showCode ? ( -
- 
-              {code}
-
-
- ) : ( -
{children}
- )} -
- - ); -} \ No newline at end of file diff --git a/archon-ui-main/src/features/style-guide/shared/LivePreview.tsx b/archon-ui-main/src/features/style-guide/shared/LivePreview.tsx deleted file mode 100644 index 0c2e8d2b..00000000 --- a/archon-ui-main/src/features/style-guide/shared/LivePreview.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { useState } from 'react'; -import { ZoomIn, ZoomOut, RotateCcw } from 'lucide-react'; -import { Button } from '@/features/ui/primitives/button'; -import { cn } from '@/features/ui/primitives/styles'; - -interface LivePreviewProps { - children: React.ReactNode; - className?: string; - minHeight?: string; -} - -export const LivePreview = ({ children, className, minHeight = "400px" }: LivePreviewProps) => { - const [zoom, setZoom] = useState(100); - - return ( -
- {/* Zoom Controls */} -
- - - -
- - {/* Grid Background */} -
-
- {children} -
-
-
- ); -}; \ No newline at end of file diff --git a/archon-ui-main/src/features/style-guide/shared/NavigationSidebar.tsx b/archon-ui-main/src/features/style-guide/shared/NavigationSidebar.tsx deleted file mode 100644 index 4171362f..00000000 --- a/archon-ui-main/src/features/style-guide/shared/NavigationSidebar.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { useState } from 'react'; -import { ChevronRight, ChevronDown } from 'lucide-react'; -import { cn } from '@/features/ui/primitives/styles'; - -interface NavigationSection { - label: string; - items: string[]; -} - -interface NavigationSidebarProps { - sections: NavigationSection[]; - selectedItem: string; - onItemSelect: (item: string) => void; -} - -// Default navigation structure for style guide -// This can be used when creating a NavigationSidebar instanc - -export const NavigationSidebar: React.FC = ({ - sections, - selectedItem, - onItemSelect -}) => { - const [expandedSections, setExpandedSections] = useState( - sections.map(s => s.label) - ); - - const toggleSection = (label: string) => { - setExpandedSections(prev => - prev.includes(label) - ? prev.filter(l => l !== label) - : [...prev, label] - ); - }; - - return ( - - ); -}; \ No newline at end of file diff --git a/archon-ui-main/src/features/style-guide/tabs/ConfiguratorsTab.tsx b/archon-ui-main/src/features/style-guide/tabs/ConfiguratorsTab.tsx deleted file mode 100644 index ac3f5ae1..00000000 --- a/archon-ui-main/src/features/style-guide/tabs/ConfiguratorsTab.tsx +++ /dev/null @@ -1,172 +0,0 @@ -import { useState } from "react"; -import { - Type, - Sparkles, - CreditCard, - MousePointer, - Navigation as NavIcon, - Square, - FormInput, - Table as TableIcon, - ToggleLeft, - Power, - CheckSquare, -} from "lucide-react"; -import { SideNavigation, type SideNavigationSection } from "../shared/SideNavigation"; -import { TypographyFoundation } from "../foundations/TypographyFoundation"; -import { EffectsFoundation } from "../foundations/EffectsFoundation"; -import { GlassCardConfigurator } from "../configurators/GlassCardConfigurator"; -import { ButtonConfigurator } from "../configurators/ButtonConfigurator"; -import { NavigationPattern } from "../configurators/NavigationConfigurator"; -import { ModalConfigurator } from "../configurators/ModalConfigurator"; -import { FormConfigurator } from "../configurators/FormConfigurator"; -import { TableConfigurator } from "../configurators/TableConfigurator"; -import { ToggleConfigurator } from "../configurators/ToggleConfigurator"; -import { SwitchConfigurator } from "../configurators/SwitchConfigurator"; -import { CheckboxConfigurator } from "../configurators/CheckboxConfigurator"; - -export const ConfiguratorsTab = () => { - const [activeSection, setActiveSection] = useState("typography"); - - const sections: SideNavigationSection[] = [ - { id: "typography", label: "Typography", icon: }, - { id: "effects", label: "Effects", icon: }, - { id: "glass-card", label: "Glass Card", icon: }, - { id: "button", label: "Button", icon: }, - { id: "navigation", label: "Navigation", icon: }, - { id: "modal", label: "Modal", icon: }, - { id: "form", label: "Form", icon: }, - { id: "table", label: "Table", icon: }, - { id: "toggle", label: "Toggle", icon: }, - { id: "switch", label: "Switch", icon: }, - { id: "checkbox", label: "Checkbox", icon: }, - ]; - - // Render content based on active section - const renderContent = () => { - switch (activeSection) { - case "typography": - return ( -
-

- Typography Configurator -

- -
- ); - case "effects": - return ( -
-

- Effects Configurator -

- -
- ); - case "glass-card": - return ( -
-

- Glass Card Configurator -

- -
- ); - case "button": - return ( -
-

- Button Configurator -

- -
- ); - case "navigation": - return ( -
-

- Navigation Configurator -

- -
- ); - case "modal": - return ( -
-

- Modal Configurator -

- -
- ); - case "form": - return ( -
-

- Form Configurator -

- -
- ); - case "table": - return ( -
-

- Table Configurator -

- -
- ); - case "toggle": - return ( -
-

- Toggle Configurator -

- -
- ); - case "switch": - return ( -
-

- Switch Configurator -

- -
- ); - case "checkbox": - return ( -
-

- Checkbox Configurator -

- -
- ); - default: - return ( -
-

- Glass Card Configurator -

- -
- ); - } - }; - - return ( -
- {/* Side Navigation */} - - - {/* Main Content */} -
{renderContent()}
-
- ); -};