From 55d8edb8a21c765e481c4d7f6160f9a0db6f8b5c Mon Sep 17 00:00:00 2001 From: Murat Tunca Date: Mon, 31 Jul 2023 12:45:00 +0300 Subject: [PATCH 1/6] feat (apps/pano): use dialog for post deletion --- .../pano/features/post-list/MoreOptions.tsx | 88 +++++++++++++------ 1 file changed, 63 insertions(+), 25 deletions(-) diff --git a/apps/kampus/app/pano/features/post-list/MoreOptions.tsx b/apps/kampus/app/pano/features/post-list/MoreOptions.tsx index 3d0bcef5..ddf1aadc 100644 --- a/apps/kampus/app/pano/features/post-list/MoreOptions.tsx +++ b/apps/kampus/app/pano/features/post-list/MoreOptions.tsx @@ -1,10 +1,21 @@ +"use client"; + +import { useRouter } from "next/navigation"; import { MoreHorizontal } from "lucide-react"; import { Button, + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, + DropdownMenuSeparator, DropdownMenuTrigger, } from "@kampus/ui-next"; @@ -22,40 +33,67 @@ type Post = { title: string; url: string; }; +type User = { + username: string; +}; + +function canUserEdit(user: User, post: Post) { + console.log(user, post); + return true; +} export const MoreOptionsDropdown = ({ post, shareUrl }: Props) => { - // const user = useUserContext(); + const user = { username: "cancan" }; console.log(post, shareUrl); + const router = useRouter(); const ownerItems: JSX.Element[] = []; - // if (canUserEdit(user, post)) { - // ownerItems.push( - // navigate(`/posts/${post.id}/edit`)} key="edit"> - // Düzenle - // - // ); - // ownerItems.push( - // - // Sil - // - // ); - // ownerItems.push(); - // } + if (canUserEdit(user, post)) { + ownerItems.push( + router.push(`/posts/${post.id}/edit`)} key="edit"> + Düzenle + + ); + ownerItems.push( + + Sil + + ); + ownerItems.push(); + } // // FIXME: below appears to be redundant, is it? // const menuItems = [...ownerItems]; return ( - - - - - - {ownerItems} - Adresi kopyala - - + + + + + + + {ownerItems} + Adresi kopyala + + + + + Silmek istediğine emin misin? + + Eğer bu gönderiyi silersen, bu işlemi geri alamazsın. + + + + + + + + ); }; From b97fb283ca30c68b62075cbbe488cc50632c5f2f Mon Sep 17 00:00:00 2001 From: Murat Tunca Date: Wed, 2 Aug 2023 23:13:59 +0300 Subject: [PATCH 2/6] feat(ui):add checkbox component and stories --- apps/ui/stories/Checkbox.stories.tsx | 34 ++ package-lock.json | 480 ++++++++++++--------------- package.json | 1 + packages/ui/components/checkbox.tsx | 28 ++ packages/ui/components/index.ts | 1 + 5 files changed, 275 insertions(+), 269 deletions(-) create mode 100644 apps/ui/stories/Checkbox.stories.tsx create mode 100644 packages/ui/components/checkbox.tsx diff --git a/apps/ui/stories/Checkbox.stories.tsx b/apps/ui/stories/Checkbox.stories.tsx new file mode 100644 index 00000000..bc848604 --- /dev/null +++ b/apps/ui/stories/Checkbox.stories.tsx @@ -0,0 +1,34 @@ +import { Meta, StoryObj } from "@storybook/react"; + +import { Checkbox, Label } from "@kampus/ui-next"; + +const labels = ["köpekleri çıkarmak", "alışverişe gitmek", "kitap okumak"]; + +const meta = { + title: "Checkbox", + component: Checkbox, +} satisfies Meta; + +export default meta; +type NewType = StoryObj; + +export const Default = { + render: () => ( +
+

Günlük Yapmam Gerekenler

+ {labels.map((label) => { + return ( +
+ + +
+ ); + })} +
+ ), +}; diff --git a/package-lock.json b/package-lock.json index f588a7af..19ebc804 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "dependencies": { "@ianvs/prettier-plugin-sort-imports": "4.0.2", "@kampus/eslint-config": "*", + "@radix-ui/react-checkbox": "^1.0.4", "@types/node": "20.2.5", "@types/prettier": "2.7.3", "@types/react": "18.2.7", @@ -6124,6 +6125,61 @@ "@babel/runtime": "^7.13.10" } }, + "node_modules/@radix-ui/primitive": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz", + "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==", + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, + "node_modules/@radix-ui/react-checkbox": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz", + "integrity": "sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-previous": "1.0.1", + "@radix-ui/react-use-size": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-checkbox/node_modules/@radix-ui/react-compose-refs": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", + "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-compose-refs": { "version": "1.0.0", "license": "MIT", @@ -6134,6 +6190,122 @@ "react": "^16.8 || ^17.0 || ^18.0" } }, + "node_modules/@radix-ui/react-context": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz", + "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-presence": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz", + "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-presence/node_modules/@radix-ui/react-compose-refs": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", + "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-primitive": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz", + "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-slot": "1.0.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-compose-refs": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", + "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", + "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-select": { "version": "1.2.2", "license": "MIT", @@ -6198,13 +6370,6 @@ "react-dom": ">=16.8.0" } }, - "node_modules/@radix-ui/react-select/node_modules/@radix-ui/primitive": { - "version": "1.0.1", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - } - }, "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-arrow": { "version": "1.0.3", "license": "MIT", @@ -6268,22 +6433,6 @@ } } }, - "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-context": { - "version": "1.0.1", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-direction": { "version": "1.0.1", "license": "MIT", @@ -6436,28 +6585,6 @@ } } }, - "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-primitive": { - "version": "1.0.3", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-slot": "1.0.2" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": { "version": "1.0.2", "license": "MIT", @@ -6475,39 +6602,6 @@ } } }, - "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-callback-ref": { - "version": "1.0.1", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-controllable-state": { - "version": "1.0.1", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-use-callback-ref": "1.0.1" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-escape-keydown": { "version": "1.0.3", "license": "MIT", @@ -6525,22 +6619,6 @@ } } }, - "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-layout-effect": { - "version": "1.0.1", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-rect": { "version": "1.0.1", "license": "MIT", @@ -6558,23 +6636,6 @@ } } }, - "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-use-size": { - "version": "1.0.1", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-use-layout-effect": "1.0.1" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-visually-hidden": { "version": "1.0.3", "license": "MIT", @@ -6626,9 +6687,21 @@ } } }, - "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-compose-refs": { - "version": "1.0.1", + "node_modules/@radix-ui/react-slot": { + "version": "1.0.0", "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0" + } + }, + "node_modules/@radix-ui/react-use-callback-ref": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz", + "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==", "dependencies": { "@babel/runtime": "^7.13.10" }, @@ -6642,34 +6715,30 @@ } } }, - "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive": { - "version": "1.0.3", - "license": "MIT", + "node_modules/@radix-ui/react-use-controllable-state": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz", + "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==", "dependencies": { "@babel/runtime": "^7.13.10", - "@radix-ui/react-slot": "1.0.2" + "@radix-ui/react-use-callback-ref": "1.0.1" }, "peerDependencies": { "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" + "react": "^16.8 || ^17.0 || ^18.0" }, "peerDependenciesMeta": { "@types/react": { "optional": true - }, - "@types/react-dom": { - "optional": true } } }, - "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-slot": { - "version": "1.0.2", - "license": "MIT", + "node_modules/@radix-ui/react-use-layout-effect": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz", + "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==", "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-compose-refs": "1.0.1" + "@babel/runtime": "^7.13.10" }, "peerDependencies": { "@types/react": "*", @@ -6681,22 +6750,29 @@ } } }, - "node_modules/@radix-ui/react-slot": { - "version": "1.0.0", + "node_modules/@radix-ui/react-use-previous": { + "version": "1.0.1", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-compose-refs": "1.0.0" + "@babel/runtime": "^7.13.10" }, "peerDependencies": { + "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } } }, - "node_modules/@radix-ui/react-use-previous": { + "node_modules/@radix-ui/react-use-size": { "version": "1.0.1", - "license": "MIT", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz", + "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==", "dependencies": { - "@babel/runtime": "^7.13.10" + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-layout-effect": "1.0.1" }, "peerDependencies": { "@types/react": "*", @@ -25208,13 +25284,6 @@ "react-dom": ">=16.8.0" } }, - "packages/ui/node_modules/@radix-ui/primitive": { - "version": "1.0.1", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - } - }, "packages/ui/node_modules/@radix-ui/react-alert-dialog": { "version": "1.0.4", "license": "MIT", @@ -25330,22 +25399,6 @@ } } }, - "packages/ui/node_modules/@radix-ui/react-context": { - "version": "1.0.1", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "packages/ui/node_modules/@radix-ui/react-dialog": { "version": "1.0.4", "license": "MIT", @@ -25622,51 +25675,6 @@ } } }, - "packages/ui/node_modules/@radix-ui/react-presence": { - "version": "1.0.1", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-compose-refs": "1.0.1", - "@radix-ui/react-use-layout-effect": "1.0.1" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "packages/ui/node_modules/@radix-ui/react-primitive": { - "version": "1.0.3", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-slot": "1.0.2" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, "packages/ui/node_modules/@radix-ui/react-roving-focus": { "version": "1.0.4", "license": "MIT", @@ -25747,39 +25755,6 @@ } } }, - "packages/ui/node_modules/@radix-ui/react-use-callback-ref": { - "version": "1.0.1", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "packages/ui/node_modules/@radix-ui/react-use-controllable-state": { - "version": "1.0.1", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-use-callback-ref": "1.0.1" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "packages/ui/node_modules/@radix-ui/react-use-escape-keydown": { "version": "1.0.3", "license": "MIT", @@ -25797,22 +25772,6 @@ } } }, - "packages/ui/node_modules/@radix-ui/react-use-layout-effect": { - "version": "1.0.1", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "packages/ui/node_modules/@radix-ui/react-use-rect": { "version": "1.0.1", "license": "MIT", @@ -25830,23 +25789,6 @@ } } }, - "packages/ui/node_modules/@radix-ui/react-use-size": { - "version": "1.0.1", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-use-layout-effect": "1.0.1" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "packages/ui/node_modules/@radix-ui/react-visually-hidden": { "version": "1.0.3", "license": "MIT", diff --git a/package.json b/package.json index 1583f560..25e25e08 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "dependencies": { "@ianvs/prettier-plugin-sort-imports": "4.0.2", "@kampus/eslint-config": "*", + "@radix-ui/react-checkbox": "^1.0.4", "@types/node": "20.2.5", "@types/prettier": "2.7.3", "@types/react": "18.2.7", diff --git a/packages/ui/components/checkbox.tsx b/packages/ui/components/checkbox.tsx new file mode 100644 index 00000000..b2ed7d3e --- /dev/null +++ b/packages/ui/components/checkbox.tsx @@ -0,0 +1,28 @@ +"use client"; + +import * as React from "react"; +import * as CheckboxPrimitive from "@radix-ui/react-checkbox"; +import { Check } from "lucide-react"; + +import { cn } from "@kampus/ui-next/utils"; + +const Checkbox = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + +)); +Checkbox.displayName = CheckboxPrimitive.Root.displayName; + +export { Checkbox }; diff --git a/packages/ui/components/index.ts b/packages/ui/components/index.ts index a095b661..4012102a 100644 --- a/packages/ui/components/index.ts +++ b/packages/ui/components/index.ts @@ -17,3 +17,4 @@ export * from "./toast"; export * from "./top-nav"; export * from "./use-toast"; export * from "./user-avatar"; +export * from "./checkbox"; From 5f2fb9f7cf93879ed9f268afbac0ef8fc4fbe0a5 Mon Sep 17 00:00:00 2001 From: Murat Tunca Date: Wed, 2 Aug 2023 23:24:37 +0300 Subject: [PATCH 3/6] feat(apps/ui): add missing stories --- apps/ui/stories/DropdownMenu.stories.tsx | 103 +++++++++++++++++++++++ apps/ui/stories/Label.stories.tsx | 25 ++++++ apps/ui/stories/Select.stories.tsx | 39 +++++++++ apps/ui/stories/Seperator.stories.tsx | 30 +++++++ apps/ui/stories/Textarea.stories.tsx | 13 +++ 5 files changed, 210 insertions(+) create mode 100644 apps/ui/stories/DropdownMenu.stories.tsx create mode 100644 apps/ui/stories/Label.stories.tsx create mode 100644 apps/ui/stories/Select.stories.tsx create mode 100644 apps/ui/stories/Seperator.stories.tsx create mode 100644 apps/ui/stories/Textarea.stories.tsx diff --git a/apps/ui/stories/DropdownMenu.stories.tsx b/apps/ui/stories/DropdownMenu.stories.tsx new file mode 100644 index 00000000..c5c0c7b0 --- /dev/null +++ b/apps/ui/stories/DropdownMenu.stories.tsx @@ -0,0 +1,103 @@ +import { Meta, StoryObj } from "@storybook/react"; +import { + CreditCard, + Keyboard, + MoreHorizontal, + Settings, + User, + UserPlus, + Users, +} from "lucide-react"; + +import { + Button, + DropdownMenu, + DropdownMenuCheckboxItem, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuPortal, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, + DropdownMenuTrigger, +} from "@kampus/ui-next"; + +const meta = { + title: "Dropdown Menu", + component: DropdownMenu, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default = { + render: () => ( + + + + + + My Account + + + + + Profile + ⇧⌘P + + + + Billing + ⌘B + + + + Settings + ⌘S + + + + Keyboard shortcuts + ⌘K + + + + + + + Team + + + + + Invite users + + + + + + ), +}; + +export const Withicons = { + render: () => ( + + + + + + Adresi kopyala + Düzenle + Sil + + + ), +}; diff --git a/apps/ui/stories/Label.stories.tsx b/apps/ui/stories/Label.stories.tsx new file mode 100644 index 00000000..290385f3 --- /dev/null +++ b/apps/ui/stories/Label.stories.tsx @@ -0,0 +1,25 @@ +import { Meta, StoryObj } from "@storybook/react"; + +import { Checkbox, Label } from "@kampus/ui-next"; + +const meta = { + title: "Label", + component: Label, +} satisfies Meta; + +export default meta; +type NewType = StoryObj; + +type Story = NewType; + +// export const Default = {} satisfies Story; +export const Default = { + render: () => ( +
+
+ + +
+
+ ), +}; diff --git a/apps/ui/stories/Select.stories.tsx b/apps/ui/stories/Select.stories.tsx new file mode 100644 index 00000000..4dd02ffe --- /dev/null +++ b/apps/ui/stories/Select.stories.tsx @@ -0,0 +1,39 @@ +import { Meta, StoryObj } from "@storybook/react"; + +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectTrigger, + SelectValue, +} from "@kampus/ui-next"; + +const meta = { + title: "Select", + component: Select, +} satisfies Meta; + +export default meta; +type NewType = StoryObj; + +export const Default = { + render: () => ( + + ), +}; diff --git a/apps/ui/stories/Seperator.stories.tsx b/apps/ui/stories/Seperator.stories.tsx new file mode 100644 index 00000000..5d982214 --- /dev/null +++ b/apps/ui/stories/Seperator.stories.tsx @@ -0,0 +1,30 @@ +import { Meta, StoryObj } from "@storybook/react"; + +import { Separator } from "@kampus/ui-next"; + +const meta = { + title: "Seperator", + component: Separator, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default = { + render: () => ( +
+
+

Kamp.us Uygulamaları

+

+
+ +
+
Pano
+ +
Sözlük
+ +
Pasaport
+
+
+ ), +}; diff --git a/apps/ui/stories/Textarea.stories.tsx b/apps/ui/stories/Textarea.stories.tsx new file mode 100644 index 00000000..42181a11 --- /dev/null +++ b/apps/ui/stories/Textarea.stories.tsx @@ -0,0 +1,13 @@ +import { Meta, StoryObj } from "@storybook/react"; + +import { Textarea } from "@kampus/ui-next"; + +const meta = { + title: "TextArea", + component: Textarea, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default = {} satisfies Story; From bc56b183ccc4aeb06301dc389de56cfb6782e761 Mon Sep 17 00:00:00 2001 From: Murat Tunca Date: Wed, 2 Aug 2023 23:42:21 +0300 Subject: [PATCH 4/6] fix(packages/ui):fix package.json --- package-lock.json | 2 +- package.json | 1 - packages/ui/package.json | 1 + 3 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 19ebc804..97b6d695 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,6 @@ "dependencies": { "@ianvs/prettier-plugin-sort-imports": "4.0.2", "@kampus/eslint-config": "*", - "@radix-ui/react-checkbox": "^1.0.4", "@types/node": "20.2.5", "@types/prettier": "2.7.3", "@types/react": "18.2.7", @@ -25246,6 +25245,7 @@ "dependencies": { "@radix-ui/react-alert-dialog": "^1.0.4", "@radix-ui/react-avatar": "^1.0.3", + "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-dropdown-menu": "^2.0.5", "@radix-ui/react-label": "^2.0.2", diff --git a/package.json b/package.json index 25e25e08..1583f560 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,6 @@ "dependencies": { "@ianvs/prettier-plugin-sort-imports": "4.0.2", "@kampus/eslint-config": "*", - "@radix-ui/react-checkbox": "^1.0.4", "@types/node": "20.2.5", "@types/prettier": "2.7.3", "@types/react": "18.2.7", diff --git a/packages/ui/package.json b/packages/ui/package.json index d6a04214..7a200d94 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -16,6 +16,7 @@ "dependencies": { "@radix-ui/react-alert-dialog": "^1.0.4", "@radix-ui/react-avatar": "^1.0.3", + "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-dropdown-menu": "^2.0.5", "@radix-ui/react-label": "^2.0.2", From 85ec697dc060ca87c8f0818f04cc2bd175917937 Mon Sep 17 00:00:00 2001 From: Murat Tunca Date: Fri, 4 Aug 2023 10:57:08 +0300 Subject: [PATCH 5/6] fix(apps/ui):fix checkbox story --- apps/ui/stories/Checkbox.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/ui/stories/Checkbox.stories.tsx b/apps/ui/stories/Checkbox.stories.tsx index bc848604..7b02b188 100644 --- a/apps/ui/stories/Checkbox.stories.tsx +++ b/apps/ui/stories/Checkbox.stories.tsx @@ -19,9 +19,9 @@ export const Default = { {labels.map((label) => { return (
- +