feat: initial commit

pre-files/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
+}

pre-files/.eslintrc.js

@@ -0,0 +1,43 @@
+module.exports = {
+  env: {
+    browser: true,
+  },
+  parser: 'babel-eslint',
+  extends: ['airbnb', 'prettier', 'prettier/react'],
+  plugins: ['react', 'prettier', 'babel'],
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      jsx: true,
+      classes: true,
+    },
+  },
+  rules: {
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
+    'react/jsx-props-no-spreading': 'off',
+    complexity: ['error', 10],
+    indent: ['error', 2],
+    'babel/new-cap': 1,
+    'babel/camelcase': 1,
+    'babel/no-invalid-this': 1,
+    'babel/object-curly-spacing': 0,
+    'babel/quotes': 0,
+    'defatul-case': 'off',
+    'babel/semi': 1,
+    'babel/valid-typeof': 1,
+    'react/static-property-placement': 0,
+    'react/state-in-constructor': 0,
+    'react/prop-types': 1,
+    'no-unused-vars': ['error'], // This will flag unused variables
+    'unused-imports/no-unused-imports': 'error', // This will flag unused imports
+    'unused-imports/no-unused-vars': [
+      'warn',
+      {
+        vars: 'all',
+        varsIgnorePattern: '^_',
+        args: 'after-used',
+        argsIgnorePattern: '^_',
+      },
+    ],
+  },
+};

pre-files/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 80
+}

pre-files/check-format.js

@@ -0,0 +1,25 @@
+const { exec } = require('child_process');
+const { promisify } = require('util');
+
+const execPromise = promisify(exec);
+
+async function run() {
+  // Dynamically import the ES Module
+  const ora = (await import('ora')).default;
+
+  const spinner = ora('✨ Checking code formatting...').start();
+
+  try {
+    const { stdout } = await execPromise(
+      'npm run pretty-quick --check . --config .prettierrc'
+    );
+    spinner.succeed('✅ Code formatting check passed.');
+    console.log(stdout);
+  } catch (error) {
+    spinner.fail('❌ Code formatting check failed.');
+    console.error(error.message);
+    process.exit(1);
+  }
+}
+
+run();

pre-files/commit-msg-linter.js

@@ -0,0 +1,167 @@
+const { exec, execSync } = require('child_process');
+const { promises: fs } = require('fs');
+const chalk = require('chalk');
+
+const commitTypes = {
+  feat: '✨',
+  fix: '🐛',
+  docs: '📚',
+  style: '🎨',
+  refactor: '🔨',
+  test: '✅',
+  chore: '🛠️',
+};
+
+const defaultEmoji = '🔖'; // Default emoji if the commit type is not found
+
+async function run() {
+  // Dynamically import the ES Module
+  const ora = (await import('ora')).default;
+
+  const spinner = ora('Running custom commit message check...').start();
+
+  try {
+    console.log(chalk.blue('🔍 Running custom commit message check...'));
+    console.log();
+
+    // Get the commit message file path from the command line arguments
+    const commitMsgFile = process.argv[2];
+
+    if (!commitMsgFile) {
+      spinner.fail('❌ Error: Commit message file path not provided.');
+      console.error(
+        chalk.red('❌ Error: Commit message file path not provided.')
+      );
+      process.exit(1);
+    }
+
+    const commitMsg = (await fs.readFile(commitMsgFile, 'utf8')).trim();
+
+    // Check for duplicate commit messages in the last 100 commits
+    const duplicateCommitMsg = execSync(`git log -n 100 --pretty=format:%s`)
+      .toString()
+      .split('\n')
+      .some((msg) => msg.trim() === commitMsg);
+
+    if (duplicateCommitMsg) {
+      spinner.fail('❌ Duplicate commit message detected.');
+      console.error(
+        chalk.red(
+          '❌ Duplicate commit message detected. Please use a unique commit message.'
+        )
+      );
+      console.log();
+      process.exit(1);
+    }
+
+    spinner.succeed('✅ Message is not duplicated');
+    console.log(chalk.green('✅ Message is not duplicated'));
+    console.log();
+  } catch (err) {
+    spinner.fail('❌ Error running custom commit message check.');
+    console.error(chalk.red('❌ Error:', err));
+    process.exit(1);
+  }
+
+  spinner.start('Running commitlint...');
+
+  try {
+    console.log(chalk.blue('🔍 Running commitlint...'));
+    console.log();
+
+    const commitMsgFile = process.argv[2];
+
+    if (!commitMsgFile) {
+      spinner.fail('❌ Error: Commit message file path not provided.');
+      console.error(
+        chalk.red('❌ Error: Commit message file path not provided.')
+      );
+      process.exit(1);
+    }
+
+    const commitMsg = (await fs.readFile(commitMsgFile, 'utf8')).trim();
+
+    // Run commitlint
+    exec(
+      `npx commitlint --edit ${commitMsgFile}`,
+      async (error, stdout, stderr) => {
+        if (error) {
+          spinner.fail('❌ Commitlint check failed.');
+          console.error(chalk.red(stdout || stderr));
+          console.error(chalk.red('❌ Commitlint check failed.'));
+          console.log();
+          console.error(
+            chalk.yellow(
+              '💡 Hint: Commit message should follow the Conventional Commits standard.'
+            )
+          );
+          console.error(
+            chalk.yellow(
+              '👀 See: https://www.conventionalcommits.org/en/v1.0.0/'
+            )
+          );
+          console.error(chalk.yellow('📋 Examples:'));
+          console.error(chalk.yellow('  feat: add a new feature'));
+          console.error(chalk.yellow('  fix: fix a bug'));
+          console.error(chalk.yellow('  docs: update documentation'));
+          console.error(
+            chalk.yellow(
+              '  style: improve formatting, missing semi colons, etc'
+            )
+          );
+          console.error(
+            chalk.yellow(
+              '  refactor: code change that neither fixes a bug nor adds a feature'
+            )
+          );
+          console.error(chalk.yellow('  test: add or modify tests'));
+          console.error(
+            chalk.yellow(
+              "  chore: maintain tasks that don't fit in other categories"
+            )
+          );
+          process.exit(1);
+        } else {
+          spinner.succeed('✅ Commitlint check passed.');
+          console.log(chalk.green('✅ Commitlint check passed.'));
+          console.log(chalk.green(stdout));
+
+          // Add emoji to the commit message
+          const commitRegex =
+            /^(feat|fix|docs|style|refactor|test|chore)(\(.+\))?:\s.+/;
+          const match = commitMsg.match(commitRegex);
+
+          if (match) {
+            const commitType = match[1];
+            const emoji = commitTypes[commitType] || defaultEmoji;
+            const newCommitMsg = `${emoji} ${commitMsg}`;
+
+            // Write the updated commit message back to the file
+            await fs.writeFile(commitMsgFile, newCommitMsg + '\n', 'utf8');
+            console.log(
+              chalk.green('✅ Commit message updated with emoji:'),
+              newCommitMsg
+            );
+          } else {
+            const newCommitMsg = `${defaultEmoji} ${commitMsg}`;
+            await fs.writeFile(commitMsgFile, newCommitMsg + '\n', 'utf8');
+            console.log(
+              chalk.yellow(
+                '⚠️  Commit message did not match expected format, added default emoji:'
+              ),
+              newCommitMsg
+            );
+          }
+
+          process.exit(0);
+        }
+      }
+    );
+  } catch (err) {
+    spinner.fail('❌ Error running commitlint.');
+    console.error(chalk.red('❌ Error:', err));
+    process.exit(1);
+  }
+}
+
+run();

pre-files/lint-check.js

@@ -0,0 +1,47 @@
+const { exec, execSync } = require('child_process');
+const { promises: fs } = require('fs');
+const chalk = require('chalk');
+
+async function runCommand(command, description) {
+  // Dynamically import the ES Module
+  const ora = (await import('ora')).default;
+
+  const spinner = ora(`Running ${description}...`).start();
+
+  return new Promise((resolve, reject) => {
+    exec(command, (error, stdout, stderr) => {
+      if (error) {
+        spinner.fail(`${description} failed.`);
+        console.error(chalk.red(`❌ ${description} failed.`));
+        console.error(chalk.red(stderr));
+        reject(new Error(stderr));
+      } else {
+        spinner.succeed(`${description} passed.`);
+        console.log(chalk.green(`✅ ${description} passed.`));
+        console.log(stdout);
+        resolve();
+      }
+    });
+  });
+}
+
+async function runLint() {
+  try {
+    await runCommand('npm run lint:prettier', 'Prettier check');
+    //await runCommand('yarn lint:html', 'ESLint HTML report');
+    console.log(chalk.green('🎉 All checks passed.'));
+    process.exit(0);
+  } catch (err) {
+    console.error(chalk.red('❌ Lint checks failed.'));
+    console.error(chalk.red('😢 Oh no! Your code is not pretty enough.'));
+    console.error(chalk.red('Please fix the issues above and try again.'));
+    console.error(
+      chalk.yellow(
+        `💡 Hint: You can run ${chalk.cyan('yarn prettier')} to automatically format your code.`
+      )
+    );
+    process.exit(1);
+  }
+}
+
+runLint();

pre-files/prettier-commit.js

@@ -0,0 +1,45 @@
+const { execSync } = require('child_process');
+
+(async () => {
+  const ora = (await import('ora')).default;
+  const spinner = ora('Running Prettier...').start();
+
+  try {
+    // Run Prettier
+    execSync('npm run prettier', { stdio: 'inherit' });
+    spinner.succeed('Prettier has formatted the files.');
+
+    // Check for changes
+    spinner.start('Checking for changes...');
+    const changes = execSync('git status --porcelain', { encoding: 'utf-8' });
+
+    if (changes) {
+      spinner.succeed('Changes detected.');
+      // Read the latest commit message to ensure uniqueness
+      const latestCommitMessage = execSync('git log -1 --pretty=%B', {
+        encoding: 'utf-8',
+      }).trim();
+
+      // Generate a unique commit message
+      let commitMessage = 'style: format with prettier';
+      if (latestCommitMessage.includes(commitMessage)) {
+        commitMessage = `style: format with prettier ${Date.now()}`;
+      }
+
+      // Add and commit changes
+      spinner.start('Adding changes to Git...');
+      execSync('git add .', { stdio: 'inherit' });
+      spinner.succeed('Changes added to Git.');
+
+      spinner.start('Committing changes...');
+      execSync(`git commit -m "${commitMessage}"`, { stdio: 'inherit' });
+      spinner.succeed('Changes committed.');
+    } else {
+      spinner.info('No changes detected by Prettier.');
+    }
+  } catch (error) {
+    spinner.fail('An error occurred while running Prettier.');
+    console.error(error);
+    process.exit(1);
+  }
+})();

pre-files/src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

pre-files/src/App.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import logo from './logo.svg';
+import './styles/App.scss';
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.tsx</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  );
+}
+
+export default App;

pre-files/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

pre-files/src/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

pre-files/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

pre-files/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

pre-files/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

pre-files/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

pre-files/src/store/index.ts

@@ -0,0 +1,10 @@
+import { configureStore } from '@reduxjs/toolkit';
+
+const store = configureStore({
+  reducer: {
+    // Add your reducers here
+  },
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
+});
+
+export default store;

pre-files/src/styles/App.scss

@@ -0,0 +1,41 @@
+$primary-color: #3498db;
+
+.App {
+  background-color: $primary-color;
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

pre-files/webpack.config.js

@@ -0,0 +1,94 @@
+const path = require('path');
+const Dotenv = require('dotenv-webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+console.log('PUBLIC_URL:', process.env.PUBLIC_URL);
+
+module.exports = {
+  mode: 'development',
+  entry: './src/index.tsx',
+  target: 'web',
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              ['@babel/preset-env', { targets: { esmodules: true } }],
+              '@babel/preset-react',
+              '@babel/preset-typescript',
+            ],
+          },
+        },
+      },
+      {
+        test: [/\.s[ac]ss$/i, /\.css$/i],
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.svg$/,
+        use: ['@svgr/webpack'],
+      },
+      {
+        test: /\.(png|jpg|jpeg|gif|bmp|webp|svg)$/, // Handle various image formats
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 8192, // Inline images below 8KB as base64 URLs, otherwise fallback to file-loader
+              name: '[name].[hash:8].[ext]',
+              outputPath: 'static/media/', // Output folder for images
+              esModule: false, // To avoid issues with React's handling of imports
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new Dotenv({
+      path: path.resolve(__dirname, '.env'), // Load the .env file from the project root
+    }),
+    new HtmlWebpackPlugin({
+      template: './public/index.html',
+      filename: './index.html',
+      favicon: './public/favicon.ico',
+      publicPath: process.env.PUBLIC_URL || '/',
+      inject: true,
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+  ],
+  resolve: {
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    alias: {
+      '@atoms': path.resolve(__dirname, 'src/components/atoms'),
+      '@molecules': path.resolve(__dirname, 'src/components/molecules'),
+      '@organisms': path.resolve(__dirname, 'src/components/organisms'),
+      '@templates': path.resolve(__dirname, 'src/components/templates'),
+      '@pages': path.resolve(__dirname, 'src/components/pages'),
+      '@src': path.resolve(__dirname, 'src'),
+      antd: path.resolve(__dirname, 'node_modules/antd'),
+    },
+    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
+  },
+  output: {
+    filename: 'app.js',
+    path: path.resolve(__dirname, 'build', 'js'),
+    publicPath: process.env.PUBLIC_URL || '/',
+  },
+  devServer: {
+    historyApiFallback: true,
+    static: {
+      directory: path.join(__dirname, 'public'),
+    },
+    compress: true,
+    port: 3000,
+    hot: true,
+    open: true,
+  },
+};