@yusufalperendumlu/component-library 0.0.6 → 0.0.7

package/src/components/Autocomplete/Autocomplete.stories.tsx

@@ -1,65 +1,65 @@
-import React, { useState } from "react";
-import { Meta, StoryObj } from "@storybook/react";
-
-import Autocomplete from "./Autocomplete";
-
-const meta: Meta<typeof Autocomplete> = {
-  title: "Components/Autocomplete",
-  component: Autocomplete,
-  tags: ["autodocs"],
-  argTypes: {
-    placeholder: { control: "text" },
-    className: { control: false },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Autocomplete>;
-
-const sampleOptions = [
-  { id: 1, name: "JavaScript" },
-  { id: 2, name: "TypeScript" },
-  { id: 3, name: "Python" },
-  { id: 4, name: "Rust" },
-  { id: 5, name: "Go" },
-  { id: 6, name: "Java" },
-];
-
-export const Default: Story = {
-  render: (args) => {
-    const [selected, setSelected] = useState<typeof sampleOptions>([]);
-
-    return (
-      <div className="max-w-md mx-auto mt-10">
-        <Autocomplete
-          {...args}
-          options={sampleOptions}
-          selected={selected}
-          setSelected={setSelected}
-          showChosen={false}
-          placeholder="Choose a language"
-          label="Choose a language"
-        />
-      </div>
-    );
-  },
-};
-
-export const WithChosen: Story = {
-  render: (args) => {
-    const [selected, setSelected] = useState<typeof sampleOptions>([]);
-
-    return (
-      <div className="max-w-md mx-auto mt-10">
-        <Autocomplete
-          {...args}
-          options={sampleOptions}
-          selected={selected}
-          setSelected={setSelected}
-          placeholder="Choose languages"
-          showChosen
-        />
-      </div>
-    );
-  },
-};
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import Autocomplete from './Autocomplete';
+
+const meta: Meta<typeof Autocomplete> = {
+  title: 'Components/Autocomplete',
+  component: Autocomplete,
+  tags: ['autodocs'],
+  argTypes: {
+    placeholder: { control: 'text' },
+    className: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Autocomplete>;
+
+const sampleOptions = [
+  { id: 1, name: 'JavaScript' },
+  { id: 2, name: 'TypeScript' },
+  { id: 3, name: 'Python' },
+  { id: 4, name: 'Rust' },
+  { id: 5, name: 'Go' },
+  { id: 6, name: 'Java' },
+];
+
+export const Default: Story = {
+  render: args => {
+    const [selected, setSelected] = useState<typeof sampleOptions>([]);
+
+    return (
+      <div className='max-w-md mx-auto mt-10'>
+        <Autocomplete
+          {...args}
+          options={sampleOptions}
+          selected={selected}
+          setSelected={setSelected}
+          showChosen={false}
+          placeholder='Choose a language'
+          label='Choose a language'
+        />
+      </div>
+    );
+  },
+};
+
+export const WithChosen: Story = {
+  render: args => {
+    const [selected, setSelected] = useState<typeof sampleOptions>([]);
+
+    return (
+      <div className='max-w-md mx-auto mt-10'>
+        <Autocomplete
+          {...args}
+          options={sampleOptions}
+          selected={selected}
+          setSelected={setSelected}
+          placeholder='Choose languages'
+          showChosen
+        />
+      </div>
+    );
+  },
+};

package/src/components/Button/Button.stories.tsx

@@ -1,52 +1,52 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import Button from "./Button";
-
-const meta: Meta<typeof Button> = {
-  title: "Components/Button",
-  component: Button,
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: "radio",
-      options: ["primary", "secondary"],
-    },
-    onClick: { action: "clicked" },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Button>;
-
-export const Primary: Story = {
-  args: {
-    title: "Login",
-    variant: "primary",
-    size: "small",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    title: "Show history",
-    variant: "secondary",
-    size: "small",
-  },
-};
-
-export const Outline: Story = {
-  args: {
-    title: "Cancel",
-    variant: "danger",
-    size: "small",
-  },
-};
-
-export const CustomClass: Story = {
-  args: {
-    title: "Custom Class Button",
-    variant: "primary",
-    className: "mt-4 bg-green-500 text-white hover:bg-green-600",
-  },
-};
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['primary', 'secondary'],
+    },
+    onClick: { action: 'clicked' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    title: 'Login',
+    variant: 'primary',
+    size: 'small',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    title: 'Show history',
+    variant: 'secondary',
+    size: 'small',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    title: 'Cancel',
+    variant: 'danger',
+    size: 'small',
+  },
+};
+
+export const CustomClass: Story = {
+  args: {
+    title: 'Custom Class Button',
+    variant: 'primary',
+    className: 'mt-4 bg-green-500 text-white hover:bg-green-600',
+  },
+};

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',
+  },
+};