Bump json5 from 1.0.1 to 1.0.2

Bumps [json5](https://github.com/json5/json5) from 1.0.1 to 1.0.2.
- [Release notes](https://github.com/json5/json5/releases)
- [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md)
- [Commits](https://github.com/json5/json5/compare/v1.0.1...v1.0.2)

---
updated-dependencies:
- dependency-name: json5
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.editorconfig

@@ -0,0 +1,12 @@
+# 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,4 +9,3 @@ types/
 !src/stylus.d.ts
 !.storybook/*.js
 style.css
-yarn-error.log

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dzeio/components",
-	"version": "0.10.0",
+	"version": "0.11.3",
 	"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": "^14.14.28",
+		"@types/node": "^15.12.1",
 		"@types/react": "^17.0.2",
 		"@types/react-dom": "^17.0.1",
 		"babel-loader": "^8.2.2",
 		"css-loader": "^5.0.2",
-		"next": "^10.0.5",
+		"lucide-react": "^0.15.19",
-		"react": "^17.0.1",
+		"next": "^10.0.0",
-		"react-dom": "^17.0.1",
+		"react": "^16.0.0",
-		"react-feather": "^2.0.9",
+		"react-dom": "^16.0.0",
 		"style-loader": "^2.0.0",
 		"stylus": "^0.54.8",
 		"stylus-loader": "^4.3.3",
@@ -28,17 +28,17 @@
 		"webpack": "^4.44.2"
 	},
 	"peerDependencies": {
-		"next": "^10.0.5",
+		"lucide-react": "^0.15.19",
-		"react": "^17.0.1",
+		"next": "^10.0.0 || ^11.0.0",
-		"react-dom": "^17.0.1",
+		"react": "^16.0.0 || ^17.0.0",
-		"react-feather": "^2.0.9",
+		"react-dom": "^16.0.0 || ^17.0.0",
 		"stylus": "^0.54.8",
-		"typescript": "^4.2.3"
+		"typescript": "^4.0.0"
 	},
 	"scripts": {
 		"dev": "start-storybook -s ./.storybook/public -p 6006",
 		"build": "rollup --config",
-		"prepublishOnly": "yarn build",
+		"prepublishOnly": "npm run build",
 		"postinstall": "rollup --config"
 	},
 	"dependencies": {

src/dzeio/Button/Button.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/react/types-6-0'
 import React from 'react'
-import { Zap } from 'react-feather'
+import { Zap } from 'lucide-react'
 import Component from '.'
 
 export default {
@@ -25,3 +25,10 @@ WithImg.args = {
 	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 'next/link'
+import Link from '../Link'
 import { ColorType, IconProps } from '../interfaces'
 import { buildClassName } from '../Util'
 import Image from '../Image'
@@ -34,7 +34,7 @@ export default class Button extends React.Component<Props> {
 			inner = (
 				<>
 					{typeof Icon === 'string' ? (
-						<Image parentClassName={css.img} src={Icon} width={16} height={16} />
+						<Image imageProps={{src: Icon, width: 16, height: 16}} />
 					) : (
 						<Icon size={this.props.size === 'large' ? 20 : this.props.size === 'small' ? 14 : 16} />
 					)}
@@ -57,8 +57,8 @@ export default class Button extends React.Component<Props> {
 
 		if (this.props.href) {
 			return (
-				<Link href={this.props.href} as={this.props.as}>
+				<Link linkProps={{onClick: this.props.onClick}} hideIcon noStyle href={this.props.href} className={buildClassName([classes], [css.disabled, this.props.disabled])}>
-					<a onClick={this.props.onClick} className={buildClassName([classes], [css.disabled, this.props.disabled])}>{inner}</a>
+					{inner}
 				</Link>
 			)
 		}

src/dzeio/Checkbox/index.tsx

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

src/dzeio/Footer/Footer.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react/types-6-0'
 import React from 'react'
-import { Zap } from 'react-feather'
+import { Zap } from 'lucide-react'
 import Component from '.'
 
 export default {

src/dzeio/Footer/index.tsx

@@ -1,48 +1,48 @@
-import React, { FC } from 'react'
+import React, { FC } from 'react'
-import { Heart } from 'react-feather'
+import { Heart } from 'lucide-react'
-import Link from '../Link'
+import Link from '../Link'
-import { Icon } from 'react-feather'
+import { LucideProps } from 'lucide-react'
-import Text from '../Text'
+import Text from '../Text'
-import css from './Footer.module.styl'
+import css from './Footer.module.styl'
-import Image from 'next/image'
+import Image from 'next/image'
-
+
-interface Props {
+interface Props {
-	text?: string
+	text?: string
-	company?: string
+	company?: string
-	links?: Array<{
+	links?: Array<{
-		path: string
+		path: string
-		name: string
+		name: string
-	}>
+	}>
-	socials?: Array<{
+	socials?: Array<{
-		href: string
+		href: string
-		icon: Icon | string
+		icon: FC<LucideProps> | string
-	}>
+	}>
-}
+}
-
+
-export default class Footer extends React.Component<Props> {
+export default class Footer extends React.Component<Props> {
-	public render = () => (
+	public render = () => (
-		<footer className={css.footer}>
+		<footer className={css.footer}>
-			{this.props.text ? (
+			{this.props.text ? (
-				<Text align="center">{this.props.text}</Text>
+				<Text align="center">{this.props.text}</Text>
-			) : (
+			) : (
-				<Text align="center">Made with <span className={css.animation}><Heart color={'#E6808A'} fill={'#E6808A'} size={16} fillOpacity={0.5} /></span> by {this.props.company || 'Dzeio'}</Text>
+				<Text align="center">Made with <span className={css.animation}><Heart color={'#E6808A'} fill={'#E6808A'} size={16} fillOpacity={0.5} /></span> by {this.props.company || 'Dzeio'}</Text>
-			)}
+			)}
-			{this.props.links && (
+			{this.props.links && (
-				<ul>{this.props.links.map((l, index) => (
+				<ul>{this.props.links.map((l, index) => (
-					<li key={l.path}><Text>{index !== 0 && (<>&nbsp;- </>)}<Link href={l.path}>{l.name}</Link></Text></li>
+					<li key={l.path}><Text>{index !== 0 && (<>&nbsp;- </>)}<Link href={l.path}>{l.name}</Link></Text></li>
-				))}</ul>
+				))}</ul>
-			)}
+			)}
-			{this.props.socials && (
+			{this.props.socials && (
-				<ul className={css.socials}>{this.props.socials.map((l, index) => (
+				<ul className={css.socials}>{this.props.socials.map((l, index) => (
-					<li key={l.href}><Text><Link hideIcon noStyle href={l.href}>
+					<li key={l.href}><Text><Link hideIcon noStyle href={l.href}>
-						{typeof l.icon === 'string' ? (
+						{typeof l.icon === 'string' ? (
-							<Image width={24} height={24} src={l.icon} />
+							<Image width={24} height={24} src={l.icon} />
-						) : (
+						) : (
-							<l.icon size={24} />
+							<l.icon size={24} />
-					)}
+					)}
-					</Link></Text></li>
+					</Link></Text></li>
-				))}</ul>
+				))}</ul>
-			)}
+			)}
-		</footer>
+		</footer>
-	)
+	)
 }

src/dzeio/GradientBackground/GradientBackground.module.styl

@@ -6,14 +6,13 @@ $percent = 15%
 	transition all $transition
 	background $mainGradient
 
-	&.fullscreen
+	&.fullscreen > :first-child
 		min-height 100vh
 
 .info
 	background linear-gradient(to right, $infoLight, lighten($infoLight, $percent))
 	@media (prefers-color-scheme dark)
 		background linear-gradient(to right, $infoDark, darken($infoDark, $percent))
-		
 
 .success
 	background linear-gradient(to right, $successLight, lighten($successLight, $percent))

src/dzeio/GradientBackground/index.tsx

@@ -13,8 +13,8 @@ interface Props {
 
 /**
  * Make the background a linear-gradient
- * 
+ *
- * @version 1.0.1
+ * @version 1.0.2
  */
 export default class GradientBackground extends React.Component<Props> {
 

src/dzeio/Input/Input.stories.tsx

@@ -1,29 +1,29 @@
-import { Meta } from '@storybook/react/types-6-0'
+import { Meta } from '@storybook/react/types-6-0'
-import { Story } from "@storybook/react"
+import { Story } from "@storybook/react"
-import React from 'react'
+import React from 'react'
-import Component from '.'
+import Component from '.'
-import { X } from 'react-feather'
+import { X } from 'lucide-react'
-
+
-export default {
+export default {
-	title: 'DZEIO/Input',
+	title: 'DZEIO/Input',
-	component: Component
+	component: Component
-} as Meta
+} as Meta
-
+
-export const Basic: Story<any> = (args: any) => <Component {...args} />
+export const Basic: Story<any> = (args: any) => <Component {...args} />
-
+
-let tmp = Basic.bind({})
+let tmp = Basic.bind({})
-tmp.args = {label: 'Label', helper: 'Helper', maxLength: 6, characterCount: true, icon: X}
+tmp.args = {label: 'Label', helper: 'Helper', maxLength: 6, characterCount: true, icon: X}
-
+
-export const Normal = tmp
+export const Normal = tmp
-
+
-tmp = Basic.bind({})
+tmp = Basic.bind({})
-tmp.args = {label: 'Label', filled:true, helper: 'Helper', autocomplete: ['a', 'b', 'cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc'], characterCount: true, icon: X}
+tmp.args = {label: 'Label', filled:true, helper: 'Helper', autocomplete: ['a', 'b', 'cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc'], characterCount: true, icon: X}
-
+
-export const AutoComplete = tmp
+export const AutoComplete = tmp
-
+
-export const Select: Story<any> = (args: any) => <Component type="select" {...args}>
+export const Select: Story<any> = (args: any) => <Component type="select" {...args}>
-	<option>a</option>
+	<option>a</option>
-	<option>b</option>
+	<option>b</option>
-	<option>c</option>
+	<option>c</option>
-	<option>d</option>
+	<option>d</option>
 </Component>

src/dzeio/Input/index.tsx

@@ -1,11 +1,10 @@
 import React, { FC } from 'react'
 
-import { ChevronDown } from 'react-feather'
+import { ChevronDown } from 'lucide-react'
 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
@@ -98,7 +97,7 @@ export default class Input extends React.Component<Props, States> {
 			baseProps.onWheel = (ev: React.WheelEvent<HTMLInputElement>) => ev.currentTarget.blur()
 		}
 
-		if (this.props.type === 'select') {
+		if (this.props.type === 'select' && !this.props.readOnly) {
 			input = (
 				<select
 					ref={this.props.selectRef || this.inputRef}
@@ -113,6 +112,15 @@ 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 = (
@@ -170,9 +178,9 @@ export default class Input extends React.Component<Props, States> {
 					</div>
 				)}
 
-				{this.props.autocomplete && this.props.autocomplete.indexOf(this.state?.value || '') === -1 && (
+				{this.props.autocomplete && this.props.autocomplete.indexOf(this.state?.value ?? this.props.value?.toString() ?? '') === -1 && (
 					<ul className={buildClassName(css.autocomplete, [css.reverse, !this.state.isInFirstPartOfScreen])}>
-						{this.props.autocomplete.filter((item) => item.includes(this.state?.value || '')).map((item) => (<li key={item} onClick={this.onAutoCompleteClick(item)}><Text>{item}</Text></li>))}
+						{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>))}
 					</ul>
 				)}
 			</div>
@@ -183,7 +191,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})
 		}
@@ -201,8 +209,8 @@ export default class Input extends React.Component<Props, States> {
 			this.setState({textAreaHeight: this.inputRef.current.scrollHeight})
 		})
 
-	private onAutoCompleteClick = (value: string) => () => {
+	private onAutoCompleteClick = (value: string) => async () => {
-		console.log('test')
+		// console.log('test')
 		const item = this.getElement()
 		if (!item) {return}
 		const valueSetter = Object.getOwnPropertyDescriptor(item, 'value')?.set
@@ -216,6 +224,9 @@ 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/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import NextLink from 'next/link'
-import { ExternalLink } from 'react-feather'
+import { ExternalLink } from 'lucide-react'
 
 import css from './Link.module.styl'
 import { buildClassName } from '../Util'
@@ -30,11 +30,11 @@ export default class Link extends React.Component<Props> {
 
 	public render() {
 		const isExternal = this.props.href.startsWith('http')
-		const externalProps = this.props.external ? {
+		const externalProps = this.props.external ?? isExternal ? {
 			rel: 'noreferrer nofollow',
 			target: '_blank'
 		} : {}
-		
+
 		if (isExternal) {
 			// external link
 			return (

src/dzeio/Loader/index.tsx

@@ -30,7 +30,7 @@ interface State {
 
 /**
  * Display a simple loading animation at the top of the page
- * 
+ *
  * @version 1.0.0
  */
 export default class Loader extends React.Component<Props, State> {
@@ -48,8 +48,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/Navbar/Navbar.stories.tsx

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

src/dzeio/Navbar/index.tsx

@@ -1,273 +1,273 @@
-import Router from 'next/router'
+import Router from 'next/router'
-
+
-import Image, { ImageProps } from 'next/image'
+import Image, { ImageProps } from 'next/image'
-import React, { FC } from 'react'
+import React, { FC } from 'react'
-import { ChevronDown, ChevronsRight, Menu, X } from 'react-feather'
+import { ChevronDown, ChevronsRight, Menu, X } from 'lucide-react'
-import Text from '../Text'
+import Text from '../Text'
-import Col from '../Col'
+import Col from '../Col'
-import Row from '../Row'
+import Row from '../Row'
-import Link from '../Link'
+import Link from '../Link'
-import { buildClassName } from '../Util'
+import { buildClassName } from '../Util'
-
+
-import css from './Navbar.module.styl'
+import css from './Navbar.module.styl'
-
+
-interface Props {
+interface Props {
-	/**
+	/**
-	 * Type of Navbar
+	 * Type of Navbar
-	 * _note: when in mobile it is not listened_
+	 * _note: when in mobile it is not listened_
-	 */
+	 */
-	type: 'navbar' | 'sidebar'
+	type: 'navbar' | 'sidebar'
-
+
-	/**
+	/**
-	 * Logo to display
+	 * Logo to display
-	 */
+	 */
-	logo?: ImageProps & {height: number, width: number}
+	logo?: ImageProps & {height: number, width: number}
-	/**
+	/**
-	 * Login URL
+	 * Login URL
-	 */
+	 */
-	loginUrl?: string
+	loginUrl?: string
-	/**
+	/**
-	 * Login URL
+	 * Login URL
-	 */
+	 */
-	registerUrl?: string
+	registerUrl?: string
-	/**
+	/**
-	 * User Informations if loggedin
+	 * User Informations if loggedin
-	 */
+	 */
-	user?: {
+	user?: {
-		/**
+		/**
-		 * Username
+		 * Username
-		 */
+		 */
-		name: string
+		name: string
-		/**
+		/**
-		 * User Short description
+		 * User Short description
-		 */
+		 */
-		description?: string
+		description?: string
-		/**
+		/**
-		 * User Menu
+		 * User Menu
-		 */
+		 */
-		menu?: {
+		menu?: {
-			/**
+			/**
-			 * Menu links
+			 * Menu links
-			 */
+			 */
-			links: Array<{
+			links: Array<{
-				path: string
+				path: string
-				name: string
+				name: string
-			}>
+			}>
-			/**
+			/**
-			 * Custom informations shown next to the links
+			 * Custom informations shown next to the links
-			 */
+			 */
-			informations?: JSX.Element
+			informations?: JSX.Element
-		}
+		}
-	}
+	}
-	/**
+	/**
-	 * Links to display
+	 * Links to display
-	 */
+	 */
-	items: Array<{
+	items: Array<{
-		path: string
+		path: string
-		icon?: FC
+		icon?: FC
-		name: string
+		name: string
-	}>
+	}>
-	/**
+	/**
-	 * Internal Use don't use it !
+	 * Internal Use don't use it !
-	 */
+	 */
-	mobileMenu?: () => void
+	mobileMenu?: () => void
-}
+}
-
+
-interface State {
+interface State {
-	path?: string
+	path?: string
-	short: boolean
+	short: boolean
-	isMobile: boolean
+	isMobile: boolean
-	menuActive: boolean
+	menuActive: boolean
-}
+}
-
+
-/**
+/**
- * Navbar/Sidebar Component
+ * Navbar/Sidebar Component
- * @version 1.0.3
+ * @version 1.0.3
- */
+ */
-export default class Navbar extends React.Component<Props, State> {
+export default class Navbar extends React.Component<Props, State> {
-
+
-	public state: State = {
+	public state: State = {
-		short: false,
+		short: false,
-		isMobile: false,
+		isMobile: false,
-		menuActive: false
+		menuActive: false
-	}
+	}
-
+
-	public componentDidMount() {
+	public componentDidMount() {
-		this.setState({
+		this.setState({
-			path: Router.asPath,
+			path: Router.asPath,
-			menuActive: !!this.props.mobileMenu
+			menuActive: !!this.props.mobileMenu
-		})
+		})
-		Router.events.on('routeChangeComplete', () => {
+		Router.events.on('routeChangeComplete', () => {
-			this.setState({path: Router.asPath, menuActive: false})
+			this.setState({path: Router.asPath, menuActive: false})
-		})
+		})
-		Router.events.on('routeChangeError', () => {
+		Router.events.on('routeChangeError', () => {
-			this.setState({path: Router.asPath, menuActive: false})
+			this.setState({path: Router.asPath, menuActive: false})
-		})
+		})
-		if (!this.props.mobileMenu) {
+		if (!this.props.mobileMenu) {
-			window.addEventListener('resize', this.onResize)
+			window.addEventListener('resize', this.onResize)
-			this.onResize()
+			this.onResize()
-		}
+		}
-	}
+	}
-
+
-	public onResize = () => {
+	public onResize = () => {
-		const isMobile = window.innerWidth <= 768
+		const isMobile = window.innerWidth <= 768
-		if (this.state.isMobile !== isMobile) {
+		if (this.state.isMobile !== isMobile) {
-			this.setState({isMobile})
+			this.setState({isMobile})
-		}
+		}
-	}
+	}
-
+
-	public componentDidUpdate() {
+	public componentDidUpdate() {
-		if (!this.props.mobileMenu) {
+		if (!this.props.mobileMenu) {
-			if (this.state.short) {
+			if (this.state.short) {
-				document.body.classList.add(css.short)
+				document.body.classList.add(css.short)
-			} else {
+			} else {
-				document.body.classList.remove(css.short)
+				document.body.classList.remove(css.short)
-			}
+			}
-			if (this.getType() === 'sidebar') {
+			if (this.getType() === 'sidebar') {
-				document.body.classList.add(css['body-sidebar'])
+				document.body.classList.add(css['body-sidebar'])
-				document.body.classList.remove(css['body-navbar'])
+				document.body.classList.remove(css['body-navbar'])
-			} else {
+			} else {
-				document.body.classList.remove(css['body-sidebar'])
+				document.body.classList.remove(css['body-sidebar'])
-				document.body.classList.add(css['body-navbar'])
+				document.body.classList.add(css['body-navbar'])
-			}
+			}
-		}
+		}
-
+
-	}
+	}
-
+
-	public componentWillUnmount() {
+	public componentWillUnmount() {
-		if (!this.props.mobileMenu) {
+		if (!this.props.mobileMenu) {
-			document.body.classList.remove(css.short, css[`body-${this.getType()}`])
+			document.body.classList.remove(css.short, css[`body-${this.getType()}`])
-			window.removeEventListener('resize', this.onResize)
+			window.removeEventListener('resize', this.onResize)
-		}
+		}
-	}
+	}
-
+
-	public onSidebarButton = () => {
+	public onSidebarButton = () => {
-		if (!this.props.mobileMenu) {
+		if (!this.props.mobileMenu) {
-			this.setState({short: !this.state.short, menuActive: false})
+			this.setState({short: !this.state.short, menuActive: false})
-		} else {
+		} else {
-			this.props.mobileMenu()
+			this.props.mobileMenu()
-		}
+		}
-	}
+	}
-
+
-	public menuCloseCallback = () => {
+	public menuCloseCallback = () => {
-		this.setState({menuActive: false})
+		this.setState({menuActive: false})
-	}
+	}
-
+
-	public getType(): 'sidebar' | 'navbar' {
+	public getType(): 'sidebar' | 'navbar' {
-		if (this.props.mobileMenu) {
+		if (this.props.mobileMenu) {
-			return 'sidebar'
+			return 'sidebar'
-		}
+		}
-		return this.state.isMobile ? 'navbar' : this.props.type
+		return this.state.isMobile ? 'navbar' : this.props.type
-	}
+	}
-
+
-	public render = () => (
+	public render = () => (
-		<>
+		<>
-			<nav className={buildClassName(css[this.getType()], [css.short, this.state.short && !this.props.mobileMenu], [css.mobile, this.props.mobileMenu])}>
+			<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">
+				<Row nowrap className={css.header} align="center">
-					{this.props.logo && (
+					{this.props.logo && (
-						<Col className={css.imgContainer}>
+						<Col className={css.imgContainer}>
-							<Link href="/">
+							<Link href="/">
-								<Image {...this.props.logo} height={34} width={this.props.logo.width*34/this.props.logo.height} />
+								<Image {...this.props.logo} height={34} width={this.props.logo.width*34/this.props.logo.height} />
-							</Link>
+							</Link>
-						</Col>
+						</Col>
-					)}
+					)}
-					{this.getType() === 'sidebar' && (
+					{this.getType() === 'sidebar' && (
-						<Col nogrow><Text><div onClick={this.onSidebarButton}>
+						<Col nogrow><Text><div onClick={this.onSidebarButton}>
-							{this.state.short ? (
+							{this.state.short ? (
-								<ChevronsRight size={30} />
+								<ChevronsRight size={30} />
-							) : (
+							) : (
-								<X size={30} />
+								<X size={30} />
-							)}
+							)}
-						</div></Text></Col>
+						</div></Text></Col>
-					)}
+					)}
-				</Row>
+				</Row>
-				{this.getType() === 'sidebar' && (
+				{this.getType() === 'sidebar' && (
-					<hr/>
+					<hr/>
-				)}
+				)}
-				<ul>
+				<ul>
-					{!this.state.isMobile && this.props.items.map((item) => (
+					{!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}>
-							<Text className={buildClassName([css.active, this.state.path?.startsWith(item.path)])}>
+							<Text className={buildClassName([css.active, this.state.path?.startsWith(item.path)])}>
-								{this.getType() === 'sidebar' && item.icon && (
+								{this.getType() === 'sidebar' && item.icon && (
-									<item.icon />
+									<item.icon />
-								)}
+								)}
-								<span>{item.name}</span>
+								<span>{item.name}</span>
-							</Text>
+							</Text>
-						</Link></li>
+						</Link></li>
-					))}
+					))}
-				</ul>
+				</ul>
-				<div style={{flex: 1}}></div>
+				<div style={{flex: 1}}></div>
-				{/* Spacer */}
+				{/* Spacer */}
-				{this.state.isMobile && (
+				{this.state.isMobile && (
-					<div className={css.userSpaceParent}>
+					<div className={css.userSpaceParent}>
-						<div onClick={() => this.setState({menuActive: !this.state.menuActive})} className={css.userSpace}>
+						<div onClick={() => this.setState({menuActive: !this.state.menuActive})} className={css.userSpace}>
-							<Text>
+							<Text>
-								<Menu size={38} className={css.mainGradient} />
+								<Menu size={38} className={css.mainGradient} />
-							</Text>
+							</Text>
-						</div>
+						</div>
-					</div>
+					</div>
-				)}
+				)}
-				{!this.state.isMobile && this.props.user ? (
+				{!this.state.isMobile && this.props.user ? (
-					<>
+					<>
-						<div className={css.userSpaceParent}>
+						<div className={css.userSpaceParent}>
-							{this.getType() === 'sidebar' && (
+							{this.getType() === 'sidebar' && (
-								<hr/>
+								<hr/>
-							)}
+							)}
-							<div onClick={() => this.setState({menuActive: !this.state.menuActive})} className={css.userSpace}>
+							<div onClick={() => this.setState({menuActive: !this.state.menuActive})} className={css.userSpace}>
-								<Text>
+								<Text>
-									{this.props.user.name}
+									{this.props.user.name}
-									<ChevronDown className={buildClassName([css.menuActive, this.state.menuActive])} />
+									<ChevronDown className={buildClassName([css.menuActive, this.state.menuActive])} />
-								</Text>
+								</Text>
-								{this.getType() === 'sidebar' && this.props.user.description && (
+								{this.getType() === 'sidebar' && this.props.user.description && (
-									<Text>{this.props.user.description}</Text>
+									<Text>{this.props.user.description}</Text>
-								)}
+								)}
-							</div>
+							</div>
-						</div>
+						</div>
-						<div className={buildClassName(css.userMenu, [css.menuActive, !this.state.isMobile && this.state.menuActive])}>
+						<div className={buildClassName(css.userMenu, [css.menuActive, !this.state.isMobile && this.state.menuActive])}>
-							<Row nomargin>
+							<Row nomargin>
-								{this.props.user.menu?.informations && (
+								{this.props.user.menu?.informations && (
-									<Col>{this.props.user.menu?.informations}</Col>
+									<Col>{this.props.user.menu?.informations}</Col>
-								)}
+								)}
-								<Col>
+								<Col>
-									<ul>
+									<ul>
-										{this.props.user.menu?.links.map((l) => (
+										{this.props.user.menu?.links.map((l) => (
-											<li key={l.path}><Text><Link noStyle href={l.path}>{l.name}</Link></Text></li>
+											<li key={l.path}><Text><Link noStyle href={l.path}>{l.name}</Link></Text></li>
-										))}
+										))}
-									</ul>
+									</ul>
-								</Col>
+								</Col>
-							</Row>
+							</Row>
-						</div>
+						</div>
-					</>
+					</>
-				) : !this.state.isMobile ? (
+				) : !this.state.isMobile ? (
-					<div className={css.userSpaceParent}>
+					<div className={css.userSpaceParent}>
-						{this.getType() === 'sidebar' && (
+						{this.getType() === 'sidebar' && (
-							<hr/>
+							<hr/>
-						)}
+						)}
-						<ul>
+						<ul>
-							{this.props.registerUrl && (
+							{this.props.registerUrl && (
-								<li><Link noStyle href={this.props.registerUrl}><a>
+								<li><Link noStyle href={this.props.registerUrl}><a>
-									<Text className={buildClassName(css.active)}>
+									<Text className={buildClassName(css.active)}>
-										<span>Register</span>
+										<span>Register</span>
-									</Text>
+									</Text>
-								</a></Link></li>
+								</a></Link></li>
-							)}
+							)}
-							{this.props.loginUrl && (
+							{this.props.loginUrl && (
-								<li><Link noStyle href={this.props.loginUrl}><a>
+								<li><Link noStyle href={this.props.loginUrl}><a>
-									<Text>
+									<Text>
-										<span>Login</span>
+										<span>Login</span>
-									</Text>
+									</Text>
-								</a></Link></li>
+								</a></Link></li>
-							)}
+							)}
-						</ul>
+						</ul>
-					</div>
+					</div>
-				) : undefined}
+				) : undefined}
-			</nav>
+			</nav>
-
+
-			{!this.props.mobileMenu && this.state.isMobile && (
+			{!this.props.mobileMenu && this.state.isMobile && (
-				<div className={buildClassName(css.mobileMenu, [css.shown, this.state.menuActive])}>
+				<div className={buildClassName(css.mobileMenu, [css.shown, this.state.menuActive])}>
-					<Navbar {...this.props} type="sidebar" mobileMenu={this.menuCloseCallback} />
+					<Navbar {...this.props} type="sidebar" mobileMenu={this.menuCloseCallback} />
-				</div>
+				</div>
-			)}
+			)}
-		</>
+		</>
-	)
+	)
-}
+}

src/dzeio/NotificationManager/NotificationManager.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/react/types-6-0'
 import React from 'react'
-import { Zap } from 'react-feather'
+import { Zap } from 'lucide-react'
 import Component from '.'
 
 export default {

src/dzeio/NotificationManager/index.tsx

@@ -5,7 +5,7 @@ import Col from '../Col'
 import Text from '../Text'
 import Router from 'next/router'
 import React from 'react'
-import { X } from 'react-feather'
+import { X } from 'lucide-react'
 
 import css from './NotificationManager.module.styl'
 

src/dzeio/Popup/index.tsx

@@ -1,32 +1,32 @@
-import React from 'react'
+import React from 'react'
-import { X } from 'react-feather'
+import { X } from 'lucide-react'
-import Text from '../Text'
+import Text from '../Text'
-import Box from '../Box'
+import Box from '../Box'
-import Row from '../Row'
+import Row from '../Row'
-
+
-import css from './Popup.module.styl'
+import css from './Popup.module.styl'
-
+
-interface Props {
+interface Props {
-	children: React.ReactNode
+	children: React.ReactNode
-	onClose?: () => void
+	onClose?: () => void
-	header?: Box['props']
+	header?: Box['props']
-}
+}
-
+
-export default class Popup extends React.Component<Props> {
+export default class Popup extends React.Component<Props> {
-
+
-	public render = () => (
+	public render = () => (
-		<Row nomargin onClick={this.parentClose} justify="center" align="center" className={css.popup}>
+		<Row nomargin onClick={this.parentClose} justify="center" align="center" className={css.popup}>
-			<Box {...this.props.header} className={css.popupChild} onClick={(ev) => ev.stopPropagation()} headerButtons={(<Text><X onClick={this.props.onClose} className={css.exit} /></Text>)}>
+			<Box {...this.props.header} className={css.popupChild} onClick={(ev) => ev.stopPropagation()} headerButtons={(<Text><X onClick={this.props.onClose} className={css.exit} /></Text>)}>
-				{this.props.children}
+				{this.props.children}
-			</Box>
+			</Box>
-		</Row>
+		</Row>
-	)
+	)
-
+
-	private parentClose = (ev: React.MouseEvent<HTMLDivElement>) => {
+	private parentClose = (ev: React.MouseEvent<HTMLDivElement>) => {
-		const target = ev.currentTarget
+		const target = ev.currentTarget
-		if (target.classList.contains(css.popup) && this.props.onClose) {
+		if (target.classList.contains(css.popup) && this.props.onClose) {
-			this.props.onClose()
+			this.props.onClose()
-		}
+		}
-	}
+	}
-
+
-}
+}

src/dzeio/Table/Table.module.styl

@@ -17,3 +17,6 @@
 	td
 		padding 8px
 		text-align left
+
+.parent
+	overflow-x auto

src/dzeio/Table/index.tsx

@@ -1,15 +1,20 @@
 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 = () => (
-		<table className={css.table}>{this.props.children}</table>
+		<div className={buildClassName(css.parent, this.props.parentClassName)}>
+			<table className={buildClassName(css.table, this.props.className)}>{this.props.children}</table>
+		</div>
 	)
 
 }

src/dzeio/config.styl

@@ -51,4 +51,5 @@ $default = $main
 // 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')