Added three new components

Signed-off-by: Avior <github@avior.me>

.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 }}

.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 }}

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": {

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

src/Box/BoxHeader.tsx

@@ -12,6 +12,11 @@ interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElem
 	children?: React.ReactNode
 }
 
+/**
+ * The box header that caan be used out of a box
+ *
+ * @version 1.0.0
+ */
 export default class BoxHeader extends React.Component<Props> {
 	public render = () => (
 		<div className={css.header}>

src/Box/index.tsx

@@ -14,13 +14,20 @@ interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElem
 	title?: string
 	icon?: Icon
 	rightHeader?: React.ReactNode
+
+	noBottomBorder?: boolean
 }
 
+/**
+ * The basic Box Component
+ *
+ * @version 1.0.0
+ */
 export default class Box extends React.Component<Props> {
 	public render = () => (
 		<div
 			{...objectOmit<Record<string, any>>(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) && (
 				<BoxHeader title={this.props.title} icon={this.props.icon}>{this.props.rightHeader}</BoxHeader>

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

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) => <Box><Component {...args}>Button</Component></Box>
+Breadcrumb.args = {
+	items: [{
+		display: "Pouet",
+		href: '/pouet'
+	}, {
+		display: "Pouet",
+	}]
+}

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<Props> {
+
+	public render() {
+		return (
+			<nav className={css.breadcrumb}>
+				<ol vocab="https://schema.org/" typeof="BreadcrumbList">
+					<li>
+						<Link className={css.item} href="/" noStyle>
+							<Text {...this.props.textProps} tag="span"><Home size={16} /></Text>
+						</Link>
+					</li>
+					{this.props.items.map((el, index) => (
+						<li property="itemListElement" typeof="ListItem" key={index}>
+							<Text {...this.props.textProps} tag="span"><ChevronRight size={14} /></Text>
+							{el.href ? (
+								<Link className={css.item} noStyle href={el.href.replace(/ /g, '-')} linkProps={{ property: "item", typeof: "WebPage" }}>
+									<Text {...this.props.textProps} tag="span" textProps={{ property: "name" }}>{el.display}</Text>
+								</Link>
+							) : (
+								<Text className={css.item} {...this.props.textProps} tag="span" weight="bold" textProps={{ property: "name" }}>{el.display}</Text>
+							)}
+							<meta property="position" content={index.toString()} />
+						</li>
+					))}
+				</ol>
+			</nav>
+		)
+	}
+}

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%

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<any> = (args: any) => <Component {...args} />
-
-let tmp = Loader.bind({})
-tmp.args = {
-	auto: {interval : [10, 100], increment: [0, 5]}
-}
-
-export const Auto = tmp

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<Props, State> {
 	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<Props, State> {
 	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 = () => <ProgressBar
-		<div className={buildClassName(css.div, [css.hide, (this.props.percent || this.state.percent) === 100])}>
+			noRoundBorders
-			<div style={{width: (this.props.percent || this.state.percent) ? `${(this.props.percent || this.state.percent)}%` : 0}}></div>
+			progress={this.props.percent ?? this.state.percent ?? 0}
-		</div>
+			className={buildClassName(css.div, [css.hide, (this.props.percent ?? this.state.percent) === 100 || (this.props.percent ?? this.state.percent ?? 0) === 0])}
-	)
+		/>
 
 	private routeChangeComplete = () => {
 		if (this.interval) {

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

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) => (
+	<Component {...args} />
+)

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<Props> {
+
+	public render = () => (
+		<div className={buildClassName(css.bar, [css.noBorder, this.props.noRoundBorders], this.props.className)}>
+			<div style={{ width: `${this.props.progress}%`}}></div>
+		</div>
+	)
+}

src/ProgressBox/ProgressBox.module.styl

@@ -0,0 +1,4 @@
+@import '../config'
+
+.padding
+	padding 24px

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) => (
+	<Component {...args} />
+)

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<Props> {
+
+	public render = () => (
+		<Box noPadding noBottomBorder>
+			<Row className={css.padding}>
+				<Col nogrow>
+					<Text color="main">{this.props.progress}%</Text>
+				</Col>
+				<Col>
+					<Text weight="bold" align="center">{this.props.text}</Text>
+				</Col>
+				<Col nogrow>
+					<Text color="main">{this.props.textProgress}</Text>
+				</Col>
+			</Row>
+			<ProgressBar noRoundBorders progress={this.props.progress} />
+		</Box>
+	)
+}

src/Table/Table.stories.tsx

@@ -10,7 +10,7 @@ export default {
 } as Meta
 
 export const Table = (args: any) => (
-	<Box icon={Settings} title="Storage">
+	<Box icon={Settings} title="Table">
 		<Component {...args}>
 			<thead>
 				<tr>

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)

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<React.AnchorHTMLAttributes<HTMLElement>, HTMLElement>
 }
 
 const types: Record<Types, {
@@ -55,6 +56,11 @@ const types: Record<Types, {
 	}
 }
 
+/**
+ * Display Text lol
+ *
+ * @version 1.0.0
+ */
 export default class Text extends React.PureComponent<Props> {
 
 	public render() {
@@ -70,10 +76,9 @@ export default class Text extends React.PureComponent<Props> {
 		}
 		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<Props> {
 			return (<p className={classes}><em>{this.props.children}</em></p>)
 		}
 
-		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})
 	}
 }

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,