@ttianqii/takaui 0.0.3 → 0.0.5

package/README.md

@@ -1,73 +1,250 @@
-# React + TypeScript + Vite
+# TakaUI
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A modern, customizable React UI component library built with TypeScript, Tailwind CSS, and Radix UI primitives.
 
-Currently, two official plugins are available:
+## 📦 Installation
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+```bash
+# npm
+npm install @ttianqii/takaui
 
-## React Compiler
+# yarn
+yarn add @ttianqii/takaui
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+# pnpm
+pnpm add @ttianqii/takaui
 
-## Expanding the ESLint configuration
+# bun
+bun add @ttianqii/takaui
+```
+
+### Peer Dependencies
+
+TakaUI requires React 18+ or React 19+:
+
+```bash
+# npm
+npm install react react-dom
+
+# yarn
+yarn add react react-dom
+
+# pnpm
+pnpm add react react-dom
+
+# bun
+bun add react react-dom
+```
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+### Tailwind CSS Setup
+
+TakaUI uses Tailwind CSS for styling. Add the TakaUI paths to your `tailwind.config.js`:
 
 ```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@ttianqii/takaui/dist/**/*.{js,mjs,cjs}"
+  ],
+  theme: {
+    extend: {},
   },
-])
+  plugins: [],
+}
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+### Import Styles
 
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
+Import the TakaUI styles in your main entry file (e.g., `main.tsx` or `App.tsx`):
+
+```tsx
+import '@ttianqii/takaui/styles.css'
+```
+
+## 🚀 Quick Start
+
+```tsx
+import { Calendar, TimePicker, DataTable } from '@ttianqii/takaui'
+import '@ttianqii/takaui/styles.css'
+import { useState } from 'react'
+
+function App() {
+  const [date, setDate] = useState<Date | undefined>(new Date())
+  
+  // DataTable example - No TanStack required!
+  const columns = [
+    { key: 'name', header: 'Name', sortable: true },
+    { key: 'email', header: 'Email' },
+    { 
+      key: 'status', 
+      header: 'Status',
+      cell: (value) => (
+        <span className="px-2 py-1 bg-green-100 text-green-800 rounded">
+          {value}
+        </span>
+      )
     },
-  },
-])
+  ]
+  
+  const data = [
+    { id: 1, name: 'John', email: 'john@example.com', status: 'Active' },
+    { id: 2, name: 'Jane', email: 'jane@example.com', status: 'Active' },
+  ]
+  
+  return (
+    <div>
+      <Calendar
+        mode="single"
+        selected={date}
+        onSelect={setDate}
+      />
+      
+      <DataTable 
+        data={data} 
+        columns={columns}
+        showSearch
+        searchPlaceholder="Search users..."
+      />
+    </div>
+  )
+}
 ```
+
+## 📚 Components
+
+TakaUI includes the following components:
+
+### Form & Input Components
+
+- **[Calendar](./docs/CALENDAR.md)** - Flexible date picker with multiple selection modes
+- **[DatePicker](./docs/DATEPICKER.md)** - Date picker with popover and custom formatting
+- **[TimePicker](./docs/TIMEPICKER.md)** - Time picker with 12h/24h formats and timezone support
+- **[DropdownMenu](./docs/DROPDOWN.md)** - Accessible dropdown menu component
+
+### Data Display Components
+
+- **[DataTable](./docs/DATATABLE_NEW.md)** - **NEW!** Independent table with sorting, filtering, and pagination (No TanStack!)
+  - ✅ Zero external dependencies (except icons)
+  - ✅ Built-in sorting, pagination, search
+  - ✅ Custom cell rendering
+  - ✅ Loading states
+  - [Quick Reference](./DATATABLE_QUICKREF.md) - Cheat sheet
+- **[Schedule](./docs/SCHEDULE.md)** - Weekly schedule component with custom fields
+- **[WeekNavigator](./docs/WEEKNAVIGATOR.md)** - Week navigation with date range display
+
+### Advanced Table System (Optional)
+
+For advanced users who need TanStack Table features:
+
+- **[TableRoot, TableContent, TableNavigator](./docs/DATATABLE.md)** - Modular table components
+  - Requires: `npm install @tanstack/react-table`
+  - [Modular Structure](./docs/DATATABLE_MODULAR.md)
+  - [Architecture](./DATATABLE_ARCHITECTURE.md)
+
+### Base UI Components
+
+All components are built on top of shadcn/ui primitives:
+
+- Button
+- Input
+- Label
+- Select
+- Popover
+- Dialog/Modal
+- Checkbox
+- Card
+
+## 📖 Documentation
+
+Detailed documentation for each component:
+
+- [Calendar Documentation](./docs/CALENDAR.md)
+- [DatePicker Documentation](./docs/DATEPICKER.md)
+- [TimePicker Documentation](./docs/TIMEPICKER.md)
+- [DataTable Documentation](./docs/DATATABLE.md)
+- [Schedule Documentation](./docs/SCHEDULE.md)
+- [WeekNavigator Documentation](./docs/WEEKNAVIGATOR.md)
+- [DropdownMenu Documentation](./docs/DROPDOWN.md)
+
+## 🎨 Customization
+
+### Styling with Tailwind
+
+All components accept a `className` prop for custom styling:
+
+```tsx
+<Calendar 
+  className="rounded-lg shadow-lg border-2 border-blue-500"
+  mode="single"
+  selected={date}
+  onSelect={setDate}
+/>
+```
+
+### Theming
+
+TakaUI components use CSS variables for theming. You can customize colors in your global CSS:
+
+```css
+:root {
+  --primary: 220 90% 56%;
+  --primary-foreground: 0 0% 100%;
+  --destructive: 0 84% 60%;
+  /* Add more custom variables */
+}
+```
+
+## 🔧 TypeScript Support
+
+TakaUI is built with TypeScript and includes full type definitions. All props are fully typed for excellent IDE support.
+
+```tsx
+import type { CalendarProps, DatePickerProps } from '@ttianqii/takaui'
+```
+
+## 📦 Tree Shaking
+
+TakaUI supports tree shaking. Import only the components you need:
+
+```tsx
+// Good - Only imports Calendar
+import { Calendar } from '@ttianqii/takaui'
+
+// Also works - Named imports
+import { Calendar, TimePicker, DataTable } from '@ttianqii/takaui'
+```
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 📄 License
+
+MIT
+
+## 🔗 Links
+
+- [GitHub Repository](https://github.com/ttianqii/takaui)
+- [npm Package](https://www.npmjs.com/package/@ttianqii/takaui)
+
+## 📞 Support
+
+For issues and questions:
+
+- Open an issue on [GitHub](https://github.com/ttianqii/takaui/issues)
+- Check the [documentation](./docs/)
+
+## 🎯 Roadmap
+
+- [ ] Additional form components (Switch, Radio, Slider)
+- [ ] Chart components
+- [ ] Toast notifications
+- [ ] Command palette
+- [ ] Theme switcher
+- [ ] More data display components
+
+---
+
+Made with ❤️ by [@ttianqii](https://github.com/ttianqii)