v0.4.2

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

.gitignore

@@ -1,7 +1,6 @@
 module/
-storybook-static/
+node_modules/
 *.js
+!.storybook/*.js
 style.css
-yarn-error.log
+yarn-error.log
-node_modules
-types

.npmignore

@@ -1,11 +1,10 @@
 .storybook/
+node_modules/
 src/
-storybook-static/
+.gitattributes
 .gitignore
 .npmignore
 rollup.config.js
 tsconfig.json
 yarn.lock
-yarn-error.log
-tsconfig.json
 yarn-error.log

.storybook/next.js

@@ -18,7 +18,7 @@ module.exports = {
 		});
 		newConfig.resolve.extensions.push('.ts', '.tsx');
 
-		// SCSS
+		// Stylus
 		newConfig.module.rules.push({
 		test: /\.styl$/,
 		use: ['style-loader', {

package.json

@@ -1,16 +1,13 @@
 {
 	"name": "@dzeio/components",
-	"version": "0.3.0",
+	"version": "0.4.2",
 	"license": "MIT",
-	"main": "./index.js",
+	"main": "./src/index.mjs",
-	"module": "./module/index.js",
+	"types": "./src/index.d.ts",
-	"types": "./types/index.d.ts",
-	"dependencies": {},
 	"devDependencies": {
 		"@babel/core": "^7.12.16",
 		"@babel/preset-env": "^7.12.16",
 		"@babel/preset-react": "^7.12.13",
-		"@rollup/plugin-typescript": "^8.2.0",
 		"@storybook/addon-essentials": "^6.1.14",
 		"@storybook/cli": "^6.1.14",
 		"@storybook/react": "^6.1.14",
@@ -25,6 +22,7 @@
 		"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",
@@ -41,7 +39,7 @@
 	"scripts": {
 		"storybook": "rm -rf src/dzeio/**/*.js && start-storybook -p 6006",
 		"build-storybook": "build-storybook",
-		"build": "tsc && rollup --config",
+		"build": "tsc && mv src/index.js src/index.mjs",
 		"prepublishOnly": "yarn build"
 	}
 }

rollup.config.js

@@ -1,4 +1,4 @@
-import typescript from '@rollup/plugin-typescript';
+import typescript from 'rollup-plugin-typescript2';
 import styles from 'rollup-plugin-styles'
 import pkg from './package.json';
 
@@ -14,7 +14,7 @@ export default [
 				mode: 'extract',
 
 			}),
-			typescript(), // so Rollup can convert TypeScript to JavaScript
+			typescript({useTsconfigDeclarationDir: true}), // so Rollup can convert TypeScript to JavaScript
 		],
 		output: [
 			{

src/dzeio/Box/BoxHeader/BoxHeader.module.styl

@@ -3,19 +3,11 @@
 .header
 	padding 16px
 
-.delimiter
-	border-bottom 2px solid grey
-	padding-bottom 2px
-
-.img
-	border-top-left-radius 4px
-	border-top-right-radius 4px
-
 .title
 	font-weight bold
-	font-size rem(20)
+	font-size rem(18)
 	margin 0 0 8px
 
 .subtitle
-	font-size rem(14)
+	font-size rem(16)
 	margin 0

src/dzeio/Box/BoxHeader/index.tsx

@@ -11,21 +11,15 @@ export interface Props {
 	title?: string
 	titleColSize?: number
 	subtitle?: string
-	delimiter?: boolean
 	titleClassName?: string
-	// image?: ImageProps
 }
 
 export default class BoxHeader extends React.Component<Props> {
 
 	public render = () => (
 		<>
-			{/* {this.props.image && (
-				<Image {...this.props.image} />
-			)} */}
 			<div className={buildClassName(
-				[css.header],
+				css.header
-				[css.delimiter, this.props.delimiter]
 			)}>
 				<Row>
 					<Col size={this.props.titleColSize as 1 || 8}>

src/dzeio/Box/BoxWrapper/BoxWrapper.module.styl

@@ -1,21 +1,12 @@
 @import "../../config"
 
 .box
-	background white
+	background $foregroundLight
+	@media (prefers-color-scheme dark)
+		background $foregroundDark
 	border-radius 8px
-	box-shadow 0px 2px 4px 0px rgba(black, .33)
-	transition all $transition
 
 .outline
-	border 2px solid #E0E0E0
+	border 2px solid $grayDark
-	box-shadow none
+	@media (prefers-color-scheme dark)
-	transition border-color $transition
+		border-color $grayLight
-
-	&:hover
-		border-color darken(@border[2], 20%)
-
-@media (prefers-color-scheme dark)
-	.box
-		background #202020
-	.outline
-		border-color #1F1F1F

src/dzeio/Box/index.tsx

@@ -32,7 +32,6 @@ export default class Box extends React.Component<Props> {
 					title={this.props.title}
 					titleColSize={this.props.titleColSize}
 					subtitle={this.props.subtitle}
-					delimiter={this.props.delimiter}
 					titleClassName={this.props.titleClassName}
 				>
 					{this.props.headerButtons}

src/dzeio/Code/Code.module.styl

@@ -3,3 +3,11 @@
 	background #E8EAF6
 	padding 4px 8px
 	border-radius 8px
+
+.pre
+	border-radius 8px
+	padding 4px 8px
+	background #E8EAF6
+	display block
+	.code
+		padding 0

src/dzeio/Code/index.tsx

@@ -19,7 +19,7 @@ export default class Code extends React.Component<Props> {
 		}
 
 		return (
-			<pre>
+			<pre className={css.pre}>
 				{code}
 			</pre>
 		)

src/dzeio/Footer/Footer.module.styl

@@ -2,22 +2,27 @@
 
 .footer
 	padding 24px 16px
+	background $foregroundLight
+	@media (prefers-color-scheme dark)
+		background $foregroundDark
+
+	ul
+		list-type none
+		li
+			display inline-block
 
 .animation
 	animation grow 1s linear infinite
 	display inline-block
+	vertical-align middle
+	margin 0 2px
 
 @keyframes grow
 	0%
-		transform scale(1)
-
 	40%
-		transform scale(1)
-	50%
-		transform scale(1.2)
 	60%
-		transform scale(1)
-	70%
-		transform scale(1.2)
 	95%
 		transform scale(1)
+	50%
+	70%
+		transform scale(1.2)

src/dzeio/Footer/Footer.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/react/types-6-0'
+import React from 'react'
+import Component from '.'
+
+export default {
+	title: 'DZEIO/Footer',
+	component: Component,
+} as Meta
+
+export const Basic: Story<any> = (args: any) => <Component {...args} />
+
+let tmp = Basic.bind({})
+tmp.args = {links: [{name: 'test1', path: '/'}, {name: 'test2', path: '/'}, {name: 'test3', path: '/'}]}
+
+export const Normal = tmp

src/dzeio/Footer/index.tsx

@@ -1,13 +1,32 @@
 import React from 'react'
+import { Heart } from 'react-feather'
+import Link from '../Link'
 
 import Text from '../Text'
 import css from './Footer.module.styl'
 
-export default class Footer extends React.Component {
+interface Props {
+	text?: string
+	company?: string
+	links?: Array<{
+		path: string
+		name: string
+	}>
+}
+
+export default class Footer extends React.Component<Props> {
 	public render = () => (
 		<footer className={css.footer}>
-			<Text align="center">Made with <span className={css.animation}>💗</span> by Dzeio</Text>
+			{this.props.text ? (
-			<Text align="center">Copyright © 2020 Dzeio. All rights reserved.</Text>
+				<Text align="center">{this.props.text}</Text>
+			) : (
+				<Text align="center">Made with <span className={css.animation}><Heart color={'#E6808A'} fill={'#E6808A'} size={16} fillOpacity={0.5} /></span> by {this.props.company || 'Dzeio'}</Text>
+			)}
+			{this.props.links && (
+				<ul>{this.props.links.map((l, index) => (
+					<li key={l.path}><Text>{index !== 0 && (<>&nbsp;- </>)}<Link href={l.path}>{l.name}</Link></Text></li>
+				))}</ul>
+			)}
 		</footer>
 	)
-}
+}

src/dzeio/Link/Link.module.styl

@@ -1,3 +1,12 @@
+@import '../config'
+
+.link
+	color $infoLight
+	@media (prefers-color-scheme dark)
+		color $infoDark
+	&:hover
+		text-decoration underline
+
 .icon
 	vertical-align sub
 	margin 2px

src/dzeio/Link/index.tsx

@@ -3,22 +3,27 @@ import NextLink from 'next/link'
 import { ExternalLink } from 'react-feather'
 
 import css from './Link.module.styl'
+import { buildClassName } from '../Util'
 
 interface Props {
 	href: string
 	children?: React.ReactNode
 	className?: string
-	forceNewTab?: boolean
+	/**
+	 * Override external detection system
+	 */
+	external?: boolean
 }
 
 export default class Link extends React.Component<Props> {
 
 	public render() {
-		if (!this.props.href.startsWith('/')) {
+		const external = this.props.external ?? !this.props.href.startsWith('/')
+		if (external) {
 			// external link
 			return (
 				<a
-					className={this.props.className}
+					className={buildClassName(this.props.className, css.link)}
 					href={this.props.href}
 					rel="noreferrer nofollow"
 					target="_blank"
@@ -30,9 +35,7 @@ export default class Link extends React.Component<Props> {
 		return (
 			<NextLink href={this.props.href}>
 				<a
-					className={this.props.className}
+					className={buildClassName(this.props.className, css.link)}
-					target={this.props.forceNewTab ? '_blank' : undefined}
-					rel={this.props.forceNewTab ? 'noreferrer nofollow' : undefined}
 				>{this.props.children}</a>
 			</NextLink>
 		)

src/dzeio/Popup/Popup.module.styl

@@ -6,22 +6,38 @@
 	width 100%
 	top 0
 	left 0
-	background rgba(black, .3)
+	background rgba($backgroundLight, .7)
+	@media (prefers-color-scheme dark)
+		background rgba($backgroundDark, .7)
 	cursor pointer
-	z-index 1000
+	z-index 200
+	animation fadeIn .3s ease-in-out 1 forwards
+
+@keyframes fadeIn
+	from
+		opacity 0
+	to
+		opacity 1
+
 
 .popupChild
 	cursor initial
-	z-index 1001
+	z-index 201
 
 	min-width 50%
+	animation popin .3s ease-in-out 1
 
 	@media (max-width $tablet)
 		min-width 70%
 
 	@media (max-width $mobile)
 		min-width 90%
-	// min-height 50vh
+
+@keyframes popin
+	from
+		margin-top 50px
+	to
+		margin-top 0
 
 .exit
 	cursor pointer

src/dzeio/Tag/Tag.module.styl

@@ -1,139 +0,0 @@
-@import '../config'
-
-.tag
-	padding 8px 12px
-	border-radius 8px
-	margin-left 8px
-	height 32px
-	line-height 1
-	display inline-block
-	color white
-
-	background $default
-	outline none
-	&:hover
-		background darken($default, 10%)
-	&:focus
-		background darken($default, 20%)
-
-	&.outline
-		border 2px solid $default
-		padding 6px 10px
-		background transparent
-		&:hover
-			background rgba($default, .5)
-		&:focus
-			background rgba($default, .7)
-
-.primary
-	$color = $primary
-	color white
-	background $color
-	&:hover
-		background lighten($color, 30%)
-	&:focus
-		background lighten($color, 15%)
-
-	&.outline
-		color black
-		border 2px solid $color
-		background transparent
-		&:hover
-			color white
-			background rgba($color, .5)
-		&:focus
-			color white
-			background rgba($color, .7)
-.secondary
-	$color = $secondary
-	background $color
-	&:hover
-		background lighten($color, 30%)
-	&:focus
-		background lighten($color, 15%)
-	&.outline
-		color white
-		border 2px solid $color
-		background transparent
-		&:hover
-			color black
-			background rgba($color, .5)
-		&:focus
-			color black
-			background rgba($color, .7)
-
-.info
-	$color = $info
-	color white
-	background $color
-	&:hover
-		background lighten($color, 30%)
-	&:focus
-		background lighten($color, 15%)
-	&.outline
-		color black
-		border 2px solid $color
-		background transparent
-		&:hover
-			color white
-			background rgba($color, .5)
-		&:focus
-			color white
-			background rgba($color, .7)
-
-.success
-	$color = $success
-	color white
-	background $color
-	&:hover
-		background lighten($color, 30%)
-	&:focus
-		background lighten($color, 15%)
-	&.outline
-		color black
-		border 2px solid $color
-		background transparent
-		&:hover
-			color white
-			background rgba($color, .5)
-		&:focus
-			color white
-			background rgba($color, .7)
-
-.danger
-	$color = $danger
-	color white
-	background $color
-	&:hover
-		background lighten($color, 30%)
-	&:focus
-		background lighten($color, 15%)
-	&.outline
-		color black
-		border 2px solid $color
-		background transparent
-		&:hover
-			color white
-			background rgba($color, .5)
-		&:focus
-			color white
-			background rgba($color, .7)
-
-.warning
-	$color = $warning
-	color white
-	background $color
-	&:hover
-		background lighten($color, 30%)
-	&:focus
-		background lighten($color, 15%)
-	&.outline
-		color black
-		border 2px solid $color
-		background transparent
-		&:hover
-			color white
-			background rgba($color, .5)
-		&:focus
-			color white
-			background rgba($color, .7)

src/dzeio/Tag/Tag.stories.tsx

@@ -1,17 +0,0 @@
-import { Meta } from '@storybook/react/types-6-0'
-import React from 'react'
-import Component from '.'
-
-export default {
-	title: 'DZEIO/Tag',
-	component: Component
-} as Meta
-
-export const Basic = (args: any) => {
-	const content = args.content
-	delete args.content
-
-	return (
-		<Component {...args}>{content}</Component>
-	)
-}

src/dzeio/Tag/index.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-
-import { ColorType } from '../interfaces'
-import { buildClassName } from '../Util'
-import Link from '../Link'
-
-import css from './Tag.module.styl'
-import Text from '../Text'
-
-interface Props {
-	text: string
-	color?: ColorType
-	href?: string
-	outline?: boolean
-}
-
-export default class Tag extends React.Component<Props> {
-
-	public render() {
-		const classes = buildClassName(
-			css.tag,
-			[css[this.props.color as string], this.props.color],
-			[css.outline, this.props.outline]
-		)
-		if (!this.props.href) {
-			return (
-				<Text
-					className={classes}
-				>{this.props.text}</Text>
-			)
-		}
-		return (
-			<Link
-				href={this.props.href}
-				className={classes}
-			>
-				{this.props.text}
-			</Link>
-		)
-	}
-
-}

src/index.ts

@@ -7,9 +7,10 @@ import Container from './dzeio/Container'
 import Fieldset from './dzeio/Fieldset'
 import Footer from './dzeio/Footer'
 import GradientBackground from './dzeio/GradientBackground'
-import Input from './dzeio/Input'
 import Image from './dzeio/Image'
+import Input from './dzeio/Input'
 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'
@@ -18,7 +19,6 @@ import Popup from './dzeio/Popup'
 import Row from './dzeio/Row'
 import SidebarContainer from './dzeio/SidebarContainer'
 import Table from './dzeio/Table'
-import Tag from './dzeio/Tag'
 import Text from './dzeio/Text'
 import * as Util from './dzeio/Util'
 
@@ -40,6 +40,7 @@ export {
 	Image,
 	Input,
 	Link,
+	Loader,
 	Menu,
 	Navbar,
 	NavbarSpace,
@@ -48,7 +49,6 @@ export {
 	Row,
 	SidebarContainer,
 	Table,
-	Tag,
 	Text,
 	Util
 }

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": "types",
+		"declarationDir": "./module",
 		// "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 */