@mrshmllw/smores-react 4.0.1 → 5.0.0

package/dist/SupportMessage/SupportMessage.js

@@ -1,57 +1,82 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { darken } from 'polished';
-import React from 'react';
 import styled, { css } from 'styled-components';
-import { Box } from '../Box';
-import { Icon } from '../Icon';
-import { Text } from '../Text';
-import { theme } from '../theme';
-import { isReactElement } from '../utils/isReactElement';
+import { Box } from '../Box/Box.js';
+import { Icon } from '../Icon/Icon.js';
+import { Text } from '../Text/Text.js';
+import { theme } from '../theme.js';
+import { isReactElement } from '../utils/isReactElement.js';
+
 const styles = {
-    info: {
-        iconColor: 'liquorice',
-        backgroundColor: theme.colors.custard,
-        hoverBackgroundColor: darken(0.1, theme.colors.custard),
-        icon: 'info',
-    },
-    fallbackStyle: {
-        iconColor: 'liquorice',
-        backgroundColor: theme.colors.coconut,
-        hoverBackgroundColor: darken(0.1, theme.colors.coconut),
-        icon: 'info',
-    },
-    alert: {
-        iconColor: 'tangerine',
-        backgroundColor: theme.colors.sherbert,
-        hoverBackgroundColor: darken(0.1, theme.colors.sherbert),
-        icon: 'alert',
-    },
-    warning: {
-        iconColor: 'strawberry',
-        backgroundColor: theme.colors.watermelon,
-        hoverBackgroundColor: darken(0.1, theme.colors.watermelon),
-        icon: 'warning',
-    },
-    success: {
-        iconColor: 'apple',
-        backgroundColor: theme.colors.mint,
-        hoverBackgroundColor: darken(0.1, theme.colors.mint),
-        icon: 'included',
-    },
+  info: {
+    iconColor: "liquorice",
+    backgroundColor: theme.colors.custard,
+    hoverBackgroundColor: darken(0.1, theme.colors.custard),
+    icon: "info"
+  },
+  fallbackStyle: {
+    iconColor: "liquorice",
+    backgroundColor: theme.colors.coconut,
+    hoverBackgroundColor: darken(0.1, theme.colors.coconut),
+    icon: "info"
+  },
+  alert: {
+    iconColor: "tangerine",
+    backgroundColor: theme.colors.sherbert,
+    hoverBackgroundColor: darken(0.1, theme.colors.sherbert),
+    icon: "alert"
+  },
+  warning: {
+    iconColor: "strawberry",
+    backgroundColor: theme.colors.watermelon,
+    hoverBackgroundColor: darken(0.1, theme.colors.watermelon),
+    icon: "warning"
+  },
+  success: {
+    iconColor: "apple",
+    backgroundColor: theme.colors.mint,
+    hoverBackgroundColor: darken(0.1, theme.colors.mint),
+    icon: "included"
+  }
 };
-export const SupportMessage = ({ className, description, onClick, type = 'info', title, ...marginProps }) => {
-    return (React.createElement(Wrapper, { className: className, type: type, onClick: onClick, ...marginProps },
-        React.createElement(IconWrapper, null,
-            React.createElement(Icon, { size: 20, render: styles[type].icon, color: styles[type].iconColor })),
-        React.createElement(Box, { flex: true, direction: "column", mx: "8px" },
-            title && React.createElement(Title, null, title),
-            isReactElement(description) ? (React.createElement(DescriptionBox, null, description)) : (React.createElement(Description, { tag: "p" }, description))),
-        onClick && (React.createElement(Box, { ml: { custom: 'auto' } },
-            React.createElement(Icon, { size: 16, render: "caret", color: "marzipan", rotate: 270 })))));
+const SupportMessage = ({
+  className,
+  description,
+  onClick,
+  type = "info",
+  title,
+  ...marginProps
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Wrapper,
+    {
+      className,
+      type,
+      onClick,
+      ...marginProps,
+      children: [
+        /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: 20,
+            render: styles[type].icon,
+            color: styles[type].iconColor
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(Box, { flex: true, direction: "column", mx: "8px", children: [
+          title && /* @__PURE__ */ jsx(Title, { children: title }),
+          isReactElement(description) ? /* @__PURE__ */ jsx(DescriptionBox, { children: description }) : /* @__PURE__ */ jsx(Description, { tag: "p", children: description })
+        ] }),
+        onClick && /* @__PURE__ */ jsx(Box, { ml: { custom: "auto" }, children: /* @__PURE__ */ jsx(Icon, { size: 16, render: "caret", color: "marzipan", rotate: 270 }) })
+      ]
+    }
+  );
 };
-const IconWrapper = styled(Box) `
+const IconWrapper = styled(Box)`
   align-self: flex-start;
 `;
-const Wrapper = styled(Box)(({ type, onClick }) => css `
+const Wrapper = styled(Box)(
+  ({ type, onClick }) => css`
     align-items: center;
     background-color: ${styles[type].backgroundColor};
     border-radius: 16px;
@@ -64,22 +89,24 @@ const Wrapper = styled(Box)(({ type, onClick }) => css `
     &:active {
       ${onClick && `background-color: ${styles[type].hoverBackgroundColor};`};
     }
-  `);
-const Title = styled.p `
+  `
+);
+const Title = styled.p`
   font-size: 16px;
   font-weight: ${theme.font.weight.medium};
   color: ${theme.colors.liquorice};
   line-height: 20.8px;
   margin-bottom: 4px;
 `;
-const DescriptionBox = styled(Box) `
+const DescriptionBox = styled(Box)`
   color: ${theme.colors.liquorice};
   font-size: 14px;
   line-height: 20px;
 `;
-const Description = styled(Text) `
+const Description = styled(Text)`
   color: ${theme.colors.liquorice};
   font-size: 14px;
   line-height: 20px;
 `;
-//# sourceMappingURL=SupportMessage.js.map
+
+export { SupportMessage };

package/dist/Table/Table.js

@@ -1,51 +1,74 @@
-import React from 'react';
-import { Text } from '../Text';
-import { TableHeader } from './components/TableHeader';
-import { TableRow } from './components/TableRow';
-import { StyledCell, StyledTable } from './components/commonComponents';
-/**
- * A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.
- *
- * Caveats:
- * - subRows should always have the same columns as the Parent table.
- * - stripedColor wont be applied to subRows or subTables.
- * - rowActions will always need an onClick, this will be automatically passed onto the ReactNode you place & will be selectable
- * - rows will scale depending on the cell content size
- * - using clickableRow with clickable cells, ensure you use e.stopPropagation in your cells onClick
- *
- * Improvements:
- * - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this
- * -
- *
- * @template T - The type of data the table displays.
- * @property {T[]} data - Array of data to be displayed in the table.
- * @property {TableColumn<T>[]} columns - Array of columns to display in the table.
- * @property {boolean} [fixedHeader=false] - If true, the table header will be fixed/sticky.
- * @property {string} [headerHeight] - Sets the height of the header.
- * @property {function(T): boolean} [expandable] - A function to determine if a row is expandable.
- * @property {Color} [stripedColor] - If present, the table rows will have alternating colors.
- * @property {Color} [headerColor='mascarpone'] - The color for the table header.
- * @property {Color} [rowColor='custard'] - The default color for each table row.
- * @property {Color} [rowBorderColor='oatmeal'] - The default color for each table row border.
- * @property {ReactElement} [subTable] - A React element to show when a row is expanded.
- * @property {Object} [subRows] - Settings for sub rows.
- * @property {function(T): ReactElement} subRows.rows - Function that returns a React element for the sub row.
- * @property {boolean} [subRows.showOnExpand=false] - If true, the sub rows will only be shown when the row is expanded.
- * @property {RowAction<T>[]} [rowActions] - Array of actions that can be performed on each row.
- * @property {function<T>: void} [clickableRow] - Function to apply to a row, to make the entire row clickable, useful for navigation.
- * @property {string} [rowPadding] - The Y padding for each row.
- * @property {string} [columnPadding] - The X padding for each row.
- * @property {string} [noDataContent] - The text to show when there is no available data to map through.
- */
-export const Table = ({ columns, data, fixedHeader = true, expandable, subTable, subRows, headerHeight, headerColor = 'mascarpone', rowColor = 'custard', stripedColor, rowBorderColor = 'oatmeal', rowActions, clickableRow, rowPadding, columnPadding, noDataContent, }) => {
-    const showActionsCell = expandable || rowActions;
-    const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
-    return (React.createElement(StyledTable, null,
-        React.createElement("thead", null,
-            React.createElement(TableHeader, { columns: columns, fixedHeader: fixedHeader, headerHeight: headerHeight, subTable: subTable, headerColor: headerColor, rowActions: rowActions, columnPadding: columnPadding, expandable: expandable })),
-        React.createElement("tbody", null,
-            data.length === 0 && (React.createElement(StyledCell, { colSpan: expandSubProp, rowPadding: rowPadding, columnPadding: columnPadding }, noDataContent ? (noDataContent) : (React.createElement(Text, { align: "center" }, "No available data")))),
-            data.length !== 0 &&
-                data.map((row, rowIndex) => (React.createElement(TableRow, { key: rowIndex, rowData: row, rowIndex: rowIndex, columns: columns, rowActions: rowActions, stripedColor: stripedColor, subTable: subTable, subRows: subRows, rowColor: rowColor, rowBorderColor: rowBorderColor, rowPadding: rowPadding, columnPadding: columnPadding, expandable: expandable, clickableRow: clickableRow }))))));
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Text } from '../Text/Text.js';
+import { TableHeader } from './components/TableHeader.js';
+import { TableRow } from './components/TableRow.js';
+import { StyledTable, StyledCell } from './components/commonComponents.js';
+
+const Table = ({
+  columns,
+  data,
+  fixedHeader = true,
+  expandable,
+  subTable,
+  subRows,
+  headerHeight,
+  headerColor = "mascarpone",
+  rowColor = "custard",
+  stripedColor,
+  rowBorderColor = "oatmeal",
+  rowActions,
+  clickableRow,
+  rowPadding,
+  columnPadding,
+  noDataContent
+}) => {
+  const showActionsCell = expandable || rowActions;
+  const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
+  return /* @__PURE__ */ jsxs(StyledTable, { children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx(
+      TableHeader,
+      {
+        columns,
+        fixedHeader,
+        headerHeight,
+        subTable,
+        headerColor,
+        rowActions,
+        columnPadding,
+        expandable
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("tbody", { children: [
+      data.length === 0 && /* @__PURE__ */ jsx(
+        StyledCell,
+        {
+          colSpan: expandSubProp,
+          rowPadding,
+          columnPadding,
+          children: noDataContent ? noDataContent : /* @__PURE__ */ jsx(Text, { align: "center", children: "No available data" })
+        }
+      ),
+      data.length !== 0 && data.map((row, rowIndex) => /* @__PURE__ */ jsx(
+        TableRow,
+        {
+          rowData: row,
+          rowIndex,
+          columns,
+          rowActions,
+          stripedColor,
+          subTable,
+          subRows,
+          rowColor,
+          rowBorderColor,
+          rowPadding,
+          columnPadding,
+          expandable,
+          clickableRow
+        },
+        rowIndex
+      ))
+    ] })
+  ] });
 };
-//# sourceMappingURL=Table.js.map
+
+export { Table };

package/dist/Table/components/RowActions.js

@@ -1,45 +1,81 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import styled from 'styled-components';
-import { Box } from '../../Box';
-import { Button } from '../../Button';
-import { IconStrict } from '../../IconStrict';
-import { focusOutlineStyle } from '../../utils/focusOutline';
-import { isReactElement } from '../../utils/isReactElement';
-import { StyledCell } from './commonComponents';
-export const RowActions = ({ rowData, rowActions, expandable, isExpanded, toggleExpansion, }) => {
-    const handleAction = (e, action) => {
-        e.stopPropagation();
-        action(rowData);
-    };
-    return (React.createElement(StyledCell, { stickyCell: Boolean(rowActions) || Boolean(expandable), rowActionsBgColor: rowActions?.bgColor },
-        React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-end" },
-            rowActions &&
-                rowActions.actions?.map((action, actionIndex) => {
-                    if (!action.showCondition || action.showCondition(rowData)) {
-                        return (React.createElement(Wrapper, { flex: true, key: actionIndex },
-                            isReactElement(action.element) &&
-                                React.cloneElement(action.element, {
-                                    onClick: (e) => {
-                                        handleAction(e, action.onClick);
-                                    },
-                                    tabIndex: 0,
-                                    className: 'reactElementRowAction',
-                                }),
-                            action.genericButton && !isReactElement(action.element) && (React.createElement(Button, { ...action.genericButton, handleClick: (e) => {
-                                    handleAction(e, action.onClick);
-                                } }, action.genericButton.children)),
-                            action.iconButton && (React.createElement(IconStrict, { ...action.iconButton, handleClick: (e) => {
-                                    handleAction(e, action.onClick);
-                                } }))));
-                    }
-                    return null;
-                }),
-            expandable && expandable(rowData) && (React.createElement(CaretIcon, { render: "caret", handleClick: (e) => {
-                    e.stopPropagation();
-                    toggleExpansion();
-                }, size: 36, isOpen: isExpanded, backgroundColor: "cream" })))));
+import { Box } from '../../Box/Box.js';
+import { Button } from '../../Button/Button.js';
+import { IconStrict } from '../../IconStrict/IconStrict.js';
+import { focusOutlineStyle } from '../../utils/focusOutline.js';
+import { isReactElement } from '../../utils/isReactElement.js';
+import { StyledCell } from './commonComponents.js';
+
+const RowActions = ({
+  rowData,
+  rowActions,
+  expandable,
+  isExpanded,
+  toggleExpansion
+}) => {
+  const handleAction = (e, action) => {
+    e.stopPropagation();
+    action(rowData);
+  };
+  return /* @__PURE__ */ jsx(
+    StyledCell,
+    {
+      stickyCell: Boolean(rowActions) || Boolean(expandable),
+      rowActionsBgColor: rowActions?.bgColor,
+      children: /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", justifyContent: "flex-end", children: [
+        rowActions && rowActions.actions?.map((action, actionIndex) => {
+          if (!action.showCondition || action.showCondition(rowData)) {
+            return /* @__PURE__ */ jsxs(Wrapper, { flex: true, children: [
+              isReactElement(action.element) && React.cloneElement(action.element, {
+                onClick: (e) => {
+                  handleAction(e, action.onClick);
+                },
+                tabIndex: 0,
+                className: "reactElementRowAction"
+              }),
+              action.genericButton && !isReactElement(action.element) && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ...action.genericButton,
+                  handleClick: (e) => {
+                    handleAction(e, action.onClick);
+                  },
+                  children: action.genericButton.children
+                }
+              ),
+              action.iconButton && /* @__PURE__ */ jsx(
+                IconStrict,
+                {
+                  ...action.iconButton,
+                  handleClick: (e) => {
+                    handleAction(e, action.onClick);
+                  }
+                }
+              )
+            ] }, actionIndex);
+          }
+          return null;
+        }),
+        expandable && expandable(rowData) && /* @__PURE__ */ jsx(
+          CaretIcon,
+          {
+            render: "caret",
+            handleClick: (e) => {
+              e.stopPropagation();
+              toggleExpansion();
+            },
+            size: 36,
+            isOpen: isExpanded,
+            backgroundColor: "cream"
+          }
+        )
+      ] })
+    }
+  );
 };
-const Wrapper = styled(Box) `
+const Wrapper = styled(Box)`
   white-space: nowrap;
   margin-right: 8px;
 
@@ -52,8 +88,11 @@ const Wrapper = styled(Box) `
     ${focusOutlineStyle}
   }
 `;
-const CaretIcon = styled(IconStrict)(({ isOpen }) => `
-    transform: ${isOpen ? 'rotate(90deg)' : 'rotate(0deg)'};
+const CaretIcon = styled(IconStrict)(
+  ({ isOpen }) => `
+    transform: ${isOpen ? "rotate(90deg)" : "rotate(0deg)"};
     transition: transform 0.3s ease;
-  `);
-//# sourceMappingURL=RowActions.js.map
+  `
+);
+
+export { RowActions };

package/dist/Table/components/TableHeader.js

@@ -1,8 +1,41 @@
-import React from 'react';
-import { StyledHeaderCell, StyledRow } from './commonComponents';
-export const TableHeader = ({ columns, fixedHeader, headerColor, rowActions, headerHeight, columnPadding, expandable, }) => {
-    return (React.createElement(StyledRow, null,
-        columns.map((column, columnIndex) => (React.createElement(StyledHeaderCell, { key: columnIndex, fixedHeader: fixedHeader, headerHeight: headerHeight, minWidth: column.minWidth, maxWidth: column.maxWidth, headerColor: headerColor, columnPadding: columnPadding }, column.name))),
-        (expandable || rowActions) && (React.createElement(StyledHeaderCell, { fixedHeader: fixedHeader, stickyCell: true, minWidth: rowActions?.minWidth, headerColor: headerColor, columnPadding: columnPadding }, "Actions"))));
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { StyledRow, StyledHeaderCell } from './commonComponents.js';
+
+const TableHeader = ({
+  columns,
+  fixedHeader,
+  headerColor,
+  rowActions,
+  headerHeight,
+  columnPadding,
+  expandable
+}) => {
+  return /* @__PURE__ */ jsxs(StyledRow, { children: [
+    columns.map((column, columnIndex) => /* @__PURE__ */ jsx(
+      StyledHeaderCell,
+      {
+        fixedHeader,
+        headerHeight,
+        minWidth: column.minWidth,
+        maxWidth: column.maxWidth,
+        headerColor,
+        columnPadding,
+        children: column.name
+      },
+      columnIndex
+    )),
+    (expandable || rowActions) && /* @__PURE__ */ jsx(
+      StyledHeaderCell,
+      {
+        fixedHeader,
+        stickyCell: true,
+        minWidth: rowActions?.minWidth,
+        headerColor,
+        columnPadding,
+        children: "Actions"
+      }
+    )
+  ] });
 };
-//# sourceMappingURL=TableHeader.js.map
+
+export { TableHeader };