@ippon-ui/ui 0.0.2

package/react/src/Optional.ts

@@ -0,0 +1,177 @@
+const checkIsNaN = <Value>(value: Value) => typeof value === 'number' && Number.isNaN(value);
+
+export abstract class Optional<Value> {
+  static empty<Value>(): Optional<Value> {
+    return new EmptyOptional();
+  }
+
+  static of<Value>(value: Value): Optional<Value> {
+    return new ValuatedOptional(value);
+  }
+
+  static ofNullable<Value>(value: Value | null): Optional<Value> {
+    if (value === null) {
+      return Optional.empty();
+    }
+    return Optional.of(value);
+  }
+
+  static ofUndefinable<Value>(value?: Value): Optional<Value> {
+    if (value === undefined) {
+      return Optional.empty();
+    }
+    return Optional.of(value);
+  }
+
+  static ofFalsifiable<Value>(value?: Value | null): Optional<Value> {
+    if (value === undefined || value === null || checkIsNaN(value)) {
+      return Optional.empty();
+    }
+    if (typeof value === 'string' && value.trim() === '') {
+      return Optional.empty();
+    }
+    return Optional.of(value);
+  }
+
+  static every<Structure extends Record<string, unknown>>(
+    optionalStructure: OptionalStructure<Structure>,
+  ): Optional<Structure> {
+    const keys = Object.keys(optionalStructure) as Array<keyof Structure>;
+    if (keys.some((key) => optionalStructure[key].isEmpty())) {
+      return Optional.empty();
+    }
+    const entries = keys.map((key) => [key, optionalStructure[key].orElseThrow()]);
+    return Optional.of(Object.fromEntries(entries));
+  }
+
+  abstract map<Output>(mapper: (value: Value) => Output): Optional<Output>;
+  abstract flatMap<Output>(mapper: (feature: Value) => Optional<Output>): Optional<Output>;
+  abstract or(factory: () => Optional<Value>): Optional<Value>;
+  abstract orElse(value: Value): Value;
+  abstract orElseGet(factory: () => Value): Value;
+  abstract orElseThrow<U = Error>(throwable?: () => U): Value;
+  abstract filter<To extends Value>(predicate: (value: Value) => boolean): Optional<To>;
+  abstract isEmpty(): boolean;
+  abstract isPresent(): boolean;
+  abstract ifAbsent(consumer: () => void): void;
+  abstract ifPresent(consumer: (feature: Value) => void): void;
+  abstract orUndefined(): Value | undefined;
+}
+
+class EmptyOptional<Value> extends Optional<Value> {
+  map<Output>(): Optional<Output> {
+    return Optional.empty();
+  }
+
+  flatMap<Output>(): Optional<Output> {
+    return Optional.empty();
+  }
+
+  or(factory: () => Optional<Value>): Optional<Value> {
+    return factory();
+  }
+
+  orElse(value: Value): Value {
+    return value;
+  }
+
+  orElseGet(factory: () => Value): Value {
+    return factory();
+  }
+
+  orElseThrow<U>(throwable?: () => U): Value {
+    if (throwable === undefined) {
+      throw new Error("Can't get value from an empty optional");
+    }
+
+    throw throwable();
+  }
+
+  filter<To extends Value>(): Optional<To> {
+    return Optional.empty();
+  }
+
+  isEmpty(): boolean {
+    return true;
+  }
+
+  isPresent(): boolean {
+    return false;
+  }
+
+  ifAbsent(consumer: () => void): void {
+    consumer();
+  }
+
+  ifPresent(): void {
+    // Nothing to do
+  }
+
+  orUndefined(): Value | undefined {
+    return undefined;
+  }
+}
+
+class ValuatedOptional<Value> extends Optional<Value> {
+  constructor(private readonly value: Value) {
+    super();
+  }
+
+  map<Output>(mapper: (value: Value) => Output): Optional<Output> {
+    return Optional.of(mapper(this.value));
+  }
+
+  flatMap<Output>(mapper: (feature: Value) => Optional<Output>): Optional<Output> {
+    return mapper(this.value);
+  }
+
+  or(): Optional<Value> {
+    return Optional.of(this.value);
+  }
+
+  orElse(): Value {
+    return this.value;
+  }
+
+  orElseGet(): Value {
+    return this.value;
+  }
+
+  orElseThrow(): Value {
+    return this.value;
+  }
+
+  filter<To extends Value>(predicate: (value: Value) => value is To): Optional<To> {
+    if (predicate(this.value)) {
+      return Optional.of(this.value);
+    }
+
+    return Optional.empty();
+  }
+
+  isEmpty(): boolean {
+    return false;
+  }
+
+  isPresent(): boolean {
+    return true;
+  }
+
+  ifAbsent(): void {
+    // Nothing to do
+  }
+
+  ifPresent(consumer: (feature: Value) => void): void {
+    consumer(this.value);
+  }
+
+  orUndefined(): Value | undefined {
+    return this.value;
+  }
+}
+
+type OptionalValue<Structure, K extends keyof Structure> = Optional<Structure[K]>;
+
+type OptionalStructure<Structure> = {
+  [key in keyof Structure]: OptionalValue<Structure, key>;
+};

package/react/src/Tokens.ts

@@ -0,0 +1,36 @@
+export type IpponTokenSize =
+  | 2
+  | 4
+  | 8
+  | 10
+  | 12
+  | 16
+  | 20
+  | 24
+  | 28
+  | 32
+  | 36
+  | 40
+  | 44
+  | 48
+  | 52
+  | 56
+  | 64
+  | 886
+  | 999;
+
+type SemanticColor =
+  | 'neutral'
+  | 'brand'
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'information'
+  | 'information-2';
+
+type VariantColor = 'primary' | 'secondary' | 'on-primary' | 'on-secondary';
+
+export type IpponTokenTextColor =
+  | `${SemanticColor}-${VariantColor}`
+  | 'neutral-tertiary'
+  | 'neutral-tertiary-inversed';

package/react/src/index.ts

@@ -0,0 +1,16 @@
+export { IpponBadge } from './IpponBadge.tsx';
+export { IpponButton } from './IpponButton.tsx';
+export { IpponButtonCard } from './IpponButtonCard.tsx';
+export { IpponCard } from './IpponCard.tsx';
+export { IpponContainer } from './IpponContainer.tsx';
+export { IpponGrid, IpponGridSlot } from './IpponGrid.tsx';
+export { IpponHSpace, IpponHSpaceSlot } from './IpponHSpace.tsx';
+export { IpponIcon } from './IpponIcon.tsx';
+export { IpponImportFile } from './IpponImportFile.tsx';
+export { IpponIon } from './IpponIon.tsx';
+export { IpponMeter } from './IpponMeter.tsx';
+export { IpponProgress } from './IpponProgress.tsx';
+export { IpponText } from './IpponText.tsx';
+export { IpponTitle } from './IpponTitle.tsx';
+export { IpponVSpace, IpponVSpaceSlot } from './IpponVSpace.tsx';
+export { type DataSelectableWithChildren } from './DataSelectable.ts';

package/react/test/File.fixture.ts

@@ -0,0 +1,13 @@
+import { File as FileNode } from 'buffer';
+
+export const fakeTextFile = ({
+  content,
+  name,
+  type,
+}: {
+  content: string;
+  name: string;
+  type: string;
+}): File => {
+  return new FileNode([content], name, { type }) as unknown as File;
+};

package/react/test/IpponBadge.spec.tsx

@@ -0,0 +1,245 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen, configure, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { IpponBadge } from '../src';
+
+configure({
+  testIdAttribute: 'data-selector',
+});
+
+const getIpponBadge = () => screen.getByTestId('ippon-badge');
+
+const expectToHaveClasses = (...classes: string[]) =>
+  expect(getIpponBadge()).toHaveClass('ippon-badge', ...classes);
+
+const expectToHaveTextContent = (text: string) => expect(getIpponBadge()).toHaveTextContent(text);
+
+const getTextPart = () => getIpponBadge().querySelector('.ippon-badge--text');
+
+const expectToHaveTextPart = () => expect(getTextPart()).toBeInTheDocument();
+
+const getIconParts = () => getIpponBadge().querySelectorAll<HTMLElement>('.ippon-badge--icon');
+
+const expectIconPartsCount = (count: number) => expect(getIconParts()).toHaveLength(count);
+
+describe('IpponBadge', () => {
+  beforeEach(cleanup);
+
+  it('should be minimal', () => {
+    render(<IpponBadge dataSelector="ippon-badge">Default</IpponBadge>);
+
+    expectToHaveClasses();
+    expectToHaveTextContent('Default');
+  });
+
+  describe('Variant', () => {
+    it('should be secondary', () => {
+      render(
+        <IpponBadge variant="secondary" dataSelector="ippon-badge">
+          Secondary
+        </IpponBadge>,
+      );
+
+      expectToHaveClasses('-secondary');
+      expectToHaveTextContent('Secondary');
+    });
+  });
+
+  describe('Color', () => {
+    it('should be neutral', () => {
+      render(
+        <IpponBadge color="neutral" dataSelector="ippon-badge">
+          Neutral
+        </IpponBadge>,
+      );
+
+      expectToHaveClasses('-neutral');
+      expectToHaveTextContent('Neutral');
+    });
+
+    it('should be success', () => {
+      render(
+        <IpponBadge color="success" dataSelector="ippon-badge">
+          Success
+        </IpponBadge>,
+      );
+
+      expectToHaveClasses('-success');
+      expectToHaveTextContent('Success');
+    });
+
+    it('should be error', () => {
+      render(
+        <IpponBadge color="error" dataSelector="ippon-badge">
+          Error
+        </IpponBadge>,
+      );
+
+      expectToHaveClasses('-error');
+      expectToHaveTextContent('Error');
+    });
+
+    it('should be warning', () => {
+      render(
+        <IpponBadge color="warning" dataSelector="ippon-badge">
+          Warning
+        </IpponBadge>,
+      );
+
+      expectToHaveClasses('-warning');
+      expectToHaveTextContent('Warning');
+    });
+
+    it('should be information', () => {
+      render(
+        <IpponBadge color="information" dataSelector="ippon-badge">
+          Information
+        </IpponBadge>,
+      );
+
+      expectToHaveClasses('-information');
+      expectToHaveTextContent('Information');
+    });
+  });
+
+  describe('Icons', () => {
+    it('should have icon left', () => {
+      render(
+        <IpponBadge
+          iconLeft={{ name: 'alert-circle', variant: 'outline' }}
+          dataSelector="ippon-badge"
+        >
+          With left icon
+        </IpponBadge>,
+      );
+
+      expectToHaveClasses();
+      expectToHaveTextPart();
+      expectIconPartsCount(1);
+    });
+
+    it('should have icon right', () => {
+      render(
+        <IpponBadge iconRight={{ name: 'close', variant: 'outline' }} dataSelector="ippon-badge">
+          With right icon
+        </IpponBadge>,
+      );
+
+      expectToHaveClasses();
+      expectToHaveTextPart();
+      expectIconPartsCount(1);
+    });
+
+    it('should have both icons', () => {
+      render(
+        <IpponBadge
+          iconLeft={{ name: 'alert-circle', variant: 'outline' }}
+          iconRight={{ name: 'close', variant: 'outline' }}
+          dataSelector="ippon-badge"
+        >
+          With both icons
+        </IpponBadge>,
+      );
+
+      expectToHaveClasses();
+      expectToHaveTextPart();
+      expectIconPartsCount(2);
+    });
+  });
+
+  describe('Clickable', () => {
+    it('should have clickable icon left', () => {
+      const onClick = vi.fn();
+
+      render(
+        <IpponBadge
+          iconLeft={{ name: 'alert-circle', variant: 'outline', onClick }}
+          dataSelector="ippon-badge"
+        >
+          Clickable left
+        </IpponBadge>,
+      );
+
+      const icon = getIconParts()[0];
+      expect(icon.tagName).toBe('BUTTON');
+      expect(icon).toHaveClass('-clickable');
+      icon.click();
+      expect(onClick).toHaveBeenCalled();
+    });
+
+    it('should have clickable icon right', () => {
+      const onClick = vi.fn();
+
+      render(
+        <IpponBadge
+          iconRight={{ name: 'close', variant: 'outline', onClick }}
+          dataSelector="ippon-badge"
+        >
+          Clickable right
+        </IpponBadge>,
+      );
+
+      const icon = getIconParts()[0];
+      expect(icon.tagName).toBe('BUTTON');
+      expect(icon).toHaveClass('-clickable');
+      icon.click();
+      expect(onClick).toHaveBeenCalled();
+    });
+
+    it('should not have clickable class without onClick', () => {
+      render(
+        <IpponBadge
+          iconLeft={{ name: 'alert-circle', variant: 'outline' }}
+          dataSelector="ippon-badge"
+        >
+          Not clickable
+        </IpponBadge>,
+      );
+
+      const icon = getIconParts()[0];
+      expect(icon.tagName).toBe('SPAN');
+      expect(icon).not.toHaveClass('-clickable');
+    });
+  });
+
+  describe('Placeholder', () => {
+    it('should display placeholder class', () => {
+      render(
+        <IpponBadge placeholder dataSelector="ippon-badge">
+          Placeholder
+        </IpponBadge>,
+      );
+
+      expectToHaveClasses('-placeholder');
+    });
+  });
+
+  describe('Combinations', () => {
+    it('should combine color and variant', () => {
+      render(
+        <IpponBadge color="success" variant="secondary" dataSelector="ippon-badge">
+          Success Secondary
+        </IpponBadge>,
+      );
+
+      expectToHaveClasses('-secondary', '-success');
+      expectToHaveTextContent('Success Secondary');
+    });
+
+    it('should combine color and icon left', () => {
+      render(
+        <IpponBadge
+          color="error"
+          iconLeft={{ name: 'alert-circle', variant: 'outline' }}
+          dataSelector="ippon-badge"
+        >
+          Error with icon
+        </IpponBadge>,
+      );
+
+      expectToHaveClasses('-error');
+      expectToHaveTextPart();
+      expectIconPartsCount(1);
+    });
+  });
+});