v0.6.1

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

.gitignore

@@ -4,6 +4,8 @@ node_modules/
 *.js
 !src/dzeio/stylusUtils.js
 *.d.ts
+types/
+!rollup.config.js
 !src/stylus.d.ts
 !.storybook/*.js
 style.css

.npmignore

@@ -4,7 +4,6 @@ node_modules/
 .gitattributes
 .gitignore
 .npmignore
-rollup.config.js
 tsconfig.json
 yarn.lock
 yarn-error.log

package.json

@@ -1,9 +1,9 @@
 {
 	"name": "@dzeio/components",
-	"version": "0.5.3",
+	"version": "0.6.1",
 	"license": "MIT",
-	"main": "./src/index.mjs",
-	"types": "./src/index.d.ts",
+	"main": "./index.mjs",
+	"types": "./types/index.d.ts",
 	"devDependencies": {
 		"@babel/core": "^7.12.16",
 		"@babel/preset-env": "^7.12.16",
@@ -21,10 +21,8 @@
 		"react-dom": "^17.0.1",
 		"react-feather": "^2.0.9",
 		"style-loader": "^2.0.0",
-		"stylus": "^0.54.8",
 		"stylus-loader": "^4.3.3",
 		"ts-loader": "^8.0.17",
-		"typescript": "^4.1.3",
 		"webpack": "^4.44.2"
 	},
 	"peerDependencies": {
@@ -34,8 +32,16 @@
 		"react-feather": "^2.0.9"
 	},
 	"scripts": {
-		"storybook": "rm -rf src/dzeio/**/*.js && start-storybook -p 6006",
-		"build": "tsc && mv src/index.js src/index.mjs",
-		"prepublishOnly": "yarn build"
+		"dev": "rm -rf src/dzeio/**/*.js && start-storybook -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",
+		"stylus": "^0.54.8",
+		"typescript": "^4.2.3"
 	}
 }

rollup.config.js

@@ -0,0 +1,27 @@
+import typescript from 'rollup-plugin-typescript2';
+import styles from 'rollup-plugin-styles'
+import pkg from './package.json';
+
+export default [
+	{
+		input: 'src/index.ts',
+		external: ['ms'],
+		plugins: [
+			styles({
+				modules: true,
+				url: false,
+				autoModules: true,
+				mode: 'extract',
+
+			}),
+			typescript({useTsconfigDeclarationDir: true}), // so Rollup can convert TypeScript to JavaScript
+		],
+		output: [
+			{
+				file: pkg.main,
+				format: 'es',
+				assetFileNames: 'style.css'
+			}
+		]
+	}
+];

src/dzeio/Loader/Loader.module.styl

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

src/dzeio/Navbar/Navbar.module.styl

@@ -1,68 +1,11 @@
 @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
-	background $foregroundLight
-	@media (prefers-color-scheme dark)
-		background $foregroundDark
-	position fixed
-	left 0
-	top 0
-	height 70px
-	width 100%
-	z-index 100
-	display flex
-	padding 16px
-
-	> 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
-
-	.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%)
+.body
+	margin-left 300px
+	transition margin-left $transition
 
+	&.short
+		margin-left 56px
 
 .sidebar
 	background $foregroundLight
@@ -76,11 +19,6 @@
 	z-index 100
 	display flex
 	flex-direction column
-
-	&.mobile
-		width 100%
-		z-index 101
-
 	&
 		transition width $transition
 	.header
@@ -95,41 +33,21 @@
 	> 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
-
 	.userSpace
 		cursor pointer
 		user-select none
 		padding 16px
 		width 100%
 		max-width 100%
-		min-height 86px
+		min-height 56px
 		p
 			overflow hidden
-			white-space nowrap
 		p:last-child:not(:first-child)
 			margin-top 8px
 			font-style italic
@@ -147,6 +65,11 @@
 		max-height 0px
 		transition all $transition
 
+		ul
+			padding-bottom 16px
+			a
+				padding 16px 0
+
 		&.menuActive
 			// TODO find better way to animate this shit
 			max-height 100%
@@ -159,72 +82,43 @@
 		.userSpace
 		> ul span
 			width 0
-			padding-left 0
-			padding-right 0
+			padding 0
 			margin 0
 			max-width 0
 
-
 	.header
 		min-height 70px
 		> div
 			padding 0
 			&:first-child
-				padding-left 16px
+				padding 16px
 		p > div
 			padding 16px
 
 	hr
 		margin 0
 
+	ul
+		list-style none
+		margin 0
+		padding 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
+				// TODO Currently Gradient aren't supported by Transition
+				// transition-property background-image, color
+				// transition-duration $transitionTime
+				// transition-timing-function $transitionFunction
 				&:hover
 				&.active
+					background-image $mainGradient
 					color white
-					&::before
-						opacity 1
 				svg
 					margin-left 16px
 				span
 					padding-left 16px
 					height inherit
-
-.navbar, .sidebar
-	ul
-		list-style none
-		margin 0
-		padding 0
-
-.userMenu
-		padding-bottom 16px
-		a
-			padding 16px 0
-
-
-.mobileMenu
-	opacity 0
-	transition opacity $transition
-	&.shown
-		opacity 1
-
-.mainGradient
-	//WIP
-	fill $mainGradient

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, X } from 'react-feather'
 import Text from '../Text'
 import Col from '../Col'
 import Row from '../Row'
@@ -13,9 +13,7 @@ import css from './Navbar.module.styl'
 
 interface Props {
 	type: 'navbar' | 'sidebar'
-	logo: ImageProps & {height: number, width: number}
-	loginUrl?: string
-	registerUrl?: string
+	logo: ImageProps
 	user?: {
 		name: string
 		description?: string
@@ -33,13 +31,11 @@ interface Props {
 		icon: FC
 		name: string
 	}>
-	mobileMenu?: () => void
 }
 
 interface State {
 	path?: string
 	short: boolean
-	isMobile: boolean
 	menuActive: boolean
 }
 
@@ -47,182 +43,86 @@ 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
-		})
+		this.setState({path: Router.asPath})
 		Router.events.on('routeChangeComplete', () => {
-			this.setState({path: Router.asPath, menuActive: false})
+			this.setState({path: Router.asPath})
 		})
-		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})
+		document.body.classList.add(css.body)
+		if (this.state.short) {
+			document.body.classList.add(css.short)
 		}
 	}
 
 	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'])
-			}
-		}
+		if (this.state.short) {
+			document.body.classList.add(css.short)
+		} else {
+			document.body.classList.remove(css.short)
 
+		}
 	}
 
 	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
+		document.body.classList.remove(css.body, css.short)
 	}
 
 	public render = () => (
-		<>
-			<nav className={buildClassName(css[this.getType()], [css.short, this.state.short && !this.props.mobileMenu], [css.mobile, this.props.mobileMenu])}>
-				<Row nowrap nomargin={this.getType() === 'sidebar'} className={css.header} align="center">
-					<Col className={css.imgContainer}><Link href="/"><Image {...this.props.logo} height={34} width={this.props.logo.width*34/this.props.logo.height} /></Link></Col>
-					{this.getType() === 'sidebar' && (
-						<Col nogrow><Text><div onClick={this.onSidebarButton}>
-							{this.state.short ? (
-								<ChevronsRight size={30} />
-							) : (
-								<X size={30} />
-							)}
-						</div></Text></Col>
+		<nav className={buildClassName(css.sidebar, [css.short, this.state.short])}>
+			<Row nomargin className={css.header} align="center">
+				<Col className={css.imgContainer}><Link href="/"><Image {...this.props.logo} /></Link></Col>
+				<Col nogrow><Text><div onClick={() => this.setState({short: !this.state.short, menuActive: false})}>
+					{this.state.short ? (
+						<ChevronsRight size={30} />
+					) : (
+						<X size={30} />
 					)}
-				</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 />
-								)}
-								<span>{item.name}</span>
-							</Text>
-						</a></Link></li>
-					))}
-				</ul>
-				<div style={{flex: 1}}></div>
-				{/* Spacer */}
-				{this.state.isMobile && (
+				</div></Text></Col>
+			</Row>
+			<hr/>
+			<ul>
+				{this.props.items.map((item) => (
+					<li key={item.path}><Link href={item.path}><a>
+						<Text className={buildClassName([css.active, this.state.path?.startsWith(item.path)])} >
+							<item.icon />
+							<span>{item.name}</span>
+						</Text>
+					</a></Link></li>
+				))}
+			</ul>
+			<div style={{flex: 1}}></div>
+			{/* Spacer */}
+			{this.props.user && (
+				<>
 					<div className={css.userSpaceParent}>
+						<hr/>
 						<div onClick={() => this.setState({menuActive: !this.state.menuActive})} className={css.userSpace}>
 							<Text>
-								<Menu size={38} className={css.mainGradient} />
-								{/* {this.props.user.name} */}
-								{/* <ChevronDown className={buildClassName([css.menuActive, this.state.menuActive])} /> */}
+								{this.props.user.name}
+								<ChevronDown className={buildClassName([css.menuActive, this.state.menuActive])} />
 							</Text>
+							{this.props.user.description && (
+								<Text>{this.props.user.description}</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.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 className={buildClassName(css.userMenu, [css.menuActive, this.state.menuActive])}>
+						<Row nomargin>
+							<Col></Col>
+							<Col>
+								<ul>
+									{this.props.user.menu?.links.map((l) => (
+										<li key={l.path}><Text><Link href={l.path}>{l.name}</Link></Text></li>
+									))}
+								</ul>
+							</Col>
+						</Row>
 					</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>
+				</>
 			)}
-		</>
+		</nav>
 	)
 }

src/index.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2021
+ *
+ * @summary DZEIO Component Library
+ */
+
 import Box from './dzeio/Box'
 import Button from './dzeio/Button'
 import Checkbox from './dzeio/Checkbox'

tsconfig.json

@@ -11,7 +11,7 @@
 		// "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": "src",
+		"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 */