@mrshmllw/smores-react 6.0.0 → 6.0.2

package/dist/Datepicker/Datepicker.js

@@ -1,178 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { addDays, isSameMonth, getYear, eachMonthOfInterval, format, getDaysInMonth, getMonth, isSameDay, isWithinInterval, isWeekend } from 'date-fns';
-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 { theme } from '../theme.js';
-import { convertToUkDate } from '../utils/date.js';
-import { focusOutlineStyle } from '../utils/focusOutline.js';
-import { useControllableState } from '../utils/useControlledState.js';
-import { DatesList } from './DatesList.js';
-
-const getAvailableMonths = (startDate, endDate) => {
-  const monthList = eachMonthOfInterval({
-    start: startDate,
-    end: endDate
-  });
-  return monthList.map((monthDate) => ({
-    date: monthDate,
-    label: format(monthDate, "MMMM")
-  }));
-};
-const Datepicker = ({
-  showDayLabels = false,
-  disableWeekend = true,
-  range = 14,
-  fromDate = /* @__PURE__ */ new Date(),
-  endingDate,
-  showYear = false,
-  showSelectedDate = false,
-  onDateSelect,
-  onChange,
-  value,
-  fallbackStyle = false,
-  ...marginProps
-}) => {
-  const startDate = convertToUkDate(fromDate);
-  const endDate = endingDate ? endingDate : addDays(startDate, range);
-  const availableMonths = getAvailableMonths(startDate, endDate);
-  const selectedDate = value ?? /* @__PURE__ */ new Date();
-  const [activeDay, setActiveDay] = useControllableState({
-    initialState: void 0,
-    stateProp: value
-  });
-  const [activeMonthIndex, setActiveMonth] = useState(
-    showSelectedDate ? availableMonths.findIndex(
-      (month) => isSameMonth(month.date, selectedDate)
-    ) : 0
-  );
-  const handleSelectEvent = (date) => {
-    setActiveDay(date);
-    onChange?.(date);
-    onDateSelect(format(date, "yyyy-MM-dd"));
-  };
-  const generateDaysForMonth = (monthDate) => {
-    const daysInMonth = getDaysInMonth(monthDate);
-    const month = getMonth(monthDate);
-    const year = getYear(monthDate);
-    const filteredDays = [];
-    for (let i = 1; i <= daysInMonth; i += 1) {
-      const date = new Date(year, month, i);
-      filteredDays.push({
-        date,
-        label: format(date, "dd"),
-        active: activeDay ? isSameDay(date, activeDay) : false,
-        disabled: !isWithinInterval(date, { start: startDate, end: endDate }) || disableWeekend && isWeekend(date)
-      });
-    }
-    return filteredDays;
-  };
-  return /* @__PURE__ */ jsxs(Container, { id: "datepicker", ...marginProps, fallbackStyle, children: [
-    /* @__PURE__ */ jsxs(
-      Header,
-      {
-        flex: true,
-        alignItems: "center",
-        justifyContent: "space-between",
-        direction: "row",
-        children: [
-          /* @__PURE__ */ jsx(
-            Circle,
-            {
-              type: "button",
-              disabled: activeMonthIndex === 0,
-              onClick: () => setActiveMonth(activeMonthIndex - 1),
-              onKeyDown: (e) => {
-                if (e.key === "Enter") {
-                  setActiveMonth(activeMonthIndex - 1);
-                }
-              },
-              children: /* @__PURE__ */ jsx(Icon, { render: "caret", color: "cream", size: 18, rotate: 90 })
-            }
-          ),
-          /* @__PURE__ */ jsxs(Heading, { tag: "h4", typo: "body-regular", children: [
-            availableMonths[activeMonthIndex].label,
-            " ",
-            showYear && `- ${getYear(availableMonths[activeMonthIndex].date)}`
-          ] }),
-          /* @__PURE__ */ jsx(
-            Circle,
-            {
-              type: "button",
-              disabled: activeMonthIndex === availableMonths.length - 1,
-              onClick: () => setActiveMonth(activeMonthIndex + 1),
-              onKeyDown: (e) => {
-                if (e.key === "Enter") {
-                  setActiveMonth(activeMonthIndex + 1);
-                }
-              },
-              children: /* @__PURE__ */ jsx(Icon, { render: "caret", color: "cream", size: 18, rotate: -90 })
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(Box, { flex: true, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx(
-      DatesList,
-      {
-        items: generateDaysForMonth(availableMonths[activeMonthIndex].date),
-        showDayLabels,
-        handleDateSelect: handleSelectEvent
-      }
-    ) })
-  ] });
-};
-const Container = styled(Box)`
-  font-family: ${theme.font.system};
-  display: inline-block;
-  box-sizing: border-box;
-  outline: none;
-  border-radius: 16px;
-
-  ${({ fallbackStyle }) => {
-  return fallbackStyle ? css`
-          background-color: ${theme.colors.cream};
-        ` : css`
-          background-color: ${theme.colors.custard};
-        `;
-}}
-`;
-const Header = styled(Box)`
-  color: ${theme.colors.liquorice};
-  user-select: none;
-  padding: 16px;
-  border-bottom: 1px solid ${theme.colors.oatmeal};
-
-  span {
-    font-size: 16px;
-    line-height: 1;
-  }
-`;
-const Heading = styled(Text)`
-  position: relative;
-  top: 2px;
-  font-weight: ${theme.font.weight.medium};
-`;
-const Circle = styled.button`
-  background-color: ${theme.colors.liquorice};
-  height: 32px;
-  width: 32px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  border: none;
-  padding: 0 !important;
-  cursor: pointer;
-
-  :disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-
-  ${focusOutlineStyle}
-`;
-
-export { Datepicker };

package/dist/Datepicker/DatesList.js

@@ -1,91 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { getISODay } from 'date-fns';
-import { theme } from '../theme.js';
-import { Text } from '../Text/Text.js';
-import { focusOutlineStyle } from '../utils/focusOutline.js';
-
-const getBlankDaysCount = (firstDayOfTheMonth) => {
-  const dayOfTheWeek = getISODay(firstDayOfTheMonth);
-  return dayOfTheWeek - 1;
-};
-const daysOfTheWeek = ["mon", "tues", "wed", "thurs", "fri", "sat", "sun"];
-const DatesList = ({
-  items,
-  handleDateSelect,
-  showDayLabels
-}) => {
-  return /* @__PURE__ */ jsxs(Container, { children: [
-    showDayLabels && daysOfTheWeek.map((day) => {
-      return /* @__PURE__ */ jsx(Text, { color: "sesame", typo: "label", mb: "24px", children: day }, day);
-    }),
-    Array(getBlankDaysCount(items[0].date)).fill(null).map((_, index) => /* @__PURE__ */ jsx(ListButton, { disabled: true }, `blankItem-${index}`)),
-    items.map((item, i) => /* @__PURE__ */ jsx(
-      ListButton,
-      {
-        type: "button",
-        disabled: item.disabled,
-        className: `ListButton ${item.active ? "active" : ""}`,
-        onClick: () => handleDateSelect(item.date),
-        onKeyDown: (e) => {
-          if (e.key === "Enter") {
-            handleDateSelect(item.date);
-          }
-        },
-        "data-testid": item.label,
-        children: item.label
-      },
-      i
-    ))
-  ] });
-};
-const Container = styled.div`
-  justify-items: center;
-  display: grid;
-  grid-column-gap: 4px;
-  grid-row-gap: 8px;
-  grid-template-columns: repeat(7, 1fr);
-  padding: 8px;
-
-  @media (min-width: 360px) {
-    grid-gap: 8px;
-    padding: 16px;
-  }
-
-  @media (min-width: 768px) {
-    grid-column-gap: 16px;
-    padding: 32px;
-  }
-`;
-const ListButton = styled.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  width: 32px;
-  height: 32px;
-  border: 1px solid transparent;
-  font-weight: ${theme.font.weight.medium};
-  font-size: 14px;
-  line-height: 15px;
-  color: ${theme.colors.liquorice};
-  background-color: transparent;
-  pointer-events: ${({ disabled }) => disabled ? "none" : ""};
-  opacity: ${({ disabled }) => disabled ? "0.2" : "1"};
-  cursor: pointer;
-
-  &:hover:not(.active) {
-    color: ${theme.colors.custard};
-    background-color: ${theme.colors.liquorice};
-  }
-
-  &.active {
-    color: ${theme.colors.custard};
-    background-color: ${theme.colors.liquorice};
-    cursor: default;
-  }
-
-  ${focusOutlineStyle}
-`;
-
-export { DatesList };

package/dist/Divider/Divider.js

@@ -1,25 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { memo } from 'react';
-import styled, { css } from 'styled-components';
-import { Box } from '../Box/Box.js';
-import { theme } from '../theme.js';
-
-const Divider = memo(function Divider2({
-  maxWidth = "none",
-  height = "1px",
-  color = "oatmeal",
-  ...marginProps
-}) {
-  return /* @__PURE__ */ jsx(Line, { maxWidth, height, color, ...marginProps });
-});
-const Line = styled(Box)`
-  ${({ color }) => color ? css`
-          background: ${theme.colors[color]};
-        ` : ""}
-  display: block;
-  height: ${({ height }) => height};
-  max-width: ${({ maxWidth }) => maxWidth};
-  width: 100%;
-`;
-
-export { Divider };

package/dist/Dropdown/Dropdown.js

@@ -1,145 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useMemo } from 'react';
-import styled, { css } from 'styled-components';
-import { Box } from '../Box/Box.js';
-import { Icon } from '../Icon/Icon.js';
-import { Field } from '../fields/Field/Field.js';
-import { StyledFrontIcon } from '../fields/components/CommonInput.js';
-import { theme } from '../theme.js';
-import { useUniqueId } from '../utils/id.js';
-import { useControllableState } from '../utils/useControlledState.js';
-
-const Dropdown = forwardRef(function Dropdown2({
-  id: idProp,
-  placeholder,
-  showDefaultOption = false,
-  customDefaultOption,
-  name,
-  value: valueProp,
-  defaultValue,
-  disabled = false,
-  list,
-  onSelect,
-  error = false,
-  onInputChange,
-  onBlur,
-  frontIcon,
-  fallbackStyle,
-  ...fieldProps
-}, ref) {
-  const [value, setValue] = useControllableState({
-    initialState: defaultValue,
-    stateProp: valueProp
-  });
-  const id = useUniqueId(idProp);
-  const hasOptGroups = list.findIndex((item) => !!item.optionGroupLabel) !== -1;
-  const dropdownItemsGroups = useMemo(() => {
-    const itemsPerGroupLabel = /* @__PURE__ */ new Map();
-    list.forEach((item) => {
-      const key = item.optionGroupLabel ?? "";
-      const group = itemsPerGroupLabel.get(key) ?? [];
-      group.push(item);
-      itemsPerGroupLabel.set(key, group);
-    });
-    return Array.from(itemsPerGroupLabel.values());
-  }, [list]);
-  const defaultOptionLabel = () => {
-    if (!showDefaultOption) {
-      return placeholder;
-    }
-    return customDefaultOption ?? "Select an option";
-  };
-  return /* @__PURE__ */ jsx(Field, { ...fieldProps, htmlFor: id, error, children: /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", children: [
-    frontIcon && /* @__PURE__ */ jsx(
-      StyledFrontIcon,
-      {
-        disabled,
-        render: frontIcon,
-        color: "sesame"
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      StyledSelect,
-      {
-        id,
-        disabled: disabled || list.length < 1,
-        onChange: (event) => {
-          const value2 = event.currentTarget.value;
-          onSelect?.(value2);
-          onInputChange?.(event);
-          setValue(value2);
-        },
-        error,
-        ref,
-        onBlur,
-        name,
-        frontIcon,
-        fallbackStyle,
-        value: value ? value : "",
-        children: [
-          hasOptGroups ? /* @__PURE__ */ jsx("optgroup", { label: defaultOptionLabel(), children: /* @__PURE__ */ jsx("option", { value: "", hidden: !showDefaultOption, disabled: true, children: defaultOptionLabel() }) }) : /* @__PURE__ */ jsx("option", { value: "", hidden: !showDefaultOption, disabled: true, children: defaultOptionLabel() }),
-          dropdownItemsGroups.map(
-            (groupItems, i) => hasOptGroups ? /* @__PURE__ */ jsx(
-              "optgroup",
-              {
-                label: groupItems[0].optionGroupLabel ?? "Other",
-                children: groupItems.map((el, j) => /* @__PURE__ */ jsx("option", { value: el.value, children: el.label }, `${i}-${j}`))
-              },
-              i
-            ) : groupItems.map((el, j) => /* @__PURE__ */ jsx("option", { value: el.value, children: el.label }, j))
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(Caret, { children: /* @__PURE__ */ jsx(Icon, { render: "caret", color: "marzipan", size: 24 }) })
-  ] }) });
-});
-const resetSelect = css`
-  border: none;
-  border-radius: 0;
-  font-size: 16px;
-  appearance: none; /* remove default arrow */
-  outline: none;
-`;
-const StyledSelect = styled.select`
-  ${resetSelect}
-  width: 100%;
-  height: 32px;
-
-  cursor: pointer;
-  background-color: ${({ fallbackStyle }) => fallbackStyle ? theme.colors.custard : theme.colors.cream};
-
-  border-radius: 12px;
-  padding: 18px 14px;
-  border: 2px solid
-    ${({ error }) => error ? theme.colors.strawberry : theme.colors.oatmeal};
-  height: auto;
-
-  ${({ frontIcon }) => frontIcon && frontIcon != "" && `
-      padding-left: 42px;
-    `}
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  ${({ error }) => !error && css`
-      :not(:disabled) {
-        &:hover,
-        &:focus,
-        &:focus-visible,
-        &:checked {
-          border-color: ${theme.colors.marzipan}
-      }
-    `}
-`;
-const Caret = styled.div`
-  position: absolute;
-  z-index: 1;
-  right: 15px;
-  pointer-events: none;
-  color: ${theme.colors.marzipan};
-`;
-
-export { Dropdown };

package/dist/Emoji/Emoji.js

@@ -1,29 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled, { css } from 'styled-components';
-import { Box } from '../Box/Box.js';
-
-const Emoji = ({
-  className = "",
-  symbol,
-  size = 12,
-  label,
-  ...marginProps
-}) => /* @__PURE__ */ jsx(
-  Container,
-  {
-    as: "span",
-    className,
-    size,
-    role: "img",
-    "aria-label": label,
-    ...marginProps,
-    children: symbol
-  }
-);
-const Container = styled(Box)(
-  ({ size }) => css`
-    font-size: ${size}px;
-  `
-);
-
-export { Emoji };

package/dist/Icon/Icon.js

@@ -1,46 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled, { css } from 'styled-components';
-import { Box } from '../Box/Box.js';
-import { theme } from '../theme.js';
-import { iconList } from './iconsList.js';
-
-const Icon = ({
-  className = "",
-  render,
-  size = 24,
-  color = "liquorice",
-  rotate = 0,
-  ...marginProps
-}) => {
-  if (!render || !iconList[render] || render.length === 0)
-    return null;
-  const IconComponent = iconList[render];
-  return /* @__PURE__ */ jsx(
-    Container,
-    {
-      as: "span",
-      className,
-      size,
-      rotate,
-      color,
-      ...marginProps,
-      children: /* @__PURE__ */ jsx(IconComponent, {})
-    }
-  );
-};
-const Container = styled(Box)(
-  ({ size, rotate, color }) => css`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    width: ${size}px;
-    height: ${size}px;
-    transform: rotate(${rotate}deg);
-    svg {
-      color: ${theme.colors[color]} !important;
-    }
-  `
-);
-
-export { Icon };