@shoplflow/templates 0.1.35 → 0.1.37

package/dist/index.cjs

@@ -1596,6 +1596,156 @@ exports.Table = Object.assign(Table, {
   Button: exports.TableButton,
   Badge: exports.TableBadge
 });
+var AttachmentListContext = React6.createContext({});
+var AttachmentList = (_a) => {
+  var _b = _a, {
+    onDelete,
+    children
+  } = _b, rest = __objRest(_b, [
+    "onDelete",
+    "children"
+  ]);
+  const contextValue = {
+    onDelete
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(AttachmentListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(base.StackContainer.Horizontal, __spreadProps(__spreadValues({ spacing: "spacing08" }, rest), { children })) });
+};
+exports.AttachmentList = AttachmentList;
+var StyledSeparator = styled2__default.default.div`
+  width: 2px;
+  height: 2px;
+  background-color: var(--neutral400);
+  border-radius: 0.5px;
+  flex-shrink: 0;
+`;
+var AttachmentItemSingle = ({ item, onDelete }) => {
+  const formatFileSize = (bytes) => {
+    if (bytes === 0) {
+      return "0 Bytes";
+    }
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(base.StackContainer.Horizontal, { width: "inherit", align: "center", padding: "0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(base.StackContainer.Horizontal, { align: "center", spacing: "spacing04", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "body2_400", color: "neutral700", lineClamp: 1, textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.name }),
+      /* @__PURE__ */ jsxRuntime.jsx(StyledSeparator, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "body2_400", color: "neutral400", children: item.extension }),
+      /* @__PURE__ */ jsxRuntime.jsx(StyledSeparator, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "body2_400", color: "neutral400", children: formatFileSize(item.size) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(base.IconButton, { sizeVar: "S", styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(
+      base.Icon,
+      {
+        iconSource: shoplAssets.DeleteIcon,
+        sizeVar: "S",
+        color: "neutral350",
+        onClick: (e) => onDelete == null ? void 0 : onDelete(e)
+      }
+    ) })
+  ] });
+};
+exports.AttachmentItemSingle = AttachmentItemSingle;
+var AttachmentItemMulti = ({ item, children, thumbnail, onDelete }) => {
+  const formatFileSize = (bytes) => {
+    if (bytes === 0) {
+      return "0 Bytes";
+    }
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    base.StackContainer.Horizontal,
+    {
+      align: "center",
+      width: "inherit",
+      minHeight: "48px",
+      padding: "8px",
+      spacing: "spacing08",
+      radius: "borderRadius08",
+      onMouseEnter: (e) => {
+        e.currentTarget.style.backgroundColor = "rgba(153, 153, 153, 0.05)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.backgroundColor = "transparent";
+      },
+      children: [
+        thumbnail,
+        /* @__PURE__ */ jsxRuntime.jsx(base.StackContainer.Vertical, { flex: "1", align: "flex-start", height: "100%", children: item ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "body1_400", color: "neutral700", lineClamp: 1, textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "caption_400", color: "neutral400", children: formatFileSize(item.size) })
+        ] }) : children }),
+        /* @__PURE__ */ jsxRuntime.jsx(base.IconButton, { sizeVar: "S", styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(
+          base.Icon,
+          {
+            iconSource: shoplAssets.DeleteIcon,
+            sizeVar: "S",
+            color: "neutral350",
+            onClick: (e) => onDelete == null ? void 0 : onDelete(e)
+          }
+        ) })
+      ]
+    }
+  );
+};
+exports.AttachmentItemMulti = AttachmentItemMulti;
+var AttachmentThumbnail = ({ iconSource, url }) => {
+  if (url) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      base.StackContainer,
+      {
+        width: "32px",
+        height: "32px",
+        radius: "borderRadius04",
+        style: {
+          overflow: "hidden",
+          flexShrink: 0
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: url,
+            alt: "thumbnail",
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover"
+            }
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    base.StackContainer,
+    {
+      direction: "row",
+      align: "center",
+      justify: "center",
+      width: "32px",
+      height: "32px",
+      background: "neutral0",
+      radius: "borderRadius04",
+      style: {
+        border: "1px solid var(--neutral200)",
+        flexShrink: 0
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(base.Icon, { iconSource, sizeVar: "S", color: "neutral700" })
+    }
+  );
+};
+exports.AttachmentThumbnail = AttachmentThumbnail;
+var AttachmentItem = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+AttachmentItem.Single = exports.AttachmentItemSingle;
+AttachmentItem.Multi = exports.AttachmentItemMulti;
+AttachmentItem.Thumbnail = exports.AttachmentThumbnail;
+exports.AttachmentItem = AttachmentItem;
 
 Object.defineProperty(exports, 'createColumnHelper', {
   enumerable: true,

package/dist/index.d.cts

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { TextProps, TooltipProps, IconButtonProps, IconButton } from '@shoplflow/base';
+import { TextProps, TooltipProps, IconButtonProps, IconButton, StackContainerOptionProps } from '@shoplflow/base';
 import { ChildrenProps } from '@shoplflow/base/src/utils/type/ComponentProps';
 import * as React$1 from 'react';
 import React__default, { ReactNode, ReactElement, RefObject, Dispatch, SetStateAction, CSSProperties, ButtonHTMLAttributes } from 'react';
 import { Table as Table$1, ColumnDef, Header, RowData, ColumnFilter } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
+import { IconSource } from '@shoplflow/shopl-assets';
 
 declare type ActionsProps = {
     children: ReactNode;
@@ -292,4 +293,47 @@ declare type TableComponentType = typeof Table & {
 };
 declare const TableComponent: TableComponentType;
 
-export { ActionsProps, DescriptionProps, FixedColumn, PinningPosition, TableComponent as Table, TableBadge, TableButton, TableContextType, TableHeadCellProps, TableMainProps, TablePaginationProps, TableProps, TableToolbarProps, TitleGroup, TitleGroupHeaderProps, TitleGroupHelpIconProps, TitleGroupProps };
+interface AttachmentItemData {
+    name: string;
+    extension: string;
+    size: number;
+}
+interface AttachmentListProps {
+    onDelete?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    children: React.ReactNode;
+}
+interface AttachmentItemSingleProps {
+    item: AttachmentItemData;
+    onDelete?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+interface AttachmentItemMultiProps {
+    item?: AttachmentItemData | null;
+    thumbnail?: React.ReactNode;
+    children?: React.ReactNode;
+    onDelete?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+interface AttachmentThumbnailProps {
+    iconSource?: IconSource;
+    url?: string;
+    onDelete?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+interface AttachmentItemProps {
+    children: React.ReactNode;
+}
+
+declare const AttachmentList: React__default.FC<AttachmentListProps & Pick<StackContainerOptionProps, 'width'>>;
+
+declare const AttachmentItemSingle: React__default.FC<AttachmentItemSingleProps>;
+
+declare const AttachmentItemMulti: React__default.FC<AttachmentItemMultiProps>;
+
+declare const AttachmentThumbnail: React__default.FC<AttachmentThumbnailProps>;
+
+declare const AttachmentItem: React__default.FC<AttachmentItemProps> & {
+    Single: typeof AttachmentItemSingle;
+    Multi: typeof AttachmentItemMulti;
+    Thumbnail: typeof AttachmentThumbnail;
+};
+
+export { ActionsProps, AttachmentItem, AttachmentItemData, AttachmentItemMulti, AttachmentItemMultiProps, AttachmentItemProps, AttachmentItemSingle, AttachmentItemSingleProps, AttachmentList, AttachmentListProps, AttachmentThumbnail, AttachmentThumbnailProps, DescriptionProps, FixedColumn, PinningPosition, TableComponent as Table, TableBadge, TableButton, TableContextType, TableHeadCellProps, TableMainProps, TablePaginationProps, TableProps, TableToolbarProps, TitleGroup, TitleGroupHeaderProps, TitleGroupHelpIconProps, TitleGroupProps };

package/dist/index.d.ts

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { TextProps, TooltipProps, IconButtonProps, IconButton } from '@shoplflow/base';
+import { TextProps, TooltipProps, IconButtonProps, IconButton, StackContainerOptionProps } from '@shoplflow/base';
 import { ChildrenProps } from '@shoplflow/base/src/utils/type/ComponentProps';
 import * as React$1 from 'react';
 import React__default, { ReactNode, ReactElement, RefObject, Dispatch, SetStateAction, CSSProperties, ButtonHTMLAttributes } from 'react';
 import { Table as Table$1, ColumnDef, Header, RowData, ColumnFilter } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
+import { IconSource } from '@shoplflow/shopl-assets';
 
 declare type ActionsProps = {
     children: ReactNode;
@@ -292,4 +293,47 @@ declare type TableComponentType = typeof Table & {
 };
 declare const TableComponent: TableComponentType;
 
-export { ActionsProps, DescriptionProps, FixedColumn, PinningPosition, TableComponent as Table, TableBadge, TableButton, TableContextType, TableHeadCellProps, TableMainProps, TablePaginationProps, TableProps, TableToolbarProps, TitleGroup, TitleGroupHeaderProps, TitleGroupHelpIconProps, TitleGroupProps };
+interface AttachmentItemData {
+    name: string;
+    extension: string;
+    size: number;
+}
+interface AttachmentListProps {
+    onDelete?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    children: React.ReactNode;
+}
+interface AttachmentItemSingleProps {
+    item: AttachmentItemData;
+    onDelete?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+interface AttachmentItemMultiProps {
+    item?: AttachmentItemData | null;
+    thumbnail?: React.ReactNode;
+    children?: React.ReactNode;
+    onDelete?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+interface AttachmentThumbnailProps {
+    iconSource?: IconSource;
+    url?: string;
+    onDelete?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+interface AttachmentItemProps {
+    children: React.ReactNode;
+}
+
+declare const AttachmentList: React__default.FC<AttachmentListProps & Pick<StackContainerOptionProps, 'width'>>;
+
+declare const AttachmentItemSingle: React__default.FC<AttachmentItemSingleProps>;
+
+declare const AttachmentItemMulti: React__default.FC<AttachmentItemMultiProps>;
+
+declare const AttachmentThumbnail: React__default.FC<AttachmentThumbnailProps>;
+
+declare const AttachmentItem: React__default.FC<AttachmentItemProps> & {
+    Single: typeof AttachmentItemSingle;
+    Multi: typeof AttachmentItemMulti;
+    Thumbnail: typeof AttachmentThumbnail;
+};
+
+export { ActionsProps, AttachmentItem, AttachmentItemData, AttachmentItemMulti, AttachmentItemMultiProps, AttachmentItemProps, AttachmentItemSingle, AttachmentItemSingleProps, AttachmentList, AttachmentListProps, AttachmentThumbnail, AttachmentThumbnailProps, DescriptionProps, FixedColumn, PinningPosition, TableComponent as Table, TableBadge, TableButton, TableContextType, TableHeadCellProps, TableMainProps, TablePaginationProps, TableProps, TableToolbarProps, TitleGroup, TitleGroupHeaderProps, TitleGroupHelpIconProps, TitleGroupProps };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { colorTokens, IconButton, StackContainer, Icon, Tag, Text, Stack, Pagination, Checkbox, Tooltip, ScrollArea, Popper, Menu } from '@shoplflow/base';
 import styled2 from '@emotion/styled';
-import { RefreshIcon, CloseSmallIcon, HelpLineIcon, DescIcon, AscIcon, MoreIcon, UpArrowSolidXsmallIcon, DownArrowSolidXsmallIcon } from '@shoplflow/shopl-assets';
+import { RefreshIcon, CloseSmallIcon, HelpLineIcon, DeleteIcon, DescIcon, AscIcon, MoreIcon, UpArrowSolidXsmallIcon, DownArrowSolidXsmallIcon } from '@shoplflow/shopl-assets';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import React6, { createContext, memo, useRef, useEffect, useContext, useState, useCallback, useMemo, Children, isValidElement, Fragment as Fragment$1 } from 'react';
 import { useReactTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, flexRender } from '@tanstack/react-table';
@@ -1590,5 +1590,155 @@ var TableComponent = Object.assign(Table, {
   Button: TableButton,
   Badge: TableBadge
 });
+var AttachmentListContext = createContext({});
+var AttachmentList = (_a) => {
+  var _b = _a, {
+    onDelete,
+    children
+  } = _b, rest = __objRest(_b, [
+    "onDelete",
+    "children"
+  ]);
+  const contextValue = {
+    onDelete
+  };
+  return /* @__PURE__ */ jsx(AttachmentListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(StackContainer.Horizontal, __spreadProps(__spreadValues({ spacing: "spacing08" }, rest), { children })) });
+};
+var AttachmentList_default = AttachmentList;
+var StyledSeparator = styled2.div`
+  width: 2px;
+  height: 2px;
+  background-color: var(--neutral400);
+  border-radius: 0.5px;
+  flex-shrink: 0;
+`;
+var AttachmentItemSingle = ({ item, onDelete }) => {
+  const formatFileSize = (bytes) => {
+    if (bytes === 0) {
+      return "0 Bytes";
+    }
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+  };
+  return /* @__PURE__ */ jsxs(StackContainer.Horizontal, { width: "inherit", align: "center", padding: "0", children: [
+    /* @__PURE__ */ jsxs(StackContainer.Horizontal, { align: "center", spacing: "spacing04", children: [
+      /* @__PURE__ */ jsx(Text, { typography: "body2_400", color: "neutral700", lineClamp: 1, textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.name }),
+      /* @__PURE__ */ jsx(StyledSeparator, {}),
+      /* @__PURE__ */ jsx(Text, { typography: "body2_400", color: "neutral400", children: item.extension }),
+      /* @__PURE__ */ jsx(StyledSeparator, {}),
+      /* @__PURE__ */ jsx(Text, { typography: "body2_400", color: "neutral400", children: formatFileSize(item.size) })
+    ] }),
+    /* @__PURE__ */ jsx(IconButton, { sizeVar: "S", styleVar: "GHOST", children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        iconSource: DeleteIcon,
+        sizeVar: "S",
+        color: "neutral350",
+        onClick: (e) => onDelete == null ? void 0 : onDelete(e)
+      }
+    ) })
+  ] });
+};
+var AttachmentItemSingle_default = AttachmentItemSingle;
+var AttachmentItemMulti = ({ item, children, thumbnail, onDelete }) => {
+  const formatFileSize = (bytes) => {
+    if (bytes === 0) {
+      return "0 Bytes";
+    }
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+  };
+  return /* @__PURE__ */ jsxs(
+    StackContainer.Horizontal,
+    {
+      align: "center",
+      width: "inherit",
+      minHeight: "48px",
+      padding: "8px",
+      spacing: "spacing08",
+      radius: "borderRadius08",
+      onMouseEnter: (e) => {
+        e.currentTarget.style.backgroundColor = "rgba(153, 153, 153, 0.05)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.backgroundColor = "transparent";
+      },
+      children: [
+        thumbnail,
+        /* @__PURE__ */ jsx(StackContainer.Vertical, { flex: "1", align: "flex-start", height: "100%", children: item ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { typography: "body1_400", color: "neutral700", lineClamp: 1, textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.name }),
+          /* @__PURE__ */ jsx(Text, { typography: "caption_400", color: "neutral400", children: formatFileSize(item.size) })
+        ] }) : children }),
+        /* @__PURE__ */ jsx(IconButton, { sizeVar: "S", styleVar: "GHOST", children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            iconSource: DeleteIcon,
+            sizeVar: "S",
+            color: "neutral350",
+            onClick: (e) => onDelete == null ? void 0 : onDelete(e)
+          }
+        ) })
+      ]
+    }
+  );
+};
+var AttachmentItemMulti_default = AttachmentItemMulti;
+var AttachmentThumbnail = ({ iconSource, url }) => {
+  if (url) {
+    return /* @__PURE__ */ jsx(
+      StackContainer,
+      {
+        width: "32px",
+        height: "32px",
+        radius: "borderRadius04",
+        style: {
+          overflow: "hidden",
+          flexShrink: 0
+        },
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: url,
+            alt: "thumbnail",
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover"
+            }
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    StackContainer,
+    {
+      direction: "row",
+      align: "center",
+      justify: "center",
+      width: "32px",
+      height: "32px",
+      background: "neutral0",
+      radius: "borderRadius04",
+      style: {
+        border: "1px solid var(--neutral200)",
+        flexShrink: 0
+      },
+      children: /* @__PURE__ */ jsx(Icon, { iconSource, sizeVar: "S", color: "neutral700" })
+    }
+  );
+};
+var AttachmentThumbnail_default = AttachmentThumbnail;
+var AttachmentItem = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+AttachmentItem.Single = AttachmentItemSingle_default;
+AttachmentItem.Multi = AttachmentItemMulti_default;
+AttachmentItem.Thumbnail = AttachmentThumbnail_default;
+var AttachmentItem_default = AttachmentItem;
 
-export { TableComponent as Table, TableBadge, TableButton, TitleGroup_default as TitleGroup };
+export { AttachmentItem_default as AttachmentItem, AttachmentItemMulti_default as AttachmentItemMulti, AttachmentItemSingle_default as AttachmentItemSingle, AttachmentList_default as AttachmentList, AttachmentThumbnail_default as AttachmentThumbnail, TableComponent as Table, TableBadge, TableButton, TitleGroup_default as TitleGroup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/templates",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -91,7 +91,7 @@
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
-    "@shoplflow/base": "^0.42.15",
+    "@shoplflow/base": "^0.42.17",
     "@shoplflow/hada-assets": "^0.1.8",
     "@shoplflow/shopl-assets": "^0.12.23",
     "@shoplflow/utils": "^0.7.0"