@mhome/ui 0.1.0

package/README.md

@@ -0,0 +1,188 @@
+# @mhome/ui
+
+A comprehensive React UI component library built with Tailwind CSS, providing a set of reusable and customizable components for building modern web applications.
+
+## Installation
+
+### Option 1: Install from Git Repository (Recommended for Development)
+
+```bash
+npm install github:your-username/pallas-cat-examples#packages/ui
+```
+
+Or add to your `package.json`:
+
+```json
+{
+  "dependencies": {
+    "@mhome/ui": "github:your-username/pallas-cat-examples#packages/ui"
+  }
+}
+```
+
+You can also specify a specific branch or tag:
+
+```bash
+npm install github:your-username/pallas-cat-examples#main:packages/ui
+```
+
+### Option 2: Install from NPM (When Published)
+
+```bash
+npm install @mhome/ui
+```
+
+## Quick Start
+
+### 1. Import CSS
+
+Import the component styles in your main entry file (e.g., `index.js` or `App.jsx`):
+
+```javascript
+import '@mhome/ui/dist/index.css';
+```
+
+### 2. Import and Use Components
+
+```javascript
+import { Button, Menu, MenuItem, MenuItemText } from '@mhome/ui';
+
+function App() {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+
+  return (
+    <div>
+      <Button onClick={(e) => setAnchorEl(e.currentTarget)}>
+        Open Menu
+      </Button>
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={() => setAnchorEl(null)}
+      >
+        <MenuItem onClick={() => setAnchorEl(null)}>
+          <MenuItemText>Profile</MenuItemText>
+        </MenuItem>
+        <MenuItem onClick={() => setAnchorEl(null)}>
+          <MenuItemText>Settings</MenuItemText>
+        </MenuItem>
+      </Menu>
+    </div>
+  );
+}
+```
+
+## Requirements
+
+- **React** ^18.2.0
+- **React DOM** ^18.2.0
+- **Tailwind CSS** - Must be configured in your project
+
+## Available Components
+
+### Layout Components
+- `Box` - Container component with flexible styling
+- `Container` - Responsive container component
+- `Stack` - Flexbox layout component
+- `Grid` - Grid layout system
+- `Paper` - Surface component with elevation
+- `Divider` - Separator component
+
+### Navigation Components
+- `Menu`, `MenuItem`, `MenuItemIcon`, `MenuItemText` - Menu system
+- `Tabs`, `Tab` - Tab navigation
+- `Drawer` - Side navigation drawer
+- `AppBar` - Application bar
+- `Toolbar` - Toolbar component
+
+### Form Components
+- `Button` - Button component with variants
+- `IconButton` - Icon-only button
+- `TextField` - Text input field
+- `Select`, `FormControl`, `SelectMenuItem` - Select dropdown
+- `Checkbox` - Checkbox input
+- `Radio`, `RadioGroup` - Radio button group
+- `Slider` - Range slider
+- `DatePicker` - Date picker component
+- `Autocomplete` - Autocomplete input
+- `FormControlLabel` - Form control with label
+- `FormLabel` - Form label
+- `FormGroup` - Form control group
+- `InputLabel` - Input label
+- `InputAdornment` - Input adornment (icons, text)
+
+### Data Display Components
+- `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`, `CardActionArea` - Card components
+- `List`, `ListItem`, `ListItemIcon`, `ListItemText`, `ListItemButton`, `ListItemAvatar` - List components
+- `Table`, `TableContainer`, `TableHead`, `TableBody`, `TableRow`, `TableCell` - Table components
+- `Chip` - Chip component
+- `Avatar` - Avatar component
+- `Typography` - Typography component
+- `Alert` - Alert/notification component
+
+### Feedback Components
+- `Dialog`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogActions`, `DialogContentText` - Dialog components
+- `Tooltip` - Tooltip component
+- `Collapse` - Collapsible content
+
+### Other Components
+- `Accordion`, `AccordionSummary`, `AccordionDetails` - Accordion component
+- `ToggleButton`, `ToggleButtonGroup` - Toggle button components
+
+## Styling
+
+This component library uses Tailwind CSS and CSS variables for theming. Make sure your project has Tailwind CSS configured and includes the CSS variables defined in `src/index.css`.
+
+### Required CSS Variables
+
+The components rely on CSS variables for theming. Ensure your project includes these variables (they are defined in `src/index.css`):
+
+```css
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  /* ... and more */
+}
+```
+
+## Development
+
+### Building the Package
+
+```bash
+cd packages/ui
+npm run build
+```
+
+This will generate the `dist` directory with:
+- `index.cjs.js` - CommonJS format
+- `index.esm.js` - ES Module format
+- `index.css` - Compiled styles
+
+### Project Structure
+
+```
+packages/ui/
+├── src/
+│   ├── components/     # Component source files
+│   ├── lib/            # Utility functions
+│   ├── index.js        # Main entry point
+│   └── index.css       # CSS variables and Tailwind imports
+├── dist/               # Built files (generated)
+├── package.json
+└── README.md
+```
+
+## Examples
+
+Visit the Storybook documentation for interactive examples and component API documentation.
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.