initial

nqhd3v · nqhd3v · commit 596ad9d2955a · 2025-06-16T18:27:37.000+07:00
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -0,0 +1,53 @@
+name: Publish Package
+
+on:
+  push:
+    branches:
+      - develop
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'npm'
+
+      - name: Install Yarn
+        run: npm install -g yarn
+
+      - name: Install dependencies by Yarn
+        run: yarn install --frozen-lockfile
+
+      - name: Lint check
+        run: yarn lint
+
+      - name: Build
+        run: yarn build:prod
+
+      - name: Update version
+        run: |
+          git config user.name "github-actions"
+          git config user.email "github-actions@github.com"
+          yarn version --patch
+          git push origin HEAD --tags
+
+      - name: Publish to npm
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Deploy Storybook to GitHub Pages
+        uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
+        with:
+          install_command: yarn install
+          build_command: yarn story:build
+          path: storybook-static
+          checkout: false
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+dist
+.storybook
+storybook-static
+coverage
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2
+}
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+a design-system for nqh.d3v application
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    ['@babel/preset-react', { runtime: 'automatic' }],
+    '@babel/preset-typescript',
+  ],
+};
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,41 @@
+import { defineConfig } from 'eslint/config';
+import js from '@eslint/js';
+import reactPlugin from 'eslint-plugin-react';
+import typescriptEslintPlugin from '@typescript-eslint/eslint-plugin';
+import typescriptEslintParser from '@typescript-eslint/parser';
+import prettierPlugin from 'eslint-plugin-prettier';
+import prettierConfig from 'eslint-config-prettier';
+
+export default defineConfig([
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2021,
+      sourceType: 'module',
+      globals: {
+        browser: true,
+        jest: true,
+        node: true,
+      },
+      parser: typescriptEslintParser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    plugins: {
+      react: reactPlugin,
+      '@typescript-eslint': typescriptEslintPlugin,
+      prettier: prettierPlugin,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...reactPlugin.configs.recommended.rules,
+      ...typescriptEslintPlugin.configs.recommended.rules,
+      ...prettierConfig.rules,
+      'prettier/prettier': 'error',
+      'react/prop-types': 'off',
+    },
+  },
+]);
diff --git a/jest.config.ts b/jest.config.ts
@@ -0,0 +1,27 @@
+import fs from 'fs';
+
+fs.mkdir('./report/sonarqube', { recursive: true }, () => {});
+
+/** @type {import('jest').Config} */
+const config = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  testTimeout: 50000,
+  collectCoverageFrom: ['**/*.(t|j)s', '**/*.tsx'],
+  coveragePathIgnorePatterns: [
+    'node_modules',
+    'coverage',
+    '<rootDir>/(.*).(setup|config).(t|j)s',
+    '<rootDir>/test',
+  ],
+  coverageReporters: ['clover', 'json', 'lcov', 'text', 'json-summary'],
+  coverageDirectory: './report/coverage',
+  testResultsProcessor: 'jest-sonar-reporter',
+  maxWorkers: 3,
+};
+
+export default config;
diff --git a/jest.setup.ts b/jest.setup.ts
@@ -0,0 +1 @@
+import "@testing-library/jest-dom";
diff --git a/package.json b/package.json
@@ -0,0 +1,75 @@
+{
+  "name": "@nqhd3v/react",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/esm/index.js",
+  "scripts": {
+    "start": "rollup -c -w",
+    "test": "jest",
+    "build": "rollup -c",
+    "story": "storybook dev -p 6006",
+    "story:build": "storybook build",
+    "lint": "eslint src/**/*.{ts,tsx}",
+    "lint:format": "prettier --write src/**/*.{ts,tsx}"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module",
+  "devDependencies": {
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@rollup/plugin-commonjs": "^28.0.5",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@storybook/addon-docs": "^9.0.10",
+    "@storybook/addon-onboarding": "^9.0.10",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/react-webpack5": "^9.0.10",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@typescript-eslint/eslint-plugin": "^8.34.0",
+    "@typescript-eslint/parser": "^8.34.0",
+    "babel-jest": "^30.0.0",
+    "eslint": "^9.29.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.4.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "jest": "^30.0.0",
+    "jest-environment-jsdom": "^30.0.0",
+    "jest-sonar-reporter": "^2.0.0",
+    "jsdom": "^26.1.0",
+    "prettier": "^3.5.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "rollup": "^4.43.0",
+    "rollup-plugin-dts": "^6.2.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^9.0.10",
+    "ts-jest": "^29.4.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.3"
+  },
+  "dependencies": {
+    "@testing-library/user-event": "^14.6.1"
+  },
+  "jest-junit": {
+    "outputDirectory": "./report/unit",
+    "outputName": "test-report.xml"
+  },
+  "jestSonar": {
+    "reportPath": "./report/sonarqube",
+    "reportFile": "report.xml",
+    "indent": 4
+  }
+}
diff --git a/report/sonarqube/report.xml b/report/sonarqube/report.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<testExecutions version="1">
+    <file path="/Users/huynguyen/apps/dev/dev-react/test/components/button/index.test.tsx">
+        <testCase name="Component - Button should render correctly" duration="88"/>
+    </file>
+</testExecutions>
diff --git a/rollup.config.js b/rollup.config.js
@@ -0,0 +1,41 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import dts from 'rollup-plugin-dts';
+import postcss from 'rollup-plugin-postcss';
+import terser from '@rollup/plugin-terser';
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: 'dist/cjs/index.js',
+        format: 'cjs',
+        sourcemap: true,
+      },
+      {
+        file: 'dist/esm/index.js',
+        format: 'esm',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      resolve(),
+      commonjs(),
+      typescript({
+        declaration: false,
+        tsconfig: './tsconfig.json',
+      }),
+      postcss(),
+      terser(),
+    ],
+    external: ['react', 'react-dom'],
+  },
+  {
+    input: 'src/index.ts',
+    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
+    plugins: [dts()],
+    external: ['react', 'react-dom'],
+  },
+];
diff --git a/src/components/button/button.stories.tsx b/src/components/button/button.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Button } from './button';
+
+//👇 This default export determines where your story goes in the story list
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {},
+} satisfies Meta<typeof Button>;
+type Story = StoryObj<typeof meta>;
+
+export default meta;
+export const Default: Story = {
+  args: {
+    children: 'Button',
+    // eslint-disable-next-line no-undef
+    onClick: () => alert('Button clicked'),
+  },
+};
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { ButtonProps } from './button.types';
+
+export const Button: React.FC<ButtonProps> = ({ children, ...props }) => {
+  return <button {...props}>{children}</button>;
+};
diff --git a/src/components/button/button.types.ts b/src/components/button/button.types.ts
@@ -0,0 +1,2 @@
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
@@ -0,0 +1,2 @@
+export * from './button';
+export * from './button.types';
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -0,0 +1 @@
+export { Button } from './button';
diff --git a/src/index.ts b/src/index.ts
@@ -0,0 +1 @@
+export * from './components';
diff --git a/test/components/button/index.test.tsx b/test/components/button/index.test.tsx
@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import { Button } from '../../../src/components/button';
+import userEvent from '@testing-library/user-event';
+
+describe('Component - Button', () => {
+  const onClickMock = jest.fn();
+
+  it('should render correctly', async () => {
+    render(<Button onClick={onClickMock}>Click Me</Button>);
+
+    const button = screen.getByText('Click Me');
+    await userEvent.click(button);
+
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "jsx": "react-jsx",
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": "src"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+a design-system for nqh.d3v application`