ndcloud-storybook 1.2.1 → 1.2.2-beta.0

package/dist/index.js

@@ -1,24 +1,8 @@
 import { keyframes, css } from '@emotion/react';
-import styled from '@emotion/styled';
+import styled16 from '@emotion/styled';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 
 // src/atoms/Button/Button.tsx
-var spin = keyframes`
-  from { transform: rotate(0deg); }
-  to   { transform: rotate(360deg); }
-`;
-var Wrapper = styled.div`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  svg {
-    width: ${({ size = 20 }) => size}px;
-    height: ${({ size = 20 }) => size}px;
-    animation: ${spin} ${({ speed = "0.75s" }) => speed} linear infinite;
-    transform-origin: center;
-  }
-`;
 var Spinner = ({
   size = 20,
   speed = "0.75s",
@@ -47,6 +31,22 @@ var Spinner = ({
   }
 ) });
 var Spinner_default = Spinner;
+var spin = keyframes`
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+`;
+var Wrapper = styled16.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: ${({ size = 20 }) => size}px;
+    height: ${({ size = 20 }) => size}px;
+    animation: ${spin} ${({ speed = "0.75s" }) => speed} linear infinite;
+    transform-origin: center;
+  }
+`;
 
 // src/tokens/colors.ts
 var colors = {
@@ -55,6 +55,7 @@ var colors = {
     // Brand
     primaryGreen: "#7EE896",
     primaryPurple: "#6D65DA",
+    primaryBlue: "#55A3BD",
     // Palette
     darkBlue1: "#12131B",
     darkBlue2: "#2A2B33",
@@ -130,6 +131,17 @@ var FONT_SIZE_KEYS = {
   xl: "xl",
   "2xl": "2xl"
 };
+
+// src/utils/colorHelpers.ts
+function getOpacity(hexColor, opacity) {
+  const hex = hexColor.trim().replace(/^#/, "");
+  if (!/^[\da-fA-F]{6}$/.test(hex)) {
+    throw new Error(`Invalid hex color: ${hexColor}`);
+  }
+  const opacityFraction = Math.round(opacity / 100 * 255);
+  const alphaHex = opacityFraction.toString(16).padStart(2, "0");
+  return `#${hex}${alphaHex}`;
+}
 var Variant = /* @__PURE__ */ ((Variant2) => {
   Variant2["Primary"] = "primary";
   Variant2["Secondary"] = "secondary";
@@ -147,11 +159,35 @@ var VARIANTS = {
   },
   outline: {
     background: colors.backgrounds.transparent,
-    border: "1px solid rgba(70, 70, 74, 0.10)",
-    color: "#0E1116D9"
+    border: `1px solid ${getOpacity(colors.baseColors.grey2, 10)}`,
+    color: getOpacity(colors.baseColors.darkBlue3, 85)
   }
 };
-var StyledButton = styled.button`
+var Button = ({
+  label,
+  icon,
+  loading,
+  disabled,
+  className,
+  variant = "primary",
+  selected,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  StyledButton,
+  {
+    variant,
+    disabled: disabled || loading,
+    selected,
+    className,
+    ...rest,
+    children: loading ? /* @__PURE__ */ jsx(Spinner_default, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && /* @__PURE__ */ jsx("span", { children: icon }),
+      label
+    ] })
+  }
+);
+var Button_default = Button;
+var StyledButton = styled16.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -181,46 +217,12 @@ var StyledButton = styled.button`
       pointer-events: ${disabled ? "none" : "auto"};
 
       &:focus-visible {
-        outline: 2px solid #0070f3;
+        outline: 2px solid ${colors.baseColors.primaryBlue};
         outline-offset: 2px;
       }
     `;
 }}
 `;
-var Button = ({
-  label,
-  icon,
-  loading,
-  disabled,
-  className,
-  ...rest
-}) => /* @__PURE__ */ jsx(
-  StyledButton,
-  {
-    label: "",
-    disabled: disabled || loading,
-    className,
-    ...rest,
-    children: loading ? /* @__PURE__ */ jsx(Spinner_default, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      icon && /* @__PURE__ */ jsx("span", { children: icon }),
-      label
-    ] })
-  }
-);
-var Button_default = Button;
-
-// src/utils/colorHelpers.ts
-function getOpacity(hexColor, opacity) {
-  const hex = hexColor.trim().replace(/^#/, "");
-  if (!/^[\da-fA-F]{6}$/.test(hex)) {
-    throw new Error(`Invalid hex color: ${hexColor}`);
-  }
-  const opacityFraction = Math.round(opacity / 100 * 255);
-  const alphaHex = opacityFraction.toString(16).padStart(2, "0");
-  return `#${hex}${alphaHex}`;
-}
-
-// src/atoms/shared/inputStyles.ts
 var defaultPadding = "9px 17px";
 var focusedPadding = "8px 16px";
 var baseInputStyles = css`
@@ -280,7 +282,7 @@ var Input = ({ className, error, warning, ...rest }) => {
   return /* @__PURE__ */ jsx(StyledInput, { className, error, warning, ...rest });
 };
 var Input_default = Input;
-var StyledInput = styled.input`
+var StyledInput = styled16.input`
   ${baseInputStyles}
 
   ${({ error }) => error && errorStyles}
@@ -294,7 +296,7 @@ var Textarea = ({ className, error, warning, ...rest }) => {
   return /* @__PURE__ */ jsx(StyledTextarea, { className, error, warning, ...rest });
 };
 var Textarea_default = Textarea;
-var StyledTextarea = styled.textarea`
+var StyledTextarea = styled16.textarea`
   ${baseInputStyles}
   resize: vertical;
   min-height: 80px;
@@ -322,7 +324,7 @@ var Tab = ({
   );
 };
 var Tab_default = Tab;
-var StyledTab = styled.div`
+var StyledTab = styled16.div`
   display: inline-block;
   padding: 8px 16px;
   user-select: none;
@@ -343,7 +345,7 @@ var StyledTab = styled.div`
     }
   `}
 `;
-var HelperText = styled.div`
+var HelperText = styled16.div`
   margin-top: 4px;
   font-size: ${typography.fontSize.xs}px;
   color: ${({ error, warning }) => {
@@ -352,6 +354,94 @@ var HelperText = styled.div`
   return colors.baseColors.grey3;
 }};
 `;
+var USER_ROLES = {
+  OWNER: "owner",
+  EDITOR: "editor",
+  VIEWER: "viewer",
+  AUDITOR: "auditor"
+};
+var USER_STATUS = {
+  INVITED: "invited"
+};
+var getBadgeColor = (role, status) => {
+  if (status?.toLowerCase() === USER_STATUS.INVITED) {
+    return colors.accents.warning;
+  }
+  const roleLower = role.toLowerCase();
+  switch (roleLower) {
+    case USER_ROLES.OWNER:
+      return colors.baseColors.primaryGreen;
+    case USER_ROLES.EDITOR:
+      return colors.baseColors.primaryBlue;
+    case USER_ROLES.VIEWER:
+    case USER_ROLES.AUDITOR:
+      return colors.baseColors.primaryPurple;
+    default:
+      return colors.baseColors.primaryGreen;
+  }
+};
+function GroupBadge({ role, status, children }) {
+  const badgeColor = getBadgeColor(role, status);
+  const displayText = status?.toLowerCase() === USER_STATUS.INVITED ? "Invited" : children;
+  return /* @__PURE__ */ jsx(Badge, { badgeColor, children: displayText });
+}
+var Badge = styled16.div`
+  display: inline-flex;
+  padding: 8px 28px;
+  border-radius: 100px;
+  background-color: ${({ badgeColor }) => getOpacity(badgeColor, 20)};
+  border: 1px solid ${({ badgeColor }) => badgeColor};
+  color: ${({ badgeColor }) => badgeColor};
+  font-size: ${FONT_SIZES.s}px;
+  font-weight: ${FONT_WEIGHTS.bold};
+  text-transform: capitalize;
+`;
+var Badge_default = GroupBadge;
+function UserAvatar({
+  initials,
+  badgeColor,
+  onClick,
+  size = 56
+}) {
+  if (!initials || !initials.trim()) {
+    return null;
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx(
+      ProfileAvatar,
+      {
+        badgeColor,
+        size,
+        onClick,
+        children: initials
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(ColourAvatar, { badgeColor, size, children: initials });
+}
+var UserAvatar_default = UserAvatar;
+var ColourAvatar = styled16.div`
+  width: ${({ size }) => typeof size === "number" ? `${size}px` : size === "large" ? "56px" : "40px"};
+  height: ${({ size }) => typeof size === "number" ? `${size}px` : size === "large" ? "56px" : "40px"};
+  border-radius: 50%;
+  background: ${({ badgeColor }) => badgeColor ? getOpacity(badgeColor, 20) : "linear-gradient(90deg, #6d65da 0.08%, #55a3bd 68.44%)"};
+  border: ${({ badgeColor }) => badgeColor ? `2px solid ${badgeColor}` : "none"};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${colors.baseColors.darkBlue1};
+  font-size: ${({ size }) => typeof size === "number" ? `${size * 0.325}px` : size === "large" ? `${FONT_SIZES.xs}px` : `${FONT_SIZES.s}px`};
+  font-weight: ${FONT_WEIGHTS.normal};
+  flex-shrink: 0;
+`;
+var ProfileAvatar = styled16(ColourAvatar)`
+  color: #fff;
+  background: ${colors.gradients.gradient1};
+  border: none;
+  border-radius: 999px;
+  line-height: 138%;
+  margin-bottom: 12px;
+`;
 var FormField = ({
   id,
   label,
@@ -389,7 +479,7 @@ var FormField = ({
     displayText && /* @__PURE__ */ jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
   ] });
 };
-var FormFieldWrapper = styled.div`
+var FormFieldWrapper = styled16.div`
   display: flex;
   flex-direction: column;
   
@@ -437,7 +527,7 @@ var FormFieldTextarea = ({
     displayText && /* @__PURE__ */ jsx(HelperText, { error: hasError, warning: hasWarning, children: displayText })
   ] });
 };
-var FormFieldWrapper2 = styled.div`
+var FormFieldWrapper2 = styled16.div`
   display: flex;
   flex-direction: column;
   
@@ -448,7 +538,307 @@ var FormFieldWrapper2 = styled.div`
   }
 `;
 var FormFieldTextarea_default = FormFieldTextarea;
+var SearchContainer = styled16.div`
+  width: ${({ width }) => typeof width === "number" ? `${width}px` : width || "208px"};
+`;
+var InputWrapper = styled16.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+`;
+var IconWrapper = styled16.div`
+  position: absolute;
+  left: 17px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${colors.baseColors.grey3};
+  pointer-events: none;
+  z-index: 2;
+`;
+var StyledInput2 = styled16(Input_default)`
+  width: 100%;
+  padding-right: ${({ hasClearButton }) => hasClearButton ? "32px" : "17px"};
+  padding-left: ${({ hasIcon }) => hasIcon ? "44px" : "17px"};
+  font-size: ${({ fontSize = "s" }) => `${typography.fontSize[fontSize]}px`};
+  position: relative;
+  z-index: 1;
+
+  &:focus {
+    padding-left: ${({ hasIcon }) => hasIcon ? "43px" : "16px"};
+  }
+`;
+var ClearButton = styled16.button`
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${colors.baseColors.grey3};
+  transition: color 0.2s ease;
+  z-index: 3;
+
+  &:hover {
+    color: ${colors.baseColors.grey1};
+  }
+
+  &:focus {
+    outline: 2px solid ${colors.baseColors.primaryPurple};
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+`;
+var ClearIcon = styled16.svg`
+  width: 16px;
+  height: 16px;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+`;
+function SearchInput({
+  value,
+  onChange,
+  placeholder = "Search...",
+  showClearButton = false,
+  icon,
+  width = "208px",
+  fontSize = "s"
+}) {
+  const handleChange = (e) => {
+    onChange(e.target.value);
+  };
+  const handleClear = () => {
+    onChange("");
+  };
+  const hasClearButton = showClearButton && !!value;
+  const hasIcon = !!icon;
+  return /* @__PURE__ */ jsx(SearchContainer, { width, children: /* @__PURE__ */ jsxs(InputWrapper, { children: [
+    hasIcon && /* @__PURE__ */ jsx(IconWrapper, { children: icon }),
+    /* @__PURE__ */ jsx(
+      StyledInput2,
+      {
+        type: "text",
+        placeholder,
+        value,
+        onChange: handleChange,
+        autoComplete: "off",
+        hasClearButton,
+        hasIcon,
+        fontSize
+      }
+    ),
+    hasClearButton && /* @__PURE__ */ jsx(ClearButton, { onClick: handleClear, type: "button", "aria-label": "Clear search", children: /* @__PURE__ */ jsxs(ClearIcon, { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: [
+      /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+    ] }) })
+  ] }) });
+}
+var SearchInput_default = SearchInput;
+function TableElement({ children, ...rest }) {
+  return /* @__PURE__ */ jsx(StyledTable, { ...rest, children });
+}
+var Table_default = TableElement;
+var StyledTable = styled16.table`
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0 4px;
+`;
+function TableHeader({ alignRight, children, ...rest }) {
+  return /* @__PURE__ */ jsx(StyledTableHeader, { alignRight, ...rest, children });
+}
+var TableHeader_default = TableHeader;
+var StyledTableHeader = styled16.th`
+  padding-bottom: 12px;
+  text-align: ${({ alignRight }) => alignRight ? "right" : "left"};
+  font-size: ${FONT_SIZES.xs}px;
+  font-weight: ${FONT_WEIGHTS.bold};
+  padding-left: ${({ alignRight }) => alignRight ? "0" : "24px"};
+  padding-right: ${({ alignRight }) => alignRight ? "60px" : "0"};
+`;
+function TableCell({ children, colSpan, ...rest }) {
+  return /* @__PURE__ */ jsx(StyledTableCell, { colSpan, ...rest, children });
+}
+var TableCell_default = TableCell;
+var StyledTableCell = styled16.td`
+
+`;
+function TableRow({ children, ...rest }) {
+  return /* @__PURE__ */ jsx(StyledTableRow, { ...rest, children });
+}
+var TableRow_default = TableRow;
+var StyledTableRow = styled16.tr`
+  /* Base row styling */
+`;
+var TableRowWrapper = styled16.div`
+  border-radius: 6px;
+  border: 1px solid ${colors.baseColors.grey7};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 24px;
+`;
+var CheckboxWrapper = styled16.div`
+  display: flex;
+  align-items: center;
+`;
+var ActionsWrapper = styled16.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+var AlignedTableCell = styled16(TableCell_default)`
+  padding-top: 12px;
+  padding-bottom: 12px;
+  padding-left: ${({ alignRight }) => alignRight ? "0" : "24px"};
+  padding-right: ${({ alignRight }) => alignRight ? "60px" : "0"};
+  text-align: ${({ alignRight }) => alignRight ? "right" : "left"};
+  border: 1px solid ${colors.baseColors.grey7};
+  border-right: ${({ isLast }) => isLast ? `1px solid ${colors.baseColors.grey7}` : "none"};
+  border-left: ${({ isFirst }) => isFirst ? `1px solid ${colors.baseColors.grey7}` : "none"};
+  ${({ isFirst }) => isFirst && `border-top-left-radius: 6px; border-bottom-left-radius: 6px;`}
+  ${({ isLast }) => isLast && `border-top-right-radius: 6px; border-bottom-right-radius: 6px;`}
+`;
+var CellContent = styled16.div`
+  display: flex;
+  align-items: center;
+  justify-content: ${({ alignRight }) => alignRight ? "flex-end" : "flex-start"};
+  flex: ${({ alignRight }) => alignRight ? "0 0 auto" : "1"};
+  min-width: 0;
+`;
+var TableWrapper = styled16.div`
+  margin-top: 32px;
+`;
+var EmptyState = styled16.div`
+  padding: 24px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+var EmptyHeader = styled16.div`
+  font-size: 26px;
+  font-weight: 700;
+  color: ${colors.baseColors.darkBlue1};
+`;
+var EmptySubheader = styled16.div`
+  font-size: 12px;
+  font-weight: 500;
+  color: ${colors.baseColors.grey3};
+`;
+function getCellContent(column, row, rowIndex) {
+  if (column.renderCell) {
+    return column.renderCell(row, rowIndex);
+  }
+  if (column.accessor) {
+    if (typeof column.accessor === "function") {
+      return column.accessor(row);
+    }
+    return String(row[column.accessor] ?? "");
+  }
+  return null;
+}
+function getTotalColumns(columns, showCheckboxes, renderActions) {
+  return columns.length + (showCheckboxes ? 1 : 0) + (renderActions ? 1 : 0);
+}
+function Table({
+  data,
+  columns,
+  getRowKey,
+  emptyMessage,
+  emptyHeader,
+  emptySubheader,
+  showCheckboxes = false,
+  onSelectAll,
+  onSelectRow,
+  selectedRows = /* @__PURE__ */ new Set(),
+  renderActions,
+  rowLayout = "aligned"
+}) {
+  const getKey = getRowKey || ((row, index) => index);
+  const allSelected = data.length > 0 && data.every((row, idx) => selectedRows.has(getKey(row, idx)));
+  const someSelected = data.some((row, idx) => selectedRows.has(getKey(row, idx)));
+  const totalColumns = getTotalColumns(columns, showCheckboxes, renderActions);
+  const handleSelectAll = (e) => {
+    onSelectAll?.(e.target.checked);
+  };
+  const handleSelectRow = (row, e) => {
+    onSelectRow?.(row, e.target.checked);
+  };
+  return /* @__PURE__ */ jsx(TableWrapper, { children: /* @__PURE__ */ jsxs(Table_default, { children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs(TableRow_default, { children: [
+      showCheckboxes && /* @__PURE__ */ jsx(TableHeader_default, { children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: allSelected,
+          ref: (input) => {
+            if (input) input.indeterminate = someSelected && !allSelected;
+          },
+          onChange: handleSelectAll,
+          "aria-label": "Select all rows"
+        }
+      ) }),
+      columns.map((column, index) => /* @__PURE__ */ jsx(TableHeader_default, { alignRight: column.alignRight, children: column.label }, index)),
+      renderActions && /* @__PURE__ */ jsx(TableHeader_default, { alignRight: true, children: " " })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx(TableRow_default, { children: /* @__PURE__ */ jsx(TableCell_default, { colSpan: totalColumns, children: /* @__PURE__ */ jsx(EmptyState, { children: emptyHeader ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(EmptyHeader, { children: emptyHeader }),
+      emptySubheader && /* @__PURE__ */ jsx(EmptySubheader, { children: emptySubheader })
+    ] }) : /* @__PURE__ */ jsx("div", { children: emptyMessage || "No data found" }) }) }) }) : data.map((row, rowIndex) => {
+      const rowKey = getKey(row, rowIndex);
+      const isSelected = selectedRows.has(rowKey);
+      if (rowLayout === "spaced") {
+        return /* @__PURE__ */ jsx(TableRow_default, { children: /* @__PURE__ */ jsx(TableCell_default, { colSpan: totalColumns, children: /* @__PURE__ */ jsxs(TableRowWrapper, { children: [
+          showCheckboxes && /* @__PURE__ */ jsx(CheckboxWrapper, { children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: isSelected,
+              onChange: (e) => handleSelectRow(row, e),
+              "aria-label": `Select row ${rowIndex + 1}`
+            }
+          ) }),
+          columns.map((column, colIndex) => {
+            const cellContent = getCellContent(column, row, rowIndex);
+            const isLast = colIndex === columns.length - 1 && !renderActions;
+            return /* @__PURE__ */ jsx(CellContent, { alignRight: column.alignRight, isLast, children: cellContent }, colIndex);
+          }),
+          renderActions && /* @__PURE__ */ jsx(ActionsWrapper, { children: renderActions(row, rowIndex) })
+        ] }) }) }, rowKey);
+      } else {
+        return /* @__PURE__ */ jsxs(TableRow_default, { children: [
+          showCheckboxes && /* @__PURE__ */ jsx(AlignedTableCell, { isFirst: true, isLast: totalColumns === 1, children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: isSelected,
+              onChange: (e) => handleSelectRow(row, e),
+              "aria-label": `Select row ${rowIndex + 1}`
+            }
+          ) }),
+          columns.map((column, colIndex) => {
+            const cellContent = getCellContent(column, row, rowIndex);
+            const isFirst = !showCheckboxes && colIndex === 0;
+            const isLast = !renderActions && colIndex === columns.length - 1;
+            return /* @__PURE__ */ jsx(AlignedTableCell, { alignRight: column.alignRight, isFirst, isLast, children: cellContent }, colIndex);
+          }),
+          renderActions && /* @__PURE__ */ jsx(AlignedTableCell, { alignRight: true, isLast: true, children: renderActions(row, rowIndex) })
+        ] }, rowKey);
+      }
+    }) })
+  ] }) });
+}
+var DataTable_default = Table;
 
-export { Button_default as Button, FONT_SIZES, FONT_SIZE_KEYS, FONT_WEIGHTS, FormField_default as FormField, FormFieldTextarea_default as FormFieldTextarea, HelperText, Input_default as Input, Label_default as Label, Tab_default as Tab, Textarea_default as Textarea, Variant, colors, getOpacity, typography };
+export { Badge_default as Badge, Button_default as Button, FONT_SIZES, FONT_SIZE_KEYS, FONT_WEIGHTS, FormField_default as FormField, FormFieldTextarea_default as FormFieldTextarea, GroupBadge, HelperText, Input_default as Input, Label_default as Label, SearchInput_default as SearchInput, Tab_default as Tab, DataTable_default as Table, TableCell_default as TableCell, Table_default as TableElement, TableHeader_default as TableHeader, TableRow_default as TableRow, TableRowWrapper, Textarea_default as Textarea, USER_ROLES, USER_STATUS, UserAvatar_default as UserAvatar, Variant, colors, getBadgeColor, getOpacity, typography };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map