@evenicanpm/storefront-core 1.0.5 → 1.1.0

package/src/pages-v2/product-details/product-tabs.tsx

@@ -47,7 +47,7 @@ function CustomTabPanel(props: TabPanelProps) {
   );
 }
 
-const TabsContext = createContext<TabsContext>(null);
+const TabsContext = createContext<TabsContext | null>(null);
 
 /**
  * @category Compound Component
@@ -70,7 +70,12 @@ export default function ProductTabs({ productAttributes, children }: Props) {
  * @category Sub-Component
  */
 ProductTabs.Tabs = ({ children }: { children: React.ReactNode }) => {
-  const { selectedOption, handleOptionClick } = useContext(TabsContext);
+  const ctx = useContext(TabsContext);
+  if (!ctx)
+    throw new Error(
+      "ProductTabs.Tabs must be used inside a ProductTabsContext",
+    );
+  const { selectedOption, handleOptionClick } = ctx;
   return (
     <StyledTabs
       textColor="primary"
@@ -100,7 +105,12 @@ ProductTabs.Content = ({
   index: number;
   children: React.ReactNode;
 }) => {
-  const { selectedOption } = useContext(TabsContext);
+  const ctx = useContext(TabsContext);
+  if (!ctx)
+    throw new Error(
+      "ProductTabs.Tabs must be used inside a ProductTabsContext",
+    );
+  const { selectedOption } = ctx;
   return (
     <CustomTabPanel value={selectedOption} index={index}>
       {children}
@@ -112,6 +122,11 @@ ProductTabs.Content = ({
  * @category Sub-Component
  */
 ProductTabs.Description = () => {
-  const { productAttributes } = useContext(TabsContext);
+  const ctx = useContext(TabsContext);
+  if (!ctx)
+    throw new Error(
+      "ProductTabs.Tabs must be used inside a ProductTabsContext",
+    );
+  const { productAttributes } = ctx;
   return <ProductDescription attributes={productAttributes} />;
 };

package/src/pages-v2/product-details/related-products.tsx

@@ -42,10 +42,10 @@ export default function RelatedProducts({ RecordId }: Props) {
                   <ProductCard.Rating />
                   <ProductCard.Price />
                 </ProductCard.Info>
-                <ProductCard.Actions>
+                {/* <ProductCard.Actions>
                   <ProductCard.QuantityButtons />
-                  {/* <ProductCard.HoverActions /> */}
-                </ProductCard.Actions>
+                  <ProductCard.HoverActions />
+                </ProductCard.Actions> */}
               </ProductCard.Body>
             </ProductCard>
           </Grid>

package/src/pages-v2/quickorder/context.ts

@@ -16,7 +16,7 @@ export type QuickOrderContextType = {
   handleRowUpdate: (
     id: number,
     value: string,
-    quantity: string
+    quantity: string,
   ) => Promise<void>;
   handleRowDelete: (id: number) => void;
   handleAddRows: () => void;
@@ -27,7 +27,7 @@ export type QuickOrderContextType = {
 };
 
 export const QuickOrderContext = createContext<QuickOrderContextType | null>(
-  null
+  null,
 );
 
 export const useQuickOrder = () => {

package/src/pages-v2/quickorder/order-upload.tsx

@@ -39,7 +39,7 @@ export default function OrderUpload({ onUploadItems }: OrderUploadProps) {
 
   const handleReject = (rejections: FileRejection[]) => {
     const msgs = rejections.map(
-      (r) => `${r.file.name} ${t("fileRejectionMsg")}`
+      (r) => `${r.file.name} ${t("fileRejectionMsg")}`,
     );
     setFileRejections(msgs);
   };
@@ -137,7 +137,11 @@ export default function OrderUpload({ onUploadItems }: OrderUploadProps) {
           ))}
         </Alert>
       )}
-      <DropZone onChange={getFiles} handleReject={handleReject} accept={accept} />
+      <DropZone
+        onChange={getFiles}
+        handleReject={handleReject}
+        accept={accept}
+      />
     </>
   );
 }

package/src/pages-v2/quickorder/provider.tsx

@@ -26,7 +26,9 @@ export default function QuickOrderProvider({
   });
 
   const initTable = useCallback(() => {
-    const newRows = Array.from({ length: 3 }, (_, i) => generateEmptyRow(i + 1));
+    const newRows = Array.from({ length: 3 }, (_, i) =>
+      generateEmptyRow(i + 1),
+    );
     setRows(newRows);
   }, []);
 
@@ -36,7 +38,7 @@ export default function QuickOrderProvider({
       rowId: number,
       value: string,
       found: boolean,
-      qty: string
+      qty: string,
     ): QuickOrderRowData => {
       let rowError = RowError.None;
       if (
@@ -56,7 +58,7 @@ export default function QuickOrderProvider({
         rowError,
       };
     },
-    []
+    [],
   );
 
   const getProductSearchResults = useCallback(
@@ -64,13 +66,13 @@ export default function QuickOrderProvider({
       const results = await searchProducts({ itemIds });
       return results;
     },
-    [searchProducts]
+    [searchProducts],
   );
 
   const handleRowUpdate = async (
     id: number,
     value: string,
-    quantity: string
+    quantity: string,
   ) => {
     const updated = [...rows];
     const idx = updated.findIndex((row) => row.id === id);
@@ -84,7 +86,13 @@ export default function QuickOrderProvider({
       product = (response && response[0]) || null;
     }
 
-    updated[idx] = generateRowData(!!product ? product : null, id, value, !!product, quantity);
+    updated[idx] = generateRowData(
+      !!product ? product : null,
+      id,
+      value,
+      !!product,
+      quantity,
+    );
     setRows(updated);
   };
 
@@ -136,11 +144,17 @@ export default function QuickOrderProvider({
     items.forEach((it: any) => {
       const product = response?.find(
         (r: any) =>
-          r.ItemId?.toLowerCase() === it.itemId.toString().toLowerCase()
+          r.ItemId?.toLowerCase() === it.itemId.toString().toLowerCase(),
       );
       const qty = it.qty || 1;
       updated.push(
-        generateRowData(product || null, rowId++, it.itemId, !!product, qty.toString())
+        generateRowData(
+          product || null,
+          rowId++,
+          it.itemId,
+          !!product,
+          qty.toString(),
+        ),
       );
     });
 
@@ -155,7 +169,8 @@ export default function QuickOrderProvider({
     if (!rows.length) return;
     const header = "SKU,Quantity\n";
     const csv =
-      header + rows.map(({ value, quantity }) => `${value},${quantity}`).join("\n");
+      header +
+      rows.map(({ value, quantity }) => `${value},${quantity}`).join("\n");
     const uri = "data:text/csv;charset=utf-8," + csv;
     const link = document.createElement("a");
     link.setAttribute("href", encodeURI(uri));

package/src/pages-v2/quickorder/quick-order-actions.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { FlexBox } from "@/components/_components/flex-box/index";
-import { BorderShadowCard } from "@/components/BoxShadowCard";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import { BorderShadowCard } from "@evenicanpm/storefront-core/src/components-v2/BoxShadowCard";
 import { Button } from "@mui/material";
 import { useQuickOrder } from "./context";
 import { useTranslations } from "next-intl";

package/src/pages-v2/quickorder/quick-order-header.tsx

@@ -1,8 +1,11 @@
 "use client";
 
-import { FlexBox } from "@/components/_components/flex-box/index";
-import { BorderShadowCard } from "@/components/BoxShadowCard";
-import { H2, Span } from "@/components/_components/Typography";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import { BorderShadowCard } from "@evenicanpm/storefront-core/src/components-v2/BoxShadowCard";
+import {
+  H2,
+  Span,
+} from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import { useTranslations } from "next-intl";
 
 const QuickOrderHeader = () => {

package/src/pages-v2/quickorder/quick-order-row.tsx

@@ -62,7 +62,7 @@ export default function QuickOrderRow({
       _.debounce((val: string) => {
         onRowChange(id, val, quantity);
       }, 500),
-    [onRowChange, id, quantity]
+    [onRowChange, id, quantity],
   );
 
   const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {

package/src/pages-v2/quickorder/quick-order-table.tsx

@@ -8,13 +8,14 @@ import {
   TableHead,
   TableRow,
 } from "@mui/material";
-import { BorderShadowCard } from "@/components/BoxShadowCard";
+import { BorderShadowCard } from "@evenicanpm/storefront-core/src/components-v2/BoxShadowCard";
 import QuickOrderRow from "./quick-order-row";
 import { useQuickOrder } from "./context";
 import { useTranslations } from "next-intl";
 
 const QuickOrderTable = () => {
-  const { rows, handleRowUpdate, handleRowDelete, handleAddRows } = useQuickOrder();
+  const { rows, handleRowUpdate, handleRowDelete, handleAddRows } =
+    useQuickOrder();
   const t = useTranslations("QuickOrder");
 
   return (
@@ -29,9 +30,14 @@ const QuickOrderTable = () => {
               <TableCell sx={{ color: "white", width: { xs: "20%" } }}>
                 {t("Table.quantity")}
               </TableCell>
-              <TableCell sx={{ color: "white" }}>{t("Table.itemName")}</TableCell>
+              <TableCell sx={{ color: "white" }}>
+                {t("Table.itemName")}
+              </TableCell>
               <TableCell
-                sx={{ color: "white", display: { xs: "none", sm: "table-cell" } }}
+                sx={{
+                  color: "white",
+                  display: { xs: "none", sm: "table-cell" },
+                }}
               >
                 {t("Table.price")}
               </TableCell>

package/src/pages-v2/quickorder/quick-order-upload.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { FlexBox } from "@/components/_components/flex-box/index";
-import { BorderShadowCard } from "@/components/BoxShadowCard";
+import { FlexBox } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
+import { BorderShadowCard } from "@evenicanpm/storefront-core/src/components-v2/BoxShadowCard";
 import OrderUpload from "./order-upload";
 import { useQuickOrder } from "./context";
 

package/src/stories/Button.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+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#action-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,35 @@
+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>
+  );
+};