@tui-cruises/mein-schiff-web-react-component-library 3.0.5 → 3.0.7

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [3.0.7](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v3.0.6...v3.0.7) (2025-10-23)
+
+### [3.0.6](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.2.11...v3.0.6) (2025-10-23)
+
+
+### Features
+
+* **EC-1589:** next15 ([f7f195e](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/f7f195e4a667094f98ef1d91ff081b3e8339c56a))
+* **FavoriteButton:** delete 'FavoriteButton' from core components ([5d2bcb0](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/5d2bcb0fade07bcf608414a88fa1273dfb5d6e04))
+* fix carousel for next15 ([307b74e](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/307b74ec8164c253183aad39ed73724d53721f7e))
+* icon next15 ([a44efc6](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/a44efc67244f6d3d470323dea7110d7c5c949336))
+* next15 prep ([c228c08](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/c228c084b32c60499eaf055e6f9e5dc698ebaf72))
+* next15 prep ([9d1adcf](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/9d1adcf970b8a75ec478211bdf01933e0bd7a03e))
+* **Price:** new price information component ([b1a67bc](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/b1a67bc66e7c1342aeefd3d60d2597bff7236578))
+
+
+### Bug Fixes
+
+* **Alert:** update text styles ([c3742e3](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/c3742e36d1f59acec4766e458f56656d0f2147e8))
+* **Icon:** add missing 'arrival' icon (pull request [#11](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/issues/11)) ([afbd480](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/afbd4809d3aec214685286ec677361ff9a8af6e1))
+
 ### [3.0.5](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v3.0.4...v3.0.5) (2025-09-16)
 
 

package/icons/icons/arrival.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from 'react';
+const SvgArrival = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    color="currentColor"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M10.684 1.983a.83.83 0 0 1 .435.392l3.385 6.534 3.546 1.132a.83.83 0 0 1 .352.221l2.16 2.287c.193.195.515.613.595 1.16.044.3.014.645-.158.984-.17.334-.447.603-.796.812-.616.37-1.325.566-1.925.67a7.4 7.4 0 0 1-1.51.107 1 1 0 0 1-.174-.026L5.386 13.289a.83.83 0 0 1-.376-.217L1.466 9.53a.83.83 0 0 1-.241-.658l.412-5.027a.833.833 0 0 1 1.094-.723l2.225.742c.243.081.435.27.521.51l.68 1.903 1.527.43-.846-4.877A.833.833 0 0 1 7.965.912zm-.901 1.436-1.05-.413.819 4.72a.833.833 0 0 1-1.048.944L5.29 7.763a.83.83 0 0 1-.558-.521l-.688-1.926-.833-.278-.294 3.585 3.112 3.112 10.9 2.885c.241.005.633-.013 1.066-.088.491-.085.978-.232 1.35-.456a.7.7 0 0 0 .162-.13.4.4 0 0 0-.048-.115.6.6 0 0 0-.101-.13l-2.02-2.138-3.669-1.17a.83.83 0 0 1-.486-.411zM0 19.834c0-.46.373-.834.833-.834h20a.833.833 0 1 1 0 1.667h-20A.833.833 0 0 1 0 19.833"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgArrival;

package/icons/icons/index.ts

@@ -7,6 +7,7 @@ export const dynamicComponents = {
   airplane: dynamic(() => import('./airplane'), { ssr: false }),
   anchor: dynamic(() => import('./anchor'), { ssr: false }),
   'angle-tool': dynamic(() => import('./angle-tool'), { ssr: false }),
+  arrival: dynamic(() => import('./arrival'), { ssr: false }),
   'arrow-down': dynamic(() => import('./arrow-down'), { ssr: false }),
   'arrow-left': dynamic(() => import('./arrow-left'), { ssr: false }),
   'arrow-right': dynamic(() => import('./arrow-right'), { ssr: false }),

package/index.tsx

@@ -28,7 +28,6 @@ export * from './src/components/core/Skeleton';
 export * from './src/components/core/SwitchToggle';
 export * from './src/components/core/Tag';
 export * from './src/components/core/Tooltip';
-export * from './src/components/core/FavoriteButton';
 export * from './src/components/core/IconButton';
 export * from './src/components/core/InputField';
 export * from './src/components/core/Pagination';
@@ -49,7 +48,7 @@ export * from './src/components/core/TextButton';
 export * from './src/components/core/Toast';
 
 // Shared Components
-export * from './src/components/shared/NextFontMeinSchiffSansPro'; // @todo: Own NPM package
+export * from './src/components/shared/NextFontMeinSchiffSansPro'; // @revisit: Utils
 export * from './src/components/shared/UniversalCarousel';
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tui-cruises/mein-schiff-web-react-component-library",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "main": "./index.tsx",
   "types": "./index.tsx",
   "type": "module",

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

@@ -97,14 +97,14 @@ export const Alert: FC<AlertProps> = ({
       )}
 
       {(children || cta || (!headline && onClose)) && (
-        <div className={twJoin('flex', iconName && headline ? 'md:pl-8' : '')}>
+        <div className={twJoin('flex', iconName && headline ? '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',
+                    size === 'sm' ? 'text-sm' : 'text-base md:text-lg',
                   )}
                 >
                   {children}

package/src/components/core/Icon/Icon.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import { dynamicComponents as dynamicComponentsIcons } from '../../../../icons/icons';
 import type { ComponentType, SVGProps } from 'react';
 import { twJoin, twMerge } from 'tailwind-merge';

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

@@ -1,3 +1,4 @@
+'use client';
 import type { FC } from 'react';
 import { dynamicComponents as dynamicComponentsPictograms } from '../../../../icons/pictograms';
 import { twMerge } from 'tailwind-merge';

package/src/components/core/FavoriteButton/FavoriteButton.tsx

@@ -1,294 +0,0 @@
-'use client';
-
-import {
-  AnchorHTMLAttributes,
-  ButtonHTMLAttributes,
-  Dispatch,
-  forwardRef,
-  ForwardRefRenderFunction,
-  ReactNode,
-  SetStateAction,
-  useState,
-} from 'react';
-import { twMerge } from 'tailwind-merge';
-import { Icon } from '../../core/Icon';
-
-/**
- * Handler for click events, expected to manage active state toggling and possibly return a promise for async handling.
- */
-type OnClickHandler = (
-  active: boolean,
-) => void | boolean | Promise<void | boolean>;
-
-type CommonProps = {
-  className?: string;
-  /**
-   * The initial 'active' state of the component when it mounts.
-   *
-   * ```tsx
-   * <FavoriteButton defaultActive={true} />
-   * ```
-   */
-  defaultActive?: boolean;
-
-  /**
-   * A React node or a function that returns a React node.
-   *
-   * ```tsx
-   * <FavoriteButton>
-   *   <Icon name="eye-off" size="md" />
-   * </FavoriteButton>
-   * ```
-   *
-   * The function receives the current `active` state as a parameter,
-   * enabling the rendering of different content based on the state.
-   *
-   * ```tsx
-   * <FavoriteButton>
-   *   {(active) => (
-   *     <Icon name={active ? 'eye-off' : 'eye-empty'} size="md" />
-   *   )}
-   * </FavoriteButton>
-   * ```
-   *
-   */
-  children?: ReactNode | ((active: boolean) => ReactNode);
-};
-
-type PropsAsButton = CommonProps &
-  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children'> & {
-    as: 'button';
-
-    /**
-     * Callback triggered when the component is clicked.
-     *
-     * The handler receives a boolean argument indicating the next 'active' state.
-     * - If the handler returns a boolean, the component's active state will be set to the returned value.
-     * - If a Promise is returned, the component will wait for the Promise to resolve and use the resolved boolean value to update the active state.
-     *
-     * ```tsx
-     * const handleClick = (nextActiveState: boolean) => {
-     *   // Your handling logic here
-     *   return !nextActiveState; // Or return a promise that resolves to a boolean
-     * };
-     *
-     * <FavoriteButton onClick={handleClick} />
-     * ```
-     */
-    onClick?: OnClickHandler;
-  };
-
-type PropsAsAnchor = CommonProps &
-  AnchorHTMLAttributes<HTMLAnchorElement> & {
-    as: 'a';
-  };
-
-type Props = PropsAsButton | PropsAsAnchor;
-
-const createClickHandler = (
-  active: boolean,
-  setPending: Dispatch<SetStateAction<boolean | undefined>>,
-  setActive: Dispatch<SetStateAction<boolean>>,
-  onClick: OnClickHandler | undefined,
-) => {
-  return async () => {
-    if (!onClick) {
-      return;
-    }
-
-    setPending(true);
-
-    const nextActive = !active;
-
-    setActive(nextActive);
-
-    const returnValue = await onClick(nextActive);
-
-    setPending(false);
-
-    if (typeof returnValue !== 'boolean') {
-      return;
-    }
-
-    setActive(returnValue);
-  };
-};
-
-const renderDefaultIcon = (active: boolean) => {
-  if (active) {
-    return (
-      <Icon
-        name="heart-filled"
-        size="md"
-        className="fill-surface-primary-100 text-marine-high-emphasis"
-      />
-    );
-  }
-
-  return (
-    <>
-      <Icon name="heart" size="md" className="sm:group-hover:hidden" />
-      <Icon
-        name="heart-filled"
-        size="md"
-        className="hidden sm:group-hover:block sm:group-hover:fill-surface-secondary-100"
-      />
-    </>
-  );
-};
-
-const renderChildren = (
-  active: boolean,
-  children: Props['children'],
-): ReactNode => {
-  if (typeof children === 'undefined') {
-    return renderDefaultIcon(active);
-  }
-
-  if (typeof children === 'function') {
-    return children(active);
-  }
-
-  return children;
-};
-
-const FavoriteButtonRenderFunction: ForwardRefRenderFunction<
-  HTMLButtonElement | HTMLAnchorElement,
-  Props
-> = (props, ref?) => {
-  const {
-    className,
-    as = 'button',
-    defaultActive = false,
-    onClick,
-    children,
-    ...rest
-  } = props;
-
-  const [active, setActive] = useState(defaultActive);
-  const [pending, setPending] = useState<boolean>();
-
-  const handleClick =
-    as === 'a'
-      ? onClick
-      : createClickHandler(
-          active,
-          setPending,
-          setActive,
-          onClick as OnClickHandler | undefined,
-        );
-
-  const shouldAnimate = typeof pending !== 'undefined' && as !== 'a';
-  const shouldTransition = as !== 'a';
-
-  const elementClassList = [
-    'group inline-flex p-2.5 appearance-none rounded-full',
-    'focus:outline-none focus-visible:shadow-focus-state active:bg-surface-primary-40 disabled:pointer-events-none',
-    active
-      ? 'bg-surface-primary-80 text-marine-high-emphasis'
-      : 'text-marine-high-emphasis sm:hover:bg-surface-secondary-7 sm:hover:text-marine-high-emphasis',
-  ];
-
-  const iconWrapperClassList = [
-    shouldTransition && 'group-active:transition-transform',
-    shouldAnimate ? 'animate-[favorite-pulse_600ms_ease-in-out]' : '',
-    shouldTransition && !active
-      ? 'group-active:scale-[0.66] group-active:animate-none'
-      : '',
-  ];
-
-  const Element = as;
-
-  return (
-    <Element
-      className={twMerge(elementClassList.join(' '), className)}
-      onClick={handleClick}
-      disabled={pending}
-      ref={ref}
-      {...(rest as any)}
-    >
-      <div className={iconWrapperClassList.join(' ')}>
-        {renderChildren(active, children)}
-      </div>
-    </Element>
-  );
-};
-
-/**
- * `FavoriteButton` is a component, for creating interactive buttons, offering various customization options to fit into different use cases such as liking or favoriting items.
- *
- * ```tsx
- * const handleClick = (active) => alert(active ? 'Liked' : 'Unliked');
- * <FavoriteButton onClick={handleClick} />
- * ```
- *
- * With the above code, a `FavoriteButton` is rendered using default icons, and it logs the new active state upon being clicked.
- *
- * ## Available Props
- *
- * | Name | Type | Description |
- * |---|---|--------|
- * | `defaultActive`| `boolean` | Sets the initial active state of the component. |
- * | `onClick` | `OnClickHandler` | Handles click events and state transitions. |
- * | `as` | `"button"` \| `"a"`  | Determines the HTML element type. |
- * | `children` | `ReactNode` \| (active: boolean) => ReactNode | Supply your custom icon using children. |
- * | ...rest |  | Extra props which are forwarded to the element. |
- *
- * ## Icon Management
- *
- * Iconography within the `FavoriteButton` component is managed dynamically by adopting a strategy that employs render props. This allows you to have absolute control over how icons should appear across distinct states.
- *
- * ### Simple Custom Icon Rendering
- *
- * For simple use cases just provide an icon as the child of the favorite button.
- *
- * ```tsx
- * <FavoriteButton>
- *   <Icon name="eye-empty" size="md" />
- * </FavoriteButton>
- * ```
- *
- * ### Advanced Icon Handling and Styling with Render Props
- *
- * Utilize render props for straightforward and effective control over icon presentation and styling across different component states. By employing a function that takes the active state as an argument, you can precisely define icons and apply styles for both the active and inactive states dynamically. The active parameter allows for conditional rendering of icons and the application of styles as per requirements:
- *
- * ```tsx
- * // Icon based on state
- *
- * <FavoriteButton>
- *   {active => <Icon name={active ? 'eye-off' : 'eye-empty'} size="md" />}
- * </FavoriteButton>
- *
- * In the presented code snippet, the `FavoriteButton` renders a colored and filled airplane icon when in an active state. On the other hand, during an inactive state, it depicts the same airplane icon, modifying its color upon hover.
- *
- * Using render props in such a manner awards you a significant level of control over the management of icons and their respective styles, fostering subtle visual feedback in response to user interactions with the `FavoriteButton` component. This approach is particularly beneficial in situations that demand comprehensive customization and dynamic styling predicated upon component states, ensuring that your UI remains both dynamic and visually consistent.
- *
- * ## Handling Click Events with `onClick`
- *
- * Manage click events and synchronize the component’s active state with potential asynchronous actions like API calls via `onClick`:
- *
- * ```tsx
- * const handleClick = async (active) => {
- *   const serverResponse = await someAsyncAction();
- *   return serverResponse.liked;
- * };
- *
- * <FavoriteButton onClick={handleClick} />
- * ```
- *
- * Here, upon a user click, the component instantaneously toggles its state. Then, `someAsyncAction` communicates with a server and once the response is returned from the handler, the component ensures to align and represent this new state in the UI.
- *
- * ## Rendering as Anchor
- *
- * Using `FavoriteButton` as an anchor (`a`) element is straightforward:
- *
- * ```tsx
- * <FavoriteButton as="a" href="#" />
- * ```
- *
- * However, it's pivotal to note that when `FavoriteButton` is rendered as an anchor element (`as="a"`), it operates purely as a navigational link, devoid of internal state management or animations associated with state changes. It exists simply as a stylized link, diverting users to specified URLs without toggling between states or triggering animations on click events.
- */
-export const FavoriteButton = forwardRef<
-  HTMLButtonElement | HTMLAnchorElement,
-  Props
->(FavoriteButtonRenderFunction) as typeof FavoriteButtonRenderFunction;

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

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