colibri-ui 0.7.154 → 0.8.1

package/src/components/Calendar/components/Month/Month.tsx

@@ -0,0 +1,172 @@
+import * as React from "react";
+import classNames from "classnames/bind";
+import { leadingZeros } from "../../../libs/numbers/leadingZeros";
+import Typography from "../../../Typography";
+import {
+  getShortWeekDayNameByIndex,
+  getUpperMonthName,
+} from "../../../helpers/date";
+import { getMonthWeeks } from "../../utils/getMonthWeeks";
+import styles from "./index.module.scss";
+import type { CalendarTitleSize } from "../../index.props";
+import type { FunctionComponent, PropsWithChildren } from "react";
+
+const clx = classNames.bind(styles);
+// eslint-disable-next-line @typescript-eslint/ban-types
+export interface FCWithElements<T = {}> extends FunctionComponent<T> {}
+
+type Props = {
+  today: string;
+  startDate: Date;
+  activeDays?: string[];
+  selectedDate?: string;
+  selectedPeriod?: number;
+  onDayClick: (date: string) => void;
+  offsetLeft: number;
+  availableDates?: string[];
+  titleSize?: CalendarTitleSize;
+};
+
+type ComponentProps = {
+  isStartOfSelection?: boolean;
+  isEndOfSelection?: boolean;
+  isSelected?: boolean;
+  isInSelectedRange?: boolean;
+};
+
+const Item = ({
+  isSelected,
+  isInSelectedRange,
+  isStartOfSelection,
+  isEndOfSelection,
+  children,
+}: PropsWithChildren<ComponentProps>) => {
+  const noSelection =
+    isStartOfSelection && isEndOfSelection ? styles["no-selection"] : "";
+  const startClass =
+    isStartOfSelection && !isEndOfSelection ? styles["start-of-selection"] : "";
+  const endClass =
+    isEndOfSelection && !isStartOfSelection ? styles["end-of-selection"] : "";
+  const firstChildClass = isEndOfSelection ? styles["first-child"] : "";
+  const lastChildClass = isStartOfSelection ? styles["last-child"] : "";
+
+  if (isSelected) {
+    return (
+      <li
+        className={clx(
+          styles["selected-range-day"],
+          styles["selected-day"],
+          noSelection,
+          startClass,
+          endClass,
+          firstChildClass,
+          lastChildClass,
+        )}
+      >
+        {children}
+      </li>
+    );
+  } else if (isInSelectedRange) {
+    return <li className={clx(styles["selected-range-day"])}>{children}</li>;
+  }
+
+  return <li className={clx(styles.day)}>{children}</li>;
+};
+
+export const Month: FCWithElements<Props> = (props) => {
+  const year = props.startDate.getFullYear();
+  const month = leadingZeros(props.startDate.getMonth() + 1, 2);
+
+  return (
+    <div
+      data-testid="month"
+      className={clx(styles.root)}
+      style={{ left: props.offsetLeft ? `${props.offsetLeft}px` : undefined }}
+    >
+      <div className={clx(styles["month-name"])}>
+        <Typography tag="span" size={props.titleSize}>
+          {getUpperMonthName(props.startDate)}
+        </Typography>
+      </div>
+      <div className={clx(styles.table)}>
+        <ul className={clx(styles.legend)}>
+          {[...Array(7)].map((_, ...rest) => {
+            const index = rest[0] + 1;
+
+            return (
+              <li className={clx(styles.day)} key={index}>
+                <Typography
+                  style={{
+                    opacity: index > 5 ? 80 : 30,
+                    color:
+                      index > 5
+                        ? "var(--typography-alert)"
+                        : "var(--palette-black)",
+                  }}
+                >
+                  {getShortWeekDayNameByIndex(index)}
+                </Typography>
+              </li>
+            );
+          })}
+        </ul>
+        {getMonthWeeks(props).map((days, ...rest1) => (
+          <ul key={`week-${rest1[0]}`} className={clx(styles.week)}>
+            {days.map((day, ...rest2) => {
+              const key = `day-${rest2[0]}`;
+
+              if (day.isDummy) {
+                return <li className={clx(styles.day)} key={key} />;
+              }
+              const attrs = {
+                isStartOfSelection: day.isStartOfSelection,
+                isEndOfSelection: day.isEndOfSelection,
+                isSelected: day.isSelected,
+                isInSelectedRange: day.isInSelectedRange,
+              };
+
+              const dayInnerActive = day.isActive
+                ? styles["day-inner-active"]
+                : "";
+
+              return (
+                <Item {...attrs} key={key}>
+                  <button
+                    className={clx(styles["day-inner"], dayInnerActive)}
+                    style={{
+                      background: day.isSelected
+                        ? "var(--palette-bg-2)"
+                        : "transparent",
+                    }}
+                    role="button"
+                    type="button"
+                    onClick={
+                      day.isActive
+                        ? () =>
+                            props.onDayClick(
+                              [year, month, leadingZeros(day.day, 2)].join("-"),
+                            )
+                        : undefined
+                    }
+                  >
+                    <Typography
+                      size="s"
+                      style={{
+                        opacity: day.isActive ? 80 : 30,
+                        color: day.isActive
+                          ? "rgba(0, 0, 0, 0.8)"
+                          : "rgba(0, 0, 0, 0.3)",
+                      }}
+                    >
+                      {day.day}
+                    </Typography>
+                  </button>
+                </Item>
+              );
+            })}
+          </ul>
+        ))}
+      </div>
+    </div>
+  );
+};

package/{esm/Calendar/components/Month/index.module.css → src/components/Calendar/components/Month/index.module.scss}

@@ -53,51 +53,60 @@
   text-align: center;
   width: 32px;
   z-index: 0;
-}
-.selected-range-day:hover {
-  z-index: 1;
-}
-.selected-range-day::before {
-  background: #f5f5f5;
-  content: "";
-  display: block;
-  height: 100%;
-  left: -50%;
-  position: absolute;
-  top: 0;
-  width: 200%;
-}
-.selected-range-day:first-child::before {
-  left: 0;
-  width: 150%;
-}
-.selected-range-day:last-child::before {
-  left: auto;
-  right: 0;
-  width: 150%;
+
+  &:hover {
+    z-index: 1;
+  }
+
+  &::before {
+    background: #f5f5f5;
+    content: "";
+    display: block;
+    height: 100%;
+    left: -50%;
+    position: absolute;
+    top: 0;
+    width: 200%;
+  }
+
+  &:first-child::before {
+    left: 0;
+    width: 150%;
+  }
+
+  &:last-child::before {
+    left: auto;
+    right: 0;
+    width: 150%;
+  }
 }
 
 .selected-day {
   z-index: 2;
-}
-.selected-day::before {
-  display: "block";
-  left: auto;
-  right: auto;
-  width: 90%;
-}
-.selected-day:first-child::before {
-  display: "block";
-  left: 50%;
-  width: 90%;
-}
-.selected-day:last-child::before {
-  display: "block";
-  right: 50%;
-  width: 90%;
-}
-.selected-day + .selected-day, .selected-day + .selected-day:hover {
-  z-index: 4 !important;
+
+  &::before {
+    display: "block";
+    left: auto;
+    right: auto;
+    width: 90%;
+  }
+
+  &:first-child::before {
+    display: "block";
+    left: 50%;
+    width: 90%;
+  }
+
+  &:last-child::before {
+    display: "block";
+    right: 50%;
+    width: 90%;
+  }
+
+  & + &,
+  & + &:hover {
+    z-index: 4 !important;
+  }
 }
 
 .no-selection::before {
@@ -114,12 +123,16 @@
   right: 50%;
 }
 
-.first-child:first-child::before {
-  display: none;
+.first-child {
+  &:first-child::before {
+    display: none;
+  }
 }
 
-.last-child:last-child::before {
-  display: none;
+.last-child {
+  &:last-child::before {
+    display: none;
+  }
 }
 
 .day-inner {
@@ -137,7 +150,8 @@
 
 .day-inner-active {
   cursor: pointer;
+
+  &:hover {
+    background: var(--palette-bg-2);
+  }
 }
-.day-inner-active:hover {
-  background: var(--palette-bg-2);
-}

package/{esm/Calendar/components/Presets/index.module.css → src/components/Calendar/components/Presets/index.module.scss}

@@ -14,15 +14,18 @@
 .item {
   flex-grow: 1;
   padding: 0 4px;
+
+  & > button {
+    display: block;
+    padding: 0 8px;
+    width: 100%;
+  }
+
+  &:first-child {
+    padding-left: 16px;
+  }
+
+  &:last-child {
+    padding-right: 16px;
+  }
 }
-.item > button {
-  display: block;
-  padding: 0 8px;
-  width: 100%;
-}
-.item:first-child {
-  padding-left: 16px;
-}
-.item:last-child {
-  padding-right: 16px;
-}

package/src/components/Calendar/components/Presets/index.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import classNames from "classnames/bind";
+import Button from "../../../Button";
+import styles from "./index.module.scss";
+
+const clx = classNames.bind(styles);
+
+export enum PRESETS {
+  TODAY = "today",
+  TOMORROW = "tomorrow",
+  WEEKENDS = "weekends",
+  CURWEEK = "currWeek",
+  NEXTWEEK = "nextWeek",
+}
+
+export type Preset = {
+  name: string;
+  date: string;
+  period: number;
+};
+
+type Props = {
+  presets: Preset[];
+  onPresetSelect(preset: Preset): void;
+};
+
+export const Presets: React.FunctionComponent<Props> = ({
+  presets,
+  onPresetSelect,
+}) => (
+  <div data-testid="presets">
+    <div className={clx(styles["native-scroll-inner"])}>
+      <div className={clx(styles.inner)}>
+        {presets.map((preset, ...rest) => (
+          <div className={clx(styles.item)} key={`preset=${rest[0]}`}>
+            <Button
+              variant="outline"
+              onClick={() => onPresetSelect(preset)}
+              size="m"
+            >
+              {preset.name}
+            </Button>
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+);

package/{Calendar/index.module.css → src/components/Calendar/index.module.scss}

@@ -34,59 +34,73 @@
   position: absolute;
   top: 0;
   width: 80px;
-}
-.month-control[disabled] {
-  cursor: default;
-}
-.month-control[disabled] .month-control-prev-arrow {
-  opacity: 0.3;
-}
-.month-control[disabled] .month-control-next-arrow {
-  opacity: 0.3;
+
+  &[disabled] {
+    cursor: default;
+  }
+
+  &[disabled] .month-control-prev-arrow {
+    opacity: 0.3;
+  }
+
+  &[disabled] .month-control-next-arrow {
+    opacity: 0.3;
+  }
 }
 
 .month-control-prev {
   border-left-width: 16px;
   left: 0;
   text-align: left;
-}
-.month-control-prev::before {
-  background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
-  border: 0 solid #fff;
-  border-left-width: 26px;
-  content: "";
-  display: block;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 40px;
+
+  &::before {
+    background: linear-gradient(
+      to right,
+      rgb(255 255 255 / 100%) 0%,
+      rgb(255 255 255 / 0%) 100%
+    );
+    border: 0 solid #fff;
+    border-left-width: 26px;
+    content: "";
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 40px;
+  }
 }
 
 .month-control-next {
   border-right-width: 16px;
   right: 0;
   text-align: right;
-}
-.month-control-next::before {
-  background: linear-gradient(to left, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
-  border: 0 solid #fff;
-  border-right-width: 26px;
-  content: "";
-  display: block;
-  height: 100%;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 40px;
+
+  &::before {
+    background: linear-gradient(
+      to left,
+      rgb(255 255 255 / 100%) 0%,
+      rgb(255 255 255 / 0%) 100%
+    );
+    border: 0 solid #fff;
+    border-right-width: 26px;
+    content: "";
+    display: block;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 40px;
+  }
 }
 
 .months {
   min-height: 300px;
   position: relative;
   transition: transform 0.3s ease;
+
+  & > div {
+    position: absolute;
+    top: 0;
+  }
 }
-.months > div {
-  position: absolute;
-  top: 0;
-}

package/src/components/Calendar/index.props.ts

@@ -0,0 +1,34 @@
+import type { Preset } from "./components/Presets";
+
+export type CalendarPayload = {
+  date: string;
+  period: number;
+};
+
+export type CalendarTitleSize =
+  | "xs"
+  | "s"
+  | "m"
+  | "l"
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "h5"
+  | "h6";
+
+export type CalendarProps = {
+  today: string;
+  selectedDate?: string;
+  selectedPeriod?: number;
+  canSelectRange?: boolean;
+  activeDates?: string[];
+  datePresets?: Preset[];
+  availableDates?: string[];
+  onChange?: (payload: CalendarPayload) => void;
+  onCancel?: () => void;
+  withContinueButton?: boolean;
+  className?: string;
+  minWidth?: number;
+  titleSize?: CalendarTitleSize;
+};

package/src/components/Calendar/index.stories.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import Calendar from ".";
+import type { Meta } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { toISODate } from "../helpers/date";
+import { getPresets } from "./utils/getPresets";
+import { PRESETS } from "./components/Presets";
+
+const meta: Meta<typeof Calendar> = {
+  title: "UI/Calendar",
+  parameters: {
+    layout: "centered",
+  },
+  args: { onChange: fn()},
+  component: Calendar,
+} satisfies Meta<typeof Calendar>;
+
+export default meta;
+
+const Template = (args) => {
+  return (
+    <Calendar
+      {...args}
+      today={toISODate(new Date())}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {};
+
+export const withContinueButton = Template.bind({});
+
+withContinueButton.args = {
+  withContinueButton: true
+};
+
+export const withPresets = Template.bind({});
+
+withPresets.args = {
+  datePresets: getPresets([PRESETS.TODAY, PRESETS.TOMORROW]),
+  withContinueButton: true,
+  canSelectRange: true
+};