tmo-ui-components 0.1.0

package/README.md

@@ -0,0 +1,117 @@
+# @tmo/components
+
+T-Mobile Internal UI Component Library - A React component library for internal applications.
+
+## Installation
+
+```bash
+# 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
+
+```tsx
+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
+
+```bash
+# Install dependencies
+npm install
+
+# Build the library
+npm run build
+
+# Create tarball for local testing
+npm pack
+```
+
+## Publishing
+
+```bash
+# 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

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ButtonProps } from './Button.types';
+export declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/components/Button/Button.types.d.ts

@@ -0,0 +1,10 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    fullWidth?: boolean;
+}

package/dist/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button, default } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button.types';

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps } from './Card.types';
+export declare const Card: React.FC<CardProps>;
+export declare const CardHeader: React.FC<CardHeaderProps>;
+export declare const CardBody: React.FC<CardBodyProps>;
+export declare const CardFooter: React.FC<CardFooterProps>;
+export default Card;

package/dist/components/Card/Card.types.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type CardVariant = 'elevated' | 'outlined' | 'filled';
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    variant?: CardVariant;
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    hoverable?: boolean;
+}
+export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+export interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}

package/dist/components/Card/index.d.ts

@@ -0,0 +1,2 @@
+export { Card, CardHeader, CardBody, CardFooter, default } from './Card';
+export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, CardVariant } from './Card.types';

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+interface CustomCheckboxProps {
+    checked: boolean;
+    indeterminate?: boolean;
+    onClick: (e: React.MouseEvent) => void;
+}
+export declare const CustomCheckbox: ({ checked, indeterminate, onClick }: CustomCheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export interface ColumnFilterState {
+    selectedValues: Set<string>;
+}
+export interface TableFilterState {
+    [columnKey: string]: ColumnFilterState;
+}
+export type TableColumn = ColumnDef<any, any> & {
+    accessorKey?: string;
+    style?: CSSProperties | ((ctx: unknown) => CSSProperties);
+    cellStyle?: CSSProperties | ((ctx: unknown) => CSSProperties);
+    headerStyle?: CSSProperties | ((ctx: unknown) => CSSProperties);
+    enableSorting?: boolean;
+    isPrimary?: boolean;
+    enableCheckbox?: boolean;
+    enableFilter?: boolean;
+    filterFn?: (rowValue: unknown, filterValues: Set<string>) => boolean;
+    disableDrag?: boolean;
+    filterOptions?: string[];
+    filterLabel?: (value: unknown) => string;
+    truncate?: boolean;
+};
+export interface CheckboxSelectionState {
+    selectedRows: Set<string>;
+    onRowSelect: (rowId: string, event: React.MouseEvent) => void;
+    onSelectAll: () => void;
+    isAllSelected: boolean;
+    isPartiallySelected: boolean;
+    getRowId: (row: unknown) => string;
+}
+export interface PageInfo {
+    page: number;
+    pageSize: number;
+    totalRecords: number;
+    totalPages: number;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+}
+interface DataTableProps {
+    data: any[] | undefined;
+    columns: TableColumn[];
+    loading?: boolean;
+    onSort?: (key: string, order: 'ASC' | 'DESC') => void;
+    config?: {
+        height?: number;
+        rowHeight?: number;
+    };
+    onRowClick?: (row: any) => void;
+    pagination?: PageInfo;
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    headerStyle?: CSSProperties;
+    checkboxSelection?: CheckboxSelectionState;
+    filterState?: TableFilterState;
+    onFilterChange?: (columnKey: string, selectedValues: Set<string>) => void;
+    enableColumnReorder?: boolean;
+    columnOrder?: string[];
+    onColumnOrderChange?: (newOrder: string[]) => void;
+    sortingState?: Record<string, 'ASC' | 'DESC'>;
+    customHeaderComponent?: ReactNode;
+}
+export declare const DataTable: ({ data, columns, loading, onSort, config, onRowClick, pagination, onPageChange, onPageSizeChange, headerStyle, checkboxSelection, filterState, onFilterChange, enableColumnReorder, columnOrder, onColumnOrderChange, sortingState: controlledSortingState, customHeaderComponent, }: DataTableProps) => import("react/jsx-runtime").JSX.Element;
+export default DataTable;

package/dist/components/DataTable/index.d.ts

@@ -0,0 +1,2 @@
+export { DataTable, CustomCheckbox, default } from './DataTable';
+export type { TableColumn, TableFilterState, ColumnFilterState, CheckboxSelectionState, PageInfo, } from './DataTable';

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { InputProps } from './Input.types';
+export declare const Input: React.FC<InputProps>;
+export default Input;

package/dist/components/Input/Input.types.d.ts

@@ -0,0 +1,9 @@
+import { InputHTMLAttributes } from 'react';
+export type InputSize = 'sm' | 'md' | 'lg';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    size?: InputSize;
+    fullWidth?: boolean;
+}

package/dist/components/Input/index.d.ts

@@ -0,0 +1,2 @@
+export { Input, default } from './Input';
+export type { InputProps, InputSize } from './Input.types';

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Button';
+export * from './Card';
+export * from './Input';
+export * from './DataTable';

package/dist/index.d.ts

@@ -0,0 +1,119 @@
+import React, { ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes, CSSProperties } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ColumnDef } from '@tanstack/react-table';
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    fullWidth?: boolean;
+}
+
+declare const Button: React.FC<ButtonProps>;
+
+type CardVariant = 'elevated' | 'outlined' | 'filled';
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    variant?: CardVariant;
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    hoverable?: boolean;
+}
+interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+
+declare const Card: React.FC<CardProps>;
+declare const CardHeader: React.FC<CardHeaderProps>;
+declare const CardBody: React.FC<CardBodyProps>;
+declare const CardFooter: React.FC<CardFooterProps>;
+
+type InputSize = 'sm' | 'md' | 'lg';
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    size?: InputSize;
+    fullWidth?: boolean;
+}
+
+declare const Input: React.FC<InputProps>;
+
+interface CustomCheckboxProps {
+    checked: boolean;
+    indeterminate?: boolean;
+    onClick: (e: React.MouseEvent) => void;
+}
+declare const CustomCheckbox: ({ checked, indeterminate, onClick }: CustomCheckboxProps) => react_jsx_runtime.JSX.Element;
+interface ColumnFilterState {
+    selectedValues: Set<string>;
+}
+interface TableFilterState {
+    [columnKey: string]: ColumnFilterState;
+}
+type TableColumn = ColumnDef<any, any> & {
+    accessorKey?: string;
+    style?: CSSProperties | ((ctx: unknown) => CSSProperties);
+    cellStyle?: CSSProperties | ((ctx: unknown) => CSSProperties);
+    headerStyle?: CSSProperties | ((ctx: unknown) => CSSProperties);
+    enableSorting?: boolean;
+    isPrimary?: boolean;
+    enableCheckbox?: boolean;
+    enableFilter?: boolean;
+    filterFn?: (rowValue: unknown, filterValues: Set<string>) => boolean;
+    disableDrag?: boolean;
+    filterOptions?: string[];
+    filterLabel?: (value: unknown) => string;
+    truncate?: boolean;
+};
+interface CheckboxSelectionState {
+    selectedRows: Set<string>;
+    onRowSelect: (rowId: string, event: React.MouseEvent) => void;
+    onSelectAll: () => void;
+    isAllSelected: boolean;
+    isPartiallySelected: boolean;
+    getRowId: (row: unknown) => string;
+}
+interface PageInfo {
+    page: number;
+    pageSize: number;
+    totalRecords: number;
+    totalPages: number;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+}
+interface DataTableProps {
+    data: any[] | undefined;
+    columns: TableColumn[];
+    loading?: boolean;
+    onSort?: (key: string, order: 'ASC' | 'DESC') => void;
+    config?: {
+        height?: number;
+        rowHeight?: number;
+    };
+    onRowClick?: (row: any) => void;
+    pagination?: PageInfo;
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    headerStyle?: CSSProperties;
+    checkboxSelection?: CheckboxSelectionState;
+    filterState?: TableFilterState;
+    onFilterChange?: (columnKey: string, selectedValues: Set<string>) => void;
+    enableColumnReorder?: boolean;
+    columnOrder?: string[];
+    onColumnOrderChange?: (newOrder: string[]) => void;
+    sortingState?: Record<string, 'ASC' | 'DESC'>;
+    customHeaderComponent?: ReactNode;
+}
+declare const DataTable: ({ data, columns, loading, onSort, config, onRowClick, pagination, onPageChange, onPageSizeChange, headerStyle, checkboxSelection, filterState, onFilterChange, enableColumnReorder, columnOrder, onColumnOrderChange, sortingState: controlledSortingState, customHeaderComponent, }: DataTableProps) => react_jsx_runtime.JSX.Element;
+
+export { Button, Card, CardBody, CardFooter, CardHeader, CustomCheckbox, DataTable, Input };
+export type { ButtonProps, ButtonSize, ButtonVariant, CardBodyProps, CardFooterProps, CardHeaderProps, CardProps, CardVariant, CheckboxSelectionState, ColumnFilterState, InputProps, InputSize, PageInfo, TableColumn, TableFilterState };