@tmo/components

T-Mobile Internal UI Component Library - A React component library for internal applications.

Installation

# From npm (when published to private registry)
npm install @tmo/components

# From local tarball (for POC/testing)
npm install ./path/to/tmo-components-0.1.0.tgz

Usage

import { Button, Card, CardHeader, CardBody, Input } from '@tmo/components';

function App() {
  return (
    <div>
      {/* Button Examples */}
      <Button variant="primary" size="md">
        Primary Button
      </Button>
      
      <Button variant="outline" size="lg">
        Outline Button
      </Button>
      
      <Button variant="secondary" isLoading>
        Loading...
      </Button>

      {/* Card Example */}
      <Card variant="elevated" padding="lg">
        <CardHeader>Card Title</CardHeader>
        <CardBody>
          This is the card content. You can put anything here.
        </CardBody>
      </Card>

      {/* Input Example */}
      <Input 
        label="Email Address"
        placeholder="Enter your email"
        helperText="We'll never share your email"
      />
      
      <Input 
        label="Password"
        type="password"
        error="Password is required"
      />
    </div>
  );
}

Components

Button

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'primary' \| 'secondary' \| 'outline' \| 'ghost' | 'primary' | Button style variant | | size | 'sm' \| 'md' \| 'lg' | 'md' | Button size | | isLoading | boolean | false | Shows loading spinner | | fullWidth | boolean | false | Makes button full width |

Card

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'elevated' \| 'outlined' \| 'filled' | 'elevated' | Card style variant | | padding | 'none' \| 'sm' \| 'md' \| 'lg' | 'md' | Internal padding | | hoverable | boolean | false | Adds hover effect |

Sub-components: CardHeader, CardBody, CardFooter

Input

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | - | Input label | | error | string | - | Error message (shows red styling) | | helperText | string | - | Helper text below input | | size | 'sm' \| 'md' \| 'lg' | 'md' | Input size | | fullWidth | boolean | false | Makes input full width |

Development

# Install dependencies
npm install

# Build the library
npm run build

# Create tarball for local testing
npm pack

Publishing

# To private npm registry (requires npm Teams/Enterprise)
npm publish --access restricted

# To local Verdaccio registry (for testing)
npm publish --registry http://localhost:4873

License

UNLICENSED - Internal use only