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

package/src/components/core/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,288 @@
+'use client';
+
+import type {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  ComponentProps,
+  FC,
+  PropsWithChildren,
+  ReactNode,
+} from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { Button } from '../../core/Button';
+import { ButtonGroup } from '../../core/ButtonGroup';
+import { EventClickArea, EventClickElement } from '@tuic/lib/tracking/tealium';
+import { twJoin } from 'tailwind-merge';
+
+type ActionBase = {
+  /**
+   * The title of the action -- this is displayed as a Button's label.
+   */
+  title: string;
+
+  /**
+   * Indicates whether the action is of destructive kind. Destructive actions render a emphasized button.
+   */
+  primary?: boolean;
+};
+
+type ButtonAction = ActionBase & {
+  as?: 'button';
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+type AnchorAction = ActionBase & {
+  as: 'a';
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
+
+type ButtonOrAnchorAction = ButtonAction | AnchorAction;
+
+type ActionCollection =
+  | []
+  | [ButtonOrAnchorAction]
+  | [ButtonAction, ButtonOrAnchorAction]
+  | [AnchorAction, ButtonOrAnchorAction];
+
+type Props = PropsWithChildren<{
+  /**
+   * A boolean that determines whether the modal is open or closed. Default is `false` (closed).
+   */
+  open?: boolean;
+
+  /**
+   * Callback fired when the modal's open state changes.
+   */
+  onOpenChange?: ComponentProps<
+    typeof AlertDialogPrimitive.Root
+  >['onOpenChange'];
+
+  /**
+   * The title displayed at the top of the modal.
+   */
+  title?: ReactNode;
+
+  /**
+   * Defines the actions that will be displayed at the bottom of the modal. They can be either a button or an anchor action and you can provide up to two actions.
+   */
+  actions?: ActionCollection;
+
+  /**
+   * Specifies the container in which the modal will render. If not provided, the modal will render as a child of its parent in the DOM tree.
+   */
+  container?: ComponentProps<typeof AlertDialogPrimitive.Portal>['container'];
+
+  /**
+   * Make the title and Action-Items centered. If not provided, the title will be left-aligned and the Action-Items will be right aligned.
+   */
+  centerItems?: boolean;
+
+  /**
+   * Styles to be applied to the content div
+   */
+  containerClassName?: string;
+}>;
+
+/**
+ * Renders a single action, either a button or anchor. If the action is destructive, it wraps the button within `AlertDialog.Action`, otherwise within `AlertDialog.Cancel`.
+ */
+const renderAction = (idx: number, action: ButtonAction | AnchorAction) => {
+  const { title, primary, ...attrs } = action;
+
+  // const buttonInner = attrs.as === 'a' ? <a {...attrs}>{title}</a> :
+
+  const button = (
+    <Button
+      data-track-click-label={title}
+      data-track-click-element={EventClickElement.Button}
+      className="md:min-w-[10rem]"
+      variant={primary ? 'primary' : 'secondary'}
+      asChild={attrs.as === 'a'}
+      {...(attrs.as !== 'a' ? attrs : {})}
+    >
+      {attrs.as === 'a' ? <a {...attrs}>{title}</a> : title}
+    </Button>
+  );
+
+  if (primary) {
+    return (
+      <AlertDialogPrimitive.Action key={idx} asChild>
+        {button}
+      </AlertDialogPrimitive.Action>
+    );
+  }
+
+  return (
+    <AlertDialogPrimitive.Cancel key={idx} asChild>
+      {button}
+    </AlertDialogPrimitive.Cancel>
+  );
+};
+
+/**
+ * Renders the collection of actions. Returns `null` if the collection is empty or not provided.
+ */
+const renderActionCollection = (
+  collection?: ActionCollection,
+  centerActionCollection?: boolean,
+) => {
+  if (!collection || collection.length === 0) {
+    return null;
+  }
+
+  return (
+    <ButtonGroup
+      orientation={centerActionCollection ? 'horizontal-center' : 'horizontal'}
+    >
+      {collection.map((action, idx) => renderAction(idx, action))}
+    </ButtonGroup>
+  );
+};
+
+/**
+ * Renders the main content of the modal, which includes the title and description. Returns `null` if both title and children are not provided.
+ */
+const renderContent = (
+  title: ReactNode,
+  children: ReactNode,
+  centerTitle: boolean,
+) => {
+  if (!title && !children) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-4">
+      {title && (
+        <AlertDialogPrimitive.Title
+          className={twJoin('headline-md', centerTitle && 'text-center')}
+        >
+          {title}
+        </AlertDialogPrimitive.Title>
+      )}
+      {children && (
+        <AlertDialogPrimitive.Description className="text-lg">
+          {children}
+        </AlertDialogPrimitive.Description>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Renders the content either within a specified portal container or as a direct child if no container is provided.
+ */
+const renderOptionalContainer = (
+  container: Props['container'],
+  content: ReactNode,
+) => {
+  if (!container) {
+    return content;
+  }
+
+  return (
+    <AlertDialogPrimitive.Portal container={container}>
+      {content}
+    </AlertDialogPrimitive.Portal>
+  );
+};
+
+/**
+ *
+ * `AlertDialog` is a flexible component for displaying alert modals. It can render as a standalone modal or within a specified portal container and it supports both button and anchor actions. The modal uses [`@radix-ui/react-alert-dialog`](https://www.radix-ui.com/primitives/docs/components/alert-dialog#api-reference) as a foundation, so it provides accessibility and behavior out of the box.
+ *
+ * ## Usage
+ *
+ * To use the `AlertDialog`, simply import it and pass in the desired props. You can control the modal by providing the `open` property in conjunction with an `onOpenChange` handlers.
+ *
+ * ```tsx
+ * import { useState } from 'react';
+ * import { AlertDialog } from '@tui-cruises/mein-schiff-web-react-component-library';
+ *
+ * const [open, setOpen] = useState(false);
+ *
+ * // ...
+ *
+ * <AlertDialog
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   title="Are you sure?"
+ *   actions={[
+ *     { title: "Cancel" },
+ *     { title: "Delete", destructive: true, onClick: handleDelete }
+ *   ]}
+ * >
+ *   Do you really want to delete this item?
+ * </AlertDialog>
+ * ```
+ *
+ * ## Anatomy of an Action
+ *
+ *
+ * In the context of the `AlertDialog`, an action is a crucial element that dictates how users can interact with the modal — be it through buttons or anchor links. Each action you provide must adhere to specific structures: `ButtonAction` or `AnchorAction`, with both sharing a set of common properties and some unique attributes. Here we delve into the anatomy of an action:
+ *
+ * ### Common Properties
+ *
+ * - **`title`** (Required): A string specifying the visible label of the action, representing the action text displayed on the button or link.
+ * - **`destructive`** (Optional): A boolean indicating whether the action is potentially hazardous, affecting the action's styling to caution users.
+ * - **`as`** (Optional for `ButtonAction`, Required for `AnchorAction`): A property to determine the type of action element — `'button'` for button actions and `'a'` for anchor actions.
+ *
+ * ### Unique Properties
+ *
+ * - **ButtonAction**: Incorporate any valid HTML button attributes, facilitating functionalities such as disabling the button (`disabled`) or adding a click handler (`onClick`).
+ * - **AnchorAction**: Leverage any valid HTML anchor attributes to define the hyperlink specifics, such as the URL to navigate to (`href`) or defining the link’s opening location (`target`).
+ *
+ * ### Action Examples
+ *
+ * A button action with a click handler might look like this:
+ *
+ * ```tsx
+ * { title: "Save", as: 'button', onClick: handleSave }
+ * ```
+ *
+ * An anchor action directing to an external page could be structured as:
+ *
+ * ```tsx
+ * { title: "Learn More", as: 'a', href: "#", target: "_blank" }
+ * ```
+ *
+ * Understanding and correctly employing the action's anatomy aids in creating a rich, user-friendly modal experience.
+ */
+export const AlertDialog: FC<Props> = ({
+  open,
+  onOpenChange,
+  children,
+  title,
+  actions,
+  container,
+  centerItems = true,
+  containerClassName,
+}) => {
+  return (
+    <AlertDialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <AlertDialogPrimitive.Portal container={container || undefined}>
+        <AlertDialogPrimitive.Overlay
+          className={twJoin(
+            'fixed inset-0 z-dialog flex flex-col items-center justify-center bg-overlay backdrop-blur-sm',
+            'data-[state=open]:animate-in data-[state=open]:fade-in-0',
+            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
+          )}
+        >
+          <AlertDialogPrimitive.Content
+            data-track-click-area={EventClickArea.Dialog}
+            data-track-dialog={`alert-dialog-${title}`}
+            className={twJoin(
+              'mx-4 flex max-w-[340px] flex-col flex-nowrap rounded-sm bg-surface-white p-8 text-center text-marine-high-emphasis sm:left-1/2 sm:w-[340px] sm:max-w-full md:w-[640px] lg:max-w-screen-sm',
+              'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
+              'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+              containerClassName,
+            )}
+          >
+            <button className="h-0 w-0" name="trap-focus-placeholder" />
+            <div className="space-y-8">
+              {renderContent(title, children, centerItems)}
+              {renderActionCollection(actions, centerItems)}
+            </div>
+          </AlertDialogPrimitive.Content>
+        </AlertDialogPrimitive.Overlay>
+      </AlertDialogPrimitive.Portal>
+    </AlertDialogPrimitive.Root>
+  );
+};

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

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

package/src/components/core/Badge/Badge.tsx

@@ -0,0 +1,70 @@
+import type { ReactNode } from 'react';
+import { twJoin } from 'tailwind-merge';
+
+/**
+ * Props for the Badge component.
+ */
+export type BadgeProps = {
+  /**
+   * The content to be displayed inside the badge.
+   * Can be a single ReactNode or an array of ReactNodes.
+   */
+  children: ReactNode | ReactNode[];
+
+  /**
+   * Additional custom class names to style the badge.
+   */
+  className?: string;
+
+  /**
+   * The visual style of the badge.
+   * - `solid`: Solid background with contrasting text.
+   * - `outline`: White background with outlined border.
+   */
+  variant: 'solid' | 'outline';
+};
+
+/**
+ * Variant styles for the Badge component.
+ */
+const variants = {
+  variant: {
+    solid: 'bg-surface-secondary-100 text-white border-transparent',
+    outline:
+      'bg-surface-white text-marine-high-emphasis border-stroke-primary-100',
+  },
+};
+
+/**
+ * A versatile Badge component for displaying small count indicators or labels.
+ *
+ * @param {BadgeProps} props - The props for the Badge component.
+ * @returns {JSX.Element} The rendered Badge component.
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="solid" className="custom-class">
+ *   99+
+ * </Badge>
+ * ```
+ */
+const Badge = (props: BadgeProps) => {
+  const { className, variant = 'solid', children } = props;
+
+  return (
+    <div
+      className={twJoin(
+        'leading-none inline-flex items-center justify-center rounded-full border-2 text-xs font-semibold',
+        children ? 'min-h-[24px] min-w-[24px]' : 'min-h-[12px] min-w-[12px]',
+        variants.variant[variant],
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+Badge.displayName = 'Badge';
+
+export { Badge };

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

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

package/src/components/core/BirthdateField/BirthdateField.tsx

@@ -0,0 +1,269 @@
+'use client';
+
+import React, {
+  useState,
+  useRef,
+  forwardRef,
+  useEffect,
+  InputHTMLAttributes,
+} from 'react';
+import { twJoin, twMerge } from 'tailwind-merge';
+import { Control as RadixFormControl } from '@radix-ui/react-form';
+
+/**
+ * Defines the properties for the custom input attributes by omitting certain properties from the standard HTML input attributes.
+ */
+type InputAttributes = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'className' | 'onChange' | 'defaultValue'
+>;
+
+/**
+ * Provides details for formatting date inputs like day, month and year.
+ */
+interface DateFormatDetails {
+  maxDecimalPlaces: number;
+  placeholder: string;
+  label: string;
+}
+
+/**
+ * Represents the different date formats based on locale.
+ */
+interface Format {
+  [key: string]: DateFormatDetails | undefined;
+}
+
+/**
+ * Props for the BirthdateField component, with customization options for className, locale handling, value changes, and defaults.
+ */
+export type BirthdateFieldProps = InputAttributes & {
+  className?: string;
+  locale?: string;
+  onChange?: (value: string) => void;
+  defaultValue?: string; // YYYY-MM-JJ
+  readOnly?: Boolean;
+  disabled?: Boolean;
+};
+
+type SetPartFunction = {
+  day: React.Dispatch<React.SetStateAction<string>>;
+  month: React.Dispatch<React.SetStateAction<string>>;
+  year: React.Dispatch<React.SetStateAction<string>>;
+};
+
+type PartKey = keyof SetPartFunction;
+
+/**
+ * Returns the date format details based on the provided locale.
+ * @param {string} locale - The locale code to determine the date format.
+ * @returns {Format} The format details for the given locale.
+ */
+const getFormatBasedOnLocale = (locale: string = 'de-DE'): Format => {
+  switch (locale) {
+    case 'en':
+    case 'en-US':
+    case 'en-GB':
+      return {
+        day: { maxDecimalPlaces: 2, placeholder: 'DD', label: 'Day' },
+        month: { maxDecimalPlaces: 2, placeholder: 'MM', label: 'Month' },
+        year: { maxDecimalPlaces: 4, placeholder: 'YYYY', label: 'Year' },
+      };
+    default:
+      return {
+        day: { maxDecimalPlaces: 2, placeholder: 'DD', label: 'Tag' },
+        month: { maxDecimalPlaces: 2, placeholder: 'MM', label: 'Monat' },
+        year: { maxDecimalPlaces: 4, placeholder: 'JJJJ', label: 'Jahr' },
+      };
+  }
+};
+
+/**
+ * Combines individual date components into a single date string in the format YYYY-MM-DD.
+ * @param {string} day - Day part of the date.
+ * @param {string} month - Month part of the date.
+ * @param {string} year - Year part of the date.
+ * @returns {string} The combined date string.
+ */
+const createCombinedValue = (day: string, month: string, year: string) => {
+  return day && month && year
+    ? `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
+    : '';
+};
+
+/**
+ * Parses an initial date value into its component parts.
+ * @param {string} value - The initial date value in the format YYYY-MM-DD.
+ * @returns {object} An object containing day, month and year as strings.
+ */
+const parseInitialValue = (value: string) => {
+  const parts = value.split('-');
+  return {
+    year: normalizeInitialValueSubPart(parts[0] ?? ''),
+    month: normalizeInitialValueSubPart(parts[1] ?? ''),
+    day: normalizeInitialValueSubPart(parts[2] ?? ''),
+  };
+};
+
+/**
+ * Normalizes a part of the initial value, ensuring it is a valid number.
+ * @param {string} value - The value to normalize.
+ * @returns {string} The normalized value, or an empty string if invalid.
+ */
+const normalizeInitialValueSubPart = (value: string) => {
+  if (value === '') return value;
+  const asNumber = parseInt(value, 10);
+  return asNumber < 1 || Number.isNaN(asNumber) ? '' : String(asNumber);
+};
+
+/**
+ * A component for inputting birthdates with locale-based formatting.
+ *
+ * ### Configuration
+ * - Default locale *static*: `de-DE`
+ * - Input *defaultValue* format: `YYYY-MM-DD`
+ * - Output format: `YYYY-MM-DD`
+ * - Oldest passenger age: `100`
+ */
+const BirthdateField = forwardRef<HTMLInputElement, BirthdateFieldProps>(
+  (
+    {
+      name,
+      className,
+      locale = 'de-DE',
+      onChange,
+      defaultValue,
+      readOnly,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const format = getFormatBasedOnLocale(locale);
+    const defaultValueAsString = defaultValue?.toString() ?? '';
+    const initials = parseInitialValue(defaultValueAsString);
+    const [day, setDay] = useState(initials.day);
+    const [month, setMonth] = useState(initials.month);
+    const [year, setYear] = useState(initials.year);
+    const [combinedValue, setCombinedValue] = useState(
+      createCombinedValue(initials.day, initials.month, initials.year),
+    );
+
+    const prevValue = useRef(defaultValueAsString);
+    const dayRef = useRef<HTMLInputElement>(null);
+    const monthRef = useRef<HTMLInputElement>(null);
+    const yearRef = useRef<HTMLInputElement>(null);
+
+    const inputClassNames = twMerge(
+      'w-full rounded-md border border-stroke-secondary-40 bg-surface-white p-4 text-center text-sm placeholder-secondary-marine-48 outline-none',
+
+      readOnly || disabled
+        ? 'text-secondary-marine-48'
+        : 'text-marine-high-emphasis focus:outline-none focus-visible:shadow-focus-state data-[invalid]:border-stroke-error-100',
+    );
+
+    useEffect(() => {
+      const newCombinedValue = createCombinedValue(day, month, year);
+      setCombinedValue(newCombinedValue);
+      if (newCombinedValue !== prevValue.current && onChange) {
+        prevValue.current = newCombinedValue;
+        onChange(newCombinedValue);
+      }
+    }, [day, month, year, onChange]);
+
+    const handleChange = (
+      part: PartKey,
+      value: string,
+      nextRef?: React.RefObject<HTMLInputElement> | null,
+    ) => {
+      if (readOnly || disabled) return;
+
+      const setPart: SetPartFunction = {
+        day: setDay,
+        month: setMonth,
+        year: setYear,
+      } as const;
+      const formatPart = format[part];
+
+      if (!formatPart) return;
+
+      value = value.slice(0, formatPart.maxDecimalPlaces);
+
+      setPart[part](value);
+
+      if (value.length === formatPart.maxDecimalPlaces && nextRef?.current) {
+        nextRef.current.focus();
+      }
+    };
+
+    // Simple function to generate a "unique" ID by appending a random number
+    const uniqueId = (base: string) =>
+      `${base}-${Math.floor(Math.random() * 1000)}`;
+
+    const inputs = [
+      { part: 'day', ref: dayRef, nextRef: monthRef },
+      { part: 'month', ref: monthRef, nextRef: yearRef },
+      { part: 'year', ref: yearRef, nextRef: undefined },
+    ].map(({ part, ref, nextRef }) => {
+      const formatDetail = format[part];
+      const id = uniqueId(`birthdate-${part}`);
+      if (!formatDetail) return null;
+      return (
+        <div key={part}>
+          <input
+            id={id}
+            {...props}
+            ref={ref}
+            type="number"
+            maxLength={formatDetail.maxDecimalPlaces}
+            placeholder={formatDetail.placeholder}
+            className={inputClassNames}
+            value={part === 'day' ? day : part === 'month' ? month : year}
+            onChange={event =>
+              handleChange(
+                part as keyof SetPartFunction,
+                event.target.value,
+                nextRef,
+              )
+            }
+            min={part === 'year' ? new Date().getFullYear() - 100 : 1} // Oldest passenger age: 100
+            max={
+              part === 'year'
+                ? new Date().getFullYear()
+                : part === 'month'
+                  ? 12
+                  : 31
+            }
+          />
+          <label
+            htmlFor={id}
+            className="mt-1 inline-block cursor-pointer text-sm text-marine-medium-emphasis"
+          >
+            {formatDetail.label}
+          </label>
+        </div>
+      );
+    });
+
+    return (
+      <>
+        <RadixFormControl asChild>
+          <input
+            {...props}
+            ref={ref}
+            type="hidden"
+            name={name}
+            value={combinedValue}
+          />
+        </RadixFormControl>
+        <div className={twJoin('grid grid-cols-3 gap-3', className)}>
+          {inputs}
+        </div>
+      </>
+    );
+  },
+);
+
+BirthdateField.displayName = 'BirthdateField';
+
+export { BirthdateField };

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

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