@mrshmllw/smores-react 6.0.0 → 6.0.2

package/dist/SupportMessage/SupportMessage.js

@@ -1,112 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { darken } from 'polished';
-import styled, { css } from 'styled-components';
-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"
-  }
-};
-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)`
-  align-self: flex-start;
-`;
-const Wrapper = styled(Box)(
-  ({ type, onClick }) => css`
-    align-items: center;
-    background-color: ${styles[type].backgroundColor};
-    border-radius: 16px;
-    ${onClick && `cursor: pointer`};
-    padding: 12px;
-    display: flex;
-    width: 100%;
-
-    &:hover,
-    &:active {
-      ${onClick && `background-color: ${styles[type].hoverBackgroundColor};`};
-    }
-  `
-);
-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)`
-  color: ${theme.colors.liquorice};
-  font-size: 14px;
-  line-height: 20px;
-`;
-const Description = styled(Text)`
-  color: ${theme.colors.liquorice};
-  font-size: 14px;
-  line-height: 20px;
-`;
-
-export { SupportMessage };

package/dist/Table/Table.js

@@ -1,74 +0,0 @@
-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
-      ))
-    ] })
-  ] });
-};
-
-export { Table };

package/dist/Table/components/RowActions.js

@@ -1,98 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default from 'react';
-import styled from 'styled-components';
-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__default.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)`
-  white-space: nowrap;
-  margin-right: 8px;
-
-  &:last-child {
-    margin-right: 0px;
-  }
-
-  .reactElementRowAction {
-    cursor: pointer;
-    ${focusOutlineStyle}
-  }
-`;
-const CaretIcon = styled(IconStrict)(
-  ({ isOpen }) => `
-    transform: ${isOpen ? "rotate(90deg)" : "rotate(0deg)"};
-    transition: transform 0.3s ease;
-  `
-);
-
-export { RowActions };

package/dist/Table/components/TableHeader.js

@@ -1,41 +0,0 @@
-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"
-      }
-    )
-  ] });
-};
-
-export { TableHeader };

package/dist/Table/components/TableRow.js

@@ -1,113 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import React__default, { useState } from 'react';
-import { isReactElement } from '../../utils/isReactElement.js';
-import { isMappedReactElement } from '../helpers.js';
-import { RowActions } from './RowActions.js';
-import { StyledRow, StyledCell } from './commonComponents.js';
-
-const TableRow = ({
-  rowData,
-  rowIndex,
-  columns,
-  subRows,
-  subTable,
-  stripedColor,
-  rowActions,
-  rowColor,
-  rowBorderColor,
-  rowPadding,
-  columnPadding,
-  showActions,
-  expandable,
-  clickableRow
-}) => {
-  const [expandedRows, setExpandedRows] = useState([]);
-  const toggleRowExpansion = (rowIndex2) => {
-    setExpandedRows(
-      (prevState) => prevState.includes(rowIndex2) ? prevState.filter((index) => index !== rowIndex2) : [...prevState, rowIndex2]
-    );
-  };
-  const subRowsData = subRows?.rows(rowData);
-  const subTableData = subTable?.table(rowData);
-  const showSubRowsOnExpand = subRows?.showOnExpand && subRows?.showOnExpand(rowData);
-  const showSubTableOnExpand = subTable?.showOnExpand && subTable?.showOnExpand(rowData);
-  const showActionsCell = expandable || rowActions;
-  const expandSubProp = showActionsCell ? columns.length + 1 : columns.length;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      StyledRow,
-      {
-        stripedColor,
-        rowColor,
-        rowBorderColor,
-        clickableRow: !!clickableRow,
-        onClick: () => clickableRow && clickableRow(rowData),
-        tabIndex: clickableRow && 0,
-        children: [
-          columns.map((column, columnIndex) => {
-            let cellContent;
-            if (column.cell) {
-              cellContent = column.cell(rowData, rowIndex, column, rowIndex);
-            }
-            return /* @__PURE__ */ jsx(
-              StyledCell,
-              {
-                rowPadding,
-                columnPadding,
-                minWidth: column.minWidth,
-                maxWidth: column.maxWidth,
-                noWrapContent: column.noWrapContent,
-                truncateContent: column.truncateContent,
-                hideOverflow: column.hideOverflow,
-                children: cellContent
-              },
-              columnIndex
-            );
-          }),
-          (showActionsCell || showActions) && /* @__PURE__ */ jsx(
-            RowActions,
-            {
-              expandable,
-              rowActions,
-              rowData,
-              isExpanded: expandedRows.includes(rowIndex),
-              toggleExpansion: () => toggleRowExpansion(rowIndex)
-            }
-          )
-        ]
-      }
-    ),
-    expandedRows.includes(rowIndex) && /* @__PURE__ */ jsxs(Fragment, { children: [
-      subRows && subRowsData && showSubRowsOnExpand && isReactElement(subRowsData) && React__default.cloneElement(subRowsData, {
-        rowPadding,
-        columnPadding
-      }),
-      subRows && subRowsData && showSubRowsOnExpand && isMappedReactElement(subRowsData) && subRowsData.map(
-        (row) => React__default.cloneElement(row, {
-          rowPadding,
-          showActions: showActionsCell
-        })
-      ),
-      subTable && showSubTableOnExpand && subTableData && /* @__PURE__ */ jsx(StyledCell, { colSpan: expandSubProp, children: React__default.cloneElement(subTableData, {
-        rowPadding,
-        columnPadding
-      }) })
-    ] }),
-    subRows && subRowsData && !showSubRowsOnExpand && isReactElement(subRowsData) && React__default.cloneElement(subRowsData, {
-      rowPadding,
-      columnPadding
-    }),
-    subRows && subRowsData && !showSubRowsOnExpand && isMappedReactElement(subRowsData) && subRowsData.map(
-      (row) => React__default.cloneElement(row, {
-        rowPadding,
-        columnPadding
-      })
-    ),
-    subTable && subTableData && !showSubTableOnExpand && /* @__PURE__ */ jsx(StyledCell, { colSpan: expandSubProp, children: React__default.cloneElement(subTableData, {
-      rowPadding,
-      columnPadding
-    }) })
-  ] });
-};
-
-export { TableRow };

package/dist/Table/components/commonComponents.js

@@ -1,122 +0,0 @@
-import { darken } from 'polished';
-import styled, { css } from 'styled-components';
-import { fontStyleMapping } from '../../Text/fontMapping.js';
-import { theme } from '../../theme.js';
-import { focusOutlineStyle } from '../../utils/focusOutline.js';
-
-const StyledTable = styled.table`
-  width: 100%;
-  height: 100%;
-  border-collapse: collapse;
-  overflow: auto;
-  background: ${theme.colors.coconut};
-  border-spacing: 30px;
-`;
-const StyledHeaderCell = styled.th`
-  background: ${theme.colors.coconut};
-  position: ${({ fixedHeader }) => fixedHeader ? "sticky" : "auto"};
-  top: 0;
-  z-index: 2;
-  text-align: left;
-  vertical-align: bottom;
-  ${fontStyleMapping["label"]};
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-
-  ${({ headerColor }) => headerColor && css`
-      background: ${theme.colors[headerColor]};
-    `}
-
-  ${({ headerHeight }) => headerHeight && css`
-      height: ${headerHeight};
-    `}
-
-  ${({ maxWidth }) => maxWidth && css`
-      max-width: ${maxWidth};
-    `}
-
-  ${({ minWidth }) => minWidth && css`
-      min-width: ${minWidth};
-    `}
-    
-  ${({ columnPadding }) => columnPadding && css`
-      padding-left: ${columnPadding};
-      padding-right: ${columnPadding};
-    `};
-`;
-const StyledCell = styled.td`
-  vertical-align: middle;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-
-  ${({ hideOverflow }) => hideOverflow && css`
-      overflow: hidden;
-    `};
-
-  ${({ noWrapContent }) => noWrapContent && css`
-      white-space: nowrap;
-    `};
-
-  ${({ truncateContent }) => truncateContent && css`
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    `};
-
-  ${({ stickyCell }) => stickyCell && css`
-      position: sticky;
-      right: 0;
-    `};
-
-  ${({ rowPadding }) => rowPadding && css`
-      padding-top: ${rowPadding};
-      padding-bottom: ${rowPadding};
-    `};
-
-  ${({ columnPadding }) => columnPadding && css`
-      padding-left: ${columnPadding};
-      padding-right: ${columnPadding};
-    `};
-
-  ${({ maxWidth }) => maxWidth && css`
-      max-width: ${maxWidth};
-    `}
-
-  ${({ rowActionsBgColor }) => rowActionsBgColor && css`
-      background: ${theme.colors[rowActionsBgColor]};
-    `}
-`;
-const StyledRow = styled.tr`
-  background: ${theme.colors.custard};
-
-  ${({ rowBorderColor }) => rowBorderColor && css`
-      border-bottom: 1px solid ${theme.colors[rowBorderColor]};
-    `}
-
-  ${({ rowColor }) => rowColor && css`
-      background: ${theme.colors[rowColor]};
-    `}
-
-  ${({ stripedColor }) => stripedColor && css`
-      &:nth-child(even) {
-        background: ${theme.colors[stripedColor]};
-      }
-    `}
-
-    ${({ clickableRow, rowColor }) => clickableRow && css`
-      cursor: pointer;
-      &:hover {
-        background: ${darken(0.1, theme.colors[rowColor ?? "custard"])};
-      }
-      &:focus-visible {
-        ${focusOutlineStyle}
-        background: ${darken(0.1, theme.colors[rowColor ?? "custard"])};
-      }
-    `}
-`;
-
-export { StyledCell, StyledHeaderCell, StyledRow, StyledTable };

package/dist/Table/helpers.js

@@ -1,16 +0,0 @@
-import { isValidElement } from 'react';
-
-const isMappedReactElement = (obj) => {
-  if (!Array.isArray(obj))
-    return false;
-  if (!obj[0])
-    return false;
-  if (!isValidElement(obj[0]))
-    return false;
-  const allReactElements = obj.every(
-    (val, i, arr) => typeof val === typeof arr[0]
-  );
-  return allReactElements;
-};
-
-export { isMappedReactElement };

package/dist/Tag/Tag.js

@@ -1,47 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { Text } from '../Text/Text.js';
-import { theme } from '../theme.js';
-import { Box } from '../Box/Box.js';
-
-const Tag = ({
-  label,
-  color,
-  borderColor,
-  bgColor,
-  className,
-  ...marginProps
-}) => /* @__PURE__ */ jsx(
-  Wrapper,
-  {
-    bgColor,
-    className,
-    borderColor,
-    ...marginProps,
-    alignContent: "center",
-    justifyContent: "center",
-    children: /* @__PURE__ */ jsx(TagText, { tag: "span", typo: "label", color, children: label })
-  }
-);
-const Wrapper = styled(Box)`
-  background-color: ${({ bgColor }) => bgColor && theme.colors[bgColor]};
-  border: ${({ borderColor }) => borderColor && `1px solid ${theme.colors[borderColor]}`};
-
-  border-radius: 6px;
-  padding: 4px 8px;
-
-  height: 22px;
-
-  box-sizing: border-box;
-  display: inline-flex;
-`;
-const TagText = styled(Text)`
-  display: flex;
-  align-items: center;
-  font-size: 10px;
-  font-weight: 500;
-  line-height: 12px;
-  text-transform: uppercase;
-`;
-
-export { Tag };