gh pages

plgd-dev · Apr 15, 2024 · e3bfc1b · e3bfc1b
1 parent 6fedaea
commit e3bfc1b
Show file tree

Hide file tree

Showing 17 changed files with 229 additions and 21 deletions.
diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
@@ -0,0 +1,42 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+# ESLint is a tool for identifying and reporting on patterns
+# found in ECMAScript/JavaScript code.
+# More details at https://github.com/eslint/eslint
+# and https://eslint.org
+
+name: ESLint
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "main" ]
+
+jobs:
+  eslint:
+    name: Run eslint scanning
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      security-events: write
+      actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run ESLint
+        run: :lint:eslint:gh
+        continue-on-error: true
+
+      - name: Upload analysis results to GitHub
+        uses: github/codeql-action/upload-sarif@v2
+        with:
+          sarif_file: eslint-results.sarif
+          wait-for-processing: true
diff --git a/.github/workflows/storybook-deploy.yml b/.github/workflows/storybook-deploy.yml
@@ -1,18 +1,27 @@
+name: Build and Publish Storybook to GitHub Pages
+
 on:
+
   push:
     branches:
-      - main
+      - 'main'
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
 jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3      
+      - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 20
-      - name: Install dependencies
-        run: npm install
-      - name: Deploy storybook
-        run: npm run deploy-storybook -- --ci
+          node-version: '20.x'
+      - uses: bitovi/[email protected]
+        with:
+          path: storybook-static
+          checkout: false
         env:
           GH_TOKEN: ${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -28,4 +28,5 @@ yarn-debug.log*
 yarn-error.log*
 
 *storybook.log
-test-report.xml
+test-report.xml
+eslint-results.sarif
diff --git a/package.json b/package.json
@@ -21,16 +21,16 @@
     "build:stable:watch": "node ./scripts/build stable --watch",
     "build:copy-files": "node ./scripts/copy-files.js",
     "lint": "npm-run-all :lint:eslint :lint:prettier",
-    ":lint:eslint": "eslint --ext .js,.jsx,.ts,.tsx -c .eslintrc.js --max-warnings 0 --fix --format=pretty ./src",
+    ":lint:eslint": "eslint --ext .js,.jsx,.ts,.tsx -c .eslintrc.js --max-warnings 0 ./src",
+    ":lint:eslint:gh": "eslint --ext .js,.jsx,.ts,.tsx -c .eslintrc.js --max-warnings 0 --format @microsoft/eslint-formatter-sarif --output-file eslint-results.sarif ./src",
     ":lint:prettier": "prettier ./src --check",
     "prebuild": "rimraf build",
     "icons:create": "npx @svgr/cli --config-file ./config/.svgrrc.js -d ./src/components/Atomic/Icon/components ./src/components/Atomic/Icon/assets",
     ":generate:theme:build": "node ./scripts/build.theme.js",
     ":generate:theme:clean": "rimraf ./build/lib",
     ":generate:theme": "npm-run-all :generate:theme:build :generate:theme:clean",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "deploy-storybook": "storybook-to-ghpages --dry-run"
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@babel/core": "^7.23.3",
@@ -50,6 +50,7 @@
     "@floating-ui/react-dom-interactions": "^0.13.3",
     "@lezer/highlight": "^1.2.0",
     "@mdx-js/react": "^2.3.0",
+    "@microsoft/eslint-formatter-sarif": "^3.1.0",
     "@opentelemetry/api": "^1.7.0",
     "@opentelemetry/context-zone": "^1.18.1",
     "@opentelemetry/core": "^1.18.1",

diff --git a/src/components/Atomic/TreeTable/TreeTable.tsx b/src/components/Atomic/TreeTable/TreeTable.tsx
@@ -9,7 +9,7 @@ import { Props, defaultProps } from './TreeTable.types'
 import { compareIgnoreCase } from '../TableNew/Utils'
 import { convertSize, IconTableArrowDown, IconTableArrowUp } from '../Icon'
 import ConditionalWrapper from '../ConditionalWrapper'
-import { ReactComponent as IconSubLine } from './assets/sub-line.svg'
+import IconSubLine from './assets/IconSubLine'
 
 const defaultPropGetter = () => ({})
 

diff --git a/src/components/Atomic/TreeTable/assets/IconSubLine.tsx b/src/components/Atomic/TreeTable/assets/IconSubLine.tsx
@@ -0,0 +1,18 @@
+import { FC } from 'react'
+
+const IconSubLine: FC<any> = () => {
+    return (
+        <svg fill='none' height='29' viewBox='0 0 15 29' width='15' xmlns='http://www.w3.org/2000/svg'>
+            <path
+                clip-rule='evenodd'
+                d='M0.5 0C0.776142 0 1 0.141128 1 0.315217V23.6413C1 26.2527 4.35786 28.3696 8.5 28.3696H14.5C14.7761 28.3696 15 28.5107 15 28.6848C15 28.8589 14.7761 29 14.5 29H8.5C3.80558 29 0 26.6008 0 23.6413V0.315217C0 0.141128 0.223858 0 0.5 0Z'
+                fill='#D7D8DA'
+                fill-rule='evenodd'
+            />
+        </svg>
+    )
+}
+
+IconSubLine.displayName = 'IconSubLine'
+
+export default IconSubLine
diff --git a/src/components/Templates/SignInForm/SignInForm.tsx b/src/components/Templates/SignInForm/SignInForm.tsx
@@ -2,9 +2,10 @@ import React, { FC } from 'react'
 import { Props, defaultProps } from './SignInForm.types'
 import * as styles from './SignInForm.styles'
 import Button from '../../Atomic/Button'
-import { ReactComponent as IconApple } from './assets/icon-apple.svg'
-import { ReactComponent as IconGoogle } from './assets/icon-google.svg'
-import { ReactComponent as IconGithub } from './assets/icon-github.svg'
+
+import IconApple from './assets/IconApple'
+import IconGoogle from './assets/IconGoogle'
+import IconGitHub from './assets/IconGitHub'
 
 const SignInForm: FC<Props> = (props) => {
     const { action, autoComplete, className, id, inputs, actions, cta, socialProviders, method, terms, onSubmit } = { ...defaultProps, ...props }
@@ -16,7 +17,7 @@ const SignInForm: FC<Props> = (props) => {
             case 'google':
                 return <IconGoogle />
             case 'github':
-                return <IconGithub />
+                return <IconGitHub />
         }
     }
 

diff --git a/src/components/Templates/SignInForm/assets/IconApple.tsx b/src/components/Templates/SignInForm/assets/IconApple.tsx
@@ -0,0 +1,16 @@
+import { FC } from 'react'
+
+const IconApple: FC<any> = () => {
+    return (
+        <svg fill='none' height='20' viewBox='0 0 18 20' width='18' xmlns='http://www.w3.org/2000/svg'>
+            <path
+                d='M16.6223 6.81868C16.5063 6.90869 14.4581 8.06281 14.4581 10.6291C14.4581 13.5974 17.0644 14.6475 17.1424 14.6735C17.1304 14.7375 16.7283 16.1116 15.7682 17.5118C14.9121 18.7439 14.0181 19.974 12.6579 19.974C11.2978 19.974 10.9477 19.1839 9.37759 19.1839C7.84743 19.1839 7.30338 20 6.05925 20C4.81513 20 3.94704 18.8599 2.94894 17.4597C1.79283 15.8156 0.858734 13.2613 0.858734 10.8371C0.858734 6.94869 3.38699 4.88649 5.87524 4.88649C7.19737 4.88649 8.29948 5.75458 9.12956 5.75458C9.91964 5.75458 11.1518 4.83448 12.6559 4.83448C13.226 4.83448 15.2742 4.88649 16.6223 6.81868ZM11.9418 3.18832C12.5639 2.45024 13.0039 1.42614 13.0039 0.40204C13.0039 0.260026 12.9919 0.116012 12.9659 0C11.9538 0.0380038 10.7497 0.674067 10.0237 1.51615C9.45359 2.16422 8.92154 3.18832 8.92154 4.22642C8.92154 4.38244 8.94754 4.53845 8.95954 4.58846C9.02355 4.60046 9.12756 4.61446 9.23157 4.61446C10.1397 4.61446 11.2818 4.0064 11.9418 3.18832Z'
+                fill='#191A1A'
+            />
+        </svg>
+    )
+}
+
+IconApple.displayName = 'IconApple'
+
+export default IconApple
diff --git a/src/components/Templates/SignInForm/assets/IconGitHub.tsx b/src/components/Templates/SignInForm/assets/IconGitHub.tsx
@@ -0,0 +1,16 @@
+import { FC } from 'react'
+
+const IconGitHub: FC<any> = () => {
+    return (
+        <svg fill='none' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'>
+            <path
+                d='M6.68952 15.5234C6.68952 15.6016 6.59677 15.6641 6.47984 15.6641C6.34677 15.6758 6.25403 15.6133 6.25403 15.5234C6.25403 15.4453 6.34677 15.3828 6.46371 15.3828C6.58468 15.3711 6.68952 15.4336 6.68952 15.5234ZM5.43548 15.3477C5.40726 15.4258 5.4879 15.5156 5.60887 15.5391C5.71371 15.5781 5.83468 15.5391 5.85887 15.4609C5.88306 15.3828 5.80645 15.293 5.68548 15.2578C5.58064 15.2305 5.46371 15.2695 5.43548 15.3477ZM7.21774 15.2813C7.10081 15.3086 7.02016 15.3828 7.03226 15.4727C7.04435 15.5508 7.14919 15.6016 7.27016 15.5742C7.3871 15.5469 7.46774 15.4727 7.45564 15.3945C7.44355 15.3203 7.33468 15.2695 7.21774 15.2813ZM9.87097 0.3125C4.27823 0.3125 0 4.42578 0 9.84375C0 14.1758 2.81452 17.8828 6.83468 19.1875C7.35081 19.2773 7.53226 18.9688 7.53226 18.7148C7.53226 18.4727 7.52016 17.1367 7.52016 16.3164C7.52016 16.3164 4.69758 16.9023 4.10484 15.1523C4.10484 15.1523 3.64516 14.0156 2.98387 13.7227C2.98387 13.7227 2.06048 13.1094 3.04839 13.1211C3.04839 13.1211 4.05242 13.1992 4.60484 14.1289C5.4879 15.6367 6.96774 15.2031 7.54435 14.9453C7.6371 14.3203 7.89919 13.8867 8.18952 13.6289C5.93548 13.3867 3.66129 13.0703 3.66129 9.3125C3.66129 8.23828 3.96774 7.69922 4.6129 7.01172C4.50806 6.75781 4.16532 5.71094 4.71774 4.35937C5.56048 4.10547 7.5 5.41406 7.5 5.41406C8.30645 5.19531 9.17339 5.08203 10.0323 5.08203C10.8911 5.08203 11.7581 5.19531 12.5645 5.41406C12.5645 5.41406 14.504 4.10156 15.3468 4.35937C15.8992 5.71484 15.5565 6.75781 15.4516 7.01172C16.0968 7.70313 16.4919 8.24219 16.4919 9.3125C16.4919 13.082 14.1169 13.3828 11.8629 13.6289C12.2339 13.9375 12.5484 14.5234 12.5484 15.4414C12.5484 16.7578 12.5363 18.3867 12.5363 18.707C12.5363 18.9609 12.7218 19.2695 13.2339 19.1797C17.2661 17.8828 20 14.1758 20 9.84375C20 4.42578 15.4637 0.3125 9.87097 0.3125ZM3.91935 13.7852C3.86694 13.8242 3.87903 13.9141 3.94758 13.9883C4.0121 14.0508 4.10484 14.0781 4.15726 14.0273C4.20968 13.9883 4.19758 13.8984 4.12903 13.8242C4.06452 13.7617 3.97177 13.7344 3.91935 13.7852ZM3.48387 13.4687C3.45565 13.5195 3.49597 13.582 3.57661 13.6211C3.64113 13.6602 3.72177 13.6484 3.75 13.5938C3.77823 13.543 3.7379 13.4805 3.65726 13.4414C3.57661 13.418 3.5121 13.4297 3.48387 13.4687ZM4.79032 14.8594C4.72581 14.9102 4.75 15.0273 4.84274 15.1016C4.93548 15.1914 5.05242 15.2031 5.10484 15.1406C5.15726 15.0898 5.13306 14.9727 5.05242 14.8984C4.96371 14.8086 4.84274 14.7969 4.79032 14.8594ZM4.33065 14.2852C4.26613 14.3242 4.26613 14.4258 4.33065 14.5156C4.39516 14.6055 4.50403 14.6445 4.55645 14.6055C4.62097 14.5547 4.62097 14.4531 4.55645 14.3633C4.5 14.2734 4.39516 14.2344 4.33065 14.2852Z'
+                fill='#191A1A'
+            />
+        </svg>
+    )
+}
+
+IconGitHub.displayName = 'IconGitHub'
+
+export default IconGitHub
diff --git a/src/components/Templates/SignInForm/assets/IconGoogle.tsx b/src/components/Templates/SignInForm/assets/IconGoogle.tsx
@@ -0,0 +1,16 @@
+import { FC } from 'react'
+
+const IconGoogle: FC<any> = () => {
+    return (
+        <svg fill='none' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'>
+            <path
+                d='M18.9321 8.33335H10.1818V12.0833H15.141C14.3488 14.5835 12.391 15.4169 10.1421 15.4169C9.27085 15.418 8.41222 15.2088 7.63904 14.8073C6.86586 14.4058 6.20094 13.8237 5.70069 13.1104C5.20044 12.3971 4.87963 11.5736 4.76547 10.7099C4.65131 9.84621 4.74718 8.9677 5.04493 8.14893C5.34268 7.33017 5.83354 6.5953 6.47585 6.00668C7.11816 5.41806 7.89298 4.99306 8.73456 4.76773C9.57615 4.5424 10.4597 4.5234 11.3102 4.71233C12.1607 4.90126 12.953 5.29255 13.6201 5.85301L16.3449 3.25579C15.2474 2.24556 13.9199 1.51842 12.4777 1.13747C11.0356 0.756523 9.52219 0.733277 8.06898 1.06975C6.61577 1.40622 5.26662 2.09224 4.13863 3.06829C3.01063 4.04433 2.13787 5.28089 1.59607 6.67068C1.05428 8.06046 0.859829 9.56146 1.02959 11.0434C1.19936 12.5254 1.72821 13.9435 2.57026 15.1748C3.4123 16.406 4.5421 17.4132 5.86159 18.1089C7.18109 18.8045 8.65042 19.1677 10.1421 19.1668C15.1967 19.1668 19.7671 15.8332 18.9321 8.33335Z'
+                fill='#191A1A'
+            />
+        </svg>
+    )
+}
+
+IconGoogle.displayName = 'IconGoogle'
+
+export default IconGoogle
diff --git a/src/components/Templates/Steps/Steps.tsx b/src/components/Templates/Steps/Steps.tsx
@@ -3,9 +3,9 @@ import { Props } from './Steps.types'
 import * as styles from './Steps.styles'
 
 // assets
-import { ReactComponent as IconDone } from './assets/done.svg'
-import { ReactComponent as IconActive } from './assets/active.svg'
-import { ReactComponent as IconDisabled } from './assets/disabled.svg'
+import IconDone from './assets/IconDone'
+import IconActive from './assets/IconActive'
+import IconDisabled from './assets/IconDisabled'
 
 export const Steps: FC<Props> = (props) => {
     const { steps, active, className, id } = props

diff --git a/src/components/Templates/Steps/assets/IconActive.tsx b/src/components/Templates/Steps/assets/IconActive.tsx
@@ -0,0 +1,13 @@
+import { FC } from 'react'
+
+const IconActive: FC<any> = (props) => {
+    return (
+        <svg fill='none' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg' {...props}>
+            <circle cx='8' cy='8' fill='none' r='6.25' stroke='#2261AE' strokeWidth='1.5' />
+        </svg>
+    )
+}
+
+IconActive.displayName = 'IconActive'
+
+export default IconActive
diff --git a/src/components/Templates/Steps/assets/IconDisabled.tsx b/src/components/Templates/Steps/assets/IconDisabled.tsx
@@ -0,0 +1,13 @@
+import { FC } from 'react'
+
+const IconDisabled: FC<any> = (props) => {
+    return (
+        <svg fill='none' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg' {...props}>
+            <circle cx='8' cy='8' fill='none' r='6.5' stroke='#D7D8DA' strokeWidth='1.5' />
+        </svg>
+    )
+}
+
+IconDisabled.displayName = 'IconDisabled'
+
+export default IconDisabled
diff --git a/src/components/Templates/Steps/assets/IconDone.tsx b/src/components/Templates/Steps/assets/IconDone.tsx
@@ -0,0 +1,21 @@
+import { FC } from 'react'
+
+const IconDone: FC<any> = (props) => {
+    return (
+        <svg fill='none' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg' {...props}>
+            <path
+                d='M8.00016 14.6673C11.6825 14.6673 14.6668 11.6829 14.6668 8.00065C14.6668 4.31836 11.6825 1.33398 8.00016 1.33398C4.31787 1.33398 1.3335 4.31836 1.3335 8.00065C1.3335 11.6829 4.31787 14.6673 8.00016 14.6673Z'
+                fill='#2261AE'
+                opacity='0.12'
+            />
+            <path
+                d='M10.9429 6.77604L7.60954 10.1094C7.36475 10.3542 6.96891 10.3542 6.72673 10.1094L5.06006 8.44271C4.81527 8.19792 4.81527 7.80208 5.06006 7.5599C5.30485 7.31771 5.70068 7.3151 5.94287 7.5599L7.16683 8.78385L10.0575 5.89062C10.3022 5.64583 10.6981 5.64583 10.9403 5.89062C11.1825 6.13542 11.1851 6.53125 10.9403 6.77344L10.9429 6.77604Z'
+                fill='#2261AE'
+            />
+        </svg>
+    )
+}
+
+IconDone.displayName = 'IconDone'
+
+export default IconDone
diff --git a/src/stories/Form/FormInput.snip.tsx b/src/stories/Form/FormInput.snip.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import FormInput, { inputAligns } from '../../components/Atomic/FormInput'
-import { ReactComponent as IconSlovakia } from '../assets/Slovakia.svg'
+import IconSlovakia from '../assets/IconSlovakia'
 
 export default (args?: any) => (
     <div>

diff --git a/src/stories/Table/Table.stories.jsx b/src/stories/Table/Table.stories.jsx
@@ -7,7 +7,7 @@ import StatusPill from '../../components/Atomic/StatusPill'
 import sample from 'lodash/sample'
 import '../global.css'
 import TableSelectionPanel from '../../components/Atomic/TableNew/TableSelectionPanel/TableSelectionPanel'
-import { IconEdit, IconLink, IconShowPassword, IconTrash } from '../../components/Atomic/IntlProvider'
+import { IconEdit, IconLink, IconShowPassword, IconTrash } from '../../components/Atomic/Icon'
 import { generate } from 'random-words'
 
 export default {

diff --git a/src/stories/assets/IconSlovakia.tsx b/src/stories/assets/IconSlovakia.tsx
@@ -0,0 +1,41 @@
+import { FC } from 'react'
+
+const IconSlovakia: FC<any> = (props) => {
+    return (
+        <svg fill='none' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' {...props}>
+            <g clipPath='url(#clip0_489_10436)'>
+                <path d='M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z' fill='#F0F0F0' />
+                <path
+                    d='M12 24C18.6274 24 24 18.6274 24 12C24 10.5322 23.736 9.12605 23.2536 7.82611H0.746391C0.264047 9.12605 0 10.5322 0 12C0 18.6274 5.37262 24 12 24Z'
+                    fill='#0052B4'
+                />
+                <path d='M12.0002 24C17.1598 24 21.5583 20.7435 23.2538 16.1739H0.746582C2.4421 20.7435 6.84061 24 12.0002 24Z' fill='#D80027' />
+                <path
+                    d='M3.10303 6.78262V12.7688C3.10303 16.174 7.55151 17.2174 7.55151 17.2174C7.55151 17.2174 11.9999 16.174 11.9999 12.7688V6.78262H3.10303Z'
+                    fill='#F0F0F0'
+                />
+                <path
+                    d='M4.14648 6.78262V12.7688C4.14648 13.1686 4.23527 13.5461 4.41114 13.9001H10.6918C10.8677 13.5462 10.9564 13.1686 10.9564 12.7688V6.78262H4.14648Z'
+                    fill='#D80027'
+                />
+                <path
+                    d='M9.63825 10.9565H8.07309V9.91303H9.11657V8.86955H8.07309V7.82611H7.02961V8.86955H5.98617V9.91303H7.02961V10.9565H5.46436V12H7.02961V13.0435H8.07309V12H9.63825V10.9565Z'
+                    fill='#F0F0F0'
+                />
+                <path
+                    d='M5.8344 15.3567C6.50682 15.7793 7.19766 16.0246 7.55134 16.1338C7.90501 16.0247 8.59585 15.7793 9.26827 15.3567C9.94637 14.9305 10.4217 14.4431 10.6916 13.9001C10.3939 13.6895 10.0307 13.5652 9.6383 13.5652C9.49543 13.5652 9.35663 13.5822 9.22318 13.6132C8.94038 12.9707 8.29843 12.5218 7.55138 12.5218C6.80434 12.5218 6.16234 12.9707 5.87959 13.6132C5.74613 13.5822 5.60729 13.5652 5.46446 13.5652C5.07207 13.5652 4.70884 13.6895 4.41113 13.9001C4.6809 14.4431 5.15626 14.9305 5.8344 15.3567Z'
+                    fill='#0052B4'
+                />
+            </g>
+            <defs>
+                <clipPath id='clip0_489_10436'>
+                    <rect fill='white' height='24' width='24' />
+                </clipPath>
+            </defs>
+        </svg>
+    )
+}
+
+IconSlovakia.displayName = 'IconSlovakia'
+
+export default IconSlovakia