v0.8.2

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

.gitignore

@@ -1,6 +1,12 @@
 module/
 node_modules/
+*.mjs
 *.js
+!src/dzeio/stylusUtils.js
+*.d.ts
+types/
+!rollup.config.js
+!src/stylus.d.ts
 !.storybook/*.js
 style.css
 yarn-error.log

.npmignore

@@ -1,10 +1,8 @@
 .storybook/
 node_modules/
-src/
+*.stories.js
 .gitattributes
 .gitignore
 .npmignore
-rollup.config.js
-tsconfig.json
 yarn.lock
 yarn-error.log

.storybook/main.js

@@ -1,8 +1,9 @@
 const path = require("path");
+const webpack = require('webpack')
 
 module.exports = {
 	"stories": [
-		"../src/dzeio/**/*.stories.@(js|jsx|ts|tsx)",
+		"../src/dzeio/**/*.stories.@(ts|tsx)",
 	],
 	"addons": [
 		"@storybook/addon-essentials"
@@ -16,5 +17,18 @@ module.exports = {
 			propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
 		},
 	},
-	presets: [path.resolve(__dirname, "./next.js")]
+	presets: [path.resolve(__dirname, "./next.js")],
+	// Allow to use Next/Image
+	webpackFinal: (config) => {
+		config.plugins.push(new webpack.DefinePlugin({
+			'process.env.__NEXT_IMAGE_OPTS': JSON.stringify({
+				deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+				imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+				domains: [],
+				path: '/',
+				loader: 'default',
+			})
+		}))
+		return config
+	}
 }

.storybook/mockNextImage.js

@@ -0,0 +1,17 @@
+// https://stackoverflow.com/a/64765638/7335674
+
+import * as nextImage from 'next/image'
+
+Object.defineProperty(nextImage, 'default', {
+	configurable: true,
+	value: (props) => {
+		return (
+			<div style={{display: 'inline-block', maxWidth: '100%', overflow: 'hidden', position: 'relative', boxSizing: 'border-box', margin: 0}}>
+				<div style={{boxSizing: 'border-box', display: 'block', maxWidth: '100%'}}>
+					<img {...props} alt="" aria-hidden="true" role="presentation" style={{maxWidth: '100%', display: 'block', margin: 0, border: 'none', padding: 0}} />
+				</div>
+				<img {...props} style={{position: 'absolute', inset: 0, boxSizing: 'border-box', padding: 0, border: 'none', margin: 'auto', display: 'block', width: 0, height: 0, minWidth: '100%', maxWidth: '100%', minHeight: '100%', maxHeight: '100%'}} />
+			</div>
+		)
+	},
+})

.storybook/mockNextRouter.js

@@ -0,0 +1,8 @@
+import Router from 'next/router';
+
+Router.router = {
+	push: async () => {},
+	replace: async () => {},
+	prefetch: () => {},
+	route: '/mock-route',
+	pathname: 'mock-path',};

.storybook/preview.js

@@ -1,4 +1,6 @@
 import '../src/dzeio/general.styl'
+import './mockNextRouter'
+import './mockNextImage'
 
 export const parameters = {
   layout: 'centered'

.storybook/public/90-38.svg

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

package.json

@@ -1,9 +1,9 @@
 {
 	"name": "@dzeio/components",
-	"version": "0.4.2",
+	"version": "0.8.2",
 	"license": "MIT",
-	"main": "./src/index.mjs",
-	"types": "./src/index.d.ts",
+	"main": "./index.js",
+	"types": "./types/index.d.ts",
 	"devDependencies": {
 		"@babel/core": "^7.12.16",
 		"@babel/preset-env": "^7.12.16",
@@ -20,26 +20,31 @@
 		"react": "^17.0.1",
 		"react-dom": "^17.0.1",
 		"react-feather": "^2.0.9",
-		"rollup": "^2.39.0",
-		"rollup-plugin-styles": "^3.14.1",
-		"rollup-plugin-typescript2": "^0.30.0",
 		"style-loader": "^2.0.0",
 		"stylus": "^0.54.8",
 		"stylus-loader": "^4.3.3",
 		"ts-loader": "^8.0.17",
-		"typescript": "^4.1.3",
+		"typescript": "^4.2.3",
 		"webpack": "^4.44.2"
 	},
 	"peerDependencies": {
 		"next": "^10.0.5",
 		"react": "^17.0.1",
 		"react-dom": "^17.0.1",
-		"react-feather": "^2.0.9"
+		"react-feather": "^2.0.9",
+		"stylus": "^0.54.8",
+		"typescript": "^4.2.3"
 	},
 	"scripts": {
-		"storybook": "rm -rf src/dzeio/**/*.js && start-storybook -p 6006",
-		"build-storybook": "build-storybook",
-		"build": "tsc && mv src/index.js src/index.mjs",
-		"prepublishOnly": "yarn build"
+		"dev": "rm -rf src/dzeio/**/*.js && start-storybook -s ./.storybook/public -p 6006",
+		"build": "rollup --config",
+		"prepublishOnly": "yarn build",
+		"postinstall": "rollup --config"
+	},
+	"dependencies": {
+		"rollup": "^2.44.0",
+		"rollup-plugin-styles": "^3.14.1",
+		"rollup-plugin-typescript2": "^0.30.0",
+		"tslib": "^2.1.0"
 	}
 }

rollup.config.js

@@ -12,20 +12,17 @@ export default [
 				url: false,
 				autoModules: true,
 				mode: 'extract',
-
+				modules: {
+					generateScopedName: '[local][hash:5]'
+				}
 			}),
 			typescript({useTsconfigDeclarationDir: true}), // so Rollup can convert TypeScript to JavaScript
 		],
 		output: [
 			{
-				dir: './',
+				file: pkg.main,
 				format: 'cjs',
 				assetFileNames: 'style.css'
-			},
-			{
-				file: pkg.module,
-				format: 'es',
-				assetFileNames: 'style.css'
 			}
 		]
 	}

src/dzeio/Box/index.tsx

@@ -37,9 +37,11 @@ export default class Box extends React.Component<Props> {
 					{this.props.headerButtons}
 				</BoxHeader>
 			)}
+			{this.props.children && (
 				<BoxBody noPadding={this.props.noPadding}>
 					{this.props.children}
 				</BoxBody>
+			)}
 		</BoxWrapper>
 	)
 }

src/dzeio/Checkbox/Checkbox.module.styl

@@ -5,28 +5,33 @@ $backColor = #757575
 .label
 	position relative
 	display flex
-	padding-left 8px
-	margin 8px
 	user-select none
+	align-items center
+
+	+ .label
+		margin-top 8px
 
 	p
-		margin-left 18px
+		margin-left 8px
 
 	span
 		top 0
 		left 0
 		width 20px
 		height @width
-		position absolute
-		box-shadow inset 0 0 0 2px $backColor
+		position relative
+		box-shadow inset 0 0 0 2px $grayDark
 		border-radius 2px
 		transition all $transition
 
+		@media (prefers-color-scheme dark)
+			box-shadow inset 0 0 0 2px $grayLight
+
 		&::after
 			border-radius 20px
 			position absolute
 			transition all $transition
-			background $default
+			background $main
 
 	svg
 		transition $transition
@@ -41,19 +46,9 @@ $backColor = #757575
 		left 0
 		opacity 0
 
-		&:focus + span
-			box-shadow inset 0 0 0 2px black, 0 0 0 2px rgba(black,.3)
-			@media (prefers-color-scheme dark)
-				box-shadow inset 0 0 0 2px white, 0 0 0 2px rgba(white,.3)
-
-		&:focus:checked + span
-			box-shadow inset 0 0 0 2px $default, 0 0 0 2px rgba($default,.3)
-			@media (prefers-color-scheme dark)
-				box-shadow inset 0 0 0 2px $default, 0 0 0 2px rgba($default,.3)
-
 		&:checked + span
-			background rgba($default, .5)
-			box-shadow inset 0 0 0 2px $default
+			background rgba($main, .5)
+			box-shadow inset 0 0 0 2px $main
 
 			svg
 				color white
@@ -67,7 +62,6 @@ $backColor = #757575
 				box-shadow inset 0 0 0 2px white
 
 .radio
-	margin-left 18px // Margin + margin for Circle
 	span
 		border-radius 20px
 
@@ -86,20 +80,19 @@ $backColor = #757575
 .switch
 	padding 2px 0 2px 10px // 2px base padding 10px circle padding
 
-	&:hover span
-		box-shadow none
-
-		&::after
+	&:hover span::after
 			background black
+			@media (prefers-color-scheme dark)
+				background white
 
 	span
 		width 28px
 		height 14px
 		border-radius 20px
 		top 50%
+		margin-right 10px
 		box-shadow none
 		background rgba($backColor, .5)
-		transform translateY(-50%)
 
 		&::after
 			content " "
@@ -115,93 +108,39 @@ $backColor = #757575
 		width 20px
 
 		&:checked + span
-			box-shadow none
-
 			&::after
 				left 100%
 				transform translate(-50%, -50%)
-				background $default
-
-.primary
-	$color = $primary
+				background $main
 
+checkBox($color)
 	input:checked + span
 		background rgba($color, .5)
 		box-shadow inset 0 0 0 2px $color
 
 		&::after
 			background $color
-
+	input:focus:checked + span
+		box-shadow inset 0 0 0 2px $color, 0 0 0 2px rgba($color,.3)
 	&.switch
 		input:checked + span
 			box-shadow none
-
-.secondary
-	$color = $secondary
-
-	input:checked + span
-		background rgba($color, .5)
-		box-shadow inset 0 0 0 2px $color
-
-		&::after
-			background $color
-
-	&.switch
-		input:checked + span
-			box-shadow none
-
 .info
-	$color = $info
-
-	input:checked + span
-		background rgba($color, .5)
-		box-shadow inset 0 0 0 2px $color
-
-		&::after
-			background $color
-
-	&.switch
-		input:checked + span
-			box-shadow none
+	checkBox($infoLight)
+	@media (prefers-color-scheme dark)
+		checkBox($infoDark)
 
 .success
-	$color = $success
+	checkBox($successLight)
+	@media (prefers-color-scheme dark)
+		checkBox($successDark)
 
-	input:checked + span
-		background rgba($color, .5)
-		box-shadow inset 0 0 0 2px $color
-
-		&::after
-			background $color
-
-	&.switch
-		input:checked + span
-			box-shadow none
-
-.danger
-	$color = $danger
-
-	input:checked + span
-		background rgba($color, .5)
-		box-shadow inset 0 0 0 2px $color
-
-		&::after
-			background $color
-
-	&.switch
-		input:checked + span
-			box-shadow none
+.error
+	checkBox($errorLight)
+	@media (prefers-color-scheme dark)
+		checkBox($errorDark)
 
 .warning
-	$color = $warning
-
-	input:checked + span
-		background rgba($color, .5)
-		box-shadow inset 0 0 0 2px $color
-
-		&::after
-			background $color
-
-	&.switch
-		input:checked + span
-			box-shadow none
+	checkBox($warningLight)
+	@media (prefers-color-scheme dark)
+		checkBox($warningDark)

src/dzeio/Checkbox/index.tsx

@@ -7,38 +7,32 @@ import css from './Checkbox.module.styl'
 import Text from '../Text'
 
 interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
-	label?: string
-	id: string
-	type?: undefined
-	radio?: boolean
-	switch?: boolean
-	color?: ColorType
+	label: string
+	type?: 'checkbox' | 'radio' | 'switch'
 }
 
 export default class Checkbox extends React.Component<Props> {
 
 	public render() {
-		const props: Props = Object.assign({}, this.props)
+		const props: Partial<Props> = Object.assign({}, this.props)
 		delete props.label
 		delete props.type
-		delete props.color
-		delete props.switch
-		delete props.radio
 
-		const realType = this.props.radio ? 'radio' : 'checkbox'
+		const realType = this.props.type ?? 'checkbox'
 
 		return (
-			<label htmlFor={this.props.id} className={buildClassName(
+			<label htmlFor={this.props.id ?? this.props.label} className={buildClassName(
 				[css.label],
 				[css.radio, realType === 'radio'],
-				[css.switch, this.props.switch],
+				[css.switch, realType === 'switch'],
 				[css[this.props.color as string], this.props.color]
 			)}>
 				<input {...props}
-					type={realType}
+					id={this.props.id ?? this.props.label}
+					type={realType === 'switch' ? 'checkbox' : realType}
 				/>
 				<span>
-					{realType === 'checkbox' && ! this.props.switch && (
+					{realType === 'checkbox' && (
 						<Check strokeWidth={4} size={16}/>
 					)}
 				</span>

src/dzeio/Col/DebugCols.tsx

@@ -3,7 +3,7 @@ import Row from '../Row'
 
 import css from './DebugCols.module.styl'
 
-import Col from '.'
+import Col from '../Col'
 
 enum Breakpoint {
 	MOBILE,

src/dzeio/GradientBackground/GradientBackground.module.styl

@@ -1,34 +1,29 @@
 @import "../config"
 
-$transparent = 75%
+$transparent = 15%
 
 .back
 	transition all $transition
-	background linear-gradient(to left, $default, transparentify($default, $transparent))
+	background $mainGradient
 
-.primary
-	$color = $primary
-	background linear-gradient(to left, $color, transparentify($color, $transparent))
-
-.secondary
-	$color = $secondary
-	background linear-gradient(to left, $color, transparentify($color, $transparent))
+	&.fullscreen
+		min-height 100vh
 
 .info
 	$color = $info
-	background linear-gradient(to left, $color, transparentify($color, $transparent))
+	background linear-gradient(to left, $color, lighten($color, $transparent))
 
 .success
 	$color = $success
-	background linear-gradient(to left, $color, transparentify($color, $transparent))
+	background linear-gradient(to left, $color, lighten($color, $transparent))
 
 .danger
 	$color = $danger
-	background linear-gradient(to left, $color, transparentify($color, $transparent))
+	background linear-gradient(to left, $color, lighten($color, $transparent))
 
 .warning
 	$color = $warning
-	background linear-gradient(to left, $color, transparentify($color, $transparent))
+	background linear-gradient(to left, $color, lighten($color, $transparent))
 
 @media (prefers-color-scheme dark)
 	.back

src/dzeio/GradientBackground/index.tsx

@@ -8,12 +8,18 @@ interface Props {
 	color?: ColorType
 	className?: string
 	children: React.ReactNode
+	fullscreen?: boolean
 }
 
+/**
+ * Make the background a linear-gradient
+ * 
+ * @version 1.0.0
+ */
 export default class GradientBackground extends React.Component<Props> {
 
 	public render = () => (
-		<div className={buildClassName([css.back], [css[this.props.color as string], this.props.color], [this.props.className])}>
+		<div className={buildClassName(css.back, [css[this.props.color as string], this.props.color], this.props.className)}>
 			{this.props.children}
 		</div>
 	)

src/dzeio/Input/Input.module.styl

@@ -6,7 +6,7 @@
 	max-width 100%
 	display inline-block
 
-	+ .parent
+	&:not(.block) + .parent:not(.block)
 		margin-left 16px
 
 	label
@@ -217,7 +217,7 @@
 				@media (prefers-color-scheme dark)
 					background #202020
 
-			&:hover
+			&:hover:not(:disabled)
 				background rgba(gray, .2)
 
 				@media (prefers-color-scheme dark)

src/dzeio/Link/Link.module.styl

@@ -1,9 +1,9 @@
 @import '../config'
 
 .link
-	color $infoLight
-	@media (prefers-color-scheme dark)
 	color $infoDark
+	@media (prefers-color-scheme dark)
+		color $infoLight
 	&:hover
 		text-decoration underline
 

src/dzeio/Link/index.tsx

@@ -6,9 +6,15 @@ import css from './Link.module.styl'
 import { buildClassName } from '../Util'
 
 interface Props {
+	linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
 	href: string
 	children?: React.ReactNode
 	className?: string
+	/**
+	 * Remove styling
+	 */
+	noStyle?: boolean
+
 	/**
 	 * Override external detection system
 	 */
@@ -18,12 +24,13 @@ interface Props {
 export default class Link extends React.Component<Props> {
 
 	public render() {
-		const external = this.props.external ?? !this.props.href.startsWith('/')
+		const external = this.props.external ?? this.props.href.startsWith('http')
 		if (external) {
 			// external link
 			return (
 				<a
-					className={buildClassName(this.props.className, css.link)}
+					{...this.props.linkProps}
+					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
 					href={this.props.href}
 					rel="noreferrer nofollow"
 					target="_blank"
@@ -35,7 +42,8 @@ export default class Link extends React.Component<Props> {
 		return (
 			<NextLink href={this.props.href}>
 				<a
-					className={buildClassName(this.props.className, css.link)}
+					{...this.props.linkProps}
+					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
 				>{this.props.children}</a>
 			</NextLink>
 		)

src/dzeio/Loader/Loader.module.styl

@@ -6,6 +6,7 @@
 	width 100%
 	height 7px
 	pointer-events none
+	z-index 200
 
 	top 0
 	&.hide

src/dzeio/Loader/index.tsx

@@ -4,9 +4,22 @@ import { buildClassName } from '../Util'
 import css from './Loader.module.styl'
 
 interface Props {
+	/**
+	 * The new Percentage (if you calculate it yourself)
+	 */
 	percent?: number
+
+	/**
+	 * Auto random loader
+	 */
 	auto?: {
+		/**
+		 * the minimum and maximum interval between two increment
+		 */
 		interval: [number, number]
+		/**
+		 * the minimum and maximum incrementation (MUST be an integer)
+		 */
 		increment: [number, number]
 	}
 }
@@ -15,6 +28,11 @@ interface State {
 	percent?: number
 }
 
+/**
+ * Display a simple loading animation at the top of the page
+ * 
+ * @version 1.0.0
+ */
 export default class Loader extends React.Component<Props, State> {
 
 	public state: State = {}

src/dzeio/Navbar/Navbar.module.styl

@@ -1,49 +1,231 @@
-@import "../config"
+@import '../config'
+
+// $transition = 10s linear
+// $transitionTime = 10s
+// $transitionFunction = linear
+.body-sidebar
+		margin-left 300px
+		transition margin-left $transition
+		&.short
+			margin-left 56px
+
+.body-navbar
+		margin-top 70px
 
 .navbar
-	width 100%
-	height 70px
-	padding 16px
-	position absolute
-	top 0
+	background $foregroundLight
+	@media (prefers-color-scheme dark)
+		background $foregroundDark
+	position fixed
 	left 0
-	border-bottom 1px solid white
-
-	&.small
-		padding-left 216px
-
-.alignRight
-	text-align right
-
-.favicon img
-	height 38px
-	border-radius 8px
-	border 2px solid white
-	padding 2px
-	background white
-	width 38px
-
-.userIcon img
-	padding 0
-	cursor pointer
-
-.text
-	display inline-block
-	margin 0
-	height 38px
-	line-height 1
-	font-weight bold
-	font-size rem(20)
-	padding 7px 0 11px 16px
-	text-decoration none
-	color white
-	cursor pointer
-
-.spacer
+	top 0
 	height 70px
+	width 100%
+	z-index 100
+	display flex
+	padding 16px
 
-.icon
-	padding 7px 16px
-	color white
-	box-sizing content-box
+	> ul, .userSpaceParent ul
+		display flex
+
+		li:first-child p
+			margin-left 0
+
+	> ul p, .userSpaceParent > ul p
+		padding 8px
+
+		margin-left 16px
+		border-radius 4px
+
+		&.active
+			background $mainGradient
+			color $textOnMain
+
+	.userSpace
+
+		height 100%
+		display flex
+		align-items center
 		cursor pointer
+		user-select none
+		svg
+			margin-left 16px
+			vertical-align top
+
+	.userMenu
+		position fixed
+		top 70px
+		right 0
+		padding 16px
+		border-bottom-left-radius 4px
+		transform translateX(100%)
+		background inherit
+		transition transform $transition
+		&.menuActive
+			transform translateX(0%)
+
+
+.sidebar
+	background $foregroundLight
+	@media (prefers-color-scheme dark)
+		background $foregroundDark
+	position fixed
+	left 0
+	top 0
+	height 100vh
+	width 300px
+	z-index 100
+	display flex
+	flex-direction column
+
+	&.mobile
+		width 100%
+		z-index 101
+
+	&
+		transition width $transition
+	.header
+	.userSpace
+	.header .imgContainer
+	> ul span
+		// transition all $transition
+		transition-property width, padding, margin, max-width
+		transition-duration $transitionTime
+		transition-timing-function $transitionFunction
+		overflow hidden
+	> ul span
+		width calc(100% - 40px)
+		max-width 100%
+	.header p
+		cursor pointer
+
+	.userSpaceParent
+		background $backgroundLight
+		@media (prefers-color-scheme dark)
+			background $backgroundDark
+
+		> ul, .userSpaceParent ul
+				display flex
+				padding 16px
+				justify-content center
+
+				li:first-child p
+					margin-left 0
+
+			> ul p, .userSpaceParent > ul p
+				padding 8px
+
+				margin-left 16px
+				border-radius 4px
+
+				&.active
+					background $mainGradient
+					color $textOnMain
+
+	.userSpace
+		cursor pointer
+		user-select none
+		padding 16px
+		width 100%
+		max-width 100%
+		min-height 86px
+		p
+			overflow hidden
+			white-space nowrap
+		p:last-child:not(:first-child)
+			margin-top 8px
+			font-style italic
+			font-size rem(14)
+
+		p:first-child
+			font-weight 500
+			svg
+				vertical-align top
+				transition transform $transition
+				&.menuActive
+					transform rotateX(180deg)
+
+	.userMenu
+		max-height 0px
+		transition all $transition
+
+		&.menuActive
+			// TODO find better way to animate this shit
+			max-height 100%
+
+	&.short
+		width 56px
+		.header > div
+			padding 0
+		.header .imgContainer
+		.userSpace
+		> ul span
+			width 0
+			padding-left 0
+			padding-right 0
+			margin 0
+			max-width 0
+
+
+	.header
+		min-height 70px
+		padding 0
+		margin 0
+		> div p > div
+		> div:first-child
+			padding 16px
+		> div:last-child
+			padding 0
+
+	hr
+		margin 0
+
+	> ul li
+			width 100%
+			p
+				padding 16px 0
+				display flex
+				align-items center
+				z-index 111
+				position relative
+
+				// Temporary fix the transition for linear-gradient
+				&::before
+					transition opacity $transition
+					opacity 0
+					width 100%
+					height 100%
+					content " "
+					position absolute
+					z-index -1
+					background-image $mainGradient
+				&:hover
+				&.active
+					color $textOnMain
+					&::before
+						opacity 1
+				svg
+					margin-left 16px
+				span
+					padding-left 16px
+					height inherit
+
+.navbar, .sidebar
+	ul
+		list-style none
+		margin 0
+		padding 0
+
+.userMenu a
+			padding 16px 0
+
+
+.mobileMenu
+	opacity 0
+	transition opacity $transition
+	&.shown
+		opacity 1
+
+.mainGradient
+	//WIP
+	fill $mainGradient

src/dzeio/Navbar/Navbar.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react/types-6-0'
+import { Meta, Story } from '@storybook/react/types-6-0'
 import React from 'react'
 import Component from '.'
 
@@ -7,4 +7,24 @@ export default {
 	component: Component
 } as Meta
 
-export const Basic = (args: any) => <Component {...args} />
+export const Basic: Story<any> = (args: any) => <Component {...args} />
+Basic.args = {
+	items: [{
+		path: '/dashboard',
+		name: 'Dasboard'
+	}],
+	loginUrl: '/login',
+	registerUrl: '/register',
+	type: 'navbar',
+	user: {
+		name: 'Username',
+		description: 'User Description',
+		menu: {
+			links: [{
+				path: '/logout',
+				name: 'Logout'
+			}]
+		}
+	},
+	logo: {src: '/90-38.svg', width: 90, height: 38}
+}

src/dzeio/Navbar/NavbarSpace.tsx

@@ -1,11 +0,0 @@
-import React from 'react'
-
-import css from './Navbar.module.styl'
-
-export default class NavbarSpace extends React.Component {
-
-	public render = () => (
-		<div className={css.spacer}></div>
-	)
-
-}

src/dzeio/Navbar/index.tsx

@@ -1,48 +1,273 @@
-import React from 'react'
-import Link from 'next/link'
-import Row from '../Row'
+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 Text from '../Text'
 import Col from '../Col'
-import Image from '../Image'
+import Row from '../Row'
+import Link from '../Link'
+import { buildClassName } from '../Util'
+
 import css from './Navbar.module.styl'
 
-
 interface Props {
-	logo?: {
-		link?: string
-		label?: string
-		src: string
-		alt?: string
+	/**
+	 * Type of Navbar
+	 * _note: when in mobile it is not listened_
+	 */
+	type: 'navbar' | 'sidebar'
+
+	/**
+	 * Logo to display
+	 */
+	logo?: ImageProps & {height: number, width: number}
+	/**
+	 * Login URL
+	 */
+	loginUrl?: string
+	/**
+	 * Login URL
+	 */
+	registerUrl?: string
+	/**
+	 * User Informations if loggedin
+	 */
+	user?: {
+		/**
+		 * Username
+		 */
+		name: string
+		/**
+		 * User Short description
+		 */
+		description?: string
+		/**
+		 * User Menu
+		 */
+		menu?: {
+			/**
+			 * Menu links
+			 */
+			links: Array<{
+				path: string
+				name: string
+			}>
+			/**
+			 * Custom informations shown next to the links
+			 */
+			informations?: JSX.Element
 		}
+	}
+	/**
+	 * Links to display
+	 */
+	items: Array<{
+		path: string
+		icon?: FC
+		name: string
+	}>
+	/**
+	 * Internal Use don't use it !
+	 */
+	mobileMenu?: () => void
 }
 
-export default class Navbar extends React.Component<Props> {
+interface State {
+	path?: string
+	short: boolean
+	isMobile: boolean
+	menuActive: boolean
+}
+
+/**
+ * Navbar/Sidebar Component
+ * @version 1.0.2
+ */
+export default class Navbar extends React.Component<Props, State> {
+
+	public state: State = {
+		short: false,
+		isMobile: false,
+		menuActive: false
+	}
+
+	public componentDidMount() {
+		this.setState({
+			path: Router.asPath,
+			menuActive: !!this.props.mobileMenu
+		})
+		Router.events.on('routeChangeComplete', () => {
+			this.setState({path: Router.asPath, menuActive: false})
+		})
+		Router.events.on('routeChangeError', () => {
+			this.setState({path: Router.asPath, menuActive: false})
+		})
+		if (!this.props.mobileMenu) {
+			window.addEventListener('resize', this.onResize)
+			this.onResize()
+		}
+	}
+
+	public onResize = () => {
+		const isMobile = window.innerWidth <= 768
+		if (this.state.isMobile !== isMobile) {
+			this.setState({isMobile})
+		}
+	}
+
+	public componentDidUpdate() {
+		if (!this.props.mobileMenu) {
+			if (this.state.short) {
+				document.body.classList.add(css.short)
+			} else {
+				document.body.classList.remove(css.short)
+			}
+			if (this.getType() === 'sidebar') {
+				document.body.classList.add(css['body-sidebar'])
+				document.body.classList.remove(css['body-navbar'])
+			} else {
+				document.body.classList.remove(css['body-sidebar'])
+				document.body.classList.add(css['body-navbar'])
+			}
+		}
+
+	}
+
+	public componentWillUnmount() {
+		if (!this.props.mobileMenu) {
+			document.body.classList.remove(css.short, css[`body-${this.getType()}`])
+			window.removeEventListener('resize', this.onResize)
+		}
+	}
+
+	public onSidebarButton = () => {
+		if (!this.props.mobileMenu) {
+			this.setState({short: !this.state.short, menuActive: false})
+		} else {
+			this.props.mobileMenu()
+		}
+	}
+
+	public menuCloseCallback = () => {
+		this.setState({menuActive: false})
+	}
+
+	public getType(): 'sidebar' | 'navbar' {
+		if (this.props.mobileMenu) {
+			return 'sidebar'
+		}
+		return this.state.isMobile ? 'navbar' : this.props.type
+	}
 
 	public render = () => (
-		<nav className={css.navbar}>
-			<Row nomargin>
+		<>
+			<nav className={buildClassName(css[this.getType()], [css.short, this.state.short && !this.props.mobileMenu], [css.mobile, this.props.mobileMenu])}>
+				<Row nowrap className={css.header} align="center">
 					{this.props.logo && (
-					<Col>
-						<Row align="center">
-							<Link href={this.props.logo.link || '/'}>
-								<a aria-label={this.props.logo.label || 'Homepage'}>
-									<Image
-										alt={this.props.logo.alt}
-										src={this.props.logo.src}
-										height={38}
-										width={120}
-									/>
-								</a>
+						<Col className={css.imgContainer}>
+							<Link href="/">
+								<Image {...this.props.logo} height={34} width={this.props.logo.width*34/this.props.logo.height} />
 							</Link>
-						</Row>
 						</Col>
 					)}
-
-				<Col>
-					<Row justify="flex-end" align="center">
-						{this.props.children}
+					{this.getType() === 'sidebar' && (
+						<Col nogrow><Text><div onClick={this.onSidebarButton}>
+							{this.state.short ? (
+								<ChevronsRight size={30} />
+							) : (
+								<X size={30} />
+							)}
+						</div></Text></Col>
+					)}
 				</Row>
+				{this.getType() === 'sidebar' && (
+					<hr/>
+				)}
+				<ul>
+					{!this.state.isMobile && this.props.items.map((item) => (
+						<li key={item.path}><Link noStyle href={item.path}><a>
+							<Text className={buildClassName([css.active, this.state.path?.startsWith(item.path)])}>
+								{this.getType() === 'sidebar' && item.icon && (
+									<item.icon />
+								)}
+								<span>{item.name}</span>
+							</Text>
+						</a></Link></li>
+					))}
+				</ul>
+				<div style={{flex: 1}}></div>
+				{/* Spacer */}
+				{this.state.isMobile && (
+					<div className={css.userSpaceParent}>
+						<div onClick={() => this.setState({menuActive: !this.state.menuActive})} className={css.userSpace}>
+							<Text>
+								<Menu size={38} className={css.mainGradient} />
+							</Text>
+						</div>
+					</div>
+				)}
+				{!this.state.isMobile && this.props.user ? (
+					<>
+						<div className={css.userSpaceParent}>
+							{this.getType() === 'sidebar' && (
+								<hr/>
+							)}
+							<div onClick={() => this.setState({menuActive: !this.state.menuActive})} className={css.userSpace}>
+								<Text>
+									{this.props.user.name}
+									<ChevronDown className={buildClassName([css.menuActive, this.state.menuActive])} />
+								</Text>
+								{this.getType() === 'sidebar' && this.props.user.description && (
+									<Text>{this.props.user.description}</Text>
+								)}
+							</div>
+						</div>
+						<div className={buildClassName(css.userMenu, [css.menuActive, !this.state.isMobile && this.state.menuActive])}>
+							<Row nomargin={this.getType() === 'navbar'}>
+								{this.props.user.menu?.informations && (
+									<Col>{this.props.user.menu?.informations}</Col>
+								)}
+								<Col>
+									<ul>
+										{this.props.user.menu?.links.map((l) => (
+											<li key={l.path}><Text><Link noStyle href={l.path}>{l.name}</Link></Text></li>
+										))}
+									</ul>
 								</Col>
 							</Row>
+						</div>
+					</>
+				) : !this.state.isMobile ? (
+					<div className={css.userSpaceParent}>
+						{this.getType() === 'sidebar' && (
+							<hr/>
+						)}
+						<ul>
+							{this.props.registerUrl && (
+								<li><Link noStyle href={this.props.registerUrl}><a>
+									<Text className={buildClassName(css.active)}>
+										<span>Register</span>
+									</Text>
+								</a></Link></li>
+							)}
+							{this.props.loginUrl && (
+								<li><Link noStyle href={this.props.loginUrl}><a>
+									<Text>
+										<span>Login</span>
+									</Text>
+								</a></Link></li>
+							)}
+						</ul>
+					</div>
+				) : undefined}
 			</nav>
+
+			{!this.props.mobileMenu && this.state.isMobile && (
+				<div className={buildClassName(css.mobileMenu, [css.shown, this.state.menuActive])}>
+					<Navbar {...this.props} type="sidebar" mobileMenu={this.menuCloseCallback} />
+				</div>
+			)}
+		</>
 	)
 }

src/dzeio/Row/Row.module.styl

@@ -3,14 +3,12 @@
 .row
 	display flex
 	flex-wrap wrap
-
-	&:not(.nomargin)
-		margin (0 - $gapSize) 0 0
-		padding 0 $gapSize * 2 0 $gapSize
-
-		.row:not(.nomargin)
-			padding 0
 	margin (0 - $gapSize) 0 0 (0 - $gapSize)
+	padding $gapSize
+
+	&.nomargin
+	.row
+		padding 0
 
 .nowrap
 	flex-wrap nowrap

src/dzeio/SidebarContainer/SidebarContainer.module.styl

@@ -1,32 +0,0 @@
-@import "../config.styl"
-
-.sidebar
-	position fixed
-	width 200px
-	top 0
-	left 0
-	height 100%
-	background white
-	padding 16px
-
-.content
-	padding-left 200px
-
-.item
-	display flex
-	padding 8px 16px
-	margin-top 8px
-	transition $transition
-	border-radius 8px
-
-	svg
-		margin-right 8px
-
-	div
-		text-align center
-		flex-grow 1
-		margin-left -32px
-
-	&:hover
-		background $default
-		color white

src/dzeio/SidebarContainer/index.tsx

@@ -1,45 +0,0 @@
-import React, { FC } from 'react'
-
-import { ChevronLeft, TrendingUp } from 'react-feather'
-import Link from 'next/link'
-import Image from '../Image'
-
-import { IconProps } from '../interfaces'
-import css from './SidebarContainer.module.styl'
-
-interface Props {
-	domain: string
-	children: React.ReactNode
-}
-
-export default class SidebarContainer extends React.Component<Props> {
-
-	private menu: Array<{name: string, icon: FC<IconProps>, href: string, as?: string}> = [
-		{ name: 'back', icon: ChevronLeft, href: '/dashboard' },
-		{ name: 'Uptime', icon: TrendingUp, as: `/dashboard/${this.props.domain}/uptime`, href: '/dashboard/[domain]/uptime' }
-
-	]
-	public render = () => (
-		<>
-			<nav className={css.sidebar}>
-				<Link href="/dashboard">
-					<a>
-						<Image src="/assets/logo.svg" width={175} height={100} />
-					</a>
-				</Link>
-				{this.menu.map((item, index) => (
-					<Link key={index} href={item.href} as={item.as}>
-						<a className={css.item}>
-							<item.icon />
-							<div>{item.name}</div>
-						</a>
-					</Link>
-				))}
-			</nav>
-			<div className={css.content}>
-				{this.props.children}
-			</div>
-		</>
-	)
-
-}

src/dzeio/Text/index.tsx

@@ -12,7 +12,6 @@ interface Props {
 
 export default class Text extends React.Component<Props> {
 
-
 	public render() {
 		const classes = buildClassName(
 			css.text,
@@ -23,16 +22,10 @@ export default class Text extends React.Component<Props> {
 			this.props.className
 		)
 
-		switch (this.props.type || 'p') {
-		case 'h1': return (<h1 className={classes}>{this.props.children}</h1>)
-		case 'h2': return (<h2 className={classes}>{this.props.children}</h2>)
-		case 'h3': return (<h3 className={classes}>{this.props.children}</h3>)
-		case 'h4': return (<h4 className={classes}>{this.props.children}</h4>)
-		case 'h5': return (<h5 className={classes}>{this.props.children}</h5>)
-		case 'h6': return (<h6 className={classes}>{this.props.children}</h6>)
-		case 'em': return (<p className={classes}><em>{this.props.children}</em></p>)
-		case 'span': return (<span className={classes}>{this.props.children}</span>)
-		default: return (<p className={classes}>{this.props.children}</p>)
+		if (this.props.type === 'em') {
+			return (<p className={classes}><em>{this.props.children}</em></p>)
 		}
+
+		return React.createElement(this.props.type || 'p', {className: classes, children: this.props.children})
 	}
 }

src/dzeio/config.styl

@@ -52,3 +52,9 @@ $success = $successLight
 $danger = $errorLight
 $warning = $warningLight
 $darkBackground = $backgroundDark
+
+
+// See https://github.com/stylus/stylus/issues/1872#issuecomment-86553717
+use('stylusUtils.js')
+
+@import '../../../../../../theme' if file-exists('../../../../../../theme.styl')

src/dzeio/interfaces.ts

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

src/dzeio/stylusUtils.js

@@ -0,0 +1,11 @@
+
+// See https://github.com/stylus/stylus/issues/1872#issuecomment-86553717
+var stylus = require('stylus');
+
+module.exports = function() {
+	return function(style) {
+		style.define('file-exists', function(path) {
+		return !!stylus.utils.lookup(path.string, this.paths);
+		});
+	};
+};

src/index.ts

@@ -1,4 +1,12 @@
-import Box, { BoxBody, BoxHeader, BoxWrapper } from './dzeio/Box'
+/**
+ * Copyright (c) 2021
+ *
+ * @summary DZEIO Component Library
+ */
+
+import './dzeio/general.styl'
+
+import Box from './dzeio/Box'
 import Button from './dzeio/Button'
 import Checkbox from './dzeio/Checkbox'
 import Code from './dzeio/Code'
@@ -13,22 +21,15 @@ import Link from './dzeio/Link'
 import Loader from './dzeio/Loader'
 import Menu from './dzeio/Menu'
 import Navbar from './dzeio/Navbar'
-import NavbarSpace from './dzeio/Navbar/NavbarSpace'
 import Overflow from './dzeio/Overflow'
 import Popup from './dzeio/Popup'
 import Row from './dzeio/Row'
-import SidebarContainer from './dzeio/SidebarContainer'
 import Table from './dzeio/Table'
 import Text from './dzeio/Text'
 import * as Util from './dzeio/Util'
 
-import './dzeio/general.styl'
-
 export {
 	Box,
-	BoxBody,
-	BoxHeader,
-	BoxWrapper,
 	Button,
 	Checkbox,
 	Code,
@@ -43,11 +44,9 @@ export {
 	Loader,
 	Menu,
 	Navbar,
-	NavbarSpace,
 	Overflow,
 	Popup,
 	Row,
-	SidebarContainer,
 	Table,
 	Text,
 	Util

tsconfig.json

@@ -11,13 +11,13 @@
 		// "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
 		// "sourceMap": true,                     /* Generates corresponding '.map' file. */
 		// "outFile": "./",                       /* Concatenate and emit output to single file. */
-		"declarationDir": "./module",
+		"declarationDir": "types",
 		// "outDir": "./dist",                        /* Redirect output structure to the directory. */
 		// "rootDir": "./src",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
 		// "composite": true,                     /* Enable project compilation */
 		// "removeComments": true,                /* Do not emit comments to output. */
 		// "noEmit": true,                        /* Do not emit outputs. */
-		// "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+		"importHelpers": false,                 /* Import emit helpers from 'tslib'. */
 		// "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
 		// "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
 
@@ -65,6 +65,6 @@
 	"exclude": [
 		"node_modules",
 		"build",
-		"*.stories.tsx"
+		"src/**/*.stories.tsx"
 	]
 }