@yusufalperendumlu/component-library 0.0.4 → 0.0.6

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/index.ts

@@ -1,2 +1,5 @@
-export { default as Button } from "./Button";
-export { default as Input } from "./Input";
+export { default as Autocomplete } from './Autocomplete';
+export { default as Button } from './Button';
+export { default as Dialog } from './Dialog';
+export { default as Input } from './Input';
+export { default as Table } from './Table';

package/src/index.ts

@@ -1,3 +1,3 @@
-import "./styles/tailwind.css"
-
-export * from "./components";
+import './styles/tailwind.css';
+
+export * from './components';

package/src/tests/Autocomplete.test.tsx

@@ -0,0 +1,81 @@
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import Autocomplete from "../components/Autocomplete";
+import {
+  Option,
+  AutocompleteProps,
+} from "../components/Autocomplete/Autocomplete.types";
+
+describe("Autocomplete component", () => {
+  const options: Option[] = [
+    { id: 1, name: "Apple" },
+    { id: 2, name: "Banana" },
+    { id: 3, name: "Orange" },
+  ];
+
+  const setup = (props?: Partial<AutocompleteProps>) => {
+    const defaultProps: AutocompleteProps = {
+      options,
+      selected: [],
+      setSelected: jest.fn(),
+      placeholder: "Search...",
+      showChosen: false,
+      ...props,
+    };
+
+    render(<Autocomplete {...defaultProps} />);
+    return defaultProps;
+  };
+
+  it("renders input with placeholder", () => {
+    setup();
+    expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument();
+  });
+
+  it("filters options based on input", () => {
+    setup();
+
+    const input = screen.getByPlaceholderText("Search...");
+    fireEvent.change(input, { target: { value: "ban" } });
+
+    expect(screen.getByText("Banana")).toBeInTheDocument();
+    expect(screen.queryByText("Apple")).not.toBeInTheDocument();
+  });
+
+  it("calls setSelected on item click (single selection)", () => {
+    const mockSetSelected = jest.fn();
+    setup({ setSelected: mockSetSelected });
+
+    const input = screen.getByPlaceholderText("Search...");
+    fireEvent.change(input, { target: { value: "oran" } });
+
+    const option = screen.getByText("Orange");
+    fireEvent.click(option);
+
+    expect(mockSetSelected).toHaveBeenCalledWith([{ id: 3, name: "Orange" }]);
+  });
+
+  it("supports multiple selections when showChosen is true", () => {
+    const mockSetSelected = jest.fn();
+    setup({ setSelected: mockSetSelected, showChosen: true });
+
+    const input = screen.getByPlaceholderText("Search...");
+    fireEvent.change(input, { target: { value: "app" } });
+
+    fireEvent.click(screen.getByText("Apple"));
+
+    expect(mockSetSelected).toHaveBeenCalledWith([{ id: 1, name: "Apple" }]);
+  });
+
+  it("does not show placeholder if item is selected and showChosen is false", () => {
+    setup({
+      selected: [{ id: 2, name: "Banana" }],
+      showChosen: false,
+    });
+
+    expect(screen.queryByPlaceholderText("Search...")).not.toBeInTheDocument();
+    expect(screen.getByText("Banana")).toBeInTheDocument();
+  });
+});

package/src/tests/Button.test.tsx

@@ -1,37 +1,48 @@
-// src/tests/Button.test.tsx
-
-import React from "react";
 import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import Button from "../components/Button";
+import type { IButtonProps } from "../components/Button/Button.types";
 
-describe("Button", () => {
-  test("renders with default styles when no variant is provided", () => {
-    render(<Button title="Default Button" />);
-    const buttonElement = screen.getByRole("button", {
-      name: /default button/i,
-    });
+describe("Button component", () => {
+  it("renders with given title", () => {
+    render(<Button variant="outline" title="Click Me" />);
+    expect(screen.getByText("Click Me")).toBeInTheDocument();
+  });
 
-    expect(buttonElement.style.borderColor).toBe("");
-    expect(buttonElement.style.color).toBe("");
-    expect(buttonElement.style.backgroundColor).toBe("");
+  it("calls onClick when clicked", () => {
+    const handleClick = jest.fn();
+    render(<Button variant="outline" title="Click Me" onClick={handleClick} />);
+    fireEvent.click(screen.getByText("Click Me"));
+    expect(handleClick).toHaveBeenCalledTimes(1);
   });
 
-  test("renders with custom style prop", () => {
-    render(<Button title="Custom Button" style={{ padding: "10px" }} />);
-    const buttonElement = screen.getByRole("button", {
-      name: /custom button/i,
-    });
+  it("is disabled when disabled prop is true", () => {
+    render(<Button variant="danger" title="Disabled" disabled />);
+    const button = screen.getByText("Disabled") as HTMLButtonElement;
+    expect(button).toBeDisabled();
+  });
 
-    expect(buttonElement).toHaveStyle("padding: 10px");
+  it('applies the correct class for variant "primary"', () => {
+    render(<Button title="Primary" variant="primary" />);
+    const button = screen.getByText("Primary");
+    expect(button.className).toMatch(/bg-\[#5876EE\]/); // Tailwind class match
   });
 
-  test("button click event works", () => {
-    const handleClick = jest.fn();
-    render(<Button title="Click Me" onClick={handleClick} />);
-    const buttonElement = screen.getByRole("button", { name: /click me/i });
+  it('applies the correct class for size "large"', () => {
+    render(<Button variant="primary" title="Large Button" size="large" />);
+    const button = screen.getByText("Large Button");
+    expect(button.className).toMatch(/w-full/);
+  });
 
-    buttonElement.click();
-    expect(handleClick).toHaveBeenCalledTimes(1);
+  it("allows custom className via props", () => {
+    render(
+      <Button
+        variant="secondary"
+        title="Custom Class"
+        className="custom-class"
+      />
+    );
+    const button = screen.getByText("Custom Class");
+    expect(button.className).toMatch(/custom-class/);
   });
 });