diff --git a/.changeset/better-impalas-join.md b/.changeset/better-impalas-join.md new file mode 100644 index 00000000..34bee49f --- /dev/null +++ b/.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)__ \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index 7722ce3f..29d9fb3a 100644 --- a/.vscode/settings.json +++ b/.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\\(.*?\\)(?!\\])", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"], diff --git a/examples/erp/genseki/auth/setup/setup.client.tsx b/examples/erp/genseki/auth/setup/setup.client.tsx index 6b6b9a23..fb5b78aa 100644 --- a/examples/erp/genseki/auth/setup/setup.client.tsx +++ b/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 }) => ( - ( - ( - ( - { } = useFormContext() const { navigate } = useNavigation() - const handleCancel = () => { + const handleCancel: React.MouseEventHandler = (e) => { if ((isDirty && confirm('You have unsaved changes, sure to leave?')) || !isDirty) return navigate('./') } return ( - ) @@ -310,7 +310,9 @@ export const CustomCreatePage = () => { .join(',') ) - const handleSubmit: SubmitHandler = (data) => mutation.mutateAsync(data) + const handleSubmit: SubmitHandler = (data) => { + mutation.mutateAsync(data) + } return ( diff --git a/examples/ui-playground/src/app/layout.tsx b/examples/ui-playground/src/app/layout.tsx index 335ddb43..ca1a4114 100644 --- a/examples/ui-playground/src/app/layout.tsx +++ b/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' diff --git a/examples/ui-playground/src/app/playground/layout.tsx b/examples/ui-playground/src/app/playground/layout.tsx deleted file mode 100644 index 1118b52f..00000000 --- a/examples/ui-playground/src/app/playground/layout.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import './tailwind.css' - -export default function Layout({ children }: { children: React.ReactNode }) { - return children -} diff --git a/examples/ui-playground/src/app/playground/page.tsx b/examples/ui-playground/src/app/playground/page.tsx index a2a8f38e..1b2cd894 100644 --- a/examples/ui-playground/src/app/playground/page.tsx +++ b/examples/ui-playground/src/app/playground/page.tsx @@ -24,11 +24,31 @@ import { useTheme } from 'next-themes' import { Annotation, + AriaButton, + AriaButtonGroup, + AriaButtonGroupItem, + AriaModal, + AriaModalBody, + AriaModalClose, + AriaModalContent, + AriaModalDescription, + AriaModalFooter, + AriaModalHeader, + AriaModalTitle, + AriaModalTrigger, + AriaPopover, + AriaPopoverBody, + AriaPopoverClose, + AriaPopoverContent, + AriaPopoverDescription, + AriaPopoverFooter, + AriaPopoverHeader, + AriaPopoverTitle, + AriaTextarea, + AriaTextField, Avatar, Breadcrumbs, BreadcrumbsItem, - ButtonGroup, - ButtonGroupItem, Card, Link, PageSizeSelect, @@ -50,8 +70,6 @@ import { Tag, TagGroup, TagList, - Textarea, - TextField, TimeField, ToggleGroup, Toolbar, @@ -74,28 +92,7 @@ import { DateField } from '@genseki/react' import { DatePicker } from '@genseki/react' import { ListBox, ListBoxItem, ListBoxItemDetails, ListBoxSection } from '@genseki/react' import { Menu, MenuContent, MenuItem } from '@genseki/react' -import { - Modal, - ModalBody, - ModalClose, - ModalContent, - ModalDescription, - ModalFooter, - ModalHeader, - ModalTitle, - ModalTrigger, -} from '@genseki/react' import { MultipleSelect, MultipleSelectItem } from '@genseki/react' -import { - Popover, - PopoverBody, - PopoverClose, - PopoverContent, - PopoverDescription, - PopoverFooter, - PopoverHeader, - PopoverTitle, -} from '@genseki/react' import { RangeCalendar } from '@genseki/react' import { Select, @@ -107,8 +104,8 @@ import { SelectTrigger, } from '@genseki/react' -import { PlaygroundCard } from './_components/card' -import { Wrapper } from './_components/wrapper' +import { PlaygroundCard } from '../../components/card' +import { Wrapper } from '../../components/wrapper' const MOCK_OPTIONS = [ { id: 1, name: 'Admin', description: 'Has full access to all resources' }, @@ -316,15 +313,14 @@ export default function UIPlayground() { return (
-
xxxx
- +
@@ -470,10 +466,10 @@ export default function UIPlayground() { Spell Check - + @@ -679,84 +675,86 @@ export default function UIPlayground() { - - + + Confirm - - + - - Delete file - + + Delete file + This will permanently delete the selected file. Continue? - - - - + + + + Cancel - - + + Delete - - - - + + + + - - + + Turn on 2FA - - - - Nice! Let's beef up your account. - + + + + Nice! Let's beef up your account. + 2FA beefs up your account's defense. Pop in your password to keep going. - - + +
- - + - - - + + + Cancel - - - + +
- - + +
- - - - - Login - Enter your credentials to sign in. - + + + + Login + + Enter your credentials to sign in. + +
{}} className="w-[400px]"> - +
- -
- - - + + + Cancel - - - + + - - + + - - - - - Email - We'll send you an email to log in. - - - + + + + Email + + We'll send you an email to log in. + + + + - - - - - Popover Title - Lorem ipsum dolor sit amet - - + + + + Popover Title + Lorem ipsum dolor sit amet + + Popover Body | Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, temporibus. - - - + + + Close - - + + Confirm - - - - + + + +
@@ -1085,7 +1085,7 @@ export default function UIPlayground() {
{}} /> - - } size="xs" /> - - - } /> - } /> - - + } /> - - +
@@ -1169,14 +1169,14 @@ export default function UIPlayground() {
-