Skip to content

Commit a7f3fd7

Browse files
riccardoperrariccardoperra
authored
Update kobalte version, refactor polymorphic types, update dependencies, fix storybook (#60)
* docs(changeset): Update kobalte version, refactor polymorphic types * update kobalte, polymorphic types, all project versions
1 parent e39bbba commit a7f3fd7

34 files changed

+7449
-10186
lines changed

‎.changeset/perfect-drinks-eat.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@codeui/kit": minor
3+
---
4+
5+
Update kobalte version, refactor polymorphic types

‎.github/workflows/release.yml

+8-5
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@ jobs:
1212
node-version: [ 20.12.2 ]
1313
steps:
1414
- uses: actions/checkout@v3
15-
- uses: pnpm/action-setup@v3
15+
- uses: pnpm/action-setup@v4
1616
with:
17-
version: 8
18-
- name: Use Node.js ${{ matrix.node-version }}
19-
uses: actions/setup-node@v3
17+
version: 9.5.0
18+
- name: Install Node.js
19+
uses: actions/setup-node@v4
2020
with:
21-
node-version: ${{ matrix.node-version }}
21+
node-version: 20
2222
cache: 'pnpm'
2323

2424
- name: Creating .npmrc
@@ -32,6 +32,9 @@ jobs:
3232
- name: Install Dependencies
3333
run: pnpm install
3434

35+
- name: Build deps
36+
run: pnpm build
37+
3538
- name: Publish to npm
3639
id: changesets
3740
uses: changesets/action@v1

‎.github/workflows/tests.yml

+7-15
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,20 @@ jobs:
1010
node-version: [ 20.12.2 ]
1111
steps:
1212
- uses: actions/checkout@v3
13-
- uses: pnpm/action-setup@v3
13+
- uses: pnpm/action-setup@v4
1414
with:
15-
version: 8
16-
- name: Use Node.js ${{ matrix.node-version }}
17-
uses: actions/setup-node@v3
15+
version: 9.5.0
16+
- name: Install Node.js
17+
uses: actions/setup-node@v4
1818
with:
19-
node-version: ${{ matrix.node-version }}
19+
node-version: 20
2020
cache: 'pnpm'
2121

22-
- uses: pnpm/[email protected]
23-
24-
- name: Setup Node.js environment ${{ matrix.node-version }}
25-
uses: actions/setup-node@v3
26-
with:
27-
node-version: ${{ matrix.node-version }}
28-
cache: pnpm
29-
3022
- name: Install dependencies
3123
run: pnpm install
3224

33-
# - name: Run Build and Tests
34-
# run: pnpm run build-test
25+
- name: Build
26+
run: pnpm run build
3527

3628
env:
3729
CI: true

‎.github/workflows/version.yml

+4-12
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,15 @@ jobs:
1515
node-version: [ 20.12.2 ]
1616
steps:
1717
- uses: actions/checkout@v3
18-
- uses: pnpm/action-setup@v3
18+
- uses: pnpm/action-setup@v4
1919
with:
20-
version: 8
21-
- name: Use Node.js ${{ matrix.node-version }}
22-
uses: actions/setup-node@v3
20+
version: 9.5.0
21+
- name: Install Node.js ${{ matrix.node-version }}
22+
uses: actions/setup-node@v4
2323
with:
2424
node-version: ${{ matrix.node-version }}
2525
cache: 'pnpm'
2626

27-
- uses: pnpm/[email protected]
28-
29-
- name: Setup Node.js environment ${{ matrix.node-version }}
30-
uses: actions/setup-node@v3
31-
with:
32-
node-version: ${{ matrix.node-version }}
33-
cache: pnpm
34-
3527
- name: Install dependencies
3628
run: pnpm install
3729

‎package.json

+16-16
Original file line numberDiff line numberDiff line change
@@ -23,26 +23,26 @@
2323
"prepublish": "pnpm build"
2424
},
2525
"devDependencies": {
26-
"@babel/core": "^7.24.4",
27-
"@babel/preset-env": "^7.24.4",
28-
"@changesets/cli": "^2.27.1",
26+
"@babel/core": "^7.25.2",
27+
"@babel/preset-env": "^7.25.4",
28+
"@changesets/cli": "^2.27.8",
2929
"@jest/types": "^29.6.3",
30-
"@types/jest": "^29.5.12",
31-
"@types/node": "^18.19.31",
32-
"babel-preset-solid": "^1.8.17",
33-
"prettier": "2.8.2",
34-
"rollup": "^3.29.4",
30+
"@types/jest": "^29.5.13",
31+
"@types/node": "^22.5.4",
32+
"babel-preset-solid": "^1.8.22",
33+
"prettier": "3.3.3",
34+
"rollup": "^4.21.3",
3535
"rollup-preset-solid": "^2.0.1",
36-
"solid-js": "^1.8.17",
37-
"taze": "^0.9.2",
38-
"ts-jest": "^29.1.2",
39-
"turbo": "^1.13.3",
40-
"typescript": "^4.9.5",
41-
"vite": "^4.5.3",
36+
"solid-js": "^1.8.22",
37+
"taze": "^0.16.8",
38+
"ts-jest": "^29.2.5",
39+
"turbo": "^2.1.1",
40+
"typescript": "^5.6.2",
41+
"vite": "^5.4.4",
4242
"vite-plugin-solid": "^2.10.2"
4343
},
44-
"packageManager": "pnpm@8.15.7",
44+
"packageManager": "pnpm@9.5.0",
4545
"dependencies": {
46-
"@changesets/changelog-git": "^0.1.14"
46+
"@changesets/changelog-git": "^0.2.0"
4747
}
4848
}

‎packages/kit/package.json

+17-17
Original file line numberDiff line numberDiff line change
@@ -55,38 +55,38 @@
5555
},
5656
"devDependencies": {
5757
"@codeui/vanilla-extract": "workspace:*",
58-
"@testing-library/jest-dom": "^5.17.0",
58+
"@testing-library/jest-dom": "^6.5.0",
5959
"jest": "^29.7.0",
6060
"jest-environment-jsdom": "^29.7.0",
61-
"rollup": "^4.17.0",
61+
"rollup": "^4.21.3",
6262
"rollup-preset-solid": "^2.0.1",
63-
"solid-js": "^1.8.17",
63+
"solid-js": "^1.8.22",
6464
"solid-testing-library": "^0.5.1",
6565
"ts-node": "^10.9.2",
66-
"typescript": "^5.4.5",
67-
"vite-tsconfig-paths": "^4.3.2"
66+
"typescript": "^5.6.2",
67+
"vite-tsconfig-paths": "^5.0.1"
6868
},
6969
"peerDependencies": {
7070
"solid-js": "^1.7.0"
7171
},
7272
"packageManager": "[email protected]",
7373
"dependencies": {
74-
"@kobalte/core": "^0.12.6",
75-
"@kobalte/utils": "^0.9.0",
74+
"@kobalte/core": "^0.13.6",
75+
"@kobalte/utils": "^0.9.1",
7676
"@kobalte/vanilla-extract": "^0.5.0",
77-
"@maskito/core": "^2.3.1",
78-
"@maskito/kit": "^2.3.1",
77+
"@maskito/core": "^3.0.1",
78+
"@maskito/kit": "^3.0.1",
7979
"@motionone/solid": "^10.16.4",
80-
"@radix-ui/colors": "^0.1.9",
80+
"@radix-ui/colors": "^3.0.0",
8181
"@solid-primitives/pagination": "^0.3.0",
8282
"@solid-primitives/scheduled": "^1.4.3",
83-
"@tanstack/solid-virtual": "^3.4.0",
84-
"@tanstack/virtual-core": "^3.4.0",
85-
"@vanilla-extract/css": "^1.14.2",
86-
"@vanilla-extract/dynamic": "^2.1.0",
87-
"@vanilla-extract/recipes": "^0.5.2",
88-
"@vanilla-extract/vite-plugin": "^4.0.7",
89-
"motion": "^10.17.0",
83+
"@tanstack/solid-virtual": "^3.10.7",
84+
"@tanstack/virtual-core": "^3.10.7",
85+
"@vanilla-extract/css": "^1.15.5",
86+
"@vanilla-extract/dynamic": "^2.1.2",
87+
"@vanilla-extract/recipes": "^0.5.5",
88+
"@vanilla-extract/vite-plugin": "^4.0.15",
89+
"motion": "^10.18.0",
9090
"polished": "^4.3.1",
9191
"statebuilder": "^0.6.0"
9292
}

‎packages/kit/src/components/Button/Button.tsx

+13-11
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
1-
import { Button as KButton } from "@kobalte/core";
2-
import { JSX, Show, splitProps } from "solid-js";
1+
import { Button as KButton, ButtonRootProps as KButtonRootProps } from "@kobalte/core/button";
2+
import { JSX, Show, splitProps, ValidComponent } from "solid-js";
33
import * as styles from "./Button.css";
44
import { mergeClasses } from "../../utils/css";
55
import { ButtonIcon } from "./ButtonIcon";
66
import { Loading } from "./Loading";
7+
import { PolymorphicProps } from "@kobalte/core/polymorphic";
78

8-
export type ButtonProps = KButton.ButtonRootProps &
9+
export type ButtonProps<T extends ValidComponent = "button"> = KButtonRootProps<T> &
910
styles.ButtonVariants & {
10-
class?: string;
11-
leftIcon?: JSX.Element;
12-
loading?: boolean;
13-
};
11+
class?: string;
12+
leftIcon?: JSX.Element;
13+
loading?: boolean;
14+
};
1415

15-
export function Button(props: ButtonProps) {
16+
export function Button<T extends ValidComponent = "button">(props: PolymorphicProps<T, ButtonProps<T>>) {
1617
const [local, internal, others] = splitProps(
17-
props,
18+
props as PolymorphicProps<"button", ButtonProps>,
1819
["size", "theme", "pill", "block", "variant", "loading"],
1920
["class", "children", "leftIcon"],
2021
);
22+
2123
const classes = () =>
2224
mergeClasses(
2325
styles.button({
@@ -32,7 +34,7 @@ export function Button(props: ButtonProps) {
3234
);
3335

3436
return (
35-
<KButton.Root
37+
<KButton
3638
data-cui="button"
3739
data-theme={local.theme}
3840
data-size={local.size}
@@ -47,6 +49,6 @@ export function Button(props: ButtonProps) {
4749
<ButtonIcon>{internal.leftIcon}</ButtonIcon>
4850
</Show>
4951
{internal.children}
50-
</KButton.Root>
52+
</KButton>
5153
);
5254
}

‎packages/kit/src/components/CheckBox/CheckBox.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Checkbox as KCheckbox } from "@kobalte/core";
1+
import { Checkbox as KCheckbox, CheckboxRootOptions } from "@kobalte/core/checkbox";
22
import { JSX, Ref, Show, splitProps } from "solid-js";
33
import * as styles from "./CheckBox.css";
44
import { BaseFieldProps } from "../Field/createBaseFieldProps";
@@ -13,7 +13,7 @@ import { createFieldMessageProps } from "../Field/FieldMessage/createFieldMessag
1313

1414
type CheckBoxSlot = "root" | "input" | "label" | "errorLabel" | "control";
1515

16-
export type CheckBoxProps = KCheckbox.CheckboxRootOptions &
16+
export type CheckBoxProps = CheckboxRootOptions &
1717
BaseFieldProps &
1818
FieldWithErrorMessageSupport &
1919
SlotProp<CheckBoxSlot> & {
@@ -49,7 +49,7 @@ export function Checkbox(props: CheckBoxProps) {
4949
);
5050

5151
return (
52-
<KCheckbox.Root
52+
<KCheckbox
5353
data-cui={"checkbox"}
5454
data-field-size={local.size}
5555
class={mergeClasses(styles.container, local?.slotClasses?.root)}
@@ -81,6 +81,6 @@ export function Checkbox(props: CheckBoxProps) {
8181
</KCheckbox.ErrorMessage>
8282
</Show>
8383
</div>
84-
</KCheckbox.Root>
84+
</KCheckbox>
8585
);
8686
}

‎packages/kit/src/components/Dialog/Dialog.tsx

+13-16
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { As, Dialog as KDialog } from "@kobalte/core";
1+
import { Dialog as KDialog, DialogRootOptions as KDialogRootOptions } from "@kobalte/core/dialog";
22
import { JSXElement, ParentProps, Show, splitProps } from "solid-js";
33
import * as styles from "./Dialog.css";
44
import { mergeClasses } from "../../utils/css";
55
import { IconButton } from "../IconButton/IconButton";
6-
import { CloseIcon } from "../../icons/CloseIcon";
6+
import { CloseIcon } from "../../icons";
77

8-
export type DialogProps = KDialog.DialogRootOptions &
8+
export type DialogProps = KDialogRootOptions &
99
styles.DialogPanelVariants & {
10-
title?: string;
11-
};
10+
title?: string;
11+
};
1212

1313
export function DialogPanelContent(props: ParentProps): JSXElement {
1414
return <div data-cui="dialog-panel-content" class={styles.panelContent}>{props.children}</div>;
@@ -37,30 +37,27 @@ export function DialogPanel(props: ParentProps<DialogPanelProps>): JSXElement {
3737
export function Dialog(props: ParentProps<DialogProps>) {
3838
const [local, others] = splitProps(props, ["size", "children", "title"]);
3939
return (
40-
<KDialog.Root {...others} data-cui="cui-dialog-root">
40+
<KDialog {...others} data-cui="cui-dialog-root">
4141
<KDialog.Portal>
4242
<KDialog.Overlay class={styles.overlay} />
4343
<div class={mergeClasses(styles.dialogTheme, styles.positioner)} data-panel-size={local.size}>
4444
<DialogPanel size={local.size}>
4545
<Show when={local.title} keyed={false}>
4646
<div class={styles.title} data-cui="dialog-panel-title">
4747
<KDialog.Title>{props.title}</KDialog.Title>
48-
<KDialog.CloseButton asChild>
49-
<As
50-
component={IconButton}
51-
theme={"secondary"}
52-
size={"xs"}
53-
aria-label={"close"}
54-
>
55-
<CloseIcon />
56-
</As>
48+
<KDialog.CloseButton
49+
as={IconButton}
50+
aria-label={'close'}
51+
size={'xs'}
52+
theme={'secondary'}>
53+
<CloseIcon/>
5754
</KDialog.CloseButton>
5855
</div>
5956
</Show>
6057
{local.children}
6158
</DialogPanel>
6259
</div>
6360
</KDialog.Portal>
64-
</KDialog.Root>
61+
</KDialog>
6562
);
6663
}

0 commit comments

Comments
 (0)