@nidhi_kumari/component-library 1.0.0

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    children: "Save",
+    variant: "primary",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: "Cancel",
+    variant: "secondary",
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    children: "Saving",
+    loading: true,
+  },
+};

package/src/components/Button/Button.test.tsx

@@ -0,0 +1,8 @@
+// import { render, screen } from "@testing-library/react";
+// import { Button } from "./Button";
+
+// test("renders button", () => {
+//   render(<Button>Save</Button>);
+
+//   expect(screen.getByText("Save")).toBeInTheDocument();
+// });

package/src/components/Button/Button.tsx

@@ -0,0 +1,19 @@
+import "./Button.css";
+import type { ButtonProps } from "./Button.types";
+
+export const Button = ({
+  children,
+  variant = "primary",
+  loading = false,
+  ...props
+}: ButtonProps) => {
+  return (
+    <button
+      className={`btn ${variant}`}
+      disabled={loading || props.disabled}
+      {...props}
+    >
+      {loading ? "Loading..." : children}
+    </button>
+  );
+};

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

@@ -0,0 +1,8 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+  variant?: "primary" | "secondary";
+
+  loading?: boolean;
+}

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+export type { ButtonProps } from "./Button.types";

package/src/components/Header/Header.css

@@ -0,0 +1,17 @@
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 20px 0;
+}
+
+.header-title {
+  font-size: 32px;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.header-subtitle {
+  font-size: 16px;
+  color: #6b7280;
+}

package/src/components/Header/Header.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Header } from "./Header";
+
+const meta: Meta<typeof Header> = {
+  title: "Layout/Header",
+  component: Header,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Header>;
+
+export const Default: Story = {
+  args: {
+    title: "Todo Dashboard",
+    subtitle: "Manage your daily tasks efficiently",
+  },
+};
+
+export const TitleOnly: Story = {
+  args: {
+    title: "Dashboard",
+  },
+};

package/src/components/Header/Header.tsx

@@ -0,0 +1,12 @@
+import "./Header.css";
+import type { HeaderProps } from "./Header.types";
+
+export const Header = ({ title, subtitle }: HeaderProps) => {
+  return (
+    <header className="header">
+      <h1 className="header-title">{title}</h1>
+
+      {subtitle && <p className="header-subtitle">{subtitle}</p>}
+    </header>
+  );
+};

package/src/components/Header/Header.types.ts

@@ -0,0 +1,4 @@
+export interface HeaderProps {
+  title: string;
+  subtitle?: string;
+}

package/src/components/Header/index.ts

@@ -0,0 +1,2 @@
+export { Header } from "./Header";
+export type { HeaderProps } from "./Header.types";

package/src/components/Input/Input.css

@@ -0,0 +1,26 @@
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.input {
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.input:focus {
+  outline: none;
+  border-color: royalblue;
+}
+
+.error {
+  border-color: red;
+}
+
+.error-text {
+  color: red;
+  font-size: 12px;
+}

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

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "./Input";
+
+const meta: Meta<typeof Input> = {
+  title: "Components/Input",
+  component: Input,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "Enter your name",
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    label: "Username",
+    placeholder: "Enter username",
+  },
+};
+
+export const Password: Story = {
+  args: {
+    label: "Password",
+    placeholder: "Enter password",
+    type: "password",
+  },
+};
+
+export const Error: Story = {
+  args: {
+    label: "Email",
+    placeholder: "Enter email",
+    error: "Email is required",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "Disabled input",
+    disabled: true,
+  },
+};

package/src/components/Input/Input.tsx

@@ -0,0 +1,14 @@
+import "./Input.css";
+import type { InputProps } from "./Input.types";
+
+export const Input = ({ label, error, ...props }: InputProps) => {
+  return (
+    <div className="input-wrapper">
+      {label && <label>{label}</label>}
+
+      <input className={`input ${error ? "error" : ""}`} {...props} />
+
+      {error && <p className="error-text">{error}</p>}
+    </div>
+  );
+};

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

@@ -0,0 +1,6 @@
+import type { InputHTMLAttributes } from "react";
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+}

package/src/components/Input/index.ts

@@ -0,0 +1,2 @@
+export { Input } from "./Input";
+export type { InputProps } from "./Input.types";

package/src/components/SearchInput/SearchInput.css

@@ -0,0 +1,20 @@
+.search-input {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.search-icon {
+  font-size: 18px;
+}
+
+.clear-button {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.clear-button:hover {
+  color: red;
+}

package/src/components/SearchInput/SearchInput.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SearchInput } from "./SearchInput";
+
+const meta: Meta<typeof SearchInput> = {
+  title: "Components/SearchInput",
+  component: SearchInput,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SearchInput>;
+
+export const Default: Story = {
+  args: {
+    value: "",
+    placeholder: "Search products...",
+    onChange: (value) => console.log(value),
+    onClear: () => console.log("Clear"),
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    value: "Apple",
+    placeholder: "Search products...",
+    onChange: (value) => console.log(value),
+    onClear: () => console.log("Clear"),
+  },
+};

package/src/components/SearchInput/SearchInput.tsx

@@ -0,0 +1,30 @@
+import "./SearchInput.css";
+
+import { Input } from "../Input";
+
+import type { SearchInputProps } from "./SearchInput.types";
+
+export const SearchInput = ({
+  value,
+  placeholder = "Search...",
+  onChange,
+  onClear,
+}: SearchInputProps) => {
+  return (
+    <div className="search-input">
+      <span className="search-icon">🔍</span>
+
+      <Input
+        value={value}
+        placeholder={placeholder}
+        onChange={(e) => onChange(e.target.value)}
+      />
+
+      {value && (
+        <button className="clear-button" onClick={onClear} type="button">
+          ✖
+        </button>
+      )}
+    </div>
+  );
+};

package/src/components/SearchInput/SearchInput.types.ts

@@ -0,0 +1,6 @@
+export interface SearchInputProps {
+  value: string;
+  placeholder?: string;
+  onChange: (value: string) => void;
+  onClear?: () => void;
+}

package/src/components/SearchInput/index.ts

@@ -0,0 +1,2 @@
+export { SearchInput } from "./SearchInput";
+export type { SearchInputProps } from "./SearchInput.types";

package/src/components/SlotManagement/SlotManagement.css

@@ -0,0 +1,223 @@
+/* SlotManagement styles */
+.sm-root {
+  font-family:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial;
+  padding: 20px;
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.sm-header {
+  margin-bottom: 24px;
+}
+
+.sm-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+}
+
+.sm-table-wrapper {
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  margin-bottom: 24px;
+}
+
+.sm-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.sm-table th {
+  background: #2c3e50;
+  color: #fff;
+  text-align: left;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 12px 12px;
+  border: none;
+}
+
+.sm-slot-header-row {
+  background: #f0f0f0;
+  border-top: 2px solid #ddd;
+  border-bottom: 1px solid #ddd;
+}
+
+.sm-slot-header-cell {
+  padding: 14px 12px;
+  font-size: 12px;
+}
+
+.sm-slot-header-content {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.sm-slot-name {
+  font-weight: 600;
+  color: #333;
+  font-size: 13px;
+}
+
+.sm-slot-constraints {
+  font-size: 11px;
+  color: #666;
+  background: #e8e8e8;
+  padding: 4px 8px;
+  border-radius: 3px;
+}
+
+.sm-slot-status {
+  font-size: 11px;
+  color: #2f7d32;
+  background: #e8f5e9;
+  padding: 4px 8px;
+  border-radius: 3px;
+}
+
+.sm-slot-status.is-full {
+  color: #b42318;
+  background: #fef3f2;
+}
+
+.sm-table td {
+  padding: 12px;
+  font-size: 12px;
+  border-bottom: 1px solid #f5f5f5;
+  color: #333;
+}
+
+.sm-table tbody tr:not(.sm-slot-header-row):hover {
+  background: #f9f9f9;
+}
+
+.sm-checkbox-col {
+  width: 40px;
+  text-align: center;
+  padding: 12px;
+}
+
+.sm-checkbox-col input {
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+}
+
+/* Stepper styles */
+.sm-stepper {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+}
+
+.sm-stepper-btn {
+  background: transparent;
+  border: none;
+  padding: 6px 8px;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  color: #666;
+  transition: background 0.2s;
+}
+
+.sm-stepper-btn:hover {
+  background: #f0f0f0;
+}
+
+.sm-stepper-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.sm-stepper-input {
+  min-width: 35px;
+  text-align: center;
+  padding: 4px 4px;
+  border: none;
+  font-size: 12px;
+  background: transparent;
+  outline: none;
+}
+
+.sm-stepper-input::-webkit-outer-spin-button,
+.sm-stepper-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.sm-stepper-input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+/* Selection info */
+.sm-selection-info {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 20px;
+  padding: 12px 0;
+  text-align: center;
+}
+
+/* Footer buttons */
+.sm-footer {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.sm-btn {
+  padding: 10px 32px;
+  font-size: 14px;
+  font-weight: 600;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  min-width: 120px;
+}
+
+.sm-btn-secondary {
+  background: transparent;
+  color: #333;
+  border: 2px solid #d4d4d4;
+}
+
+.sm-btn-secondary:hover {
+  border-color: #999;
+  color: #000;
+}
+
+.sm-btn-primary {
+  background: #f5a623;
+  color: #fff;
+  border-color: #f5a623;
+}
+
+.sm-btn-primary:hover {
+  background: #e08e1d;
+  border-color: #e08e1d;
+}
+
+.sm-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/components/SlotManagement/SlotManagement.stories.tsx

@@ -0,0 +1,12 @@
+import { SlotManagement } from "./SlotManagement";
+
+export default {
+  title: "Components/SlotManagement",
+  component: SlotManagement,
+};
+
+export const Primary = () => (
+  <div style={{ padding: 16 }}>
+    <SlotManagement />
+  </div>
+);