Merge pull request #249 from softnetics/supakorn/migrate/components

migrate `date-picker`, `time-input` and more fixes

Author: SupakornNetsuwan

.changeset/gold-jars-exercise.md

@@ -0,0 +1,19 @@
+---
+"@example/erp": patch
+"@example/ui-playground": patch
+"@genseki/react": patch
+---
+
+migrate `date-picker`, `time-input` and more fixes
+
+1. `typography` component now in the `v2`
+2. Add example for server side sidebar toggle state as a default value (Via data hydration)
+3. Fix `breadcrumb` focus ring color
+4. Fix `sidebar-footer` example, focus ring color.
+5. Fix `group-input-addon` focusing state
+6. Fix `group-input` disable background color
+7. Change button variant `default` to `md`
+8. Make `button-section` and `input-section` default background color to secondary color, so background color of input will be noticable
+9. Add `date-picker` examples (at `date-picker-section`)
+10. Add `time-input` examples (at `input-section`)
+11. New dependencies `date-fns` for `@example/ui-playground` and `react-day-picker` as a peer dependency for `@genseki/react`

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

@@ -1,4 +1,4 @@
-import { Typography } from '@genseki/react'
+import { Typography } from '@genseki/react/v2'
 
 import { SetupClientForm } from './setup.client'
 

examples/ui-playground/package.json

@@ -21,10 +21,12 @@
     "@tailwindcss/postcss": "^4.1.7",
     "@tanstack/react-query": "^5.71.5",
     "@tiptap/starter-kit": "^2.26.3",
+    "date-fns": "^4.1.0",
     "next": "15.2.2",
     "next-themes": "^0.4.6",
     "postcss": "^8.5.3",
     "react": "19.1.0",
+    "react-day-picker": "^9.11.1",
     "react-dom": "19.1.0",
     "tailwindcss": "^4.1.7",
     "zod": "4.0.11"

examples/ui-playground/src/app/playground/shadcn/button-section.tsx

@@ -15,8 +15,13 @@ import {
   SortDescendingIcon,
 } from '@phosphor-icons/react'
 
-import { Typography } from '@genseki/react'
-import { Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from '@genseki/react/v2'
+import {
+  Button,
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  Typography,
+} from '@genseki/react/v2'
 
 import { PlaygroundCard } from '~/src/components/card'
 
@@ -68,7 +73,7 @@ function ButtonSizes() {
         <MagnifyingGlassIcon />
         Small
       </Button>
-      <Button size="default">
+      <Button size="md">
         <MagnifyingGlassIcon />
         Default
       </Button>
@@ -270,7 +275,7 @@ export function ButtonSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           Different button variants with various styles and purposes.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <ButtonVariants />
         </div>
       </PlaygroundCard>
@@ -279,7 +284,7 @@ export function ButtonSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           Buttons come in three sizes: small, default, and large.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <ButtonSizes />
         </div>
       </PlaygroundCard>
@@ -288,7 +293,7 @@ export function ButtonSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           Icon-only buttons in different sizes.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <IconButtons />
         </div>
       </PlaygroundCard>
@@ -297,7 +302,7 @@ export function ButtonSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           Buttons with icons alongside text labels.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <ButtonsWithIcons />
         </div>
       </PlaygroundCard>
@@ -306,7 +311,7 @@ export function ButtonSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           Buttons can be disabled or show a pending/loading state.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <ButtonStates />
         </div>
       </PlaygroundCard>
@@ -315,7 +320,7 @@ export function ButtonSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           A button that shows loading state during async operations.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <LoadingButton />
         </div>
       </PlaygroundCard>
@@ -324,7 +329,7 @@ export function ButtonSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           A simple button group with connected buttons.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <ButtonGroupBasic />
         </div>
       </PlaygroundCard>
@@ -333,7 +338,7 @@ export function ButtonSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           Button groups with separators between buttons for visual distinction.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <ButtonGroupWithSeparators />
         </div>
       </PlaygroundCard>
@@ -342,7 +347,7 @@ export function ButtonSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           Button groups with text labels and icons for better context.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <ButtonGroupWithText />
         </div>
       </PlaygroundCard>
@@ -351,7 +356,7 @@ export function ButtonSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           Vertical button groups for stacked layouts.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <ButtonGroupVertical />
         </div>
       </PlaygroundCard>
@@ -360,7 +365,7 @@ export function ButtonSection() {
         <Typography type="body" className="text-muted-foreground mb-4">
           Button groups with different button variants mixed together.
         </Typography>
-        <div className="p-4 bg-background w-full rounded-lg">
+        <div className="p-4 bg-secondary w-full rounded-lg">
           <ButtonGroupVariants />
         </div>
       </PlaygroundCard>

examples/ui-playground/src/app/playground/shadcn/collapsible-section.tsx

@@ -11,8 +11,7 @@ import {
   VideoIcon,
 } from '@phosphor-icons/react'
 
-import { Typography } from '@genseki/react'
-import { Button } from '@genseki/react/v2'
+import { Button, Typography } from '@genseki/react/v2'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@genseki/react/v2'
 
 import { PlaygroundCard } from '~/src/components/card'

examples/ui-playground/src/app/playground/shadcn/combobox-section.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 
 import { CheckIcon } from '@phosphor-icons/react'
 
-import { Typography } from '@genseki/react'
 import {
   Button,
   ComboboxCommandEmpty,
@@ -14,6 +13,7 @@ import {
   ComboboxProvider,
   ComboboxTrigger,
   ComboboxTriggerMultiValue,
+  Typography,
 } from '@genseki/react/v2'
 
 import { PlaygroundCard } from '~/src/components/card'