Shadow Design Components

A lightweight React component library with shadow DOM support, featuring flexible layout components and interactive UI elements.

Overview

This library provides a collection of reusable React components designed for building low-code systems and dynamic UIs. It includes layout components, interactive elements, and utility functions for managing component templates.

Key Components

• ShadowFlex: A flexible layout container with support for row/column directions and gap spacing
• HeroTitle: A customizable heading component with size and color options
• TrafficLight: An interactive status indicator with red/yellow/green states
• ShadowWrapper: A container for rendering components into shadow DOM to isolate styles

Features

• Shadow DOM encapsulation for style isolation
• Template-based component rendering
• Utility functions for dynamic component manipulation
• Type-safe component props with TypeScript
• Responsive design elements

Installation

# Install dependencies
npm install

Available Scripts

In the project directory, you can run:

npm start

Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for best performance.

The build is minified and filenames include hashes.
Your app is ready for deployment!

npm run eject

Note: This is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency and copy all configuration files and dependencies directly into your project, giving you full control over them.

Usage Example

import { ShadowFlex, HeroTitle, TrafficLight } from './components';

function App() {
  return (
    <ShadowFlex direction="column" gap={20}>
      <HeroTitle text="Component Demo" color="blue" size={28} />
      <ShadowFlex direction="row" gap={15}>
        <TrafficLight status="red" size={40} />
        <TrafficLight status="yellow" size={40} />
        <TrafficLight status="green" size={40} />
      </ShadowFlex>
    </ShadowFlex>
  );
}

Component API

ShadowFlex

| Prop | Type | Default | Description | |-------------|-------------------|---------|------------------------------| | direction | "row" | "column" | "row" | Flex layout direction | | gap | number | 10 | Spacing between child elements| | children | ComponentJSON[] | [] | Nested component definitions | | dataVars | Record<string, any>| {} | Dynamic data variables |

HeroTitle

| Prop | Type | Default | Description | |--------|--------|---------|---------------------------| | text | string | required| The title text content | | color | string | "black" | Text color | | size | number | 24 | Font size in pixels |

TrafficLight

| Prop | Type | Default | Description | |--------|---------------------------|---------|---------------------------| | status | "red" | "yellow" | "green" | "red" | Current light status | | size | number | 40 | Size of the light in pixels| | dataVars| Record<string, any> | {} | Dynamic data variables |

License

MIT