v0.5.0

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

.gitignore

@@ -1,6 +1,9 @@
 module/
 node_modules/
+*.mjs
 *.js
+*.d.ts
+!src/stylus.d.ts
 !.storybook/*.js
 style.css
 yarn-error.log

.npmignore

@@ -1,6 +1,6 @@
 .storybook/
 node_modules/
-src/
+*.stories.js
 .gitattributes
 .gitignore
 .npmignore

.storybook/main.js

@@ -2,7 +2,7 @@ const path = require("path");
 
 module.exports = {
 	"stories": [
-		"../src/dzeio/**/*.stories.@(js|jsx|ts|tsx)",
+		"../src/dzeio/**/*.stories.@(ts|tsx)",
 	],
 	"addons": [
 		"@storybook/addon-essentials"

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "@dzeio/components",
-	"version": "0.4.1",
+	"version": "0.5.0",
 	"license": "MIT",
-	"main": "./src/index.js",
+	"main": "./src/index.mjs",
 	"types": "./src/index.d.ts",
 	"devDependencies": {
 		"@babel/core": "^7.12.16",
@@ -20,9 +20,6 @@
 		"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",
@@ -38,8 +35,7 @@
 	},
 	"scripts": {
 		"storybook": "rm -rf src/dzeio/**/*.js && start-storybook -p 6006",
-		"build-storybook": "build-storybook",
-		"build": "tsc",
+		"build": "tsc && mv src/index.js src/index.mjs",
 		"prepublishOnly": "yarn build"
 	}
 }

rollup.config.js

@@ -1,32 +0,0 @@
-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: [
-			{
-				dir: './',
-				format: 'cjs',
-				assetFileNames: 'style.css'
-			},
-			{
-				file: pkg.module,
-				format: 'es',
-				assetFileNames: 'style.css'
-			}
-		]
-	}
-];

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/Navbar/Navbar.module.styl

@@ -1,49 +1,124 @@
-@import "../config"
+@import '../config'
 
-.navbar
-	width 100%
-	height 70px
-	padding 16px
-	position absolute
-	top 0
+.body
+	margin-left 300px
+	transition margin-left $transition
+
+	&.short
+		margin-left 56px
+
+.sidebar
+	background $foregroundLight
+	@media (prefers-color-scheme dark)
+		background $foregroundDark
+	position fixed
 	left 0
-	border-bottom 1px solid white
+	top 0
+	height 100vh
+	width 300px
+	z-index 100
+	display flex
+	flex-direction column
+	&
+		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%
 
-	&.small
-		padding-left 216px
+	.userSpaceParent
+		background $backgroundLight
+		@media (prefers-color-scheme dark)
+			background $backgroundDark
 
-.alignRight
-	text-align right
+	.userSpace
+		cursor pointer
+		user-select none
+		padding 16px
+		width 100%
+		max-width 100%
+		min-height 56px
+		p
+			overflow hidden
+		p:last-child:not(:first-child)
+			margin-top 8px
+			font-style italic
+			font-size rem(14)
 
-.favicon img
-	height 38px
-	border-radius 8px
-	border 2px solid white
-	padding 2px
-	background white
-	width 38px
+		p:first-child
+			font-weight 500
+			svg
+				vertical-align top
+				transition transform $transition
+				&.menuActive
+					transform rotateX(180deg)
 
-.userIcon img
-	padding 0
-	cursor pointer
+	.userMenu
+		max-height 0px
+		transition all $transition
 
-.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
+		ul
+			padding-bottom 16px
+			a
+				padding 16px 0
 
-.spacer
-	height 70px
+		&.menuActive
+			// TODO find better way to animate this shit
+			max-height 100%
 
-.icon
-	padding 7px 16px
-	color white
-	box-sizing content-box
-	cursor pointer
+	&.short
+		width 56px
+		.header > div
+			padding 0
+		.header .imgContainer
+		.userSpace
+		> ul span
+			width 0
+			padding 0
+			margin 0
+			max-width 0
+
+	.header
+		min-height 70px
+		> div
+			padding 0
+			&:first-child
+				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
+				// 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
+				svg
+					margin-left 16px
+				span
+					padding-left 16px
+					height inherit

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,128 @@
-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, 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: 'navbar' | 'sidebar'
+	logo: ImageProps
+	user?: {
+		name: string
+		description?: string
+		settings?: string
+		menu?: {
+			links: Array<{
+				path: string
+				name: string
+			}>
+			informations?: JSX.Element
+		}
 	}
+	items: Array<{
+		path: string
+		icon: FC
+		name: string
+	}>
 }
 
-export default class Navbar extends React.Component<Props> {
+interface State {
+	path?: string
+	short: boolean
+	menuActive: boolean
+}
+
+export default class Navbar extends React.Component<Props, State> {
+
+	public state: State = {
+		short: false,
+		menuActive: false
+	}
+
+	public componentDidMount() {
+		this.setState({path: Router.asPath})
+		Router.events.on('routeChangeComplete', () => {
+			this.setState({path: Router.asPath})
+		})
+		document.body.classList.add(css.body)
+		if (this.state.short) {
+			document.body.classList.add(css.short)
+		}
+	}
+
+	public componentDidUpdate() {
+		if (this.state.short) {
+			document.body.classList.add(css.short)
+		} else {
+			document.body.classList.remove(css.short)
+
+		}
+	}
+
+	public componentWillUnmount() {
+		document.body.classList.remove(css.body, css.short)
+	}
 
 	public render = () => (
-		<nav className={css.navbar}>
-			<Row nomargin>
-				{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>
-							</Link>
-						</Row>
-					</Col>
-				)}
-
-				<Col>
-					<Row justify="flex-end" align="center">
-						{this.props.children}
-					</Row>
-				</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} />
+					)}
+				</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>
+								{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>
+					<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>
+				</>
+			)}
 		</nav>
 	)
 }

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/index.ts

@@ -1,4 +1,4 @@
-import Box, { BoxBody, BoxHeader, BoxWrapper } from './dzeio/Box'
+import Box from './dzeio/Box'
 import Button from './dzeio/Button'
 import Checkbox from './dzeio/Checkbox'
 import Code from './dzeio/Code'
@@ -13,7 +13,6 @@ 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'
@@ -22,13 +21,8 @@ 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,7 +37,6 @@ export {
 	Loader,
 	Menu,
 	Navbar,
-	NavbarSpace,
 	Overflow,
 	Popup,
 	Row,

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": "./module",
+		"declarationDir": "src",
 		// "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 */
@@ -65,6 +65,6 @@
 	"exclude": [
 		"node_modules",
 		"build",
-		"*.stories.tsx"
+		"src/**/*.stories.tsx"
 	]
 }