@nidhi_kumari/component-library 1.0.0

package/src/components/SlotManagement/SlotManagement.tsx

@@ -0,0 +1,217 @@
+import React, { useState } from "react";
+import "./SlotManagement.css";
+import slotsData from "./slots.json";
+import type { SlotWithSelection } from "./SlotManagement.types";
+
+const buildInitial = (): SlotWithSelection[] => {
+  const raw = slotsData.slots || [];
+  return raw.map((s) => ({
+    ...s,
+    products: (s.products || []).map((p) => ({ ...p, selectedQty: 0 })),
+  }));
+};
+
+export const SlotManagement: React.FC = () => {
+  const [slots, setSlots] = useState<SlotWithSelection[]>(() => buildInitial());
+  const [checkedProducts, setCheckedProducts] = useState<Map<string, boolean>>(
+    new Map(),
+  );
+
+  const toggleCheck = (slotIndex: number, productIndex: number) => {
+    const key = `${slotIndex}-${productIndex}`;
+    const newChecked = new Map(checkedProducts);
+    newChecked.set(key, !checkedProducts.get(key));
+    setCheckedProducts(newChecked);
+  };
+
+  const getSlotSelectedTotal = (slotIndex: number) => {
+    return (
+      slots[slotIndex]?.products.reduce(
+        (sum, product) => sum + product.selectedQty,
+        0,
+      ) ?? 0
+    );
+  };
+
+  const updateSelected = (
+    slotIndex: number,
+    productIndex: number,
+    next: number,
+  ) => {
+    setSlots((prev) => {
+      const copy = prev.map((s) => ({
+        ...s,
+        products: s.products.map((p) => ({ ...p })),
+      }));
+      const slot = copy[slotIndex];
+      const currentProduct = slot.products[productIndex];
+      const currentTotal = slot.products.reduce(
+        (sum, product) => sum + product.selectedQty,
+        0,
+      );
+      const otherTotal = currentTotal - currentProduct.selectedQty;
+      const maxAllowed = slot.maxQty - otherTotal;
+      const clampedNext = Math.max(0, Math.min(next, maxAllowed));
+
+      currentProduct.selectedQty = clampedNext;
+      return copy;
+    });
+  };
+
+  const increment = (slotIndex: number, productIndex: number) => {
+    const current = slots[slotIndex].products[productIndex].selectedQty;
+    const currentTotal = getSlotSelectedTotal(slotIndex);
+    const slotLimit = slots[slotIndex].maxQty;
+
+    if (currentTotal >= slotLimit) {
+      return;
+    }
+
+    updateSelected(slotIndex, productIndex, current + 1);
+  };
+
+  const decrement = (slotIndex: number, productIndex: number) => {
+    const current = slots[slotIndex].products[productIndex].selectedQty;
+    updateSelected(slotIndex, productIndex, current - 1);
+  };
+
+  const totalChecked = Array.from(checkedProducts.values()).filter(
+    (v) => v,
+  ).length;
+  const totalProducts = slots.reduce(
+    (acc, slot) => acc + slot.products.length,
+    0,
+  );
+
+  const isValidationComplete = slots.every((slot) => {
+    const slotTotal = slot.products.reduce(
+      (sum, product) => sum + product.selectedQty,
+      0,
+    );
+
+    return slotTotal >= slot.minQty && slotTotal <= slot.maxQty;
+  });
+
+  return (
+    <div className="sm-root">
+      <div className="sm-header">
+        <h2 className="sm-title">Catalog Search</h2>
+      </div>
+
+      <div className="sm-table-wrapper">
+        <table className="sm-table">
+          <thead>
+            <tr>
+              <th className="sm-checkbox-col">
+                <input type="checkbox" />
+              </th>
+              <th>Product</th>
+              <th>SKU</th>
+              <th>Size</th>
+              <th>Qty</th>
+              <th>Total Price</th>
+              <th>Total PR/BV</th>
+            </tr>
+          </thead>
+          <tbody>
+            {slots.map((slot, sIdx) => (
+              <React.Fragment key={sIdx}>
+                <tr className="sm-slot-header-row">
+                  <td colSpan={7} className="sm-slot-header-cell">
+                    <div className="sm-slot-header-content">
+                      <span className="sm-slot-name">{slot.description}</span>
+                      <span className="sm-slot-constraints">
+                        Min: {slot.minQty} | Max: {slot.maxQty}
+                      </span>
+                      {(() => {
+                        const slotTotal = getSlotSelectedTotal(sIdx);
+                        const isFull = slotTotal >= slot.maxQty;
+                        return (
+                          <span
+                            className={`sm-slot-status ${isFull ? "is-full" : ""}`}
+                          >
+                            {isFull
+                              ? "Maximum reached"
+                              : `${slot.maxQty - slotTotal} remaining`}
+                          </span>
+                        );
+                      })()}
+                    </div>
+                  </td>
+                </tr>
+                {slot.products.map((p, pIdx) => {
+                  const isChecked =
+                    checkedProducts.get(`${sIdx}-${pIdx}`) || false;
+                  const slotTotal = getSlotSelectedTotal(sIdx);
+                  const isSlotFull = slotTotal >= slot.maxQty;
+                  return (
+                    <tr key={`${sIdx}-${pIdx}`} className="sm-row">
+                      <td className="sm-checkbox-col">
+                        <input
+                          type="checkbox"
+                          checked={isChecked}
+                          onChange={() => toggleCheck(sIdx, pIdx)}
+                        />
+                      </td>
+                      <td>{p.name}</td>
+                      <td>{p.sku}</td>
+                      <td>EA</td>
+                      <td>
+                        <div className="sm-stepper">
+                          <button
+                            className="sm-stepper-btn"
+                            onClick={() => decrement(sIdx, pIdx)}
+                            aria-label={`Decrease ${p.name}`}
+                            disabled={p.selectedQty <= 0}
+                          >
+                            −
+                          </button>
+                          <input
+                            type="number"
+                            className="sm-stepper-input"
+                            value={p.selectedQty}
+                            onChange={(e) =>
+                              updateSelected(
+                                sIdx,
+                                pIdx,
+                                parseInt(e.target.value) || 0,
+                              )
+                            }
+                          />
+                          <button
+                            className="sm-stepper-btn"
+                            onClick={() => increment(sIdx, pIdx)}
+                            aria-label={`Increase ${p.name}`}
+                            disabled={isSlotFull}
+                          >
+                            +
+                          </button>
+                        </div>
+                      </td>
+                      <td>${(p.price * p.selectedQty).toFixed(2)}</td>
+                      <td>{(p.price * p.selectedQty * 1.15).toFixed(2)}</td>
+                    </tr>
+                  );
+                })}
+              </React.Fragment>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="sm-selection-info">
+        ({totalChecked}/{totalProducts}) Products Selected
+      </div>
+
+      <div className="sm-footer">
+        <button className="sm-btn sm-btn-secondary">Back</button>
+        <button
+          className="sm-btn sm-btn-primary"
+          disabled={!isValidationComplete}
+        >
+          Confirm
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/components/SlotManagement/SlotManagement.types.ts

@@ -0,0 +1,22 @@
+export type Product = {
+  name: string;
+  sku: string;
+  qty: number; // stock or available qty
+  price: number;
+};
+
+export type ProductWithSelection = Product & {
+  selectedQty: number;
+};
+
+export type Slot = {
+  maxQty: number;
+  minQty: number;
+  description: string;
+  type: string;
+  products: Product[];
+};
+
+export type SlotWithSelection = Omit<Slot, "products"> & {
+  products: ProductWithSelection[];
+};

package/src/components/SlotManagement/slots.json

@@ -0,0 +1,40 @@
+{
+  "slots": [
+    {
+      "maxQty": 4,
+      "minQty": 1,
+      "description": "Health and Supplementation",
+      "type": "Health",
+      "products": [
+        {"name": "Plain Digest™ Scrub Buah Esgorot de Fiber Acorn Incredible", "sku": "10N906", "qty": 5, "price": 36.00},
+        {"name": "Produkti", "sku": "12087ICO", "qty": 3, "price": 250.00},
+        {"name": "Shimmalty Advanced™", "sku": "11708SCO", "qty": 7, "price": 138.50},
+        {"name": "Omega 3 Plus 90", "sku": "AB09CO", "qty": 4, "price": 134.70}
+      ]
+    },
+      {
+        "maxQty": 10,
+        "minQty": 2,
+        "description": "Health and Supplementation",
+        "type": "Health",
+        "products": [
+          {"name": "Plain Digest™ Scrub Buah Esgorot de Fiber Acorn Incredible", "sku": "10N906", "qty": 5, "price": 36.00},
+          {"name": "Produkti", "sku": "12087ICO", "qty": 3, "price": 250.00},
+          {"name": "Shimmalty Advanced™", "sku": "11708SCO", "qty": 7, "price": 138.50},
+          {"name": "Omega 3 Plus 90", "sku": "AB09CO", "qty": 4, "price": 134.70}
+        ]
+      },
+      {
+        "maxQty": 10,
+        "minQty": 2,
+        "description": "Health and Supplementation",
+        "type": "Health",
+        "products": [
+          {"name": "Plain Digest™ Scrub Buah Esgorot de Fiber Acorn Incredible", "sku": "10N906", "qty": 5, "price": 36.00},
+          {"name": "Produkti", "sku": "12087ICO", "qty": 3, "price": 250.00},
+          {"name": "Shimmalty Advanced™", "sku": "11708SCO", "qty": 7, "price": 138.50},
+          {"name": "Omega 3 Plus 90", "sku": "AB09CO", "qty": 4, "price": 134.70}
+        ]
+      }
+  ]
+}     

package/src/index.css

@@ -0,0 +1,111 @@
+/* :root {
+  --text: #6b6375;
+  --text-h: #08060d;
+  --bg: #fff;
+  --border: #e5e4e7;
+  --code-bg: #f4f3ec;
+  --accent: #aa3bff;
+  --accent-bg: rgba(170, 59, 255, 0.1);
+  --accent-border: rgba(170, 59, 255, 0.5);
+  --social-bg: rgba(244, 243, 236, 0.5);
+  --shadow:
+    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+
+  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --mono: ui-monospace, Consolas, monospace;
+
+  font: 18px/145% var(--sans);
+  letter-spacing: 0.18px;
+  color-scheme: light dark;
+  color: var(--text);
+  background: var(--bg);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @media (max-width: 1024px) {
+    font-size: 16px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #9ca3af;
+    --text-h: #f3f4f6;
+    --bg: #16171d;
+    --border: #2e303a;
+    --code-bg: #1f2028;
+    --accent: #c084fc;
+    --accent-bg: rgba(192, 132, 252, 0.15);
+    --accent-border: rgba(192, 132, 252, 0.5);
+    --social-bg: rgba(47, 48, 58, 0.5);
+    --shadow:
+      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
+  }
+
+  #social .button-icon {
+    filter: invert(1) brightness(2);
+  }
+}
+
+#root {
+  width: 1126px;
+  max-width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  border-inline: 1px solid var(--border);
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+h1,
+h2 {
+  font-family: var(--heading);
+  font-weight: 500;
+  color: var(--text-h);
+}
+
+h1 {
+  font-size: 56px;
+  letter-spacing: -1.68px;
+  margin: 32px 0;
+  @media (max-width: 1024px) {
+    font-size: 36px;
+    margin: 20px 0;
+  }
+}
+h2 {
+  font-size: 24px;
+  line-height: 118%;
+  letter-spacing: -0.24px;
+  margin: 0 0 8px;
+  @media (max-width: 1024px) {
+    font-size: 20px;
+  }
+}
+p {
+  margin: 0;
+}
+
+code,
+.counter {
+  font-family: var(--mono);
+  display: inline-flex;
+  border-radius: 4px;
+  color: var(--text-h);
+}
+
+code {
+  font-size: 15px;
+  line-height: 135%;
+  padding: 4px 8px;
+  background: var(--code-bg);
+} */

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/stories/Button.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { fn } from 'storybook/test';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/src/stories/Button.tsx

@@ -0,0 +1,39 @@
+import "./button.css";
+
+export interface ButtonProps {
+  /** Is this the principal call to action on the page? */
+  primary?: boolean;
+  /** What background color to use */
+  backgroundColor?: string;
+  /** How large should the button be? */
+  size?: "small" | "medium" | "large";
+  /** Button contents */
+  label: string;
+  /** Optional click handler */
+  onClick?: () => void;
+}
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  size = "medium",
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary
+    ? "storybook-button--primary"
+    : "storybook-button--secondary";
+  return (
+    <button
+      type="button"
+      className={["storybook-button", `storybook-button--${size}`, mode].join(
+        " ",
+      )}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};