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

package/src/components/core/RangeSlider/RangeSlider.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import ReactSlider from 'react-slider';
+import { twJoin } from 'tailwind-merge';
+
+export type RangeSliderProps = {
+  value: number[];
+  min: number;
+  max: number;
+  minStepsBetweenThumbs?: number;
+  step?: number;
+  onValueCommit?: (value: number[]) => void;
+  onValueChange?: (value: number[]) => void;
+};
+
+const RangeSlider: React.FC<RangeSliderProps> = ({
+  value,
+  min,
+  max,
+  minStepsBetweenThumbs = 1,
+  step = 1,
+  onValueCommit,
+  onValueChange,
+}) => {
+  return (
+    <ReactSlider
+      className="md:h6 h-8"
+      thumbClassName="block size-8 md:size-6 rounded-full bg-surface-white border-4 border-stroke-primary-100 hover:border-6 active:border-6 focus:outline-none focus-visible:shadow-focus-state disabled:pointer-events-none disabled:opacity-50 cursor-pointer"
+      trackClassName="bg-surface-secondary-20"
+      renderTrack={(props, state) => {
+        const key = props.key;
+        delete props.key;
+        return (
+          <div
+            key={key}
+            {...props}
+            className={twJoin(
+              'top-[calc(1rem_-2px)] h-1 rounded-full md:top-[10px]',
+              state.index === 1
+                ? 'bg-surface-primary-100'
+                : 'bg-surface-secondary-20',
+            )}
+          />
+        );
+      }}
+      value={value}
+      min={min}
+      max={max}
+      onChange={value => onValueChange && onValueChange(value)}
+      onAfterChange={value => onValueCommit && onValueCommit(value)}
+      step={step}
+      ariaLabel={['Lower thumb', 'Upper thumb']}
+      ariaValuetext={state => `Thumb value ${state.valueNow}`}
+      minDistance={minStepsBetweenThumbs}
+    />
+  );
+};
+
+export { RangeSlider };

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

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

package/src/components/core/Section/Section.tsx

@@ -0,0 +1,62 @@
+import type { ElementType, PropsWithChildren, ReactNode } from 'react';
+import { twJoin } from 'tailwind-merge';
+import { PictogramName } from '../../core/Pictogram';
+
+export type SectionProps = PropsWithChildren<{
+  fallback?: boolean;
+  headline?: string;
+  headlineAs?: ElementType;
+  subline?: ReactNode;
+  variant?: 'primary' | 'secondary' | 'transparent';
+  pictogramName?: PictogramName;
+  disableSpacing?: boolean;
+  className?: string;
+  id?: string;
+}>;
+
+/**
+ * Section component
+ *
+ * @param {SectionProps} props - The props for configuring the section component.
+ * @returns {JSX.Element} The rendered Section component.
+ */
+export const Section = ({
+  fallback,
+  children,
+  headline,
+  headlineAs,
+  subline,
+  pictogramName,
+  id,
+  className,
+  variant = 'secondary',
+  disableSpacing = false,
+  ...rest
+}: SectionProps) => {
+  const sectionClass = twJoin(
+    'w-full max-w-none',
+    !disableSpacing && 'p-5 md:p-10',
+  );
+
+  const contentClass = twJoin(
+    'flex w-full flex-col gap-8',
+    variant === 'primary' && 'bg-section-gray',
+    variant === 'secondary' && 'bg-section-white',
+    variant === 'transparent' && 'bg-transparent',
+    className,
+  );
+
+  return (
+    <section {...(id ? { id } : {})} className={sectionClass} {...rest}>
+      <div className={contentClass}>
+        {children && (
+          <div className="flex flex-col flex-nowrap space-y-4 lg:space-y-6">
+            {children}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+Section.displayName = 'Section';

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

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

package/src/components/core/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
+import { twJoin } from 'tailwind-merge';
+
+/**
+ * Props for the SegmentedControl component.
+ */
+export type SegmentedControlProps = PropsWithChildren<{
+  value: string;
+  onValueChange: (value: string) => void;
+  size?: 'sm' | 'md';
+}> &
+  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>;
+
+/**
+ * Props for the SegmentedControlItem component.
+ */
+export type SegmentedControlItemProps = PropsWithChildren<{
+  label?: string;
+  value: string;
+}> &
+  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>;
+
+/**
+ * A segmented control component that allows users to select a value from a set of options.
+ */
+const SegmentedControl = (props: SegmentedControlProps) => {
+  const { size = 'md', ...rest } = props;
+  return (
+    <RadioGroupPrimitive.Root
+      className={twJoin(
+        'flex font-semibold text-marine-high-emphasis',
+        size === 'sm' ? 'text-sm' : 'text-base',
+      )}
+      {...rest}
+    />
+  );
+};
+
+/**
+ * A single item in the SegmentedControl.
+ */
+const SegmentedControlItem = (props: SegmentedControlItemProps) => {
+  const { label, ...rest } = props;
+  return (
+    <RadioGroupPrimitive.Item
+      className={twJoin(
+        'flex-1 border-y border-stroke-secondary-20 bg-transparent px-3 py-2',
+        'first:rounded-l-md first:border-l last-of-type:rounded-r-md last-of-type:border-r',
+        'hover:bg-surface-primary-120 focus-visible:bg-surface-primary-120 active:bg-surface-primary-120',
+        'data-[state=checked]:border-surface-primary-60 data-[state=checked]:bg-surface-primary-60',
+        'focus:z-10 focus:outline-none focus-visible:shadow-focus-state',
+      )}
+      {...rest}
+    >
+      {label}
+    </RadioGroupPrimitive.Item>
+  );
+};
+
+SegmentedControl.displayName = 'SegmentedControl';
+
+export { SegmentedControl, SegmentedControlItem };

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

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

package/src/components/core/Select/Select.tsx

@@ -0,0 +1,171 @@
+'use client';
+
+import {
+  forwardRef,
+  ForwardRefRenderFunction,
+  OptionHTMLAttributes,
+  SelectHTMLAttributes,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+import { getChildrenAsArrayOfElements } from '../../../helpers/children';
+import { RadixSelect, RadixSelectItem } from '../RadixSelect';
+
+type Option = OptionHTMLAttributes<HTMLOptionElement>;
+
+type Value = Option['value'];
+
+type BaseProps = {
+  invalid?: string;
+  placeholder?: string;
+  options?: Option[];
+};
+
+type CompatibleProps = Pick<
+  SelectHTMLAttributes<HTMLSelectElement>,
+  | 'children'
+  | 'value'
+  | 'defaultValue'
+  | 'dir'
+  | 'name'
+  | 'autoComplete'
+  | 'disabled'
+  | 'required'
+  | 'onChange'
+  | 'className'
+>;
+
+export type SelectProps = BaseProps &
+  Omit<CompatibleProps, keyof BaseProps | 'type'>;
+
+const SelectRenderFunction: ForwardRefRenderFunction<
+  HTMLSelectElement | null,
+  SelectProps
+> = (
+  { invalid, children, options = [], value, defaultValue, onChange, ...rest },
+  forwardedRef,
+) => {
+  let uniqueId = useId();
+  let ref = useRef<HTMLSelectElement | null>(null);
+  let radixRef = useRef<HTMLButtonElement | null>(null);
+
+  useImperativeHandle<HTMLSelectElement | null, HTMLSelectElement | null>(
+    forwardedRef,
+    () => ref.current,
+  );
+
+  let combinedOptions = useMemo(() => {
+    let optionsFromChildren = getChildrenAsArrayOfElements(children).map(
+      (node): Option => node.props,
+    );
+
+    return [...options, ...optionsFromChildren];
+  }, [children, options]);
+
+  let handleRadixChange = (radixValue: string) => {
+    let selectEl = ref.current;
+
+    if (!selectEl) {
+      return;
+    }
+
+    let value = getValueFromIndex(combinedOptions, radixValue);
+    selectEl.selectedIndex = parseInt(radixValue ?? '0', 10);
+
+    if (value) {
+      selectEl.value = value.toString();
+    }
+
+    selectEl.dispatchEvent(
+      new Event('change', {
+        bubbles: true,
+      }),
+    );
+  };
+
+  let providedValue = useMemo(() => {
+    let idx = getIndexFromValue(combinedOptions, value);
+    return typeof idx === 'undefined' ? undefined : idx.toString();
+  }, [combinedOptions, value]);
+
+  let providedDefaultValue = useMemo(() => {
+    let idx = getIndexFromValue(combinedOptions, defaultValue);
+    return typeof idx === 'undefined' ? undefined : idx.toString();
+  }, [combinedOptions, defaultValue]);
+
+  useEffect(() => {
+    if (!radixRef.current) {
+      return;
+    }
+
+    if (invalid) {
+      radixRef.current.dataset.invalid = 'true';
+    } else {
+      delete radixRef.current.dataset.invalid;
+    }
+  }, [radixRef, invalid]);
+
+  return (
+    <div className="relative">
+      <select
+        name={rest.name}
+        onChange={onChange}
+        ref={ref}
+        className="absolute hidden"
+        defaultValue={defaultValue}
+        value={value}
+      >
+        {combinedOptions.map((option, idx) => (
+          <option key={`${option.value}${idx}`} {...option} />
+        ))}
+      </select>
+      <RadixSelect
+        {...rest}
+        name={`${uniqueId}.${rest.name}`}
+        defaultValue={providedDefaultValue}
+        value={providedValue}
+        dir={rest.dir === 'rtl' ? 'rtl' : 'ltr'}
+        onValueChange={handleRadixChange}
+        ref={radixRef}
+      >
+        {combinedOptions.map((option, idx) => (
+          <RadixSelectItem
+            key={`${option.value}${idx}`}
+            value={(
+              getIndexFromValue(combinedOptions, option.value) ?? ''
+            ).toString()}
+          >
+            {option.children}
+          </RadixSelectItem>
+        ))}
+      </RadixSelect>
+    </div>
+  );
+};
+
+const getIndexFromValue = (
+  options: Option[],
+  value: Value,
+): number | undefined => {
+  if (typeof value === 'undefined') {
+    return undefined;
+  }
+
+  return options.findIndex(option => option.value === value);
+};
+
+const getValueFromIndex = (options: Option[], idx: string | number): Value => {
+  idx = typeof idx === 'string' ? parseInt(idx, 10) : idx;
+
+  return options[idx]?.value;
+};
+
+/**
+ * A native `<select>` proxy which provides access to the RadixSelect component.
+ */
+export const Select = forwardRef<HTMLSelectElement | null, SelectProps>(
+  SelectRenderFunction,
+);

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

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

package/src/components/core/SelectField/SelectField.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import {
+  ForwardRefRenderFunction,
+  ReactNode,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import { forwardRef } from 'react';
+import { Select, SelectProps } from '../Select';
+import { twMerge } from '@tui-cruises/mein-schiff-web-tailwind-config';
+import { InputFieldLabel } from '../InputField/InputFieldLabel';
+import { InputFieldNote } from '../InputField/InputFieldNote';
+import { InputFieldError } from '../InputField/InputFieldError';
+
+type Props = Omit<SelectProps, 'required'> & {
+  label?: ReactNode;
+  note?: ReactNode;
+  error?: string;
+
+  /**
+   * Use `label` if you don't want to add the `required` attribute to the select element itself.
+   * This will avoid highlighting the select 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';
+};
+
+const SelectFieldRenderFunction: ForwardRefRenderFunction<
+  HTMLSelectElement | null,
+  Props
+> = ({ label, note, error, required, className, ...attrs }, forwardedRef) => {
+  let selectRef = useRef<HTMLSelectElement>(null);
+
+  useImperativeHandle<HTMLSelectElement | null, HTMLSelectElement | null>(
+    forwardedRef,
+    () => selectRef.current,
+  );
+
+  return (
+    <div className={twMerge('block space-y-1', className)}>
+      <label className="block space-y-1">
+        {label && (
+          <InputFieldLabel asChild>
+            <div>
+              {label}
+              {required ? '*' : ''}
+            </div>
+          </InputFieldLabel>
+        )}
+        <Select
+          {...attrs}
+          required={typeof required === 'boolean' ? required : undefined}
+          invalid={error}
+          ref={selectRef}
+        />
+        {!error && note && <InputFieldNote>{note}</InputFieldNote>}
+      </label>
+
+      {error && <InputFieldError>{error}</InputFieldError>}
+    </div>
+  );
+};
+
+export const SelectField = forwardRef<HTMLSelectElement | null, Props>(
+  SelectFieldRenderFunction,
+);

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

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

package/src/components/core/Skeleton/Skeleton.tsx

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from 'react';
+import { twJoin, twMerge } from 'tailwind-merge';
+
+export type SkeletonProps = HTMLAttributes<HTMLDivElement>;
+
+/**
+ * This is a skeleton component used for rendering the loading of content. It can be adjusted to fit any size & shape.
+ */
+
+const Skeleton = ({ className, ...rest }: SkeletonProps) => {
+  return (
+    <div
+      className={twMerge(
+        twJoin('animate-pulse rounded-md bg-surface-secondary-20', className),
+      )}
+      {...rest}
+    ></div>
+  );
+};
+
+Skeleton.displayName = 'Skeleton';
+
+export { Skeleton };

package/src/components/core/Skeleton/SkeletonTextLines.tsx

@@ -0,0 +1,37 @@
+import type { FC, HTMLAttributes } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Skeleton } from './Skeleton';
+
+type Props = HTMLAttributes<HTMLDivElement> & {
+  number: number;
+  wrapperClassName?: string;
+};
+
+export const SkeletonTextLines: FC<Props> = ({
+  number,
+  wrapperClassName,
+  ...rest
+}) => {
+  const widths = ['w-full', 'w-[2/3]', 'w-[3/4]', 'w-4/5'];
+
+  return (
+    <div className={twMerge('space-y-3 py-1.5', wrapperClassName)}>
+      {Array(number)
+        .fill(null)
+        .map((_, idx) => {
+          const lineWidth =
+            idx === 0
+              ? 'w-full'
+              : widths[Math.floor(Math.random() * widths.length)];
+
+          return (
+            <Skeleton
+              key={idx}
+              {...rest}
+              className={twMerge('h-3', lineWidth, rest.className)}
+            />
+          );
+        })}
+    </div>
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from './Skeleton';
+export * from './SkeletonTextLines';

package/src/components/core/Stepper/Stepper.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { EventClickElement } from '@tuic/lib/tracking/tealium';
+import { IconButton } from '../IconButton';
+import { I18NInterface } from '../../../helpers/i18n';
+import { useMemo } from 'react';
+
+type I18N = I18NInterface<
+  'stepperIncrease' | 'stepperDecrease' | 'stepperInput'
+>;
+
+/**
+ * Props for the Stepper component.
+ */
+export type StepperProps = {
+  /** Current value of the stepper */
+  value?: number;
+  /** Minimum allowed value */
+  minValue?: number;
+  /** Maximum allowed value */
+  maxValue?: number;
+  /** Step increment/decrement value */
+  step?: number;
+  /** Callback fired when the value changes */
+  onChangeValue?: (value: number) => void;
+  /** Whether the stepper is disabled */
+  disabled?: boolean;
+  /** Color theme for the button styling */
+  on?: 'white' | 'gray' | 'ocean';
+  /** Tracking name for analytics */
+  trackingName?: string;
+
+  i18n?: I18N;
+};
+
+/**
+ * A numeric stepper component with increment and decrement buttons.
+ */
+const Stepper = (props: StepperProps) => {
+  const {
+    value = 0,
+    minValue = 0,
+    maxValue = 99,
+    step = 1,
+    onChangeValue,
+    disabled,
+    on = 'white',
+    trackingName = '',
+    i18n,
+  } = props;
+
+  /**
+   * Increase the value by the step, if within maxValue.
+   */
+  const incrementValue = () => {
+    if (value + step <= maxValue) {
+      onChangeValue && onChangeValue(value + step);
+    }
+  };
+
+  /**
+   * Decrease the value by the step, if within minValue.
+   */
+  const decrementValue = () => {
+    if (value - step >= minValue) {
+      onChangeValue && onChangeValue(value - step);
+    }
+  };
+
+  const ariaLabel = useMemo(() => {
+    return (i18n?.stepperInput ?? `Anzahl von {value}`).replace(
+      '{value}',
+      `${value}`,
+    );
+  }, [i18n?.stepperInput, value]);
+
+  return (
+    <div
+      className="inline-flex items-center justify-center gap-4 md:gap-2"
+      aria-label={ariaLabel}
+    >
+      <IconButton
+        onClick={decrementValue}
+        disabled={disabled || value <= minValue}
+        iconName="minus"
+        size="sm"
+        variant="secondary"
+        on={on}
+        data-track-click-element={EventClickElement.Button}
+        data-track-click-label={`${trackingName}stepper-decrease`}
+        aria-label={i18n?.stepperDecrease ?? 'Anzahl verringern'}
+      />
+      <div
+        className="w-6 text-center text-base text-marine-high-emphasis"
+        aria-hidden={true}
+      >
+        {value}
+      </div>
+      <IconButton
+        onClick={incrementValue}
+        disabled={disabled || value >= maxValue}
+        iconName="plus"
+        size="sm"
+        variant="secondary"
+        on={on}
+        data-track-click-element={EventClickElement.Button}
+        data-track-click-label={`${trackingName}-stepper-increase`}
+        aria-label={i18n?.stepperIncrease ?? 'Anzahl erhöhen'}
+      />
+    </div>
+  );
+};
+
+Stepper.displayName = 'Stepper';
+
+export { Stepper };

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

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

package/src/components/core/SwitchToggle/SwitchToggle.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { ComponentPropsWithoutRef } from 'react';
+import { twJoin } from 'tailwind-merge';
+import { DataAttributes } from '../../../helpers/types';
+
+export type SwitchToggleProps = DataAttributes &
+  ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>;
+
+/**
+ * `SwitchToggle` is a UI toggle component built on top of Radix UI's `Switch`.
+ * It supports all native props from `@radix-ui/react-switch` and adds styling
+ * consistent with the design system.
+ *
+ * @see [Radix UI Switch Documentation](https://www.radix-ui.com/primitives/docs/components/switch)
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SwitchToggle defaultChecked onChange={(e) => console.log(e.target.checked)} />
+ * ```
+ *
+ * @param {SwitchToggleProps} props - Props extending Radix Switch root props and custom data attributes.
+ * @param {string} [props.className] - Additional Tailwind classes to customize the root element.
+ * @returns {JSX.Element} A styled switch toggle component.
+ */
+const SwitchToggle = ({ className, ...props }: SwitchToggleProps) => (
+  <SwitchPrimitive.Root
+    className={twJoin(
+      'peer inline-flex h-[30px] w-[56px] shrink-0 cursor-pointer items-center rounded-full border-2 transition-colors md:h-6 md:w-[40px]',
+      'focus:outline-none focus-visible:shadow-focus-state',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      'data-[state=unchecked]:border-stroke-secondary-20 data-[state=unchecked]:bg-surface-white',
+      'data-[state=checked]:border-surface-primary-100 data-[state=checked]:bg-surface-primary-100',
+      className,
+    )}
+    {...props}
+  >
+    <SwitchPrimitive.Thumb className="pointer-events-none block h-[22px] w-[22px] rounded-full bg-surface-secondary-100 ring-0 transition-transform data-[state=checked]:translate-x-[26px] data-[state=unchecked]:translate-x-[2px] md:h-[18px] md:w-[18px] md:data-[state=checked]:translate-x-4" />
+  </SwitchPrimitive.Root>
+);
+
+SwitchToggle.displayName = 'SwitchToggle';
+
+export { SwitchToggle };

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

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