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

package/src/components/core/IconButton/IconButton.tsx

@@ -0,0 +1,169 @@
+import { Icon, IconName } from '../../core/Icon';
+import {
+  ButtonHTMLAttributes,
+  forwardRef,
+  ForwardRefRenderFunction,
+} from 'react';
+import { twJoin, twMerge } from 'tailwind-merge';
+import { Slot, Slottable } from '@radix-ui/react-slot';
+import { wrapSlottableChildren } from '../../../helpers/slot';
+import { useScreenNameAtLeast } from '../../../hooks/use-screen-name-at-least';
+
+type CommonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  asChild?: boolean;
+  iconName: IconName;
+  iconPosition?: 'left' | 'right';
+  on?: 'white' | 'gray' | 'ocean';
+};
+
+export type IconButtonPrimaryAndSecondaryProps = CommonProps & {
+  variant?: 'primary' | 'secondary';
+  size?: 'sm' | 'md' | 'lg';
+};
+
+export type IconButtonGhostProps = CommonProps & {
+  variant: 'ghost';
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+};
+
+export type IconButtonProps =
+  | IconButtonPrimaryAndSecondaryProps
+  | IconButtonGhostProps;
+
+const IconButtonRenderFunction: ForwardRefRenderFunction<
+  HTMLButtonElement,
+  IconButtonProps
+> = (props, ref) => {
+  const {
+    size = 'md',
+    variant = 'primary',
+    on = 'white',
+    iconName,
+    asChild,
+    children,
+    iconPosition,
+    ...rest
+  } = props;
+
+  // Assuming `useScreenNameAtLeast` is returning a screen size string
+  const isMdOrAbove = useScreenNameAtLeast('md', 'md');
+
+  let resolvedIconSize = size;
+  if (size === 'xs' && isMdOrAbove) {
+    resolvedIconSize = 'md';
+  }
+
+  const buttonClassNames = twMerge(
+    'inline-flex rounded-full transition-colors',
+
+    size === 'xs' && 'p-0.5', // 20px
+    size === 'sm' && 'p-3 md:p-2', // 36px
+    size === 'md' && 'p-3.5 md:p-3', // 52px md:48px
+
+    // Variants
+    variant === 'primary' && [
+      // On white (default)
+      'bg-surface-primary-100 text-marine-high-emphasis',
+      'group-hover/icon-button:bg-surface-primary-120',
+      'group-active/icon-button:bg-surface-primary-120',
+      'group-disabled/icon-button:bg-surface-secondary-7',
+
+      // On gray
+      on === 'gray' && 'group-disabled/icon-button:bg-surface-white',
+
+      // On ocean
+      on === 'ocean' && 'bg-surface-secondary-100 text-white',
+      on === 'ocean' && 'group-hover/icon-button:bg-surface-secondary-120',
+      on === 'ocean' && 'group-active/icon-button:bg-surface-secondary-120',
+      on === 'ocean' && 'group-disabled/icon-button:bg-surface-secondary-7',
+    ],
+
+    variant === 'secondary' && [
+      'bg-transparent',
+
+      // On white (default)
+      'text-marine-high-emphasis shadow-[inset_0_0_0_2px_theme(colors.stroke.primary-100)]',
+      'group-hover/icon-button:shadow-[inset_0_0_0_4px_theme(colors.stroke.primary-100)]',
+      'group-active/icon-button:shadow-[inset_0_0_0_4px_theme(colors.stroke.primary-100)]',
+      'group-disabled/icon-button:shadow-[inset_0_0_0_2px_theme(colors.stroke.secondary-7)]',
+
+      // On gray
+      on === 'gray' &&
+        'group-disabled/icon-button:shadow-[inset_0_0_0_2px_theme(colors.stroke.white)]',
+
+      // On ocean
+      on === 'ocean' && 'shadow-[inset_0_0_0_2px_theme(colors.stroke.white)]',
+      on === 'ocean' &&
+        'group-hover/icon-button:shadow-[inset_0_0_0_4px_theme(colors.stroke.white)]',
+      on === 'ocean' &&
+        'group-active/icon-button:shadow-[inset_0_0_0_4px_theme(colors.stroke.white)]',
+      on === 'ocean' &&
+        'group-disabled/icon-button:shadow-[inset_0_0_0_2px_theme(colors.stroke.secondary-7)]',
+    ],
+
+    variant === 'ghost' && [
+      'text-marine-high-emphasis',
+      'group-hover/icon-button:text-marine-medium-emphasis',
+      'group-active/icon-button:text-marine-medium-emphasis',
+    ],
+
+    // States
+    'group-active/icon-button:transition-none',
+    'group-focus/icon-button:outline-none group-focus-visible/icon-button:shadow-focus-state',
+    'group-disabled/icon-button:!pointer-events-none group-disabled/icon-button:text-secondary-marine-48',
+  );
+
+  const Element = asChild ? Slot : 'button';
+
+  return (
+    <Element
+      ref={ref}
+      {...rest}
+      className={twJoin(
+        'group/icon-button flex appearance-none items-center border-none',
+        'focus:outline-none',
+        'disabled:!pointer-events-none disabled:text-secondary-marine-48',
+
+        size === 'md' ? 'text-base' : 'text-sm',
+        variant !== 'ghost' && ['gap-2'],
+        variant === 'ghost' && [
+          size === 'xs' && 'gap-0.5',
+          size === 'sm' && 'gap-1',
+          size === 'md' && 'gap-1',
+        ],
+        iconPosition === 'right' && 'flex-row-reverse',
+
+        rest.className,
+      )}
+    >
+      <div className={buttonClassNames}>
+        <Icon name={iconName} size={resolvedIconSize} />
+      </div>
+
+      <Slottable>
+        {wrapSlottableChildren(asChild, children, children => {
+          if (!children) {
+            return null;
+          }
+
+          return <div>{children}</div>;
+        })}
+      </Slottable>
+    </Element>
+  );
+};
+
+/**
+ * IconButton is a simple round button component, displaying one icon with an optional label.
+ *
+ * ```tsx
+ * <IconButton variant="primary" size="md">Label</IconButton>
+ *
+ * <IconButton variant="primary" size="md" asChild>
+ *   <a href="#">Label</a>
+ * </IconButton>
+ * ```
+ */
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  IconButtonRenderFunction,
+);

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

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

package/src/components/core/InputField/InputField.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import {
+  forwardRef,
+  ForwardRefRenderFunction,
+  InputHTMLAttributes,
+  ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import { InputFieldInput, InputFieldInputProps } from './InputFieldInput';
+import { InputFieldError } from './InputFieldError';
+import { InputFieldNote } from './InputFieldNote';
+import { InputFieldLabel } from './InputFieldLabel';
+import * as RadixForm from '@radix-ui/react-form';
+import { twMerge } from '@tui-cruises/mein-schiff-web-tailwind-config';
+
+export type InputFieldProps = Omit<InputFieldInputProps, 'required'> & {
+  label?: ReactNode;
+  note?: ReactNode;
+  error?: string;
+
+  /**
+   * 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 InputFieldRenderFunction: ForwardRefRenderFunction<
+  HTMLInputElement,
+  InputFieldProps
+> = (props, forwardedRef) => {
+  const {
+    label,
+    note,
+    error,
+    className,
+    asRadix,
+    radixFormMessages,
+    required,
+    ...attrs
+  } = props;
+
+  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={twMerge('block space-y-1', className)}>
+        <label className="block space-y-1">
+          {label && (
+            <InputFieldLabel asChild>
+              <div>
+                {label}
+                {required ? '*' : ''}
+              </div>
+            </InputFieldLabel>
+          )}
+          <InputFieldInput
+            {...attrs}
+            required={typeof required === 'boolean' ? required : undefined}
+            ref={inputRef}
+          />
+          {!error && note && <InputFieldNote>{note}</InputFieldNote>}
+        </label>
+
+        {error && <InputFieldError>{error}</InputFieldError>}
+      </div>
+    );
+  }
+
+  return (
+    <RadixForm.Field name={attrs.name ?? ''} className={className} asChild>
+      <div className="space-y-1">
+        <label className="block space-y-1">
+          <RadixForm.Label asChild>
+            <InputFieldLabel asChild>
+              <div>
+                {label}
+                {required ? '*' : ''}
+              </div>
+            </InputFieldLabel>
+          </RadixForm.Label>
+          <RadixForm.Control asChild>
+            <InputFieldInput
+              {...attrs}
+              required={typeof required === 'boolean' ? required : undefined}
+            />
+          </RadixForm.Control>
+          <RadixForm.ValidityState>
+            {validity =>
+              (validity?.valid ?? true) && (
+                <InputFieldNote>{note}</InputFieldNote>
+              )
+            }
+          </RadixForm.ValidityState>
+        </label>
+
+        {(radixFormMessages ?? []).map((props, idx) => (
+          <RadixForm.Message key={idx} {...props} asChild>
+            <InputFieldError>{props.children}</InputFieldError>
+          </RadixForm.Message>
+        ))}
+      </div>
+    </RadixForm.Field>
+  );
+};
+
+export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
+  InputFieldRenderFunction,
+);

package/src/components/core/InputField/InputFieldError.tsx

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

package/src/components/core/InputField/InputFieldInput.tsx

@@ -0,0 +1,67 @@
+import {
+  forwardRef,
+  ForwardRefRenderFunction,
+  HTMLAttributes,
+  InputHTMLAttributes,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import { twJoin } from 'tailwind-merge';
+import { FieldsetProps } from '../Fieldset';
+
+type ElementAttributes = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'children'
+>;
+
+export type InputFieldInputProps = ElementAttributes & {
+  fieldsetVariant?: FieldsetProps['variant'];
+};
+
+const InputFieldInputRenderFunction: ForwardRefRenderFunction<
+  HTMLInputElement,
+  InputFieldInputProps
+> = (props, forwardedRef) => {
+  let { fieldsetVariant, ...attrs } = props;
+  let ref = useRef<HTMLInputElement>(null);
+
+  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+    forwardedRef,
+    () => ref.current,
+  );
+
+  useEffect(() => {
+    ref.current?.setCustomValidity('');
+  }, []);
+
+  return (
+    <input
+      {...attrs}
+      ref={ref}
+      className={twJoin(
+        'box-border w-full appearance-none font-[inherit]',
+        'block rounded-md border border-stroke-secondary-40 bg-surface-white p-4',
+        'text-marine-high-emphasis',
+        'focus:outline-none focus-visible:shadow-focus-state',
+        'invalid:border-stroke-error-100 invalid:text-error-100 focus-visible:invalid:border-stroke-error-100',
+        'disabled:border-transparent disabled:text-marine-medium-emphasis',
+        'read-only:border-transparent read-only:text-marine-medium-emphasis',
+
+        fieldsetVariant !== 'gray' &&
+          'read-only:bg-surface-secondary-7 disabled:bg-surface-secondary-7',
+
+        // @revisit
+        fieldsetVariant === 'gray' &&
+          'read-only:bg-surface-white disabled:bg-surface-white',
+
+        attrs.className,
+      )}
+    />
+  );
+};
+
+export const InputFieldInput = forwardRef<
+  HTMLInputElement,
+  InputFieldInputProps
+>(InputFieldInputRenderFunction);

package/src/components/core/InputField/InputFieldLabel.tsx

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

package/src/components/core/InputField/InputFieldNote.tsx

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

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

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

package/src/components/core/LoadingSpinner/LoadingSpinner.tsx

@@ -0,0 +1,50 @@
+import { twJoin } from 'tailwind-merge';
+
+export type LoadingSpinnerProps = {
+  className?: string;
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+
+const LoadingSpinner = (props: LoadingSpinnerProps) => {
+  const { className, size } = props;
+
+  const variants = {
+    size: {
+      xs: 20,
+      sm: 24,
+      md: 32,
+      lg: 48,
+      xl: 64,
+    },
+  };
+
+  return (
+    <div role="status">
+      <svg
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width={variants.size[size]}
+        height={variants.size[size]}
+        viewBox="0 0 24 24"
+        className={twJoin('animate-spin', className)}
+      >
+        <g>
+          <path
+            d="M12.05 19.5C9.94995 19.5 8.17495 18.775 6.72495 17.325C6.29994 16.9 7.37652 15.8266 7.79995 16.25C8.96661 17.4167 10.3833 18 12.05 18C13.3333 18 14.4916 17.6333 15.5249 16.9C16.5583 16.1667 17.2833 15.2 17.6999 14C17.9999 13.5 18.9999 13.5 19.2749 14C18.8249 15.6333 17.9293 16.9583 16.5879 17.975C15.2459 18.9917 13.7333 19.5 12.05 19.5Z"
+            fill="currentColor"
+          />
+        </g>
+        <defs>
+          <clipPath>
+            <rect width="24" height="24" fill="currentFill" />
+          </clipPath>
+        </defs>
+      </svg>
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+};
+
+LoadingSpinner.displayName = 'LoadingSpinner';
+
+export { LoadingSpinner };

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

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

package/src/components/core/Pagination/Pagination.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+import { EventClickElement } from '@tuic/tracking';
+import {
+  cloneElement,
+  ComponentPropsWithoutRef,
+  Dispatch,
+  HTMLAttributes,
+  MouseEventHandler,
+  ReactElement,
+  SetStateAction,
+  useMemo,
+  useState,
+} from 'react';
+import { IconButton } from '../IconButton';
+import { Divider } from '../../core/Divider';
+import { twMerge } from 'tailwind-merge';
+import { I18NInterface } from '../../../helpers/i18n';
+
+type I18N = I18NInterface<
+  'page' | 'previousPage' | 'nextPage' | 'paginationNavigation'
+>;
+
+type NavigationHandler = () => void | Promise<void>;
+
+type RenderPropOptions = {
+  type: 'next' | 'previous';
+};
+
+type ChildrenType =
+  | ((options: RenderPropOptions) => ReactElement)
+  | ReactElement;
+
+export type PaginationProps = HTMLAttributes<HTMLElement> & {
+  current?: number | number[];
+  total?: number;
+  forcePreviousClickable?: boolean;
+  forceNextClickable?: boolean;
+  onPrevious?: NavigationHandler;
+  onNext?: NavigationHandler;
+  className?: string;
+  children?: ChildrenType;
+  i18n?: I18N;
+  centered?: boolean;
+};
+
+export const Pagination = ({
+  current = 1,
+  total = 1,
+  forcePreviousClickable = false,
+  forceNextClickable = false,
+  onNext,
+  onPrevious,
+  i18n,
+  centered = false,
+  children,
+  ...rest
+}: PaginationProps) => {
+  const [pending, setPending] = useState(false);
+  const currentAsArray = Array.isArray(current) ? current : [current];
+
+  const minCurrent = Math.min(...currentAsArray);
+  const maxCurrent = Math.max(...currentAsArray);
+
+  const previousButton = renderButton('previous', children, {
+    variant: 'secondary',
+    iconName: 'nav-arrow-left',
+    disabled: !forcePreviousClickable && (pending || minCurrent <= 1),
+    size: 'sm',
+    onClick: createNavigationHandler(setPending, onPrevious),
+    'aria-label': i18n?.previousPage ?? 'Vorherige Seite',
+  });
+
+  const nextButton = renderButton('next', children, {
+    variant: 'secondary',
+    iconName: 'nav-arrow-right',
+    disabled: !forceNextClickable && (pending || maxCurrent >= total),
+    size: 'sm',
+    onClick: createNavigationHandler(setPending, onNext),
+    'aria-label': i18n?.nextPage ?? 'Nächste Seite',
+  });
+
+  const pageInfo = (
+    <ul
+      aria-hidden={true}
+      className="flex items-center gap-2 text-marine-high-emphasis"
+    >
+      <li className="max-sm:hidden">{i18n?.page ?? 'Seite'}</li>
+      <li>{minCurrent}</li>
+      <li>
+        <Divider align="vertical" className="h-4" />
+      </li>
+      <li>{total}</li>
+    </ul>
+  );
+
+  const ariaLabel = useMemo(() => {
+    return i18n?.paginationNavigation
+      ? i18n.paginationNavigation
+          .replace('{current}', `${minCurrent}`)
+          .replace('{total}', `${total}`)
+      : `Seitennavigation Seite ${current} von ${total}`;
+  }, [i18n?.paginationNavigation, minCurrent, total, current]);
+
+  return (
+    <nav
+      aria-label={ariaLabel}
+      role="navigation"
+      {...rest}
+      className={twMerge(
+        rest.className,
+        'flex items-center gap-4',
+        centered ? 'justify-center' : '',
+      )}
+    >
+      {centered ? (
+        <>
+          {previousButton}
+          {pageInfo}
+          {nextButton}
+        </>
+      ) : (
+        <>
+          <div className="flex items-center gap-2">
+            {previousButton}
+            {nextButton}
+          </div>
+          {pageInfo}
+        </>
+      )}
+    </nav>
+  );
+};
+
+/**
+ * Creates a navigation handler that sets the pending state before and after the handler is called.
+ */
+const createNavigationHandler = (
+  setPending: Dispatch<SetStateAction<boolean>>,
+  handler: NavigationHandler | undefined,
+): MouseEventHandler | undefined => {
+  if (typeof handler === 'undefined') {
+    return undefined;
+  }
+
+  return async () => {
+    setPending(true);
+    await handler();
+    setPending(false);
+  };
+};
+
+/**
+ * Renders the button based on the provided children.
+ */
+const renderButton = (
+  type: RenderPropOptions['type'],
+  children: ChildrenType | undefined,
+  { onClick, ...buttonProps }: ComponentPropsWithoutRef<typeof IconButton>,
+) => {
+  // If no children are provided, render the default IconButton.
+  if (typeof children === 'undefined') {
+    return (
+      <IconButton
+        data-track-click-element={EventClickElement.Icon}
+        data-track-click-label={type}
+        {...buttonProps}
+        onClick={onClick}
+      />
+    );
+  }
+
+  // If children is a function, call it with the type to get the rendered element.
+  if (typeof children === 'function') {
+    children = children({ type });
+  }
+
+  // Clone the children element and add the IconButton as a child.
+  return cloneElement(
+    children,
+    undefined,
+    <IconButton
+      data-track-click-element={EventClickElement.Icon}
+      data-track-click-label={type}
+      {...buttonProps}
+      asChild
+    >
+      <div />
+    </IconButton>,
+  );
+};

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

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