v0.8.5

Signed-off-by: Avior <florian.bouillon@delta-wings.net>

.storybook/main.js

@@ -1,8 +1,9 @@
 const path = require("path");
+const webpack = require('webpack')
 
 module.exports = {
 	"stories": [
-		"../src/dzeio/**/*.stories.@(ts|tsx)",
+		"../src/dzeio/**/*.stories.tsx",
 	],
 	"addons": [
 		"@storybook/addon-essentials"
@@ -16,5 +17,18 @@ module.exports = {
 			propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
 		},
 	},
-	presets: [path.resolve(__dirname, "./next.js")]
+	presets: [path.resolve(__dirname, "./next.js")],
+	// Allow to use Next/Image
+	webpackFinal: (config) => {
+		config.plugins.push(new webpack.DefinePlugin({
+			'process.env.__NEXT_IMAGE_OPTS': JSON.stringify({
+				deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+				imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+				domains: [],
+				path: '/',
+				loader: 'default',
+			})
+		}))
+		return config
+	}
 }

.storybook/mockNextImage.js

@@ -0,0 +1,17 @@
+// https://stackoverflow.com/a/64765638/7335674
+
+import * as nextImage from 'next/image'
+
+Object.defineProperty(nextImage, 'default', {
+	configurable: true,
+	value: (props) => {
+		return (
+			<div style={{display: 'inline-block', maxWidth: '100%', overflow: 'hidden', position: 'relative', boxSizing: 'border-box', margin: 0}}>
+				<div style={{boxSizing: 'border-box', display: 'block', maxWidth: '100%'}}>
+					<img {...props} alt="" aria-hidden="true" role="presentation" style={{maxWidth: '100%', display: 'block', margin: 0, border: 'none', padding: 0}} />
+				</div>
+				<img {...props} style={{position: 'absolute', inset: 0, boxSizing: 'border-box', padding: 0, border: 'none', margin: 'auto', display: 'block', width: 0, height: 0, minWidth: '100%', maxWidth: '100%', minHeight: '100%', maxHeight: '100%'}} />
+			</div>
+		)
+	},
+})

.storybook/preview.js

@@ -1,5 +1,6 @@
 import '../src/dzeio/general.styl'
 import './mockNextRouter'
+import './mockNextImage'
 
 export const parameters = {
   layout: 'centered'

.storybook/public/16-16.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect width="16" height="16" fill="#C4C4C4"/>
+</svg>

.storybook/public/90-38.svg

@@ -0,0 +1,3 @@
+<svg width="90" height="38" viewBox="0 0 90 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect width="90" height="38" fill="#C4C4C4"/>
+</svg>

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "@dzeio/components",
-	"version": "0.7.0",
+	"version": "0.8.5",
 	"license": "MIT",
-	"main": "./index.mjs",
+	"main": "./index.js",
 	"types": "./types/index.d.ts",
 	"devDependencies": {
 		"@babel/core": "^7.12.16",
@@ -36,7 +36,7 @@
 		"typescript": "^4.2.3"
 	},
 	"scripts": {
-		"dev": "rm -rf src/dzeio/**/*.js && start-storybook -p 6006",
+		"dev": "start-storybook -s ./.storybook/public -p 6006",
 		"build": "rollup --config",
 		"prepublishOnly": "yarn build",
 		"postinstall": "rollup --config"

rollup.config.js

@@ -12,14 +12,16 @@ export default [
 				url: false,
 				autoModules: true,
 				mode: 'extract',
-
+				modules: {
+					generateScopedName: '[local][hash:5]'
+				}
 			}),
 			typescript({useTsconfigDeclarationDir: true}), // so Rollup can convert TypeScript to JavaScript
 		],
 		output: [
 			{
 				file: pkg.main,
-				format: 'es',
+				format: 'cjs',
 				assetFileNames: 'style.css'
 			}
 		]

src/dzeio/Box/Box.module.styl

@@ -1,4 +1,4 @@
-@import "../../config"
+@import "../config"
 
 .box
 	background $foregroundLight
@@ -10,3 +10,8 @@
 	border 2px solid $grayDark
 	@media (prefers-color-scheme dark)
 		border-color $grayLight
+
+
+// BODY
+.body
+	padding 0 16px 16px

src/dzeio/Box/BoxBody/BoxBody.module.styl

@@ -1,2 +0,0 @@
-.body
-	padding 0 16px 16px

src/dzeio/Box/BoxBody/index.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import css from './BoxBody.module.styl'
-import { buildClassName } from '../../Util'
-
-
-interface Props {
-	noPadding?: boolean
-}
-
-export default class BoxBody extends React.Component<Props> {
-
-	public render = () => (
-		<div className={buildClassName([css.body, !this.props.noPadding])}>
-			{this.props.children}
-		</div>
-	)
-
-}

src/dzeio/Box/BoxHeader/index.tsx

@@ -18,19 +18,25 @@ export default class BoxHeader extends React.Component<Props> {
 
 	public render = () => (
 		<>
-			<div className={buildClassName(
+			<div data-t="true" className={buildClassName(
 				css.header
 			)}>
-				<Row>
+				<Row nomargin justify="space-between">
-					<Col size={this.props.titleColSize as 1 || 8}>
-						<Text className={buildClassName(css.title, this.props.titleClassName)}>{this.props.title}</Text>
-						<Text className={css.subtitle}>{this.props.subtitle}</Text>
-					</Col>
 					<Col>
-						<Row justify="flex-end">
+						{this.props.title && (
-							{this.props.children}
+							<Text className={buildClassName(css.title, this.props.titleClassName)}>{this.props.title}</Text>
-						</Row>
+						)}
+						{this.props.subtitle && (
+							<Text className={css.subtitle}>{this.props.subtitle}</Text>
+						)}
 					</Col>
+					{this.props.children && (
+						<Col nogrow>
+							<Row justify="flex-end">
+								{this.props.children}
+							</Row>
+						</Col>
+					)}
 				</Row>
 			</div>
 		</>

src/dzeio/Box/BoxWrapper/index.tsx

@@ -1,28 +0,0 @@
-import React from 'react'
-
-import css from './BoxWrapper.module.styl'
-import { buildClassName } from '../../Util'
-
-interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-	outline?: boolean
-	className?: string
-}
-
-export default class BoxWrapper extends React.Component<Props> {
-
-	public render = () => (
-		<div {...this.props}
-			className={buildClassName(css.box, [css.outline, this.props.outline], this.props.className)}
-		>
-			{this.props.children}
-		</div>
-	)
-
-}
-
-/*
-Wrapper extends div
-
-Body
-noPadding?: boolean
-*/

src/dzeio/Box/index.tsx

@@ -1,15 +1,20 @@
 import React from 'react'
 
-import BoxWrapper from './BoxWrapper'
 import BoxHeader from './BoxHeader'
-import BoxBody from './BoxBody'
+import { buildClassName } from '../Util'
+
+import css from './Box.module.styl'
 
 interface Props {
 
 	// Wrapper
+	wrapperProps?: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'className'>
 	outline?: boolean
+	/**
+	 * @deprecated use wrapperProps.onClick
+	 */
+	onClick?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>['onClick']
 	className?: string
-	onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
 
 	// Header
 	title?: string
@@ -26,7 +31,11 @@ interface Props {
 
 export default class Box extends React.Component<Props> {
 	public render = () => (
-		<BoxWrapper onClick={this.props.onClick} outline={this.props.outline} className={this.props.className}>
+		<div
+			{...this.props.wrapperProps}
+			onClick={this.props.onClick}
+			className={buildClassName(css.box, this.props.className, [css.outline, this.props.outline])}
+		>
 			{(this.props.headerButtons || this.props.title || this.props.titleColSize || this.props.subtitle || this.props.delimiter || this.props.titleClassName) && (
 				<BoxHeader
 					title={this.props.title}
@@ -37,16 +46,11 @@ export default class Box extends React.Component<Props> {
 					{this.props.headerButtons}
 				</BoxHeader>
 			)}
-			<BoxBody noPadding={this.props.noPadding}>
+			{this.props.children && (
-				{this.props.children}
+				<div className={buildClassName([css.body, !this.props.noPadding])}>
-			</BoxBody>
+					{this.props.children}
-		</BoxWrapper>
+				</div>	
+			)}
+		</div>
 	)
 }
-
-
-export {
-	BoxWrapper,
-	BoxHeader,
-	BoxBody
-}

src/dzeio/Button/Button.module.styl

@@ -15,6 +15,7 @@
 	border-radius 4px
 	border none
 	justify-content center
+	align-items center
 	color $textOnMain
 	background-color $main
 
@@ -24,9 +25,6 @@
 	// Link specific
 	text-decoration none
 
-	&.nomargintop
-		margin-top 0
-
 	&.outline
 		border 2px solid @background-color
 		padding 8px 18px // @padding - @border
@@ -36,7 +34,7 @@
 		&:hover
 		&:active
 		&:focus
-			color @color
+			color $textOnMain
 
 	&:hover
 		background-color @background-color
@@ -47,6 +45,12 @@
 	&:focus
 		background-color darken(@background-color, 30%)
 	
+	&.block
+		display flex
+		width 100%
+		margin 0
+		margin-top 8px
+
 	&.large
 		padding 15px 30px
 		font-size rem(20)
@@ -61,11 +65,8 @@
 		&.outline
 			padding 3px 8px // @padding - @border
 
-	&.block
+	&.nomargintop
-		display flex
+		margin-top 0
-		width 100%
-		margin 0
-		margin-top 8px
 
 	&:disabled
 		background $grayLight
@@ -124,11 +125,17 @@ btn($color, $theme)
 	&.outline
 		color @background-color
 		border-color @background-color
+		// background none
 
 		&:hover
 		&:active
 		&:focus
-			color @color
+			color $textColor
+
+		if $theme is 'darken'
+			&:active
+			&:focus
+				background-color darken(@color, 30%)
 
 	&:hover
 		background-color @background-color
@@ -172,3 +179,6 @@ btn($color, $theme)
 
 	100%
 		transform rotate(365deg)
+
+.img
+	min-width 16px

src/dzeio/Button/Button.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/react/types-6-0'
 import React from 'react'
+import { Zap } from 'react-feather'
 import Component from '.'
 
 export default {
@@ -8,3 +9,19 @@ export default {
 } as Meta
 
 export const Basic = (args: any) => <Component {...args}>Button</Component>
+Basic.args = {
+	nomargintop: true,
+	icon: Zap,
+	size: 'small',
+	href: '/pouet',
+	block: true
+}
+
+export const WithImg = (args: any) => <Component {...args}>Button</Component>
+WithImg.args = {
+	nomargintop: true,
+	icon: '/16-16.svg',
+	size: 'small',
+	href: '/pouet',
+	block: true
+}

src/dzeio/Button/index.tsx

@@ -14,7 +14,8 @@ interface Props {
 	color?: ColorType
 	children?: React.ReactNode
 	icon?: FC<IconProps> | string
-	size?: 'large' | 'small' | 'block'
+	size?: 'large' | 'small'
+	block?: boolean
 	href?: string
 	as?: string
 	disabled?: boolean
@@ -33,9 +34,9 @@ export default class Button extends React.Component<Props> {
 			inner = (
 				<>
 					{typeof Icon === 'string' ? (
-						<Image src={Icon} width={16} height={16} />
+						<Image parentClassName={css.img} src={Icon} width={16} height={16} />
 					) : (
-						<Icon size={16} />
+						<Icon size={this.props.size === 'large' ? 20 : this.props.size === 'small' ? 14 : 16} />
 					)}
 					{this.props.children && (
 						<span className={css.textInner}>{this.props.children}</span>
@@ -48,6 +49,7 @@ export default class Button extends React.Component<Props> {
 			[css.button],
 			[css[this.props.color as string], this.props.color],
 			[css.outline, this.props.outline],
+			[css.block, this.props.block],
 			[css[this.props.size as string], this.props.size],
 			[css.nomargintop, this.props.nomargintop],
 			[css.loading, this.props.loading]

src/dzeio/Checkbox/Checkbox.module.styl

@@ -5,28 +5,33 @@ $backColor = #757575
 .label
 	position relative
 	display flex
-	padding-left 8px
-	margin 8px
 	user-select none
+	align-items center
+
+	+ .label
+		margin-top 8px
 
 	p
-		margin-left 18px
+		margin-left 8px
 
 	span
 		top 0
 		left 0
 		width 20px
 		height @width
-		position absolute
+		position relative
-		box-shadow inset 0 0 0 2px $backColor
+		box-shadow inset 0 0 0 2px $grayDark
 		border-radius 2px
 		transition all $transition
 
+		@media (prefers-color-scheme dark)
+			box-shadow inset 0 0 0 2px $grayLight
+
 		&::after
 			border-radius 20px
 			position absolute
 			transition all $transition
-			background $default
+			background $main
 
 	svg
 		transition $transition
@@ -41,19 +46,9 @@ $backColor = #757575
 		left 0
 		opacity 0
 
-		&:focus + span
-			box-shadow inset 0 0 0 2px black, 0 0 0 2px rgba(black,.3)
-			@media (prefers-color-scheme dark)
-				box-shadow inset 0 0 0 2px white, 0 0 0 2px rgba(white,.3)
-
-		&:focus:checked + span
-			box-shadow inset 0 0 0 2px $default, 0 0 0 2px rgba($default,.3)
-			@media (prefers-color-scheme dark)
-				box-shadow inset 0 0 0 2px $default, 0 0 0 2px rgba($default,.3)
-
 		&:checked + span
-			background rgba($default, .5)
+			background rgba($main, .5)
-			box-shadow inset 0 0 0 2px $default
+			box-shadow inset 0 0 0 2px $main
 
 			svg
 				color white
@@ -67,7 +62,6 @@ $backColor = #757575
 				box-shadow inset 0 0 0 2px white
 
 .radio
-	margin-left 18px // Margin + margin for Circle
 	span
 		border-radius 20px
 
@@ -86,20 +80,19 @@ $backColor = #757575
 .switch
 	padding 2px 0 2px 10px // 2px base padding 10px circle padding
 
-	&:hover span
+	&:hover span::after
-		box-shadow none
-
-		&::after
 			background black
+			@media (prefers-color-scheme dark)
+				background white
 
 	span
 		width 28px
 		height 14px
 		border-radius 20px
 		top 50%
+		margin-right 10px
 		box-shadow none
 		background rgba($backColor, .5)
-		transform translateY(-50%)
 
 		&::after
 			content " "
@@ -115,93 +108,39 @@ $backColor = #757575
 		width 20px
 
 		&:checked + span
-			box-shadow none
-
 			&::after
 				left 100%
 				transform translate(-50%, -50%)
-				background $default
+				background $main
-
-.primary
-	$color = $primary
 
+checkBox($color)
 	input:checked + span
 		background rgba($color, .5)
 		box-shadow inset 0 0 0 2px $color
 
 		&::after
 			background $color
-
+	input:focus:checked + span
+		box-shadow inset 0 0 0 2px $color, 0 0 0 2px rgba($color,.3)
 	&.switch
 		input:checked + span
 			box-shadow none
-
-.secondary
-	$color = $secondary
-
-	input:checked + span
-		background rgba($color, .5)
-		box-shadow inset 0 0 0 2px $color
-
-		&::after
-			background $color
-
-	&.switch
-		input:checked + span
-			box-shadow none
-
 .info
-	$color = $info
+	checkBox($infoLight)
-
+	@media (prefers-color-scheme dark)
-	input:checked + span
+		checkBox($infoDark)
-		background rgba($color, .5)
-		box-shadow inset 0 0 0 2px $color
-
-		&::after
-			background $color
-
-	&.switch
-		input:checked + span
-			box-shadow none
 
 .success
-	$color = $success
+	checkBox($successLight)
+	@media (prefers-color-scheme dark)
+		checkBox($successDark)
 
-	input:checked + span
+.error
-		background rgba($color, .5)
+	checkBox($errorLight)
-		box-shadow inset 0 0 0 2px $color
+	@media (prefers-color-scheme dark)
-
+		checkBox($errorDark)
-		&::after
-			background $color
-
-	&.switch
-		input:checked + span
-			box-shadow none
-
-.danger
-	$color = $danger
-
-	input:checked + span
-		background rgba($color, .5)
-		box-shadow inset 0 0 0 2px $color
-
-		&::after
-			background $color
-
-	&.switch
-		input:checked + span
-			box-shadow none
 
 .warning
-	$color = $warning
+	checkBox($warningLight)
-
+	@media (prefers-color-scheme dark)
-	input:checked + span
+		checkBox($warningDark)
-		background rgba($color, .5)
-		box-shadow inset 0 0 0 2px $color
-
-		&::after
-			background $color
-
-	&.switch
-		input:checked + span
-			box-shadow none

src/dzeio/Checkbox/index.tsx

@@ -7,38 +7,32 @@ import css from './Checkbox.module.styl'
 import Text from '../Text'
 
 interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
-	label?: string
+	label: string
-	id: string
+	type?: 'checkbox' | 'radio' | 'switch'
-	type?: undefined
-	radio?: boolean
-	switch?: boolean
-	color?: ColorType
 }
 
 export default class Checkbox extends React.Component<Props> {
 
 	public render() {
-		const props: Props = Object.assign({}, this.props)
+		const props: Partial<Props> = Object.assign({}, this.props)
 		delete props.label
 		delete props.type
-		delete props.color
-		delete props.switch
-		delete props.radio
 
-		const realType = this.props.radio ? 'radio' : 'checkbox'
+		const realType = this.props.type ?? 'checkbox'
 
 		return (
-			<label htmlFor={this.props.id} className={buildClassName(
+			<label htmlFor={this.props.id ?? this.props.label} className={buildClassName(
 				[css.label],
 				[css.radio, realType === 'radio'],
-				[css.switch, this.props.switch],
+				[css.switch, realType === 'switch'],
 				[css[this.props.color as string], this.props.color]
 			)}>
 				<input {...props}
-					type={realType}
+					id={this.props.id ?? this.props.label}
+					type={realType === 'switch' ? 'checkbox' : realType}
 				/>
 				<span>
-					{realType === 'checkbox' && ! this.props.switch && (
+					{realType === 'checkbox' && (
 						<Check strokeWidth={4} size={16}/>
 					)}
 				</span>

src/dzeio/Col/Col.module.styl

@@ -7,7 +7,7 @@
 	padding $gapSize 0 0 $gapSize
 
 	&.nogrow
-		max-width intial
+		max-width initial
 		flex-grow 0
 		flex-basis initial
 

src/dzeio/Footer/Footer.module.styl

@@ -7,7 +7,9 @@
 		background $foregroundDark
 
 	ul
-		list-type none
+		padding 0
+		display flex
+		justify-content center
 		li
 			display inline-block
 

src/dzeio/GradientBackground/GradientBackground.module.styl

@@ -1,35 +1,31 @@
 @import "../config"
 
-$transparent = 75%
+$percent = 15%
 
 .back
 	transition all $transition
-	background linear-gradient(to left, $default, transparentify($default, $transparent))
+	background $mainGradient
 
-.primary
+	&.fullscreen
-	$color = $primary
+		min-height 100vh
-	background linear-gradient(to left, $color, transparentify($color, $transparent))
-
-.secondary
-	$color = $secondary
-	background linear-gradient(to left, $color, transparentify($color, $transparent))
 
 .info
-	$color = $info
+	background linear-gradient(to right, $infoLight, lighten($infoLight, $percent))
-	background linear-gradient(to left, $color, transparentify($color, $transparent))
+	@media (prefers-color-scheme dark)
+		background linear-gradient(to right, $infoDark, darken($infoDark, $percent))
+		
 
 .success
-	$color = $success
+	background linear-gradient(to right, $successLight, lighten($successLight, $percent))
-	background linear-gradient(to left, $color, transparentify($color, $transparent))
+	@media (prefers-color-scheme dark)
+		background linear-gradient(to right, $successDark, darken($successDark, $percent))
 
-.danger
+.error
-	$color = $danger
+	background linear-gradient(to right, $errorLight, lighten($errorLight, $percent))
-	background linear-gradient(to left, $color, transparentify($color, $transparent))
+	@media (prefers-color-scheme dark)
+		background linear-gradient(to right, $errorDark, darken($errorDark, $percent))
 
 .warning
-	$color = $warning
+	background linear-gradient(to right, $warningLight, lighten($warningLight, $percent))
-	background linear-gradient(to left, $color, transparentify($color, $transparent))
+	@media (prefers-color-scheme dark)
-
+		background linear-gradient(to right, $warningDark, darken($warningDark, $percent))
-@media (prefers-color-scheme dark)
-	.back
-		background $darkBackground

src/dzeio/GradientBackground/index.tsx

@@ -8,12 +8,18 @@ interface Props {
 	color?: ColorType
 	className?: string
 	children: React.ReactNode
+	fullscreen?: boolean
 }
 
+/**
+ * Make the background a linear-gradient
+ * 
+ * @version 1.0.1
+ */
 export default class GradientBackground extends React.Component<Props> {
 
 	public render = () => (
-		<div className={buildClassName([css.back], [css[this.props.color as string], this.props.color], [this.props.className])}>
+		<div className={buildClassName(css.back, [css[this.props.color as string], this.props.color], this.props.className, [css.fullscreen, this.props.fullscreen])}>
 			{this.props.children}
 		</div>
 	)

src/dzeio/Image/Image.module.styl

@@ -1,5 +1,6 @@
 .parent
 	position relative
+	display inline-flex
 
 .image
 	transition .3s

src/dzeio/Input/Input.module.styl

@@ -6,7 +6,7 @@
 	max-width 100%
 	display inline-block
 
-	+ .parent
+	&:not(.block) + .parent:not(.block)
 		margin-left 16px
 
 	label
@@ -217,7 +217,7 @@
 				@media (prefers-color-scheme dark)
 					background #202020
 
-			&:hover
+			&:hover:not(:disabled)
 				background rgba(gray, .2)
 
 				@media (prefers-color-scheme dark)

src/dzeio/Link/index.tsx

@@ -24,7 +24,7 @@ interface Props {
 export default class Link extends React.Component<Props> {
 
 	public render() {
-		const external = this.props.external ?? !this.props.href.startsWith('/')
+		const external = this.props.external ?? this.props.href.startsWith('http')
 		if (external) {
 			// external link
 			return (

src/dzeio/Loader/Loader.module.styl

@@ -6,6 +6,7 @@
 	width 100%
 	height 7px
 	pointer-events none
+	z-index 200
 
 	top 0
 	&.hide

src/dzeio/Loader/index.tsx

@@ -4,9 +4,22 @@ import { buildClassName } from '../Util'
 import css from './Loader.module.styl'
 
 interface Props {
+	/**
+	 * The new Percentage (if you calculate it yourself)
+	 */
 	percent?: number
+
+	/**
+	 * Auto random loader
+	 */
 	auto?: {
+		/**
+		 * the minimum and maximum interval between two increment
+		 */
 		interval: [number, number]
+		/**
+		 * the minimum and maximum incrementation (MUST be an integer)
+		 */
 		increment: [number, number]
 	}
 }
@@ -15,6 +28,11 @@ interface State {
 	percent?: number
 }
 
+/**
+ * Display a simple loading animation at the top of the page
+ * 
+ * @version 1.0.0
+ */
 export default class Loader extends React.Component<Props, State> {
 
 	public state: State = {}

src/dzeio/Menu/Menu.module.styl

@@ -1,19 +0,0 @@
-@import '../config'
-
-.menu
-	position absolute
-	opacity 0
-	background white
-	pointer-events none
-	border-radius 4px
-	box-shadow 0 2px 4px 2px rgba(black, 25%)
-	z-index 99
-	transition opacity $transition
-	a
-		display block
-		text-align center
-		padding 16px
-
-	&.shown
-		opacity 1
-		pointer-events initial

src/dzeio/Menu/Menu.stories.tsx

@@ -1,13 +0,0 @@
-import { Meta } from '@storybook/react/types-6-0'
-import React from 'react'
-import Component from '.'
-
-export default {
-	title: 'DZEIO/Menu',
-	component: Component,
-	argTypes: {
-		content: {control: 'array', defaultValue: [{name: 'Name', href: 'https://www.google.com'}]}
-	}
-} as Meta
-
-export const Basic = (args: any) => <Component {...args} />

src/dzeio/Menu/index.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-
-import { buildClassName } from '../Util'
-import css from './Menu.module.styl'
-
-interface Props {
-	pos?: {top?: number, bottom?: number, left?: number, right?: number}
-	content: Array<{name: string, href: string, as?: string}>
-	show?: boolean
-}
-
-export default class Menu extends React.Component<Props> {
-
-	public render = () => (
-		<div className={buildClassName([css.menu], [css.shown, this.props.show])} style={this.props.pos}>
-			{this.props.content.map((item, index) => (
-				<Link key={index} href={item.href} as={item.as}>
-					<a>{item.name}</a>
-				</Link>
-			))}
-		</div>
-	)
-
-}

src/dzeio/Navbar/Navbar.module.styl

@@ -56,7 +56,6 @@
 		position fixed
 		top 70px
 		right 0
-		padding 16px
 		border-bottom-left-radius 4px
 		transform translateX(100%)
 		background inherit
@@ -217,16 +216,19 @@
 		padding 0
 
 .userMenu
-		// padding-bottom 16px
+	padding 8px 16px
-		a
+	a
-			padding 16px 0
+		display inline-block
+		padding-bottom 16px
 
 
 .mobileMenu
 	opacity 0
 	transition opacity $transition
+	pointer-events none
 	&.shown
 		opacity 1
+		pointer-events initial
 
 .mainGradient
 	//WIP

src/dzeio/Navbar/Navbar.stories.tsx

@@ -1,6 +1,8 @@
 import { Meta, Story } from '@storybook/react/types-6-0'
 import React from 'react'
+import { Zap, ZapOff } from 'react-feather'
 import Component from '.'
+import Text from '../Text'
 
 export default {
 	title: 'DZEIO/Navbar',
@@ -9,13 +11,10 @@ export default {
 
 export const Basic: Story<any> = (args: any) => <Component {...args} />
 Basic.args = {
-	items: [{
+	type: 'navbar',
-		path: '/dashboard',
+	logo: {src: '/90-38.svg', width: 90, height: 38},
-		name: 'Dasboard'
-	}],
 	loginUrl: '/login',
 	registerUrl: '/register',
-	type: 'navbar',
 	user: {
 		name: 'Username',
 		description: 'User Description',
@@ -23,8 +22,20 @@ Basic.args = {
 			links: [{
 				path: '/logout',
 				name: 'Logout'
-			}]
+			}, {
+				path: '/logout',
+				name: 'Logout'
+			}],
+			informations: (<Text>Testing :D</Text>)
 		}
 	},
-	logo: {src: '/assets/logo.svg', width: 90, height: 38}
+	items: [{
+		path: '/dashboard',
+		name: 'Dasboard',
+		icon: Zap
+	}, {
+		path: '/dashboard',
+		name: 'Dasboard',
+		icon: ZapOff
+	}],
 }

src/dzeio/Navbar/index.tsx

@@ -21,7 +21,7 @@ interface Props {
 	/**
 	 * Logo to display
 	 */
-	logo: ImageProps & {height: number, width: number}
+	logo?: ImageProps & {height: number, width: number}
 	/**
 	 * Login URL
 	 */
@@ -68,7 +68,7 @@ interface Props {
 		name: string
 	}>
 	/**
-	 * Internal Usem don't use it !
+	 * Internal Use don't use it !
 	 */
 	mobileMenu?: () => void
 }
@@ -82,7 +82,7 @@ interface State {
 
 /**
  * Navbar/Sidebar Component
- * @version 1.0.0
+ * @version 1.0.3
  */
 export default class Navbar extends React.Component<Props, State> {
 
@@ -164,11 +164,13 @@ export default class Navbar extends React.Component<Props, State> {
 		<>
 			<nav className={buildClassName(css[this.getType()], [css.short, this.state.short && !this.props.mobileMenu], [css.mobile, this.props.mobileMenu])}>
 				<Row nowrap className={css.header} align="center">
-					<Col className={css.imgContainer}>
+					{this.props.logo && (
-						<Link href="/">
+						<Col className={css.imgContainer}>
-							<Image {...this.props.logo} height={34} width={this.props.logo.width*34/this.props.logo.height} />
+							<Link href="/">
-						</Link>
+								<Image {...this.props.logo} height={34} width={this.props.logo.width*34/this.props.logo.height} />
-					</Col>
+							</Link>
+						</Col>
+					)}
 					{this.getType() === 'sidebar' && (
 						<Col nogrow><Text><div onClick={this.onSidebarButton}>
 							{this.state.short ? (
@@ -184,14 +186,14 @@ export default class Navbar extends React.Component<Props, State> {
 				)}
 				<ul>
 					{!this.state.isMobile && this.props.items.map((item) => (
-						<li key={item.path}><Link noStyle href={item.path}><a>
+						<li key={item.path}><Link noStyle href={item.path}>
 							<Text className={buildClassName([css.active, this.state.path?.startsWith(item.path)])}>
 								{this.getType() === 'sidebar' && item.icon && (
 									<item.icon />
 								)}
 								<span>{item.name}</span>
 							</Text>
-						</a></Link></li>
+						</Link></li>
 					))}
 				</ul>
 				<div style={{flex: 1}}></div>
@@ -222,7 +224,7 @@ export default class Navbar extends React.Component<Props, State> {
 							</div>
 						</div>
 						<div className={buildClassName(css.userMenu, [css.menuActive, !this.state.isMobile && this.state.menuActive])}>
-							<Row>
+							<Row nomargin>
 								{this.props.user.menu?.informations && (
 									<Col>{this.props.user.menu?.informations}</Col>
 								)}

src/dzeio/NotificationManager/NotificationManager.module.styl

@@ -0,0 +1,38 @@
+@import '../config.styl'
+
+.section
+	position fixed
+	bottom 0
+	left 0
+	padding 0 16px
+	max-width 25%
+	@media (max-width $tablet)
+		max-width 50%
+	@media (max-width $mobile)
+		width 100%
+		max-width 100%
+	> div
+		margin-bottom 16px
+		animation spawn 1 forwards ease-in-out .3s
+
+		&.remove
+			animation despawn 1 both ease-in-out .3s
+
+	.title
+		font-weight normal
+		margin 0
+@keyframes spawn
+	from
+		opacity 0
+		transform translateY(100%)
+	to
+		opacity 1
+		transform translateY(0)
+
+@keyframes despawn
+	from
+		opacity 1
+		transform translateY(0)
+	to
+		opacity 0
+		transform translateY(100%)

src/dzeio/NotificationManager/NotificationManager.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/react/types-6-0'
+import React from 'react'
+import { Zap } from 'react-feather'
+import Component from '.'
+
+export default {
+	title: 'DZEIO/NotificationManager',
+	component: Component
+} as Meta
+
+export const Basic = (args: any) => <Component {...args} />
+Basic.args = {
+	ttl: 999999999999,
+	notifications: [
+		'Test',
+		'LArge text lorem ipsum dolor sit amet, i dont know what to type yolo :D'
+	]
+}

src/dzeio/NotificationManager/index.tsx

@@ -0,0 +1,179 @@
+import { buildClassName } from '../Util'
+import Button from '../Button'
+import Box from '../Box'
+import Col from '../Col'
+import Text from '../Text'
+import Router from 'next/router'
+import React from 'react'
+import { X } from 'react-feather'
+
+import css from './NotificationManager.module.styl'
+
+export interface Notification {
+	message: string
+	actions?: Array<{
+		txt: string
+		action: (this: HTMLInputElement, event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+	}>
+	ttl?: number
+	internal?: {
+		timeRemaining: number
+	}
+}
+
+interface Props {
+	manageRoutes?: boolean
+	ttl?: number
+	notifications?: Array<string | Notification>
+}
+
+interface State {
+	notifications: Array<Notification | undefined>
+}
+
+export default class NotificationManager extends React.Component<Props, State> {
+
+	private static instance: NotificationManager
+
+
+	public state: State = {
+		notifications: []
+	}
+
+	private interval?: NodeJS.Timeout
+	private freezedNotification?: number
+
+	public constructor(props: Props | Readonly<Props>) {
+		super(props)
+		NotificationManager.instance = this
+	}
+
+	public static addNotification(notif: Omit<Notification, 'internal'> | string): number {
+		const realNotif: Notification = typeof notif === 'string' ? { message: notif, ttl: this.instance.props.ttl ?? 2000 } : notif
+
+		if (realNotif.ttl) {
+			realNotif.ttl /= 100
+			realNotif.internal = { timeRemaining: realNotif.ttl }
+		}
+		const notifs = this.instance.state.notifications
+		const id = notifs.push(realNotif) - 1
+		this.instance.setState({
+			notifications: notifs
+		})
+		return id
+	}
+
+	public static removeNotification(id: number, array?: Array<Notification|undefined>) {
+		const notifs = array || this.instance.state.notifications
+		notifs[id] = undefined
+		if (array) {
+			return
+		}
+		this.instance.setState({
+			notifications: notifs
+		})
+	}
+
+	public componentDidMount() {
+		if (this.props.notifications) {
+			for (const notif of this.props.notifications) {
+				NotificationManager.addNotification(notif)
+			}
+		}
+		if (this.props.manageRoutes) {
+			Router.events.on('routeChangeComplete', this.checkRouteForMessage)
+			this.checkRouteForMessage()
+		}
+	}
+
+	public componentDidUpdate() {
+		if (this.state.notifications.length > 0 && !this.interval) {
+			this.interval = setInterval(() => {
+				const notifs = this.state.notifications
+				for (let id = 0; id < notifs.length; id++) {
+					const notif = notifs[id]
+					if (this.freezedNotification === id && notif?.ttl) {
+						notif.internal = {timeRemaining: notif.ttl}
+					}
+					if (!notif || typeof notif.internal?.timeRemaining !== 'number' || id === this.freezedNotification) {
+						continue
+					}
+					if (notif.internal.timeRemaining < 1) {
+						NotificationManager.removeNotification(id)
+					}
+					notif.internal.timeRemaining -= 1
+				}
+				this.setState({
+					notifications: notifs
+				})
+			}, 100)
+		}
+		if (this.state.notifications.length === 0 && this.interval) {
+			clearInterval(this.interval)
+			this.interval = undefined
+		}
+	}
+
+	public componentWillUnMount() {
+		if (this.interval) {
+			clearInterval(this.interval)
+		}
+	}
+
+	public render = () => (
+		<section className={css.section}>
+			{this.state.notifications.map((el, index) => {
+				if (el === undefined) {
+					return
+				}
+				return (
+					<div
+						key={index}
+						onMouseEnter={this.onMouseEnter(index)}
+						onMouseLeave={this.onMouseExit(index)}
+						className={buildClassName([css.remove, typeof el.internal?.timeRemaining === 'number' && el.internal.timeRemaining <= 3])}
+					>
+						<Box
+							title={el.message}
+							titleClassName={css.title}
+							headerButtons={(
+								<Col nogrow>
+									<Text><X onClick={() => NotificationManager.removeNotification(index)} /></Text>
+								</Col>
+							)}
+						>
+							{el.actions && (
+								<div>
+									{el.actions.map((btn, aIndex) => (
+										<Button
+											onClick={btn.action as unknown as ((event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void)}
+											key={aIndex}
+										>{btn.txt}</Button>
+									))}
+								</div>
+							)}
+						</Box>
+					</div>
+				)
+			})}
+		</section>
+	)
+
+	private onMouseEnter = (id: number) => () => {
+		this.freezedNotification = id
+	}
+
+	private onMouseExit = (id: number) => () => {
+		if (this.freezedNotification === id) {
+			this.freezedNotification = undefined
+		}
+	}
+
+	private checkRouteForMessage = () => {
+		const msg = Router.query.msg
+		console.log(msg)
+		if (typeof msg === 'string') {
+			NotificationManager.addNotification(decodeURI(msg))
+		}
+	}
+}

src/dzeio/Row/Row.module.styl

@@ -3,14 +3,12 @@
 .row
 	display flex
 	flex-wrap wrap
+	margin (0 - $gapSize) 0 0 (0 - $gapSize)
+	padding $gapSize
 
-	&:not(.nomargin)
+	&.nomargin
-		margin (0 - $gapSize) 0 0
+	.row
-		padding 0 $gapSize * 2 0 $gapSize
+		padding 0
-
-		.row:not(.nomargin)
-			padding 0
-			margin (0 - $gapSize) 0 0 (0 - $gapSize)
 
 .nowrap
 	flex-wrap nowrap

src/dzeio/Text/index.tsx

@@ -12,7 +12,6 @@ interface Props {
 
 export default class Text extends React.Component<Props> {
 
-
 	public render() {
 		const classes = buildClassName(
 			css.text,
@@ -23,16 +22,10 @@ export default class Text extends React.Component<Props> {
 			this.props.className
 		)
 
-		switch (this.props.type || 'p') {
+		if (this.props.type === 'em') {
-		case 'h1': return (<h1 className={classes}>{this.props.children}</h1>)
+			return (<p className={classes}><em>{this.props.children}</em></p>)
-		case 'h2': return (<h2 className={classes}>{this.props.children}</h2>)
-		case 'h3': return (<h3 className={classes}>{this.props.children}</h3>)
-		case 'h4': return (<h4 className={classes}>{this.props.children}</h4>)
-		case 'h5': return (<h5 className={classes}>{this.props.children}</h5>)
-		case 'h6': return (<h6 className={classes}>{this.props.children}</h6>)
-		case 'em': return (<p className={classes}><em>{this.props.children}</em></p>)
-		case 'span': return (<span className={classes}>{this.props.children}</span>)
-		default: return (<p className={classes}>{this.props.children}</p>)
 		}
+
+		return React.createElement(this.props.type || 'p', {className: classes, children: this.props.children})
 	}
 }

src/dzeio/config.styl

@@ -1,17 +1,18 @@
 
 $main = #4285F4
 $textOnMain = white
+$mainGradient = linear-gradient(to right, $main, lighten($main, 20%))
 
-$infoDark = #304FFE
+$infoDark = #01579B
 $infoLight = #29B6F6
 
-$successDark = #388E3C
+$successDark = #1B5E20
 $successLight = #4CAF50
 
-$errorDark = #D32F2F
+$errorDark = #7F0000
 $errorLight = #F44336
 
-$warningDark = #F57C00
+$warningDark = #C43E00
 $warningLight = #FF9800
 
 $backgroundDark = #161616
@@ -44,14 +45,7 @@ rem($a)
 	($a / 16)rem
 
 // @deprecated colors
-$primary = $main
 $default = $main
-$secondary = $main
-$info = $infoLight
-$success = $successLight
-$danger = $errorLight
-$warning = $warningLight
-$darkBackground = $backgroundDark
 
 
 // See https://github.com/stylus/stylus/issues/1872#issuecomment-86553717

src/dzeio/interfaces.ts

@@ -1,6 +1,6 @@
 import { SVGAttributes } from 'react'
 
-export type ColorType = 'primary' | 'info' | 'success' | 'error' | 'warning'
+export type ColorType = 'info' | 'success' | 'error' | 'warning'
 
 export interface IconProps extends SVGAttributes<SVGElement> {
 	color?: string

src/index.ts

@@ -4,6 +4,8 @@
  * @summary DZEIO Component Library
  */
 
+import './dzeio/general.styl'
+
 import Box from './dzeio/Box'
 import Button from './dzeio/Button'
 import Checkbox from './dzeio/Checkbox'
@@ -17,8 +19,8 @@ import Image from './dzeio/Image'
 import Input from './dzeio/Input'
 import Link from './dzeio/Link'
 import Loader from './dzeio/Loader'
-import Menu from './dzeio/Menu'
 import Navbar from './dzeio/Navbar'
+import NotificationManager from './dzeio/NotificationManager'
 import Overflow from './dzeio/Overflow'
 import Popup from './dzeio/Popup'
 import Row from './dzeio/Row'
@@ -40,8 +42,8 @@ export {
 	Input,
 	Link,
 	Loader,
-	Menu,
 	Navbar,
+	NotificationManager,
 	Overflow,
 	Popup,
 	Row,