@orangesk/orange-design-system 2.0.0-alpha.2 → 2.0.0-alpha.3

package/src/components/Forms/DatePicker/DatePicker.mdx

@@ -0,0 +1,149 @@
+import { ComponentDocs, CodeBlock } from '@lighting-beetle/lighter-styleguide';
+import { Preview } from '../../../styleguide';
+import { objectToString } from '../../../utils/helpers';
+import Alert from '../../Alert';
+import Link from '../../Link';
+
+import Field from '../Field';
+import DatePicker from './';
+import { defaultConfig as defaultConfigDatePicker } from './DatePicker.static';
+
+# DatePicker
+
+<Alert
+  title="You might not need a date picker"
+  description={
+    <>
+      Entering known dates, such as birthday, ID expiration date and other date
+      that a user already knows or can look up wihtout using a calendar should
+      be done using a{' '}
+      <Link href="/components/forms/fieldset#known-date-with-description">
+        date input
+      </Link>
+    </>
+  }
+/>
+
+## Datepicker Field
+
+1. [**Label**](/components/forms/captions/label) (mandatory)
+2. [**Tooltip**](/components/forms/captions/tooltip) (optional)
+3. [**Hint**](/components/forms/captions/hint) (optional)
+4. **DatePicker** control group
+
+- Input field (for user interaction)
+- Hidden input (for storing and sending a YYYY-MM-DD value)
+- Calendar texts
+- Calendar widget toggle button
+- Calendar widget
+  - Year select
+  - Month select
+  - Pagination
+  - Calendar
+
+5. [**Messages**](/components/forms/captions/message) (optional)
+
+<Preview>
+  <Field
+    tooltip="Example tooltip"
+    label="Example datepicker"
+    hint="Hint message"
+    control={{
+      type: 'datepicker',
+      name: 'datepicker-name',
+      id: 'datepicker-id',
+    }}
+    messages={[
+      {
+        text: 'Error message',
+        type: 'error',
+      },
+    ]}
+  />
+</Preview>
+
+## Datepicker Component
+
+<Preview>
+  <DatePicker name="datepicker-name" id="datepicker-id" />
+</Preview>
+
+## Disable dates
+
+You can disable dates using `disabledDayFn` function in DayPicker config object. But in some cases it can be more effective to use
+`data-enabled-days` and pass string of dates with format YYYY-MM-DD separated by commas. In this case all dates except the ones
+you passed will be disabled. `data-enabled-days` will override `disabledDayFn` if both are set.
+
+<Preview>
+  <DatePicker
+    name="datepicker-name"
+    id="datepicker-id"
+    enabledDays={[
+      new Date().toISOString().slice(0, 10),
+      new Date(new Date().getTime() + 2 * 24 * 3600000)
+        .toISOString()
+        .slice(0, 10),
+      new Date(new Date().getTime() + 5 * 24 * 3600000)
+        .toISOString()
+        .slice(0, 10),
+    ]}
+    dayPickrConfig={{
+      firstDayOfWeek: 0,
+    }}
+  />
+</Preview>
+
+## User input and output data
+
+Datepicker supports manual input and selecting a date from a calendar. Selecting/entering a date populates the hidden field with a YYYY-MM-DD value.
+
+Manual input parses the input string, and if it succeeds, it selects the corresponding date. The parser can be customized, but does not handle errors - error handling must be done by your app. The default parser enables slovak locale (D. M. YYYY).
+
+## Config
+
+DatePicker is backed with [daypickr](https://www.npmjs.com/package/daypickr) package.
+This package contains it's own default configuration that is partially overriden by configuration in this project (see [Default config](/components/forms/datepicker#default-config) bellow).
+To see all configuration options visit previously mentioned [daypickr](https://www.npmjs.com/package/daypickr) package.
+
+### Default config
+
+<CodeBlock language="js">{objectToString(defaultConfigDatePicker)}</CodeBlock>
+
+## Initialization
+
+### Automatic initialization
+
+The datepicker in rendered inside an empty div, which specifies the Input field id and Hidden input name.
+
+<CodeBlock language="js">
+  {`<div
+  data-datepicker
+  class="datepicker control-group"
+  data-datepicker-id="input-id"
+  data-datepicker-name="hidden-input-name"
+></div>`}
+</CodeBlock>
+
+### Custom initialization
+
+In case you need custom configuration (e.g. disabling ceratain dates or chainging the range), remove the `data-datepicker` atrribute and initialize the module manually.
+
+Ideally, you should do this after everything else was succesfuly initialized, e.g. on `ODSLoaded` event.
+
+<CodeBlock language="js">
+  {`window.addEventListener('ODSLoaded', () => {
+    // DatePicker initialization
+    const myDatePicker = new window.ODS.modules.DatePicker(
+    document.getElementById('my-datepicker'), 
+    customConfigObject)
+})`}
+</CodeBlock>
+
+### Methods
+
+- **init()** - handles initialization
+- **destroy()** - destroys the instance
+
+## Props
+
+<ComponentDocs title="<DatePicker />" component={DatePicker} />

package/src/components/Forms/DatePicker/DatePicker.static.ts

@@ -0,0 +1,211 @@
+import dayPickr from "daypickr/esm";
+import { dateToYYYYMMDD } from "../../../utils";
+
+export interface DayPickrWeekday {
+  name: string;
+  shortname: string;
+}
+
+export interface DayPickrL10n {
+  prevMonth: string;
+  nextMonth: string;
+  month: string;
+  year: string;
+  weekdays: DayPickrWeekday[];
+  months: string[];
+  openButton: string;
+  closeButton: string;
+}
+
+export interface DayPickrClasses {
+  wrapper?: string;
+  header?: string;
+  select?: string;
+  selectDisplay?: string;
+  monthSelect?: string;
+  yearSelect?: string;
+  button?: string;
+  paginationButton?: string;
+  nextMonthButton?: string;
+  prevMonthButton?: string;
+  yearMonthWrapper?: string;
+  pagination?: string;
+  table?: string;
+  tableRow?: string;
+  tableCell?: string;
+  tableHeaderRow?: string;
+  tableHeaderCell?: string;
+  dayButton?: string;
+  isToday?: string;
+  isSelected?: string;
+  srOnly?: string;
+  input?: string;
+  closeButton?: string;
+  toggleButton?: string;
+}
+
+export interface DayPickrIcon {
+  type: string;
+  xmlns?: string;
+  viewBox?: string;
+  className?: string;
+  children?: Array<{
+    type: string;
+    d?: string;
+    "fill-rule"?: string;
+  }>;
+}
+
+export interface DayPickrConfig {
+  locale?: string;
+  classes?: DayPickrClasses;
+  firstDayOfWeek?: number;
+  l10n?: Partial<DayPickrL10n>;
+  parseDate?: (date: string) => Date | false;
+  calendarIcon?: DayPickrIcon;
+  disabledDayFn?: (date: Date) => boolean;
+}
+
+export const defaultConfig: DayPickrConfig = {
+  locale: "sk",
+  classes: {
+    wrapper: "daypickr",
+    header: "daypickr__header",
+    select: "daypickr__select",
+    selectDisplay: "daypickr__select-display",
+    monthSelect: "daypickr__select--month",
+    yearSelect: "daypickr__select--year",
+    button: "daypickr__button",
+    paginationButton: "daypickr__button--pagination ",
+    nextMonthButton:
+      "daypickr__button--pagination-next btn btn--ghost btn--square btn--small",
+    prevMonthButton:
+      "daypickr__button--pagination-prev btn btn--ghost btn--square btn--small",
+    yearMonthWrapper: "daypickr__year-month-wrapper",
+    pagination: "daypickr__pagination",
+    table: "daypickr__calendar",
+    tableRow: "daypickr__calendar-row",
+    tableCell: "daypickr__calendar-cell",
+    tableHeaderRow: "daypickr__calendar-header-row",
+    tableHeaderCell: "daypickr__calendar-header-cell",
+    dayButton: "daypickr__day",
+    isToday: "isToday",
+    isSelected: "isSelected",
+    srOnly: "sr-only",
+    input: "form-group__item text-input",
+    closeButton: "daypickr__button--close btn mb-none",
+    toggleButton: "form-group__item btn btn--square",
+  },
+  firstDayOfWeek: 1,
+  l10n: {
+    prevMonth: "predchádzajúci mesiac",
+    nextMonth: "nasledujúci mesiac",
+    month: "Mesiac",
+    year: "Rok",
+    weekdays: [
+      { name: "Nedeľa", shortname: "Ne" },
+      { name: "Pondelok", shortname: "Po" },
+      { name: "Utorok", shortname: "Ut" },
+      { name: "Streda", shortname: "St" },
+      { name: "Štvrtok", shortname: "Št" },
+      { name: "Piatok", shortname: "Pi" },
+      { name: "Sobota", shortname: "So" },
+    ],
+    months: [
+      "Január",
+      "Február",
+      "Marec",
+      "Apríl",
+      "Máj",
+      "Jún",
+      "Júl",
+      "August",
+      "September",
+      "Október",
+      "November",
+      "December",
+    ],
+    openButton: "Vyberte dátum",
+    closeButton: "Zatvoriť",
+  },
+  parseDate: (date: string): Date | false => {
+    const matches = date.match(/(\d{1,2})\. ?(\d{1,2})\. ?(\d{4})/);
+    if (matches) {
+      return new Date(
+        Number(matches[3]),
+        Number(matches[2]) - 1,
+        Number(matches[1]),
+      );
+    }
+    return false;
+  },
+  calendarIcon: {
+    type: "svg",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1000 1000",
+    className: "icon icon--medium",
+    children: [
+      {
+        type: "path",
+        d: "M800 175H700v-37.5a37.5 37.5 0 0 0-75 0V175H350v-37.5a37.5 37.5 0 0 0-75 0V175H100v625a75 75 0 0 0 75 75h700V250a75 75 0 0 0-75-75zM300 825H187.4a37.5 37.5 0 0 1-37.5-37.6V700H300v125zm0-150H150V550h150v125zm0-150H150V400h150v125zm-50-262.5a62.4 62.4 0 0 1 25-50v50a37.5 37.5 0 0 0 75 0v-50a62.5 62.5 0 1 1-100 50zm225 562.4H325V700h150v125zm0-149.9H325V550h150v125zm0-150H325V400h150v125zm175 300H500V700h150v125zm0-150H500V550h150v125zm0-150H500V400h150v125zm-50-262.5a62.4 62.4 0 0 1 25-50v50a37.5 37.5 0 0 0 75 0v-50a62.5 62.5 0 1 1-100 50zM825 675H675V550h150v125zm0-150H675V400h112.5a37.5 37.5 0 0 1 37.5 37.4V525z",
+        "fill-rule": "evenodd",
+      },
+    ],
+  },
+};
+
+export default class DatePickerStatic {
+  element: HTMLElement;
+  config: DayPickrConfig;
+  instance: any;
+
+  constructor(element: HTMLElement, config: DayPickrConfig) {
+    this.element = element;
+    this.config = { ...defaultConfig, ...config };
+    this.init();
+    (this.element as any).ODS_DatePicker = this;
+    return this;
+  }
+
+  init() {
+    const elementConfig = this.element.getAttribute("data-datepicker-config");
+    const enabledDays = this.element.getAttribute("data-enabled-days");
+
+    let parsedConfig: Partial<DayPickrConfig> = {};
+    if (elementConfig) {
+      try {
+        parsedConfig = JSON.parse(elementConfig);
+      } catch {
+        parsedConfig = {};
+      }
+    }
+
+    // dates from enabledDays override disabledDayFn passed in config
+    this.config = {
+      ...this.config,
+      ...parsedConfig,
+      ...(enabledDays && {
+        disabledDayFn: (date: Date) => {
+          return !enabledDays.split(",").includes(dateToYYYYMMDD(date));
+        },
+      }),
+    };
+
+    const id = this.element.getAttribute("data-datepicker-id") || undefined;
+    const name = this.element.getAttribute("data-datepicker-name") || id;
+
+    this.instance = dayPickr(this.element, {
+      id,
+      name,
+      ...this.config,
+    });
+  }
+
+  destroy() {
+    if (this.instance) {
+      this.instance.destroy();
+    }
+    this.instance = null;
+    (this.element as any).ODS_DatePicker = null;
+  }
+}

package/src/components/Forms/DatePicker/DatePicker.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import React from "react";
+
+import DatePickerStatic from "./DatePicker.static";
+
+// Type definitions for daypickr config
+interface DayPickrWeekday {
+  name: string;
+  shortname: string;
+}
+
+interface DayPickrL10n {
+  prevMonth: string;
+  nextMonth: string;
+  month: string;
+  year: string;
+  weekdays: DayPickrWeekday[];
+  months: string[];
+  openButton: string;
+  closeButton: string;
+}
+
+interface DayPickrClasses {
+  wrapper?: string;
+  header?: string;
+  select?: string;
+  selectDisplay?: string;
+  monthSelect?: string;
+  yearSelect?: string;
+  button?: string;
+  paginationButton?: string;
+  nextMonthButton?: string;
+  prevMonthButton?: string;
+  yearMonthWrapper?: string;
+  pagination?: string;
+  table?: string;
+  tableRow?: string;
+  tableCell?: string;
+  tableHeaderRow?: string;
+  tableHeaderCell?: string;
+  dayButton?: string;
+  isToday?: string;
+  isSelected?: string;
+  srOnly?: string;
+  input?: string;
+  closeButton?: string;
+  toggleButton?: string;
+}
+
+interface DayPickrIcon {
+  type: string;
+  xmlns?: string;
+  viewBox?: string;
+  className?: string;
+  children?: Array<{
+    type: string;
+    d?: string;
+    "fill-rule"?: string;
+  }>;
+}
+
+// Main daypickr config interface - only including the most commonly used options
+// Full config reference: https://github.com/lightingbeetle/daypickr/
+export interface DayPickrConfig {
+  locale?: string;
+  classes?: DayPickrClasses;
+  firstDayOfWeek?: number;
+  l10n?: Partial<DayPickrL10n>;
+  parseDate?: (date: string) => Date | false;
+  calendarIcon?: DayPickrIcon;
+  disabledDayFn?: (date: Date) => boolean;
+  // Add other commonly used options as needed
+}
+
+export interface DatePickerProps {
+  /**
+   * daypickr config object
+   * @see https://github.com/lightingbeetle/daypickr/
+   * Only the most common options are typed, but you can pass any valid daypickr config
+   */
+  dayPickrConfig?: DayPickrConfig;
+
+  /**
+   * All days except ones in array will be disabled
+   * Use YYYY-MM-DD format
+   */
+  enabledDays?: string[];
+
+  /**
+   * ID of both visible ({id}-input) and hidden ({id}-value) input elements
+   */
+  id?: string;
+
+  /**
+   * Name of the hidden input element that contains date value
+   */
+  name?: string;
+}
+
+const DatePicker: React.FC<DatePickerProps> = ({
+  dayPickrConfig,
+  enabledDays,
+  id,
+  name,
+}) => {
+  const elementRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (elementRef.current) {
+      new DatePickerStatic(elementRef.current, { ...dayPickrConfig });
+    }
+  }, [dayPickrConfig]);
+
+  return (
+    <div
+      ref={elementRef}
+      data-datepicker
+      data-enabled-days={(enabledDays && enabledDays.toString()) || undefined}
+      className="datepicker control-group"
+      data-datepicker-id={id}
+      data-datepicker-name={name}
+    />
+  );
+};
+
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker };

package/src/components/Forms/DatePicker/index.ts

@@ -0,0 +1,3 @@
+import "./styles/style.scss";
+
+export { DatePicker } from "./DatePicker";

package/src/components/Forms/DatePicker/styles/style.scss

@@ -0,0 +1,183 @@
+@use "../../../../styles/tokens/color";
+@use "../../../../styles/tokens/space";
+@use "../../../../styles/tools/visibility";
+@use "../../../../styles/tools/convert";
+@use "../../../Button/styles/mixins" as Button;
+
+@layer components {
+  .datepicker {
+    max-width: convert.to-rem(300px);
+
+    .text-input {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  .daypickr {
+    position: absolute;
+    top: calc(100% - 2px);
+    right: 0;
+    z-index: 3;
+  }
+
+  .daypickr__toggle {
+    margin-right: 0;
+  }
+
+  .daypickr__content {
+    width: convert.to-rem(300px);
+    padding: space.get("medium");
+    border: 2px solid var(--color-border-contrast);
+    background: var(--color-surface-primary);
+    border-radius: convert.to-rem(5px);
+  }
+
+  .daypickr__calendar {
+    width: 100%;
+  }
+
+  .daypickr__calendar-cell {
+    border: 2px solid transparent;
+  }
+
+  .daypickr__header {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: space.get("small");
+  }
+
+  .daypickr__select {
+    padding: 2px convert.to-rem(16px) 2px 0;
+    border: 2px solid transparent;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 10L12 18L4 10L6 8L12 14L18 8L20 10Z'/%3E%3C/svg%3E%0A");
+    background-position: right center;
+    background-repeat: no-repeat;
+    font-weight: bold;
+    appearance: none;
+    -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
+    color: var(--color-text-default) !important;
+
+    &--year {
+      margin-right: space.get("small");
+    }
+
+    &:hover {
+      border-color: var(--color-surface-moderate);
+    }
+  }
+  .bg-black .daypickr__select,
+  .is-dark .daypickr__select {
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 10L12 18L4 10L6 8L12 14L18 8L20 10Z'/%3E%3C/svg%3E%0A");
+  }
+
+  .daypickr__pagination {
+    margin-right: convert.to-rem(-5px);
+  }
+
+  [class*="daypickr__button--pagination"] {
+    position: relative;
+    text-indent: -9999px;
+    display: inline-block !important;
+    margin: 0 !important;
+  }
+
+  .daypickr__button--pagination {
+    &-next::before,
+    &-prev::before {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: -50%;
+      left: -50%;
+      transform: translate(50%, 50%);
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+
+    &-prev::before {
+      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 20L6 12L14 4L16 6L10 12L16 18L14 20Z'/%3E%3C/svg%3E%0A");
+    }
+
+    &-next::before {
+      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 20L18 12L10 4L8 6L14 12L8 18L10 20Z'/%3E%3C/svg%3E%0A");
+    }
+  }
+
+  .bg-black .daypickr__button--pagination,
+  .is-dark .daypickr__button--pagination {
+    &-prev::before {
+      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='white' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 20L6 12L14 4L16 6L10 12L16 18L14 20Z'/%3E%3C/svg%3E%0A");
+    }
+
+    &-next::before {
+      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='white' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 20L18 12L10 4L8 6L14 12L8 18L10 20Z'/%3E%3C/svg%3E%0A");
+    }
+  }
+
+  .daypickr__calendar-header-cell {
+    padding: space.get("small") 0;
+    text-align: center;
+  }
+
+  .daypickr__day {
+    position: relative;
+    height: 32px;
+    width: 100%;
+    font-weight: bold;
+    border: 2px solid transparent;
+
+    &:hover {
+      border-color: var(--color-surface-moderate);
+    }
+
+    &.isToday {
+      color: var(--color-border-accent);
+
+      &::after {
+        content: "";
+        position: absolute;
+        width: 4px;
+        height: 4px;
+        background: var(--color-surface-tertiary);
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+
+    &.isSelected {
+      background-color: var(--color-surface-tertiary);
+      color: var(--color-text-default);
+
+      &:hover {
+        border-color: var(--color-border-accent);
+      }
+
+      &::after {
+        background: var(--color-surface-contrast);
+      }
+    }
+
+    &[aria-disabled="true"] {
+      color: color.$gray-600;
+    }
+  }
+
+  .daypickr__button--close {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+
+    &:focus {
+      position: relative;
+      opacity: 1;
+      pointer-events: initial;
+    }
+  }
+}