@dallastek/ui

A UI component library for DallasTek with reusable React components including interactive code playgrounds and buttons.

Installation

npm install @dallastek/ui

Components

Sandbox

An interactive code playground component built on Sandpack, supporting live React component previews with code editing.

Features

• ✨ Live React component preview
• 🌙 Dark/light theme support (auto-detects system preference)
• 📝 Multiple view modes (code, preview, both)
• 🔢 Line numbers
• 🎨 Syntax highlighting
• 📱 Responsive design
• ⌨️ Editable code (readOnly option available)
• 🔄 Refresh button
• 📊 Console support
• 📂 Multi-file support

Usage

import { Sandbox } from '@dallastek/ui';

// Simple component code
function App() {
  return (
    <Sandbox
      componentCode={`
        function MyComponent() {
          return <h1>Hello World</h1>;
        }
        export default MyComponent;
      `}
      template="react"
      editorHeight="400px"
      previewHeight="400px"
      showLineNumbers={true}
      readOnly={false}
    />
  );
}

// Multiple files
function App() {
  return (
    <Sandbox
      files={{
        '/App.js': `export default function App() {
  return <h1>Hello from App</h1>;
}`,
        '/index.js': `import React from 'react';
import App from './App';

export default function Root() {
  return <App />;
}`
      }}
      template="react"
      dependencies={{ 'react': '^18.0.0' }}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | files | SandboxFiles | - | Object with file paths as keys and code as values | | componentCode | string | - | Single component code (auto-generates files) | | template | 'react' \| 'react-ts' \| 'vanilla' \| 'vanilla-ts' \| 'vue' \| 'vue-ts' | 'react' | Sandpack template | | dependencies | SandboxDependencies | {} | NPM dependencies | | editorHeight | number \| string | '500px' | Editor height | | previewHeight | number \| string | '500px' | Preview height | | showLineNumbers | boolean | true | Show line numbers | | readOnly | boolean | true | Make editor read-only | | showConsole | boolean | false | Show console | | showNavigator | boolean | true | Show file navigator | | showRefreshButton | boolean | true | Show refresh button | | editorWidthPercentage | number | 50 | Editor width when in split view |

View Modes

• Preview - Show only the live preview
• Code - Show only the code editor
• Both - Split view with both editor and preview

Button

A customizable button component with multiple variants, sizes, and states.

Features

• 🎨 Multiple variants (primary, secondary, outline, ghost, destructive)
• 📏 Three sizes (sm, md, lg)
• ⏳ Loading state with spinner
• 🖼️ Icon support (left and right)
• 🌙 Dark mode support
• ♿ Accessible (keyboard navigation, focus states)

Usage

import { Button } from '@dallastek/ui';

function App() {
  return (
    <>
      <Button variant="primary">Primary Button</Button>
      <Button variant="secondary" size="lg">Large Button</Button>
      <Button variant="outline" isLoading={true}>Loading...</Button>
      <Button variant="ghost" fullWidth>Full Width</Button>
      <Button 
        variant="destructive" 
        leftIcon={<Icon />}
        rightIcon={<Icon />}
      >
        With Icons
      </Button>
    </>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive' | 'primary' | Button style variant | | size | 'sm' \| 'md' \| 'lg' | 'md' | Button size | | isLoading | boolean | false | Show loading spinner | | leftIcon | ReactNode | - | Icon on the left | | rightIcon | ReactNode | - | Icon on the right | | fullWidth | boolean | false | Make button full width | | disabled | boolean | - | Disable the button | | onClick | () => void | - | Click handler |

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch mode
npm run dev

License

MIT