v0.3.0

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

.storybook/main.js

@@ -5,7 +5,6 @@ module.exports = {
 		"../src/dzeio/**/*.stories.@(js|jsx|ts|tsx)",
 	],
 	"addons": [
-		"@storybook/addon-links",
 		"@storybook/addon-essentials"
 	],
 	typescript: {

.storybook/next.js

@@ -24,6 +24,7 @@ module.exports = {
 		use: ['style-loader', {
 			loader: 'css-loader',
 			options: {
+				url: false,
 				importLoaders: 1,
 				modules: true
 			},

.storybook/preview.js

@@ -1,4 +1,5 @@
+import '../src/dzeio/general.styl'
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  layout: 'centered'
 }

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dzeio/components",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"license": "MIT",
 	"main": "./index.js",
 	"module": "./module/index.js",
@@ -11,10 +11,7 @@
 		"@babel/preset-env": "^7.12.16",
 		"@babel/preset-react": "^7.12.13",
 		"@rollup/plugin-typescript": "^8.2.0",
-		"@storybook/addon-actions": "^6.1.14",
 		"@storybook/addon-essentials": "^6.1.14",
-		"@storybook/addon-knobs": "^6.1.14",
-		"@storybook/addon-links": "^6.1.14",
 		"@storybook/cli": "^6.1.14",
 		"@storybook/react": "^6.1.14",
 		"@types/node": "^14.14.28",
@@ -42,7 +39,7 @@
 		"react-feather": "^2.0.9"
 	},
 	"scripts": {
-		"storybook": "start-storybook -p 6006",
+		"storybook": "rm -rf src/dzeio/**/*.js && start-storybook -p 6006",
 		"build-storybook": "build-storybook",
 		"build": "tsc && rollup --config",
 		"prepublishOnly": "yarn build"

src/dzeio/Fieldset/Fieldset.module.styl

@@ -2,7 +2,7 @@
 
 .fieldset
 	border-radius 4px
-	border 2px solid grey
+	border 2px solid $grayDark
 	transition all $transition
 	margin 0
 

src/dzeio/Fieldset/Fieldset.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/react/types-6-0'
+import React from 'react'
+import Component from '.'
+import Input from '../Input'
+
+export default {
+	title: 'DZEIO/Fieldset',
+	component: Component,
+	argTypes: {
+		title: { control: 'text'}
+	}
+} as Meta
+
+export const Basic = (args: any) => (
+	<Component {...args}><Input label="Test" /></Component>
+)

src/dzeio/Input/Input.module.styl

@@ -34,7 +34,7 @@
 			left 16px // input padding-left
 
 			~ label
-				left 16px + 24px + 16px
+				left 16px + 24px + 10px
 
 		&.right
 			right 16px
@@ -68,6 +68,7 @@
 		display flex
 		opacity 0
 		transition all $transition
+		overflow-x hidden
 		pointer-events none
 		// display flex
 		flex-direction column
@@ -109,10 +110,12 @@
 				@media (prefers-color-scheme dark)
 					background lighten(lighten($foregroundDark, 5%), 20%)
 
+	div + .autocomplete
+		top calc(100% - 4px - .9em)
 
-	input:focus + .autocomplete
+	input:focus ~ .autocomplete
-	select:focus + .autocomplete
+	select:focus ~ .autocomplete
-	textarea:focus + .autocomplete
+	textarea:focus ~ .autocomplete
 	.autocomplete:hover
 		opacity 1
 		pointer-events inherit
@@ -122,7 +125,7 @@
 	textarea
 		padding 14px 16px
 		height 56px
-		border 2px solid rgba(black, .3)
+		border 2px solid $grayDark
 		border-radius 4px
 		max-width 100%
 		box-sizing border-box
@@ -132,18 +135,7 @@
 		transition all $transition
 		color black
 		@media (prefers-color-scheme dark)
-			border-color rgba(white, .3)
+			border-color $grayLight
-			color white
-
-		&:not(:disabled):hover
-			border-color black
-			@media (prefers-color-scheme dark)
-				border-color white
-
-			+ svg
-				color black
-
-				@media (prefers-color-scheme dark)
 			color white
 
 		&:not(:placeholder-shown)
@@ -168,27 +160,47 @@
 			~ label
 				color #999
 
-		&:invalid
+		&:not(:disabled)
-			border-color $danger
+			&:hover
+				border-color black
+				@media (prefers-color-scheme dark)
+					border-color white
 
-			~ label
+				+ svg
-				color @border-color
+					color black
 
-			~ svg
+					@media (prefers-color-scheme dark)
-				color @border-color
+						color white
 			&:focus
-			border-color $default
+				border-color $main
 
 				~ label
 					color @border-color
 
 				~ svg
 					color @border-color
+			&:invalid
+				border-color $errorLight
+
+				~ label
+					color @border-color
+
+				~ svg
+					color @border-color
+				@media (prefers-color-scheme dark)
+					border-color $errorDark
+
+					~ label
+						color @border-color
+
+					~ svg
+						color @border-color
+
 
 		&.iconLeft
-			padding-left 16px + 24px + 16px
+			padding-left 16px + 24px + 10px
 		&.iconRight
-			padding-right 16 + 24 + 16px
+			padding-right 16 + 24 + 10px
 		&.filled
 			border none
 			background rgba(gray, .1)
@@ -235,12 +247,12 @@
 					padding 0
 					font-size .75rem
 				~ svg.left ~ label
-					left 16px + 24px + 16px // .input/padding-left label/padding-left
+					left 16px + 24px + 10px // .input/padding-left label/padding-left
 		~ svg.rotate
 			transform rotateX(0)
 			transition $transition
 
-		&:hover:focus ~ svg.rotate, ~.autocomplete:hover ~ svg.rotate
+		&:focus ~ svg.rotate, ~.autocomplete:hover ~ svg.rotate
 			transform rotateX(180deg)
 	div
 		display flex

src/dzeio/Input/Input.stories.tsx

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

src/dzeio/Input/index.tsx

@@ -5,6 +5,7 @@ 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
@@ -37,6 +38,8 @@ interface States {
 
 export default class Input extends React.Component<Props, States> {
 
+	public state: States = {}
+
 	// any because f*ck types
 	private inputRef: React.RefObject<any> = React.createRef()
 	private parentRef: React.RefObject<HTMLDivElement> = React.createRef()
@@ -50,12 +53,15 @@ export default class Input extends React.Component<Props, States> {
 		}
 		if (this.props.autocomplete) {
 			window.addEventListener('scroll', this.parentScroll)
+			this.parentScroll()
 		}
 	}
 
 	public componentWillUnmount() {
+		if (this.props.autocomplete) {
 			window.removeEventListener('scroll', this.parentScroll)
 		}
+	}
 
 	public render() {
 		const props: Props = Object.assign({}, this.props)
@@ -65,7 +71,9 @@ export default class Input extends React.Component<Props, States> {
 		delete props.opaque
 		delete props.helper
 		delete props.infinityText
+		delete props.autocomplete
 		delete props.filled
+		delete props.iconRight
 		delete props.inputRef
 		delete props.selectRef
 		delete props.block
@@ -77,7 +85,7 @@ export default class Input extends React.Component<Props, States> {
 			ref: this.props.inputRef || this.inputRef,
 			className: buildClassName(
 				[css.iconLeft, this.props.icon],
-				[css.iconRight, this.props.iconRight],
+				[css.iconRight, this.props.iconRight || this.props.autocomplete],
 				[css.filled, this.props.filled],
 				[css.opaque, this.props.opaque]
 			),
@@ -94,7 +102,7 @@ export default class Input extends React.Component<Props, States> {
 			input = (
 				<select
 					ref={this.props.selectRef || this.inputRef}
-					{...this.props as React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>}
+					{...props as React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>}
 					className={buildClassName(
 						[css.iconLeft, this.props.icon],
 						[css.iconRight, !this.props.disabled || this.props.iconRight],
@@ -138,12 +146,6 @@ export default class Input extends React.Component<Props, States> {
 			>
 				{input}
 
-				{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.includes(this.state?.value || '')).map((item) => (<li key={item} onClick={this.onAutoCompleteClick(item)}><Text>{item}</Text></li>))}
-					</ul>
-				)}
-
 				{/* Process Icon */}
 				{this.props.icon && (
 					<this.props.icon className={css.left} />
@@ -167,6 +169,12 @@ export default class Input extends React.Component<Props, States> {
 						)}
 					</div>
 				)}
+
+				{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.includes(this.state?.value || '')).map((item) => (<li key={item} onClick={this.onAutoCompleteClick(item)}><Text>{item}</Text></li>))}
+					</ul>
+				)}
 			</div>
 		)
 	}
@@ -175,6 +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)
 		if (this.state.isInFirstPartOfScreen !== result) {
 			this.setState({isInFirstPartOfScreen: result})
 		}

src/dzeio/Loader/Loader.module.styl

@@ -0,0 +1,18 @@
+@import '../config'
+
+.div
+	position fixed
+	left 0
+	width 100%
+	height 7px
+	pointer-events none
+
+	top 0
+	&.hide
+		transition top .5s ease-in-out
+		top -7px
+	div
+		&:not([style="width: 0px;"])
+			transition width 50ms ease-in-out
+		background rgba($main, .7)
+		height 100%

src/dzeio/Loader/index.tsx

@@ -0,0 +1,79 @@
+import { Router } from 'next/router'
+import React from 'react'
+import { buildClassName } from '../Util'
+import css from './Loader.module.styl'
+
+interface Props {
+	percent?: number
+	auto?: {
+		interval: [number, number]
+		increment: [number, number]
+	}
+}
+
+interface State {
+	percent?: number
+}
+
+export default class Loader extends React.Component<Props, State> {
+
+	public state: State = {}
+
+	private interval?: NodeJS.Timeout
+
+	public componentDidMount() {
+		if (this.props.auto) {
+			Router.events.on('routeChangeComplete', this.routeChangeComplete)
+			Router.events.on('routeChangeStart', this.routeChangeStart)
+		}
+	}
+
+	public componentWillUnmount() {
+		if (this.props.auto) {
+			Router.events.off('routechangeComplete', this.routeChangeComplete)
+			Router.events.off('routechangeStart', this.routeChangeStart)
+		}
+	}
+
+	public render = () => (
+		<div className={buildClassName(css.div, [css.hide, (this.props.percent || this.state.percent) === 100])}>
+			<div style={{width: (this.props.percent || this.state.percent) ? `${(this.props.percent || this.state.percent)}%` : 0}}></div>
+		</div>
+	)
+
+	private routeChangeComplete = () => {
+		if (this.interval) {
+			clearTimeout(this.interval)
+			this.interval = undefined
+		}
+		this.setState({percent: 100})
+	}
+
+	private routeChangeStart = () => {
+		if (this.interval) {
+			clearTimeout(this.interval)
+		}
+		this.setState({percent: 0}, () => {
+			if (!this.props.auto) {return}
+			this.interval = setTimeout(this.timeoutFn, this.randomInt(this.props.auto.interval[0], this.props.auto.interval[1]))
+		})
+	}
+
+	private timeoutFn = () => {
+		if (!this.props.auto) {return}
+		const p = this.state.percent || 0
+		this.setState({
+			percent: Math.min(
+				99,
+				p >= 80 ? p + Math.random() : p + this.randomInt(this.props.auto.increment[0], this.props.auto.increment[1])
+			)
+		})
+		this.interval = setTimeout(this.timeoutFn, this.randomInt(this.props.auto.interval[0], this.props.auto.interval[1]))
+	}
+
+	private randomInt(min = 0, max = 10) {
+		min = Math.ceil(min)
+		max = Math.floor(max)
+		return Math.floor(Math.random() * (max - min + 1)) + min
+	}
+}

src/dzeio/Util.ts

@@ -24,13 +24,3 @@ export function buildClassName(...classes: Array<Array<any> | string | undefined
 	}
 	return classesFinal.join(' ')
 }
-
-export const colors = {
-	default: '#3949AB', // This color should never appear
-	primary: '#3949AB',
-	secondary: '#FCFCFC',
-	info: '#03A9F4',
-	success: '#2DCE89',
-	danger: '#F5365C',
-	warning: '#FB6340'
-}

src/dzeio/general.styl

@@ -27,13 +27,16 @@ a
 }
 
 /* Track */
+::-webkit-scrollbar-corner
 ::-webkit-scrollbar-track
 	background $foregroundLight
+	transition $transition
 	@media (prefers-color-scheme dark)
 		background $foregroundDark
 
 ::-webkit-scrollbar-thumb
 	background: darken($foregroundLight, 16%)
+	transition $transition
 	@media (prefers-color-scheme dark)
 		background lighten($foregroundDark, 16%)
 	&:hover

tsconfig.json

@@ -64,6 +64,7 @@
 	],
 	"exclude": [
 		"node_modules",
-		"build"
+		"build",
+		"*.stories.tsx"
 	]
 }