@tui-cruises/mein-schiff-web-react-component-library 2.2.2 → 2.2.3

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.
 
+### [2.2.3](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.2.2...v2.2.3) (2025-07-21)
+
+
+### Features
+
+* add responsive sizes to Icons, Pictograms and IconButtons. Removed numeric size properties ([49704b69](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/commit/75ba4f03c80a43115e98c0d6c5cb0f913c824f1b))
+
 ### [2.2.2](https://bitbucket.org/yours_truly/tuic-mein-schiff-web-react-component-library/compare/v2.2.1...v2.2.2) (2025-07-18)
 
 

package/package.json

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

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

@@ -2,7 +2,12 @@
 
 import { dynamicComponents as dynamicComponentsIcons } from '../../../../icons/icons';
 import type { ComponentType, SVGProps } from 'react';
-import { twJoin } from 'tailwind-merge';
+import { twJoin, twMerge } from 'tailwind-merge';
+import {
+  ResponsiveValueClassMap,
+  getClassNamesFromMap,
+  ResponsiveValue,
+} from '../../../helpers/responsive-property';
 
 // Type for local icons
 type DynamicComponentIconName = keyof typeof dynamicComponentsIcons;
@@ -10,6 +15,15 @@ type DynamicComponentIconName = keyof typeof dynamicComponentsIcons;
 // Union of both types to create a comprehensive IconName type
 export type IconName = DynamicComponentIconName;
 
+/**
+ * The size of the icon.
+ * 'xs' (16x16), 'sm' (20x20),
+ * 'md' (24x24), 'lg' (32x32).
+ *
+ * @default 'md'
+ */
+type IconSize = 'xs' | 'sm' | 'md' | 'lg';
+
 export type IconProps = {
   /**
    * Additional TailwindCSS utilities can be added with this prop.
@@ -27,56 +41,90 @@ export type IconProps = {
    *
    * @default 'md'
    */
-  size?: number | 'xs' | 'sm' | 'md' | 'lg';
+  size?: ResponsiveValue<IconSize>;
 };
 
 /**
- *  Component to display an icon, based on the [local icon library](/docs/foundation-icons-pictograms--docs).
+ *  Component to display an icon, based on the [Iconoir icon library](https://iconoir.com/)
+ *  or a custom local icon library.
  *
  *  @component
  *  @param {IconProps} props - The props for the Icon component.
  *  @returns {JSX.Element | null} The rendered icon component or null if the icon is not found.
  */
 const Icon = (props: IconProps) => {
-  const { className, name, size = 'md' } = props;
+  const { name, size } = props;
 
   const IconComponent = getIconComponent(name);
   if (!IconComponent) {
     return null;
   }
 
-  const iconSize = getIconSize(size);
+  let classNameContainsSize = ['size-', 'h-', 'w-'].some(prefix =>
+    props.className?.includes(prefix),
+  );
 
   return (
-    <IconComponent
-      className={twJoin('pointer-events-none', className)}
-      width={iconSize}
-      height={iconSize}
-    />
+    <span
+      className={twMerge(
+        'block',
+        !classNameContainsSize && getClassNamesFromMap(sizeCssMap, size, 'md'),
+        props.className,
+      )}
+    >
+      <IconComponent
+        className={twJoin(
+          'pointer-events-none block size-full',
+          name === 'loading' && 'animate-spin',
+        )}
+      />
+    </span>
   );
 };
 
-/**
- * Helper function to get the icon size in pixels.
- *
- * @param {NonNullable<IconProps['size']>} size - The size prop, either a number or a predefined size string.
- * @returns {number} The size in pixels.
- */
-const getIconSize = (size: NonNullable<IconProps['size']>) => {
-  if (typeof size === 'number') {
-    return size;
-  }
-
-  switch (size) {
-    case 'xs':
-      return 16;
-    case 'sm':
-      return 20;
-    case 'lg':
-      return 32;
-    default:
-      return 24;
-  }
+const sizeCssMap: ResponsiveValueClassMap<IconSize> = {
+  initial: {
+    xs: 'size-[16px]',
+    sm: 'size-[20px]',
+    md: 'size-[24px]',
+    lg: 'size-[32px]',
+  },
+  xs: {
+    xs: 'xs:size-[16px]',
+    sm: 'xs:size-[20px]',
+    md: 'xs:size-[24px]',
+    lg: 'xs:size-[32px]',
+  },
+  sm: {
+    xs: 'sm:size-[16px]',
+    sm: 'sm:size-[20px]',
+    md: 'sm:size-[24px]',
+    lg: 'sm:size-[32px]',
+  },
+  md: {
+    xs: 'md:size-[16px]',
+    sm: 'md:size-[20px]',
+    md: 'md:size-[24px]',
+    lg: 'md:size-[32px]',
+  },
+  lg: {
+    xs: 'lg:size-[16px]',
+    sm: 'lg:size-[20px]',
+    md: 'lg:size-[24px]',
+    lg: 'lg:size-[32px]',
+  },
+  xl: {
+    xs: 'xl:size-[16px]',
+    sm: 'xl:size-[20px]',
+    md: 'xl:size-[24px]',
+    lg: 'xl:size-[32px]',
+  },
+  xxl: {
+    xs: '2xl:size-[16px]',
+    sm: '2xl:size-[20px]',
+    md: '2xl:size-[24px]',
+    lg: '2xl:size-[32px]',
+  },
 };
 
 /**

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

@@ -9,7 +9,11 @@ import {
 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';
+import {
+  getClassNamesFromMap,
+  ResponsiveValue,
+  ResponsiveValueClassMap,
+} from '../../../helpers/responsive-property';
 
 type CommonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   asChild?: boolean;
@@ -18,14 +22,18 @@ type CommonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   on?: 'white' | 'gray' | 'ocean' | 'image';
 };
 
+type RegularSize = 'sm' | 'md' | 'lg';
+type GhostButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+
 export type IconButtonPrimaryAndSecondaryProps = CommonProps & {
   variant?: 'primary' | 'secondary';
-  size?: 'sm' | 'md' | 'lg';
+  /** The button's size. Defaults to `sm`. */
+  size?: ResponsiveValue<RegularSize>;
 };
 
 export type IconButtonGhostProps = CommonProps & {
   variant: 'ghost';
-  size?: 'xs' | 'sm' | 'md' | 'lg';
+  size?: ResponsiveValue<GhostButtonSize>;
 };
 
 export type IconButtonProps =
@@ -37,7 +45,7 @@ const IconButtonRenderFunction: ForwardRefRenderFunction<
   IconButtonProps
 > = (props, ref) => {
   const {
-    size = 'md',
+    size,
     variant = 'primary',
     on = 'white',
     iconName,
@@ -47,20 +55,10 @@ const IconButtonRenderFunction: ForwardRefRenderFunction<
     ...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-all',
 
-    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
+    getClassNamesFromMap(iconCssMap, size, 'md'),
 
     // Variants
     variant === 'primary' && [
@@ -130,20 +128,17 @@ const IconButtonRenderFunction: ForwardRefRenderFunction<
         'focus:outline-none',
         'disabled:!pointer-events-none disabled:text-secondary-marine-48',
 
-        size === 'md' ? 'text-base' : 'text-sm',
+        getClassNamesFromMap(buttonCssMap, size, 'md'),
         variant !== 'ghost' && ['gap-2'],
-        variant === 'ghost' && [
-          size === 'xs' && 'gap-0.5',
-          size === 'sm' && 'gap-1',
-          size === 'md' && 'gap-1',
-        ],
+        variant === 'ghost' &&
+          getClassNamesFromMap(ghostButtonCssMap, size, 'md'),
         iconPosition === 'right' && 'flex-row-reverse',
 
         rest.className,
       )}
     >
       <div className={buttonClassNames}>
-        <Icon name={iconName} size={resolvedIconSize} />
+        <Icon name={iconName} size={size} />
       </div>
 
       <Slottable>
@@ -159,6 +154,80 @@ const IconButtonRenderFunction: ForwardRefRenderFunction<
   );
 };
 
+/**
+ * The css map for the responsive value css used in icon.
+ */
+const iconCssMap: ResponsiveValueClassMap<GhostButtonSize> = {
+  initial: {
+    xs: 'p-0.5',
+    sm: 'p-2',
+    md: 'p-3',
+    lg: undefined,
+  },
+  xs: {
+    xs: 'xs:p-0.5',
+    sm: 'xs:p-2',
+    md: 'xs:p-3',
+    lg: undefined,
+  },
+  sm: {
+    xs: 'sm:p-0.5',
+    sm: 'sm:p-2',
+    md: 'sm:p-3',
+    lg: undefined,
+  },
+  md: {
+    xs: 'md:p-0.5',
+    sm: 'md:p-2',
+    md: 'md:p-3',
+    lg: undefined,
+  },
+  lg: {
+    xs: 'lg:p-0.5',
+    sm: 'lg:p-2',
+    md: 'lg:p-3',
+    lg: undefined,
+  },
+  xl: {
+    xs: 'xl:p-0.5',
+    sm: 'xl:p-2',
+    md: 'xl:p-3',
+    lg: undefined,
+  },
+  xxl: {
+    xs: '2xl:p-0.5',
+    sm: '2xl:p-2',
+    md: '2xl:p-3',
+    lg: undefined,
+  },
+};
+
+/**
+ * The css map for the responsive value css used in button.
+ */
+const buttonCssMap: ResponsiveValueClassMap<GhostButtonSize> = {
+  initial: size => (size === 'md' ? 'text-base' : 'text-sm'),
+  xs: size => (size === 'md' ? 'xs:text-base' : 'xs:text-sm'),
+  sm: size => (size === 'md' ? 'sm:text-base' : 'sm:text-sm'),
+  md: size => (size === 'md' ? 'md:text-base' : 'md:text-sm'),
+  lg: size => (size === 'md' ? 'lg:text-base' : 'lg:text-sm'),
+  xl: size => (size === 'md' ? 'xl:text-base' : 'xl:text-sm'),
+  xxl: size => (size === 'md' ? '2xl:text-base' : '2xl:text-sm'),
+};
+
+/**
+ * The css map for the responsive value css used in the ghost button variant.
+ */
+const ghostButtonCssMap: ResponsiveValueClassMap<GhostButtonSize> = {
+  initial: { xs: 'gap-0.5', sm: 'gap-1', md: 'gap-1', lg: undefined },
+  xs: { xs: 'xs:gap-0.5', sm: 'xs:gap-1', md: 'xs:gap-1', lg: undefined },
+  sm: { xs: 'sm:gap-0.5', sm: 'sm:gap-1', md: 'sm:gap-1', lg: undefined },
+  md: { xs: 'md:gap-0.5', sm: 'md:gap-1', md: 'md:gap-1', lg: undefined },
+  lg: { xs: 'lg:gap-0.5', sm: 'lg:gap-1', md: 'lg:gap-1', lg: undefined },
+  xl: { xs: 'xl:gap-0.5', sm: 'xl:gap-1', md: 'xl:gap-1', lg: undefined },
+  xxl: { xs: '2xl:gap-0.5', sm: '2xl:gap-1', md: '2xl:gap-1', lg: undefined },
+};
+
 /**
  * IconButton is a simple round button component, displaying one icon with an optional label.
  *

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

@@ -1,6 +1,11 @@
 import type { FC } from 'react';
 import { dynamicComponents as dynamicComponentsPictograms } from '../../../../icons/pictograms';
 import { twMerge } from 'tailwind-merge';
+import {
+    getClassNamesFromMap,
+    ResponsiveValue,
+    ResponsiveValueClassMap,
+} from '../../../helpers/responsive-property';
 
 type CollectionPictograms = typeof dynamicComponentsPictograms;
 
@@ -8,58 +13,87 @@ 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.
+ * The size of the icon.
+ * 'sm' (40x40),
+ * 'md' (60x60)
+ *
+ * @default 'sm'
  */
-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',
-      };
-  }
+type PictogramSize = 'sm' | 'md';
+
+export type PictogramProps = {
+    className?: string;
+    name: PictogramName;
+    size?: ResponsiveValue<PictogramSize>;
 };
 
 /**
  * Renders the icon.
  */
 const renderIcon = (
-  Element: IconComponent,
-  wrapperAttrs: Record<string, string>,
-  svgAttrs?: Record<string, string>,
+    Element: IconComponent,
+    size: PictogramProps['size'],
+    wrapperAttrs: Record<string, string>,
 ) => {
-  const className = twMerge('inline-block', wrapperAttrs.className);
+    let classNameContainsSize = ['size-', 'h-', 'w-'].some(prefix =>
+        wrapperAttrs.className?.includes(prefix),
+    );
+
+    const className = twMerge(
+        'inline-block',
+        !classNameContainsSize && getClassNamesFromMap(sizeCssMap, size, 'sm'),
+        wrapperAttrs.className,
+    );
 
-  return (
-    <div {...wrapperAttrs} className={className}>
-      <Element {...svgAttrs} />
-    </div>
-  );
+    return (
+        <div {...wrapperAttrs} className={className}>
+            <Element className="block size-full" viewBox="0 0 40 40" />
+        </div>
+    );
 };
 
 /**
- * Component to display an pictogram, based on the [local pictogram library](/docs/foundation-icons-pictograms--docs).
+ * Renders a pictogram with the specified size and icon.
  */
-const Pictogram: FC<PictogramProps> = ({ size = 'sm', name, ...rest }) => {
-  const Element = dynamicComponentsPictograms[name];
-  if (!Element) {
-    return null;
-  }
+const Pictogram: FC<PictogramProps> = ({ size, name, ...rest }) => {
+    const Element = dynamicComponentsPictograms[name];
+    if (!Element) {
+        return null;
+    }
 
-  const { width, height } = getSizeAttributes(size);
+    return renderIcon(Element, size, rest);
+};
 
-  return renderIcon(Element, rest, { width, height, viewBox: '0 0 40 40' });
+const sizeCssMap: ResponsiveValueClassMap<PictogramSize> = {
+    initial: {
+        sm: 'size-[40px]',
+        md: 'size-[60px]',
+    },
+    xs: {
+        sm: 'xs:size-[40px]',
+        md: 'xs:size-[60px]',
+    },
+    sm: {
+        sm: 'sm:size-[40px]',
+        md: 'sm:size-[60px]',
+    },
+    md: {
+        sm: 'md:size-[40px]',
+        md: 'md:size-[60px]',
+    },
+    lg: {
+        sm: 'lg:size-[40px]',
+        md: 'lg:size-[60px]',
+    },
+    xl: {
+        sm: 'xl:size-[40px]',
+        md: 'xl:size-[60px]',
+    },
+    xxl: {
+        sm: '2xl:size-[40px]',
+        md: '2xl:size-[60px]',
+    },
 };
 
 Pictogram.displayName = 'Pictogram';

package/src/helpers/responsive-property.ts

@@ -4,21 +4,42 @@ import { ScreenName } from './screen';
 
 export type ResponsiveValue<T> = T | [T, ScreenNameIndexedValues<T>?];
 
+type ScreenNameWithInitial = ScreenName | 'initial';
+
 type ScreenNameIndexedValues<T> = {
   [screenName in ScreenName]?: T;
 };
 
+type OptionalScreenNameIndexedValuesWithInitial<T> = {
+  [screenName in ScreenNameWithInitial]: T | undefined;
+};
+
 type ScreenNameIndexedValuesWithInitial<T> = {
-  [screenName in ScreenName | 'initial']?: T;
+  [screenName in ScreenNameWithInitial]: T;
 };
 
+// export type ResponsiveValueClassMap<T extends string | number> = {
+//   [key in ScreenNameWithInitial]?: Record<T, string | undefined> | ((value: T) => string | undefined)
+// }
+
+/**
+ * Responsive value class map.
+ * Provides a mapping for each screen name to a responsive value or a function that resolves the value.
+ * You can use this to create responsive styles based on the screen size when you want to avoid any hook based solutions.
+ * This is a more complex approach than using a simple responsive value, but it enables server side rendering and avoids any layout shifts based on initial screen name resolution.
+ */
+export type ResponsiveValueClassMap<T extends string | number> = Record<
+  ScreenNameWithInitial,
+  Record<T, string | undefined> | ((value: T) => string | undefined)
+>;
+
 /**
  * Resolves given responsive property value to screen name indexed values including an initial key for the initial screen.
  */
 export const getScreenIndexedResponsiveValue = <T extends any = any>(
   propValue: ResponsiveValue<T> | undefined,
   defaultValue: T,
-): ScreenNameIndexedValuesWithInitial<T> => {
+): OptionalScreenNameIndexedValuesWithInitial<T> => {
   if (typeof propValue === 'undefined' || !Array.isArray(propValue)) {
     return {
       initial: propValue ?? defaultValue,
@@ -64,29 +85,33 @@ export const getScreenIndexedResponsiveValueForEachScreen = <
 >(
   propValue: ResponsiveValue<T> | undefined,
   defaultValue: T,
-): ScreenNameIndexedValues<T> => {
+): ScreenNameIndexedValuesWithInitial<T> => {
   const screenNameIndexedValues = getScreenIndexedResponsiveValue(
     propValue,
     defaultValue,
   );
 
-  const screens: Record<ScreenName, T | undefined> = {
-    xs: screenNameIndexedValues.xs,
-    sm: screenNameIndexedValues.sm,
-    md: screenNameIndexedValues.md,
-    lg: screenNameIndexedValues.lg,
-    xl: screenNameIndexedValues.xl,
-    xxl: screenNameIndexedValues.xxl,
+  const screens: Record<ScreenNameWithInitial, T | undefined> = {
+    ...screenNameIndexedValues,
   };
 
-  screens.xs = screens.xs ?? screenNameIndexedValues.initial;
+  screens.initial = screens.initial ?? defaultValue;
+  screens.xs = screens.xs ?? screens.initial;
   screens.sm = screens.sm ?? screens.xs;
   screens.md = screens.md ?? screens.sm;
   screens.lg = screens.lg ?? screens.md;
   screens.xl = screens.xl ?? screens.lg;
   screens.xxl = screens.xxl ?? screens.xl;
 
-  return screens;
+  return {
+    initial: screens.initial ?? defaultValue,
+    xs: screens.xs ?? screens.initial,
+    sm: screens.sm ?? screens.xs,
+    md: screens.md ?? screens.sm,
+    lg: screens.lg ?? screens.md,
+    xl: screens.xl ?? screens.lg,
+    xxl: screens.xxl ?? screens.xl,
+  };
 };
 
 /**
@@ -116,3 +141,44 @@ export const getResponsiveValue = <T extends any = any>(
 
   return propValue[0];
 };
+
+/**
+ * Generates css for each responsive value based on the rules from the given screen/value map.
+ * See the `Icon` component for a simple example of how to use this or the `IconButton` component for a more complex example.
+ */
+export const getClassNamesFromMap = <T extends string | number = string>(
+  map: ResponsiveValueClassMap<T>,
+  value: ResponsiveValue<T> | undefined,
+  defaultValue: T,
+): string => {
+  let screenIndexed = getScreenIndexedResponsiveValue<T>(value, defaultValue);
+
+  let classList = Object.entries(screenIndexed).reduce<string[]>(
+    (list, [screenArg, value]) => {
+      if (typeof value === 'undefined') {
+        return list;
+      }
+
+      let screen = screenArg as keyof typeof screenIndexed;
+      let resolvedScreenIndexedValues = map[screen];
+
+      if (typeof resolvedScreenIndexedValues === 'undefined') {
+        return list;
+      }
+
+      let screenValue =
+        typeof resolvedScreenIndexedValues === 'function'
+          ? resolvedScreenIndexedValues(value)
+          : resolvedScreenIndexedValues?.[value];
+
+      if (typeof screenValue === 'undefined') {
+        return list;
+      }
+
+      return [...list, screenValue];
+    },
+    [],
+  );
+
+  return classList.join(' ');
+};