@yusufalperendumlu/component-library 0.0.5 → 0.0.7

package/src/components/Button/Button.tsx

@@ -1,50 +1,55 @@
-import React from "react";
-import { cva } from "class-variance-authority";
-import clsx from "clsx";
-
-import { IButtonProps } from "./Button.types";
-
-const buttonVariants = cva(
-  "outline-none min-w-[70px] font-inter transition-all font-[12px] px-4 py-2 gap-2 rounded-md duration-300 ease-in-out disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-inherit",
-  {
-    variants: {
-      variant: {
-        primary: "bg-[#5876EE] text-white shadow-xs hover:bg-[#4a66d9]",
-        secondary: "bg-[#BDC311] text-[#424242] shadow-xs hover:bg-[#a8b00e]",
-        outline: "bg-transparent shadow-xs hover:bg-[#f5f5f5]",
-        danger: "bg-[#FF0000] text-white shadow-xs hover:bg-[#d40000]",
-      },
-      size: {
-        small: "w-fit px-3 text-sm",
-        medium: "w-1/2 px-4 text-base",
-        large: "w-full px-5 text-lg",
-      },
-      border: {
-        primary: "border border-[#5876EE]  hover:bg-[#4a66d9]",
-        secondary: "border border-[#BDC311]  hover:bg-[#a8b00e]",
-        outline: "border border-[#424242]  hover:bg-[#f5f5f5]",
-        danger: "border border-[#FF0000] text-[#FF0000]  hover:bg-[#FF0000]",
-      },
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "medium",
-    },
-  }
-);
-
-const Button = ({ variant, size, border, title, ...props }: IButtonProps) => {
-  return (
-    <button
-      className={clsx(
-        buttonVariants({ variant, size, border }),
-        props.className
-      )}
-      {...props}
-    >
-      {title}
-    </button>
-  );
-};
-
-export default Button;
+import { cva } from 'class-variance-authority';
+import clsx from 'clsx';
+import React from 'react';
+
+import { IButtonProps } from './Button.types';
+
+const buttonVariants = cva(
+  'outline-none min-w-[70px] font-inter transition-all font-[12px] px-4 py-2 gap-2 rounded-md duration-300 ease-in-out disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-inherit',
+  {
+    variants: {
+      variant: {
+        primary: 'bg-[#5876EE] text-white shadow-xs hover:bg-[#4a66d9]',
+        secondary: 'bg-[#BDC311] text-[#424242] shadow-xs hover:bg-[#a8b00e]',
+        outline: 'bg-transparent shadow-xs hover:bg-[#f5f5f5]',
+        danger: 'bg-[#FF0000] text-white shadow-xs hover:bg-[#d40000]',
+      },
+      size: {
+        small: 'w-fit px-3 text-sm',
+        medium: 'w-1/2 px-4 text-base',
+        large: 'w-full px-5 text-lg',
+      },
+      border: {
+        primary: 'border border-[#5876EE]  hover:bg-[#4a66d9]',
+        secondary: 'border border-[#BDC311]  hover:bg-[#a8b00e]',
+        outline:
+          'border border-[#424242]  hover:bg-[#E2E2E2] dark:border-[#E2E2E2',
+        danger: 'border border-[#FF0000] text-[#FF0000]  hover:bg-[#FF0000]',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'medium',
+    },
+  }
+);
+
+const Button = ({
+  variant,
+  size,
+  border,
+  title,
+  className,
+  ...props
+}: IButtonProps) => {
+  return (
+    <button
+      className={clsx(buttonVariants({ variant, size, border }), className)}
+      {...props}
+    >
+      {title}
+    </button>
+  );
+};
+
+export default Button;

package/src/components/Button/Button.types.ts

@@ -1,7 +1,7 @@
-export type IButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  className?: string;
-  variant: "primary" | "secondary" | "outline" | "danger";
-  size?: "small" | "medium" | "large";
-  border?: "primary" | "secondary" | "outline" | "danger";
-  title: string;
-};
+export type IButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  className?: string;
+  variant: 'primary' | 'secondary' | 'outline' | 'danger';
+  size?: 'small' | 'medium' | 'large';
+  border?: 'primary' | 'secondary' | 'outline' | 'danger';
+  title: string;
+};

package/src/components/Button/index.ts

@@ -1,3 +1,3 @@
-import Button from "./Button";
-
-export default Button;
+import Button from './Button';
+
+export default Button;

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

@@ -0,0 +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>
+        </>
+      }
+    />
+  ),
+};

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,90 @@
+import clsx from 'clsx';
+import React, { useEffect, useRef } from 'react';
+import { IoClose } from 'react-icons/io5';
+
+import { DialogProps } from './Dialog.types';
+
+const DialogComponent: React.FC<DialogProps> = ({
+  isOpen,
+  onClose,
+  children,
+  className,
+  showCloseIcon = true,
+}) => {
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      if (dialogRef.current && !dialogRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleOutsideClick);
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [onClose, isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className='fixed  inset-0 z-50 bg-black/50 flex items-center justify-center px-4'>
+      <div
+        ref={dialogRef}
+        className={clsx(
+          'bg-white relative dark:bg-[#424242] rounded-lg w-full max-w-md shadow-lg',
+          className
+        )}
+      >
+        {showCloseIcon && (
+          <button
+            onClick={onClose}
+            className='absolute top-5 right-4 text-zinc-500 hover:text-zinc-900 dark:hover:text-white'
+          >
+            <IoClose className='w-5 h-5' />
+          </button>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+};
+
+// Slot Components
+const Header: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div className='px-6 py-4 border-b border-zinc-200 dark:border-zinc-700'>
+    <h2 className='text-lg font-medium text-zinc-900 dark:text-white'>
+      {children}
+    </h2>
+  </div>
+);
+
+const Body: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div className='px-6 py-4'>{children}</div>
+);
+
+const Footer: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div className='flex justify-end gap-2 px-6 py-4 border-t border-zinc-200 dark:border-zinc-700'>
+    {children}
+  </div>
+);
+
+const Dialog = Object.assign(DialogComponent, {
+  Header,
+  Body,
+  Footer,
+});
+
+export default Dialog;

package/src/components/Dialog/Dialog.types.ts

@@ -0,0 +1,7 @@
+export type DialogProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  className?: string;
+  showCloseIcon?: boolean;
+};

package/src/components/Dialog/index.ts

@@ -0,0 +1,3 @@
+import Dialog from './Dialog';
+
+export default Dialog;

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

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

package/src/components/Input/Input.tsx

@@ -1,9 +1,31 @@
-type InputProps = {
-  placeholder?: string;
-};
-
-const Input: React.FC<InputProps> = ({ placeholder }) => {
-  return <input placeholder={placeholder}>Input</input>;
-};
-
-export default Input;
+import { cva } from 'class-variance-authority';
+import clsx from 'clsx';
+import React from 'react';
+
+import { InputProps } from './Input.types';
+
+const inputStyles = cva(
+  'outline-none font-inter bg-transparent min-w-[160px] px-4 py-2 placeholder:text-[#3f3f3f] rounded-md border border-[#424242] focus:outline-none  transition-colors duration-200 ease-in-out rounded-md disabled:cursor-not-allowed disabled:opacity-50'
+);
+
+const Input: React.FC<InputProps> = ({
+  placeholder,
+  type,
+  className,
+  label,
+  ...props
+}) => {
+  return (
+    <div className={clsx('flex flex-col', className)}>
+      {label && <label className='mb-1 text-sm text-[#424242]'>{label}</label>}
+      <input
+        type={type}
+        className={clsx(inputStyles(), className)}
+        placeholder={placeholder}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default Input;

package/src/components/Input/Input.types.ts

@@ -0,0 +1,6 @@
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  className?: string;
+  placeholder?: string;
+  type: string;
+  label?: string;
+};

package/src/components/Input/index.ts

@@ -0,0 +1,3 @@
+import Input from './Input';
+
+export default Input;

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

@@ -0,0 +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),
+};

package/src/components/Table/Table.tsx

@@ -0,0 +1,104 @@
+import clsx from 'clsx';
+import React, { useState } from 'react';
+import { FaArrowDown, FaArrowUp } from 'react-icons/fa';
+
+import { TableProps } from './Table.types';
+
+function Table<T extends Record<string, any>>({
+  columns,
+  data,
+  onRowClick,
+  className,
+}: TableProps<T>) {
+  const [sortKey, setSortKey] = useState<keyof T | null>(null);
+  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
+  const [selectedRowIndex, setSelectedRowIndex] = useState<number | null>(null);
+
+  const sortedData = React.useMemo(() => {
+    if (!sortKey) return data;
+
+    const sorted = [...data].sort((a, b) => {
+      if (a[sortKey] < b[sortKey]) return sortOrder === 'asc' ? -1 : 1;
+      if (a[sortKey] > b[sortKey]) return sortOrder === 'asc' ? 1 : -1;
+      return 0;
+    });
+    return sorted;
+  }, [data, sortKey, sortOrder]);
+
+  const handleSort = (key: keyof T, sortable?: boolean) => {
+    if (!sortable) return;
+
+    if (sortKey === key) {
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortKey(key);
+      setSortOrder('asc');
+    }
+  };
+
+  console.log(data);
+
+  return (
+    <div
+      className={clsx(
+        'overflow-auto rounded-lg border border-zinc-700',
+        className
+      )}
+    >
+      <table className='table-fixed min-w-full text-left text-sm text-zinc-100'>
+        <thead className='bg-zinc-900 border-b-2 border-[#5876EE] text-[#5876EE]'>
+          <tr>
+            {columns.map(({ key, label, sortable }) => (
+              <th
+                key={key as string}
+                scope='col'
+                className={clsx(
+                  'cursor-pointer select-none px-6 py-3 font-medium'
+                )}
+                onClick={() => handleSort(key, sortable)}
+              >
+                <div className='inline-flex items-center gap-1'>
+                  {label}{' '}
+                  {sortable &&
+                    sortKey === key &&
+                    (sortOrder === 'asc' ? (
+                      <FaArrowUp className='h-3 w-3 font-light' />
+                    ) : (
+                      <FaArrowDown className='h-3 w-3 font-light' />
+                    ))}
+                </div>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {sortedData.map((row, idx) => (
+            <tr
+              key={idx}
+              onClick={() => {
+                setSelectedRowIndex(idx);
+                onRowClick?.(row);
+              }}
+              className={clsx(
+                selectedRowIndex === idx
+                  ? 'bg-[#BDC311]'
+                  : idx % 2 === 0
+                    ? 'bg-[#1D1B1D]'
+                    : 'bg-[#424242]',
+                'cursor-pointer'
+              )}
+            >
+              {columns.map(({ key, render }) => (
+                <td key={key as string} className='whitespace-nowrap px-6 py-4'>
+                  {render ? render(row[key], row) : row[key]}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Table;

package/src/components/Table/Table.types.ts

@@ -0,0 +1,13 @@
+export interface TableColumn<T> {
+  key: keyof T;
+  label: string;
+  sortable?: boolean;
+  render?: (value: any, row: T) => React.ReactNode;
+}
+
+export interface TableProps<T> {
+  columns: TableColumn<T>[];
+  data: T[];
+  onRowClick?: (row: T) => void;
+  className?: string;
+}

package/src/components/Table/index.ts

@@ -0,0 +1,3 @@
+import Table from './Table';
+
+export default Table;

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