@tui-cruises/mein-schiff-web-react-component-library 2.0.0-rc.1

package/src/components/core/CheckboxField/CheckboxField.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import {
+  ForwardRefRenderFunction,
+  ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import { forwardRef } from 'react';
+import { Root as RadixRoot } from '@radix-ui/react-checkbox';
+import { Checkbox, CheckboxProps } from '../Checkbox';
+import { CheckboxFieldLabel } from './CheckboxFieldLabel';
+import { CheckboxFieldNote } from './CheckboxFieldNote';
+import { CheckboxFieldError } from './CheckboxFieldError';
+import * as RadixForm from '@radix-ui/react-form';
+import { InputFieldError } from '../InputField/InputFieldError';
+import { twMerge } from '@tui-cruises/mein-schiff-web-tailwind-config';
+
+type Props = Omit<CheckboxProps, 'required'> & {
+  label?: ReactNode;
+  note?: ReactNode;
+  error?: string;
+
+  asInline?: boolean;
+
+  /**
+   * Use `label` if you don't want to add the `required` attribute to the input element itself.
+   * This will avoid highlighting the input as invalid, when there is no value.
+   * This is usually a user friendlier way than highlighting the field invalid on initial page load.
+   */
+  required?: boolean | 'label';
+
+  asRadix?: boolean;
+  radixFormMessages?: RadixForm.FormMessageProps[];
+};
+
+const CheckboxFieldRenderFunction: ForwardRefRenderFunction<
+  HTMLInputElement | null,
+  Props
+> = (
+  {
+    label,
+    note,
+    error,
+    required,
+    asRadix,
+    radixFormMessages,
+    asInline,
+    ...attrs
+  },
+  forwardedRef,
+) => {
+  let inputRef = useRef<HTMLInputElement>(null);
+
+  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+    forwardedRef,
+    () => inputRef.current,
+  );
+
+  useEffect(() => {
+    if (asRadix) {
+      return;
+    }
+
+    inputRef.current?.setCustomValidity(error ?? '');
+  }, [asRadix, error]);
+
+  if (!asRadix) {
+    return (
+      <div className="space-y-1">
+        <label
+          className={twMerge(
+            'flex cursor-pointer gap-2',
+            asInline && 'inline-flex',
+          )}
+        >
+          <Checkbox
+            {...attrs}
+            required={typeof required === 'boolean' ? required : undefined}
+            ref={inputRef}
+          />
+
+          {(label || note) && (
+            <div>
+              {label && (
+                <CheckboxFieldLabel asChild>
+                  <div>
+                    {label}
+                    {required ? '*' : ''}
+                  </div>
+                </CheckboxFieldLabel>
+              )}
+              {note && (
+                <CheckboxFieldNote>
+                  {note}
+                  {!label && required ? '*' : ''}
+                </CheckboxFieldNote>
+              )}
+            </div>
+          )}
+        </label>
+
+        {error && <CheckboxFieldError>{error}</CheckboxFieldError>}
+      </div>
+    );
+  }
+
+  return (
+    <RadixForm.Field name={attrs.name ?? ''} asChild>
+      <div className="space-y-1">
+        <label className="flex cursor-pointer gap-2">
+          <RadixForm.Control asChild>
+            <RadixRoot asChild>
+              <Checkbox
+                {...attrs}
+                required={typeof required === 'boolean' ? required : undefined}
+              />
+            </RadixRoot>
+          </RadixForm.Control>
+
+          {(label || note) && (
+            <div>
+              {label && (
+                <RadixForm.Label asChild>
+                  <CheckboxFieldLabel asChild>
+                    <div>
+                      {label}
+                      {required ? '*' : ''}
+                    </div>
+                  </CheckboxFieldLabel>
+                </RadixForm.Label>
+              )}
+              {note && (
+                <CheckboxFieldNote>
+                  {note}
+                  {!label && required ? '*' : ''}
+                </CheckboxFieldNote>
+              )}
+            </div>
+          )}
+        </label>
+
+        {(radixFormMessages ?? []).map((props, idx) => (
+          <RadixForm.Message key={idx} {...props} asChild>
+            <InputFieldError>{props.children}</InputFieldError>
+          </RadixForm.Message>
+        ))}
+      </div>
+    </RadixForm.Field>
+  );
+};
+
+export const CheckboxField = forwardRef<HTMLInputElement | null, Props>(
+  CheckboxFieldRenderFunction,
+);

package/src/components/core/CheckboxField/CheckboxFieldError.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, ForwardRefRenderFunction, HTMLAttributes } from 'react';
+
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+
+const CheckboxFieldErrorRenderFunction: ForwardRefRenderFunction<
+  HTMLDivElement,
+  Props
+> = (attrs, ref) => {
+  return <div {...attrs} ref={ref} className="text-sm text-error-100" />;
+};
+
+export const CheckboxFieldError = forwardRef<HTMLDivElement, Props>(
+  CheckboxFieldErrorRenderFunction,
+);

package/src/components/core/CheckboxField/CheckboxFieldLabel.tsx

@@ -0,0 +1,25 @@
+import { forwardRef, ForwardRefRenderFunction, HTMLAttributes } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+
+type Props = Omit<HTMLAttributes<HTMLLabelElement>, 'className'> & {
+  asChild?: boolean;
+};
+
+const CheckboxFieldLabelRenderFunction: ForwardRefRenderFunction<
+  HTMLLabelElement,
+  Props
+> = ({ asChild, ...attrs }, ref) => {
+  let Element = asChild ? Slot : 'label';
+
+  return (
+    <Element
+      {...attrs}
+      ref={ref}
+      className="label-md text-marine-high-emphasis"
+    />
+  );
+};
+
+export const CheckboxFieldLabel = forwardRef<HTMLLabelElement, Props>(
+  CheckboxFieldLabelRenderFunction,
+);

package/src/components/core/CheckboxField/CheckboxFieldNote.tsx

@@ -0,0 +1,16 @@
+import { forwardRef, ForwardRefRenderFunction, HTMLAttributes } from 'react';
+
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+
+const CheckboxFieldNoteRenderFunction: ForwardRefRenderFunction<
+  HTMLDivElement,
+  Props
+> = (attrs, ref) => {
+  return (
+    <div {...attrs} ref={ref} className="text-sm text-marine-medium-emphasis" />
+  );
+};
+
+export const CheckboxFieldNote = forwardRef<HTMLDivElement, Props>(
+  CheckboxFieldNoteRenderFunction,
+);

package/src/components/core/CheckboxField/index.ts

@@ -0,0 +1 @@
+export * from './CheckboxField';

package/src/components/core/Countdown/Countdown.tsx

@@ -0,0 +1,67 @@
+'use client';
+import {
+  DateSegment,
+  getDateSegmentDifference,
+} from '../../../helpers/dateFormat';
+import { Fragment, useCallback, useEffect, useState } from 'react';
+import { Divider } from '../../core/Divider';
+import { twMerge } from '@tui-cruises/mein-schiff-web-tailwind-config';
+
+export type CountdownProps = {
+  destinationDate: Date;
+  i18n: Record<DateSegment, string>;
+  enabledDateSegments?: DateSegment[];
+  className?: string;
+};
+
+export function Countdown({
+  destinationDate,
+  enabledDateSegments = ['day', 'hour', 'minute', 'second'],
+  i18n,
+  className,
+}: CountdownProps) {
+  const calculateSegments = useCallback(() => {
+    return enabledDateSegments?.map(segment => [
+      i18n[segment],
+      String(Math.max(0, getDateSegmentDifference(destinationDate, segment))),
+    ]) as [string, string][];
+  }, [i18n, enabledDateSegments, destinationDate]);
+
+  const [calculatedSegmentTouples, setCalculatedSegmentTouples] =
+    useState<[string, string][]>(calculateSegments());
+
+  useEffect(() => {
+    const recalc = () => {
+      setCalculatedSegmentTouples(calculateSegments());
+    };
+    const interval = setInterval(recalc, 1_000);
+    recalc();
+    return () => clearInterval(interval);
+  }, [destinationDate]);
+
+  return (
+    <div className={twMerge('flex w-full flex-row justify-center', className)}>
+      <div className="flex flex-row gap-2 p-3">
+        {calculatedSegmentTouples?.map(([label, value], index: number) => {
+          return (
+            <Fragment key={label}>
+              <div className="flex w-16 flex-col items-center justify-center text-marine-high-emphasis">
+                <span className="meta-info-2xl" suppressHydrationWarning>
+                  {value}
+                </span>
+                <span className="text-sm">{label}</span>
+              </div>
+              {index < calculatedSegmentTouples?.length - 1 && (
+                <Divider
+                  align="vertical"
+                  color="secondary-20"
+                  className="m-auto h-8"
+                />
+              )}
+            </Fragment>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/core/Countdown/index.ts

@@ -0,0 +1 @@
+export * from './Countdown';

package/src/components/core/DataTable/DataTable.tsx

@@ -0,0 +1,98 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { twJoin } from 'tailwind-merge';
+
+type DataTableRow = ReactNode;
+
+export type DataTableProps = HTMLAttributes<HTMLTableElement> & {
+  headers: DataTableRow[];
+  dataRows: DataTableRow[][];
+};
+
+export const DataTable = ({ headers, dataRows, ...attrs }: DataTableProps) => {
+  const baseClass = 'text-left text-sm text-marine-high-emphasis';
+  const cellClass = 'max-w-[250px] gap-2 overflow-x-auto whitespace-normal p-4';
+  const headerClass = 'md:text-base font-semibold gap-2 whitespace-normal p-4';
+  const stickyHeaderClass =
+    'md:text-base font-semibold sticky left-0 z-10 gap-2 whitespace-normal bg-surface-primary-60 p-4';
+  const tableClass = twJoin('w-full table-auto', attrs?.className, baseClass);
+
+  /**
+   *  Assuming that the number of elements contained in a row could be inconsistent,
+   *  the longest row is used as the basis for iteration on small screens.
+   */
+  const longestRow: ReactNode[] = [headers, ...dataRows].reduce(
+    (longest, row) => (row.length > longest.length ? row : longest),
+    [],
+  );
+
+  const renderTableForSmallScreens = () => (
+    <div className="overflow-x-auto rounded-md bg-surface-white [clip-path:border-box] md:hidden">
+      <table {...attrs} className={tableClass}>
+        <tbody>
+          {longestRow.map((_, rowIndex) => (
+            <tr key={rowIndex}>
+              {[headers, ...dataRows].map((column, colIndex) =>
+                colIndex === 0 ? (
+                  <th
+                    key={`${rowIndex}-${colIndex}`}
+                    className={stickyHeaderClass}
+                  >
+                    {column[rowIndex]}
+                  </th>
+                ) : (
+                  <td
+                    key={`${rowIndex}-${colIndex}`}
+                    className={`${cellClass} ${colIndex === [headers, ...dataRows].length - 1 ? '' : 'border-r border-stroke-secondary-20'}`}
+                  >
+                    {column[rowIndex]}
+                  </td>
+                ),
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+
+  const renderTableForLargeScreens = () => (
+    <div className="hidden overflow-x-auto rounded-md bg-surface-white [clip-path:border-box] md:block">
+      <table {...attrs} className={tableClass}>
+        <thead className="bg-surface-primary-40">
+          <tr>
+            {headers.map((header, i) => (
+              <th key={i} className={headerClass}>
+                {header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {dataRows.map((row, rowIndex) => (
+            <tr
+              key={rowIndex}
+              className={
+                rowIndex === dataRows.length - 1
+                  ? ''
+                  : 'border-b border-stroke-secondary-20'
+              }
+            >
+              {row.map((cell, cellIndex) => (
+                <td key={cellIndex} className={cellClass}>
+                  {cell}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+
+  return (
+    <>
+      {renderTableForSmallScreens()}
+      {renderTableForLargeScreens()}
+    </>
+  );
+};

package/src/components/core/DataTable/index.ts

@@ -0,0 +1 @@
+export * from './DataTable';