Rv 276

.eslintrc.cjs

@@ -0,0 +1,20 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution');
+
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'plugin:vue/vue3-strongly-recommended',
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier',
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+  },
+  rules: {
+    'vue/multi-word-component-names': 'off',
+  },
+};

.github/pull_request_template.md

@@ -0,0 +1,9 @@
+## Checklist
+
+- [ ] Test Coverage is 100% for the newly added code
+- [ ] Storybook stories are added/updated for the changed areas
+- [ ] Components standards defined [in this document](https://docs.google.com/document/d/16_Nd3VxE_lTD9pVkONQ0egn7IiwyX1pVXZjzl-V4tU8/) are followed
+- [ ] Code is linted properly
+- [ ] Developer testing is done for the affected areas
+- [ ] Package version updated (not applicable to ent branch)
+- [ ] Changelog.md updated on possible breaking (applicable to ent branch)

.github/workflows/publish.yml

@@ -0,0 +1,71 @@
+name: Publish
+
+on:
+  push:
+    branches:
+      - develop
+
+jobs:
+  publish:
+    if: github.repository == 'orangehrm/oxd'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Check version already published
+        run: |
+          set -x
+          npm -v
+          current_version=$(npm pkg get version | sed 's/"//g')
+          fetched_current_version=$(npm show @ohrm/oxd@$current_version version) || fetched_current_version=''
+          echo "current_version=$current_version" >> $GITHUB_ENV
+          echo "fetched_current_version=$fetched_current_version" >> $GITHUB_ENV
+          echo "current_published_version=$(npm show @ohrm/oxd version)" >> $GITHUB_ENV
+
+      - name: Allow only make patch, pre-releases
+        if: ${{ env.fetched_current_version == '' }}
+        run: |
+          npm i -g semver
+          current_published_version=${{ env.current_published_version }}
+          current_version=${{ env.current_version }}
+          fetched_current_version=${{ env.fetched_current_version }}
+          allowed_max_version=$(semver $current_published_version -i minor)
+          echo  "-----"
+          echo "Latest published: $current_published_version"
+          echo "Allowed upper bound: $allowed_max_version"
+          echo "Current version: $current_version"
+          echo  "-----"
+          version=$(semver -r ">$current_published_version <$allowed_max_version" $current_version -p)
+          if [[ $version != $current_version ]];
+          then
+            exit 1
+          fi
+
+      - name: Build
+        if: ${{ env.fetched_current_version == '' }}
+        run: |
+          yarn install
+          yarn build:oxd
+          cp LICENSE dist/LICENSE
+          cp README.md dist/README.md
+          cp THIRD-PARTY-LICENSE dist/THIRD-PARTY-LICENSE
+          (cat package.json | jq '.peerDependencies += {"vue": "3.x"}' | jq 'del(.private, .scripts, .dependencies.vue, .devDependencies)') > dist/package.json
+
+      - name: Upload build files
+        uses: actions/upload-artifact@v3
+        with:
+          name: oxd-build
+          path: dist
+
+      - name: Publish
+        if: ${{ env.fetched_current_version == '' }}
+        run: |
+          cd dist
+          npm publish --tag dev
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/type-check.yml

@@ -0,0 +1,26 @@
+name: Type Check
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install npm dependencies
+        run: yarn install
+      - name: Type check
+        run: yarn type-check

.gitignore

@@ -1,7 +1,12 @@
 .DS_Store
 node_modules
-/dist
-
+/build
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
 
 # local env files
 .env.local
@@ -21,3 +26,10 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+# Coverage report
+src/coverage/*
+
+# Build
+dist/
+tsconfig.build.tsbuildinfo

.storybook/main.js

@@ -0,0 +1,25 @@
+const path = require('path');
+module.exports = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  async viteFinal(config) {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@': path.resolve(__dirname, '../src'),
+    };
+
+    return config;
+  },
+  staticDirs: ['../public'],
+};

.storybook/manager-head.html

@@ -0,0 +1 @@
+<link rel="shortcut icon" href="orange.ico" />

.storybook/manager.js

@@ -0,0 +1,15 @@
+import {version} from '../package.json';
+import {addons} from '@storybook/addons';
+import {create} from '@storybook/theming';
+
+const orangehrmTheme = create({
+  base: 'light',
+  brandTitle: `OXD Storybook - ${version}`,
+  brandUrl: 'https://www.orangehrm.com',
+  brandImage:
+    'https://www.orangehrm.com/_resources/themes/orangehrm/dist/images/OrangeHRM_Logo.svg',
+});
+
+addons.setConfig({
+  theme: orangehrmTheme,
+});

.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<link rel="stylesheet" href="fonts.css" />
+<link rel="stylesheet" href="icons.css" />
+<script>
+  window.global = window;
+</script>

.storybook/preview.js

@@ -0,0 +1,56 @@
+import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
+
+// https://storybook.js.org/docs/react/essentials/viewport
+const customViewports = {
+  xs: {
+    name: 'XS',
+    styles: {
+      width: '480px',
+      height: '600px',
+    },
+  },
+  s: {
+    name: 'S',
+    styles: {
+      width: '640px',
+      height: '801px',
+    },
+  },
+  m: {
+    name: 'M',
+    styles: {
+      width: '960px',
+      height: '700px',
+    },
+  },
+  l: {
+    name: 'L',
+    styles: {
+      width: '1200px',
+      height: '800px',
+    },
+  },
+  xl: {
+    name: 'XL',
+    styles: {
+      width: '1400px',
+      height: '900px',
+    },
+  },
+};
+
+export const parameters = {
+  actions: {argTypesRegex: '^on[A-Z].*'},
+  viewport: {
+    viewports: {
+      ...MINIMAL_VIEWPORTS,
+      ...customViewports,
+    },
+  },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

.yarnrc.yml

@@ -0,0 +1,7 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
+    spec: "@yarnpkg/plugin-version"
+
+yarnPath: .yarn/releases/yarn-3.3.1.cjs

THIRD-PARTY-LICENSE

@@ -0,0 +1,17 @@
+Third Party Licenses
+====================
+
+This project includes material from the projects listed below.
+The original copyright notice and the license under which we received
+such Third Party IP, are set forth below.
+
+- Bootstrap Icons (https://github.com/twbs/icons)
+  Copyright (c) 2019-2021 The Bootstrap Authors
+  The MIT License, https://opensource.org/licenses/MIT
+
+- Nunito Font (https://github.com/googlefonts/NunitoSans)
+  Copyright (c) Vernon Adams <[email protected]>
+                Jacques Le Bailly <[email protected]>
+                Manvel Shmavonyan <[email protected]>
+                Alexei Vanyashin <[email protected]>
+  SIL OPEN FONT LICENSE, https://opensource.org/licenses/OFL-1.1

components/src/styles/_utility.scss

@@ -129,7 +129,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   width: max-content;
-  max-width: 300px;
+  max-width: 200px;
   padding: 0.25rem 0.5rem;
   border-radius: 0.5rem;
   box-shadow: 0px 25px 25px 0 rgba(0, 0, 0, 0.18);

public/fonts.css

@@ -0,0 +1,78 @@
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 200;
+  src: local(''),
+    url('./fonts/nunito-sans-v6-latin-ext_latin-200.woff2') format('woff2'),
+    url('./fonts/nunito-sans-v6-latin-ext_latin-200.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: local(''),
+    url('./fonts/nunito-sans-v6-latin-ext_latin-300.woff2') format('woff2'),
+    url('./fonts/nunito-sans-v6-latin-ext_latin-300.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local(''),
+    url('./fonts/nunito-sans-v6-latin-ext_latin-regular.woff2') format('woff2'),
+    url('./fonts/nunito-sans-v6-latin-ext_latin-regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: local(''),
+    url('./fonts/nunito-sans-v6-latin-ext_latin-italic.woff2') format('woff2'),
+    url('./fonts/nunito-sans-v6-latin-ext_latin-italic.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: local(''),
+    url('./fonts/nunito-sans-v6-latin-ext_latin-600.woff2') format('woff2'),
+    url('./fonts/nunito-sans-v6-latin-ext_latin-600.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local(''),
+    url('./fonts/nunito-sans-v6-latin-ext_latin-700.woff2') format('woff2'),
+    url('./fonts/nunito-sans-v6-latin-ext_latin-700.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 800;
+  src: local(''),
+    url('./fonts/nunito-sans-v6-latin-ext_latin-800.woff2') format('woff2'),
+    url('./fonts/nunito-sans-v6-latin-ext_latin-800.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 900;
+  src: local(''),
+    url('./fonts/nunito-sans-v6-latin-ext_latin-900.woff2') format('woff2'),
+    url('./fonts/nunito-sans-v6-latin-ext_latin-900.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'bootstrap-icons';
+  font-display: block;
+  src: url('./fonts/bootstrap-icons.woff2') format('woff2'),
+    url('./fonts/bootstrap-icons.woff') format('woff');
+}