@ippon-ui/ui 0.0.2

package/react/test/IpponText.spec.tsx

@@ -0,0 +1,149 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { render, screen, configure, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { IpponText } from '../src';
+
+configure({
+  testIdAttribute: 'data-selector',
+});
+
+const expectToHaveClasses = (...classes: string[]) => {
+  const ipponText = screen.getByTestId('ippon-text');
+
+  expect(ipponText).toHaveClass('ippon-text', ...classes);
+};
+
+describe('IpponText', () => {
+  beforeEach(cleanup);
+
+  describe('Body', () => {
+    describe('Medium', () => {
+      it('should be minimal', () => {
+        render(
+          <IpponText variant="body" dataSelector="ippon-text">
+            Content
+          </IpponText>,
+        );
+
+        expectToHaveClasses('-body');
+      });
+
+      it('should be bold', () => {
+        render(
+          <IpponText variant="body" weight="bold" dataSelector="ippon-text">
+            Content
+          </IpponText>,
+        );
+
+        expectToHaveClasses('-body', '-bold');
+      });
+    });
+    describe('Small', () => {
+      it('should be minimal', () => {
+        render(
+          <IpponText variant="body" size="small" dataSelector="ippon-text">
+            Content
+          </IpponText>,
+        );
+
+        expectToHaveClasses('-body', '-small');
+      });
+
+      it('should be bold', () => {
+        render(
+          <IpponText variant="body" weight="bold" size="small" dataSelector="ippon-text">
+            Content
+          </IpponText>,
+        );
+
+        expectToHaveClasses('-body', '-bold', '-small');
+      });
+    });
+
+    describe('Large', () => {
+      it('should be minimal', () => {
+        render(
+          <IpponText variant="body" size="large" dataSelector="ippon-text">
+            Content
+          </IpponText>,
+        );
+
+        expectToHaveClasses('-body', '-large');
+      });
+
+      it('should be bold', () => {
+        render(
+          <IpponText variant="body" weight="bold" size="large" dataSelector="ippon-text">
+            Content
+          </IpponText>,
+        );
+
+        expectToHaveClasses('-body', '-bold', '-large');
+      });
+    });
+  });
+
+  describe('Label', () => {
+    it('should be medium', () => {
+      render(
+        <IpponText variant="label" dataSelector="ippon-text">
+          Content
+        </IpponText>,
+      );
+
+      expectToHaveClasses('-label');
+    });
+
+    it('should be small', () => {
+      render(
+        <IpponText variant="label" size="small" dataSelector="ippon-text">
+          Content
+        </IpponText>,
+      );
+
+      expectToHaveClasses('-label', '-small');
+    });
+
+    it('should be large', () => {
+      render(
+        <IpponText variant="label" size="large" dataSelector="ippon-text">
+          Content
+        </IpponText>,
+      );
+
+      expectToHaveClasses('-label', '-large');
+    });
+  });
+
+  describe('Placeholder', () => {
+    it('should display placeholder class for body variant', () => {
+      render(
+        <IpponText variant="body" placeholder dataSelector="ippon-text">
+          Content
+        </IpponText>,
+      );
+
+      expectToHaveClasses('-body', '-placeholder');
+    });
+
+    it('should display placeholder class for label variant', () => {
+      render(
+        <IpponText variant="label" placeholder dataSelector="ippon-text">
+          Content
+        </IpponText>,
+      );
+
+      expectToHaveClasses('-label', '-placeholder');
+    });
+
+    it('should display placeholder with size modifier for body variant', () => {
+      render(
+        <IpponText variant="body" size="large" placeholder dataSelector="ippon-text">
+          Content
+        </IpponText>,
+      );
+
+      expectToHaveClasses('-body', '-large', '-placeholder');
+    });
+  });
+});

package/react/test/IpponTitle.spec.tsx

@@ -0,0 +1,242 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { render, screen, configure, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { IpponTitle } from '../src';
+
+configure({
+  testIdAttribute: 'data-selector',
+});
+
+describe('IpponTitle', () => {
+  beforeEach(cleanup);
+
+  describe('HTML Tags', () => {
+    it('should render as div by default', () => {
+      render(
+        <IpponTitle level={1} dataSelector="ippon-title">
+          Title
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title.tagName).toBe('DIV');
+      expect(title).toHaveClass('ippon-title');
+    });
+
+    it('should render as h1 when specified', () => {
+      render(
+        <IpponTitle tag="h1" dataSelector="ippon-title">
+          Title
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title.tagName).toBe('H1');
+      expect(title).toHaveClass('ippon-title');
+    });
+
+    it('should render as h2 when specified', () => {
+      render(
+        <IpponTitle tag="h2" dataSelector="ippon-title">
+          Title
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title.tagName).toBe('H2');
+      expect(title).toHaveClass('ippon-title');
+    });
+
+    it('should render as h3 when specified', () => {
+      render(
+        <IpponTitle tag="h3" dataSelector="ippon-title">
+          Title
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title.tagName).toBe('H3');
+      expect(title).toHaveClass('ippon-title');
+    });
+
+    it('should render as h4 when specified', () => {
+      render(
+        <IpponTitle tag="h4" dataSelector="ippon-title">
+          Title
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title.tagName).toBe('H4');
+      expect(title).toHaveClass('ippon-title');
+    });
+
+    it('should render as h5 when specified', () => {
+      render(
+        <IpponTitle tag="h5" dataSelector="ippon-title">
+          Title
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title.tagName).toBe('H5');
+      expect(title).toHaveClass('ippon-title');
+    });
+
+    it('should render as p when specified with level', () => {
+      render(
+        <IpponTitle tag="p" level={1} dataSelector="ippon-title">
+          Title
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title.tagName).toBe('P');
+      expect(title).toHaveClass('ippon-title');
+    });
+
+    it('should render as span when specified with level', () => {
+      render(
+        <IpponTitle tag="span" level={2} dataSelector="ippon-title">
+          Title
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title.tagName).toBe('SPAN');
+      expect(title).toHaveClass('ippon-title');
+    });
+
+    it('should render as h6 when specified with level', () => {
+      render(
+        <IpponTitle tag="h6" level={3} dataSelector="ippon-title">
+          Title
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title.tagName).toBe('H6');
+      expect(title).toHaveClass('ippon-title');
+    });
+  });
+
+  describe('Level Variants', () => {
+    it('should not have level class when level is not specified with heading tag', () => {
+      render(
+        <IpponTitle tag="h1" dataSelector="ippon-title">
+          Title
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title).toHaveClass('ippon-title');
+      expect(title.className).not.toMatch(/-l\d/);
+    });
+
+    it('should have level 1 class with div', () => {
+      render(
+        <IpponTitle level={1} dataSelector="ippon-title">
+          Title
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title).toHaveClass('ippon-title', '-l1');
+    });
+
+    it('should have level 1 class with heading tag', () => {
+      render(
+        <IpponTitle tag="h2" level={1} dataSelector="ippon-title">
+          Title
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title).toHaveClass('ippon-title', '-l1');
+    });
+
+    it('should have level 2 class', () => {
+      render(
+        <IpponTitle level={2} dataSelector="ippon-title">
+          Title
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title).toHaveClass('ippon-title', '-l2');
+    });
+
+    it('should have level 3 class', () => {
+      render(
+        <IpponTitle level={3} dataSelector="ippon-title">
+          Title
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title).toHaveClass('ippon-title', '-l3');
+    });
+
+    it('should have level 4 class', () => {
+      render(
+        <IpponTitle level={4} dataSelector="ippon-title">
+          Title
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title).toHaveClass('ippon-title', '-l4');
+    });
+
+    it('should have level 5 class', () => {
+      render(
+        <IpponTitle level={5} dataSelector="ippon-title">
+          Title
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title).toHaveClass('ippon-title', '-l5');
+    });
+  });
+
+  describe('Placeholder', () => {
+    it('should have placeholder class when enabled with div', () => {
+      render(
+        <IpponTitle level={1} placeholder dataSelector="ippon-title">
+          Title
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title).toHaveClass('ippon-title', '-l1', '-placeholder');
+    });
+
+    it('should have placeholder class with level modifier and heading tag', () => {
+      render(
+        <IpponTitle tag="h2" level={2} placeholder dataSelector="ippon-title">
+          Title
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title).toHaveClass('ippon-title', '-l2', '-placeholder');
+    });
+  });
+
+  describe('Children Rendering', () => {
+    it('should render children content', () => {
+      render(
+        <IpponTitle level={1} dataSelector="ippon-title">
+          My Title Content
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title).toHaveTextContent('My Title Content');
+    });
+
+    it('should render react elements as children', () => {
+      render(
+        <IpponTitle level={1} dataSelector="ippon-title">
+          <span>Title with span</span>
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('ippon-title');
+      expect(title.querySelector('span')).toHaveTextContent('Title with span');
+    });
+  });
+
+  describe('Data Selector', () => {
+    it('should bind data-selector attribute', () => {
+      render(
+        <IpponTitle level={1} dataSelector="my-custom-selector">
+          Title
+        </IpponTitle>,
+      );
+      const title = screen.getByTestId('my-custom-selector');
+      expect(title).toBeInTheDocument();
+    });
+  });
+});

package/react/test/IpponVSpace.spec.tsx

@@ -0,0 +1,91 @@
+import { cleanup, configure, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { IpponVSpace } from '../src';
+import { IpponVSpaceSlot } from '../src/IpponVSpace.tsx';
+
+configure({
+  testIdAttribute: 'data-selector',
+});
+
+describe('IpponVSpace', () => {
+  afterEach(cleanup);
+
+  it('should be like pattern library', () => {
+    render(<IpponVSpace dataSelector="ippon-v-space">Content</IpponVSpace>);
+
+    const ipponVSpace = screen.getByTestId('ippon-v-space');
+
+    expect(ipponVSpace).toHaveClass('ippon-v-space');
+  });
+
+  it.each([2, 16, 32] as const)('should have gap %s', (gap) => {
+    render(<IpponVSpace gap={gap} dataSelector="ippon-v-space" />);
+
+    const ipponVSpace = screen.getByTestId('ippon-v-space');
+
+    expect(ipponVSpace).toHaveClass(`-gap-${gap}`);
+  });
+
+  it.each(['left', 'right', 'justify', 'center'] as const)(
+    'should have alignment %s',
+    (alignment) => {
+      render(<IpponVSpace align={alignment} dataSelector="ippon-v-space" />);
+
+      const ipponVSpace = screen.getByTestId('ippon-v-space');
+
+      expect(ipponVSpace).toHaveClass(`-${alignment}`);
+    },
+  );
+
+  it('should render with default div tag', () => {
+    render(<IpponVSpace dataSelector="ippon-v-space">Content</IpponVSpace>);
+
+    const ipponVSpace = screen.getByTestId('ippon-v-space');
+
+    expect(ipponVSpace.tagName).toBe('DIV');
+  });
+
+  it('should render with custom tag', () => {
+    render(
+      <IpponVSpace tag="section" dataSelector="ippon-v-space">
+        Content
+      </IpponVSpace>,
+    );
+
+    const ipponVSpace = screen.getByTestId('ippon-v-space');
+
+    expect(ipponVSpace.tagName).toBe('SECTION');
+  });
+
+  describe('Slot', () => {
+    it('shouldbe minimal', () => {
+      render(
+        <IpponVSpace>
+          <IpponVSpaceSlot dataSelector="ippon-v-space-slot">Slot</IpponVSpaceSlot>
+        </IpponVSpace>,
+      );
+
+      const ipponVSpaceSlot = screen.getByTestId('ippon-v-space-slot');
+
+      expect(ipponVSpaceSlot).toHaveClass('ippon-v-space--slot');
+    });
+
+    it.each(['left', 'right', 'justify', 'center'] as const)(
+      'should have alignment %s',
+      (alignment) => {
+        render(
+          <IpponVSpace>
+            <IpponVSpaceSlot align={alignment} dataSelector="ippon-v-space-slot">
+              Slot
+            </IpponVSpaceSlot>
+          </IpponVSpace>,
+        );
+
+        const ipponVSpaceSlot = screen.getByTestId('ippon-v-space-slot');
+
+        expect(ipponVSpaceSlot).toHaveClass(`-${alignment}`);
+      },
+    );
+  });
+});

package/react/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/react/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}

package/react/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/react/vite.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite';
+import react, { reactCompilerPreset } from '@vitejs/plugin-react';
+import babel from '@rolldown/plugin-babel';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    babel({ presets: [reactCompilerPreset()] }),
+    dts({ tsconfigPath: './tsconfig.app.json', include: ['src'], bundleTypes: true }),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'ippon-react',
+      formats: ['es', 'cjs'],
+      fileName: (format) => `index.${format === 'es' ? 'mjs' : 'cjs'}`,
+    },
+    rollupOptions: {
+      external: [/^react($|\/)/, /^react-dom($|\/)/],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
+});

package/react/vitest.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    coverage: {
+      provider: 'istanbul',
+      reporter: ['text', 'html', 'cobertura', 'json'],
+      clean: true,
+      include: ['src/**/*'],
+      thresholds: {
+        'src/**/domain/**/*.{ts,tsx}': {
+          statements: 100,
+          branches: 100,
+          functions: 100,
+          lines: 100,
+        },
+      },
+    },
+  },
+});

package/styles/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/styles/.stylelintrc.json

@@ -0,0 +1,75 @@
+{
+  "plugins": ["stylelint-scss", "stylelint-order"],
+  "extends": ["stylelint-config-standard-scss", "stylelint-config-concentric-order"],
+  "rules": {
+    "max-nesting-depth": 3,
+    "custom-property-pattern": "^_?[a-zA-Z][a-zA-Z0-9\\-]*$",
+    "selector-class-pattern": "^-?([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
+    "no-descending-specificity": null,
+    "selector-no-qualifying-type": [
+      true,
+      {
+        "ignore": ["class"]
+      }
+    ],
+    "order/order": [
+      {
+        "type": "at-rule",
+        "name": "import"
+      },
+      "dollar-variables",
+      "custom-properties",
+      {
+        "type": "at-rule",
+        "name": "extend"
+      },
+      {
+        "type": "at-rule",
+        "name": "mixin"
+      },
+      {
+        "type": "at-rule",
+        "name": "add-mixin"
+      },
+      {
+        "type": "at-rule",
+        "name": "apply"
+      },
+      "declarations",
+      {
+        "type": "rule",
+        "selector": "/^&:[\\w-]+/",
+        "hasBlock": true
+      },
+      {
+        "type": "rule",
+        "selector": "/^&:[\\w-]+/",
+        "hasBlock": true
+      },
+      "rules",
+      {
+        "type": "at-rule",
+        "name": "include",
+        "parameter": "/breakpoints?/i",
+        "hasBlock": true
+      },
+      {
+        "type": "at-rule",
+        "name": "mixin",
+        "parameter": "/breakpoints?/i",
+        "hasBlock": true
+      },
+      {
+        "type": "at-rule",
+        "name": "add-mixin",
+        "parameter": "/breakpoints?/i",
+        "hasBlock": true
+      },
+      {
+        "type": "at-rule",
+        "name": "media",
+        "hasBlock": true
+      }
+    ]
+  }
+}