Merge branch 'master' of github.com:dzeiocom/components

Signed-off-by: Avior <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,5 @@ node_modules/
 .gitattributes
 .gitignore
 .npmignore
-rollup.config.js
-tsconfig.json
 yarn.lock
 yarn-error.log

.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,5 @@
 import '../src/dzeio/general.styl'
+import './mockNextRouter'
 
 export const parameters = {
   layout: 'centered'

package.json

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

@@ -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/Link/index.tsx

@@ -6,13 +6,18 @@ 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
 	/**
-	 * Override external detection system
+	 * Remove styling
 	 */
 	noStyle?: boolean
+
+	/**
+	 * Override external detection system
+	 */
 	external?: boolean
 }
 
@@ -24,6 +29,7 @@ export default class Link extends React.Component<Props> {
 			// external link
 			return (
 				<a
+					{...this.props.linkProps}
 					className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
 					href={this.props.href}
 					rel="noreferrer nofollow"
@@ -36,6 +42,7 @@ 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/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: '/assets/logo.svg', width: 90, height: 38}
+}

src/dzeio/Navbar/index.tsx

@@ -12,27 +12,64 @@ 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 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
 		name: string
 	}>
+	/**
+	 * Internal Use don't use it !
+	 */
 	mobileMenu?: () => void
 }
 
@@ -43,6 +80,10 @@ interface State {
 	menuActive: boolean
 }
 
+/**
+ * Navbar/Sidebar Component
+ * @version 1.0.0
+ */
 export default class Navbar extends React.Component<Props, State> {
 
 	public state: State = {
@@ -123,7 +164,11 @@ export default class Navbar extends React.Component<Props, State> {
 		<>
 			<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">
-					<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 ? (

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/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'
@@ -16,7 +22,6 @@ 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'
@@ -40,7 +45,6 @@ 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": "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 */
 		// "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'). */