chore: initial commit

libs/ui/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/ui/README.md

@@ -0,0 +1,7 @@
+# ui
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test ui` to execute the unit tests via [Vitest](https://vitest.dev/).

libs/ui/eslint.config.mjs

@@ -0,0 +1,12 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];

libs/ui/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@imphnen-frontend-service/ui",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}

libs/ui/project.json

@@ -0,0 +1,23 @@
+{
+  "name": "ui",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/ui/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "nx-release-publish": {
+      "options": {
+        "packageRoot": "dist/{projectRoot}"
+      }
+    }
+  },
+  "release": {
+    "version": {
+      "generatorOptions": {
+        "packageRoot": "dist/{projectRoot}",
+        "currentVersionResolver": "git-tag",
+        "fallbackCurrentVersionResolver": "disk"
+      }
+    }
+  }
+}

libs/ui/src/atoms/button/button.spec.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button } from './button';
+
+describe('Test Button Component', () => {
+  it('renders the button with children text', () => {
+    render(<Button>Click Me</Button>);
+    expect(screen.getByText('Click Me')).toBeInTheDocument();
+  });
+
+  it('calls onClick when clicked', async () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click Me</Button>);
+
+    const user = userEvent.setup();
+    await user.click(screen.getByText('Click Me'));
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('applies the correct variant class', () => {
+    render(<Button variant="danger">Delete</Button>);
+
+    const button = screen.getByText('Delete');
+
+    expect(button).toHaveClass('bg-danger-500');
+    expect(button).toHaveClass('hover:bg-danger-600');
+    expect(button).toHaveClass('text-white');
+  });
+
+  it("disables the button when 'disabled' prop is set", async () => {
+    const handleClick = vi.fn();
+    render(
+      <Button variant="primary" disabled onClick={handleClick}>
+        Disabled
+      </Button>
+    );
+
+    const user = userEvent.setup();
+    const button = screen.getByText('Disabled');
+
+    expect(button).toBeDisabled();
+
+    await user.click(button);
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+});

libs/ui/src/atoms/button/button.tsx

@@ -0,0 +1,67 @@
+import {
+  FC,
+  ReactElement,
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+} from 'react';
+import { cn } from '@imphnen-frontend-service/utils';
+
+type TButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'text'
+  | 'bordered';
+type TButtonSize = 'sm' | 'md' | 'lg';
+
+type TButtonProps = DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> & {
+  variant?: TButtonVariant;
+  size?: TButtonSize;
+};
+
+const variantClasses: Record<TButtonVariant, string> = {
+  primary: 'bg-primary-500 hover:bg-primary-600 text-white shadow-md',
+  secondary:
+    'bg-white hover:text-primary-600 hover:bg-gray-50 text-primary-500 shadow-md',
+  text: 'bg-transparent hover:text-primary-600 hover:bg-gray-50 text-primary-500',
+  bordered:
+    'border border-primary-500 hover:border-primary-600 bg-transparent hover:text-primary-600 hover:bg-gray-50 text-primary-500',
+  success: 'bg-success-500 hover:bg-success-600 text-white shadow-md',
+  danger: 'bg-danger-500 hover:bg-danger-600 text-white shadow-md',
+};
+
+const sizeClasses: Record<TButtonSize, string> = {
+  sm: 'text-[12px] max-h-[36px]',
+  md: 'text-[15px] max-h-[40px]',
+  lg: 'text-[19px] max-h-[44px]',
+};
+
+const disabledClass = 'opacity-50 cursor-not-allowed';
+
+export const Button: FC<TButtonProps> = ({
+  variant = 'primary',
+  size = 'md',
+  disabled,
+  className,
+  children,
+  ...rest
+}): ReactElement => {
+  const mergedClassName = cn(
+    'inline-flex items-center justify-center font-[600] rounded-lg px-[16px] py-[10px]',
+    'transition-colors duration-200 cursor-pointer',
+    sizeClasses[size],
+    variantClasses[variant],
+    disabled && disabledClass,
+    className
+  );
+
+  return (
+    <button className={mergedClassName} disabled={disabled} {...rest}>
+      {children}
+    </button>
+  );
+};

libs/ui/src/atoms/button/index.ts

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

libs/ui/src/atoms/index.ts

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

libs/ui/src/organisms/index.ts

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

libs/ui/src/organisms/navbar/index.ts

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

libs/ui/src/organisms/navbar/navbar.tsx

@@ -0,0 +1,74 @@
+import { MenuOutlined } from '@ant-design/icons';
+import { FC, ReactElement, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+export const Navbar: FC = (): ReactElement => {
+  const [isDropdownOpen, setDropdownOpen] = useState(false);
+
+  return (
+    <header
+      className="bg-white shadow-sm rounded-lg min-h-[47px] max-h-[47px] md:min-h-[60px] md:max-h-[60px] lg:min-h-[71px] lg:max-h-[71px] flex justify-between w-full max-w-[1280px] xl:mx-auto sticky"
+      role="navigation"
+    >
+      <div className="flex w-full items-center justify-between px-6 py-3">
+        <div className="flex items-center">
+          <img
+            src="/logos/simple.svg"
+            alt="IMPHNEN Logo"
+            className="h-8 w-auto"
+          />
+        </div>
+
+        <nav className="w-full flex justify-end">
+          <ul className="items-center gap-x-8 font-semibold hidden md:flex">
+            <li>
+              <Link
+                to="#"
+                className="text-primary-500 hover:text-primary-600 transition-colors"
+              >
+                Home
+              </Link>
+            </li>
+            <li>
+              <Link to="#" className="text-gray-600 transition-colors">
+                Merch Gacha
+              </Link>
+            </li>
+          </ul>
+          <button
+            className={`md:hidden duration-200 ${
+              isDropdownOpen ? 'transform rotate-90' : ''
+            }`}
+            onClick={() => setDropdownOpen(!isDropdownOpen)}
+          >
+            <MenuOutlined style={{ color: '#1a8ce6' }} />
+          </button>
+          <div className="relative">
+            {isDropdownOpen && (
+              <div className="absolute right-0 top-0 mt-5">
+                <ul className="mt-2 w-48 bg-white shadow-md border rounded-[16px] border-gray-200 px-5 py-3">
+                  <li>
+                    <Link
+                      to="#"
+                      className="block text-primary-500 hover:text-primary-600 transition-colors px-4 py-2 text-center font-semibold"
+                    >
+                      Home
+                    </Link>
+                  </li>
+                  <li>
+                    <Link
+                      to="#"
+                      className="block text-gray-600 transition-colors px-4 py-2 text-center font-semibold"
+                    >
+                      Merch Gacha
+                    </Link>
+                  </li>
+                </ul>
+              </div>
+            )}
+          </div>
+        </nav>
+      </div>
+    </header>
+  );
+};

libs/ui/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client", "vitest", "@testing-library/jest-dom"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

libs/ui/tsconfig.lib.json

@@ -0,0 +1,35 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

libs/ui/tsconfig.spec.json

@@ -0,0 +1,28 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

libs/ui/vite.config.ts

@@ -0,0 +1,64 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/libs/ui',
+  plugins: [
+    react(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(['*.md']),
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+    }),
+  ],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: '../../dist/libs/ui',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: [
+        'src/atoms/index.ts',
+        'src/molecules/index.ts',
+        'src/organisms/index.ts',
+      ],
+      name: 'ui',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    setupFiles: ['./vitest.setup.ts'],
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/libs/ui',
+      provider: 'v8' as const,
+    },
+  },
+}));

libs/ui/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';