@ippon-ui/ui 0.0.2

package/react/src/IpponCard.tsx

@@ -0,0 +1,30 @@
+import type { DataSelectableWithChildren } from './DataSelectable.ts';
+import { clsx } from 'clsx';
+import {
+  optionalToPrefixedAlternativeClass,
+  optionalToAlternativeClass,
+  toAlternativeClass,
+} from './CAP.ts';
+import type { IpponCardShadowLevel, IpponCardSize } from './Card.ts';
+
+type IpponCardProps = DataSelectableWithChildren<{
+  shadow?: IpponCardShadowLevel;
+  border?: boolean;
+  size?: IpponCardSize;
+}>;
+
+export const IpponCard = (props: IpponCardProps) => (
+  <div
+    className={clsx(
+      'ippon-card',
+      optionalToPrefixedAlternativeClass('shadow')(props.shadow),
+      {
+        [toAlternativeClass('border')]: props.border,
+      },
+      optionalToAlternativeClass(props.size),
+    )}
+    data-selector={props.dataSelector}
+  >
+    {props.children}
+  </div>
+);

package/react/src/IpponContainer.tsx

@@ -0,0 +1,15 @@
+import type { DataSelectableWithChildren } from './DataSelectable.ts';
+import type { JSX } from 'react';
+
+type IpponContainerProps = DataSelectableWithChildren<{
+  tag?: keyof JSX.IntrinsicElements;
+}>;
+
+export const IpponContainer = (props: IpponContainerProps) => {
+  const CustomTag: keyof JSX.IntrinsicElements = props.tag || 'div';
+  return (
+    <CustomTag className="ippon-container" data-selector={props.dataSelector}>
+      {props.children}
+    </CustomTag>
+  );
+};

package/react/src/IpponGrid.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+import type { DataSelectableWithChildren } from './DataSelectable.ts';
+import type { IpponGridCol, IpponGridContainer, IpponGridGap, IpponGridMedia } from './Grid.ts';
+import { clsx } from 'clsx';
+import { toAlternativeClass } from './CAP.ts';
+import { Optional } from './Optional.ts';
+
+const toResponsiveClasses = (
+  prefix: string,
+  value: string | number | (string | number)[],
+): string =>
+  clsx(
+    Array.isArray(value)
+      ? value.map((v) => toAlternativeClass(`${prefix}-${v}`))
+      : toAlternativeClass(`${prefix}-${value}`),
+  );
+
+const optionalToResponsiveClasses =
+  (prefix: string) =>
+  (value?: string | number | (string | number)[]): string | undefined =>
+    Optional.ofFalsifiable(value)
+      .map((v) => toResponsiveClasses(prefix, v))
+      .orUndefined();
+
+type IpponGridProps = DataSelectableWithChildren<{
+  media?: IpponGridMedia;
+  container?: IpponGridContainer;
+  gap?: IpponGridGap;
+}>;
+
+export const IpponGrid = (props: IpponGridProps): ReactNode => (
+  <div
+    className={clsx(
+      'ippon-grid',
+      optionalToResponsiveClasses('media')(props.media),
+      optionalToResponsiveClasses('container')(props.container),
+      optionalToResponsiveClasses('gap')(props.gap),
+    )}
+    data-selector={props.dataSelector}
+  >
+    {props.children}
+  </div>
+);
+
+type IpponGridSlotProps = DataSelectableWithChildren<{
+  col?: IpponGridCol;
+}>;
+
+export const IpponGridSlot = (props: IpponGridSlotProps): ReactNode => (
+  <div
+    className={clsx('ippon-grid--slot', optionalToResponsiveClasses('col')(props.col))}
+    data-selector={props.dataSelector}
+  >
+    {props.children}
+  </div>
+);

package/react/src/IpponHSpace.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode, JSX } from 'react';
+import type { IpponTokenSize } from './Tokens.ts';
+import { clsx } from 'clsx';
+import type { DataSelectableWithChildren } from './DataSelectable.ts';
+import { Optional } from './Optional.ts';
+import { optionalToPrefixedAlternativeClass, toAlternativeClass } from './CAP.ts';
+
+type Align = 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom' | 'space-between';
+
+type IpponHSpaceProps = DataSelectableWithChildren<{
+  gap?: IpponTokenSize;
+  align?: Align | Align[];
+  className?: string;
+  wrap?: boolean;
+  tag?: keyof JSX.IntrinsicElements;
+}>;
+
+const alignSetToClass = (alignSet: Set<Align>): string =>
+  clsx([...alignSet].map(toAlternativeClass));
+
+const alignToClass = (align: Align | Align[]): string => {
+  if (typeof align === 'string') {
+    return toAlternativeClass(align);
+  }
+  return alignSetToClass(new Set<Align>(align));
+};
+
+export const IpponHSpace = (props: IpponHSpaceProps): ReactNode => {
+  const CustomTag: keyof JSX.IntrinsicElements = props.tag || 'div';
+  const className = clsx(
+    'ippon-h-space',
+    optionalToPrefixedAlternativeClass('gap')(props.gap),
+    Optional.ofFalsifiable(props.align).map(alignToClass).orUndefined(),
+    props.className,
+    { '-wrap': props.wrap },
+  );
+
+  return (
+    <CustomTag className={className} data-selector={props.dataSelector}>
+      {props.children}
+    </CustomTag>
+  );
+};
+
+type IpponHSpaceSlotProps = DataSelectableWithChildren<{
+  expand?: boolean;
+}>;
+
+export const IpponHSpaceSlot = (props: IpponHSpaceSlotProps): ReactNode => (
+  <div
+    className={clsx('ippon-h-space--slot', { '-expand': props.expand })}
+    data-selector={props.dataSelector}
+  >
+    {props.children}
+  </div>
+);

package/react/src/IpponIcon.tsx

@@ -0,0 +1,15 @@
+import { IpponIon, type IpponIonProps } from './IpponIon.tsx';
+import { clsx } from 'clsx';
+import type { IpponTokenTextColor, IpponTokenSize } from './Tokens.ts';
+
+export type IpponIconProps = IpponIonProps & {
+  color?: IpponTokenTextColor;
+  size?: IpponTokenSize;
+};
+
+export const IpponIcon = (props: IpponIconProps) => {
+  const colorClass = props.color ? `-color-${props.color}` : null;
+  const sizeClass = props.size ? `-size-${props.size}` : null;
+  const className = clsx('ippon-icon', colorClass, sizeClass, props.className);
+  return <IpponIon {...props} className={className} />;
+};

package/react/src/IpponImportFile.tsx

@@ -0,0 +1,128 @@
+import { clsx } from 'clsx';
+import type { ChangeEvent, DragEvent } from 'react';
+import { useRef, useState } from 'react';
+import { Optional } from './Optional.ts';
+import type { DataSelectable } from './DataSelectable.ts';
+import { IpponIcon } from './IpponIcon.tsx';
+import { IpponText } from './IpponText.tsx';
+import { IpponVSpace } from './IpponVSpace.tsx';
+import { toAlternativeClass } from './CAP.ts';
+
+type IpponImportFileCommonProps = {
+  accept?: string;
+  title: string;
+  description: string;
+};
+
+type IpponImportFileSingleProps = IpponImportFileCommonProps & {
+  multiple?: false;
+  onChange?: (file: File) => void;
+};
+
+type IpponImportFileMultipleProps = IpponImportFileCommonProps & {
+  multiple: true;
+  onChange?: (files: File[]) => void;
+};
+
+type IpponImportFileVanillaProps = IpponImportFileSingleProps | IpponImportFileMultipleProps;
+
+type IpponImportFileProps = DataSelectable<IpponImportFileVanillaProps>;
+
+const getFileForOnChange = (files: FileList): File => files[0];
+
+const getFilesForOnChange = (files: FileList): File[] => Array.from(files);
+
+const importOnChange = (props: IpponImportFileProps) => (files: FileList) => {
+  if (!props.onChange) {
+    return;
+  }
+  if (props.multiple) {
+    props.onChange(getFilesForOnChange(files));
+    return;
+  }
+  props.onChange(getFileForOnChange(files));
+};
+
+export const IpponImportFile = (props: IpponImportFileProps) => {
+  const [isDragover, setIsDragover] = useState(false);
+  const dragCounterRef = useRef(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const resetFile = () => {
+    if (inputRef.current) {
+      inputRef.current.value = '';
+    }
+  };
+
+  const importFiles = (files: FileList) => {
+    importOnChange(props)(files);
+    resetFile();
+  };
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    Optional.ofNullable(event.target.files)
+      .filter((files) => files.length > 0)
+      .ifPresent(importFiles);
+  };
+
+  const handleDragEnter = () => {
+    dragCounterRef.current += 1;
+    setIsDragover(true);
+  };
+
+  const handleDragLeave = () => {
+    dragCounterRef.current -= 1;
+    if (dragCounterRef.current === 0) {
+      setIsDragover(false);
+    }
+  };
+
+  const handleDragOver = (event: DragEvent<HTMLLabelElement>) => {
+    event.preventDefault();
+  };
+
+  const handleDrop = (event: DragEvent<HTMLLabelElement>) => {
+    event.preventDefault();
+    dragCounterRef.current = 0;
+    setIsDragover(false);
+    Optional.ofFalsifiable(event.dataTransfer?.files)
+      .filter((files) => files.length > 0)
+      .ifPresent(importFiles);
+  };
+
+  return (
+    <label
+      className={clsx('ippon-import-file', {
+        [toAlternativeClass('dragover')]: isDragover,
+      })}
+      data-selector={props.dataSelector}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      <IpponVSpace gap={8} align="center">
+        <div className="ippon-import-file--icon">
+          <IpponIcon name="cloud-upload" size={24} />
+        </div>
+        <IpponVSpace gap={4} align="center">
+          <IpponText variant="body" weight="bold">
+            {props.title}
+          </IpponText>
+          <IpponText variant="body" size="small" color="neutral-tertiary-inversed">
+            {props.description}
+          </IpponText>
+        </IpponVSpace>
+      </IpponVSpace>
+      <input
+        ref={inputRef}
+        type="file"
+        className="ippon-import-file--input"
+        multiple={props.multiple}
+        accept={props.accept}
+        onChange={handleChange}
+        data-selector={props.dataSelector ? `${props.dataSelector}.input` : undefined}
+      />
+    </label>
+  );
+};

package/react/src/IpponIon.tsx

@@ -0,0 +1,45 @@
+import type { IconClassic, IconLogo, IconVariant } from '@ippon-ui/icons';
+import { clsx } from 'clsx';
+import type { DataSelectable } from './DataSelectable.ts';
+
+type IpponIconClassic = {
+  name: IconClassic;
+  variant?: IconVariant;
+};
+
+type IpponIconLogo = {
+  name: IconLogo;
+};
+
+type IpponIconBase = {
+  className?: string;
+  onClick?: () => void;
+};
+
+export type IpponIonProps = DataSelectable<(IpponIconClassic | IpponIconLogo) & IpponIconBase>;
+
+type IpponIconInfo = {
+  name: string;
+  variant?: string;
+};
+
+const toClassName = (props: IpponIconInfo): string => {
+  const { name, variant } = props;
+  const prefix = 'ippon-ion';
+  const variantSuffix = variant ? `-${variant}` : '';
+  return `${prefix}-${name}${variantSuffix}`;
+};
+
+export const IpponIon = (props: IpponIonProps) => {
+  const CustomTag = props.onClick ? 'button' : 'span';
+
+  return (
+    /* NOSONAR */ <CustomTag
+      role={props.onClick ? undefined : 'presentation'}
+      type={props.onClick ? 'button' : undefined}
+      className={clsx(toClassName(props), props.className)}
+      data-selector={props.dataSelector}
+      onClick={props.onClick}
+    ></CustomTag>
+  );
+};

package/react/src/IpponMeter.tsx

@@ -0,0 +1,43 @@
+import { clsx } from 'clsx';
+import type { DataSelectable } from './DataSelectable.ts';
+
+declare module 'react' {
+  interface CSSProperties {
+    '--ippon-meter-percentage'?: string;
+  }
+}
+
+type IpponVanillaMeterProps = {
+  value: number;
+  min: number;
+  max: number;
+  label: string;
+};
+
+type IpponMeterProps = DataSelectable<IpponVanillaMeterProps>;
+
+const toPercentage = (props: IpponVanillaMeterProps) => {
+  const range = props.max - props.min;
+  if (range === 0) {
+    return 0;
+  }
+  return ((props.value - props.min) / range) * 100;
+};
+
+export const IpponMeter = (props: IpponMeterProps) => {
+  const percentage = toPercentage(props);
+  const clampedPercentage = Math.min(Math.max(percentage, 0), 100);
+
+  return (
+    /* NOSONAR */ <div
+      className={clsx('ippon-meter')}
+      role="meter"
+      aria-valuenow={props.value}
+      aria-valuemin={props.min}
+      aria-valuemax={props.max}
+      aria-label={props.label}
+      data-selector={props.dataSelector}
+      style={{ '--ippon-meter-percentage': `${clampedPercentage}%` }}
+    ></div>
+  );
+};

package/react/src/IpponProgress.tsx

@@ -0,0 +1,45 @@
+import { clsx } from 'clsx';
+import type { DataSelectable } from './DataSelectable.ts';
+
+declare module 'react' {
+  interface CSSProperties {
+    '--ippon-progress-percentage'?: string;
+  }
+}
+
+type IpponVanillaProgressProps = {
+  value: number;
+  min: number;
+  max: number;
+  label: string;
+};
+
+type IpponProgressProps = DataSelectable<IpponVanillaProgressProps>;
+
+const toPercentage = (props: IpponVanillaProgressProps) => {
+  const range = props.max - props.min;
+  if (range === 0) {
+    return 0;
+  }
+  return ((props.value - props.min) / range) * 100;
+};
+
+export const IpponProgress = (props: IpponProgressProps) => {
+  const percentage = toPercentage(props);
+  const clampedPercentage = Math.min(Math.max(percentage, 0), 100);
+  const busy = props.value < props.max;
+
+  return (
+    /* NOSONAR */ <div
+      className={clsx('ippon-progress')}
+      role="progressbar"
+      aria-valuenow={props.value}
+      aria-valuemin={props.min}
+      aria-valuemax={props.max}
+      aria-label={props.label}
+      aria-busy={busy}
+      data-selector={props.dataSelector}
+      style={{ '--ippon-progress-percentage': `${clampedPercentage}%` }}
+    ></div>
+  );
+};

package/react/src/IpponText.tsx

@@ -0,0 +1,56 @@
+import type { IpponTokenTextColor } from './Tokens.ts';
+import type { DataSelectableWithChildren } from './DataSelectable.ts';
+import { clsx } from 'clsx';
+import { optionalToAlternativeClass, optionalToPrefixedAlternativeClass } from './CAP.ts';
+import type { JSX } from 'react';
+
+type IpponTextBodyProps = {
+  variant: 'body';
+  weight?: 'bold';
+  size?: 'small' | 'large';
+};
+
+type IpponTextLabelProps = {
+  variant: 'label';
+  size?: 'small' | 'large';
+};
+
+type IpponVariantProps = IpponTextBodyProps | IpponTextLabelProps;
+
+type IpponVanillaTextProps = {
+  color?: IpponTokenTextColor;
+  tag?: keyof JSX.IntrinsicElements;
+  placeholder?: boolean;
+} & IpponVariantProps;
+
+type IpponTextProps = DataSelectableWithChildren<IpponVanillaTextProps>;
+
+const toBodyVariantClasses = (props: IpponTextBodyProps) =>
+  clsx('-body', optionalToAlternativeClass(props.weight), optionalToAlternativeClass(props.size));
+
+const toLabelVariantClasses = (props: IpponTextLabelProps) =>
+  clsx('-label', optionalToAlternativeClass(props.size));
+
+const toVariantClasses = (props: IpponVariantProps) => {
+  if (props.variant === 'body') {
+    return toBodyVariantClasses(props);
+  }
+  return toLabelVariantClasses(props);
+};
+
+export const IpponText = (props: IpponTextProps) => {
+  const CustomTag: keyof JSX.IntrinsicElements = props.tag || 'span';
+  return (
+    <CustomTag
+      className={clsx(
+        'ippon-text',
+        toVariantClasses(props),
+        optionalToPrefixedAlternativeClass('color')(props.color),
+        props.placeholder && '-placeholder',
+      )}
+      data-selector={props.dataSelector}
+    >
+      {props.children}
+    </CustomTag>
+  );
+};

package/react/src/IpponTitle.tsx

@@ -0,0 +1,45 @@
+import type { DataSelectableWithChildren } from './DataSelectable.ts';
+import { clsx } from 'clsx';
+import type { JSX } from 'react';
+import { Optional } from './Optional.ts';
+
+type Level = 1 | 2 | 3 | 4 | 5;
+
+type HeadingTag = `h${Level}`;
+
+type IpponTitleWithHeadingProps = DataSelectableWithChildren<{
+  tag: HeadingTag;
+  level?: Level;
+  placeholder?: boolean;
+}>;
+
+type IpponTitleWithNonHeadingProps = DataSelectableWithChildren<{
+  tag?: Exclude<keyof JSX.IntrinsicElements, HeadingTag>;
+  level: Level;
+  placeholder?: boolean;
+}>;
+
+type IpponTitleProps = IpponTitleWithHeadingProps | IpponTitleWithNonHeadingProps;
+
+const levelToClass = (level?: Level): string | undefined =>
+  Optional.ofFalsifiable(level)
+    .map((l) => `-l${l}`)
+    .orUndefined();
+
+export const IpponTitle = (props: IpponTitleProps) => {
+  const CustomTag: keyof JSX.IntrinsicElements = (props.tag ||
+    'div') as keyof JSX.IntrinsicElements;
+
+  return (
+    <CustomTag
+      className={clsx(
+        'ippon-title',
+        levelToClass(props.level),
+        props.placeholder && '-placeholder',
+      )}
+      data-selector={props.dataSelector}
+    >
+      {props.children}
+    </CustomTag>
+  );
+};

package/react/src/IpponVSpace.tsx

@@ -0,0 +1,43 @@
+import type { JSX, ReactNode } from 'react';
+import type { IpponTokenSize } from './Tokens.ts';
+import { clsx } from 'clsx';
+import type { DataSelectableWithChildren } from './DataSelectable.ts';
+import { optionalToAlternativeClass, optionalToPrefixedAlternativeClass } from './CAP.ts';
+
+type Align = 'left' | 'center' | 'justify' | 'right';
+
+type IpponVSpaceProps = DataSelectableWithChildren<{
+  gap?: IpponTokenSize;
+  align?: Align;
+  className?: string;
+  tag?: keyof JSX.IntrinsicElements;
+}>;
+
+export const IpponVSpace = (props: IpponVSpaceProps): ReactNode => {
+  const CustomTag: keyof JSX.IntrinsicElements = props.tag || 'div';
+  const className = clsx(
+    'ippon-v-space',
+    optionalToPrefixedAlternativeClass('gap')(props.gap),
+    optionalToAlternativeClass(props.align),
+    props.className,
+  );
+
+  return (
+    <CustomTag className={className} data-selector={props.dataSelector}>
+      {props.children}
+    </CustomTag>
+  );
+};
+
+type IpponVSpaceSlotProps = DataSelectableWithChildren<{
+  align?: Align;
+}>;
+
+export const IpponVSpaceSlot = (props: IpponVSpaceSlotProps): ReactNode => (
+  <div
+    className={clsx('ippon-v-space--slot', optionalToAlternativeClass(props.align))}
+    data-selector={props.dataSelector}
+  >
+    {props.children}
+  </div>
+);