.editorconfig

@@ -1,12 +0,0 @@
-# EditorConfig is awesome: https://EditorConfig.org
-
-# top-most EditorConfig file
-root = true
-
-[*]
-indent_style = tab
-indent_size = 4
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true

.gitignore

@@ -9,3 +9,4 @@ types/
 !src/stylus.d.ts
 !.storybook/*.js
 style.css
+yarn-error.log

.storybook/main.js

@@ -1,9 +1,8 @@
 const path = require("path");
-const webpack = require('webpack')
 
 module.exports = {
 	"stories": [
-		"../src/dzeio/**/*.stories.tsx",
+		"../src/dzeio/**/*.stories.@(ts|tsx)",
 	],
 	"addons": [
 		"@storybook/addon-essentials"
@@ -17,18 +16,5 @@ 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

@@ -1,17 +0,0 @@
-// 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,6 +1,5 @@
 import '../src/dzeio/general.styl'
 import './mockNextRouter'
-import './mockNextImage'
 
 export const parameters = {
   layout: 'centered'

.storybook/public/16-16.svg

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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,6 +1,6 @@
 {
 	"name": "@dzeio/components",
-	"version": "0.11.3",
+	"version": "0.7.2",
 	"license": "MIT",
 	"main": "./index.js",
 	"types": "./types/index.d.ts",
@@ -11,15 +11,15 @@
 		"@storybook/addon-essentials": "^6.1.14",
 		"@storybook/cli": "^6.1.14",
 		"@storybook/react": "^6.1.14",
-		"@types/node": "^15.12.1",
+		"@types/node": "^14.14.28",
 		"@types/react": "^17.0.2",
 		"@types/react-dom": "^17.0.1",
 		"babel-loader": "^8.2.2",
 		"css-loader": "^5.0.2",
-		"lucide-react": "^0.15.19",
+		"next": "^10.0.5",
-		"next": "^10.0.0",
+		"react": "^17.0.1",
-		"react": "^16.0.0",
+		"react-dom": "^17.0.1",
-		"react-dom": "^16.0.0",
+		"react-feather": "^2.0.9",
 		"style-loader": "^2.0.0",
 		"stylus": "^0.54.8",
 		"stylus-loader": "^4.3.3",
@@ -28,17 +28,17 @@
 		"webpack": "^4.44.2"
 	},
 	"peerDependencies": {
-		"lucide-react": "^0.15.19",
+		"next": "^10.0.5",
-		"next": "^10.0.0 || ^11.0.0",
+		"react": "^17.0.1",
-		"react": "^16.0.0 || ^17.0.0",
+		"react-dom": "^17.0.1",
-		"react-dom": "^16.0.0 || ^17.0.0",
+		"react-feather": "^2.0.9",
 		"stylus": "^0.54.8",
-		"typescript": "^4.0.0"
+		"typescript": "^4.2.3"
 	},
 	"scripts": {
-		"dev": "start-storybook -s ./.storybook/public -p 6006",
+		"dev": "rm -rf src/dzeio/**/*.js && start-storybook -p 6006",
 		"build": "rollup --config",
-		"prepublishOnly": "npm run build",
+		"prepublishOnly": "yarn build",
 		"postinstall": "rollup --config"
 	},
 	"dependencies": {

rollup.config.js

@@ -12,9 +12,7 @@ export default [
 				url: false,
 				autoModules: true,
 				mode: 'extract',
-				modules: {
+
-					generateScopedName: '[local][hash:5]'
-				}
 			}),
 			typescript({useTsconfigDeclarationDir: true}), // so Rollup can convert TypeScript to JavaScript
 		],

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

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

src/dzeio/Box/BoxBody/index.tsx

@@ -0,0 +1,18 @@
+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/BoxHeader.module.styl

@@ -0,0 +1,13 @@
+@import "../../config.styl"
+
+.header
+	padding 16px
+
+.title
+	font-weight bold
+	font-size rem(18)
+	margin 0 0 8px
+
+.subtitle
+	font-size rem(16)
+	margin 0

src/dzeio/Box/BoxHeader/index.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import { buildClassName } from '../../Util'
+import css from './BoxHeader.module.styl'
+import Row from '../../Row'
+import Col from '../../Col'
+import Text from '../../Text'
+
+
+export interface Props {
+	title?: string
+	titleColSize?: number
+	subtitle?: string
+	titleClassName?: string
+}
+
+export default class BoxHeader extends React.Component<Props> {
+
+	public render = () => (
+		<>
+			<div className={buildClassName(
+				css.header
+			)}>
+				<Row>
+					<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.children}
+						</Row>
+					</Col>
+				</Row>
+			</div>
+		</>
+	)
+
+}
+
+/*
+Header
+delimiter?: boolean
+picture?: string // url
+category?: string // subtitle but above title
+title string
+subtitle string
+center?: boolean // if Center children is not used
+children?: content
+*/

src/dzeio/Box/BoxWrapper/BoxWrapper.module.styl

@@ -1,4 +1,4 @@
-@import "../config"
+@import "../../config"
 
 .box
 	background $foregroundLight
@@ -10,24 +10,3 @@
 	border 2px solid $grayDark
 	@media (prefers-color-scheme dark)
 		border-color $grayLight
-
-
-.header
-	padding 16px
-
-	+ .body
-		padding-top 0
-
-.title
-	font-weight bold
-	font-size rem(18)
-	margin 0 0 8px
-
-.subtitle
-	font-size rem(16)
-	margin 0
-
-
-// BODY
-.body
-	padding 16px

src/dzeio/Box/BoxWrapper/index.tsx

@@ -0,0 +1,28 @@
+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,22 +1,15 @@
 import React from 'react'
 
-import { buildClassName } from '../Util'
+import BoxWrapper from './BoxWrapper'
-
+import BoxHeader from './BoxHeader'
-import css from './Box.module.styl'
+import BoxBody from './BoxBody'
-import Row from '../Row'
-import Col from '../Col'
-import Text from '../Text'
 
 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
@@ -33,39 +26,27 @@ interface Props {
 
 export default class Box extends React.Component<Props> {
 	public render = () => (
-		<div
+		<BoxWrapper onClick={this.props.onClick} outline={this.props.outline} className={this.props.className}>
-			{...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) && (
-				<div className={buildClassName(
+				<BoxHeader
-					css.header
+					title={this.props.title}
-				)}>
+					titleColSize={this.props.titleColSize}
-					<Row nomargin justify="space-between">
+					subtitle={this.props.subtitle}
-						<Col>
+					titleClassName={this.props.titleClassName}
-							{this.props.title && (
+				>
-								<Text className={buildClassName(css.title, this.props.titleClassName)}>{this.props.title}</Text>
-							)}
-							{this.props.subtitle && (
-								<Text className={css.subtitle}>{this.props.subtitle}</Text>
-							)}
-						</Col>
-						{this.props.children && (
-							<Col nogrow>
-								<Row justify="flex-end">
 					{this.props.headerButtons}
-								</Row>
+				</BoxHeader>
-							</Col>
 			)}
-					</Row>
+			<BoxBody noPadding={this.props.noPadding}>
-				</div>
-			)}
-			{this.props.children && (
-				<div className={buildClassName([css.body, !this.props.noPadding])}>
 				{this.props.children}
-				</div>	
+			</BoxBody>
-			)}
+		</BoxWrapper>
-		</div>
 	)
 }
+
+
+export {
+	BoxWrapper,
+	BoxHeader,
+	BoxBody
+}

src/dzeio/Button/Button.module.styl

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

src/dzeio/Button/Button.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta } from '@storybook/react/types-6-0'
 import React from 'react'
-import { Zap } from 'lucide-react'
 import Component from '.'
 
 export default {
@@ -9,26 +8,3 @@ 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
-}
-
-export const ExternalLinkButton = (args: any) => <Component {...args}>Button</Component>
-ExternalLinkButton.args = {
-	nomargintop: true,
-	href: 'https://example.com',
-	block: true
-}

src/dzeio/Button/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import Link from '../Link'
+import Link from 'next/link'
 import { ColorType, IconProps } from '../interfaces'
 import { buildClassName } from '../Util'
 import Image from '../Image'
@@ -14,8 +14,7 @@ interface Props {
 	color?: ColorType
 	children?: React.ReactNode
 	icon?: FC<IconProps> | string
-	size?: 'large' | 'small'
+	size?: 'large' | 'small' | 'block'
-	block?: boolean
 	href?: string
 	as?: string
 	disabled?: boolean
@@ -34,9 +33,9 @@ export default class Button extends React.Component<Props> {
 			inner = (
 				<>
 					{typeof Icon === 'string' ? (
-						<Image imageProps={{src: Icon, width: 16, height: 16}} />
+						<Image src={Icon} width={16} height={16} />
 					) : (
-						<Icon size={this.props.size === 'large' ? 20 : this.props.size === 'small' ? 14 : 16} />
+						<Icon size={16} />
 					)}
 					{this.props.children && (
 						<span className={css.textInner}>{this.props.children}</span>
@@ -49,7 +48,6 @@ 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]
@@ -57,8 +55,8 @@ export default class Button extends React.Component<Props> {
 
 		if (this.props.href) {
 			return (
-				<Link linkProps={{onClick: this.props.onClick}} hideIcon noStyle href={this.props.href} className={buildClassName([classes], [css.disabled, this.props.disabled])}>
+				<Link href={this.props.href} as={this.props.as}>
-					{inner}
+					<a onClick={this.props.onClick} className={buildClassName([classes], [css.disabled, this.props.disabled])}>{inner}</a>
 				</Link>
 			)
 		}

src/dzeio/Checkbox/Checkbox.module.styl

@@ -5,33 +5,28 @@ $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 8px
+		margin-left 18px
 
 	span
 		top 0
 		left 0
 		width 20px
 		height @width
-		position relative
+		position absolute
-		box-shadow inset 0 0 0 2px $grayDark
+		box-shadow inset 0 0 0 2px $backColor
 		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 $main
+			background $default
 
 	svg
 		transition $transition
@@ -46,9 +41,19 @@ $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($main, .5)
+			background rgba($default, .5)
-			box-shadow inset 0 0 0 2px $main
+			box-shadow inset 0 0 0 2px $default
 
 			svg
 				color white
@@ -62,6 +67,7 @@ $backColor = #757575
 				box-shadow inset 0 0 0 2px white
 
 .radio
+	margin-left 18px // Margin + margin for Circle
 	span
 		border-radius 20px
 
@@ -80,19 +86,20 @@ $backColor = #757575
 .switch
 	padding 2px 0 2px 10px // 2px base padding 10px circle padding
 
-	&:hover span::after
+	&:hover span
+		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 " "
@@ -108,39 +115,93 @@ $backColor = #757575
 		width 20px
 
 		&:checked + span
+			box-shadow none
+
 			&::after
 				left 100%
 				transform translate(-50%, -50%)
-				background $main
+				background $default
+
+.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
-	checkBox($infoLight)
+	$color = $info
-	@media (prefers-color-scheme dark)
+
-		checkBox($infoDark)
+	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
 
 .success
-	checkBox($successLight)
+	$color = $success
-	@media (prefers-color-scheme dark)
-		checkBox($successDark)
 
-.error
+	input:checked + span
-	checkBox($errorLight)
+		background rgba($color, .5)
-	@media (prefers-color-scheme dark)
+		box-shadow inset 0 0 0 2px $color
-		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
-	checkBox($warningLight)
+	$color = $warning
-	@media (prefers-color-scheme dark)
+
-		checkBox($warningDark)
+	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

src/dzeio/Checkbox/index.tsx

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

src/dzeio/Col/Col.module.styl

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

src/dzeio/Footer/Footer.module.styl

@@ -7,15 +7,10 @@
 		background $foregroundDark
 
 	ul
-		padding 0
+		list-type none
-		display flex
-		justify-content center
 		li
 			display inline-block
 
-		&.socials a
-			padding 0 8px
-
 .animation
 	animation grow 1s linear infinite
 	display inline-block

src/dzeio/Footer/Footer.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, Story } from '@storybook/react/types-6-0'
 import React from 'react'
-import { Zap } from 'lucide-react'
 import Component from '.'
 
 export default {
@@ -11,9 +10,6 @@ export default {
 export const Basic: Story<any> = (args: any) => <Component {...args} />
 
 let tmp = Basic.bind({})
-tmp.args = {
+tmp.args = {links: [{name: 'test1', path: '/'}, {name: 'test2', path: '/'}, {name: 'test3', path: '/'}]}
-	links: [{name: 'test1', path: '/'}, {name: 'test2', path: '/'}, {name: 'test3', path: '/'}],
-	socials: [{icon: Zap, href: '/'}, {icon: '/16-16.svg', href: '/'}, {icon: Zap, href: '/'}]
-}
 
 export const Normal = tmp

src/dzeio/Footer/index.tsx

@@ -1,10 +1,9 @@
-import React, { FC } from 'react'
+import React from 'react'
-import { Heart } from 'lucide-react'
+import { Heart } from 'react-feather'
 import Link from '../Link'
-import { LucideProps } from 'lucide-react'
+
 import Text from '../Text'
 import css from './Footer.module.styl'
-import Image from 'next/image'
 
 interface Props {
 	text?: string
@@ -13,10 +12,6 @@ interface Props {
 		path: string
 		name: string
 	}>
-	socials?: Array<{
-		href: string
-		icon: FC<LucideProps> | string
-	}>
 }
 
 export default class Footer extends React.Component<Props> {
@@ -32,17 +27,6 @@ export default class Footer extends React.Component<Props> {
 					<li key={l.path}><Text>{index !== 0 && (<>&nbsp;- </>)}<Link href={l.path}>{l.name}</Link></Text></li>
 				))}</ul>
 			)}
-			{this.props.socials && (
-				<ul className={css.socials}>{this.props.socials.map((l, index) => (
-					<li key={l.href}><Text><Link hideIcon noStyle href={l.href}>
-						{typeof l.icon === 'string' ? (
-							<Image width={24} height={24} src={l.icon} />
-						) : (
-							<l.icon size={24} />
-					)}
-					</Link></Text></li>
-				))}</ul>
-			)}
 		</footer>
 	)
 }

src/dzeio/GradientBackground/GradientBackground.module.styl

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

src/dzeio/GradientBackground/index.tsx

@@ -8,18 +8,12 @@ interface Props {
 	color?: ColorType
 	className?: string
 	children: React.ReactNode
-	fullscreen?: boolean
 }
 
-/**
- * Make the background a linear-gradient
- *
- * @version 1.0.2
- */
 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, [css.fullscreen, this.props.fullscreen])}>
+		<div className={buildClassName([css.back], [css[this.props.color as string], this.props.color], [this.props.className])}>
 			{this.props.children}
 		</div>
 	)

src/dzeio/Image/Image.module.styl

@@ -1,34 +1,42 @@
 .parent
-	transition-property padding, width, height, background, top, left
+	position relative
-	transition-duration .3s
-	transition-timing-function ease-in-out
-	cursor pointer
 
-// Animation part 1
+.image
-// this is set to move the image from a normal position to a fixed one
+	transition .3s
-// + one the image itself there is style with position
+	object-fit contain
-.fs1
+	z-index 2
+
+	&.ph1
 		position fixed
-	z-index 1000
+		transition 0s
-	padding 0
-	> div
-		width 100%
-		height 100%
 
-// Animation part 2
+
-// this animation move the card from its original pos to a fullscreen one
+	&.ph2
-.fs2
-	padding 8px
 		width 100% !important
-	height 100vh !important
+		position fixed
-	background rgba(black, 50%)
+		max-width 100% !important
-	// padding 0
+		max-height 100% !important
-	user-select none
+		box-sizing border-box
+		padding 5%
 		top 0 !important
 		left 0 !important
-	> div
-		width 100%
 		height 100%
+		background #000000A0
 
-.body
+
+	&.after
+		background #00000000
+		// height 100%
+		box-sizing border-box
+		position fixed
+		// width 100%
+		z-index 0
+		padding initial
+
+
+.hideOverflow
 	overflow hidden
+
+
+.none
+	display none

src/dzeio/Image/index.tsx

@@ -1,103 +1,182 @@
-import React, { MouseEventHandler } from 'react'
+import React from 'react'
-
-import NextImage, { ImageProps } from 'next/image'
-import css from './Image.module.styl'
 import { buildClassName } from '../Util'
+import NextImage from 'next/image'
 
-interface Props {
+import css from './Image.module.styl'
-	imageProps: ImageProps
-	/**
-	 * Define if the image can go fullscreen
-	 */
-	fullscreen?: boolean
-}
 
-interface States {
+export interface ImageProps {
-	image?: {
+	src: string
-		size: [number | string, number | string]
+	deleteOnError?: boolean
-		pos: [number, number]
+	canFullscreen?: boolean
-	}
+	width: number
-	transform?: [number, number]
+	height: number
+	alt?: string
+
+	// ClassNames
+	parentClassName?: string
 	className?: string
+
+	// Events
+	onClick?: () => void
 }
 
-export default class Image extends React.Component<Props, States> {
+type evType<T = HTMLImageElement> = React.SyntheticEvent<T, Event>
 
-	public state: States = {}
+export default class Image extends React.Component<ImageProps> {
 
-	private animationCount = 0
+	private ref: React.RefObject<HTMLImageElement> = React.createRef()
+	private plchldr: React.RefObject<HTMLDivElement> = React.createRef()
+	private parent: React.RefObject<HTMLDivElement> = React.createRef()
+	private pic: React.RefObject<HTMLDivElement> = React.createRef()
 
-	public componentDidUpdate() {
+	private cardPos: Array<number> = []
-		if (!this.props.fullscreen) {return}
+	private cardSize: Array<number> = []
-		if (this.state.image) {
+
-			document.body.classList.add(css.body)
+	private isFullscreen = false
-		} else {
+
-			document.body.classList.remove(css.body)
+	public async componentDidMount() {
+		if (this.props.canFullscreen) {
+			window.addEventListener('scroll', this.onScroll)
+			window.addEventListener('resize', this.onResize)
+			this.onScroll()
+			this.onResize()
 		}
 	}
 
-	public componentWillUnmount() {
+	public async componentDidUpdate() {
-		if (!this.props.fullscreen) {return}
+		this.pic.current?.classList.remove(css.none)
-		document.body.classList.remove(css.body)
+		if (this.props.canFullscreen) {
+			this.onScroll()
+			this.onResize()
+		}
+		if (this.isFullscreen) {
+			this.onClick()
+		}
+	}
+
+	public async componentWillUnmount() {
+		if (this.props.canFullscreen) {
+			window.removeEventListener('scroll', this.onScroll)
+			window.removeEventListener('resize', this.onResize)
+		}
 	}
 
 	public render() {
-		if (!this.props.fullscreen) {
+		const pic = (
-			return <NextImage
+			<div ref={this.pic} className={buildClassName(this.props.parentClassName, css.parent)}>
-				{...this.props.imageProps}
-				objectFit="contain"
-			/>
-		}
-		return (
-			<>
-				{this.state.image && (
-					<div style={{width: this.state.image.size[0], height: this.state.image.size[1]}}></div>
-				)}
-
-				<div
-					className={buildClassName(css.parent, [css.fs1, this.state.image], [this.state.className, this.state.image])}
-					style={this.state.image ? {
-						top: this.state.image.pos[1],
-						left: this.state.image.pos[0],
-						width: this.state.image.size[0],
-						height: this.state.image.size[1]
-					} : undefined}
-					onClick={this.props.fullscreen ? this.onClick : undefined}
-
-				>
 				<NextImage
-						priority
+					className={buildClassName([css.image], [this.props.className])}
-						quality={100}
+					src={this.props.src}
-						{...this.props.imageProps}
+					onClick={this.props.canFullscreen ? this.onClick : this.props.onClick}
-						objectFit="contain"
+					onError={this.props.deleteOnError && this.onError || undefined}
+					// layout="fill"
+					width={this.props.width}
+					height={this.props.height}
+					alt={this.props.alt}
 				/>
 			</div>
-			</>
+		)
+		if (this.props.canFullscreen) {
+			return (
+				<div ref={this.parent}>
+					<div ref={this.plchldr} className={css.none}></div>
+					{pic}
+				</div>
 			)
 		}
+		return pic
+	}
 
-	private onClick: MouseEventHandler<HTMLDivElement> = (ev) => {
+	private onScroll = async () => {
-		const target = ev.currentTarget
+		if (!this.ref.current || this.isFullscreen || !this.props.canFullscreen) {
-		const isFullscreen = !(this.state.image && this.state.className)
-		const currentCount = ++this.animationCount
-		this.setState(isFullscreen ? {
-			image: this.state.image ?? {
-				size: [target.offsetWidth, target.offsetHeight],
-				pos: [target.offsetLeft - window.scrollX, target.offsetTop - window.scrollY]
-			},
-			className: undefined
-		} : {
-			className: undefined
-		}, () => {
-			setTimeout(() => {
-				if (this.animationCount !== currentCount) {
 			return
 		}
-				this.setState({
+
-					className: isFullscreen ? css.fs2 : undefined,
+		this.cardPos = [this.ref.current.offsetTop - window.scrollY, this.ref.current.offsetLeft - window.scrollX]
-					image: isFullscreen ? this.state.image : undefined
+		this.ref.current.style.top = this.cardPos[0] + 'px'
-				})
+		this.ref.current.style.left = this.cardPos[1] + 'px'
-			}, isFullscreen ? 10 : 310)
+	}
-		})
+
+	private onResize = async () => {
+		if (!this.ref.current || !this.plchldr.current || !this.props.canFullscreen || this.isFullscreen) {
+			return
+		}
+		let tmp = [this.ref.current.offsetHeight, this.ref.current.offsetWidth]
+		if (this.parent.current) {
+			tmp = [this.parent.current.offsetHeight, this.ref.current.offsetWidth]
+		}
+		this.plchldr.current.style.width = `${tmp[1]}px`
+		this.plchldr.current.style.height = `${tmp[0]}px`
+	}
+
+	private onClick = async () => {
+		if (!this.ref.current || !this.props.canFullscreen || !this.plchldr.current) {
+			return
+		}
+		if (this.props.onClick) {
+			this.props.onClick()
+		}
+
+		const i = this.ref.current
+		const c = this.plchldr.current
+		const body = document.body
+		i.style.top = this.cardPos[0] + 'px'
+		i.style.left = this.cardPos[1] + 'px'
+
+		if (this.isFullscreen) {
+			i.style.width = this.cardSize[1] + 'px'
+			i.style.height = this.cardSize[0] + 'px'
+			body.classList.remove(css.hideOverflow)
+			i.classList.remove(css.ph2)
+			i.classList.add(css.after)
+
+			setTimeout(() => {
+				if (i.classList.contains(css.ph2) || i.classList.contains(css.ph1) || this.isFullscreen) {
+					return
+				}
+				const w = this.valToPixel(this.props.width)
+				const mh = this.valToPixel(this.props?.height)
+				const mw = this.valToPixel(this.props?.width)
+				c.classList.add(css.none)
+				i.style.height = ''
+				i.style.width = w
+				i.style.maxHeight = mh
+				i.style.maxWidth = mw
+				i.classList.remove(css.after)
+			}, 350)
+			this.isFullscreen = false
+		} else {
+			i.classList.add(css.ph1)
+			c.classList.remove(css.none)
+			i.classList.add(css.ph2)
+			i.classList.remove(css.ph1)
+			body.classList.add(css.hideOverflow)
+			this.isFullscreen = true
 		}
 	}
+
+	private valToPixel(value: number|string|undefined): string {
+		if (typeof value === 'number') {
+			return `${value}px`
+		}
+		if (typeof value === 'undefined') {
+			return ''
+		}
+		return value
+	}
+
+	private onLoad = async (ev: evType) => {
+		ev.currentTarget.style.height = ''
+		ev.currentTarget.style.width = ''
+	}
+
+	private onError = async (ev: evType) => {
+		this.w('Picture not loaded', ev.currentTarget.src)
+		ev.currentTarget.parentElement?.classList.add(css.none)
+	}
+
+	private w(...messages: any) {
+		console.warn('[ Picture ]', ...messages)
+	}
+
+}

src/dzeio/Input/Input.module.styl

@@ -6,7 +6,7 @@
 	max-width 100%
 	display inline-block
 
-	&:not(.block) + .parent:not(.block)
+	+ .parent
 		margin-left 16px
 
 	label
@@ -180,7 +180,7 @@
 				~ svg
 					color @border-color
 			&:invalid
-				border-color $errorDark
+				border-color $errorLight
 
 				~ label
 					color @border-color
@@ -188,7 +188,7 @@
 				~ svg
 					color @border-color
 				@media (prefers-color-scheme dark)
-					border-color $errorLight
+					border-color $errorDark
 
 					~ label
 						color @border-color
@@ -217,7 +217,7 @@
 				@media (prefers-color-scheme dark)
 					background #202020
 
-			&:hover:not(:disabled)
+			&:hover
 				background rgba(gray, .2)
 
 				@media (prefers-color-scheme dark)
@@ -229,7 +229,7 @@
 						background #1c1c1c
 			&:focus
 				background rgba(gray, .3)
-				border-bottom 2px solid $main
+				border-bottom 2px solid $default
 
 				&.opaque
 					background white

src/dzeio/Input/Input.stories.tsx

@@ -2,7 +2,7 @@ import { Meta } from '@storybook/react/types-6-0'
 import { Story } from "@storybook/react"
 import React from 'react'
 import Component from '.'
-import { X } from 'lucide-react'
+import { X } from 'react-feather'
 
 export default {
 	title: 'DZEIO/Input',

src/dzeio/Input/index.tsx

@@ -1,10 +1,11 @@
 import React, { FC } from 'react'
 
-import { ChevronDown } from 'lucide-react'
+import { ChevronDown } from 'react-feather'
 import Text from '../Text'
 import { IconProps } from '../interfaces'
 import { buildClassName } from '../Util'
 import css from './Input.module.styl'
+import Row from '../Row'
 
 interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
 	id?: string
@@ -97,7 +98,7 @@ export default class Input extends React.Component<Props, States> {
 			baseProps.onWheel = (ev: React.WheelEvent<HTMLInputElement>) => ev.currentTarget.blur()
 		}
 
-		if (this.props.type === 'select' && !this.props.readOnly) {
+		if (this.props.type === 'select') {
 			input = (
 				<select
 					ref={this.props.selectRef || this.inputRef}
@@ -112,15 +113,6 @@ export default class Input extends React.Component<Props, States> {
 					{this.props.children}
 				</select>
 			)
-		// select is readonly
-		} else if (this.props.type === 'select') {
-			input = (
-				<input
-					{...props}
-					{...baseProps}
-					type="text"
-				/>
-			)
 		} else if (this.props.type === 'textarea') {
 			delete baseProps.ref
 			input = (
@@ -178,9 +170,9 @@ export default class Input extends React.Component<Props, States> {
 					</div>
 				)}
 
-				{this.props.autocomplete && this.props.autocomplete.indexOf(this.state?.value ?? this.props.value?.toString() ?? '') === -1 && (
+				{this.props.autocomplete && this.props.autocomplete.indexOf(this.state?.value || '') === -1 && (
 					<ul className={buildClassName(css.autocomplete, [css.reverse, !this.state.isInFirstPartOfScreen])}>
-						{this.props.autocomplete.filter((item) => item.toLowerCase().includes(this.state?.value?.toLowerCase() ?? this.props.value?.toString().toLowerCase() ?? '')).map((item) => (<li key={item} onClick={this.onAutoCompleteClick(item)}><Text>{item}</Text></li>))}
+						{this.props.autocomplete.filter((item) => item.includes(this.state?.value || '')).map((item) => (<li key={item} onClick={this.onAutoCompleteClick(item)}><Text>{item}</Text></li>))}
 					</ul>
 				)}
 			</div>
@@ -191,7 +183,7 @@ export default class Input extends React.Component<Props, States> {
 		const div = this.parentRef.current
 		if (!div) {return}
 		const result = !(div.offsetTop - window.scrollY >= window.innerHeight / 2)
-		// console.log(result, div, this.state.isInFirstPartOfScreen)
+		console.log(result, div, this.state.isInFirstPartOfScreen)
 		if (this.state.isInFirstPartOfScreen !== result) {
 			this.setState({isInFirstPartOfScreen: result})
 		}
@@ -209,8 +201,8 @@ export default class Input extends React.Component<Props, States> {
 			this.setState({textAreaHeight: this.inputRef.current.scrollHeight})
 		})
 
-	private onAutoCompleteClick = (value: string) => async () => {
+	private onAutoCompleteClick = (value: string) => () => {
-		// console.log('test')
+		console.log('test')
 		const item = this.getElement()
 		if (!item) {return}
 		const valueSetter = Object.getOwnPropertyDescriptor(item, 'value')?.set
@@ -224,9 +216,6 @@ export default class Input extends React.Component<Props, States> {
 			valueSetter.call(item, value)
 		}
 		item.dispatchEvent(new Event('input', {bubbles: true}))
-		if (this.props.type === 'textarea') {
-			await this.parentScroll()
-		}
 	}
 
 	private onChange = async (event?: React.FormEvent<HTMLDivElement>) => {

src/dzeio/Link/Link.stories.tsx

@@ -7,9 +7,7 @@ export default {
 	component: Component,
 	argTypes: {
 		href: {control: 'text', defaultValue: 'https://www.dzeio.com'},
-		text: {control: 'text', defaultValue: 'Dzeio'},
+		text: {control: 'text', defaultValue: 'Dzeio'}
-		external: {control: 'boolean'},
-		hideIcon: {control: 'boolean'}
 	}
 } as Meta
 

src/dzeio/Link/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import NextLink from 'next/link'
-import { ExternalLink } from 'lucide-react'
+import { ExternalLink } from 'react-feather'
 
 import css from './Link.module.styl'
 import { buildClassName } from '../Util'
@@ -19,35 +19,23 @@ interface Props {
 	 * Override external detection system
 	 */
 	external?: boolean
-
-	/**
-	 * force hiding the icon
-	 */
-	hideIcon?: boolean
 }
 
 export default class Link extends React.Component<Props> {
 
 	public render() {
-		const isExternal = this.props.href.startsWith('http')
+		const external = this.props.external ?? !this.props.href.startsWith('/')
-		const externalProps = this.props.external ?? isExternal ? {
+		if (external) {
-			rel: 'noreferrer nofollow',
-			target: '_blank'
-		} : {}
-
-		if (isExternal) {
 			// external link
 			return (
 				<a
 					{...this.props.linkProps}
 					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
 					href={this.props.href}
-					{...externalProps}
+					rel="noreferrer nofollow"
+					target="_blank"
 				>
-					{this.props.children}
+					{this.props.children}<ExternalLink size={16} className={css.icon} />
-					{(this.props.external !== false && !this.props.hideIcon) && (
-						<ExternalLink size={16} className={css.icon} />
-					)}
 				</a>
 			)
 		}
@@ -55,7 +43,6 @@ export default class Link extends React.Component<Props> {
 			<NextLink href={this.props.href}>
 				<a
 					{...this.props.linkProps}
-					{...externalProps}
 					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
 				>{this.props.children}</a>
 			</NextLink>

src/dzeio/Loader/Loader.module.styl

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

src/dzeio/Loader/index.tsx

@@ -4,22 +4,9 @@ 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]
 	}
 }
@@ -28,11 +15,6 @@ 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 = {}
@@ -48,8 +30,8 @@ export default class Loader extends React.Component<Props, State> {
 
 	public componentWillUnmount() {
 		if (this.props.auto) {
-			Router.events.off('routeChangeComplete', this.routeChangeComplete)
+			Router.events.off('routechangeComplete', this.routeChangeComplete)
-			Router.events.off('routeChangeStart', this.routeChangeStart)
+			Router.events.off('routechangeStart', this.routeChangeStart)
 		}
 	}
 

src/dzeio/Menu/Menu.module.styl

@@ -0,0 +1,19 @@
+@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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,25 @@
+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,6 +56,7 @@
 		position fixed
 		top 70px
 		right 0
+		padding 16px
 		border-bottom-left-radius 4px
 		transform translateX(100%)
 		background inherit
@@ -216,19 +217,16 @@
 		padding 0
 
 .userMenu
-	padding 8px 16px
+		// padding-bottom 16px
 		a
-		display inline-block
+			padding 16px 0
-		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,8 +1,6 @@
 import { Meta, Story } from '@storybook/react/types-6-0'
 import React from 'react'
-import { Zap, ZapOff } from 'lucide-react'
 import Component from '.'
-import Text from '../Text'
 
 export default {
 	title: 'DZEIO/Navbar',
@@ -11,10 +9,13 @@ export default {
 
 export const Basic: Story<any> = (args: any) => <Component {...args} />
 Basic.args = {
-	type: 'navbar',
+	items: [{
-	logo: {src: '/90-38.svg', width: 90, height: 38},
+		path: '/dashboard',
+		name: 'Dasboard'
+	}],
 	loginUrl: '/login',
 	registerUrl: '/register',
+	type: 'navbar',
 	user: {
 		name: 'Username',
 		description: 'User Description',
@@ -22,20 +23,8 @@ Basic.args = {
 			links: [{
 				path: '/logout',
 				name: 'Logout'
-			}, {
+			}]
-				path: '/logout',
-				name: 'Logout'
-			}],
-			informations: (<Text>Testing :D</Text>)
 		}
 	},
-	items: [{
+	logo: {src: '/assets/logo.svg', width: 90, height: 38}
-		path: '/dashboard',
-		name: 'Dasboard',
-		icon: Zap
-	}, {
-		path: '/dashboard',
-		name: 'Dasboard',
-		icon: ZapOff
-	}],
 }

src/dzeio/Navbar/index.tsx

@@ -2,7 +2,7 @@ import Router from 'next/router'
 
 import Image, { ImageProps } from 'next/image'
 import React, { FC } from 'react'
-import { ChevronDown, ChevronsRight, Menu, X } from 'lucide-react'
+import { ChevronDown, ChevronsRight, Menu, X } from 'react-feather'
 import Text from '../Text'
 import Col from '../Col'
 import Row from '../Row'
@@ -68,7 +68,7 @@ interface Props {
 		name: string
 	}>
 	/**
-	 * Internal Use don't use it !
+	 * Internal Usem don't use it !
 	 */
 	mobileMenu?: () => void
 }
@@ -82,7 +82,7 @@ interface State {
 
 /**
  * Navbar/Sidebar Component
- * @version 1.0.3
+ * @version 1.0.1
  */
 export default class Navbar extends React.Component<Props, State> {
 
@@ -186,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}>
+						<li key={item.path}><Link noStyle href={item.path}><a>
 							<Text className={buildClassName([css.active, this.state.path?.startsWith(item.path)])}>
 								{this.getType() === 'sidebar' && item.icon && (
 									<item.icon />
 								)}
 								<span>{item.name}</span>
 							</Text>
-						</Link></li>
+						</a></Link></li>
 					))}
 				</ul>
 				<div style={{flex: 1}}></div>
@@ -224,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 nomargin>
+							<Row>
 								{this.props.user.menu?.informations && (
 									<Col>{this.props.user.menu?.informations}</Col>
 								)}

src/dzeio/NotificationManager/NotificationManager.module.styl

@@ -1,39 +0,0 @@
-@import '../config.styl'
-
-.section
-	position fixed
-	bottom 0
-	left 0
-	padding 0 16px
-	z-index 400
-	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

@@ -1,18 +0,0 @@
-import { Meta } from '@storybook/react/types-6-0'
-import React from 'react'
-import { Zap } from 'lucide-react'
-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

@@ -1,179 +0,0 @@
-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 'lucide-react'
-
-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/Popup/index.tsx

@@ -1,15 +1,16 @@
 import React from 'react'
-import { X } from 'lucide-react'
+import { X } from 'react-feather'
 import Text from '../Text'
 import Box from '../Box'
 import Row from '../Row'
+import { Props as HeaderProps } from '../Box/BoxHeader'
 
 import css from './Popup.module.styl'
 
 interface Props {
 	children: React.ReactNode
 	onClose?: () => void
-	header?: Box['props']
+	header?: HeaderProps
 }
 
 export default class Popup extends React.Component<Props> {

src/dzeio/Row/Row.module.styl

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

src/dzeio/Table/Table.module.styl

@@ -1,22 +1,13 @@
-@import '../config'
-
 .table
 	border-spacing 0
-	border 2px solid $grayDark
+	border 2px solid #EEE
-	@media (prefers-color-scheme dark)
-		border-color $grayLight
 	border-radius 4px
 	width 100%
 
 	td
-		border-top 1px solid $grayDark
+		border-top 1px solid #EEE
-		@media (prefers-color-scheme dark)
-			border-color $grayLight
 
 	th
 	td
 		padding 8px
 		text-align left
-
-.parent
-	overflow-x auto

src/dzeio/Table/index.tsx

@@ -1,20 +1,15 @@
 import React from 'react'
-import { buildClassName } from '../Util'
 
 import css from './Table.module.styl'
 
 interface Props {
 	children: React.ReactNode
-	parentClassName?: string
-	className?: string
 }
 
 export default class Table extends React.Component<Props> {
 
 	public render = () => (
-		<div className={buildClassName(css.parent, this.props.parentClassName)}>
+		<table className={css.table}>{this.props.children}</table>
-			<table className={buildClassName(css.table, this.props.className)}>{this.props.children}</table>
-		</div>
 	)
 
 }

src/dzeio/Text/Text.module.styl

@@ -1,9 +1,6 @@
 .text
 	margin 0
 
-	+ .text
-		margin-top 8px
-
 .white
 	color white
 

src/dzeio/Text/Text.stories.tsx

@@ -1,15 +0,0 @@
-import { Meta } from '@storybook/react/types-6-0'
-import React from 'react'
-import Component from '.'
-
-export default {
-	title: 'DZEIO/Text',
-	component: Component
-} as Meta
-
-export const Basic = (args: any) => (
-	<>
-		<Component {...args}>TExt</Component>
-		<Component {...args}>TExt</Component>
-	</>
-)

src/dzeio/Text/index.tsx

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

src/dzeio/config.styl

@@ -1,18 +1,17 @@
 
 $main = #4285F4
 $textOnMain = white
-$mainGradient = linear-gradient(to right, $main, lighten($main, 20%))
 
-$infoDark = #01579B
+$infoDark = #304FFE
 $infoLight = #29B6F6
 
-$successDark = #1B5E20
+$successDark = #388E3C
 $successLight = #4CAF50
 
-$errorDark = #7F0000
+$errorDark = #D32F2F
 $errorLight = #F44336
 
-$warningDark = #C43E00
+$warningDark = #F57C00
 $warningLight = #FF9800
 
 $backgroundDark = #161616
@@ -45,11 +44,17 @@ 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
 use('stylusUtils.js')
 
-// Import theme in the root folder of the project
 @import '../../../../../../theme' if file-exists('../../../../../../theme.styl')

src/dzeio/interfaces.ts

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

src/index.ts

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