feat(apps/ui): add missing stories

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(
-  //     <Item onSelect={() => navigate(`/posts/${post.id}/edit`)} key="edit">
-  //       Düzenle
-  //     </Item>
-  //   );
-  //   ownerItems.push(
-  //     <Item onSelect={handleOpen} key="delete">
-  //       Sil
-  //     </Item>
-  //   );
-  //   ownerItems.push(<DropdownMenuSeparator key="separator" />);
-  // }
+  if (canUserEdit(user, post)) {
+    ownerItems.push(
+      <DropdownMenuItem onSelect={() => router.push(`/posts/${post.id}/edit`)} key="edit">
+        Düzenle
+      </DropdownMenuItem>
+    );
+    ownerItems.push(
+      <DialogTrigger asChild>
+        <DropdownMenuItem>Sil</DropdownMenuItem>
+      </DialogTrigger>
+    );
+    ownerItems.push(<DropdownMenuSeparator key="separator" />);
+  }
 
   // // FIXME: below appears to be redundant, is it?
   // const menuItems = [...ownerItems];
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button className="h-5 p-1" variant="ghost">
-          <MoreHorizontal size="16" aria-label="Daha fazla seçenek" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        {ownerItems}
-        <DropdownMenuItem>Adresi kopyala</DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <Dialog>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button className="h-5 p-1" variant="ghost">
+            <MoreHorizontal size="16" aria-label="Daha fazla seçenek" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          {ownerItems}
+          <DropdownMenuItem>Adresi kopyala</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Silmek istediğine emin misin?</DialogTitle>
+          <DialogDescription>
+            Eğer bu gönderiyi silersen, bu işlemi geri alamazsın.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" type="submit">
+            Hayir
+          </Button>
+          <Button variant="destructive" type="submit">
+            Evet
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 };

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<typeof Checkbox>;
+
+export default meta;
+type NewType = StoryObj<typeof meta>;
+
+export const Default = {
+  render: () => (
+    <div className="flex flex-col space-y-2 ">
+      <h4>Günlük Yapmam Gerekenler</h4>
+      {labels.map((label) => {
+        return (
+          <div className="flex items-center space-x-2">
+            <Checkbox id={label} />
+            <Label
+              htmlFor={label}
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              {label}
+            </Label>
+          </div>
+        );
+      })}
+    </div>
+  ),
+};

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<typeof DropdownMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <User className="mr-2 h-4 w-4" />
+            <span>Profile</span>
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <CreditCard className="mr-2 h-4 w-4" />
+            <span>Billing</span>
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Settings className="mr-2 h-4 w-4" />
+            <span>Settings</span>
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Keyboard className="mr-2 h-4 w-4" />
+            <span>Keyboard shortcuts</span>
+            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <Users className="mr-2 h-4 w-4" />
+            <span>Team</span>
+          </DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <UserPlus className="mr-2 h-4 w-4" />
+              <span>Invite users</span>
+            </DropdownMenuSubTrigger>
+          </DropdownMenuSub>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};
+
+export const Withicons = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button className="h-5 p-1" variant="ghost">
+          <MoreHorizontal size="16" aria-label="Daha fazla seçenek" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuItem>Adresi kopyala</DropdownMenuItem>
+        <DropdownMenuItem>Düzenle</DropdownMenuItem>
+        <DropdownMenuItem>Sil</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};

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<typeof Label>;
+
+export default meta;
+type NewType = StoryObj<typeof meta>;
+
+type Story = NewType;
+
+// export const Default = {} satisfies Story;
+export const Default = {
+  render: () => (
+    <div>
+      <div className="flex items-center space-x-2">
+        <Checkbox id="terms" />
+        <Label htmlFor="terms">Accept terms and conditions</Label>
+      </div>
+    </div>
+  ),
+};

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<typeof Select>;
+
+export default meta;
+type NewType = StoryObj<typeof meta>;
+
+export const Default = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[180px]">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Fruits</SelectLabel>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="blueberry">Blueberry</SelectItem>
+          <SelectItem value="grapes">Grapes</SelectItem>
+          <SelectItem value="pineapple">Pineapple</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  ),
+};

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<typeof Separator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+  render: () => (
+    <div>
+      <div className="space-y-1">
+        <h4 className="text-sm font-medium leading-none">Kamp.us Uygulamaları</h4>
+        <p className="text-muted-foreground text-sm"></p>
+      </div>
+      <Separator className="my-4" />
+      <div className="flex h-5 items-center space-x-4 text-sm">
+        <div>Pano</div>
+        <Separator orientation="vertical" />
+        <div>Sözlük</div>
+        <Separator orientation="vertical" />
+        <div>Pasaport</div>
+      </div>
+    </div>
+  ),
+};

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<typeof Textarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default = {} satisfies Story;