.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

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dzeio/components",
-	"version": "0.11.3",
+	"version": "0.9.1",
 	"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",
 		"build": "rollup --config",
-		"prepublishOnly": "npm run build",
+		"prepublishOnly": "yarn 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 'lucide-react'
+import { Zap } from 'react-feather'
 import Component from '.'
 
 export default {
@@ -25,10 +25,3 @@ 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 '../Link'
+import Link from 'next/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 imageProps={{src: Icon, width: 16, height: 16}} />
+						<Image parentClassName={css.img} 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 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/index.tsx

@@ -1,7 +1,8 @@
 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'
 

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 'lucide-react'
+import { Zap } from 'react-feather'
 import Component from '.'
 
 export default {

src/dzeio/Footer/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
-import { Heart } from 'lucide-react'
+import { Heart } from 'react-feather'
 import Link from '../Link'
-import { LucideProps } from 'lucide-react'
+import { Icon } from 'react-feather'
 import Text from '../Text'
 import css from './Footer.module.styl'
 import Image from 'next/image'
@@ -15,7 +15,7 @@ interface Props {
 	}>
 	socials?: Array<{
 		href: string
-		icon: FC<LucideProps> | string
+		icon: Icon | string
 	}>
 }
 

src/dzeio/GradientBackground/GradientBackground.module.styl

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

src/dzeio/GradientBackground/index.tsx

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

src/dzeio/Image/Image.module.styl

@@ -1,34 +1,43 @@
 .parent
-	transition-property padding, width, height, background, top, left
+	position relative
-	transition-duration .3s
+	display inline-flex
-	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
-	position fixed
+
-	z-index 1000
+	&.ph1
-	padding 0
+		position fixed
-	> div
+		transition 0s
-		width 100%
+
+
+	&.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
 		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%
 
-.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}
+				<NextImage
-				objectFit="contain"
+					className={buildClassName([css.image], [this.props.className])}
-			/>
+					src={this.props.src}
-		}
+					onClick={this.props.canFullscreen ? this.onClick : this.props.onClick}
-		return (
+					onError={this.props.deleteOnError && this.onError || undefined}
-			<>
+					// layout="fill"
-				{this.state.image && (
+					width={this.props.width}
-					<div style={{width: this.state.image.size[0], height: this.state.image.size[1]}}></div>
+					height={this.props.height}
-				)}
+					alt={this.props.alt}
-
+				/>
-				<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>
-			</>
 		)
+		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)
+			return
-		const currentCount = ++this.animationCount
+		}
-		this.setState(isFullscreen ? {
+
-			image: this.state.image ?? {
+		this.cardPos = [this.ref.current.offsetTop - window.scrollY, this.ref.current.offsetLeft - window.scrollX]
-				size: [target.offsetWidth, target.offsetHeight],
+		this.ref.current.style.top = this.cardPos[0] + 'px'
-				pos: [target.offsetLeft - window.scrollX, target.offsetTop - window.scrollY]
+		this.ref.current.style.left = this.cardPos[1] + 'px'
-			},
+	}
-			className: undefined
+
-		} : {
+	private onResize = async () => {
-			className: undefined
+		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 (this.animationCount !== currentCount) {
+				if (i.classList.contains(css.ph2) || i.classList.contains(css.ph1) || this.isFullscreen) {
 					return
 				}
-				this.setState({
+				const w = this.valToPixel(this.props.width)
-					className: isFullscreen ? css.fs2 : undefined,
+				const mh = this.valToPixel(this.props?.height)
-					image: isFullscreen ? this.state.image : undefined
+				const mw = this.valToPixel(this.props?.width)
-				})
+				c.classList.add(css.none)
-			}, isFullscreen ? 10 : 310)
+				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.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/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'
@@ -30,7 +30,7 @@ export default class Link extends React.Component<Props> {
 
 	public render() {
 		const isExternal = this.props.href.startsWith('http')
-		const externalProps = this.props.external ?? isExternal ? {
+		const externalProps = this.props.external ? {
 			rel: 'noreferrer nofollow',
 			target: '_blank'
 		} : {}

src/dzeio/Loader/index.tsx

@@ -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,6 +1,6 @@
 import { Meta, Story } from '@storybook/react/types-6-0'
 import React from 'react'
-import { Zap, ZapOff } from 'lucide-react'
+import { Zap, ZapOff } from 'react-feather'
 import Component from '.'
 import Text from '../Text'
 

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'

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 'lucide-react'
+import { Zap } from 'react-feather'
 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 'lucide-react'
+import { X } from 'react-feather'
 
 import css from './NotificationManager.module.styl'
 

src/dzeio/Popup/index.tsx

@@ -1,5 +1,5 @@
 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'

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/config.styl

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