@yusufalperendumlu/component-library 0.0.6 → 0.0.8

package/src/components/Dialog/Dialog.stories.tsx

@@ -1,102 +1,102 @@
-import React, { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import Dialog from "./Dialog";
-import Button from "../Button";
-const meta: Meta<typeof Dialog> = {
-  title: "Components/Dialog",
-  component: Dialog,
-  tags: ["autodocs"],
-};
-
-export default meta;
-type Story = StoryObj<typeof Dialog>;
-
-const DialogWrapper = ({
-  title,
-  body,
-  variant = "default",
-  confirmText = "Update",
-  cancelText = "Cancel",
-}: {
-  title: string;
-  body: React.ReactNode;
-  variant?: "default" | "destructive";
-  confirmText?: string;
-  cancelText?: string;
-}) => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)} variant="outline" title={title} />
-      <Dialog isOpen={open} onClose={() => setOpen(false)}>
-        <Dialog.Header>{title}</Dialog.Header>
-        <Dialog.Body>{body}</Dialog.Body>
-        <Dialog.Footer>
-          <Button
-            variant="outline"
-            onClick={() => setOpen(false)}
-            title={cancelText}
-            size="small"
-          />
-
-          <Button
-            onClick={() => setOpen(false)}
-            title={confirmText}
-            variant="primary"
-            size="small"
-          />
-        </Dialog.Footer>
-      </Dialog>
-    </>
-  );
-};
-
-// 🟣 Update Dialog
-export const UpdateDialog: Story = {
-  render: () => (
-    <DialogWrapper
-      title="Update XY1234"
-      body={
-        <>
-          <div className="mb-4">
-            <label className="block text-sm mb-1">Type</label>
-            <select className="w-full border rounded p-2 dark:bg-zinc-800">
-              <option>Passenger</option>
-              <option>Cargo</option>
-            </select>
-          </div>
-          <div>
-            <label className="block text-sm mb-1">Classification</label>
-            <select className="w-full border rounded p-2 dark:bg-zinc-800">
-              <option>Friendly</option>
-              <option>Hostile</option>
-            </select>
-          </div>
-        </>
-      }
-    />
-  ),
-};
-
-// 🔴 Delete Dialog
-export const DeleteDialog: Story = {
-  render: () => (
-    <DialogWrapper
-      title="Delete XY1234"
-      variant="destructive"
-      confirmText="Delete"
-      body={
-        <>
-          <p className="text-base font-semibold text-zinc-900 dark:text-white">
-            Are you sure you want to delete aircraft XY1234?
-          </p>
-          <p className="text-sm text-zinc-500 dark:text-zinc-400 mt-2">
-            This action cannot be undone. The aircraft will be permanently
-            removed from the system.
-          </p>
-        </>
-      }
-    />
-  ),
-};
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Dialog from './Dialog';
+import Button from '../Button';
+const meta: Meta<typeof Dialog> = {
+  title: 'Components/Dialog',
+  component: Dialog,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Dialog>;
+
+const DialogWrapper = ({
+  title,
+  body,
+  variant = 'default',
+  confirmText = 'Update',
+  cancelText = 'Cancel',
+}: {
+  title: string;
+  body: React.ReactNode;
+  variant?: 'default' | 'destructive';
+  confirmText?: string;
+  cancelText?: string;
+}) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)} variant='outline' title={title} />
+      <Dialog isOpen={open} onClose={() => setOpen(false)}>
+        <Dialog.Header>{title}</Dialog.Header>
+        <Dialog.Body>{body}</Dialog.Body>
+        <Dialog.Footer>
+          <Button
+            variant='outline'
+            onClick={() => setOpen(false)}
+            title={cancelText}
+            size='small'
+          />
+
+          <Button
+            onClick={() => setOpen(false)}
+            title={confirmText}
+            variant='primary'
+            size='small'
+          />
+        </Dialog.Footer>
+      </Dialog>
+    </>
+  );
+};
+
+// 🟣 Update Dialog
+export const UpdateDialog: Story = {
+  render: () => (
+    <DialogWrapper
+      title='Update XY1234'
+      body={
+        <>
+          <div className='mb-4'>
+            <label className='block text-sm mb-1'>Type</label>
+            <select className='w-full border rounded p-2 dark:bg-zinc-800'>
+              <option>Passenger</option>
+              <option>Cargo</option>
+            </select>
+          </div>
+          <div>
+            <label className='block text-sm mb-1'>Classification</label>
+            <select className='w-full border rounded p-2 dark:bg-zinc-800'>
+              <option>Friendly</option>
+              <option>Hostile</option>
+            </select>
+          </div>
+        </>
+      }
+    />
+  ),
+};
+
+// 🔴 Delete Dialog
+export const DeleteDialog: Story = {
+  render: () => (
+    <DialogWrapper
+      title='Delete XY1234'
+      variant='destructive'
+      confirmText='Delete'
+      body={
+        <>
+          <p className='text-base font-semibold text-zinc-900 dark:text-white'>
+            Are you sure you want to delete aircraft XY1234?
+          </p>
+          <p className='text-sm text-zinc-500 dark:text-zinc-400 mt-2'>
+            This action cannot be undone. The aircraft will be permanently
+            removed from the system.
+          </p>
+        </>
+      }
+    />
+  ),
+};

package/src/components/Input/Input.stories.tsx

@@ -1,34 +1,34 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import Input from "./Input";
-
-const meta: Meta<typeof Input> = {
-  title: "Components/Input",
-  component: Input,
-  tags: ["autodocs"],
-  argTypes: {
-    placeholder: {
-      control: "text",
-      description: "Placeholder text for the input field",
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Input>;
-
-export const Primary: Story = {
-  args: {
-    label: "Input",
-    placeholder: "Enter text here",
-    type: "text",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    placeholder: "Search...",
-    type: "dropdown",
-  },
-};
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Input from './Input';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  tags: ['autodocs'],
+  argTypes: {
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text for the input field',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Input',
+    placeholder: 'Enter text here',
+    type: 'text',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    placeholder: 'Search...',
+    type: 'dropdown',
+  },
+};

package/src/components/Table/Table.stories.tsx

@@ -1,53 +1,53 @@
-import React from "react";
-import { Meta, StoryFn } from "@storybook/react";
-import Table from "./Table";
-import { TableColumn } from "./Table.types";
-
-interface Person {
-  id: number;
-  name: string;
-  age: number;
-  email: string;
-}
-
-const columns: TableColumn<Person>[] = [
-  { key: "id", label: "ID", sortable: true },
-  { key: "name", label: "Name", sortable: true },
-  { key: "age", label: "Age", sortable: true },
-  {
-    key: "email",
-    label: "Email",
-    render: (value) => (
-      <a href={`mailto:${value}`} className="text-blue-400 underline">
-        {value}
-      </a>
-    ),
-  },
-];
-
-const data: Person[] = [
-  { id: 1, name: "Alice", age: 28, email: "alice@example.com" },
-  { id: 2, name: "Bob", age: 34, email: "bob@example.com" },
-  { id: 3, name: "Charlie", age: 22, email: "charlie@example.com" },
-];
-
-const meta: Meta<typeof Table> = {
-  title: "Components/Table",
-  component: Table,
-  argTypes: {
-    onRowClick: { action: "row clicked" },
-  },
-};
-
-export default meta;
-
-const Template: StoryFn<React.ComponentProps<typeof Table<Person>>> = (
-  args
-) => <Table {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  columns,
-  data,
-  onRowClick: (row) => console.log("Row clicked:", row),
-};
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import Table from './Table';
+import { TableColumn } from './Table.types';
+
+interface Person {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+}
+
+const columns: TableColumn<Person>[] = [
+  { key: 'id', label: 'ID', sortable: true },
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'age', label: 'Age', sortable: true },
+  {
+    key: 'email',
+    label: 'Email',
+    render: value => (
+      <a href={`mailto:${value}`} className='text-blue-400 underline'>
+        {value}
+      </a>
+    ),
+  },
+];
+
+const data: Person[] = [
+  { id: 1, name: 'Alice', age: 28, email: 'alice@example.com' },
+  { id: 2, name: 'Bob', age: 34, email: 'bob@example.com' },
+  { id: 3, name: 'Charlie', age: 22, email: 'charlie@example.com' },
+];
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Table',
+  component: Table,
+  argTypes: {
+    onRowClick: { action: 'row clicked' },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<React.ComponentProps<typeof Table<Person>>> = args => (
+  <Table {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  columns,
+  data,
+  onRowClick: row => console.log('Row clicked:', row),
+};

package/src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,44 @@
+// Toast.stories.tsx
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Toast from './Toast';
+
+const meta: Meta<typeof Toast> = {
+  title: 'Components/Toast',
+  component: Toast,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'radio',
+      options: ['success', 'error'],
+    },
+    position: {
+      control: 'radio',
+      options: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Toast>;
+
+export const SuccessTopRight: Story = {
+  args: {
+    title: 'Success',
+    description: 'Operation was successful!',
+    duration: 3000,
+    type: 'success',
+    position: 'top-right',
+  },
+};
+
+export const ErrorBottomLeft: Story = {
+  args: {
+    title: 'Error',
+    description: 'Something went wrong!',
+    duration: 3000,
+    type: 'error',
+    position: 'bottom-left',
+  },
+};

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import { cva } from 'class-variance-authority';
+import { IoClose } from 'react-icons/io5';
+import clsx from 'clsx';
+
+import { toastIcons } from './icons';
+import { ToastProps } from './Toast.types';
+
+const toastVariants = cva(
+  'flex items-center justify-between w-full max-w-xs px-4 py-2 rounded-md shadow-md transition-opacity duration-300',
+  {
+    variants: {
+      type: {
+        success: 'bg-green-500 text-white',
+        error: 'bg-red-500 text-white',
+      },
+      position: {
+        'top-left': 'fixed top-4 left-4',
+        'top-right': 'fixed top-4 right-4',
+        'bottom-left': 'fixed bottom-4 left-4',
+        'bottom-right': 'fixed bottom-4 right-4',
+      },
+    },
+    defaultVariants: {
+      type: 'success',
+      position: 'top-right',
+    },
+  }
+);
+
+const Toast: React.FC<ToastProps> = ({
+  title,
+  description,
+  duration,
+  type,
+  position,
+}) => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+    if (!duration) return;
+
+    const timer = setTimeout(() => {
+      handleClose();
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [duration]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className={clsx(toastVariants({ type, position }))}>
+      <span>{toastIcons[type]}</span>
+      <div className='flex flex-col ml-2 flex-1'>
+        <span className='font-semibold'>{title}</span>
+        <span className='text-sm'>{description}</span>
+      </div>
+      <button onClick={handleClose} className='ml-4'>
+        <IoClose size={16} />
+      </button>
+    </div>
+  );
+};
+
+export default Toast;

package/src/components/Toast/Toast.types.ts

@@ -0,0 +1,7 @@
+export type ToastProps = {
+  title: string;
+  description: string;
+  duration?: number;
+  type: 'success' | 'error';
+  position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+};

package/src/components/Toast/icons.tsx

@@ -0,0 +1,9 @@
+import { TiTick } from 'react-icons/ti';
+import { FaTriangleExclamation } from 'react-icons/fa6';
+
+export const toastIcons = {
+  success: (
+    <TiTick className='text-green-500 h-6 w-6 bg-white p-1 rounded-full text-sm mr-2' />
+  ),
+  error: <FaTriangleExclamation className='text-white text-lg mr-2' />,
+};

package/src/components/Toast/index.ts

@@ -0,0 +1,3 @@
+import Toast from "./Toast";
+
+export default Toast;

package/src/components/index.ts

@@ -3,3 +3,4 @@ export { default as Button } from './Button';
 export { default as Dialog } from './Dialog';
 export { default as Input } from './Input';
 export { default as Table } from './Table';
+export { default as Toast } from './Toast';