Redai Frontend SDK Template

Overview

This is a comprehensive React TypeScript SDK template designed for building modern, flat-design component libraries. It features a built-in ActionBus for telemetry/events, strict TypeScript typings, and a utility-first styling approach using Tailwind CSS.

Features

• Architecture: Library mode (Vite), ESM/CJS output.
• Core: In-memory ActionBus with middleware support (PII filtering, Audit logging).
• Styling: Tailwind CSS with CSS Variables for theming (Dark/Light mode ready).
• Design: Flat design, soft rounded corners, no borders/shadows.
• Components: 25+ Atomic/Molecular components ready to use.
• Quality: ESLint, Prettier, Vitest, Storybook.

Installation

npm install
# or
pnpm install

Commands

• pnpm dev: Start dev server (if applicable)
• pnpm build: Build the library for distribution (dist/)
• pnpm storybook: Launch Storybook documentation
• pnpm test: Run unit tests (Vitest)
• pnpm lint: Lint code
• pnpm format: Format code

Usage

Theming

Import the base styles in your app's entry point:

import 'redai-fe-v2-sdk/dist/style.css'

To switch themes, toggle the .theme-dark class on the html or body tag.

Component Usage

import { Button, Input, useDispatchAction } from 'redai-fe-v2-sdk'

const MyForm = () => {
  const dispatch = useDispatchAction()
  
  return (
    <div>
      <Input placeholder="Enter data..." />
      <Button onClick={() => console.log('Clicked')}>Submit</Button>
    </div>
  )
}

Telemetry / ActionBus

Events are automatically dispatched by interactive components. You can also subscribe globally:

import { actionBus } from 'redai-fe-v2-sdk'

actionBus.subscribeAll((event) => {
  console.log('Telemetry Event:', event)
})

Publishing

1. Update version in package.json
2. Run pnpm build
3. Run npm publish

Project Structure

• src/bus: ActionBus logic
• src/components: UI Components (Atoms, Molecules, Organisms)
• src/middleware: Event middleware (PII, Logger)
• src/styles: Design tokens and CSS