@newtonedev/components 0.1.0 → 0.1.2

package/src/registry/codegen.ts

@@ -0,0 +1,132 @@
+import type { ComponentMeta } from './types';
+
+/**
+ * Handler props that should be included as placeholders in generated code.
+ * Maps component ID to the handler props it needs.
+ */
+const HANDLER_PROPS: Record<string, readonly string[]> = {
+  button: ['onPress={() => {}}'],
+  'text-input': ['value={value}', 'onChangeText={setValue}'],
+  select: ['value={value}', 'onValueChange={setValue}'],
+  toggle: ['value={value}', 'onValueChange={setValue}'],
+  slider: ['value={value}', 'onValueChange={setValue}'],
+  'hue-slider': ['value={value}', 'onValueChange={setValue}'],
+};
+
+/**
+ * Default children content for components with children.
+ */
+const CHILDREN_CONTENT: Record<string, string> = {
+  button: 'Button',
+  card: '{/* content */}',
+  frame: '{/* content */}',
+};
+
+/**
+ * Generates a ready-to-paste JSX code snippet for a component with the given prop overrides.
+ *
+ * - Includes the import statement
+ * - Omits props that match their default values
+ * - Adds placeholder handlers for interactive props
+ * - Formats Select's options as a const declaration
+ */
+export function generateComponentCode(
+  component: ComponentMeta,
+  propOverrides: Record<string, unknown>,
+): string {
+  const lines: string[] = [];
+
+  // Import line
+  lines.push(`import { ${component.importName} } from '@newtonedev/components';`);
+
+  // Select needs options declaration above JSX
+  if (component.id === 'select') {
+    lines.push('');
+    lines.push('const options = [');
+    lines.push("  { label: 'Option 1', value: 'option-1' },");
+    lines.push("  { label: 'Option 2', value: 'option-2' },");
+    lines.push("  { label: 'Option 3', value: 'option-3' },");
+    lines.push('];');
+  }
+
+  lines.push('');
+
+  // Build props string
+  const propEntries: string[] = [];
+
+  // Add editable props (only non-default values)
+  for (const prop of component.editableProps) {
+    const value = propOverrides[prop.name] ?? prop.defaultValue;
+    if (value === prop.defaultValue) continue;
+
+    propEntries.push(formatProp(prop.name, value));
+  }
+
+  // Add handler/runtime props
+  const handlers = HANDLER_PROPS[component.id];
+  if (handlers) {
+    for (const handler of handlers) {
+      propEntries.push(handler);
+    }
+  }
+
+  // Special case: Select gets options={options} reference
+  if (component.id === 'select') {
+    propEntries.push('options={options}');
+  }
+
+  // Build the JSX
+  const children = CHILDREN_CONTENT[component.id];
+  const hasProps = propEntries.length > 0;
+  const tag = component.importName;
+
+  if (component.hasChildren && children) {
+    if (hasProps && propEntries.length <= 3) {
+      // Single-line opening tag
+      lines.push(`<${tag} ${propEntries.join(' ')}>`);
+      lines.push(`  ${children}`);
+      lines.push(`</${tag}>`);
+    } else if (hasProps) {
+      // Multi-line opening tag
+      lines.push(`<${tag}`);
+      for (const entry of propEntries) {
+        lines.push(`  ${entry}`);
+      }
+      lines.push('>');
+      lines.push(`  ${children}`);
+      lines.push(`</${tag}>`);
+    } else {
+      lines.push(`<${tag}>`);
+      lines.push(`  ${children}`);
+      lines.push(`</${tag}>`);
+    }
+  } else {
+    // Self-closing tag
+    if (hasProps && propEntries.length <= 3) {
+      lines.push(`<${tag} ${propEntries.join(' ')} />`);
+    } else if (hasProps) {
+      lines.push(`<${tag}`);
+      for (const entry of propEntries) {
+        lines.push(`  ${entry}`);
+      }
+      lines.push('/>');
+    } else {
+      lines.push(`<${tag} />`);
+    }
+  }
+
+  return lines.join('\n');
+}
+
+function formatProp(name: string, value: unknown): string {
+  if (typeof value === 'string') {
+    return `${name}="${value}"`;
+  }
+  if (typeof value === 'boolean') {
+    return value ? name : `${name}={false}`;
+  }
+  if (typeof value === 'number') {
+    return `${name}={${value}}`;
+  }
+  return `${name}={${JSON.stringify(value)}}`;
+}

package/src/registry/index.ts

@@ -0,0 +1,17 @@
+export type {
+  CategoryMeta,
+  VariantMeta,
+  EditableProp,
+  EditablePropOption,
+  ComponentMeta,
+} from './types';
+
+export {
+  CATEGORIES,
+  COMPONENTS,
+  getComponent,
+  getCategory,
+  getComponentsByCategory,
+} from './registry';
+
+export { generateComponentCode } from './codegen';

package/src/registry/registry.ts

@@ -0,0 +1,402 @@
+import type { CategoryMeta, ComponentMeta } from './types';
+
+export const CATEGORIES: readonly CategoryMeta[] = [
+  { id: 'actions', name: 'Actions', description: 'Interactive elements that trigger actions' },
+  { id: 'form-controls', name: 'Form Controls', description: 'Input elements for user data entry' },
+  { id: 'range-inputs', name: 'Range Inputs', description: 'Slider controls for numeric values' },
+  { id: 'layout', name: 'Layout', description: 'Structural and container components' },
+];
+
+export const COMPONENTS: readonly ComponentMeta[] = [
+  {
+    id: 'button',
+    name: 'Button',
+    importName: 'Button',
+    categoryId: 'actions',
+    description: 'Interactive button with multiple variants, sizes, and optional icon',
+    hasChildren: true,
+    variants: [
+      { id: 'primary-md', label: 'Primary', props: { variant: 'primary', size: 'md' } },
+      { id: 'secondary-md', label: 'Secondary', props: { variant: 'secondary', size: 'md' } },
+      { id: 'ghost-md', label: 'Ghost', props: { variant: 'ghost', size: 'md' } },
+      { id: 'outline-md', label: 'Outline', props: { variant: 'outline', size: 'md' } },
+      { id: 'primary-sm', label: 'Primary Small', props: { variant: 'primary', size: 'sm' } },
+      { id: 'primary-lg', label: 'Primary Large', props: { variant: 'primary', size: 'lg' } },
+      { id: 'icon-left', label: 'Icon Left', props: { variant: 'primary', size: 'md', icon: 'add' } },
+      { id: 'icon-right', label: 'Icon Right', props: { variant: 'primary', size: 'md', icon: 'arrow_forward', iconPosition: 'right' } },
+      { id: 'icon-only', label: 'Icon Only', props: { variant: 'ghost', size: 'md', icon: 'settings' } },
+    ],
+    editableProps: [
+      {
+        name: 'variant',
+        label: 'Variant',
+        control: 'select',
+        options: [
+          { label: 'Primary', value: 'primary' },
+          { label: 'Secondary', value: 'secondary' },
+          { label: 'Ghost', value: 'ghost' },
+          { label: 'Outline', value: 'outline' },
+        ],
+        defaultValue: 'primary',
+      },
+      {
+        name: 'size',
+        label: 'Size',
+        control: 'select',
+        options: [
+          { label: 'Small', value: 'sm' },
+          { label: 'Medium', value: 'md' },
+          { label: 'Large', value: 'lg' },
+        ],
+        defaultValue: 'md',
+      },
+      {
+        name: 'icon',
+        label: 'Icon',
+        control: 'text',
+        defaultValue: '',
+      },
+      {
+        name: 'iconPosition',
+        label: 'Icon Position',
+        control: 'select',
+        options: [
+          { label: 'Left', value: 'left' },
+          { label: 'Right', value: 'right' },
+        ],
+        defaultValue: 'left',
+      },
+      {
+        name: 'disabled',
+        label: 'Disabled',
+        control: 'toggle',
+        defaultValue: false,
+      },
+    ],
+  },
+  {
+    id: 'text-input',
+    name: 'TextInput',
+    importName: 'TextInput',
+    categoryId: 'form-controls',
+    description: 'Text input field with label support',
+    hasChildren: false,
+    variants: [
+      { id: 'default', label: 'Default', props: { label: 'Label', value: 'Sample text' } },
+      { id: 'empty', label: 'Empty', props: { label: 'Email', value: '' } },
+      { id: 'disabled', label: 'Disabled', props: { label: 'Disabled', value: 'Read only', disabled: true } },
+    ],
+    editableProps: [
+      {
+        name: 'label',
+        label: 'Label',
+        control: 'text',
+        defaultValue: 'Label',
+      },
+      {
+        name: 'disabled',
+        label: 'Disabled',
+        control: 'toggle',
+        defaultValue: false,
+      },
+    ],
+  },
+  {
+    id: 'select',
+    name: 'Select',
+    importName: 'Select',
+    categoryId: 'form-controls',
+    description: 'Dropdown selector with options',
+    hasChildren: false,
+    variants: [
+      {
+        id: 'default',
+        label: 'Default',
+        props: {
+          label: 'Choose an option',
+          value: 'option-1',
+          options: [
+            { label: 'Option 1', value: 'option-1' },
+            { label: 'Option 2', value: 'option-2' },
+            { label: 'Option 3', value: 'option-3' },
+          ],
+        },
+      },
+      {
+        id: 'disabled',
+        label: 'Disabled',
+        props: {
+          label: 'Disabled select',
+          value: 'option-1',
+          disabled: true,
+          options: [{ label: 'Option 1', value: 'option-1' }],
+        },
+      },
+    ],
+    editableProps: [
+      {
+        name: 'label',
+        label: 'Label',
+        control: 'text',
+        defaultValue: 'Choose an option',
+      },
+      {
+        name: 'disabled',
+        label: 'Disabled',
+        control: 'toggle',
+        defaultValue: false,
+      },
+    ],
+  },
+  {
+    id: 'toggle',
+    name: 'Toggle',
+    importName: 'Toggle',
+    categoryId: 'form-controls',
+    description: 'Binary switch component',
+    hasChildren: false,
+    variants: [
+      { id: 'on', label: 'On', props: { label: 'Enabled', value: true } },
+      { id: 'off', label: 'Off', props: { label: 'Disabled', value: false } },
+      { id: 'disabled', label: 'Disabled', props: { label: 'Locked', value: true, disabled: true } },
+    ],
+    editableProps: [
+      {
+        name: 'label',
+        label: 'Label',
+        control: 'text',
+        defaultValue: 'Toggle',
+      },
+      {
+        name: 'disabled',
+        label: 'Disabled',
+        control: 'toggle',
+        defaultValue: false,
+      },
+    ],
+  },
+  {
+    id: 'slider',
+    name: 'Slider',
+    importName: 'Slider',
+    categoryId: 'range-inputs',
+    description: 'Numeric range slider',
+    hasChildren: false,
+    variants: [
+      { id: 'default', label: 'Default', props: { label: 'Volume', value: 50, min: 0, max: 100 } },
+      { id: 'with-step', label: 'With Step', props: { label: 'Steps', value: 3, min: 0, max: 10, step: 1, showValue: true } },
+    ],
+    editableProps: [
+      {
+        name: 'label',
+        label: 'Label',
+        control: 'text',
+        defaultValue: 'Slider',
+      },
+      {
+        name: 'min',
+        label: 'Min',
+        control: 'number',
+        defaultValue: 0,
+      },
+      {
+        name: 'max',
+        label: 'Max',
+        control: 'number',
+        defaultValue: 100,
+      },
+      {
+        name: 'showValue',
+        label: 'Show Value',
+        control: 'toggle',
+        defaultValue: false,
+      },
+      {
+        name: 'disabled',
+        label: 'Disabled',
+        control: 'toggle',
+        defaultValue: false,
+      },
+    ],
+  },
+  {
+    id: 'hue-slider',
+    name: 'HueSlider',
+    importName: 'HueSlider',
+    categoryId: 'range-inputs',
+    description: 'Specialized slider for hue selection (0-360\u00b0)',
+    hasChildren: false,
+    variants: [
+      { id: 'default', label: 'Default', props: { label: 'Hue', value: 180 } },
+      { id: 'red', label: 'Red', props: { label: 'Warm Hue', value: 0 } },
+      { id: 'blue', label: 'Blue', props: { label: 'Cool Hue', value: 240 } },
+    ],
+    editableProps: [
+      {
+        name: 'label',
+        label: 'Label',
+        control: 'text',
+        defaultValue: 'Hue',
+      },
+      {
+        name: 'showValue',
+        label: 'Show Value',
+        control: 'toggle',
+        defaultValue: false,
+      },
+      {
+        name: 'disabled',
+        label: 'Disabled',
+        control: 'toggle',
+        defaultValue: false,
+      },
+    ],
+  },
+  {
+    id: 'frame',
+    name: 'Frame',
+    importName: 'Frame',
+    categoryId: 'layout',
+    description: 'Foundational layout container with theme, elevation, spacing, and interactivity',
+    hasChildren: true,
+    variants: [
+      { id: 'default', label: 'Default', props: {} },
+      { id: 'primary', label: 'Primary', props: { theme: 'primary' } },
+      { id: 'secondary', label: 'Secondary', props: { theme: 'secondary' } },
+      { id: 'strong', label: 'Strong', props: { theme: 'strong' } },
+      { id: 'deeply-sunken', label: 'Deeply Sunken', props: { elevation: -2, radius: 'md' } },
+      { id: 'sunken', label: 'Sunken', props: { elevation: -1 } },
+      { id: 'elevated', label: 'Elevated', props: { elevation: 1 } },
+      { id: 'prominent', label: 'Prominent', props: { elevation: 2, radius: 'lg' } },
+      { id: 'padded', label: 'Padded', props: { padding: 'lg', gap: 'md' } },
+      { id: 'horizontal', label: 'Horizontal', props: { direction: 'horizontal', gap: 'md', align: 'center' } },
+      { id: 'grid-3col', label: '3-Column Grid', props: { layout: 'grid', columns: 3, gap: 'md' } },
+      { id: 'card-like', label: 'Card-like', props: { radius: 'lg', padding: 'lg', bordered: true, elevation: 1 } },
+    ],
+    editableProps: [
+      {
+        name: 'theme',
+        label: 'Theme',
+        control: 'select',
+        options: [
+          { label: 'Neutral', value: 'neutral' },
+          { label: 'Primary', value: 'primary' },
+          { label: 'Secondary', value: 'secondary' },
+          { label: 'Strong', value: 'strong' },
+        ],
+        defaultValue: 'neutral',
+      },
+      {
+        name: 'elevation',
+        label: 'Elevation',
+        control: 'select',
+        options: [
+          { label: 'Deeply Sunken (-2)', value: -2 },
+          { label: 'Sunken (-1)', value: -1 },
+          { label: 'Default (0)', value: 0 },
+          { label: 'Elevated (1)', value: 1 },
+          { label: 'Prominent (2)', value: 2 },
+        ],
+        defaultValue: 0,
+      },
+      {
+        name: 'direction',
+        label: 'Direction',
+        control: 'select',
+        options: [
+          { label: 'Vertical', value: 'vertical' },
+          { label: 'Horizontal', value: 'horizontal' },
+        ],
+        defaultValue: 'vertical',
+      },
+      {
+        name: 'padding',
+        label: 'Padding',
+        control: 'select',
+        options: [
+          { label: 'None', value: '' },
+          { label: 'Small', value: 'sm' },
+          { label: 'Medium', value: 'md' },
+          { label: 'Large', value: 'lg' },
+          { label: 'Extra Large', value: 'xl' },
+        ],
+        defaultValue: '',
+      },
+      {
+        name: 'gap',
+        label: 'Gap',
+        control: 'select',
+        options: [
+          { label: 'None', value: '' },
+          { label: 'Small', value: 'sm' },
+          { label: 'Medium', value: 'md' },
+          { label: 'Large', value: 'lg' },
+        ],
+        defaultValue: '',
+      },
+      {
+        name: 'radius',
+        label: 'Radius',
+        control: 'select',
+        options: [
+          { label: 'None', value: 'none' },
+          { label: 'Small', value: 'sm' },
+          { label: 'Medium', value: 'md' },
+          { label: 'Large', value: 'lg' },
+          { label: 'Pill', value: 'pill' },
+        ],
+        defaultValue: 'none',
+      },
+      {
+        name: 'bordered',
+        label: 'Bordered',
+        control: 'toggle',
+        defaultValue: false,
+      },
+    ],
+  },
+  {
+    id: 'card',
+    name: 'Card',
+    importName: 'Card',
+    categoryId: 'layout',
+    description: 'Surface container with elevation levels',
+    hasChildren: true,
+    variants: [
+      { id: 'elevation-0', label: 'Elevation 0', props: { elevation: 0 } },
+      { id: 'elevation-1', label: 'Elevation 1', props: { elevation: 1 } },
+      { id: 'elevation-2', label: 'Elevation 2', props: { elevation: 2 } },
+    ],
+    editableProps: [
+      {
+        name: 'elevation',
+        label: 'Elevation',
+        control: 'select',
+        options: [
+          { label: 'Level 0', value: 0 },
+          { label: 'Level 1', value: 1 },
+          { label: 'Level 2', value: 2 },
+        ],
+        defaultValue: 0,
+      },
+      {
+        name: 'disabled',
+        label: 'Disabled',
+        control: 'toggle',
+        defaultValue: false,
+      },
+    ],
+  },
+];
+
+export function getComponent(id: string): ComponentMeta | undefined {
+  return COMPONENTS.find((c) => c.id === id);
+}
+
+export function getCategory(id: string): CategoryMeta | undefined {
+  return CATEGORIES.find((c) => c.id === id);
+}
+
+export function getComponentsByCategory(categoryId: string): readonly ComponentMeta[] {
+  return COMPONENTS.filter((c) => c.categoryId === categoryId);
+}

package/src/registry/types.ts

@@ -0,0 +1,35 @@
+export interface CategoryMeta {
+  readonly id: string;
+  readonly name: string;
+  readonly description: string;
+}
+
+export interface VariantMeta {
+  readonly id: string;
+  readonly label: string;
+  readonly props: Record<string, unknown>;
+}
+
+export interface EditablePropOption {
+  readonly label: string;
+  readonly value: string | number | boolean;
+}
+
+export interface EditableProp {
+  readonly name: string;
+  readonly label: string;
+  readonly control: 'select' | 'text' | 'toggle' | 'number';
+  readonly options?: readonly EditablePropOption[];
+  readonly defaultValue: string | number | boolean;
+}
+
+export interface ComponentMeta {
+  readonly id: string;
+  readonly name: string;
+  readonly importName: string;
+  readonly categoryId: string;
+  readonly description: string;
+  readonly hasChildren: boolean;
+  readonly variants: readonly VariantMeta[];
+  readonly editableProps: readonly EditableProp[];
+}

package/src/theme/FrameContext.tsx

@@ -0,0 +1,29 @@
+import { createContext, useContext } from 'react';
+import type { ThemeName, ElevationLevel } from './types';
+
+/**
+ * Context value provided by Frame to its descendants.
+ * Contains the resolved theme and elevation that children should use.
+ */
+export interface FrameContextValue {
+  readonly theme: ThemeName;
+  readonly elevation: ElevationLevel;
+}
+
+/**
+ * FrameContext - Propagates theme and elevation overrides from Frame to descendants.
+ *
+ * When null, components fall back to NewtoneProvider's theme and default elevation (1).
+ * When present, useTokens() reads from this context instead.
+ */
+export const FrameContext = createContext<FrameContextValue | null>(null);
+
+/**
+ * useFrameContext - Read the nearest Frame's context, if any.
+ *
+ * Returns null when no parent Frame exists. This is intentionally not an error —
+ * components outside a Frame simply fall back to the NewtoneProvider defaults.
+ */
+export function useFrameContext(): FrameContextValue | null {
+  return useContext(FrameContext);
+}

package/src/theme/NewtoneProvider.tsx

@@ -1,6 +1,8 @@
 import React, { createContext, useState, useMemo, useContext } from 'react';
 import type { NewtoneThemeConfig, NewtoneThemeContext, ColorMode, ThemeName } from './types';
 import { DEFAULT_THEME_CONFIG } from './defaults';
+import { GoogleFontLoader } from '../fonts/GoogleFontLoader';
+import { IconFontLoader } from '../fonts/IconFontLoader';
 
 const ThemeContext = createContext<NewtoneThemeContext | null>(null);
 
@@ -43,7 +45,13 @@ export function NewtoneProvider({
     [config, mode, theme]
   );
 
-  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+  return (
+    <ThemeContext.Provider value={value}>
+      <GoogleFontLoader fonts={config.typography.fonts} />
+      <IconFontLoader icons={config.icons} />
+      {children}
+    </ThemeContext.Provider>
+  );
 }
 
 /**

package/src/theme/defaults.ts

@@ -39,4 +39,55 @@ export const DEFAULT_THEME_CONFIG: NewtoneThemeConfig = {
   elevation: {
     offsets: [-0.02, 0, 0.04], // [sunken, default, elevated]
   },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+    xxl: 32,
+  },
+  radius: {
+    none: 0,
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 12,
+    pill: 999,
+  },
+  typography: {
+    fonts: {
+      mono: {
+        type: 'system',
+        family: 'ui-monospace',
+        fallback: 'SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+      },
+      display: {
+        type: 'system',
+        family: 'system-ui',
+        fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      },
+      default: {
+        type: 'system',
+        family: 'system-ui',
+        fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      },
+    },
+    scale: {
+      xs: 10,   // 16 / 1.25^2
+      sm: 13,   // 16 / 1.25
+      base: 16,
+      md: 20,   // 16 * 1.25
+      lg: 25,   // 16 * 1.25^2
+      xl: 31,   // 16 * 1.25^3
+      xxl: 39,  // 16 * 1.25^4
+    },
+    lineHeight: { tight: 1.25, normal: 1.5, relaxed: 1.75 },
+    fontWeight: { regular: 400, medium: 500, semibold: 600, bold: 700 },
+  },
+  icons: {
+    variant: 'rounded',  // Material Design 3 aesthetic
+    weight: 400,         // Normal weight
+    autoGrade: true,     // Enable mode-aware grade
+  },
 };