From e3bfc1b2e430d95a9cd16493d916515c12eae19c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrik=20Matias=CC=8Cko?= Date: Mon, 15 Apr 2024 10:46:40 +0200 Subject: [PATCH] gh pages --- .github/workflows/eslint.yml | 42 +++++++++++++++++++ .github/workflows/storybook-deploy.yml | 23 ++++++---- .gitignore | 3 +- package.json | 7 ++-- src/components/Atomic/TreeTable/TreeTable.tsx | 2 +- .../Atomic/TreeTable/assets/IconSubLine.tsx | 18 ++++++++ .../Templates/SignInForm/SignInForm.tsx | 9 ++-- .../Templates/SignInForm/assets/IconApple.tsx | 16 +++++++ .../SignInForm/assets/IconGitHub.tsx | 16 +++++++ .../SignInForm/assets/IconGoogle.tsx | 16 +++++++ src/components/Templates/Steps/Steps.tsx | 6 +-- .../Templates/Steps/assets/IconActive.tsx | 13 ++++++ .../Templates/Steps/assets/IconDisabled.tsx | 13 ++++++ .../Templates/Steps/assets/IconDone.tsx | 21 ++++++++++ src/stories/Form/FormInput.snip.tsx | 2 +- src/stories/Table/Table.stories.jsx | 2 +- src/stories/assets/IconSlovakia.tsx | 41 ++++++++++++++++++ 17 files changed, 229 insertions(+), 21 deletions(-) create mode 100644 .github/workflows/eslint.yml create mode 100644 src/components/Atomic/TreeTable/assets/IconSubLine.tsx create mode 100644 src/components/Templates/SignInForm/assets/IconApple.tsx create mode 100644 src/components/Templates/SignInForm/assets/IconGitHub.tsx create mode 100644 src/components/Templates/SignInForm/assets/IconGoogle.tsx create mode 100644 src/components/Templates/Steps/assets/IconActive.tsx create mode 100644 src/components/Templates/Steps/assets/IconDisabled.tsx create mode 100644 src/components/Templates/Steps/assets/IconDone.tsx create mode 100644 src/stories/assets/IconSlovakia.tsx diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml new file mode 100644 index 00000000..104a4cc5 --- /dev/null +++ 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 \ No newline at end of file diff --git a/.github/workflows/storybook-deploy.yml b/.github/workflows/storybook-deploy.yml index cfd65c99..eb613f63 100644 --- 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/github-actions-storybook-to-github-pages@v1.0.1 + with: + path: storybook-static + checkout: false env: GH_TOKEN: ${{ github.actor }}:${{ secrets.GITHUB_TOKEN }} \ No newline at end of file diff --git a/.gitignore b/.gitignore index 5f572149..6b747165 100644 --- a/.gitignore +++ b/.gitignore @@ -28,4 +28,5 @@ yarn-debug.log* yarn-error.log* *storybook.log -test-report.xml \ No newline at end of file +test-report.xml +eslint-results.sarif \ No newline at end of file diff --git a/package.json b/package.json index defdfdcd..cde53e36 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,8 @@ "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", @@ -29,8 +30,7 @@ ":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 index c9468d7c..bebdf795 100644 --- 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 new file mode 100644 index 00000000..7c776a98 --- /dev/null +++ b/src/components/Atomic/TreeTable/assets/IconSubLine.tsx @@ -0,0 +1,18 @@ +import { FC } from 'react' + +const IconSubLine: FC = () => { + return ( + + + + ) +} + +IconSubLine.displayName = 'IconSubLine' + +export default IconSubLine diff --git a/src/components/Templates/SignInForm/SignInForm.tsx b/src/components/Templates/SignInForm/SignInForm.tsx index 24cda7ae..eef89849 100644 --- 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) => { const { action, autoComplete, className, id, inputs, actions, cta, socialProviders, method, terms, onSubmit } = { ...defaultProps, ...props } @@ -16,7 +17,7 @@ const SignInForm: FC = (props) => { case 'google': return case 'github': - return + return } } diff --git a/src/components/Templates/SignInForm/assets/IconApple.tsx b/src/components/Templates/SignInForm/assets/IconApple.tsx new file mode 100644 index 00000000..3575f133 --- /dev/null +++ b/src/components/Templates/SignInForm/assets/IconApple.tsx @@ -0,0 +1,16 @@ +import { FC } from 'react' + +const IconApple: FC = () => { + return ( + + + + ) +} + +IconApple.displayName = 'IconApple' + +export default IconApple diff --git a/src/components/Templates/SignInForm/assets/IconGitHub.tsx b/src/components/Templates/SignInForm/assets/IconGitHub.tsx new file mode 100644 index 00000000..15618d13 --- /dev/null +++ b/src/components/Templates/SignInForm/assets/IconGitHub.tsx @@ -0,0 +1,16 @@ +import { FC } from 'react' + +const IconGitHub: FC = () => { + return ( + + + + ) +} + +IconGitHub.displayName = 'IconGitHub' + +export default IconGitHub diff --git a/src/components/Templates/SignInForm/assets/IconGoogle.tsx b/src/components/Templates/SignInForm/assets/IconGoogle.tsx new file mode 100644 index 00000000..6b5c6d9f --- /dev/null +++ b/src/components/Templates/SignInForm/assets/IconGoogle.tsx @@ -0,0 +1,16 @@ +import { FC } from 'react' + +const IconGoogle: FC = () => { + return ( + + + + ) +} + +IconGoogle.displayName = 'IconGoogle' + +export default IconGoogle diff --git a/src/components/Templates/Steps/Steps.tsx b/src/components/Templates/Steps/Steps.tsx index f8f89b1d..96bc20a8 100644 --- 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) => { const { steps, active, className, id } = props diff --git a/src/components/Templates/Steps/assets/IconActive.tsx b/src/components/Templates/Steps/assets/IconActive.tsx new file mode 100644 index 00000000..b0b59364 --- /dev/null +++ b/src/components/Templates/Steps/assets/IconActive.tsx @@ -0,0 +1,13 @@ +import { FC } from 'react' + +const IconActive: FC = (props) => { + return ( + + + + ) +} + +IconActive.displayName = 'IconActive' + +export default IconActive diff --git a/src/components/Templates/Steps/assets/IconDisabled.tsx b/src/components/Templates/Steps/assets/IconDisabled.tsx new file mode 100644 index 00000000..035c4ba2 --- /dev/null +++ b/src/components/Templates/Steps/assets/IconDisabled.tsx @@ -0,0 +1,13 @@ +import { FC } from 'react' + +const IconDisabled: FC = (props) => { + return ( + + + + ) +} + +IconDisabled.displayName = 'IconDisabled' + +export default IconDisabled diff --git a/src/components/Templates/Steps/assets/IconDone.tsx b/src/components/Templates/Steps/assets/IconDone.tsx new file mode 100644 index 00000000..eaf6847c --- /dev/null +++ b/src/components/Templates/Steps/assets/IconDone.tsx @@ -0,0 +1,21 @@ +import { FC } from 'react' + +const IconDone: FC = (props) => { + return ( + + + + + ) +} + +IconDone.displayName = 'IconDone' + +export default IconDone diff --git a/src/stories/Form/FormInput.snip.tsx b/src/stories/Form/FormInput.snip.tsx index 97a40863..55f6cb47 100644 --- 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) => (
diff --git a/src/stories/Table/Table.stories.jsx b/src/stories/Table/Table.stories.jsx index a62acde7..89b11138 100644 --- 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 new file mode 100644 index 00000000..c1474b6e --- /dev/null +++ b/src/stories/assets/IconSlovakia.tsx @@ -0,0 +1,41 @@ +import { FC } from 'react' + +const IconSlovakia: FC = (props) => { + return ( + + + + + + + + + + + + + + + + + ) +} + +IconSlovakia.displayName = 'IconSlovakia' + +export default IconSlovakia