hrm_ui_lib 1.0.0

package/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+  "plugins": ["@babel/plugin-transform-runtime"]
+}

package/.eslintignore

@@ -0,0 +1,5 @@
+build
+node_modules
+.github
+**/storybook/**
+**/stories/**

package/.eslintrc.yml

@@ -0,0 +1,43 @@
+env:
+  browser: true
+extends:
+  - 'eslint:recommended'
+  - 'plugin:react/recommended'
+  - 'plugin:@typescript-eslint/recommended'
+  - 'prettier'
+  - 'prettier/@typescript-eslint'
+  - 'prettier/react'
+parser: '@typescript-eslint/parser'
+parserOptions:
+  ecmaFeatures:
+    jsx: true
+  ecmaVersion: 12
+  sourceType: module
+plugins:
+  - react
+  - react-hooks
+  - '@typescript-eslint'
+rules:
+  "react/prop-types": "off"
+  "no-var": "error"
+  "prefer-const": "error"
+  "no-extra-bind": "error"
+  "no-implicit-globals": "error"
+  "react-hooks/rules-of-hooks": "error"
+  "react/no-unknown-property": ["error", { ignore: ["class"] }]
+  "@typescript-eslint/member-delimiter-style": ["warn", {
+    multiline: {
+      delimiter: 'none',
+      requireLast: false,
+    },
+    singleline: {
+      delimiter: 'comma',
+      requireLast: false,
+    },
+  }]
+  "quotes": ["error", "single", { "avoidEscape": true }]
+  'indent': 'off'
+settings:
+  react:
+    # If this line cause problem in future. Check https://github.com/yannickcr/eslint-plugin-react/issues/1955
+    version: 'detect'

package/.github/workflows/main.yml

@@ -0,0 +1,71 @@
+name: Publish Package
+
+on:
+  push:
+    branches:
+      - 'master'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          token: ${{ secrets.BOT_ACCESS_TOKEN }}
+      - name: Setup Git
+        run: |
+          git config --global user.name "dino-front-bot"
+          git config --global user.email "dinofront.libs@gmail.com"
+
+      - name: Specify Node Version
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm install --legacy-peer-deps
+
+      - name: Create .npmrc file
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_NEW_AUTH_TOKEN }}" > ~/.npmrc
+
+      - name: Build
+        run: npm run build
+
+      # Semantic Release
+      - name: Run Semantic Release
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_NEW_AUTH_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_NEW_AUTH_TOKEN }}
+        run: npx semantic-release
+
+      - run: echo "VERSION=$(npm run version --silent)" >> $GITHUB_ENV
+      - run: echo "PACKAGE_NAME=$(npm run name --silent)" >> $GITHUB_ENV
+
+      # # Slack notification
+      # - run: echo "PIPE_URL=$GITHUB_SERVER_URL/$GITHUB_REPOSITORY/actions/runs/$GITHUB_RUN_ID|Pipeline#$GITHUB_RUN_NUMBER" >> $GITHUB_ENV
+      # - name: Post to a Slack channel
+      #   id: slack
+      #   uses: slackapi/slack-github-action@v1.17.0
+      #   with:
+      #     payload: |
+      #       {"attachments":[{"color":"#70aeff","blocks":[{"type":"section","text":{"type":"mrkdwn","text":"Notification sent from <${{ env.PIPE_URL }}>"}},{"type":"section","text":{"type":"mrkdwn","text":"${{ env.PACKAGE_NAME }}@${{ env.VERSION }} has been published"}}]}]}
+      #   env:
+      #     SLACK_WEBHOOK_URL: ${{ secrets.WEB_SLACK_WEBHOOK_URL }}
+      #     SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
+
+      # Deployment on GitHub Pages
+      - name: Build Storybook
+        run: npm run build-storybook
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./storybook-static
+          enable_jekyll: false

package/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "parser": "typescript",
+  "arrowParens": "always",
+  "trailingComma" : "none"
+}

package/.releaserc

@@ -0,0 +1,21 @@
+{
+  "branches": ["master", { "name": "alpha", "prerelease": true }],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/changelog",
+    ["@semantic-release/npm", {"pkgRoot": "dist"}],
+    ["@semantic-release/npm", {"pkgRoot": ".", "npmPublish": false}],
+    "@semantic-release/github",
+    [
+      "@semantic-release/git",
+      {
+        "assets": ["package.json", "CHANGELOG.md"],
+        "message": "chore(release): ${nextRelease.version} [skip ci]"
+      }
+    ]
+  ],
+  "preset": "angular",
+  "tagFormat": "${version}",
+  "npmPublish": true
+}

package/.storybook/main.ts

@@ -0,0 +1,36 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import path from 'path';
+
+const config: StorybookConfig = {
+    framework: '@storybook/react-webpack5',
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    typescript: {
+        reactDocgen: 'react-docgen',
+    },
+    addons: [
+        { name: 'storybook-design-token', options: { preserveCSSVars: true } },
+        '@storybook/addon-viewport',
+        '@storybook/addon-controls',
+        // TODO check do wee need outlining
+        // '@storybook/addon-outline',
+        '@storybook/addon-links'
+    ],
+    webpackFinal: async (config, { configType }) => {
+        // @ts-ignore
+        config.module.rules.push({
+            test: /\.scss$/,
+            use: ['style-loader', 'css-loader', 'sass-loader'],
+            include: path.resolve(__dirname, '../')
+        }, {
+            test: /\.css$/,
+            use: ["style-loader", "css-loader"],
+            include: path.resolve(__dirname, '../'),
+            exclude: /node_modules/,
+        });
+        // @ts-ignore
+        config.resolve.extensions.push('.js', '.jsx', '.ts', '.tsx', '.css', '.scss');
+        return config
+    }
+};
+
+export default config;

package/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Armenian:wght@100;200;400;500;600;700;800;900&family=Noto+Sans:wght@100;300;500;600;700;800;900&display=swap" rel="stylesheet">

package/.storybook/preview.ts

@@ -0,0 +1,7 @@
+import "../src/assets/styles/index.scss";
+
+export const parameters = {
+    designToken: {
+        defaultTab: 'Colors'
+    }
+}

package/.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+  "javascript.validate.enable": false,
+  "javascript.format.enable": false,
+  "editor.formatOnSave": true,
+  "eslint.alwaysShowStatus": true,
+  "eslint.run": "onSave",
+  "prettier.semi": false,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact"
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "git-blame.gitWebUrl": ""
+}

package/bin/generate_svg_component.js

@@ -0,0 +1,112 @@
+const fs = require('fs');
+const path = require('path');
+
+const root = process.cwd();
+
+// Directory containing SVG files
+const svgDirectory = `${root}/svg-icons`;
+
+// Output directory for React components
+const outputDirectory = `${root}/src/components/SVGIcons`;
+
+function extractPathFromSvg(svgContent) {
+    const pattern = /<svg[^>]*>([\s\S]*?)<\/svg>/;
+    const match = svgContent.match(pattern);
+    if (match && match[1]) {
+        return match[1];
+    }
+    return null;
+}
+
+// Function to generate a valid React component name from SVG file name
+function generateComponentName(fileName) {
+    // Remove file extension (.svg)
+    const componentName = fileName.replace('.svg', '');
+
+    // Split the remaining string into words using hyphen as delimiter
+    const words = componentName.split('-');
+
+    // Capitalize the first letter of each word and join them
+    const capitalizedWords = words.map(word => word.charAt(0).toUpperCase() + word.slice(1));
+
+    // Concatenate the capitalized words to form the component name
+    const finalComponentName = capitalizedWords.join('');
+
+    // Add "Icon" prefix
+    return 'Icon' + finalComponentName;
+}
+
+
+// Function to generate React component code
+function generateReactComponent(componentName, svgPath) {
+    // Generate React component code using the provided SVG path
+    // You can use a template string or any templating library to generate the component
+    return `import React, { ReactElement } from 'react'
+import {ISVGIconProps} from './types';
+import classNames from 'classnames'
+
+export const ${componentName} = ({size, type, className = '', onClick, refHandler, id, dataId }: ISVGIconProps): ReactElement => (
+  <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={classNames('svg-icon', {
+          [\`svg-icon__size-\${size}\`]: size,
+          [\`svg-icon__type-\${type}\`]: type,
+          [className]: className
+      })}
+      viewBox="0 0 24 24"
+      fill="none"
+      onClick={onClick}
+      ref={refHandler}
+      id={id}
+      data-id={dataId ? \`\${dataId}-svg-icon\` : ''}
+  >
+      ${svgPath}
+  </svg>
+);
+
+export default ${componentName};`;
+}
+
+// Read SVG files from the directory
+fs.readdir(svgDirectory, (err, files) => {
+    if (err) {
+        console.error('Error reading directory:', err);
+        return;
+    }
+
+    // Process each SVG file
+    files.forEach(file => {
+        const filePath = path.join(svgDirectory, file);
+
+        // Read SVG content
+        fs.readFile(filePath, 'utf8', (err, data) => {
+            if (err) {
+                console.error('Error reading file:', err);
+                return;
+            }
+
+            // Parse SVG content and extract path
+            const svgPath = extractPathFromSvg(data);
+
+            // Function to generate a valid React component name from SVG file name
+            const componentName = generateComponentName(file);
+
+            const outputPath = path.join(outputDirectory, `${componentName}.tsx`);
+
+            if (fs.existsSync(outputPath)) {
+                return;
+            }
+            const reactComponent = generateReactComponent(componentName, svgPath);
+
+            // Write React component to file
+            fs.writeFile(outputPath, reactComponent, err => {
+                if (err) {
+                    console.error('Error writing file:', err);
+                    return;
+                }
+                console.log(`React component ${componentName} created successfully.`);
+            });
+        });
+    });
+});
+

package/bin/import_all_svg_components.js

@@ -0,0 +1,29 @@
+const path = require('path');
+const fs = require('fs');
+
+const root = process.cwd();
+
+// Directory containing SVG components
+const svgDirectory = `${root}/src/components/SVGIcons`;
+
+fs.readdir(svgDirectory, (err, files) => {
+    if (err) {
+        console.error('Error reading directory:', err);
+        return;
+    }
+
+    const outputPath = path.join(svgDirectory, 'index.ts');
+
+    const content = files.reduce((acc, file) => {
+        return file.includes('Icon') ? `${acc};export * from './${file.replace('.tsx', '')}';` : acc;
+    }, '');
+
+    fs.writeFile(outputPath, content, err => {
+        if (err) {
+            console.error('Error writing file:', err);
+            return;
+        }
+        console.log('All SVG components imported successfully.');
+    });
+});
+

package/commitlint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+};

package/package.json

@@ -0,0 +1,143 @@
+{
+  "homepage": "https://dinofrontend.github.io/dino_ui_library",
+  "name": "hrm_ui_lib",
+  "version": "1.0.0",
+  "description": "UI library for Dino",
+  "private": false,
+  "main": "index.js",
+  "scripts": {
+    "version": "echo $npm_package_version",
+    "name": "echo $npm_package_name",
+    "start": "react-scripts start",
+    "build": "rollup -c",
+    "eject": "react-scripts eject",
+    "storybook": "storybook dev -p 6006 public",
+    "build-storybook": "storybook build",
+    "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\"",
+    "prettier": "prettier --write \"./{src,stories}/**/**.{js,jsx,ts,tsx}\"",
+    "check": "npm run prettier && npm run lint && tsc",
+    "install-latest": "npm install --legacy-peer-deps",
+    "import-all-svg-components": "node ./bin/import_all_svg_components.js",
+    "publish-alpha-version": "cd \"./dist/\" && npm publish --tag alpha",
+    "generate-svg-component": "node ./bin/generate_svg_component.js && npm run import-all-svg-components && npm run check"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "yup": "^1.2.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.4.1",
+    "@commitlint/config-conventional": "^19.4.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^22.0.1",
+    "@rollup/plugin-dynamic-import-vars": "^2.1.2",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^10.1.7",
+    "@semantic-release/npm": "^12.0.1",
+    "@storybook/addon-actions": "^7.6.9",
+    "@storybook/addon-essentials": "^7.6.9",
+    "@storybook/addon-interactions": "^7.6.9",
+    "@storybook/addon-links": "^7.6.9",
+    "@storybook/node-logger": "^7.6.9",
+    "@storybook/react": "^7.6.10",
+    "@storybook/react-webpack5": "^7.6.9",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/node": "^16.11.43",
+    "@types/react-calendar": "^3.9.0",
+    "@types/react-datepicker": "^4.8.0",
+    "@types/react-syntax-highlighter": "^15.5.6",
+    "@types/react-table": "^7.7.18",
+    "@types/styled-components": "^5.1.25",
+    "@typescript-eslint/eslint-plugin": "^4.1.1",
+    "@typescript-eslint/parser": "^4.1.1",
+    "ajv": "8.13.0",
+    "css-loader": "^7.1.2",
+    "eslint": "^7.9.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.10",
+    "extract-loader": "^5.1.0",
+    "file-loader": "^6.2.0",
+    "husky": "^4.3.0",
+    "less": "^3.12.2",
+    "less-loader": "^7.0.1",
+    "mini-css-extract-plugin": "^0.11.3",
+    "postcss": "^8.1.9",
+    "postcss-import": "12.0.1",
+    "prettier": "^2.1.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "rollup": "^2.76.0",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-generate-package-json": "^3.2.0",
+    "rollup-plugin-ignore-import": "^1.3.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-sass": "^1.12.21",
+    "rollup-plugin-typescript2": "^0.32.1",
+    "sass-loader": "^10.4.1",
+    "semantic-release": "^24.1.0",
+    "storybook": "^7.6.14",
+    "style-loader": "^3.3.4",
+    "ts-loader": "^8.0.4",
+    "typescript": "^4.9.5",
+    "yup": "^1.2.0"
+  },
+  "dependencies": {
+    "@hookform/error-message": "^2.0.1",
+    "@hookform/resolvers": "^2.9.11",
+    "@types/react-input-mask": "^3.0.2",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.10",
+    "framer-motion": "4.1.17",
+    "react-datepicker": "^4.25.0",
+    "react-hook-form": "^7.50.0",
+    "react-input-mask": "^2.0.4",
+    "react-number-format": "^5.3.1",
+    "react-paginate": "^8.2.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-table": "^7.8.0",
+    "react-toastify": "10.0.5",
+    "sass": "^1.56.1",
+    "storybook-design-token": "^2.8.2"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run check",
+      "commit-msg": "commitlint --edit $1"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dinofrontend/dino_ui_library.git"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,149 @@
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import json from '@rollup/plugin-json'
+import copy from 'rollup-plugin-copy'
+import fs from 'fs'
+import path from 'path'
+import { exec } from 'child_process'
+import babel from 'rollup-plugin-babel'
+import pkg from './package.json'
+import generatePackageJson from 'rollup-plugin-generate-package-json'
+import image from '@rollup/plugin-image'
+import postcss from 'rollup-plugin-postcss'
+import { renderSync } from 'sass'
+
+const extensions = ['.ts', '.tsx', '.js', '.jsx']
+const ignoreExtensions = ['.stories.tsx', '.stories.d.ts']
+
+const external = [
+  ...Object.keys(pkg.peerDependencies || {}),
+  ...Object.keys(pkg.dependencies || {})
+]
+
+// create input config for rollup for each folder
+const getInputOptions = (localPath = 'src', currentInputOptions = {}) => {
+  return fs.readdirSync(path.join(__dirname, localPath)).reduce((initial, current) => {
+    if (fs.statSync(path.join(__dirname, `${localPath}/${current}`)).isDirectory()) {
+      getInputOptions(`${localPath}/${current}`, initial)
+    } else {
+      const regexExecResult = /(.+?)(\.[^.]*$|$)/g.exec(current)
+      const chunkName = `${localPath}/${regexExecResult[1]}`.replace(/^src\/?/g, '')
+      if (
+        extensions.includes(regexExecResult[2]) &&
+        !ignoreExtensions.some((e) => regexExecResult[0].endsWith(e))
+      ) {
+        initial[chunkName] = `${localPath}/${current}`
+      }
+    }
+    return initial
+  }, currentInputOptions)
+}
+
+// custom plugin to generate declaration files
+const dtsGenerator = function (options) {
+  options = {
+    declarationDir: 'dist',
+    outDir: 'dts-temp',
+    ...(options || {})
+  }
+  return {
+    buildEnd() {
+      exec(
+        `tsc -d --declarationDir ${options.declarationDir} --outDir ${options.outDir} --project ./tsconfig.json`,
+        (err) => {
+          if (err) {
+            console.log(err)
+            throw "Couldn't generate .d.ts files..."
+          }
+          exec(`rimraf ${options.outDir}`)
+          console.log('Declaration files generated successfully')
+        }
+      )
+    }
+  }
+}
+
+function writeCSS() {
+  return {
+    name: 'write-css',
+    async generateBundle(_, bundle) {
+      const scssFile = bundle['assets/styles/styles.scss']
+
+      if (scssFile) {
+        const scssContent = scssFile.source.toString()
+        const cssContent = renderSync({ data: scssContent }).css.toString()
+
+        if (!fs.existsSync('dist/assets/styles')) {
+          fs.mkdirSync('dist/assets/styles', { recursive: true })
+        }
+
+        const cssFilePath = path.resolve('dist/assets/styles/styles.css')
+        fs.writeFileSync(cssFilePath, cssContent)
+      }
+    }
+  }
+}
+
+const plugins = [
+  json(),
+  resolve({ extensions }),
+  babel({
+    babelrc: true,
+    extensions,
+    runtimeHelpers: true,
+    exclude: 'node_modules/**',
+    presets: ['@babel/preset-env']
+  }),
+  commonjs({ include: 'node_modules/**' }),
+  postcss({
+    plugins: [],
+    inject: false,
+    extract: 'assets/styles/styles.scss',
+    sourceMap: false,
+    minimize: true,
+    extensions: ['.scss', '.css']
+  }),
+  copy({
+    targets: [
+      { src: 'src/assets/images/', dest: 'dist' },
+      { src: 'src/assets/styles/helpers/_mixin.scss', dest: 'dist' },
+      { src: './README.md', dest: 'dist' }
+    ],
+    flatten: false
+  }),
+  image(),
+  writeCSS()
+]
+
+export default [
+  {
+    input: getInputOptions(),
+    output: {
+      dir: 'dist',
+      assetFileNames: '[name][extname]',
+      sourcemap: false
+    },
+    external,
+    plugins: [
+      ...plugins,
+      dtsGenerator(),
+      generatePackageJson({
+        inputFolder: '.',
+        baseContents: (pkg) => ({
+          name: pkg.name,
+          version: pkg.version,
+          description: pkg.description,
+          main: './index.js',
+          module: './index.js',
+          author: pkg.author,
+          license: pkg.license,
+          repository: pkg.repository,
+          peerDependencies: pkg.peerDependencies,
+          dependencies: pkg.dependencies,
+          sideEffects: false,
+          homepage: pkg.homepage
+        })
+      })
+    ]
+  }
+]