Update

Signed-off-by: Avior <github@avior.me>

.gitignore

@@ -1,11 +1,5 @@
-module/
 node_modules/
-*.mjs
-*.js
-!src/dzeio/stylusUtils.js
-*.d.ts
 types/
-!rollup.config.js
-!src/stylus.d.ts
-!.storybook/*.js
+
+index.js
 style.css

package.json

@@ -16,10 +16,9 @@
 		"@types/react-dom": "^17.0.1",
 		"babel-loader": "^8.2.2",
 		"css-loader": "^5.0.2",
-		"lucide-react": "^0.16.0",
-		"next": "^10.0.0",
-		"react": "^16.0.0",
-		"react-dom": "^16.0.0",
+		"next": "^11.0.0",
+		"react": "^17.0.0",
+		"react-dom": "^17.0.0",
 		"style-loader": "^2.0.0",
 		"stylus": "^0.55.0",
 		"stylus-loader": "^4.3.3",
@@ -28,12 +27,9 @@
 		"webpack": "^4.44.2"
 	},
 	"peerDependencies": {
-		"lucide-react": "^0.16.0",
-		"next": "^10.0.0 || ^11.0.0",
-		"react": "^16.0.0 || ^17.0.0",
-		"react-dom": "^16.0.0 || ^17.0.0",
-		"stylus": "^0.55.0",
-		"typescript": "^4.0.0"
+		"next": "^11.0.0",
+		"react": "^17.0.0",
+		"react-dom": "^17.0.0"
 	},
 	"scripts": {
 		"dev": "start-storybook -s ./.storybook/public -p 6006",
@@ -42,6 +38,7 @@
 		"postinstall": "rollup --config"
 	},
 	"dependencies": {
+		"lucide-react": "^0.16.0",
 		"rollup": "^2.44.0",
 		"rollup-plugin-styles": "^3.14.1",
 		"rollup-plugin-typescript2": "^0.30.0",

src/dzeio/Box/index.tsx

@@ -6,8 +6,7 @@ import css from './Box.module.styl'
 import Row from '../Row'
 import Col from '../Col'
 import Text from '../Text'
-import { Icon } from 'lucide-react'
-import { ColorType } from '../interfaces'
+import { Icon } from '../interfaces'
 
 interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
 	noPadding?: boolean

src/dzeio/Button/Button.module.styl

@@ -31,15 +31,32 @@
 		background transparent
 		color @background-color
 
+		&:not(:disabled)
 			&:hover
 			&:active
 			&:focus
 				color $textOnMain
 
+		&:hover
+			box-shadow none
+
+	&.ghost
+		background transparent
+		color black
+		@media (prefers-color-scheme dark)
+			color white
+
+		&:hover
+			box-shadow none
+			background-color rgba($main, .25)
+
+		&:active
+		&:focus
+			background-color $main
+
 	&:hover
 		background-color @background-color
-		transform translateY(-2px)
-		box-shadow 0 4px 4px rgba(@background-color,.2)
+		box-shadow 0 0 0 4px rgba(@background-color,.2)
 
 	&:active
 	&:focus
@@ -69,20 +86,22 @@
 		margin-top 0
 
 	&:disabled
-		background $grayLight
-		color $grayDark
+		background $lightGrayLight
+		color $darkGrayLight
 		transform none
 		box-shadow none
 		cursor initial
 
+		@media (prefers-color-scheme dark)
+			background $lightGrayDark
+			color $darkGrayDark
+
 		&.outline
-			border 2px solid @grayDark
+			border 2px solid @color
 			background transparent
-			color @grayDark
 
 			@media (prefers-color-scheme dark)
-				border 2px solid @grayLight
-				color @grayLight
+				border 2px solid $darkGrayDark
 
 	&.loading
 		color transparent
@@ -101,7 +120,13 @@
 			border-radius 100%
 			height 1em
 			box-sizing inherit
-			animation ButtonLoading 1s infinite linear
+			animation ButtonLoading .75s infinite linear
+
+		&:disabled::after
+			border-color transparent transparent $darkGrayLight $darkGrayLight
+			@media (prefers-color-scheme dark)
+				border-color transparent transparent $darkGrayDark $darkGrayDark
+
 
 .textInner
 	margin-left 8px
@@ -137,6 +162,19 @@ btn($color, $theme)
 			&:focus
 				background-color darken(@color, 30%)
 
+
+	&.ghost
+		background transparent
+		color $textColor
+
+		&:hover
+			box-shadow none
+			background-color rgba($color, .25)
+
+		&:active
+		&:focus
+			background-color $color
+
 	&:hover
 		background-color @background-color
 		box-shadow 0 4px 4px rgba(@background-color,.2)

src/dzeio/Button/Button.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta } from '@storybook/react/types-6-0'
 import React from 'react'
 import { Zap } from 'lucide-react'
+import Box from '../Box'
 import Component from '.'
 
 export default {
@@ -8,7 +9,7 @@ export default {
 	component: Component
 } as Meta
 
-export const Basic = (args: any) => <Component {...args}>Button</Component>
+export const Basic = (args: any) => <Box><Component {...args}>Button</Component></Box>
 Basic.args = {
 	nomargintop: true,
 	icon: Zap,
@@ -16,7 +17,7 @@ Basic.args = {
 	block: true
 }
 
-export const WithImg = (args: any) => <Component {...args}>Button</Component>
+export const WithImg = (args: any) => <Box><Component {...args}>Button</Component></Box>
 WithImg.args = {
 	nomargintop: true,
 	icon: '/16-16.svg',
@@ -24,7 +25,7 @@ WithImg.args = {
 	block: true
 }
 
-export const ExternalLinkButton = (args: any) => <Component {...args}>Button</Component>
+export const ExternalLinkButton = (args: any) => <Box><Component {...args}>Button</Component></Box>
 ExternalLinkButton.args = {
 	nomargintop: true,
 	href: 'https://example.com',

src/dzeio/Button/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 import Link from '../Link'
-import { ColorType, IconProps } from '../interfaces'
+import { ColorType, Icon } from '../interfaces'
 import { buildClassName } from '../Util'
 import Image from '../Image'
 
@@ -9,12 +9,12 @@ import css from './Button.module.styl'
 // MAKE OUTLINE use Fieldset instead of the current one xd
 
 interface Props {
-	outline?: boolean
 	nomargintop?: boolean
 	color?: ColorType
 	children?: React.ReactNode
-	icon?: FC<IconProps> | string
+	icon?: Icon | string
 	size?: 'large' | 'small'
+	type?: 'outline' | 'ghost'
 	block?: boolean
 	href?: string
 	as?: string
@@ -29,7 +29,7 @@ export default class Button extends React.Component<Props> {
 
 		let inner: any = this.props.children
 
-		if (!this.props.loading && this.props.icon) {
+		if (this.props.icon) {
 			const Icon = this.props.icon
 			inner = (
 				<>
@@ -48,16 +48,16 @@ export default class Button extends React.Component<Props> {
 		const classes = buildClassName(
 			[css.button],
 			[css[this.props.color as string], this.props.color],
-			[css.outline, this.props.outline],
+			[css[this.props.type as string], this.props.type],
 			[css.block, this.props.block],
 			[css[this.props.size as string], this.props.size],
 			[css.nomargintop, this.props.nomargintop],
 			[css.loading, this.props.loading]
 		)
 
-		if (this.props.href) {
+		if (this.props.href && !this.props.disabled) {
 			return (
-				<Link linkProps={{onClick: this.props.onClick}} hideIcon noStyle href={this.props.href} className={buildClassName([classes], [css.disabled, this.props.disabled])}>
+				<Link linkProps={{onClick: this.props.onClick}} noStyle href={this.props.href} className={buildClassName([classes], [css.disabled, this.props.disabled])}>
 					{inner}
 				</Link>
 			)

src/dzeio/Code/Code.module.styl

@@ -1,12 +1,14 @@
+@import "../config.styl"
+
 .code
-	background #E8EAF6
-	padding 4px
+.pre
+	background $lightGrayLight
+	padding 4px 8px
 	border-radius 8px
+	@media (prefers-color-scheme dark)
+		background $lightGrayDark
 
 .pre
-	border-radius 8px
-	padding 4px 8px
-	background #E8EAF6
 	display block
 	.code
 		padding 0

src/dzeio/Footer/index.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react'
+import React from 'react'
 import { Heart } from 'lucide-react'
 import Link from '../Link'
-import { Icon } from 'lucide-react'
 import Text from '../Text'
 import css from './Footer.module.styl'
 import Image from 'next/image'
+import { Icon } from '../interfaces'
 
 interface Props {
 	text?: string

src/dzeio/Input/Input.module.styl

@@ -161,8 +161,13 @@
 					color @border-color
 
 				~ svg
-				&::placeholder
 					color @border-color
+				&::placeholder
+					color black
+
+					@media (prefers-color-scheme dark)
+						color white
+
 			&:invalid
 				border-color $errorDark
 

src/dzeio/Input/index.tsx

@@ -2,15 +2,15 @@ import React, { FC } from 'react'
 
 import { ChevronDown } from 'lucide-react'
 import Text from '../Text'
-import { IconProps } from '../interfaces'
+import { Icon } from '../interfaces'
 import { buildClassName } from '../Util'
 import css from './Input.module.styl'
 
 interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
 	id?: string
 	label?: string
-	icon?: FC<IconProps>
-	iconRight?: FC<IconProps>
+	icon?: Icon
+	iconRight?: Icon
 	helper?: string
 	inputRef?: React.RefObject<HTMLInputElement>
 	selectRef?: React.RefObject<HTMLSelectElement>

src/dzeio/Navbar/Navbar.module.styl

@@ -153,7 +153,7 @@
 			max-height 100%
 
 	&.short
-		width 56px
+		width 88px
 		.header > div
 			padding 0
 		.header .imgContainer
@@ -209,7 +209,8 @@
 					padding-left 16px
 					height inherit
 
-.navbar, .sidebar
+.navbar
+.sidebar
 	ul
 		list-style none
 		margin 0

src/dzeio/Navbar/Navbar.stories.tsx

@@ -6,7 +6,10 @@ import Text from '../Text'
 
 export default {
 	title: 'DZEIO/Navbar',
-	component: Component
+	component: Component,
+	parameters: {
+		layout: 'fullscreen'
+	}
 } as Meta
 
 export const Basic: Story<any> = (args: any) => <Component {...args} />

src/dzeio/Popup/Popup.module.styl

@@ -6,9 +6,9 @@
 	width 100%
 	top 0
 	left 0
-	background rgba($backgroundLight, .7)
+	background rgba($lightGrayLight, .7)
 	@media (prefers-color-scheme dark)
-		background rgba($backgroundDark, .7)
+		background rgba($lightGrayDark, .7)
 	cursor pointer
 	z-index 200
 	animation fadeIn .3s ease-in-out 1 forwards

src/dzeio/Popup/Popup.stories.tsx

@@ -0,0 +1,13 @@
+import { Meta } from '@storybook/react/types-6-0'
+import React from 'react'
+import Component from '.'
+import Text from '../Text'
+
+export default {
+	title: 'DZEIO/Popup',
+	component: Component
+} as Meta
+
+export const Basic = (args: any) => (
+	<Component><Text>Test</Text></Component>
+)

src/dzeio/Popup/index.tsx

@@ -9,7 +9,7 @@ import css from './Popup.module.styl'
 interface Props {
 	children: React.ReactNode
 	onClose?: () => void
-	header?: Box['props']
+	title?: string
 }
 
 export default class Popup extends React.Component<Props> {
@@ -17,7 +17,7 @@ export default class Popup extends React.Component<Props> {
 	public render = () => (
 		<Row nomargin onClick={this.parentClose} justify="center" align="center" className={css.popup}>
 			<Box
-				//{...this.props.header as any}
+				title={this.props.title}
 				className={css.popupChild}
 				onClick={(ev) => ev.stopPropagation()}
 				rightHeader={

src/dzeio/Row/Row.module.styl

@@ -14,7 +14,9 @@
 	flex-wrap nowrap
 
 .nogrow > *
+	max-width initial
 	flex-grow 0
+	flex-basis initial
 
 for dir in 'row-reverse' 'column' 'column-reverse'
 	.direction-{dir}

src/dzeio/Table/Table.module.styl

@@ -6,16 +6,20 @@
 
 	tr
 		$radius = 16px
-		td:first-child
 		th:first-child
 			border-top-left-radius $radius
 			border-bottom-left-radius $radius
 
-		td:last-child
 		th:last-child
 			border-top-right-radius $radius
 			border-bottom-right-radius $radius
 
+	&.horizontalBorders tr:not(:last-child) td
+		border-bottom 1px solid $darkGrayLight
+
+	&.verticalBorders tr td:not(:first-child)
+		border-left 1px solid $darkGrayLight
+
 	th
 	td
 		padding 16px

src/dzeio/Table/Table.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react/types-6-0'
-import { Copyright, Settings } from 'lucide-react'
+import { Settings } from 'lucide-react'
 import React from 'react'
 import Component from '.'
 import Box from '../Box'

src/dzeio/Table/index.tsx

@@ -7,13 +7,23 @@ interface Props {
 	children: React.ReactNode
 	parentClassName?: string
 	className?: string
+	horizontalBorders?: boolean
+	verticalBorders?: boolean
 }
 
 export default class Table extends React.Component<Props> {
 
 	public render = () => (
-		<div className={buildClassName(css.parent, this.props.parentClassName)}>
-			<table className={buildClassName(css.table, this.props.className)}>{this.props.children}</table>
+		<div className={buildClassName(
+			css.parent,
+			this.props.parentClassName
+		)}>
+			<table className={buildClassName(
+				css.table,
+				this.props.className,
+				[css.horizontalBorders, this.props.horizontalBorders],
+				[css.verticalBorders, this.props.verticalBorders]
+			)}>{this.props.children}</table>
 		</div>
 	)
 

src/dzeio/_aileron.styl

@@ -1,3 +1,6 @@
+// not used anymore
+// kept if it is used again
+
 $path = "/assets/fonts/aileron"
 
 @font-face

src/dzeio/config.styl

@@ -7,14 +7,14 @@ $infoDark = #01579B
 $infoLight = #29B6F6
 
 $successDark = #1B5E20
-$successLight = #4CAF50
+$successLight = #7CB342
 
 $errorDark = #7F0000
 $errorLight = #F44336
 
 $warningDark = #C43E00
 $warningLight = #FF9800
-// hsl($main)
+
 $backgroundDark = darken($main, 92%)
 $backgroundLight = lighten($main, 94%)
 $foregroundDark = #202020
@@ -28,11 +28,6 @@ $lightGrayLight = #F4F4F4
 $darkGrayDark = #444
 $lightGrayDark = #AAA
 
-// @deprecated
-$grayLight = $darkGrayLight
-$grayDark  = $lightGrayLight
-
-
 $transitionTime = .15s
 $transitionFunction = ease-in-out
 $transition = $transitionTime $transitionFunction
@@ -53,10 +48,6 @@ $gapSize = 16px
 rem($a)
 	($a / 16)rem
 
-// @deprecated colors
-$default = $main
-
-
 // See https://github.com/stylus/stylus/issues/1872#issuecomment-86553717
 use('stylusUtils.js')
 

src/dzeio/general.styl

@@ -1,16 +1,14 @@
-@import "_aileron"
+//@import "_aileron"
 @import "config"
 
-*
-*::before
-*::after
+body
 	box-sizing border-box
-	font-family Aileron, -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif
+	font-family: ui-system, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif
 
 // Georgia,Cambria,"Times New Roman",Times,serif
 
 code, pre
-	font-family "Fira Code", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
+	font-family ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
 
 html
 body

src/dzeio/interfaces.d.ts

@@ -1,4 +1,4 @@
-import { SVGAttributes } from 'react'
+import { FC, SVGAttributes } from 'react'
 
 export type ColorType = 'info' | 'success' | 'error' | 'warning'
 
@@ -6,3 +6,5 @@ export interface IconProps extends SVGAttributes<SVGElement> {
 	color?: string
 	size?: string | number
 }
+
+export type Icon = FC<IconProps>

tsconfig.json

@@ -1,7 +1,7 @@
 {
 	"compilerOptions": {
 		/* Basic Options */
-		"target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+		"target": "esnext",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
 		"module": "esnext",                       /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
 		// "lib": [],                             /* Specify library files to be included in the compilation. */
 		// "allowJs": true,                       /* Allow javascript files to be compiled. */