diff --git a/.changeset/perfect-drinks-eat.md b/.changeset/perfect-drinks-eat.md new file mode 100644 index 0000000..84bf1be --- /dev/null +++ b/.changeset/perfect-drinks-eat.md @@ -0,0 +1,5 @@ +--- +"@codeui/kit": minor +--- + +Update kobalte version, refactor polymorphic types diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 87312ba..93bdd2a 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -12,13 +12,13 @@ jobs: node-version: [ 20.12.2 ] steps: - uses: actions/checkout@v3 - - uses: pnpm/action-setup@v3 + - uses: pnpm/action-setup@v4 with: - version: 8 - - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 + version: 9.5.0 + - name: Install Node.js + uses: actions/setup-node@v4 with: - node-version: ${{ matrix.node-version }} + node-version: 20 cache: 'pnpm' - name: Creating .npmrc @@ -32,6 +32,9 @@ jobs: - name: Install Dependencies run: pnpm install + - name: Build deps + run: pnpm build + - name: Publish to npm id: changesets uses: changesets/action@v1 diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 439ee2b..d2f5b28 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -10,28 +10,20 @@ jobs: node-version: [ 20.12.2 ] steps: - uses: actions/checkout@v3 - - uses: pnpm/action-setup@v3 + - uses: pnpm/action-setup@v4 with: - version: 8 - - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 + version: 9.5.0 + - name: Install Node.js + uses: actions/setup-node@v4 with: - node-version: ${{ matrix.node-version }} + node-version: 20 cache: 'pnpm' - - uses: pnpm/action-setup@v2.2.2 - - - name: Setup Node.js environment ${{ matrix.node-version }} - uses: actions/setup-node@v3 - with: - node-version: ${{ matrix.node-version }} - cache: pnpm - - name: Install dependencies run: pnpm install - # - name: Run Build and Tests - # run: pnpm run build-test + - name: Build + run: pnpm run build env: CI: true diff --git a/.github/workflows/version.yml b/.github/workflows/version.yml index a476ab1..af7b211 100644 --- a/.github/workflows/version.yml +++ b/.github/workflows/version.yml @@ -15,23 +15,15 @@ jobs: node-version: [ 20.12.2 ] steps: - uses: actions/checkout@v3 - - uses: pnpm/action-setup@v3 + - uses: pnpm/action-setup@v4 with: - version: 8 - - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 + version: 9.5.0 + - name: Install Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} cache: 'pnpm' - - uses: pnpm/action-setup@v2.2.2 - - - name: Setup Node.js environment ${{ matrix.node-version }} - uses: actions/setup-node@v3 - with: - node-version: ${{ matrix.node-version }} - cache: pnpm - - name: Install dependencies run: pnpm install diff --git a/package.json b/package.json index d0c38ea..3efd4d3 100644 --- a/package.json +++ b/package.json @@ -23,26 +23,26 @@ "prepublish": "pnpm build" }, "devDependencies": { - "@babel/core": "^7.24.4", - "@babel/preset-env": "^7.24.4", - "@changesets/cli": "^2.27.1", + "@babel/core": "^7.25.2", + "@babel/preset-env": "^7.25.4", + "@changesets/cli": "^2.27.8", "@jest/types": "^29.6.3", - "@types/jest": "^29.5.12", - "@types/node": "^18.19.31", - "babel-preset-solid": "^1.8.17", - "prettier": "2.8.2", - "rollup": "^3.29.4", + "@types/jest": "^29.5.13", + "@types/node": "^22.5.4", + "babel-preset-solid": "^1.8.22", + "prettier": "3.3.3", + "rollup": "^4.21.3", "rollup-preset-solid": "^2.0.1", - "solid-js": "^1.8.17", - "taze": "^0.9.2", - "ts-jest": "^29.1.2", - "turbo": "^1.13.3", - "typescript": "^4.9.5", - "vite": "^4.5.3", + "solid-js": "^1.8.22", + "taze": "^0.16.8", + "ts-jest": "^29.2.5", + "turbo": "^2.1.1", + "typescript": "^5.6.2", + "vite": "^5.4.4", "vite-plugin-solid": "^2.10.2" }, - "packageManager": "pnpm@8.15.7", + "packageManager": "pnpm@9.5.0", "dependencies": { - "@changesets/changelog-git": "^0.1.14" + "@changesets/changelog-git": "^0.2.0" } } diff --git a/packages/kit/package.json b/packages/kit/package.json index 288b716..cced655 100644 --- a/packages/kit/package.json +++ b/packages/kit/package.json @@ -55,38 +55,38 @@ }, "devDependencies": { "@codeui/vanilla-extract": "workspace:*", - "@testing-library/jest-dom": "^5.17.0", + "@testing-library/jest-dom": "^6.5.0", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", - "rollup": "^4.17.0", + "rollup": "^4.21.3", "rollup-preset-solid": "^2.0.1", - "solid-js": "^1.8.17", + "solid-js": "^1.8.22", "solid-testing-library": "^0.5.1", "ts-node": "^10.9.2", - "typescript": "^5.4.5", - "vite-tsconfig-paths": "^4.3.2" + "typescript": "^5.6.2", + "vite-tsconfig-paths": "^5.0.1" }, "peerDependencies": { "solid-js": "^1.7.0" }, "packageManager": "pnpm@7.33.7", "dependencies": { - "@kobalte/core": "^0.12.6", - "@kobalte/utils": "^0.9.0", + "@kobalte/core": "^0.13.6", + "@kobalte/utils": "^0.9.1", "@kobalte/vanilla-extract": "^0.5.0", - "@maskito/core": "^2.3.1", - "@maskito/kit": "^2.3.1", + "@maskito/core": "^3.0.1", + "@maskito/kit": "^3.0.1", "@motionone/solid": "^10.16.4", - "@radix-ui/colors": "^0.1.9", + "@radix-ui/colors": "^3.0.0", "@solid-primitives/pagination": "^0.3.0", "@solid-primitives/scheduled": "^1.4.3", - "@tanstack/solid-virtual": "^3.4.0", - "@tanstack/virtual-core": "^3.4.0", - "@vanilla-extract/css": "^1.14.2", - "@vanilla-extract/dynamic": "^2.1.0", - "@vanilla-extract/recipes": "^0.5.2", - "@vanilla-extract/vite-plugin": "^4.0.7", - "motion": "^10.17.0", + "@tanstack/solid-virtual": "^3.10.7", + "@tanstack/virtual-core": "^3.10.7", + "@vanilla-extract/css": "^1.15.5", + "@vanilla-extract/dynamic": "^2.1.2", + "@vanilla-extract/recipes": "^0.5.5", + "@vanilla-extract/vite-plugin": "^4.0.15", + "motion": "^10.18.0", "polished": "^4.3.1", "statebuilder": "^0.6.0" } diff --git a/packages/kit/src/components/Button/Button.tsx b/packages/kit/src/components/Button/Button.tsx index 2085fa6..ef4e954 100644 --- a/packages/kit/src/components/Button/Button.tsx +++ b/packages/kit/src/components/Button/Button.tsx @@ -1,23 +1,25 @@ -import { Button as KButton } from "@kobalte/core"; -import { JSX, Show, splitProps } from "solid-js"; +import { Button as KButton, ButtonRootProps as KButtonRootProps } from "@kobalte/core/button"; +import { JSX, Show, splitProps, ValidComponent } from "solid-js"; import * as styles from "./Button.css"; import { mergeClasses } from "../../utils/css"; import { ButtonIcon } from "./ButtonIcon"; import { Loading } from "./Loading"; +import { PolymorphicProps } from "@kobalte/core/polymorphic"; -export type ButtonProps = KButton.ButtonRootProps & +export type ButtonProps = KButtonRootProps & styles.ButtonVariants & { - class?: string; - leftIcon?: JSX.Element; - loading?: boolean; - }; + class?: string; + leftIcon?: JSX.Element; + loading?: boolean; +}; -export function Button(props: ButtonProps) { +export function Button(props: PolymorphicProps>) { const [local, internal, others] = splitProps( - props, + props as PolymorphicProps<"button", ButtonProps>, ["size", "theme", "pill", "block", "variant", "loading"], ["class", "children", "leftIcon"], ); + const classes = () => mergeClasses( styles.button({ @@ -32,7 +34,7 @@ export function Button(props: ButtonProps) { ); return ( - {internal.leftIcon} {internal.children} - + ); } diff --git a/packages/kit/src/components/CheckBox/CheckBox.tsx b/packages/kit/src/components/CheckBox/CheckBox.tsx index 3625844..3b661cc 100644 --- a/packages/kit/src/components/CheckBox/CheckBox.tsx +++ b/packages/kit/src/components/CheckBox/CheckBox.tsx @@ -1,4 +1,4 @@ -import { Checkbox as KCheckbox } from "@kobalte/core"; +import { Checkbox as KCheckbox, CheckboxRootOptions } from "@kobalte/core/checkbox"; import { JSX, Ref, Show, splitProps } from "solid-js"; import * as styles from "./CheckBox.css"; import { BaseFieldProps } from "../Field/createBaseFieldProps"; @@ -13,7 +13,7 @@ import { createFieldMessageProps } from "../Field/FieldMessage/createFieldMessag type CheckBoxSlot = "root" | "input" | "label" | "errorLabel" | "control"; -export type CheckBoxProps = KCheckbox.CheckboxRootOptions & +export type CheckBoxProps = CheckboxRootOptions & BaseFieldProps & FieldWithErrorMessageSupport & SlotProp & { @@ -49,7 +49,7 @@ export function Checkbox(props: CheckBoxProps) { ); return ( - - + ); } diff --git a/packages/kit/src/components/Dialog/Dialog.tsx b/packages/kit/src/components/Dialog/Dialog.tsx index a013890..765cf6b 100644 --- a/packages/kit/src/components/Dialog/Dialog.tsx +++ b/packages/kit/src/components/Dialog/Dialog.tsx @@ -1,14 +1,14 @@ -import { As, Dialog as KDialog } from "@kobalte/core"; +import { Dialog as KDialog, DialogRootOptions as KDialogRootOptions } from "@kobalte/core/dialog"; import { JSXElement, ParentProps, Show, splitProps } from "solid-js"; import * as styles from "./Dialog.css"; import { mergeClasses } from "../../utils/css"; import { IconButton } from "../IconButton/IconButton"; -import { CloseIcon } from "../../icons/CloseIcon"; +import { CloseIcon } from "../../icons"; -export type DialogProps = KDialog.DialogRootOptions & +export type DialogProps = KDialogRootOptions & styles.DialogPanelVariants & { - title?: string; - }; + title?: string; +}; export function DialogPanelContent(props: ParentProps): JSXElement { return
{props.children}
; @@ -37,7 +37,7 @@ export function DialogPanel(props: ParentProps): JSXElement { export function Dialog(props: ParentProps) { const [local, others] = splitProps(props, ["size", "children", "title"]); return ( - +
@@ -45,15 +45,12 @@ export function Dialog(props: ParentProps) {
{props.title} - - - - + +
@@ -61,6 +58,6 @@ export function Dialog(props: ParentProps) {
- + ); } diff --git a/packages/kit/src/components/Dropdown/Dropdown.tsx b/packages/kit/src/components/Dropdown/Dropdown.tsx index 43a1408..ce06fd5 100644 --- a/packages/kit/src/components/Dropdown/Dropdown.tsx +++ b/packages/kit/src/components/Dropdown/Dropdown.tsx @@ -1,9 +1,20 @@ import { GetKobalteParams } from "../../utils/types"; -import { DropdownMenu as KDropdownMenu } from "@kobalte/core"; +import { + DropdownMenu as KDropdownMenu, + DropdownMenuContentProps as KDropdownMenuContentProps, + DropdownMenuItemProps as KDropdownMenuItemProps, + DropdownMenuRootProps as KDropdownMenuRootProps, + DropdownMenuSeparatorProps as KDropdownMenuSeparatorProps, + DropdownMenuSubContentProps as KDropdownMenuSubContentProps, + DropdownMenuSubProps as KDropdownMenuSubProps, + DropdownMenuSubTriggerProps as KDropdownMenuSubTriggerProps, + DropdownMenuTriggerProps as KDropdownMenuTriggerProps, +} from "@kobalte/core/dropdown-menu"; import * as styles from "./Dropdown.css"; -import { JSX, JSXElement, Show, splitProps } from "solid-js"; +import { JSXElement, Show, splitProps, ValidComponent } from "solid-js"; +import { PolymorphicProps } from "@kobalte/core/polymorphic"; -export function DropdownMenuContent(props: KDropdownMenu.DropdownMenuContentProps) { +export function DropdownMenuContent(props: PolymorphicProps>) { return ; } @@ -11,12 +22,14 @@ export function DropdownMenuPortal(props: GetKobalteParams; } -export function DropdownMenuItem( - props: KDropdownMenu.DropdownMenuItemProps & { - rightSlot?: JSXElement; - }, +export interface DropdownMenuItemProps extends KDropdownMenuItemProps { + rightSlot?: JSXElement; +} + +export function DropdownMenuItem( + props: PolymorphicProps>, ) { - const [local, others] = splitProps(props, ["rightSlot", "children"]); + const [local, others] = splitProps(props as PolymorphicProps<"div", DropdownMenuItemProps>, ["rightSlot", "children"]); return ( @@ -28,20 +41,24 @@ export function DropdownMenuItem( ); } -export function DropdownSubMenu( - props: KDropdownMenu.DropdownMenuSubProps & { - rightSlot?: JSXElement; - }, +export interface DropdownSubMenuProps extends KDropdownMenuSubProps { + rightSlot?: JSXElement; +} + +export function DropdownSubMenu( + props: PolymorphicProps>, ) { return ; } -export function DropdownSubMenuTrigger( - props: KDropdownMenu.DropdownMenuSubTriggerProps & { - rightSlot: JSX.Element; - }, +export interface DropdownSubMenuTriggerProps extends KDropdownMenuSubTriggerProps { + rightSlot?: JSXElement; +} + +export function DropdownSubMenuTrigger( + props: PolymorphicProps>, ) { - const [local, others] = splitProps(props, ["rightSlot", "children"]); + const [local, others] = splitProps(props as PolymorphicProps<"button", DropdownSubMenuTriggerProps>, ["rightSlot", "children"]); return ( @@ -53,18 +70,18 @@ export function DropdownSubMenuTrigger( ); } -export function DropdownSubMenuContent(props: KDropdownMenu.DropdownMenuSubContentProps) { +export function DropdownSubMenuContent(props: PolymorphicProps>) { return ; } -export function DropdownMenuSeparator(props: KDropdownMenu.DropdownMenuSeparatorProps) { +export function DropdownMenuSeparator(props: PolymorphicProps>) { return ; } -export function DropdownMenuTrigger(props: KDropdownMenu.DropdownMenuTriggerProps) { +export function DropdownMenuTrigger(props: PolymorphicProps>) { return ; } -export function DropdownMenu(props: KDropdownMenu.DropdownMenuRootProps) { - return ; +export function DropdownMenu(props: PolymorphicProps) { + return ; } diff --git a/packages/kit/src/components/IconButton/IconButton.tsx b/packages/kit/src/components/IconButton/IconButton.tsx index 52d4959..77c9e9b 100644 --- a/packages/kit/src/components/IconButton/IconButton.tsx +++ b/packages/kit/src/components/IconButton/IconButton.tsx @@ -1,23 +1,26 @@ import { mergeClasses } from "../../utils/css"; -import { Button, ButtonProps as CoreButtonProps } from "../Button/Button"; -import { ParentProps, splitProps } from "solid-js"; +import { Button } from "../Button/Button"; +import { splitProps, ValidComponent } from "solid-js"; import * as styles from "./IconButton.css"; +import { PolymorphicProps } from "@kobalte/core/polymorphic"; +import { ButtonRootProps as KButtonRootProps } from "@kobalte/core/button"; +import { type ButtonVariants } from "../Button/Button.css"; -export type IconButtonProps = Omit< - CoreButtonProps & { - "aria-label": string; - }, - "leftIcon" ->; +export type IconButtonProps = KButtonRootProps & + ButtonVariants & { + class?: string; + loading?: boolean; + "aria-label": string; +}; -export function IconButton(props: ParentProps) { +export function IconButton(props: PolymorphicProps>) { const [local, others] = splitProps(props, ["class"]); return (