feat(checkboxgroup): initial checkbox group

feat(data-table): initial datatable
feat(form): initial form
feat(form-item): initial form-item
feat(label): initial label

Author: Onlylonger

package.json

@@ -79,7 +79,11 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.15",
+    "@radix-ui/react-checkbox": "^1.3.2",
     "@shilong/utils": "^0.0.9",
+    "@tanstack/react-table": "^8.21.3",
+    "lucide-react": "^0.539.0",
+    "react-hook-form": "^7.62.0",
     "sonner": "^2.0.7"
   }
 }

playground/src/App.tsx

@@ -1,24 +1,62 @@
-import { Button, Input, Popover, Toaster, Tooltip, toast } from '@shilong/ui'
+import { CheckboxGroup, Input, FormItem, Form, Button } from '../../src'
+
+const options = [
+  {
+    label: '豆腐',
+    value: 'toufu',
+  },
+  {
+    label: '棉花糖',
+    value: 'mianhuatang',
+  },
+  {
+    label: '棉花糖2',
+    value: 'mianhuatang2',
+  },
+  {
+    label: '棉花糖3',
+    value: 'mianhuatang3',
+  },
+  {
+    label: '棉花糖4',
+    value: 'mianhuatang4',
+  },
+]
 
 export function App() {
   return (
     <>
-      <Input />
-      <Button onClick={() => toast('nih')}>Toast</Button>
-      <Toaster position="top-center" />
-      <Popover trigger={<Button>Trigger</Button>}>
-        <div>nihao</div>
-      </Popover>
-
-      <Popover trigger={<Button>Trigger1</Button>}>
-        <>nihao</>
-      </Popover>
-
-      <Tooltip trigger={<Button variant="outline">E</Button>} arrow>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores minus
-        suscipit distinctio asperiores vero molestias, quos rerum aliquid? Et
-        nulla ducimus, qui repudiandae culpa quod pariatur ipsam aut magni sint.
-      </Tooltip>
+      <div className="flex min-h-svh items-center justify-center">
+        <Form onSubmit={(v) => console.log(v)} className="max-w-[300px]">
+          <FormItem
+            label="Username"
+            name="username"
+            rules={{
+              required: '内容必填',
+            }}
+            render={<Input autoComplete="on" />}
+          />
+          <FormItem
+            label="Password"
+            name="password"
+            rules={{
+              required: 'message',
+            }}
+            render={<Input autoComplete="on" />}
+          />
+          <FormItem
+            label="like"
+            name="food"
+            rules={{
+              required: 'message',
+            }}
+            controlled
+            className="items-start"
+            render={<CheckboxGroup options={options} />}
+          />
+          <Button type="submit">Submit</Button>
+        </Form>
+      </div>
     </>
   )
 }

playground/src/index.tsx

@@ -1,11 +1,11 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import { App } from './App.tsx'
+import { App } from './App'
 import './style.css'
-import '@shilong/ui/style.css'
+import '../../src/global.css'
 
 createRoot(document.querySelector('#app')!).render(
   <StrictMode>
     <App />
-  </StrictMode>
+  </StrictMode>,
 )

playground/vite.config.ts

@@ -1,7 +1,8 @@
 import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
   root: './playground',
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
 })