0.11.2

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

.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.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": "^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 {

src/dzeio/Button/index.tsx

@@ -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} />
 					)}

src/dzeio/Checkbox/index.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
-import { Check } from 'react-feather'
+import { Check } from 'lucide-react'
 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 'react-feather'
+import { Zap } from 'lucide-react'
 import Component from '.'
 
 export default {

src/dzeio/Footer/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
-import { Heart } from 'react-feather'
+import { Heart } from 'lucide-react'
 import Link from '../Link'
-import { Icon } from 'react-feather'
+import { LucideProps } from 'lucide-react'
 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: Icon | string
+		icon: FC<LucideProps> | string
 	}>
 }
 

src/dzeio/GradientBackground/GradientBackground.module.styl

@@ -6,7 +6,7 @@ $percent = 15%
 	transition all $transition
 	background $mainGradient
 
-	&.fullscreen
+	&.fullscreen > :first-child
 		min-height 100vh
 
 .info
@@ -14,7 +14,6 @@ $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.1
+ * @version 1.0.2
  */
 export default class GradientBackground extends React.Component<Props> {
 

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 'react-feather'
+import { X } from 'lucide-react'
 
 export default {
 	title: 'DZEIO/Input',

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
@@ -170,9 +169,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 +182,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 +200,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 +215,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'

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 'react-feather'
+import { Zap, ZapOff } from 'lucide-react'
 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 'react-feather'
+import { ChevronDown, ChevronsRight, Menu, X } from 'lucide-react'
 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 '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,5 +1,5 @@
 import React from 'react'
-import { X } from 'react-feather'
+import { X } from 'lucide-react'
 import Text from '../Text'
 import Box from '../Box'
 import Row from '../Row'

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')