Skip to content

Commit b87194f

Browse files
ryan-zayneryan-zayne
authored
Merge pull request #46 from zayne-labs/dev
feat: a lot of improvements made to the carousel and dropzone
2 parents 7cefacb + e2501b7 commit b87194f

30 files changed

Lines changed: 3193 additions & 3395 deletions

‎.changeset/light-bars-look.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
"@zayne-labs/ui-react": minor
3+
---
4+
5+
feat: a lot of improvements made to the carousel and dropzone
6+
refactor(drop-zone): ♻️ optimize drop-zone store and component structure
7+
8+
refactor(carousel): ♻️ replace getElementList with For component in carousel
9+
refactor(drag-scroll): ♻️ optimize useDragScroll with useCallback and useMemo
10+
refactor(slot): ♻️ update slot component implementation
11+
12+
chore: update dependencies and improve component structure
13+
14+
- Updated various dependencies in package.json and pnpm-lock.yaml for better compatibility and performance.
15+
- Refactored components in the ui-react package, including Carousel and DropZone, to enhance functionality and maintainability.
16+
- Adjusted props and types in Carousel and Form components for improved type safety and clarity.
17+
- Cleaned up imports and optimized component rendering logic.
18+
19+
fix(form): update FieldValues type to accept any and ensure compatibility with arrays

‎apps/dev/package.json‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,28 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13-
"@hookform/resolvers": "^5.1.0",
13+
"@hookform/resolvers": "^5.2.1",
1414
"@iconify/react": "^6.0.0",
15-
"@zayne-labs/callapi": "^1.8.2",
16-
"@zayne-labs/toolkit-core": "0.9.48",
17-
"@zayne-labs/toolkit-react": "0.9.48",
15+
"@zayne-labs/callapi": "^1.9.9",
16+
"@zayne-labs/toolkit-core": "0.10.8",
17+
"@zayne-labs/toolkit-react": "0.10.8",
1818
"@zayne-labs/ui-react": "workspace:*",
19-
"react": "19.1.0",
20-
"react-dom": "19.1.0",
21-
"react-hook-form": "^7.57.0",
22-
"zod": "^3.25.56"
19+
"react": "19.1.1",
20+
"react-dom": "19.1.1",
21+
"react-hook-form": "^7.62.0",
22+
"zod": "^4.1.0"
2323
},
2424
"devDependencies": {
25-
"@tailwindcss/vite": "^4.1.8",
26-
"@types/node": "^22.15.30",
27-
"@types/react": "19.1.6",
28-
"@types/react-dom": "19.1.6",
29-
"@vitejs/plugin-react-swc": "^3.10.1",
30-
"@zayne-labs/tsconfig": "0.9.1",
25+
"@tailwindcss/vite": "^4.1.12",
26+
"@types/node": "^24.3.0",
27+
"@types/react": "19.1.11",
28+
"@types/react-dom": "19.1.7",
29+
"@vitejs/plugin-react-swc": "^4.0.1",
30+
"@zayne-labs/tsconfig": "0.9.10",
3131
"publish": "^0.6.0",
32-
"tailwindcss": "^4.1.8",
33-
"tsx": "^4.19.4",
34-
"typescript": "5.8.3",
35-
"vite": "^6.3.5"
32+
"tailwindcss": "^4.1.12",
33+
"tsx": "^4.20.4",
34+
"typescript": "5.9.2",
35+
"vite": "^7.1.3"
3636
}
3737
}

‎apps/dev/src/client/components/MainForm.tsx‎

Lines changed: 64 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
22
import { Icon } from "@iconify/react";
33
import { DropZone } from "@zayne-labs/ui-react/ui/drop-zone";
44
import { Form } from "@zayne-labs/ui-react/ui/form";
5+
import { useState } from "react";
56
import { useForm } from "react-hook-form";
67
import { z } from "zod/v4";
78

@@ -21,6 +22,10 @@ function MainForm() {
2122

2223
const onSubmit = methods.handleSubmit((data) => console.info({ formData: data }));
2324

25+
const [max, setMax] = useState(3);
26+
27+
console.info({ max });
28+
2429
return (
2530
<Form.Root
2631
methods={methods}
@@ -66,65 +71,75 @@ function MainForm() {
6671
render={({ field }) => (
6772
<DropZone.Root
6873
classNames={{
69-
base: `data-dragging:border-pink-600 data-dragging:bg-pink-50 flex w-full
74+
container: `data-drag-over:border-pink-600 data-drag-over:bg-pink-50 flex w-full
7075
flex-col items-center justify-center rounded-lg border-2 border-dashed
7176
border-gray-300 p-6 transition-colors hover:border-blue-500 hover:bg-blue-50`,
7277
}}
73-
onUpload={(ctx) => field.onChange(ctx.filesWithPreview[0]?.file)}
74-
// multiple={true}
75-
maxFileSize={4}
76-
maxFileCount={2}
78+
onUpload={(ctx) => field.onChange(ctx.fileStateArray[0]?.file)}
79+
onUploadError={(ctx) => console.error(ctx.message)}
80+
onUploadSuccess={(ctx) => console.info(ctx.message)}
81+
multiple={true}
82+
allowedFileTypes={["image/jpeg", "image/png", "image/jpg", "image/gif"]}
83+
maxFileSize={{ mb: max }}
84+
maxFileCount={3}
7785
>
78-
<svg
79-
className="mb-2 size-8 text-gray-400"
80-
fill="none"
81-
stroke="currentColor"
82-
viewBox="0 0 24 24"
83-
>
84-
<path
85-
strokeLinecap="round"
86-
strokeLinejoin="round"
87-
strokeWidth="2"
88-
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
89-
/>
90-
</svg>
91-
<p className="text-sm font-medium text-gray-600">
92-
Drop files here or click to upload
93-
</p>
94-
<p className="mt-1 text-xs text-gray-500">Supported files: PDF, DOC, DOCX</p>
95-
96-
<DropZone.ImagePreview>
86+
<DropZone.Area>
87+
<svg
88+
className="mb-2 size-8 text-gray-400"
89+
fill="none"
90+
stroke="currentColor"
91+
viewBox="0 0 24 24"
92+
>
93+
<path
94+
strokeLinecap="round"
95+
strokeLinejoin="round"
96+
strokeWidth="2"
97+
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
98+
/>
99+
</svg>
100+
<p className="text-sm font-medium text-gray-600">
101+
Drop files here or click to upload
102+
</p>
103+
<p className="mt-1 text-xs text-gray-500">Supported files: PDF, DOC, DOCX</p>
104+
</DropZone.Area>
105+
<DropZone.FilePreview>
97106
{(ctx) => {
98-
return (
99-
<>
100-
{ctx.dropZoneState.filesWithPreview.map((fileWithPreview) => (
101-
<img
102-
key={fileWithPreview.id}
103-
className="mx-auto size-48 rounded-lg object-cover shadow-md
104-
transition-transform hover:scale-105"
105-
src={fileWithPreview.preview}
106-
alt="File preview"
107-
/>
108-
))}
109-
110-
{ctx.dropZoneState.errors.map((error) => (
111-
<div
112-
key={error.file.name}
113-
className="flex items-center gap-1 text-xs text-red-600"
114-
role="alert"
115-
>
116-
<Icon icon="lucide:circle-alert" className="size-3 shrink-0" />
117-
<span>{error.message}</span>
118-
</div>
119-
))}
120-
</>
121-
);
107+
return ctx.fileStateArray.map((fileState) => (
108+
<img
109+
key={fileState.id}
110+
className="mx-auto size-48 rounded-md object-cover shadow-md
111+
transition-transform hover:scale-105"
112+
src={fileState.preview}
113+
alt="File preview"
114+
/>
115+
));
122116
}}
123-
</DropZone.ImagePreview>
117+
</DropZone.FilePreview>
118+
<DropZone.ErrorView>
119+
{(ctx) =>
120+
ctx.errors.map((error) => (
121+
<div
122+
key={error.file.name}
123+
className="flex items-center gap-1 text-xs text-red-600"
124+
role="alert"
125+
>
126+
<Icon icon="lucide:circle-alert" className="size-3 shrink-0" />
127+
<span>{error.message}</span>
128+
</div>
129+
))
130+
}
131+
</DropZone.ErrorView>
124132
</DropZone.Root>
125133
)}
126134
/>
127135

136+
<button
137+
type="button"
138+
onClick={() => setMax((prev) => prev + 1)}
139+
className="mt-2 rounded-md bg-blue-600 px-4 py-2 text-white"
140+
>
141+
Increase max size
142+
</button>
128143
<Form.ErrorMessage />
129144
</Form.Field>
130145

‎apps/dev/tailwind.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@
3535
outline-offset: 2px;
3636
}
3737

38-
/* img {
39-
width: 100%;
40-
max-inline-size: 100%;
41-
max-width: unset;
42-
} */
38+
img {
39+
width: 100%;
40+
max-inline-size: 100%;
41+
max-width: unset;
42+
}
4343

4444
button {
4545
outline: transparent;

‎apps/docs/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212
"preview": "vitepress preview"
1313
},
1414
"dependencies": {
15-
"vue": "^3.5.16"
15+
"vue": "^3.5.19"
1616
},
1717
"devDependencies": {
18-
"@zayne-labs/tsconfig": "0.9.1",
19-
"vitepress": "^1.6.3"
18+
"@zayne-labs/tsconfig": "0.9.10",
19+
"vitepress": "^1.6.4"
2020
}
2121
}

‎package.json‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,43 +3,44 @@
33
"type": "module",
44
"version": "0.0.0",
55
"packageManager": "pnpm@9.15.4",
6+
"license": "MIT",
67
"scripts": {
7-
"build": "turbo run --filter \"./packages/*\" build",
8-
"build:dev": "turbo run --filter \"./packages/*\" build:dev",
9-
"build:test": "turbo run --filter \"./packages/*\" build:test",
10-
"dev:react": "turbo run --filter \"./packages/ui-react\" dev",
8+
"build": "pnpm run --filter=./packages/* build",
9+
"build:dev": "turbo run --filter=./packages/* build:dev",
10+
"build:test": "turbo run --filter=./packages/* build:test",
11+
"dev:react": "pnpm run --filter=./packages/ui-react dev",
1112
"inspect:eslint-config": "pnpx @eslint/config-inspector@latest",
12-
"lint:attw": "turbo run --filter \"./packages/*\" lint:attw",
13-
"lint:eslint": "turbo run --filter \"./packages/*\" lint:eslint",
14-
"lint:eslint:interactive": "turbo run --filter \"./packages/*\" lint:eslint:interactive",
13+
"lint:attw": "turbo run --filter=./packages/* lint:attw",
14+
"lint:eslint": "turbo run --filter=./packages/* lint:eslint",
15+
"lint:eslint:interactive": "turbo run --filter=./packages/* lint:eslint:interactive",
1516
"lint:eslint:root": "eslint . --max-warnings 0",
1617
"lint:eslint:root:interactive": "pnpx eslint-interactive@latest . --max-warnings 0 --fix",
17-
"lint:format": "turbo run --filter \"./packages/*\" lint:format",
18-
"lint:publint": "turbo run --filter \"./packages/*\" lint:publint",
19-
"lint:size": "turbo run --filter \"./packages/*\" lint:size",
20-
"lint:type-check": "turbo run --filter \"./packages/*\" lint:type-check",
18+
"lint:format": "turbo run --filter=./packages/* lint:format",
19+
"lint:publint": "turbo run --filter=./packages/* lint:publint",
20+
"lint:size": "turbo run --filter=./packages/* lint:size",
21+
"lint:type-check": "turbo run --filter=./packages/* lint:type-check",
2122
"prepare": "husky",
2223
"release": "changeset publish",
23-
"release:test": "pnpx pkg-pr-new publish \"./packages/*\" --compact"
24+
"release:test": "pnpx pkg-pr-new publish ./packages/* --compact"
2425
},
2526
"devDependencies": {
26-
"@arethetypeswrong/cli": "^0.18.1",
27-
"@changesets/cli": "^2.29.4",
28-
"@eslint-react/eslint-plugin": "^1.51.2",
29-
"@types/node": "^22.15.30",
30-
"@zayne-labs/eslint-config": "0.9.1",
31-
"@zayne-labs/prettier-config": "^0.9.1",
32-
"eslint": "9.28.0",
27+
"@arethetypeswrong/cli": "^0.18.2",
28+
"@changesets/cli": "^2.29.6",
29+
"@eslint-react/eslint-plugin": "^1.52.6",
30+
"@types/node": "^24.3.0",
31+
"@zayne-labs/eslint-config": "0.9.10",
32+
"@zayne-labs/prettier-config": "^0.9.10",
33+
"eslint": "9.34.0",
3334
"eslint-plugin-react-hooks": "^5.2.0",
3435
"eslint-plugin-react-refresh": "^0.4.20",
3536
"husky": "9.1.7",
36-
"lint-staged": "16.1.0",
37-
"prettier": "3.5.3",
38-
"prettier-plugin-classnames": "^0.7.8",
39-
"prettier-plugin-merge": "^0.7.4",
40-
"prettier-plugin-tailwindcss": "^0.6.12",
41-
"turbo": "^2.5.4",
42-
"typescript": "^5.8.3"
37+
"lint-staged": "16.1.5",
38+
"prettier": "3.6.2",
39+
"prettier-plugin-classnames": "^0.8.2",
40+
"prettier-plugin-merge": "^0.8.0",
41+
"prettier-plugin-tailwindcss": "^0.6.14",
42+
"turbo": "^2.5.6",
43+
"typescript": "^5.9.2"
4344
},
4445
"publishConfig": {
4546
"access": "public",

‎packages/ui-react/package.json‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
},
3636
"scripts": {
3737
"build": "concurrently 'pnpm:build:tailwind' 'tsdown'",
38-
"build:dev": "cross-env NODE_ENV=development tsup",
38+
"build:dev": "cross-env NODE_ENV=development tsdown",
3939
"build:tailwind": "tailwindcss -i css/style.css -o ./dist/style.css",
4040
"build:test": "concurrently --prefix-colors \"yellow.bold,#7da4f8.bold,magenta\" --names PUBLINT,TSUP 'pnpm:lint:publint' 'pnpm:build:dev'",
4141
"dev": "pnpm build:dev --watch",
@@ -67,33 +67,32 @@
6767
}
6868
},
6969
"dependencies": {
70-
"@zayne-labs/toolkit-core": "0.9.48",
71-
"@zayne-labs/toolkit-react": "0.9.48",
72-
"@zayne-labs/toolkit-type-helpers": "0.9.48"
70+
"@zayne-labs/toolkit-core": "0.10.8",
71+
"@zayne-labs/toolkit-react": "0.10.8",
72+
"@zayne-labs/toolkit-type-helpers": "0.10.8"
7373
},
7474
"devDependencies": {
75-
"@arethetypeswrong/cli": "0.18.1",
75+
"@arethetypeswrong/cli": "0.18.2",
7676
"@size-limit/esbuild-why": "11.2.0",
7777
"@size-limit/preset-small-lib": "11.2.0",
78-
"@tailwindcss/cli": "^4.1.8",
78+
"@tailwindcss/cli": "^4.1.12",
7979
"@total-typescript/ts-reset": "0.6.1",
80-
"@types/react": "19.1.6",
81-
"@types/react-dom": "19.1.6",
82-
"@zayne-labs/tsconfig": "0.9.1",
83-
"concurrently": "9.1.2",
84-
"cross-env": "7.0.3",
80+
"@types/react": "19.1.11",
81+
"@types/react-dom": "19.1.7",
82+
"@zayne-labs/tsconfig": "0.9.10",
83+
"concurrently": "9.2.0",
84+
"cross-env": "10.0.0",
8585
"publint": "0.3.12",
8686
"publish": "^0.6.0",
87-
"react": "19.1.0",
88-
"react-dom": "19.1.0",
89-
"react-hook-form": "7.57.0",
87+
"react": "19.1.1",
88+
"react-dom": "19.1.1",
89+
"react-hook-form": "7.62.0",
9090
"size-limit": "11.2.0",
91-
"tailwind-merge": "3.3.0",
92-
"tailwindcss": "^4.1.8",
93-
"tsdown": "^0.12.7",
94-
"tsup": "^8.5.0",
95-
"typescript": "5.8.3",
96-
"zustand": "5.0.5"
91+
"tailwind-merge": "3.3.1",
92+
"tailwindcss": "^4.1.12",
93+
"tsdown": "^0.12.9",
94+
"typescript": "5.9.2",
95+
"zustand": "5.0.8"
9796
},
9897
"publishConfig": {
9998
"access": "public",

0 commit comments

Comments
 (0)