@yusufalperendumlu/component-library 0.0.6 → 0.0.7

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/styles/tailwind.css

@@ -1,124 +1,124 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-/* 
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-} */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/* 
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+} */

package/src/tests/Autocomplete.test.tsx

@@ -1,81 +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();
-  });
-});
+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,48 +1,48 @@
-import "@testing-library/jest-dom";
-import { render, screen, fireEvent } from "@testing-library/react";
-import Button from "../components/Button";
-import type { IButtonProps } from "../components/Button/Button.types";
-
-describe("Button component", () => {
-  it("renders with given title", () => {
-    render(<Button variant="outline" title="Click Me" />);
-    expect(screen.getByText("Click Me")).toBeInTheDocument();
-  });
-
-  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);
-  });
-
-  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();
-  });
-
-  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
-  });
-
-  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/);
-  });
-
-  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/);
-  });
-});
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Button from '../components/Button';
+import type { IButtonProps } from '../components/Button/Button.types';
+
+describe('Button component', () => {
+  it('renders with given title', () => {
+    render(<Button variant='outline' title='Click Me' />);
+    expect(screen.getByText('Click Me')).toBeInTheDocument();
+  });
+
+  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);
+  });
+
+  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();
+  });
+
+  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
+  });
+
+  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/);
+  });
+
+  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/);
+  });
+});