@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/Icon/Icon.style.js

@@ -0,0 +1,92 @@
+import styled, { css } from "styled-components";
+const iconsMap = {
+  expand: "\\e923",
+  shrink: "\\e924",
+  emoji: "\\e922",
+  arrowDown: "\\e900",
+  arrowLeft: "\\e901",
+  arrowRight: "\\e902",
+  arrowUp: "\\e903",
+  heart: "\\e904",
+  heartFill: "\\e921",
+  lock: "\\e905",
+  menu: "\\e906",
+  pen: "\\e907",
+  star: "\\e908",
+  trash: "\\e909",
+  unread: "\\e90a",
+  user: "\\e90b",
+  edit: "\\e90c",
+  check: "\\e90d",
+  inProgress: "\\e90e",
+  warning: "\\e90f",
+  logout: "\\e910",
+  tokenHolder: "\\e911",
+  teams: "\\e912",
+  tokenSales: "\\e913",
+  analytics: "\\e914",
+  updates: "\\e915",
+  overview: "\\e916",
+  comments: "\\e917",
+  hamburger: "\\e918",
+  share: "\\e919",
+  facebook: "\\e91a",
+  linkedin: "\\e91b",
+  medium: "\\e91c",
+  reddit: "\\e91d",
+  telegram: "\\e91e",
+  twitter: "\\e91f",
+  youtube: "\\e920",
+  cog: "\\e926",
+  pin: "\\e925",
+  cross: "\\274C",
+  euro: "\\e93c"
+};
+const TooltipIcon = styled.i.attrs({
+  className: "ion ion-md-information-circle"
+})`
+  position: relative;
+  left: -0.4px;
+  font-size: 18px;
+  opacity: 0.2;
+  transform: rotateY(180deg);
+  margin: 0 14px;
+`;
+const Icon = styled.i.withConfig({
+  shouldForwardProp: (props) => !["size", "color", "icon", "checklist"].includes(props)
+})`
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  ${(props) => props.size && `
+    font-size: ${props.size}px;
+    `}
+
+  ${(props) => props.color && `
+    color: ${props.color};
+  `}
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  &::before {
+    content: '${(props) => props.icon}';
+  }
+
+  ${({ checklist }) => checklist && css`
+      margin-left: 3px;
+      margin-right: 11px;
+    `}
+`;
+export {
+  Icon,
+  TooltipIcon,
+  Icon as default,
+  iconsMap
+};

package/dist/components/Icon/Icon2.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import * as index from "../icons/index.js";
+const Icon2 = ({ name = "IconNotFound", ...p }) => {
+  const Ico = index[name];
+  if (typeof Ico === "undefined") {
+    console.error(`Icon name ${name} not found`);
+  }
+  return Ico ? /* @__PURE__ */ jsx(Ico, { ...p }) : null;
+};
+export {
+  Icon2
+};

package/dist/components/InfoBox/InfoBox.js

@@ -0,0 +1,93 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import styled from "styled-components";
+import { colors } from "../../styles/colors.js";
+const VARIANTS = {
+  warning: {
+    background: "#FFFBEB",
+    border: colors.warningOrange,
+    iconColor: "black"
+  },
+  info: {
+    background: "#F8FAFC",
+    border: colors.blueDark,
+    iconColor: "black"
+  },
+  error: {
+    background: "#FDEDEC",
+    border: colors.darkRed,
+    iconColor: "black"
+  }
+};
+const Container = styled.div`
+position: relative;
+  display: flex;
+  overflow: hidden;
+  align-items: flex-start;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px 12px 16px;
+  background: ${(props) => props.$bg};
+  border: 1px solid ${(props) => props.$border};
+  border-radius: 8px;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0.6px;
+  font-weight: 400;
+  color: ${colors.black};
+
+  ${(props) => !props.$noLeftBorder && `
+    &:before {
+      content: '';
+      display: block;
+      width: 4px;
+      position: absolute;
+      height: 100%;
+      left: 0px;
+      background: ${props.$border};
+    }
+  `}
+`;
+const DefaultIcon = styled.i.attrs({
+  className: "ion ion-md-information-circle-outline"
+})`
+  flex-shrink: 0;
+  font-size: 18px;
+  line-height: 18px;
+  color: ${(props) => props.$color};
+  margin-top: 1px;
+`;
+const CustomIconWrapper = styled.span`
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1px;
+`;
+const Content = styled.div`
+  flex: 1;
+  min-width: 0;
+`;
+const InfoBox = ({
+  variant = "warning",
+  children,
+  icon,
+  style,
+  className,
+  noLeftBorder
+}) => {
+  const theme = VARIANTS[variant] || VARIANTS.warning;
+  const renderIcon = () => {
+    if (icon) {
+      return /* @__PURE__ */ jsx(CustomIconWrapper, { children: icon });
+    }
+    return /* @__PURE__ */ jsx(DefaultIcon, { $color: theme.iconColor });
+  };
+  return /* @__PURE__ */ jsxs(Container, { $bg: theme.background, $noLeftBorder: noLeftBorder, $border: theme.border, style, className, children: [
+    renderIcon(),
+    /* @__PURE__ */ jsx(Content, { children })
+  ] });
+};
+export {
+  InfoBox
+};

package/dist/components/InfoIcon/InfoIcon.js

@@ -0,0 +1,62 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { Tooltip } from "react-tippy";
+import { Container, Icon } from "./InfoIcon.styles.js";
+import { IoniconsStyles } from "../../styles/ioniconsStyles.js";
+const InfoIcon = ({
+  title = null,
+  html = null,
+  position = "bottom",
+  noMargin = false,
+  noMarginLeft = false,
+  noMarginRight = false,
+  noIcon,
+  disabled,
+  fullWidth,
+  outline = false,
+  containerStyle,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(IoniconsStyles, {}),
+    /* @__PURE__ */ jsx(
+      Container,
+      {
+        noMargin,
+        noMarginLeft,
+        noMarginRight,
+        fullWidth,
+        style: containerStyle,
+        children: /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            ...props,
+            position,
+            title,
+            html,
+            theme: "light",
+            arrow: true,
+            duration: 200,
+            disabled,
+            children: noIcon ? props.children : /* @__PURE__ */ jsx(Icon, { outline })
+          }
+        )
+      }
+    )
+  ] });
+};
+InfoIcon.propTypes = {
+  title: PropTypes.string,
+  html: PropTypes.node,
+  position: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+  noMargin: PropTypes.bool,
+  noMarginLeft: PropTypes.bool,
+  noMarginRight: PropTypes.bool,
+  outline: PropTypes.bool
+};
+export {
+  InfoIcon,
+  Container as InfoIconContainer,
+  Icon as InfoIconWrapper
+};

package/dist/components/InfoIcon/InfoIcon.styles.js

@@ -0,0 +1,64 @@
+import styled from "styled-components";
+import theme from "../../styles/theme.js";
+const Container = styled.div.withConfig({
+  shouldForwardProp: (props) => !["noMargin", "noMarginLeft", "noMarginRight", "fullWidth"].includes(props)
+})`
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 12px;
+  font-size: 0;
+  line-height: 0;
+
+  ${(props) => props.noMargin && `
+    margin: 0;
+  `}
+  ${(props) => props.noMarginLeft && `
+    margin-left: 0;
+  `}
+  ${(props) => props.noMarginRight && `
+    margin-right: 0;
+  `}
+
+  ${(props) => props.fullWidth && `
+    width: 100%;
+    height: 100%;
+  `}
+
+  & > div {
+    position: relative;
+    display: inline-block !important;
+
+    ${(props) => props.fullWidth && `
+      width: 100%;
+      height: 100%;
+      display: flex !important;
+      align-content: center;
+      flex-wrap: wrap;
+      justify-content: center;
+  `}
+  }
+`;
+const Icon = styled.i.withConfig({
+  shouldForwardProp: (props) => !["outline"].includes(props)
+}).attrs((props) => ({
+  className: props.outline ? "ion ion-md-information-circle-outline" : "ion ion-md-information-circle"
+}))`
+  position: relative;
+  left: -0.4px;
+
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 16px;
+  line-height: 16px;
+  vertical-align: middle;
+  color: ${() => theme.cGrey2};
+  transition: color 0.2s;
+
+  &:hover {
+    color: ${() => theme.cPrimary};
+  }
+`;
+export {
+  Container,
+  Icon
+};

package/dist/components/Input/DatePickerInput.js

@@ -0,0 +1,139 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { isValid, format, parse } from "date-fns";
+import { DayPicker } from "react-day-picker";
+import { Wrapper, Label } from "./Input.styles.js";
+import { DatePickerOverlay, InputWrapper, DateInput, ClearButton } from "./DatePickerInput.styles.js";
+import { useComponentVisible } from "../../utils/customHooks.js";
+const DATE_FORMAT = "MMM dd, yyyy";
+const now = /* @__PURE__ */ new Date();
+const DatePickerInput = (props) => {
+  const {
+    onChange,
+    name,
+    value = void 0,
+    id,
+    label = "",
+    placeholder = "",
+    error = false,
+    touched = false,
+    dashboard = false,
+    dateFormat = DATE_FORMAT,
+    ...dayPickerProps
+  } = props;
+  const [labelUp, setLabelUp] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [month, setMonth] = useState(now);
+  const [selectedDate, setSelectedDate] = useState(void 0);
+  const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
+  useEffect(() => {
+    if (value) {
+      const dateValue = value instanceof Date ? value : new Date(value);
+      if (isValid(dateValue)) {
+        setSelectedDate(dateValue);
+        setMonth(dateValue);
+        setInputValue(format(dateValue, dateFormat));
+      }
+    } else {
+      setSelectedDate(void 0);
+      setInputValue("");
+    }
+  }, [value, dateFormat]);
+  useEffect(() => {
+    setLabelUp(!!inputValue || isComponentVisible);
+  }, [inputValue, isComponentVisible]);
+  const handleInputChange = (e) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    const parsedDate = parse(newValue, dateFormat, now);
+    if (isValid(parsedDate)) {
+      setSelectedDate(parsedDate);
+      setMonth(parsedDate);
+      onChange?.(parsedDate, { name, value: parsedDate });
+    } else {
+      setSelectedDate(void 0);
+    }
+  };
+  const handleDaySelect = (date) => {
+    if (date) {
+      setSelectedDate(date);
+      setMonth(date);
+      setInputValue(format(date, dateFormat));
+      onChange?.(date, { name, value: date });
+    } else {
+      setSelectedDate(void 0);
+      setInputValue("");
+      onChange?.(void 0, { name, value: void 0 });
+    }
+    setIsComponentVisible(false);
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    setSelectedDate(void 0);
+    setInputValue("");
+    onChange?.(void 0, { name, value: void 0 });
+    setIsComponentVisible(false);
+  };
+  const handleInputClick = () => {
+    setIsComponentVisible(true);
+  };
+  const handleInputFocus = () => {
+    setLabelUp(true);
+  };
+  const handleInputBlur = () => {
+    if (!inputValue) {
+      setLabelUp(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Wrapper, { ref, children: [
+    label && /* @__PURE__ */ jsx(Label, { isUp: labelUp, error: error && touched, htmlFor: id, active: isComponentVisible, children: label }),
+    /* @__PURE__ */ jsxs(DatePickerOverlay, { children: [
+      /* @__PURE__ */ jsxs(InputWrapper, { children: [
+        /* @__PURE__ */ jsx(
+          DateInput,
+          {
+            id,
+            name,
+            type: "text",
+            value: inputValue,
+            placeholder,
+            onChange: handleInputChange,
+            onClick: handleInputClick,
+            onFocus: handleInputFocus,
+            onBlur: handleInputBlur,
+            dashboard,
+            autoComplete: "off"
+          }
+        ),
+        selectedDate && /* @__PURE__ */ jsx(ClearButton, { type: "button", onClick: handleClear, dashboard, title: "Clear date", children: "✕" })
+      ] }),
+      isComponentVisible && /* @__PURE__ */ jsx(
+        DayPicker,
+        {
+          mode: "single",
+          month,
+          onMonthChange: setMonth,
+          selected: selectedDate,
+          onSelect: handleDaySelect,
+          ...dayPickerProps
+        }
+      )
+    ] })
+  ] });
+};
+DatePickerInput.propTypes = {
+  id: PropTypes.string,
+  name: PropTypes.string,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  error: PropTypes.bool,
+  touched: PropTypes.bool,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
+  onChange: PropTypes.func,
+  dashboard: PropTypes.bool,
+  dateFormat: PropTypes.string
+};
+export {
+  DatePickerInput
+};

package/dist/components/Input/DatePickerInput.styles.js

@@ -0,0 +1,165 @@
+import styled, { css } from "styled-components";
+import theme from "../../styles/theme.js";
+import { colors } from "../../styles/colors.js";
+const InputWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+`;
+const ClearButton = styled.button.withConfig({
+  shouldForwardProp: (props) => !["dashboard"].includes(props)
+})`
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px 8px;
+  font-size: 16px;
+  color: ${colors.lightGrey};
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    color: ${colors.black};
+  }
+
+  ${(props) => props.dashboard && css`
+      right: 0;
+      padding: 2px 4px;
+      font-size: 14px;
+    `}
+`;
+const DateInput = styled.input.withConfig({
+  shouldForwardProp: (props) => !["dashboard"].includes(props)
+})`
+  font-family: 'Open sans';
+  display: block;
+  width: 100%;
+  height: 40px;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 18px;
+  padding: 13px 0;
+  padding-bottom: 7px;
+  border-radius: 0;
+  box-shadow: none;
+  outline: 0;
+  border: 0;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid ${theme.cGrey};
+  color: ${theme.cBlack};
+  background-color: transparent;
+  transition: border-color 0.2s;
+
+  &:focus,
+  &:hover {
+    box-shadow: none;
+    border-top-color: transparent;
+    border-bottom-color: ${theme.cPrimary};
+  }
+
+  &::placeholder {
+    color: transparent;
+    opacity: 0;
+  }
+
+  ${(props) => props.dashboard && css`
+      border: 0;
+      padding: 0;
+      height: 22px;
+      font-family: 'Open Sans';
+      font-weight: 300;
+      font-size: 14px;
+      line-height: 22px;
+      letter-spacing: 0.53px;
+      text-transform: normal;
+      color: ${theme.cBlack};
+
+      &::placeholder {
+        color: ${theme.cGrey2};
+        opacity: 1;
+      }
+    `}
+`;
+const DatePickerOverlay = styled.div`
+  position: relative;
+
+  .rdp {
+    position: absolute;
+    z-index: 20;
+    background-color: white;
+    margin: 0;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    padding: 12px;
+    border-radius: 4px;
+    min-width: fit-content;
+
+    /* v9 CSS Variables */
+    --rdp-accent-color: ${colors.blue};
+    --rdp-accent-background-color: ${colors.blue};
+    --rdp-day-height: 32px;
+    --rdp-day-width: 32px;
+    --rdp-selected-font: 600 13px 'Open Sans', sans-serif;
+    --rdp-weekday-font: 600 11px 'Open Sans', sans-serif;
+    --rdp-font-family: 'Open Sans', sans-serif;
+
+    /* Remove outline on selected */
+    --rdp-selected-border: none;
+    --rdp-outside-opacity: 0.4;
+  }
+
+  /* Day cells */
+  .rdp-day {
+    font-size: 13px;
+    font-weight: 400;
+  }
+
+  /* Selected day - filled blue circle */
+  .rdp-selected .rdp-day_button,
+  .rdp-day_button[aria-selected='true'] {
+    background-color: ${colors.blue} !important;
+    color: white !important;
+    border: none !important;
+    outline: none !important;
+  }
+
+  /* Today's date */
+  .rdp-today:not(.rdp-selected) .rdp-day_button {
+    font-weight: 700;
+    color: ${colors.blue};
+  }
+
+  /* Weekday headers - uppercase */
+  .rdp-weekday {
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: ${colors.black};
+  }
+
+  /* Month caption */
+  .rdp-month_caption {
+    font-weight: 600;
+  }
+
+  /* Navigation buttons */
+  .rdp-chevron {
+    fill: ${colors.grey2};
+
+    &:hover {
+      fill: ${colors.black};
+      background: transparent;
+    }
+  }
+`;
+export {
+  ClearButton,
+  DateInput,
+  DatePickerOverlay,
+  InputWrapper
+};