@mrshmllw/smores-react 6.0.0 → 6.0.2

package/dist/vitest.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+export default defineConfig({
+    test: {
+        environment: 'jsdom',
+        globals: true,
+        include: ['src/**/__tests__/*'],
+        exclude: ['**/node_modules/**', '**/*.stories.js', 'src/utils/**'],
+    },
+});
+//# sourceMappingURL=vitest.config.js.map

package/dist/vitest.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vitest.config.js","sourceRoot":"","sources":["../vitest.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAE5C,eAAe,YAAY,CAAC;IAC1B,IAAI,EAAE;QACJ,WAAW,EAAE,OAAO;QACpB,OAAO,EAAE,IAAI;QACb,OAAO,EAAE,CAAC,oBAAoB,CAAC;QAC/B,OAAO,EAAE,CAAC,oBAAoB,EAAE,iBAAiB,EAAE,cAAc,CAAC;KACnE;CACF,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "6.0.0",
+  "version": "6.0.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -16,11 +16,11 @@
     "dist"
   ],
   "scripts": {
-    "build": "vite build",
+    "build": "tsc --p ./tsconfig.build.json",
     "build-storybook": "storybook build -c .storybook -s public",
     "check-types": "tsc --noEmit",
     "deploy-storybook": "storybook-to-ghpages",
-    "prepublishOnly": "vite build",
+    "prepublishOnly": "npm run build",
     "start": "npm run storybook",
     "storybook": "storybook dev -p 6006",
     "test:coverage": "vitest --coverage --silent",
@@ -34,6 +34,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
+    "@babel/eslint-parser": "^7.23.10",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
@@ -54,14 +55,9 @@
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
     "@types/styled-components": "^5.1.3",
-    "@types/svgo": "^3.0.0",
     "@types/testing-library__react": "^10.2.0",
-    "@types/uuid": "^9.0.5",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.2.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^9.1.0",
     "conventional-changelog-conventionalcommits": "^7.0.2",
     "eslint": "^7.9.0",
     "eslint-config-prettier": "^9.0.0",
@@ -76,17 +72,12 @@
     "storybook": "^7.0.6",
     "styled-components": "^5.2.1",
     "typescript": "^5.0.2",
-    "vite": "^5.0.12",
-    "vite-plugin-dts": "^3.7.0",
-    "vite-plugin-svgr": "^4.2.0",
     "vitest": "^1.2.2"
   },
   "dependencies": {
     "body-scroll-lock": "^4.0.0-beta.0",
     "date-fns": "^2.16.1",
-    "polished": "^4.1.3",
-    "vite": "^4.5.1",
-    "vite-plugin-svgr": "^4.2.0"
+    "polished": "^4.1.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17 || ^18",

package/dist/Accordion/Accordion.js

@@ -1,107 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
-import styled, { css } from 'styled-components';
-import { Box } from '../Box/Box.js';
-import { Icon } from '../Icon/Icon.js';
-import { theme } from '../theme.js';
-import { Text } from '../Text/Text.js';
-
-const Accordion = ({
-  title,
-  children,
-  onToggle,
-  filledBackground,
-  defaultIsOpen = false,
-  borderTop = false,
-  borderColor = "oatmeal",
-  backgroundColor = "custard",
-  subTitle,
-  fullBorder = false,
-  ...marginProps
-}) => {
-  const [isOpen, setIsOpen] = useState(defaultIsOpen);
-  const px = fullBorder ? "16px" : "0";
-  const handleToggle = () => {
-    const nextOpenState = !isOpen;
-    onToggle?.(nextOpenState);
-    setIsOpen(nextOpenState);
-  };
-  return /* @__PURE__ */ jsxs(
-    Wrapper,
-    {
-      borderTop,
-      fullBorder,
-      filledBackground,
-      borderColor,
-      backgroundColor,
-      ...marginProps,
-      children: [
-        /* @__PURE__ */ jsxs(
-          TopContainer,
-          {
-            flex: true,
-            alignItems: "center",
-            justifyContent: "space-between",
-            onClick: handleToggle,
-            py: "16px",
-            pr: "16px",
-            pl: px,
-            children: [
-              /* @__PURE__ */ jsxs(TitleContainer, { children: [
-                /* @__PURE__ */ jsx(Text, { tag: "h2", typo: "headline-regular", color: "liquorice", children: title }),
-                subTitle && /* @__PURE__ */ jsx(Text, { tag: "label", color: "liquorice", typo: "label", mt: { custom: 4 }, children: subTitle })
-              ] }),
-              /* @__PURE__ */ jsx(
-                CaretIcon,
-                {
-                  render: "caret",
-                  size: 24,
-                  color: "marzipan",
-                  isOpen,
-                  borderTop
-                }
-              )
-            ]
-          }
-        ),
-        isOpen && /* @__PURE__ */ jsx(Box, { pt: "12px", pb: "16px", px, children })
-      ]
-    }
-  );
-};
-const Wrapper = styled(Box)(
-  ({
-    borderTop,
-    fullBorder,
-    filledBackground,
-    borderColor = "oatmeal",
-    backgroundColor = "custard"
-  }) => css`
-    border-bottom: 1px solid ${theme.colors[borderColor]};
-    ${borderTop && `border-top: 1px solid ${theme.colors[borderColor]};`}
-
-    ${fullBorder && css`
-      border: 1px solid ${theme.colors[borderColor]};
-      border-radius: 16px;
-    `}
-
-    ${filledBackground && css`
-      background-color: ${theme.colors[backgroundColor]};
-    `}
-  `
-);
-const TitleContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-const TopContainer = styled(Box)`
-  cursor: pointer;
-`;
-const CaretIcon = styled(Icon)(
-  ({ isOpen }) => css`
-    transform: ${isOpen ? "rotate(180deg)" : "rotate(0deg)"};
-    transition: transform 0.6s ease;
-  `
-);
-
-export { Accordion };

package/dist/ActionDropdown/ActionDropdown.js

@@ -1,102 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
-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 { List } from './List.js';
-import { theme } from '../theme.js';
-
-const ActionDropdown = ({
-  id,
-  className = "",
-  label,
-  value,
-  list,
-  onSelect,
-  ...marginProps
-}) => {
-  const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(
-    Container,
-    {
-      id,
-      className,
-      onClick: () => setOpen((currentOpen) => !currentOpen),
-      ...marginProps,
-      children: [
-        label && /* @__PURE__ */ jsx(Text, { tag: "label", color: "sesame", typo: "label", children: label }),
-        /* @__PURE__ */ jsxs(
-          Label,
-          {
-            text: value.textColor ?? "liquorice",
-            bg: value.bgColor ?? "sesame",
-            children: [
-              /* @__PURE__ */ jsx(SelectedOption, { children: value.label }),
-              /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  render: "caret",
-                  color: value.textColor ?? "sesame",
-                  size: 24,
-                  rotate: open ? 180 : 0
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(OuterContainer, { open, children: /* @__PURE__ */ jsx(List, { options: list, selectOption: onSelect }) })
-      ]
-    }
-  );
-};
-const Label = styled.div(
-  ({ text, bg }) => css`
-    color: ${theme.colors[text]};
-    background-color: ${theme.colors[bg]};
-    position: relative;
-    width: 100%;
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    text-align: center;
-    border-radius: 64px;
-    padding: 16px 16px 14px;
-    box-sizing: border-box;
-    user-select: none;
-  `
-);
-const SelectedOption = styled.span`
-  font-size: 14px;
-  font-weight: bold;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-const Container = styled(Box)`
-  position: relative;
-  display: block;
-  width: 210px;
-  height: 48px;
-  text-align: center;
-  cursor: pointer;
-  outline: none;
-  border-radius: 8px;
-`;
-const OuterContainer = styled.div(
-  ({ open }) => css`
-    position: absolute;
-    width: 100%;
-    border-radius: 12px;
-    margin-top: 8px;
-    display: ${open ? "block" : "none"};
-    max-height: ${open ? "235px" : "48px"};
-    background-color: ${theme.colors.custard};
-    overflow-y: ${open ? "auto" : "hidden"};
-    z-index: 4;
-    transition: all 0.2s ease-in-out;
-  `
-);
-
-export { ActionDropdown };

package/dist/ActionDropdown/List.js

@@ -1,32 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { theme } from '../theme.js';
-import { darken } from 'polished';
-
-const List = ({ options, selectOption }) => /* @__PURE__ */ jsx(Container, { children: options.map((option) => /* @__PURE__ */ jsx(ListItem, { onClick: () => selectOption(option), children: option.label }, option.value)) });
-const Container = styled.ul`
-  padding: 0;
-  margin: 0;
-  max-height: 188px;
-`;
-const ListItem = styled.li`
-  padding: 16px 24px;
-  text-align: left;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  box-sizing: border-box;
-  font-size: 14px;
-  cursor: pointer;
-  color: ${theme.colors.liquorice};
-
-  &:hover {
-    background-color: ${darken(0.1, theme.colors.custard)};
-  }
-
-  &:last-child {
-    border-bottom: none;
-  }
-`;
-
-export { List };

package/dist/Banner/BannerContainer.js

@@ -1,52 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useCallback } from 'react';
-import styled from 'styled-components';
-import { BannerItem } from './BannerItem.js';
-
-const BannerContext = createContext({
-  addBanner: () => {
-    throw new Error("Please add the BannerContainer to your application");
-  }
-});
-const useBannerContext = () => useContext(BannerContext);
-const BannerContainer = ({ children }) => {
-  let bannerId = 0;
-  const [banner, setBanner] = useState([]);
-  const newBannerId = useCallback(() => {
-    const newId = `MM_BANNER_${bannerId}`;
-    bannerId++;
-    return newId;
-  }, [bannerId]);
-  const addBanner = (banner2) => {
-    const newBanner = {
-      ...banner2,
-      id: newBannerId()
-    };
-    setBanner([newBanner]);
-  };
-  const deleteBanner = (id) => {
-    setBanner(banner.filter((banner2) => banner2.id !== id));
-  };
-  return /* @__PURE__ */ jsxs(
-    BannerContext.Provider,
-    {
-      value: {
-        addBanner
-      },
-      children: [
-        children,
-        /* @__PURE__ */ jsx(BannerWrapper, { children: banner.map((banner2) => /* @__PURE__ */ jsx(BannerItem, { ...banner2, deleteBanner }, banner2.id)) })
-      ]
-    }
-  );
-};
-const BannerWrapper = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  z-index: 99;
-`;
-
-export { BannerContainer, BannerContext, useBannerContext };

package/dist/Banner/BannerItem.js

@@ -1,122 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Box } from '../Box/Box.js';
-import styled, { css } from 'styled-components';
-import { Icon } from '../Icon/Icon.js';
-import { theme } from '../theme.js';
-import { Text } from '../Text/Text.js';
-import 'react';
-import { useTimeout } from '../hooks/useTimeout/index.js';
-
-const styles = {
-  upsell: {
-    iconColor: "liquorice",
-    backgroundColor: theme.colors.marshmallowPink,
-    textColor: "liquorice"
-  },
-  critical: {
-    iconColor: "mascarpone",
-    backgroundColor: theme.colors.strawberry,
-    textColor: "mascarpone"
-  },
-  general: {
-    iconColor: "mascarpone",
-    backgroundColor: theme.colors.liquorice,
-    textColor: "mascarpone"
-  },
-  success: {
-    iconColor: "mascarpone",
-    backgroundColor: theme.colors.apple,
-    textColor: "mascarpone"
-  }
-};
-const BannerItem = ({
-  type,
-  autoCloseTime = 4,
-  id,
-  message,
-  topOffset,
-  exploreAction,
-  showExploreText,
-  showExploreIcon,
-  leadingIcon,
-  canManuallyClose,
-  showCloseIcon,
-  deleteBanner,
-  noTimeout
-}) => {
-  const autoCloseBaner = () => {
-    if (noTimeout)
-      return;
-    if (type !== "critical")
-      return deleteBanner(id);
-    else {
-      return;
-    }
-  };
-  useTimeout(() => autoCloseBaner(), autoCloseTime * 1e3);
-  const textColor = styles[type].textColor;
-  const iconColor = styles[type].iconColor;
-  return /* @__PURE__ */ jsxs(
-    BannerWrapper,
-    {
-      p: "24px",
-      mt: { custom: topOffset },
-      flex: true,
-      justifyContent: "space-between",
-      type,
-      children: [
-        /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", children: [
-          leadingIcon && /* @__PURE__ */ jsx(Icon, { mr: "12px", render: leadingIcon, size: 24, color: iconColor }),
-          /* @__PURE__ */ jsx(Text, { typo: "headline-small", color: textColor, children: message })
-        ] }),
-        /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", children: [
-          canManuallyClose && /* @__PURE__ */ jsx(
-            GenericButton,
-            {
-              onClick: () => deleteBanner(id),
-              "aria-label": `close banner ${message}`,
-              children: showCloseIcon ? /* @__PURE__ */ jsx(Icon, { render: "cross", size: 16, color: iconColor }) : /* @__PURE__ */ jsx(UnderlinedText, { tag: "span", typo: "desc-medium", color: textColor, children: "Dismiss" })
-            }
-          ),
-          exploreAction && /* @__PURE__ */ jsx(GenericButton, { onClick: exploreAction, "aria-label": `cta ${message}`, children: /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", children: [
-            showExploreText && /* @__PURE__ */ jsx(
-              UnderlinedText,
-              {
-                ml: "12px",
-                tag: "span",
-                typo: "desc-medium",
-                color: textColor,
-                children: "Explore"
-              }
-            ),
-            showExploreIcon && /* @__PURE__ */ jsx(
-              Icon,
-              {
-                render: "arrow",
-                ml: "12px",
-                size: 24,
-                color: iconColor,
-                rotate: 180
-              }
-            )
-          ] }) })
-        ] })
-      ]
-    },
-    id
-  );
-};
-const BannerWrapper = styled(Box)(
-  ({ type }) => css`
-    border-radius: 0px 0px 16px 16px;
-    background-color: ${styles[type].backgroundColor};
-  `
-);
-const GenericButton = styled.button`
-  cursor: pointer;
-`;
-const UnderlinedText = styled(Text)`
-  text-decoration: underline;
-`;
-
-export { BannerItem };

package/dist/Banner/hooks.js

@@ -1,8 +0,0 @@
-import { useBannerContext } from './BannerContainer.js';
-
-const useBanner = () => {
-  const { addBanner } = useBannerContext();
-  return { addBanner };
-};
-
-export { useBanner };

package/dist/Box/Box.js

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-import { flex } from '../utils/flex.js';
-import { measure } from '../utils/measure.js';
-import { margin, padding } from '../utils/space.js';
-
-const Box = styled.div`
-  ${margin};
-  ${padding};
-  ${flex};
-  ${measure};
-`;
-
-export { Box };

package/dist/BrandCard/BrandCard.js

@@ -1,85 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { theme } from '../theme.js';
-import { Box } from '../Box/Box.js';
-import { Text } from '../Text/Text.js';
-
-const BrandCard = ({
-  title,
-  body,
-  visual,
-  visualHeight = "",
-  alignVisual,
-  visualBottom,
-  tag,
-  buttonAction,
-  fallbackStyle = false,
-  bgColour = "matcha",
-  maxWidth = "",
-  ...otherProps
-}) => {
-  return /* @__PURE__ */ jsxs(
-    Container,
-    {
-      maxWidth,
-      visual,
-      fallbackStyle,
-      bgColor: bgColour,
-      ...otherProps,
-      children: [
-        tag && /* @__PURE__ */ jsx(TagWrapper, { children: tag }),
-        visual && !visualBottom && /* @__PURE__ */ jsx(VisualWrapper, { visualHeight, children: /* @__PURE__ */ jsx(
-          Visual,
-          {
-            visualUrl: visual,
-            visualHeight,
-            alignVisual
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Box, { flex: true, alignItems: "center", justifyContent: "space-between", mt: "16px", children: /* @__PURE__ */ jsx(Box, { flex: true, alignItems: "center", children: /* @__PURE__ */ jsxs(Box, { children: [
-          title && /* @__PURE__ */ jsx(Text, { typo: "hero-alternate", color: "liquorice", children: title }),
-          body && /* @__PURE__ */ jsx(Text, { typo: "body-regular", color: "liquorice", children: body })
-        ] }) }) }),
-        buttonAction && /* @__PURE__ */ jsx(Box, { mt: "16px", children: buttonAction }),
-        visual && visualBottom && /* @__PURE__ */ jsx(VisualWrapper, { visualHeight, mt: "16px", children: /* @__PURE__ */ jsx(
-          Visual,
-          {
-            visualUrl: visual,
-            visualHeight,
-            alignVisual
-          }
-        ) })
-      ]
-    }
-  );
-};
-const Container = styled(Box)`
-  background: ${({ fallbackStyle, bgColor }) => fallbackStyle ? theme.colors.cream : theme.colors[bgColor]};
-  box-sizing: border-box;
-  border-radius: 16px 16px 0px 0px;
-
-  padding: 16px;
-  position: relative;
-  overflow: hidden;
-`;
-const TagWrapper = styled(Box)`
-  position: absolute;
-  top: 16px;
-  right: 16px;
-`;
-const VisualWrapper = styled(Box)`
-  width: 100%;
-
-  ${({ visualHeight }) => visualHeight && `height: ${visualHeight};`}
-`;
-const Visual = styled(Box)`
-  width: 100%;
-  background-image: url('${(p) => p.visualUrl}');
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: ${({ alignVisual }) => alignVisual ? alignVisual : "left"};
-
-  ${({ visualHeight }) => visualHeight ? `height: ${visualHeight};` : "padding-top: 100%;"}
-`;
-
-export { BrandCard };