Update kobalte version, refactor polymorphic types, update dependenci…

…es, fix storybook (#60) * docs(changeset): Update kobalte version, refactor polymorphic types * update kobalte, polymorphic types, all project versions
riccardoperra · Sep 12, 2024 · a7f3fd7 · a7f3fd7
1 parent e39bbba
commit a7f3fd7
Show file tree

Hide file tree

Showing 34 changed files with 7,449 additions and 10,186 deletions.
diff --git a/.changeset/perfect-drinks-eat.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<T extends ValidComponent = "button"> = KButtonRootProps<T> &
 	styles.ButtonVariants & {
-		class?: string;
-		leftIcon?: JSX.Element;
-		loading?: boolean;
-	};
+	class?: string;
+	leftIcon?: JSX.Element;
+	loading?: boolean;
+};
 
-export function Button(props: ButtonProps) {
+export function Button<T extends ValidComponent = "button">(props: PolymorphicProps<T, ButtonProps<T>>) {
 	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 (
-		<KButton.Root
+		<KButton
 			data-cui="button"
 			data-theme={local.theme}
 			data-size={local.size}
@@ -47,6 +49,6 @@ export function Button(props: ButtonProps) {
 				<ButtonIcon>{internal.leftIcon}</ButtonIcon>
 			</Show>
 			{internal.children}
-		</KButton.Root>
+		</KButton>
 	);
 }
diff --git 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<CheckBoxSlot> & {
@@ -49,7 +49,7 @@ export function Checkbox(props: CheckBoxProps) {
 		);
 
 	return (
-		<KCheckbox.Root
+		<KCheckbox
 			data-cui={"checkbox"}
 			data-field-size={local.size}
 			class={mergeClasses(styles.container, local?.slotClasses?.root)}
@@ -81,6 +81,6 @@ export function Checkbox(props: CheckBoxProps) {
 					</KCheckbox.ErrorMessage>
 				</Show>
 			</div>
-		</KCheckbox.Root>
+		</KCheckbox>
 	);
 }
diff --git 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 <div data-cui="dialog-panel-content" class={styles.panelContent}>{props.children}</div>;
@@ -37,30 +37,27 @@ export function DialogPanel(props: ParentProps<DialogPanelProps>): JSXElement {
 export function Dialog(props: ParentProps<DialogProps>) {
 	const [local, others] = splitProps(props, ["size", "children", "title"]);
 	return (
-		<KDialog.Root {...others} data-cui="cui-dialog-root">
+		<KDialog {...others} data-cui="cui-dialog-root">
 			<KDialog.Portal>
 				<KDialog.Overlay class={styles.overlay} />
 				<div class={mergeClasses(styles.dialogTheme, styles.positioner)} data-panel-size={local.size}>
 					<DialogPanel size={local.size}>
 						<Show when={local.title} keyed={false}>
 							<div class={styles.title} data-cui="dialog-panel-title">
 								<KDialog.Title>{props.title}</KDialog.Title>
-								<KDialog.CloseButton asChild>
-									<As
-										component={IconButton}
-										theme={"secondary"}
-										size={"xs"}
-										aria-label={"close"}
-									>
-										<CloseIcon />
-									</As>
+								<KDialog.CloseButton
+									as={IconButton}
+									aria-label={'close'}
+									size={'xs'}
+									theme={'secondary'}>
+									<CloseIcon/>
 								</KDialog.CloseButton>
 							</div>
 						</Show>
 						{local.children}
 					</DialogPanel>
 				</div>
 			</KDialog.Portal>
-		</KDialog.Root>
+		</KDialog>
 	);
 }