diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 0116b99..8ddb863 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -27,14 +27,3 @@ jobs: - name: Build components run: npm run build - - - uses: sonarsource/sonarcloud-github-action@master - with: - args: > - -Dsonar.organization=dzeio - -Dsonar.projectKey=dzeiocom_components - -Dsonar.sources=. - -Dsonar.sourceEncoding=UTF-8 - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} diff --git a/.github/workflows/ossar-analysis.yml b/.github/workflows/ossar-analysis.yml new file mode 100644 index 0000000..51253f3 --- /dev/null +++ b/.github/workflows/ossar-analysis.yml @@ -0,0 +1,37 @@ +# 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. + +# This workflow integrates a collection of open source static analysis tools +# with GitHub code scanning. For documentation, or to provide feedback, visit +# https://github.com/github/ossar-action +name: OSSAR + +on: + push: + branches: [ master ] + pull_request: + # The branches below must be a subset of the branches above + branches: [ master ] + +jobs: + OSSAR-Scan: + # OSSAR runs on windows-latest. + # ubuntu-latest and macos-latest support coming soon + runs-on: windows-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v2 + + # Run open source static analysis tools + - name: Run OSSAR + uses: github/ossar-action@v1 + id: ossar + + # Upload results to the Security tab + - name: Upload OSSAR results + uses: github/codeql-action/upload-sarif@v1 + with: + sarif_file: ${{ steps.ossar.outputs.sarifFile }} diff --git a/package-lock.json b/package-lock.json index 2361172..e884670 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@dzeio/components", - "version": "1.0.0-alpha.5", + "version": "1.0.0-alpha.6", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@dzeio/components", - "version": "1.0.0-alpha.5", + "version": "1.0.0-alpha.6", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/src/Box/Box.module.styl b/src/Box/Box.module.styl index fa51342..fb0f670 100644 --- a/src/Box/Box.module.styl +++ b/src/Box/Box.module.styl @@ -5,6 +5,8 @@ @media (prefers-color-scheme dark) background $foregroundDark border-radius 16px + &.noBottomBorder + border-radius 16px 16px 0 0 .header padding 16px diff --git a/src/Box/BoxHeader.tsx b/src/Box/BoxHeader.tsx index cf89164..d07a417 100644 --- a/src/Box/BoxHeader.tsx +++ b/src/Box/BoxHeader.tsx @@ -12,6 +12,11 @@ interface Props extends React.DetailedHTMLProps { public render = () => (
diff --git a/src/Box/index.tsx b/src/Box/index.tsx index f9e7af7..7c57f69 100644 --- a/src/Box/index.tsx +++ b/src/Box/index.tsx @@ -14,13 +14,20 @@ interface Props extends React.DetailedHTMLProps { public render = () => (
>(this.props, 'title', 'icon', 'rightHeader', 'noPadding')} - className={buildClassName(css.box, this.props?.className)} + className={buildClassName(css.box, this.props?.className, [css.noBottomBorder, this.props.noBottomBorder])} > {(this.props.rightHeader || this.props.title || this.props.icon) && ( {this.props.rightHeader} diff --git a/src/Breadcrumb/Breadcrumb.module.styl b/src/Breadcrumb/Breadcrumb.module.styl new file mode 100644 index 0000000..e9ab9e8 --- /dev/null +++ b/src/Breadcrumb/Breadcrumb.module.styl @@ -0,0 +1,16 @@ +.breadcrumb ol + display flex + display inline-flex + padding 0 + margin 0 + align-items center + flex-wrap wrap + li + display inline-block + &:first-child .item + padding-left 0 + &:last-child .item + padding-right 0 + +.item + padding 0 16px diff --git a/src/Breadcrumb/Breadcrumb.stories.tsx b/src/Breadcrumb/Breadcrumb.stories.tsx new file mode 100644 index 0000000..2a60ae6 --- /dev/null +++ b/src/Breadcrumb/Breadcrumb.stories.tsx @@ -0,0 +1,20 @@ +import { Meta } from '@storybook/react/types-6-0' +import React from 'react' +import { Zap } from 'lucide-react' +import Box from '../Box' +import Component from '.' + +export default { + title: 'DZEIO/Breadcrumb', + component: Component +} as Meta + +export const Breadcrumb = (args: any) => Button +Breadcrumb.args = { + items: [{ + display: "Pouet", + href: '/pouet' + }, { + display: "Pouet", + }] +} diff --git a/src/Breadcrumb/index.tsx b/src/Breadcrumb/index.tsx new file mode 100644 index 0000000..6b09f38 --- /dev/null +++ b/src/Breadcrumb/index.tsx @@ -0,0 +1,49 @@ +import React from 'react' +import Link from '../Link' +import Text from '../Text' +import css from './Breadcrumb.module.styl' +import { ChevronRight, Home } from 'lucide-react' + +interface Props { + items: Array<{ + display: string + href?: string + }> + + textProps?: Text['props'] +} + +/** + * A breadcrumb compatible with Schema.org BreadcrumbList type + * + * @version 1.0.0 + */ +export default class Breadcrumb extends React.Component { + + public render() { + return ( + + ) + } +} diff --git a/src/Loader/Loader.module.styl b/src/Loader/Loader.module.styl index 04f2252..532e36b 100644 --- a/src/Loader/Loader.module.styl +++ b/src/Loader/Loader.module.styl @@ -4,16 +4,11 @@ position fixed left 0 width 100% - height 7px pointer-events none z-index 200 + transition top .5s ease-in-out top 0 + &.hide - transition top .5s ease-in-out top -7px - div - &:not([style="width: 0px;"]) - transition width 50ms ease-in-out - background rgba($main, .7) - height 100% diff --git a/src/Loader/Loader.stories.tsx b/src/Loader/Loader.stories.tsx index 34fa574..ffec5af 100644 --- a/src/Loader/Loader.stories.tsx +++ b/src/Loader/Loader.stories.tsx @@ -8,14 +8,10 @@ export default { component: Component, parameters: { layout: 'fullscreen' - } + }, + argTypes: { + percent: { control: 'number'} + }, } as Meta export const Loader: Story = (args: any) => - -let tmp = Loader.bind({}) -tmp.args = { - auto: {interval : [10, 100], increment: [0, 5]} -} - -export const Auto = tmp diff --git a/src/Loader/index.tsx b/src/Loader/index.tsx index a791d0a..4dad1a2 100644 --- a/src/Loader/index.tsx +++ b/src/Loader/index.tsx @@ -1,5 +1,6 @@ import { Router } from 'next/router' import React from 'react' +import ProgressBar from '../ProgressBar' import { buildClassName } from '../Util' import css from './Loader.module.styl' @@ -42,6 +43,7 @@ export default class Loader extends React.Component { public componentDidMount() { if (this.props.auto) { Router.events.on('routeChangeComplete', this.routeChangeComplete) + Router.events.on('routeChangeError', this.routeChangeComplete) Router.events.on('routeChangeStart', this.routeChangeStart) } } @@ -49,15 +51,16 @@ export default class Loader extends React.Component { public componentWillUnmount() { if (this.props.auto) { Router.events.off('routeChangeComplete', this.routeChangeComplete) + Router.events.off('routeChangeError', this.routeChangeComplete) Router.events.off('routeChangeStart', this.routeChangeStart) } } - public render = () => ( -
-
-
- ) + public render = () => private routeChangeComplete = () => { if (this.interval) { diff --git a/src/ProgressBar/ProgressBar.module.styl b/src/ProgressBar/ProgressBar.module.styl new file mode 100644 index 0000000..9564e12 --- /dev/null +++ b/src/ProgressBar/ProgressBar.module.styl @@ -0,0 +1,24 @@ +@import '../config' + +.bar + width 100% + background rgba($main, .15) + height 8px + border-radius 8px + + &.noBorder + border-radius 0 + div + + border-radius 0px 8px 8px 0px + &[style="width: 100%;"] + border-radius 0 + + div + transition width,border-radius + transition-duration $transitionTime + transition-timing-function $transitionFunction + height 100% + width 0 + background $main + border-radius 8px diff --git a/src/ProgressBar/ProgressBar.stories.tsx b/src/ProgressBar/ProgressBar.stories.tsx new file mode 100644 index 0000000..8138913 --- /dev/null +++ b/src/ProgressBar/ProgressBar.stories.tsx @@ -0,0 +1,19 @@ +import { Meta } from '@storybook/react/types-6-0' +import React from 'react' +import Component from '.' + +export default { + title: 'DZEIO/Progress Bar', + component: Component, + argTypes: { + progress: { control: 'number', defaultValue: 0}, + noRoundBorders: { control: 'boolean'}, + }, + parameters: { + layout: 'fullscreen' + } +} as Meta + +export const ProgressBar = (args: any) => ( + +) diff --git a/src/ProgressBar/index.tsx b/src/ProgressBar/index.tsx new file mode 100644 index 0000000..3e067b3 --- /dev/null +++ b/src/ProgressBar/index.tsx @@ -0,0 +1,29 @@ +import React from 'react' +import { buildClassName } from '../Util' +import css from './ProgressBar.module.styl' + +interface Props { + /** + * Number between 0 and 100% + */ + progress: number + /** + * disable the round borders + */ + noRoundBorders?: boolean + className?: string +} + +/** + * Display a simple customizable Progress bar + * + * @version 1.0.0 + */ +export default class extends React.PureComponent { + + public render = () => ( +
+
+
+ ) +} diff --git a/src/ProgressBox/ProgressBox.module.styl b/src/ProgressBox/ProgressBox.module.styl new file mode 100644 index 0000000..b8a6f5d --- /dev/null +++ b/src/ProgressBox/ProgressBox.module.styl @@ -0,0 +1,4 @@ +@import '../config' + +.padding + padding 24px diff --git a/src/ProgressBox/ProgressBox.stories.tsx b/src/ProgressBox/ProgressBox.stories.tsx new file mode 100644 index 0000000..eda8caf --- /dev/null +++ b/src/ProgressBox/ProgressBox.stories.tsx @@ -0,0 +1,20 @@ +import { Meta } from '@storybook/react/types-6-0' +import React from 'react' +import Component from '.' + +export default { + title: 'DZEIO/Progress Box', + component: Component, + argTypes: { + progress: { control: 'number', defaultValue: 0}, + text: { control: 'text'}, + textProgress: { control: 'text'}, + }, + parameters: { + layout: 'fullscreen' + } +} as Meta + +export const ProgressBox = (args: any) => ( + +) diff --git a/src/ProgressBox/index.tsx b/src/ProgressBox/index.tsx new file mode 100644 index 0000000..b17ab4e --- /dev/null +++ b/src/ProgressBox/index.tsx @@ -0,0 +1,50 @@ +import React from 'react' +import { buildClassName } from '../Util' +import css from './ProgressBox.module.styl' +import ProgressBar from '../ProgressBar' +import Row from '../Row' +import Col from '../Col' +import Text from '../Text' +import Box from '../Box' + +interface Props { + /** + * Number between 0 and 100% + */ + progress: number + + /** + * Text displayed in the middle + */ + text: string + + /** + * text displayed in the right of the box + */ + textProgress: string +} + +/** + * Display a simple Progress box that can be used for multiple things + * + * @version 1.0.0 + */ +export default class extends React.PureComponent { + + public render = () => ( + + + + {this.props.progress}% + + + {this.props.text} + + + {this.props.textProgress} + + + + + ) +} diff --git a/src/Table/Table.stories.tsx b/src/Table/Table.stories.tsx index a8d2f90..93bd7a0 100644 --- a/src/Table/Table.stories.tsx +++ b/src/Table/Table.stories.tsx @@ -10,7 +10,7 @@ export default { } as Meta export const Table = (args: any) => ( - + diff --git a/src/Text/Text.module.styl b/src/Text/Text.module.styl index 3e21cba..eeb6ab5 100644 --- a/src/Text/Text.module.styl +++ b/src/Text/Text.module.styl @@ -14,6 +14,9 @@ .black color #212121 +.main + color $main + for size in 36 28 24 20 18 16 14 .size-{size} font-size rem(size) diff --git a/src/Text/index.tsx b/src/Text/index.tsx index dbd4084..ff227a1 100644 --- a/src/Text/index.tsx +++ b/src/Text/index.tsx @@ -5,7 +5,7 @@ import css from './Text.module.styl' type Types = 'hero' | 'h1' | 'h2' | 'h3' | 'h4' | 'text' | 'light' | 'bold' interface Props { - color?: 'black' | 'white' | 'none' + color?: 'black' | 'white' | 'none' | 'main' type?: Types tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'em' | 'span' | 'div' weight?: 'normal' | 'bold' | 'light' @@ -14,6 +14,7 @@ interface Props { noDarkTheme?: boolean align?: 'left' | 'right' | 'center' children: React.ReactNode + textProps?: React.DetailedHTMLProps, HTMLElement> } const types: Record { public render() { @@ -70,10 +76,9 @@ export default class Text extends React.PureComponent { } const classes = buildClassName( css.text, + css[this.props.color ?? 'black'], [css[`weight-${data.weight}`], data.weight !== 'normal'], [css[`size-${data.size}`], data.size !== 16], - [css.white, this.props.color === 'white'], - [css.black, this.props.color === 'black' || !this.props.color], [css.noDarkTheme, this.props.noDarkTheme], [css[`align-${this.props.align}`], this.props.align], this.props.className @@ -83,6 +88,6 @@ export default class Text extends React.PureComponent { return (

{this.props.children}

) } - return React.createElement(this.props.tag ?? data.tag ?? 'p', {className: classes, children: this.props.children}) + return React.createElement(this.props.tag ?? data.tag ?? 'p', {...this.props.textProps, className: classes, children: this.props.children}) } } diff --git a/src/index.ts b/src/index.ts index cc4e9e7..a74ea97 100644 --- a/src/index.ts +++ b/src/index.ts @@ -6,6 +6,7 @@ import './general.styl' import Box from './Box' import BoxHeader from './Box/BoxHeader' +import Breadcrumb from './Breadcrumb' import Button from './Button' import Checkbox from './Checkbox' import Code from './Code' @@ -21,6 +22,8 @@ import Menu from './Menu' import Navbar from './Navbar' import NotificationManager from './NotificationManager' import Popup from './Popup' +import ProgressBar from './ProgressBar' +import ProgressBox from './ProgressBox' import Row from './Row' import Sidebar from './Sidebar' import Table from './Table' @@ -30,6 +33,7 @@ import * as Util from './Util' export { Box, BoxHeader, + Breadcrumb, Button, Checkbox, Code, @@ -45,6 +49,8 @@ export { Navbar, NotificationManager, Popup, + ProgressBar, + ProgressBox, Row, Sidebar, Table,