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

package/src/components/core/PasswordField/PasswordField.tsx

@@ -0,0 +1,187 @@
+'use client';
+
+import {
+  ChangeEventHandler,
+  FocusEventHandler,
+  forwardRef,
+  ForwardRefRenderFunction,
+  MouseEventHandler,
+  ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  InputFieldInput,
+  InputFieldInputProps,
+} from '../InputField/InputFieldInput';
+import { InputFieldError } from '../InputField/InputFieldError';
+import { InputFieldNote } from '../InputField/InputFieldNote';
+import { InputFieldLabel } from '../InputField/InputFieldLabel';
+import { PasswordRequirementsList } from './PasswordFieldRequirementsList';
+import { Icon } from '../../core/Icon';
+import { twJoin } from 'tailwind-merge';
+
+type Requirement = {
+  match: (value: string) => boolean;
+  message: string;
+};
+
+export type PasswordFieldProps = 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';
+  requirements?: Requirement[];
+  requirementsHeadline?: string;
+};
+
+const InputFieldRenderFunction: ForwardRefRenderFunction<
+  HTMLInputElement,
+  PasswordFieldProps
+> = (props, forwardedRef) => {
+  let {
+    label,
+    note,
+    error,
+    required,
+    requirements: requirementsArg = [],
+    requirementsHeadline,
+    onChange,
+    onFocus,
+    onBlur,
+    ...attrs
+  } = props;
+
+  let [showRequirements, setShowRequirements] = useState(false);
+  let [labelMouseDown, setLabelMouseDown] = useState(false);
+  let [showClearText, setShowClearText] = useState(false);
+  let [value, setValue] = useState(
+    (attrs.value ?? attrs.defaultValue ?? '').toString(),
+  );
+
+  let inputRef = useRef<HTMLInputElement>(null);
+
+  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+    forwardedRef,
+    () => inputRef.current,
+  );
+
+  let requirements = useMemo(() => {
+    return requirementsArg.map(({ match, message }) => ({
+      fulfilled: value === '' ? undefined : match(value),
+      message,
+    }));
+  }, [requirementsArg, value]);
+
+  let firstRequirementErrorMessage = useMemo(() => {
+    return requirements.find(({ fulfilled }) => fulfilled === false)?.message;
+  }, [requirements]);
+
+  let handleChange: ChangeEventHandler<HTMLInputElement> = ev => {
+    setValue(ev.currentTarget.value);
+    onChange?.(ev);
+  };
+
+  let handleFocus: FocusEventHandler<HTMLInputElement> = ev => {
+    setShowRequirements(true);
+
+    setLabelMouseDown(false);
+
+    if (onFocus) {
+      onFocus(ev);
+    }
+  };
+
+  let handleBlur: FocusEventHandler<HTMLInputElement> = ev => {
+    if (!labelMouseDown) {
+      setShowRequirements(false);
+    }
+
+    setLabelMouseDown(false);
+
+    if (onBlur) {
+      onBlur(ev);
+    }
+  };
+
+  let handleClearTextButtonClick = () => {
+    setShowClearText(prev => !prev);
+    inputRef.current?.focus();
+  };
+
+  useEffect(() => {
+    inputRef.current?.setCustomValidity(
+      error ?? firstRequirementErrorMessage ?? '',
+    );
+  }, [error, firstRequirementErrorMessage]);
+
+  return (
+    <div className="block space-y-1">
+      <label
+        className="block space-y-1"
+        onMouseDown={() => setLabelMouseDown(true)}
+      >
+        {label && (
+          <InputFieldLabel asChild>
+            <div>
+              {label}
+              {required ? '*' : ''}
+            </div>
+          </InputFieldLabel>
+        )}
+        <div className="relative z-[1]">
+          <div className="relative">
+            <InputFieldInput
+              {...attrs}
+              required={typeof required === 'boolean' ? required : undefined}
+              type={showClearText ? 'text' : 'password'}
+              onChange={handleChange}
+              ref={inputRef}
+              className="pr-14 ms-reveal-hidden"
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+            />
+            <button
+              className="absolute bottom-0 right-0 top-0 block appearance-none rounded-r-md border-none px-4 focus:outline-none focus-visible:shadow-focus-state"
+              onClick={handleClearTextButtonClick}
+              type="button"
+            >
+              <Icon name={showClearText ? 'eye-off' : 'eye-empty'} size="md" />
+            </button>
+          </div>
+
+          {attrs.disabled !== true &&
+            attrs.readOnly !== true &&
+            requirements.length > 0 && (
+              <PasswordRequirementsList
+                headline={requirementsHeadline}
+                requirements={requirements}
+                className={twJoin(
+                  'absolute left-0 right-0 -z-[1] translate-y-full',
+                  'transition-all duration-200',
+                  !showRequirements && 'pointer-events-none bottom-5 opacity-0',
+                  showRequirements && 'bottom-1.5 opacity-100',
+                )}
+              />
+            )}
+        </div>
+        {!error && note && <InputFieldNote>{note}</InputFieldNote>}
+      </label>
+
+      {error && <InputFieldError>{error}</InputFieldError>}
+    </div>
+  );
+};
+
+export const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
+  InputFieldRenderFunction,
+);

package/src/components/core/PasswordField/PasswordFieldRequirementsList.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import {
+  FC,
+  forwardRef,
+  ForwardRefRenderFunction,
+  HTMLAttributes,
+  ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import {
+  InputFieldInput,
+  InputFieldInputProps,
+} from '../InputField/InputFieldInput';
+import { InputFieldError } from '../InputField/InputFieldError';
+import { InputFieldNote } from '../InputField/InputFieldNote';
+import { InputFieldLabel } from '../InputField/InputFieldLabel';
+import { InputFieldProps } from '../InputField';
+import { Icon, IconName } from '../../core/Icon';
+import { twJoin } from 'tailwind-merge';
+
+export type RequirementsListRequirement = {
+  fulfilled?: boolean;
+  message: string;
+};
+
+export type RequirementsListProps = HTMLAttributes<HTMLDivElement> & {
+  requirements: RequirementsListRequirement[];
+  headline?: string;
+};
+
+export const PasswordRequirementsList: FC<RequirementsListProps> = ({
+  requirements,
+  headline,
+  ...attrs
+}) => {
+  return (
+    <div
+      {...attrs}
+      className={twJoin(
+        'space-y-2 rounded-b-md border border-stroke-secondary-40 bg-surface-white p-4 text-sm text-marine-medium-emphasis',
+        attrs.className,
+      )}
+    >
+      {headline && <div className="font-semibold">{headline}</div>}
+      <ul className="space-y-1">
+        {requirements.map(({ fulfilled, message }, idx) => (
+          <li
+            key={idx}
+            className={twJoin(
+              'flex items-center gap-1',
+              fulfilled === false && 'text-error-100',
+            )}
+          >
+            <Icon
+              name={getIconName(fulfilled)}
+              size="xs"
+              className={twJoin(
+                fulfilled === true && 'text-on-surface-feedback-success',
+              )}
+            />
+            {message}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+const getIconName = (fulfilled: undefined | boolean): IconName => {
+  if (typeof fulfilled === 'undefined') {
+    return 'point';
+  }
+
+  return fulfilled ? 'check' : 'cancel';
+};

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

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

package/src/components/core/PhoneNumberInput/PhoneNumberInput.tsx

@@ -0,0 +1,201 @@
+'use client';
+
+import { InputHTMLAttributes, useState } from 'react';
+import { Icon } from '../../core/Icon';
+import * as Form from '@radix-ui/react-form';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import CountryFlag from 'react-country-flag';
+import { ForwardRefRenderFunction, forwardRef } from 'react';
+import {
+  PhoneNumberCountry,
+  getPhoneNumberCountries,
+  getPhoneNumberCountry,
+  getDefaultPhoneNumberCountry,
+  guessPhoneNumberCountryFromPhoneNumber,
+} from '@tuic/lib/src/data';
+import { CountryCode, parsePhoneNumber } from 'libphonenumber-js';
+
+// Props for the PhoneNumberInput component
+type PhoneNumberInputProps = InputHTMLAttributes<HTMLInputElement> & {
+  countries?: PhoneNumberCountry[];
+  defaultCountryCode?: string;
+  invalid?: boolean;
+};
+
+/**
+ * Returns the default country based on given defaultValue or defaultCountryCode.
+ */
+const getDefaultCountry = (
+  defaultCountryCode: string,
+  defaultValue: PhoneNumberInputProps['defaultValue'],
+) => {
+  const valueAsString = defaultValue?.toString() ?? '';
+
+  if (valueAsString !== '') {
+    const countryFromPhoneNumber =
+      guessPhoneNumberCountryFromPhoneNumber(valueAsString);
+
+    if (countryFromPhoneNumber) {
+      return countryFromPhoneNumber;
+    }
+  }
+
+  return (
+    getPhoneNumberCountry(defaultCountryCode) ?? getDefaultPhoneNumberCountry()
+  );
+};
+
+/**
+ * Formats given user typed number to a E.164 number dialed from given country.
+ */
+const formatNumber = (
+  country: PhoneNumberCountry['code'],
+  typedNumber: string,
+) => {
+  if (typedNumber === '') {
+    return '';
+  }
+
+  try {
+    const phoneNumber = parsePhoneNumber(typedNumber, country as CountryCode);
+
+    if (phoneNumber.number) {
+      return phoneNumber.number;
+    }
+  } catch (e) {}
+
+  const phoneNumberCountry = getPhoneNumberCountry(country);
+
+  if (!phoneNumberCountry) {
+    return typedNumber;
+  }
+
+  return `${phoneNumberCountry.dialCode} ${typedNumber}`;
+};
+
+// PhoneNumberInput render function
+const PhoneNumberInputRenderFunction: ForwardRefRenderFunction<
+  HTMLDivElement,
+  PhoneNumberInputProps
+> = (props, ref) => {
+  const {
+    countries = getPhoneNumberCountries(),
+    defaultCountryCode = 'DE',
+    invalid = false,
+    ...attrs
+  } = props;
+
+  const defaultCountry = getDefaultCountry(
+    defaultCountryCode,
+    props.defaultValue,
+  );
+
+  const [typedInNumber, setTypedInNumber] = useState(
+    props.defaultValue
+      ?.toString()
+      .substring(defaultCountry.dialCode.length)
+      .trim() || '',
+  );
+
+  const [selectedCountryCode, setSelectedCountryCode] = useState<string>(
+    defaultCountry.code,
+  );
+
+  const selectedCountryDialCode =
+    countries.find(country => country.code === selectedCountryCode)?.dialCode ||
+    '';
+
+  const handleCountryChange = (value: string) => {
+    setSelectedCountryCode(value);
+    const newCountryDialCode =
+      countries.find(country => country.code === value)?.dialCode || '';
+    setTypedInNumber('');
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const fullNumber = event.target.value;
+    const justNumber = fullNumber.replace(selectedCountryDialCode, '').trim();
+    setTypedInNumber(justNumber);
+  };
+
+  const inputValue = `${selectedCountryDialCode} ${typedInNumber}`;
+
+  return (
+    <div
+      ref={ref}
+      data-invalid={invalid ? 'true' : undefined}
+      className="flex w-full items-center overflow-hidden rounded-md border border-stroke-secondary-40 bg-surface-white p-1 text-sm text-marine-high-emphasis focus-within:shadow-focus-state data-[invalid]:border-stroke-error-100"
+    >
+      <SelectPrimitive.Root
+        value={selectedCountryCode}
+        onValueChange={handleCountryChange}
+      >
+        <SelectPrimitive.Trigger className="z-[1] flex items-center gap-1 rounded-md bg-surface-secondary-10 p-3 focus:outline-none focus-visible:shadow-focus-state">
+          <CountryFlag
+            svg
+            countryCode={selectedCountryCode}
+            className="hidden !h-auto rounded-sm text-[1.25rem]"
+          />
+          <SelectPrimitive.Value />
+          <Icon
+            name="nav-arrow-down"
+            size="md"
+            className="text-marine-high-emphasis"
+          />
+        </SelectPrimitive.Trigger>
+        <SelectPrimitive.Portal>
+          <SelectPrimitive.Content className="z-[9999] overflow-hidden rounded-md border border-stroke-secondary-40 bg-surface-white text-marine-high-emphasis drop-shadow-md">
+            <SelectPrimitive.Viewport className="p-1">
+              {countries.map(country => (
+                <SelectPrimitive.Item
+                  key={country.code}
+                  value={country.code}
+                  className="flex cursor-pointer items-center gap-1 p-3 focus:outline-none focus-visible:bg-surface-secondary-10 focus-visible:shadow-focus-state"
+                >
+                  <CountryFlag
+                    svg
+                    countryCode={country.code}
+                    className="hidden !h-auto rounded-sm text-[1.25rem]"
+                  />
+                  <SelectPrimitive.ItemText>
+                    {country.dialCode}
+                  </SelectPrimitive.ItemText>
+                </SelectPrimitive.Item>
+              ))}
+            </SelectPrimitive.Viewport>
+          </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+      </SelectPrimitive.Root>
+      <input
+        type="tel"
+        className="flex-1 p-3 focus:outline-none"
+        value={inputValue}
+        onChange={handleChange}
+      />
+      <Form.Control type="tel" asChild>
+        <input type="hidden" {...attrs} defaultValue={inputValue} />
+      </Form.Control>
+    </div>
+  );
+};
+
+/**
+ * `PhoneNumberInput` is a component that renders a phone number input with a country code select dropdown.
+ *
+ * ## Props
+ *
+ * The `PhoneNumberInput` component accepts the following properties:
+ *
+ * - `customCountries`: Optional custom array of country objects to override the default list. Each object should contain `code`, `dialCode` and `label`.
+ * - `onCountryChange`: Optional callback function that is called when a new country is selected. It receives the dial code of the selected country as an argument.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * <PhoneNumberInput defaultCountryCode="DE" />
+ * ```
+ */
+export const PhoneNumberInput = forwardRef<
+  HTMLDivElement,
+  PhoneNumberInputProps
+>(PhoneNumberInputRenderFunction);

package/src/components/core/PhoneNumberInput/countries.json

@@ -0,0 +1,242 @@
+[
+  {
+    "code": "AL",
+    "dialCode": "+355",
+    "label": "Shqipëri"
+  },
+  {
+    "code": "AD",
+    "dialCode": "+376",
+    "label": "Andorra"
+  },
+  {
+    "code": "AT",
+    "dialCode": "+43",
+    "label": "Österreich"
+  },
+  {
+    "code": "BY",
+    "dialCode": "+375",
+    "label": "Беларусь"
+  },
+  {
+    "code": "BE",
+    "dialCode": "+32",
+    "label": "België/Belgique/Belgien"
+  },
+  {
+    "code": "BA",
+    "dialCode": "+387",
+    "label": "Bosna i Hercegovina"
+  },
+  {
+    "code": "BG",
+    "dialCode": "+359",
+    "label": "България"
+  },
+  {
+    "code": "HR",
+    "dialCode": "+385",
+    "label": "Hrvatska"
+  },
+  {
+    "code": "CY",
+    "dialCode": "+357",
+    "label": "Κύπρος/Kıbrıs"
+  },
+  {
+    "code": "CZ",
+    "dialCode": "+420",
+    "label": "Česká republika"
+  },
+  {
+    "code": "DK",
+    "dialCode": "+45",
+    "label": "Danmark"
+  },
+  {
+    "code": "EE",
+    "dialCode": "+372",
+    "label": "Eesti"
+  },
+  {
+    "code": "FO",
+    "dialCode": "+298",
+    "label": "Føroyar"
+  },
+  {
+    "code": "FI",
+    "dialCode": "+358",
+    "label": "Suomi"
+  },
+  {
+    "code": "FR",
+    "dialCode": "+33",
+    "label": "France"
+  },
+  {
+    "code": "DE",
+    "dialCode": "+49",
+    "label": "Deutschland"
+  },
+  {
+    "code": "GI",
+    "dialCode": "+350",
+    "label": "Gibraltar"
+  },
+  {
+    "code": "GR",
+    "dialCode": "+30",
+    "label": "Ελλάδα"
+  },
+  {
+    "code": "HU",
+    "dialCode": "+36",
+    "label": "Magyarország"
+  },
+  {
+    "code": "IS",
+    "dialCode": "+354",
+    "label": "Ísland"
+  },
+  {
+    "code": "IE",
+    "dialCode": "+353",
+    "label": "Éire/Ireland"
+  },
+  {
+    "code": "IT",
+    "dialCode": "+39",
+    "label": "Italia"
+  },
+  {
+    "code": "XK",
+    "dialCode": "+383",
+    "label": "Kosovë/Kosovo"
+  },
+  {
+    "code": "LV",
+    "dialCode": "+371",
+    "label": "Latvija"
+  },
+  {
+    "code": "LI",
+    "dialCode": "+423",
+    "label": "Liechtenstein"
+  },
+  {
+    "code": "LT",
+    "dialCode": "+370",
+    "label": "Lietuva"
+  },
+  {
+    "code": "LU",
+    "dialCode": "+352",
+    "label": "Luxembourg/Lëtzebuerg"
+  },
+  {
+    "code": "MT",
+    "dialCode": "+356",
+    "label": "Malta"
+  },
+  {
+    "code": "MD",
+    "dialCode": "+373",
+    "label": "Moldova"
+  },
+  {
+    "code": "MC",
+    "dialCode": "+377",
+    "label": "Monaco"
+  },
+  {
+    "code": "ME",
+    "dialCode": "+382",
+    "label": "Crna Gora/Црна Гора"
+  },
+  {
+    "code": "NL",
+    "dialCode": "+31",
+    "label": "Nederland"
+  },
+  {
+    "code": "MK",
+    "dialCode": "+389",
+    "label": "Македонија"
+  },
+  {
+    "code": "NO",
+    "dialCode": "+47",
+    "label": "Norge/Noreg"
+  },
+  {
+    "code": "PL",
+    "dialCode": "+48",
+    "label": "Polska"
+  },
+  {
+    "code": "PT",
+    "dialCode": "+351",
+    "label": "Portugal"
+  },
+  {
+    "code": "RO",
+    "dialCode": "+40",
+    "label": "România"
+  },
+  {
+    "code": "RU",
+    "dialCode": "+7",
+    "label": "Россия"
+  },
+  {
+    "code": "SM",
+    "dialCode": "+378",
+    "label": "San Marino"
+  },
+  {
+    "code": "RS",
+    "dialCode": "+381",
+    "label": "Србија/Srbija"
+  },
+  {
+    "code": "SK",
+    "dialCode": "+421",
+    "label": "Slovensko"
+  },
+  {
+    "code": "SI",
+    "dialCode": "+386",
+    "label": "Slovenija"
+  },
+  {
+    "code": "ES",
+    "dialCode": "+34",
+    "label": "España"
+  },
+  {
+    "code": "SE",
+    "dialCode": "+46",
+    "label": "Sverige"
+  },
+  {
+    "code": "CH",
+    "dialCode": "+41",
+    "label": "Schweiz/Suisse/Svizzera/Svizra"
+  },
+  {
+    "code": "TR",
+    "dialCode": "+90",
+    "label": "Türkiye"
+  },
+  {
+    "code": "UA",
+    "dialCode": "+380",
+    "label": "Україна"
+  },
+  {
+    "code": "GB",
+    "dialCode": "+44",
+    "label": "United Kingdom"
+  }
+]

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

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