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

package/src/components/core/Pictogram/Pictogram.tsx

@@ -0,0 +1,67 @@
+import type { FC } from 'react';
+import { dynamicComponents as dynamicComponentsPictograms } from '../../../../icons/pictograms';
+import { twMerge } from 'tailwind-merge';
+
+type CollectionPictograms = typeof dynamicComponentsPictograms;
+
+export type PictogramName = keyof CollectionPictograms;
+
+type IconComponent = CollectionPictograms[PictogramName];
+
+export type PictogramProps = {
+  className?: string;
+  name: PictogramName;
+  size?: number | 'sm' | 'md';
+};
+
+/**
+ * Determines and returns width and height attributes based on the size parameter.
+ */
+const getSizeAttributes = (size: PictogramProps['size']) => {
+  switch (size) {
+    case 'sm':
+      return { width: '40', height: '40' };
+    case 'md':
+      return { width: '60', height: '60' };
+    default:
+      return {
+        width: size?.toString() || '40',
+        height: size?.toString() || '40',
+      };
+  }
+};
+
+/**
+ * Renders the icon.
+ */
+const renderIcon = (
+  Element: IconComponent,
+  wrapperAttrs: Record<string, string>,
+  svgAttrs?: Record<string, string>,
+) => {
+  const className = twMerge('inline-block', wrapperAttrs.className);
+
+  return (
+    <div {...wrapperAttrs} className={className}>
+      <Element {...svgAttrs} />
+    </div>
+  );
+};
+
+/**
+ * Component to display an pictogram, based on the [local pictogram library](/docs/foundation-icons-pictograms--docs).
+ */
+const Pictogram: FC<PictogramProps> = ({ size = 'sm', name, ...rest }) => {
+  const Element = dynamicComponentsPictograms[name];
+  if (!Element) {
+    return null;
+  }
+
+  const { width, height } = getSizeAttributes(size);
+
+  return renderIcon(Element, rest, { width, height, viewBox: '0 0 40 40' });
+};
+
+Pictogram.displayName = 'Pictogram';
+
+export { Pictogram };

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

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

package/src/components/core/Popover/Popover.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+import { IconButton } from '../../core/IconButton';
+
+// Root component for the Popover.
+const Popover = PopoverPrimitive.Root;
+
+// Trigger component for opening the Popover.
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+// Anchor component for positioning the Popover.
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+/**
+ * Props for the PopoverContent component.
+ */
+export type PopoverContentProps = React.ComponentPropsWithoutRef<
+  typeof PopoverPrimitive.Content
+>;
+
+/**
+ * PopoverContent displays the content inside the popover.
+ *
+ * @param {PopoverContentProps} props - The properties for the PopoverContent.
+ * @returns {JSX.Element} The Popover content component.
+ */
+const PopoverContent = (props: PopoverContentProps) => {
+  const { align = 'center', sideOffset = 4, children } = props;
+
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        align={align}
+        side={'top'}
+        sideOffset={sideOffset}
+        avoidCollisions
+        collisionPadding={16}
+        className="z-popover w-[312px] rounded-sm bg-surface-white px-4 pb-6 pt-2 drop-shadow-md md:max-w-[232px]"
+      >
+        <div className="flex">
+          <PopoverPrimitive.Close asChild>
+            <IconButton
+              iconName="cancel"
+              variant="ghost"
+              size="sm"
+              className="ml-auto"
+              aria-label="popover-close"
+            />
+          </PopoverPrimitive.Close>
+        </div>
+        <div className="grid gap-2 text-marine-high-emphasis">{children}</div>
+        <div className="absolute bottom-0 left-0 right-0 z-10 h-2 w-full rounded-md bg-surface-white" />
+        <PopoverPrimitive.Arrow className="h-3 w-5 fill-white drop-shadow-md" />
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+  );
+};
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

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

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

package/src/components/core/Portlist/Portlist.tsx

@@ -0,0 +1,28 @@
+import { twMerge } from '@tui-cruises/mein-schiff-web-tailwind-config';
+import React from 'react';
+import { twJoin } from 'tailwind-merge';
+
+type Props = {
+  className?: string;
+  ports: string[];
+};
+
+export const Portlist = ({ ports, className }: Props) => {
+  return (
+    <div className={twMerge('mt-2 flex-grow text-xs', className)}>
+      {ports.map((port, index) => (
+        <span
+          className={twJoin(
+            index === ports.length - 1 && 'font-semibold',
+            index === 0 && 'font-semibold',
+          )}
+          key={port}
+        >
+          {index === 1 ? '   →   ' : ''}
+          {port}
+          {index < ports.length - 1 && index !== 0 ? '   →   ' : ''}
+        </span>
+      ))}
+    </div>
+  );
+};

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

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

package/src/components/core/PriceInput/PriceInput.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { Locale } from '@tuic/i18n';
+import { InputHTMLAttributes, forwardRef, useEffect, useState } from 'react';
+import { Price, formatPrice } from '../../../helpers/price';
+
+type InputAttributes = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'className' | 'placeholder' | 'onChange' | 'value'
+>;
+
+export type PriceInputProps = InputAttributes & {
+  locale: Locale;
+  label?: string;
+  id?: string;
+  price?: Price;
+  onChangeValue?: (value: Price) => void;
+  onFinish?: (value: Price) => void;
+};
+
+const PriceInput = forwardRef<HTMLInputElement, PriceInputProps>(
+  ({ label, id, price, onChangeValue, onFinish, locale, ...rest }, ref) => {
+    const [formattedPrice, setFormattedPrice] = useState('');
+
+    useEffect(() => {
+      if (price) {
+        const formatted = formatPrice(locale, {
+          maximumFractionDigits: 0,
+          ...price,
+        });
+        setFormattedPrice(formatted);
+      } else {
+        setFormattedPrice('');
+      }
+    }, [price]);
+
+    const handleChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
+      const inputValue = parseInt(ev.target.value.replace(/\D/g, '')) || 0;
+
+      const newValue: Price = {
+        currency: price?.currency ?? '',
+        price: inputValue,
+      };
+      setFormattedPrice(ev.target.value);
+      onChangeValue && onChangeValue(newValue);
+    };
+
+    const handleBlur = (ev: React.ChangeEvent<HTMLInputElement>) => {
+      const inputValue = parseInt(ev.target.value.replace(/\D/g, '')) || 0;
+
+      const newValue: Price = {
+        currency: price?.currency ?? '',
+        price: inputValue,
+      };
+      setFormattedPrice(
+        formatPrice(locale, {
+          maximumFractionDigits: 0,
+          ...newValue,
+        }),
+      );
+      onFinish && onFinish(newValue);
+    };
+
+    const handleKeyPress = (ev: React.KeyboardEvent<HTMLInputElement>) => {
+      if (ev.key === 'Enter') {
+        ev.preventDefault();
+        ev.currentTarget.blur();
+      }
+    };
+
+    return (
+      <div className="h-13 relative flex w-full items-center overflow-hidden rounded-sm border border-stroke-secondary-40 bg-surface-white px-2 py-1 text-base text-marine-high-emphasis focus-within:shadow-focus-state data-[invalid]:border-stroke-error-100">
+        <input
+          type="text"
+          placeholder=" "
+          value={formattedPrice}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          onKeyDown={handleKeyPress}
+          ref={ref}
+          {...rest}
+          id={id}
+          className="peer mt-4 flex-1 pl-1 text-marine-high-emphasis focus:outline-none"
+        />
+        {label && (
+          <label
+            htmlFor={id}
+            className="absolute left-3 top-0 my-auto cursor-text text-xs text-secondary-marine-48 transition-all peer-placeholder-shown:top-auto peer-placeholder-shown:text-base"
+          >
+            {label}
+          </label>
+        )}
+      </div>
+    );
+  },
+);
+
+PriceInput.displayName = 'PriceInput';
+
+export { PriceInput };

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

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

package/src/components/core/QuantityItem/QuantityItem.tsx

@@ -0,0 +1,37 @@
+import type { FC, HTMLAttributes } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Icon } from '../Icon';
+
+export type QuantityItemProps = {
+  current: number;
+  max: number;
+  variant?: 'dark' | 'light';
+} & HTMLAttributes<HTMLDivElement>;
+
+/**
+ * QuantityItem component displays the current quantity out of a maximum value.
+ */
+export const QuantityItem: FC<QuantityItemProps> = ({
+  current,
+  max,
+  className,
+  variant = 'dark',
+  ...props
+}) => {
+  const derivedClassName = twMerge(
+    'inline-flex items-center justify-center gap-1 rounded-md px-2 py-1 text-sm font-semibold tracking-wider',
+    className,
+    variant === 'dark'
+      ? 'bg-opacity-black-60 text-white'
+      : 'bg-surface-white text-marine-high-emphasis',
+  );
+
+  return (
+    <div className={derivedClassName} {...props}>
+      <Icon name="media-image-list" size="sm" />
+      <span>
+        {current}/{max}
+      </span>
+    </div>
+  );
+};

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

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

package/src/components/core/Radio/Radio.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import type { ForwardRefRenderFunction, InputHTMLAttributes } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { twJoin } from 'tailwind-merge';
+
+type BaseProps = {
+  invalid?: string;
+};
+
+export type RadioProps = BaseProps &
+  Omit<InputHTMLAttributes<HTMLInputElement>, keyof BaseProps | 'type'>;
+
+const RadioRenderFunction: ForwardRefRenderFunction<
+  HTMLInputElement | null,
+  RadioProps
+> = ({ invalid, ...attrs }, forwardedRef) => {
+  const ref = useRef<HTMLInputElement | null>(null);
+
+  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+    forwardedRef,
+    () => ref.current,
+  );
+
+  useEffect(() => {
+    ref.current?.setCustomValidity(invalid ?? '');
+  }, [ref, invalid]);
+
+  return (
+    <input
+      {...attrs}
+      className={twJoin(
+        'relative size-8 flex-shrink-0 appearance-none rounded-full md:size-6',
+        'border border-stroke-primary-100',
+        'before:absolute before:inset-2 before:hidden before:rounded-full before:bg-surface-white md:before:inset-1.5',
+        'hover:cursor-pointer',
+        'checked:border-transparent checked:bg-surface-primary-100',
+        'checked:before:block',
+        'disabled:border-stroke-secondary-40 disabled:hover:cursor-not-allowed disabled:hover:bg-transparent',
+        'invalid:border-stroke-error-100',
+        'focus:outline-none focus-visible:shadow-focus-state',
+      )}
+      type="radio"
+      ref={ref}
+    />
+  );
+};
+
+/**
+ * Radio
+ *
+ * <Radio />
+ *
+ * ## Invalid Radios (Radios with Errors)
+ *
+ * Provide an error message in the `invalid` attribute to mark the checkbox as errored.
+ *
+ * ```tsx
+ * <Radio invalid="You can't select this." />
+ * ```
+ */
+export const Radio = forwardRef<HTMLInputElement | null, RadioProps>(
+  RadioRenderFunction,
+);

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

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

package/src/components/core/RadioField/RadioField.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import {
+  ForwardRefRenderFunction,
+  ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import { forwardRef } from 'react';
+import { Radio, RadioProps } from '../Radio';
+import { Item as RadixItem } from '@radix-ui/react-radio-group';
+
+type Props = {
+  label?: ReactNode;
+  note?: ReactNode;
+  error?: string;
+  asRadix?: boolean;
+} & RadioProps;
+
+const RadioFieldRenderFunction: ForwardRefRenderFunction<
+  HTMLInputElement | null,
+  Props
+> = ({ label, note, error, asRadix, ...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]);
+
+  return (
+    <div className="space-y-1">
+      <label className="flex cursor-pointer gap-2 text-marine-high-emphasis">
+        {!asRadix && <Radio {...attrs} ref={inputRef} />}
+
+        {asRadix && (
+          <RadixItem asChild value={(attrs.value ?? '').toString()}>
+            <Radio {...attrs} />
+          </RadixItem>
+        )}
+
+        {(label || note) && (
+          <div>
+            {label && <div className="font-semibold">{label}</div>}
+            {note && <div className="text-sm">{note}</div>}
+          </div>
+        )}
+      </label>
+
+      {error && <div className="text-sm text-error-100">{error}</div>}
+    </div>
+  );
+};
+
+export const RadioField = forwardRef<HTMLInputElement | null, Props>(
+  RadioFieldRenderFunction,
+);

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

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

package/src/components/core/RadixRadio/RadixRadio.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import {
+  Root,
+  Item,
+  Indicator,
+  RadioGroupItemProps,
+} from '@radix-ui/react-radio-group';
+import { twMerge } from '@tui-cruises/mein-schiff-web-tailwind-config';
+import React, {
+  ComponentPropsWithoutRef,
+  forwardRef,
+  ForwardRefRenderFunction,
+} from 'react';
+
+export const RadixRadioGroup = Root;
+
+const RadioRenderFunction: ForwardRefRenderFunction<
+  HTMLButtonElement,
+  RadioGroupItemProps
+> = (props, ref) => {
+  return (
+    <Item
+      ref={ref}
+      {...props}
+      className={twMerge(
+        'focus-visible:ring-ring text-primary aspect-square size-8 rounded-full border-stroke-primary-100 ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:border data-[state=checked]:bg-surface-primary-100 md:size-6',
+        props.className,
+      )}
+    >
+      <Indicator className="flex items-center justify-center">
+        <div className="size-4 rounded-full bg-surface-white md:size-3" />
+      </Indicator>
+    </Item>
+  );
+};
+
+type RadioItemProps = {
+  label: string;
+  id: string;
+} & ComponentPropsWithoutRef<typeof RadixRadiobutton>;
+export function RadixRadioItem({ label, id, ...props }: RadioItemProps) {
+  return (
+    <div className="inline-flex flex-row items-center gap-2">
+      <RadixRadiobutton id={id} {...props} />
+      <label className="label-md select-none" htmlFor={id}>
+        {label}
+      </label>
+    </div>
+  );
+}
+
+export const RadixRadiobutton = forwardRef<
+  HTMLButtonElement,
+  RadioGroupItemProps
+>(RadioRenderFunction);

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

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

package/src/components/core/RadixSelect/RadixSelect.tsx

@@ -0,0 +1,172 @@
+'use client';
+
+import React, { PropsWithChildren, ReactNode } from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Icon } from '../../core/Icon';
+import { twJoin } from 'tailwind-merge';
+
+export type RadixSelectProps = PropsWithChildren<{
+  variant?: 'block' | 'inline';
+  ariaLabel?: string;
+  placeholder?: string;
+  triggerClassName?: string;
+  freeFloating?: boolean;
+  showUpDownButtons?: boolean;
+  displayValue?: ReactNode;
+  align?: 'start' | 'center' | 'end';
+  withFlexibleWidth?: boolean;
+}> &
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>;
+
+export type RadixSelectItemProps = PropsWithChildren<{
+  className?: string;
+}> &
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>;
+
+/**
+ * `Select` provides a customizable dropdown menu for users to select an option. It uses Radix UI primitives for accessibility and flexibility.
+ *
+ * ## Basic Usage
+ *
+ * To use the Select component, wrap `SelectItem` components inside it. You can provide `ariaLabel` and `placeholder` as props to customize the accessible label and placeholder text.
+ *
+ * ```tsx
+ * <Select ariaLabel="Choose an option" placeholder="Select one">
+ *   <SelectItem>Option 1</SelectItem>
+ *   <SelectItem>Option 2</SelectItem>
+ * </Select>
+ * ```
+ *
+ * `SelectItem` represents an individual option within the Select dropdown. It can be customized with a className for specific styling needs.
+ *
+ * ## Basic Usage of SelectItem
+ *
+ * `SelectItem` is used within `Select` to represent the options. You can pass children to define the content of each option.
+ *
+ * ```tsx
+ * <Select>
+ *   <SelectItem className="custom-select-item-style">Option 1</SelectItem>
+ *   <SelectItem>Option 2</SelectItem>
+ * </Select>
+ * ```
+ *
+ * ## Disabled SelectItem
+ *
+ * To disable a specific option, set the `disabled` prop on `SelectItem`.
+ *
+ * ```tsx
+ * <Select>
+ *   <SelectItem disabled>Disabled Option</SelectItem>
+ *   <SelectItem>Option 2</SelectItem>
+ * </Select>
+ * ```
+ */
+
+export const RadixSelect = React.forwardRef<
+  HTMLButtonElement,
+  RadixSelectProps
+>(
+  (
+    {
+      children,
+      ariaLabel = 'Auswahl',
+      variant = 'block',
+      triggerClassName,
+      placeholder,
+      showUpDownButtons = false,
+      freeFloating = false,
+      withFlexibleWidth = false,
+      align = 'start',
+      displayValue,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    return (
+      <SelectPrimitive.Root {...props}>
+        <SelectPrimitive.Trigger
+          ref={forwardedRef}
+          className={twJoin(
+            variant == 'block' &&
+              twJoin(
+                'inline-flex h-[58px] w-full items-center justify-between p-4',
+                'rounded-md border border-stroke-secondary-40 bg-surface-white text-base text-marine-high-emphasis outline-none',
+                'focus:outline-none focus-visible:shadow-focus-state',
+                'hover:border-stroke-secondary-40',
+                'disabled:cursor-not-allowed',
+                'data-[invalid]:border-stroke-error-100',
+                'data-[placeholder]:text-secondary-marine-48',
+                'data-[state=open]:rounded-b-none data-[state=open]:border-b-transparent data-[state=open]:shadow-md',
+              ),
+            variant == 'inline' && 'inline-flex flex-row items-center gap-2',
+            triggerClassName,
+          )}
+          aria-label={ariaLabel}
+        >
+          <SelectPrimitive.Value placeholder={placeholder}>
+            {displayValue}
+          </SelectPrimitive.Value>
+          <SelectPrimitive.Icon className="text-marine-high-emphasis">
+            <Icon name="nav-arrow-down" size="sm" />
+          </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+        <SelectPrimitive.Portal>
+          <SelectPrimitive.Content
+            className={twJoin(
+              'z-[50000] overflow-hidden bg-surface-white shadow-md',
+              'border border-stroke-secondary-40',
+              'max-h-[var(--radix-select-content-available-height)] ',
+              !withFlexibleWidth && 'w-[var(--radix-select-trigger-width)]',
+              !freeFloating && 'border-t-0 rounded-b-md',
+              freeFloating && 'rounded-md',
+            )}
+            position="popper"
+            align={align}
+          >
+            {showUpDownButtons && (
+              <SelectPrimitive.ScrollUpButton className="SelectScrollButton">
+                <Icon name="nav-arrow-up" />
+              </SelectPrimitive.ScrollUpButton>
+            )}
+
+            <SelectPrimitive.Viewport className="pb-2">
+              {children}
+            </SelectPrimitive.Viewport>
+
+            {showUpDownButtons && (
+              <SelectPrimitive.ScrollDownButton className="SelectScrollButton">
+                <Icon name="nav-arrow-down" />
+              </SelectPrimitive.ScrollDownButton>
+            )}
+          </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+      </SelectPrimitive.Root>
+    );
+  },
+);
+
+export const RadixSelectItem = React.forwardRef<
+  HTMLDivElement,
+  RadixSelectItemProps
+>(({ children, className, ...props }, forwardedRef) => {
+  return (
+    <SelectPrimitive.Item
+      className={twJoin(
+        'flex cursor-pointer select-none items-center px-4 py-3',
+        'data-[disabled]:pointer-events-none data-[highlighted]:border-stroke-secondary-40 data-[disabled]:text-marine-high-emphasis data-[highlighted]:outline-none',
+        'focus:bg-surface-secondary-10',
+        'data-[state=checked]:font-semibold',
+        className,
+      )}
+      {...props}
+      ref={forwardedRef}
+    >
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      {/*
+        <SelectPrimitive.ItemIndicator className="absolute left-2 inline-flex items-center justify-center">
+          <Icon name="check" />
+        </SelectPrimitive.ItemIndicator>
+        */}
+    </SelectPrimitive.Item>
+  );
+});

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

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