TWC Utils

A TypeScript package with Proto types and React components for modern web development.

Installation

npm install twc-utils

Usage

All-in-one import

import {
  Calculator,
  Counter,
  Toggle,
  Card,
  Button,
  Agent,
  ExternalAgent,
} from 'twc-utils';

// React components
const MyApp = () => (
  <div>
    <Calculator
      initialValue={10}
      onCalculate={(result) => console.log(result)}
    />
    <Counter initialCount={0} step={1} />
    <Toggle label="Power Switch" />
  </div>
);

// Proto types
const agent = new Agent();
agent.name = 'Test Agent';

Modular imports

// React components only
import {
  Calculator,
  Counter,
  Toggle,
  Card,
  Button,
} from 'twc-utils/components';

// Proto types only
import { Agent, ExternalAgent, Address } from 'twc-utils/proto';

React Components

Calculator

Math calculator with basic operations.

interface CalculatorProps {
  initialValue?: number;
  onCalculate?: (result: number) => void;
}

<Calculator
  initialValue={0}
  onCalculate={(result) => console.log('Result:', result)}
/>;

Counter

Increment/decrement counter component.

interface CounterProps {
  initialCount?: number;
  step?: number;
  onCountChange?: (count: number) => void;
}

<Counter
  initialCount={0}
  step={1}
  onCountChange={(count) => console.log('Count:', count)}
/>;

Toggle

On/off toggle switch component.

interface ToggleProps {
  initialValue?: boolean;
  onToggle?: (value: boolean) => void;
  label?: string;
}

<Toggle
  initialValue={false}
  label="Power Switch"
  onToggle={(value) => console.log('Toggle:', value)}
/>;

Card

Container component with title and content.

interface CardProps {
  title?: string;
  children?: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

<Card title="Sample Card" style={{ backgroundColor: '#f8f9fa' }}>
  <p>Card content goes here</p>
</Card>;

Button

Styled button with variants and sizes.

interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
  className?: string;
  style?: React.CSSProperties;
}

<Button variant="primary" size="large" onClick={() => alert('Clicked!')}>
  Click me
</Button>;

Proto Types

• Agent - Agent proto type
• ExternalAgent - External agent proto type
• Address - Address proto type
• Error - Error proto type
• Event - Event proto type
• FileUpload - File upload proto type
• LineChannel - LINE channel proto type
• LineMessage - LINE message proto type
• AIService - AI service proto type

Module Structure

twc-utils/
├── dist/
│   ├── index.js              # Main entry point
│   ├── components/
│   │   ├── index.js          # Components entry point
│   │   ├── Calculator.js     # Calculator component
│   │   ├── Counter.js        # Counter component
│   │   ├── Toggle.js         # Toggle component
│   │   ├── Card.js           # Card component
│   │   └── Button.js         # Button component
│   └── proto.js              # Proto types
└── src/
    ├── index.ts              # Main exports
    ├── components/           # React components
    │   ├── index.ts          # Component exports
    │   ├── Calculator.tsx    # Calculator component
    │   ├── Counter.tsx       # Counter component
    │   ├── Toggle.tsx        # Toggle component
    │   ├── Card.tsx          # Card component
    │   └── Button.tsx        # Button component
    └── proto.ts              # Proto type exports

Development

# Install dependencies
npm install

# Build
npm run build

# Generate proto types
npm run proto

License

ISC