v0.10.0

It is now WAY lighter and LESS buggy

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

.storybook/main.js

@@ -3,7 +3,7 @@ const webpack = require('webpack')
 
 module.exports = {
 	"stories": [
-		"../src/dzeio/**/*.stories.@(ts|tsx)",
+		"../src/dzeio/**/*.stories.tsx",
 	],
 	"addons": [
 		"@storybook/addon-essentials"

.storybook/public/16-16.svg

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

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dzeio/components",
-	"version": "0.8.4",
+	"version": "0.10.0",
 	"license": "MIT",
 	"main": "./index.js",
 	"types": "./types/index.d.ts",

src/dzeio/Box/Box.module.styl

@@ -1,4 +1,4 @@
-@import "../../config"
+@import "../config"
 
 .box
 	background $foregroundLight
@@ -10,3 +10,24 @@
 	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/BoxBody/BoxBody.module.styl

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

src/dzeio/Box/BoxBody/index.tsx

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

src/dzeio/Box/BoxHeader/BoxHeader.module.styl

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

@@ -1,50 +0,0 @@
-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/index.tsx

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

src/dzeio/Box/index.tsx

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

src/dzeio/Button/Button.module.styl

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

src/dzeio/Button/Button.stories.tsx

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

src/dzeio/Button/index.tsx

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

src/dzeio/Col/Col.module.styl

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

src/dzeio/Footer/Footer.module.styl

@@ -7,10 +7,15 @@
 		background $foregroundDark
 
 	ul
-		list-type none
+		padding 0
+		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,5 +1,6 @@
 import { Meta, Story } from '@storybook/react/types-6-0'
 import React from 'react'
+import { Zap } from 'react-feather'
 import Component from '.'
 
 export default {
@@ -10,6 +11,9 @@ export default {
 export const Basic: Story<any> = (args: any) => <Component {...args} />
 
 let tmp = Basic.bind({})
-tmp.args = {links: [{name: 'test1', path: '/'}, {name: 'test2', path: '/'}, {name: 'test3', path: '/'}]}
+tmp.args = {
+	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,9 +1,10 @@
-import React from 'react'
+import React, { FC } from 'react'
 import { Heart } from 'react-feather'
 import Link from '../Link'
-
+import { Icon } from 'react-feather'
 import Text from '../Text'
 import css from './Footer.module.styl'
+import Image from 'next/image'
 
 interface Props {
 	text?: string
@@ -12,6 +13,10 @@ interface Props {
 		path: string
 		name: string
 	}>
+	socials?: Array<{
+		href: string
+		icon: Icon | string
+	}>
 }
 
 export default class Footer extends React.Component<Props> {
@@ -27,6 +32,17 @@ 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/Image/Image.module.styl

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

src/dzeio/Image/index.tsx

@@ -1,182 +1,103 @@
-import React from 'react'
-import { buildClassName } from '../Util'
-import NextImage from 'next/image'
+import React, { MouseEventHandler } from 'react'
 
+import NextImage, { ImageProps } from 'next/image'
 import css from './Image.module.styl'
+import { buildClassName } from '../Util'
 
-export interface ImageProps {
-	src: string
-	deleteOnError?: boolean
-	canFullscreen?: boolean
-	width: number
-	height: number
-	alt?: string
-
-	// ClassNames
-	parentClassName?: string
-	className?: string
-
-	// Events
-	onClick?: () => void
+interface Props {
+	imageProps: ImageProps
+	/**
+	 * Define if the image can go fullscreen
+	 */
+	fullscreen?: boolean
 }
 
-type evType<T = HTMLImageElement> = React.SyntheticEvent<T, Event>
+interface States {
+	image?: {
+		size: [number | string, number | string]
+		pos: [number, number]
+	}
+	transform?: [number, number]
+	className?: string
+}
 
-export default class Image extends React.Component<ImageProps> {
+export default class Image extends React.Component<Props, States> {
 
-	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 state: States = {}
 
-	private cardPos: Array<number> = []
-	private cardSize: Array<number> = []
+	private animationCount = 0
 
-	private isFullscreen = false
-
-	public async componentDidMount() {
-		if (this.props.canFullscreen) {
-			window.addEventListener('scroll', this.onScroll)
-			window.addEventListener('resize', this.onResize)
-			this.onScroll()
-			this.onResize()
+	public componentDidUpdate() {
+		if (!this.props.fullscreen) {return}
+		if (this.state.image) {
+			document.body.classList.add(css.body)
+		} else {
+			document.body.classList.remove(css.body)
 		}
 	}
 
-	public async componentDidUpdate() {
-		this.pic.current?.classList.remove(css.none)
-		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 componentWillUnmount() {
+		if (!this.props.fullscreen) {return}
+		document.body.classList.remove(css.body)
 	}
 
 	public render() {
-		const pic = (
-			<div ref={this.pic} className={buildClassName(this.props.parentClassName, css.parent)}>
-				<NextImage
-					className={buildClassName([css.image], [this.props.className])}
-					src={this.props.src}
-					onClick={this.props.canFullscreen ? this.onClick : this.props.onClick}
-					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}
+		if (!this.props.fullscreen) {
+			return <NextImage
+				{...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
+						quality={100}
+						{...this.props.imageProps}
+						objectFit="contain"
+					/>
 				</div>
-			)
-		}
-		return pic
+			</>
+		)
 	}
 
-	private onScroll = async () => {
-		if (!this.ref.current || this.isFullscreen || !this.props.canFullscreen) {
-			return
-		}
-
-		this.cardPos = [this.ref.current.offsetTop - window.scrollY, this.ref.current.offsetLeft - window.scrollX]
-		this.ref.current.style.top = this.cardPos[0] + 'px'
-		this.ref.current.style.left = this.cardPos[1] + 'px'
-	}
-
-	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)
-
+	private onClick: MouseEventHandler<HTMLDivElement> = (ev) => {
+		const target = ev.currentTarget
+		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 (i.classList.contains(css.ph2) || i.classList.contains(css.ph1) || this.isFullscreen) {
+				if (this.animationCount !== currentCount) {
 					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
-		}
+				this.setState({
+					className: isFullscreen ? css.fs2 : undefined,
+					image: isFullscreen ? this.state.image : undefined
+				})
+			}, isFullscreen ? 10 : 310)
+		})
 	}
-
-	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

@@ -180,7 +180,7 @@
 				~ svg
 					color @border-color
 			&:invalid
-				border-color $errorLight
+				border-color $errorDark
 
 				~ label
 					color @border-color
@@ -188,7 +188,7 @@
 				~ svg
 					color @border-color
 				@media (prefers-color-scheme dark)
-					border-color $errorDark
+					border-color $errorLight
 
 					~ label
 						color @border-color
@@ -229,7 +229,7 @@
 						background #1c1c1c
 			&:focus
 				background rgba(gray, .3)
-				border-bottom 2px solid $default
+				border-bottom 2px solid $main
 
 				&.opaque
 					background white

src/dzeio/Link/Link.stories.tsx

@@ -7,7 +7,9 @@ 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

@@ -19,23 +19,35 @@ 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 external = this.props.external ?? this.props.href.startsWith('http')
-		if (external) {
+		const isExternal = this.props.href.startsWith('http')
+		const externalProps = this.props.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}
-					rel="noreferrer nofollow"
-					target="_blank"
+					{...externalProps}
 				>
-					{this.props.children}<ExternalLink size={16} className={css.icon} />
+					{this.props.children}
+					{(this.props.external !== false && !this.props.hideIcon) && (
+						<ExternalLink size={16} className={css.icon} />
+					)}
 				</a>
 			)
 		}
@@ -43,6 +55,7 @@ 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/Menu/Menu.module.styl

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

src/dzeio/Menu/Menu.stories.tsx

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

src/dzeio/Menu/index.tsx

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

src/dzeio/NotificationManager/NotificationManager.module.styl

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

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

src/dzeio/NotificationManager/index.tsx

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

src/dzeio/Popup/index.tsx

@@ -3,14 +3,13 @@ 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?: HeaderProps
+	header?: Box['props']
 }
 
 export default class Popup extends React.Component<Props> {

src/dzeio/Table/Table.module.styl

@@ -1,11 +1,17 @@
+@import '../config'
+
 .table
 	border-spacing 0
-	border 2px solid #EEE
+	border 2px solid $grayDark
+	@media (prefers-color-scheme dark)
+		border-color $grayLight
 	border-radius 4px
 	width 100%
 
 	td
-		border-top 1px solid #EEE
+		border-top 1px solid $grayDark
+		@media (prefers-color-scheme dark)
+			border-color $grayLight
 
 	th
 	td

src/dzeio/Text/Text.module.styl

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

src/dzeio/Text/Text.stories.tsx

@@ -0,0 +1,15 @@
+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/index.ts

@@ -19,8 +19,8 @@ import Image from './dzeio/Image'
 import Input from './dzeio/Input'
 import Link from './dzeio/Link'
 import Loader from './dzeio/Loader'
-import Menu from './dzeio/Menu'
 import Navbar from './dzeio/Navbar'
+import NotificationManager from './dzeio/NotificationManager'
 import Overflow from './dzeio/Overflow'
 import Popup from './dzeio/Popup'
 import Row from './dzeio/Row'
@@ -42,8 +42,8 @@ export {
 	Input,
 	Link,
 	Loader,
-	Menu,
 	Navbar,
+	NotificationManager,
 	Overflow,
 	Popup,
 	Row,