Migrate: textfield, button, label, dialog, sheet and more

.changeset/better-impalas-join.md

@@ -0,0 +1,34 @@
+---
+'@example/ui-playground': patch
+'@genseki/react': patch
+'@example/erp': patch
+---
+
+- Migrate from `tv` to `cva`
+- Introducing `create-required-context`
+- Incremental adopting Intent UI color system to Shadcn color system from 
+- Rename and deprecated react aria
+  - `textfield`
+  - `label`
+  - `button`
+  - `popover` _(with children composible components too)_
+  - `dialog` _(with children composible components too)_
+  - `modal` _(with children composible components too)_
+  - `sheet` _(with children composible components too)_
+  - `base-icon`
+  - `combobox` _(with children composible components too)_
+  - `field-group`
+- Migrate `textfield` to Shadcn _(Not completely 100% from entirely project perspective, since some compound component required react aria primitive component as a base, __the change will incrementally adopt__)_
+- Migrate `button` to Shadcn _(Not completely 100% from entirely project perspective, since some compound component required react aria primitive component as a base, __the change will incrementally adopt__)_
+- Create `Shadcn` UI playground  for Shadcn particularly
+- Change UI playground project structure
+- Introducing to new components by Shadcn
+  - Input
+  - Input group
+  - Button
+  - Label
+  - Dialog
+  - Menu
+  - Popover
+  - Combobox composition
+  - Command __(from cmdk)__

.vscode/settings.json

@@ -47,7 +47,7 @@
   "tailwindCSS.experimental.configFile": {
     "packages/react/src/react/styles/tailwind.css": "packages/react/**",
     "examples/erp/src/app/(admin)/admin/tailwind.css": "examples/erp/src/app/(admin)/admin/**",
-    "examples/ui-playground/src/app/playground/tailwind.css": "examples/ui-playground/**"
+    "examples/ui-playground/src/styles/tailwind.css": "examples/ui-playground/**"
   },
   "tailwindCSS.experimental.classRegex": [
     ["clsx\\(.*?\\)(?!\\])", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"],

examples/erp/genseki/auth/setup/setup.client.tsx

@@ -7,13 +7,13 @@ import { useRouter } from 'next/navigation'
 import z from 'zod'
 
 import {
+  AriaTextField,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormMessage,
   SubmitButton,
-  TextField,
   toast,
 } from '@genseki/react'
 
@@ -74,7 +74,7 @@ export function SetupClientForm() {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <TextField
+                <AriaTextField
                   {...field}
                   placeholder="full name..."
                   label="Full Name"
@@ -91,7 +91,7 @@ export function SetupClientForm() {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <TextField
+                <AriaTextField
                   {...field}
                   type="email"
                   placeholder="email..."
@@ -109,7 +109,7 @@ export function SetupClientForm() {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <TextField
+                <AriaTextField
                   {...field}
                   type="password"
                   placeholder="password..."
@@ -128,7 +128,7 @@ export function SetupClientForm() {
           render={({ field }) => (
             <FormItem>
               <FormControl>
-                <TextField
+                <AriaTextField
                   {...field}
                   type="password"
                   placeholder="confirm password..."

examples/erp/genseki/collections/posts.client.tsx

@@ -250,13 +250,13 @@ const CancelButton = ({ pending }: CancelButtonProps) => {
   } = useFormContext()
   const { navigate } = useNavigation()
 
-  const handleCancel = () => {
+  const handleCancel: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     if ((isDirty && confirm('You have unsaved changes, sure to leave?')) || !isDirty)
       return navigate('./')
   }
 
   return (
-    <Button size="md" variant="destruction" onClick={handleCancel} isDisabled={pending}>
+    <Button variant="destructive" onClick={handleCancel} disabled={pending}>
       {pending ? 'Submitting...' : 'Cancel'}
     </Button>
   )
@@ -310,7 +310,9 @@ export const CustomCreatePage = () => {
         .join(',')
     )
 
-  const handleSubmit: SubmitHandler<CreatePostFields> = (data) => mutation.mutateAsync(data)
+  const handleSubmit: SubmitHandler<CreatePostFields> = (data) => {
+    mutation.mutateAsync(data)
+  }
 
   return (
     <CreateFormLayout>

examples/ui-playground/src/app/layout.tsx

@@ -1,3 +1,5 @@
+import '../styles/tailwind.css'
+
 import type { Metadata } from 'next'
 import { Geist, Geist_Mono } from 'next/font/google'