v0.8.1

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

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "@dzeio/components",
-	"version": "0.7.0",
+	"version": "0.8.1",
 	"license": "MIT",
-	"main": "./index.mjs",
+	"main": "./index.js",
 	"types": "./types/index.d.ts",
 	"devDependencies": {
 		"@babel/core": "^7.12.16",
@@ -36,7 +36,7 @@
 		"typescript": "^4.2.3"
 	},
 	"scripts": {
-		"dev": "rm -rf src/dzeio/**/*.js && start-storybook -p 6006",
+		"dev": "rm -rf src/dzeio/**/*.js && start-storybook -s ./.storybook/public -p 6006",
 		"build": "rollup --config",
 		"prepublishOnly": "yarn build",
 		"postinstall": "rollup --config"

rollup.config.js

@@ -12,14 +12,16 @@ export default [
 				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: 'es',
+				format: 'cjs',
 				assetFileNames: 'style.css'
 			}
 		]

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
+	&.fullscreen
-	$color = $primary
+		min-height 100vh
-	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, 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/Link/index.tsx

@@ -24,7 +24,7 @@ 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 (

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

@@ -216,9 +216,7 @@
 		margin 0
 		padding 0
 
-.userMenu
+.userMenu a
-		// padding-bottom 16px
-		a
 			padding 16px 0
 
 

src/dzeio/Navbar/index.tsx

@@ -21,7 +21,7 @@ interface Props {
 	/**
 	 * Logo to display
 	 */
-	logo: ImageProps & {height: number, width: number}
+	logo?: ImageProps & {height: number, width: number}
 	/**
 	 * Login URL
 	 */
@@ -68,7 +68,7 @@ interface Props {
 		name: string
 	}>
 	/**
-	 * Internal Usem don't use it !
+	 * Internal Use don't use it !
 	 */
 	mobileMenu?: () => void
 }
@@ -82,7 +82,7 @@ interface State {
 
 /**
  * Navbar/Sidebar Component
- * @version 1.0.0
+ * @version 1.0.1
  */
 export default class Navbar extends React.Component<Props, State> {
 
@@ -164,11 +164,13 @@ 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">
+					{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>
+					)}
 					{this.getType() === 'sidebar' && (
 						<Col nogrow><Text><div onClick={this.onSidebarButton}>
 							{this.state.short ? (

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/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') {
+		if (this.props.type === 'em') {
-		case 'h1': return (<h1 className={classes}>{this.props.children}</h1>)
+			return (<p className={classes}><em>{this.props.children}</em></p>)
-		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>)
+		return React.createElement(this.props.type || 'p', {className: classes, children: this.props.children})
-		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 = 'primary' | 'info' | 'success' | 'error' | 'warning'
+export type ColorType = 'info' | 'success' | 'error' | 'warning'
 
 export interface IconProps extends SVGAttributes<SVGElement> {
 	color?: string

src/index.ts

@@ -4,6 +4,8 @@
  * @summary DZEIO Component Library
  */
 
+import './dzeio/general.styl'
+
 import Box from './dzeio/Box'
 import Button from './dzeio/Button'
 import Checkbox from './dzeio/Checkbox'