v0.5.3

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

.gitignore

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

.npmignore

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

.storybook/mockNextRouter.js

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

.storybook/preview.js

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

package.json

@@ -1,9 +1,9 @@
 {
 	"name": "@dzeio/components",
-	"version": "0.7.5",
+	"version": "0.5.3",
 	"license": "MIT",
-	"main": "./index.js",
+	"main": "./src/index.mjs",
-	"types": "./types/index.d.ts",
+	"types": "./src/index.d.ts",
 	"devDependencies": {
 		"@babel/core": "^7.12.16",
 		"@babel/preset-env": "^7.12.16",
@@ -24,27 +24,18 @@
 		"stylus": "^0.54.8",
 		"stylus-loader": "^4.3.3",
 		"ts-loader": "^8.0.17",
-		"typescript": "^4.2.3",
+		"typescript": "^4.1.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": {
-		"dev": "rm -rf src/dzeio/**/*.js && start-storybook -p 6006",
+		"storybook": "rm -rf src/dzeio/**/*.js && start-storybook -p 6006",
-		"build": "rollup --config",
+		"build": "tsc && mv src/index.js src/index.mjs",
-		"prepublishOnly": "yarn build",
+		"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

@@ -1,29 +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',
-				modules: {
-					generateScopedName: '[local][hash:5]'
-				}
-			}),
-			typescript({useTsconfigDeclarationDir: true}), // so Rollup can convert TypeScript to JavaScript
-		],
-		output: [
-			{
-				file: pkg.main,
-				format: 'cjs',
-				assetFileNames: 'style.css'
-			}
-		]
-	}
-];

src/dzeio/GradientBackground/GradientBackground.module.styl

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

src/dzeio/GradientBackground/index.tsx

@@ -8,18 +8,12 @@ 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/Link/index.tsx

@@ -6,30 +6,24 @@ 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
 	 */
+	noStyle?: boolean
 	external?: boolean
 }
 
 export default class Link extends React.Component<Props> {
 
 	public render() {
-		const external = this.props.external ?? this.props.href.startsWith('http')
+		const external = this.props.external ?? !this.props.href.startsWith('/')
 		if (external) {
 			// external link
 			return (
 				<a
-					{...this.props.linkProps}
 					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
 					href={this.props.href}
 					rel="noreferrer nofollow"
@@ -42,7 +36,6 @@ export default class Link extends React.Component<Props> {
 		return (
 			<NextLink href={this.props.href}>
 				<a
-					{...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/Navbar/Navbar.module.styl

@@ -39,7 +39,6 @@
 
 		&.active
 			background $mainGradient
-			color $textOnMain
 
 	.userSpace
 
@@ -120,7 +119,6 @@
 
 				&.active
 					background $mainGradient
-					color $textOnMain
 
 	.userSpace
 		cursor pointer
@@ -169,13 +167,12 @@
 
 	.header
 		min-height 70px
+		> div
 			padding 0
-		margin 0
+			&:first-child
-		> div p > div
+				padding-left 16px
-		> div:first-child
+		p > div
 			padding 16px
-		> div:last-child
-			padding 0
 
 	hr
 		margin 0
@@ -201,7 +198,7 @@
 					background-image $mainGradient
 				&:hover
 				&.active
-					color $textOnMain
+					color white
 					&::before
 						opacity 1
 				svg
@@ -217,7 +214,7 @@
 		padding 0
 
 .userMenu
-		// padding-bottom 16px
+		padding-bottom 16px
 		a
 			padding 16px 0
 

src/dzeio/Navbar/Navbar.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react/types-6-0'
+import { Meta } from '@storybook/react/types-6-0'
 import React from 'react'
 import Component from '.'
 
@@ -7,24 +7,4 @@ export default {
 	component: Component
 } as Meta
 
-export const Basic: Story<any> = (args: any) => <Component {...args} />
+export const Basic = (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: '/assets/logo.svg', width: 90, height: 38}
-}

src/dzeio/Navbar/index.tsx

@@ -12,64 +12,27 @@ import { buildClassName } from '../Util'
 import css from './Navbar.module.styl'
 
 interface Props {
-	/**
-	 * Type of Navbar
-	 * _note: when in mobile it is not listened_
-	 */
 	type: 'navbar' | 'sidebar'
-
+	logo: ImageProps & {height: number, width: number}
-	/**
-	 * 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
-		/**
+		settings?: 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
+		icon: FC
 		name: string
 	}>
-	/**
-	 * Internal Usem don't use it !
-	 */
 	mobileMenu?: () => void
 }
 
@@ -80,10 +43,6 @@ interface State {
 	menuActive: boolean
 }
 
-/**
- * Navbar/Sidebar Component
- * @version 1.0.1
- */
 export default class Navbar extends React.Component<Props, State> {
 
 	public state: State = {
@@ -163,14 +122,8 @@ export default class Navbar extends React.Component<Props, State> {
 	public render = () => (
 		<>
 			<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">
+				<Row nowrap nomargin={this.getType() === 'sidebar'} className={css.header} align="center">
-					{this.props.logo && (
+					<Col className={css.imgContainer}><Link href="/"><Image {...this.props.logo} height={34} width={this.props.logo.width*34/this.props.logo.height} /></Link></Col>
-						<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 ? (
@@ -188,7 +141,7 @@ export default class Navbar extends React.Component<Props, State> {
 					{!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 && (
+								{this.getType() === 'sidebar' && (
 									<item.icon />
 								)}
 								<span>{item.name}</span>
@@ -203,6 +156,8 @@ export default class Navbar extends React.Component<Props, State> {
 						<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])} /> */}
 							</Text>
 						</div>
 					</div>
@@ -224,7 +179,7 @@ export default class Navbar extends React.Component<Props, State> {
 							</div>
 						</div>
 						<div className={buildClassName(css.userMenu, [css.menuActive, !this.state.isMobile && this.state.menuActive])}>
-							<Row>
+							<Row nomargin>
 								{this.props.user.menu?.informations && (
 									<Col>{this.props.user.menu?.informations}</Col>
 								)}

src/dzeio/SidebarContainer/SidebarContainer.module.styl

@@ -0,0 +1,32 @@
+@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

@@ -0,0 +1,45 @@
+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,6 +12,7 @@ interface Props {
 
 export default class Text extends React.Component<Props> {
 
+
 	public render() {
 		const classes = buildClassName(
 			css.text,
@@ -22,10 +23,16 @@ export default class Text extends React.Component<Props> {
 			this.props.className
 		)
 
-		if (this.props.type === 'em') {
+		switch (this.props.type || 'p') {
-			return (<p className={classes}><em>{this.props.children}</em></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>)
-		return React.createElement(this.props.type || 'p', {className: classes})
+		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>)
+		}
 	}
 }

src/dzeio/interfaces.ts

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

src/index.ts

@@ -1,11 +1,3 @@
-/**
- * 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'
@@ -24,6 +16,7 @@ import Navbar from './dzeio/Navbar'
 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'
@@ -47,6 +40,7 @@ export {
 	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": "types",
+		"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 */
 		// "removeComments": true,                /* Do not emit comments to output. */
 		// "noEmit": true,                        /* Do not emit outputs. */
-		"importHelpers": false,                 /* Import emit helpers from 'tslib'. */
+		// "importHelpers": true,                 /* 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'). */