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

package/src/components/core/Accordion/Accordion.tsx

@@ -0,0 +1,228 @@
+'use client';
+
+import { EventClickElement } from '@tuic/tracking';
+import {
+  FC,
+  cloneElement,
+  HTMLAttributes,
+  ReactElement,
+  ReactNode,
+  MouseEvent,
+  useState,
+  Dispatch,
+  SetStateAction,
+  MouseEventHandler,
+  ElementType,
+} from 'react';
+import { AccordionItem, AccordionItemProps } from './AccordionItem';
+import * as Radix from '@radix-ui/react-accordion';
+import { getChildrenAsArrayOfElements } from '../../../helpers/children';
+import { assignDefaultValues } from './utils';
+import { AccordionTab, AccordionTabProps } from './AccordionTab';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../Tabs';
+import { TextButton, TextButtonProps } from '../../core/TextButton';
+
+export type AccordionMixedItem =
+  | AccordionItemProps
+  | (AccordionTabProps & { type: 'tab' });
+
+type CustomAccordionProps = {
+  fallback?: boolean;
+  items?: AccordionMixedItem[];
+  loadMoreButton?: TextButtonProps;
+  headlineAs?: AccordionItemProps['headlineAs'];
+};
+
+export type AccordionSingleProps = HTMLAttributes<HTMLUListElement> &
+  Radix.AccordionSingleProps &
+  CustomAccordionProps;
+export type AccordionMultipleProps = HTMLAttributes<HTMLUListElement> &
+  Radix.AccordionMultipleProps &
+  CustomAccordionProps;
+
+export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+
+type Root = FC<AccordionProps> & {
+  Item: typeof AccordionItem;
+  Tab: typeof AccordionTab;
+};
+
+const Accordion: Root = propsArg => {
+  let { loadMoreButton, ...props } = propsArg;
+
+  let [pending, setPending] = useState(false);
+
+  if (typeof loadMoreButton === 'undefined') {
+    return renderAccordion(props);
+  }
+
+  let handleClick: MouseEventHandler<HTMLButtonElement> = async ev => {
+    if (typeof loadMoreButton?.onClick === 'undefined') {
+      return;
+    }
+
+    setPending(true);
+
+    await loadMoreButton.onClick(ev);
+
+    setPending(false);
+  };
+
+  return (
+    <div className="space-y-4">
+      {renderAccordion(props)}
+
+      <div className="text-center">
+        <TextButton
+          {...loadMoreButton}
+          data-track-click-element={EventClickElement.Button}
+          data-track-click-label={loadMoreButton.children?.toString()}
+          onClick={handleClick}
+          disabled={pending}
+        />
+      </div>
+    </div>
+  );
+};
+
+const renderAccordion = (props: AccordionProps) => {
+  let { fallback, children: childrenArg, items, headlineAs, ...attrs } = props;
+
+  let { children, type } = getChildren(
+    items,
+    childrenArg,
+    fallback,
+    headlineAs,
+  );
+
+  if (attrs.type === 'single' && typeof attrs.collapsible === 'undefined') {
+    attrs.collapsible = true;
+  }
+
+  if (type !== 'tabs') {
+    return (
+      <Radix.Root {...attrs} asChild data-track-module="accordion">
+        <ul>
+          {children.map((item, idx) =>
+            cloneElement(item, {
+              ...item.props,
+              headlineAs: headlineAs ?? item.props.headlineAs,
+              key: item.key ?? item.props.value ?? idx,
+            }),
+          )}
+        </ul>
+      </Radix.Root>
+    );
+  }
+
+  let headlines = children.map(
+    child => child.props.headline ?? 'Not Specified',
+  );
+
+  return (
+    <Radix.Root {...attrs} asChild data-track-module="accordion">
+      <Tabs defaultValue="0" className="space-y-4">
+        <TabsList>
+          {headlines.map((headline, idx) => (
+            <TabsTrigger
+              key={idx}
+              value={idx.toString()}
+              data-track-click-element={EventClickElement.Button}
+              data-track-click-label={headline}
+            >
+              {headline}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {children.map((item, idx) => (
+          <TabsContent
+            key={idx}
+            value={idx.toString()}
+            data-track-module={`accordion.tab-${idx + 1}`}
+          >
+            {item}
+          </TabsContent>
+        ))}
+      </Tabs>
+    </Radix.Root>
+  );
+};
+
+const getChildren = (
+  itemsArg: AccordionMixedItem[] | undefined,
+  children: AccordionProps['children'],
+  fallback: boolean | undefined,
+  headlineAs?: ElementType,
+) => {
+  if (fallback) {
+    return {
+      type: 'fallback',
+      children: [...Array(4).keys()].map(idx => (
+        <AccordionItem key={idx} fallback={true} />
+      )),
+    };
+  }
+
+  let childrenAsArray = getChildrenAsArrayOfElements(children);
+
+  let { tabs, items } = separateTabsFromItems(childrenAsArray);
+
+  (itemsArg ?? []).forEach(item => {
+    if ('type' in item && item.type === 'tab') {
+      tabs.push(<AccordionTab {...item} />);
+    } else {
+      items.push(<AccordionItem {...item} headlineAs={headlineAs} />);
+    }
+  });
+
+  if (tabs.length === 0) {
+    return {
+      type: 'items',
+      children: assignDefaultValues(items),
+    };
+  }
+
+  if (items.length > 0) {
+    tabs.unshift(<AccordionTab>{items}</AccordionTab>);
+  }
+
+  return {
+    type: 'tabs',
+    children: tabs,
+  };
+};
+
+const separateTabsFromItems = (children: ReactElement[]) => {
+  let [tabs, items] = children.reduce<[ReactElement[], ReactElement[]]>(
+    ([tabs, items], child) => {
+      let type = child.type;
+      let isUl = type === 'ul';
+      let hasTabDisplayName =
+        typeof type !== 'string' &&
+        'displayName' in type &&
+        type.displayName === 'AccordionTab';
+
+      let isTab = isUl || hasTabDisplayName;
+
+      if (isTab) {
+        tabs.push(child);
+      } else {
+        items.push(child);
+      }
+
+      return [tabs, items];
+    },
+    [[], []],
+  );
+
+  return {
+    tabs,
+    items,
+  };
+};
+
+Accordion.Item = AccordionItem;
+Accordion.Tab = AccordionTab;
+
+export { Accordion };

package/src/components/core/Accordion/AccordionItem.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { EventClickElement } from '@tuic/tracking';
+import { type ElementType, FC, LiHTMLAttributes, ReactNode } from 'react';
+import { Divider } from '../../core/Divider';
+import { IconButton } from '../../core/IconButton';
+import * as Radix from '@radix-ui/react-accordion';
+import { SkeletonTextLines } from '../../core/Skeleton';
+import { twMerge } from 'tailwind-merge';
+
+export type AccordionItemProps = LiHTMLAttributes<HTMLLIElement> & {
+  fallback?: boolean;
+  headline?: ReactNode;
+  headlineAs?: ElementType;
+  value?: string;
+};
+
+export const AccordionItem: FC<AccordionItemProps> = ({
+  children,
+  fallback,
+  headline,
+  headlineAs: HeadlineTag = 'div',
+  value,
+  ...attrs
+}) => {
+  return (
+    <Radix.AccordionItem asChild value={value ?? ''}>
+      <li {...attrs} className={twMerge(attrs.className, 'pt-4')}>
+        <Radix.AccordionTrigger asChild>
+          <button
+            data-track-click-element={EventClickElement.Accordion}
+            data-track-click-label={headline}
+            className="flex w-full appearance-none items-center gap-4 px-2 text-left text-marine-high-emphasis hover:text-secondary-marine-48 [&[data-state=open]_.accordion-trigger-icon_svg]:-rotate-180"
+          >
+            {fallback && (
+              <SkeletonTextLines number={2} wrapperClassName="w-full" />
+            )}
+            {!fallback && headline && (
+              <HeadlineTag className="headline-sm flex-1 break-words">
+                {headline}
+              </HeadlineTag>
+            )}
+
+            {!fallback && children && (
+              <IconButton
+                className="accordion-trigger-icon [&_svg]:transition-transform [&_svg]:duration-300"
+                iconName="nav-arrow-down"
+                size="sm"
+                variant="ghost"
+                asChild
+              >
+                <div />
+              </IconButton>
+            )}
+          </button>
+        </Radix.AccordionTrigger>
+
+        {children && (
+          <Radix.AccordionContent asChild>
+            <div className="overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
+              <div className="px-2 pt-4 text-marine-high-emphasis md:pt-3">
+                {children}
+              </div>
+            </div>
+          </Radix.AccordionContent>
+        )}
+
+        <Divider className="-top-px mt-6 md:mt-4" />
+      </li>
+    </Radix.AccordionItem>
+  );
+};

package/src/components/core/Accordion/AccordionTab.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { cloneElement, FC, PropsWithChildren, ReactNode } from 'react';
+import { AccordionItem, AccordionItemProps } from './AccordionItem';
+import { assignDefaultValues } from './utils';
+import { getChildrenAsArrayOfElements } from '../../../helpers/children';
+
+export type AccordionTabProps = PropsWithChildren<{
+  headline?: ReactNode;
+  items?: AccordionItemProps[];
+}>;
+
+const AccordionTab: FC<AccordionTabProps> = ({
+  children: childrenArg,
+  headline,
+  items = [],
+}) => {
+  let children = [
+    ...getChildrenAsArrayOfElements(childrenArg),
+    ...items.map((props, idx) => <AccordionItem key={idx} {...props} />),
+  ];
+
+  children = assignDefaultValues(children);
+
+  return (
+    <ul>
+      {children.map((item, idx) =>
+        cloneElement(item, {
+          ...item.props,
+          key: item.key ?? item.props.value ?? idx,
+        }),
+      )}
+    </ul>
+  );
+};
+
+AccordionTab.displayName = 'AccordionTab';
+
+export { AccordionTab };

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

@@ -0,0 +1,3 @@
+export * from './Accordion';
+export * from './AccordionItem';
+export * from './AccordionTab';

package/src/components/core/Accordion/utils.tsx

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+
+export const assignDefaultValues = (
+  children: ReactElement[],
+): ReactElement[] => {
+  return children.map((item, idx) => ({
+    ...item,
+    props: {
+      ...item.props,
+      value: item.props.value ?? `intermediateValue${idx}`,
+    },
+  }));
+};

package/src/components/core/Alert/Alert.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+import { useState } from 'react';
+import { IconName, Icon } from '../../core/Icon';
+import { IconButton } from '../IconButton';
+import { twJoin } from 'tailwind-merge';
+import { twMerge } from '@tui-cruises/mein-schiff-web-tailwind-config';
+import { TextButton, TextButtonProps } from '../TextButton';
+
+export type AlertMode =
+  | 'error'
+  | 'attention'
+  | 'success'
+  | 'information-gray'
+  | 'information-white';
+
+export type AlertProps = PropsWithChildren<{
+  className?: string;
+  mode?: AlertMode;
+  icon?: IconName;
+  size?: 'sm' | 'lg';
+  headline?: string | ReactNode;
+  as?: keyof HTMLElementTagNameMap;
+  onClose?: () => void | Promise<void>;
+  cta?: TextButtonProps;
+}>;
+
+export const Alert: FC<AlertProps> = ({
+  children,
+  mode = 'attention',
+  size = 'lg',
+  icon,
+  headline,
+  cta,
+  as: Element = 'aside',
+  onClose,
+  className,
+}) => {
+  const [isClosePending, setIsClosePending] = useState(false);
+
+  const classList = twMerge(
+    'space-y-2 rounded-md border px-5',
+    size === 'sm' ? 'py-4' : 'py-6',
+    mode === 'error' &&
+      'border-stroke-error-120 bg-surface-feedback-error text-on-surface-feedback-error',
+    mode === 'success' &&
+      'border-stroke-success-100 bg-surface-feedback-success text-on-surface-feedback-success',
+    mode === 'information-gray' &&
+      'border-stroke-secondary-20 bg-surface-secondary-7 text-marine-high-emphasis',
+    mode === 'information-white' &&
+      'border-stroke-secondary-20 bg-surface-white text-marine-high-emphasis',
+    mode === 'attention' &&
+      'border-stroke-attention-120 bg-surface-feedback-attention text-on-surface-feedback-attention',
+    className,
+  );
+
+  const handleClose = async () => {
+    if (onClose) {
+      setIsClosePending(true);
+      await onClose();
+      setIsClosePending(false);
+    }
+  };
+
+  const iconName = icon ?? 'warning-circle';
+
+  return (
+    <Element className={classList}>
+      {headline && (
+        <div className="flex items-center gap-2">
+          {iconName && (
+            <div className="flex-none">
+              <Icon name={iconName} size="md" />
+            </div>
+          )}
+          <div
+            className={twJoin(
+              'flex-1',
+              size === 'sm' ? 'headline-xs' : 'headline-sm',
+            )}
+          >
+            {headline}
+          </div>
+          {onClose && (
+            <div className="ml-auto flex-none">
+              <IconButton
+                onClick={handleClose}
+                iconName="cancel"
+                size="sm"
+                variant="ghost"
+                disabled={isClosePending}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
+      {(children || cta || (!headline && onClose)) && (
+        <div className={twJoin('flex', iconName && headline ? 'md:pl-8' : '')}>
+          {(children || cta) && (
+            <div className="flex-1 space-y-4">
+              {children && (
+                <div
+                  className={twJoin(
+                    'cf-rich-text text-current',
+                    size === 'sm' ? 'text-sm' : 'text-lg',
+                  )}
+                >
+                  {children}
+                </div>
+              )}
+              {cta && <TextButton iconSize="sm" {...cta} />}
+            </div>
+          )}
+          {!headline && onClose && (
+            <div className="-mt-1 flex-none">
+              <IconButton
+                onClick={handleClose}
+                iconName="cancel"
+                size="sm"
+                variant="ghost"
+                disabled={isClosePending}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </Element>
+  );
+};

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

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