Update README.md to provide a comprehensive overview of The Order monorepo, including repository structure, quickstart guide, development workflow, and contribution guidelines.

packages/ui/README.md

@@ -0,0 +1,28 @@
+# @the-order/ui
+
+Design system and UI components for The Order.
+
+## Usage
+
+```tsx
+import { Button } from '@the-order/ui';
+
+function MyComponent() {
+  return <Button variant="primary">Click me</Button>;
+}
+```
+
+## Components
+
+- `Button` - Button component with variants
+
+## Development
+
+```bash
+# Build
+pnpm build
+
+# Watch mode
+pnpm dev
+```
+

packages/ui/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@the-order/ui",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Design system and UI components for The Order",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "lint": "eslint src --ext .ts,.tsx",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "typescript": "^5.3.3"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}
+

packages/ui/src/components/Button.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'outline';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = 'primary',
+  size = 'md',
+  children,
+  className = '',
+  ...props
+}) => {
+  const baseClasses = 'font-medium rounded-lg transition-colors';
+  const variantClasses = {
+    primary: 'bg-blue-600 text-white hover:bg-blue-700',
+    secondary: 'bg-gray-600 text-white hover:bg-gray-700',
+    outline: 'border border-gray-300 text-gray-700 hover:bg-gray-50',
+  };
+  const sizeClasses = {
+    sm: 'px-3 py-1.5 text-sm',
+    md: 'px-4 py-2 text-base',
+    lg: 'px-6 py-3 text-lg',
+  };
+
+  return (
+    <button
+      className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+

packages/ui/src/components/index.ts

@@ -0,0 +1,7 @@
+/**
+ * UI Components
+ */
+
+// Export components here as they are created
+export { Button } from './Button';
+

packages/ui/src/index.ts

@@ -0,0 +1,6 @@
+/**
+ * The Order UI Component Library
+ */
+
+export * from './components';
+

packages/ui/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx", "**/*.spec.ts", "**/*.spec.tsx"]
+}
+