mirror of
https://github.com/dzeiocom/components.git
synced 2025-06-16 04:29:20 +00:00
Compare commits
45 Commits
Author | SHA1 | Date | |
---|---|---|---|
d6b59509b0
|
|||
2491f23f49
|
|||
0de363487d
|
|||
f957500580
|
|||
ae7dde8802
|
|||
69b74e2f03
|
|||
506fa8c01b
|
|||
d06386119b | |||
209697ecd5 | |||
d7e2bcfbdf | |||
fe17d4687b | |||
cfd33ab0d6
|
|||
bf7b3a0d79
|
|||
be724ecf0d
|
|||
58d1db14ae
|
|||
7000d3ebac
|
|||
3bde426325
|
|||
b13a40ef18
|
|||
e481160528
|
|||
a0342050db
|
|||
c1f37b6e7c
|
|||
d2fbe42db8
|
|||
031971b859
|
|||
1488386e1d
|
|||
26c2c50f23 | |||
c591c2f0a8 | |||
7fe816c997 | |||
7e28baf2aa | |||
b19992b57c | |||
0bb84f9946 | |||
8cddeab594 | |||
68939d8390 | |||
8186284ded | |||
e173bd2a37 | |||
754da58a68 | |||
3b314d5307 | |||
4a55f00ff0 | |||
d30ae95a0d | |||
264e9a4cad | |||
6a8fb50b0e | |||
8c64a57a16
|
|||
c1e40c6789
|
|||
bd0787d0ec
|
|||
5f51088ab0
|
|||
d7a09a4dcd
|
@ -1,8 +1,9 @@
|
|||||||
const path = require("path");
|
const path = require("path");
|
||||||
|
const webpack = require('webpack')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
"stories": [
|
"stories": [
|
||||||
"../src/dzeio/**/*.stories.@(ts|tsx)",
|
"../src/dzeio/**/*.stories.tsx",
|
||||||
],
|
],
|
||||||
"addons": [
|
"addons": [
|
||||||
"@storybook/addon-essentials"
|
"@storybook/addon-essentials"
|
||||||
@ -16,5 +17,18 @@ module.exports = {
|
|||||||
propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
|
propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
presets: [path.resolve(__dirname, "./next.js")]
|
presets: [path.resolve(__dirname, "./next.js")],
|
||||||
|
// Allow to use Next/Image
|
||||||
|
webpackFinal: (config) => {
|
||||||
|
config.plugins.push(new webpack.DefinePlugin({
|
||||||
|
'process.env.__NEXT_IMAGE_OPTS': JSON.stringify({
|
||||||
|
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
|
||||||
|
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
|
||||||
|
domains: [],
|
||||||
|
path: '/',
|
||||||
|
loader: 'default',
|
||||||
|
})
|
||||||
|
}))
|
||||||
|
return config
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
17
.storybook/mockNextImage.js
Normal file
17
.storybook/mockNextImage.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
// https://stackoverflow.com/a/64765638/7335674
|
||||||
|
|
||||||
|
import * as nextImage from 'next/image'
|
||||||
|
|
||||||
|
Object.defineProperty(nextImage, 'default', {
|
||||||
|
configurable: true,
|
||||||
|
value: (props) => {
|
||||||
|
return (
|
||||||
|
<div style={{display: 'inline-block', maxWidth: '100%', overflow: 'hidden', position: 'relative', boxSizing: 'border-box', margin: 0}}>
|
||||||
|
<div style={{boxSizing: 'border-box', display: 'block', maxWidth: '100%'}}>
|
||||||
|
<img {...props} alt="" aria-hidden="true" role="presentation" style={{maxWidth: '100%', display: 'block', margin: 0, border: 'none', padding: 0}} />
|
||||||
|
</div>
|
||||||
|
<img {...props} style={{position: 'absolute', inset: 0, boxSizing: 'border-box', padding: 0, border: 'none', margin: 'auto', display: 'block', width: 0, height: 0, minWidth: '100%', maxWidth: '100%', minHeight: '100%', maxHeight: '100%'}} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
})
|
@ -1,5 +1,6 @@
|
|||||||
import '../src/dzeio/general.styl'
|
import '../src/dzeio/general.styl'
|
||||||
import './mockNextRouter'
|
import './mockNextRouter'
|
||||||
|
import './mockNextImage'
|
||||||
|
|
||||||
export const parameters = {
|
export const parameters = {
|
||||||
layout: 'centered'
|
layout: 'centered'
|
||||||
|
3
.storybook/public/16-16.svg
Normal file
3
.storybook/public/16-16.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="16" height="16" fill="#C4C4C4"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 150 B |
3
.storybook/public/90-38.svg
Normal file
3
.storybook/public/90-38.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="90" height="38" viewBox="0 0 90 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="90" height="38" fill="#C4C4C4"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 150 B |
@ -1,8 +1,8 @@
|
|||||||
{
|
{
|
||||||
"name": "@dzeio/components",
|
"name": "@dzeio/components",
|
||||||
"version": "0.7.0",
|
"version": "0.8.5",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"main": "./index.mjs",
|
"main": "./index.js",
|
||||||
"types": "./types/index.d.ts",
|
"types": "./types/index.d.ts",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.12.16",
|
"@babel/core": "^7.12.16",
|
||||||
@ -36,7 +36,7 @@
|
|||||||
"typescript": "^4.2.3"
|
"typescript": "^4.2.3"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "rm -rf src/dzeio/**/*.js && start-storybook -p 6006",
|
"dev": "start-storybook -s ./.storybook/public -p 6006",
|
||||||
"build": "rollup --config",
|
"build": "rollup --config",
|
||||||
"prepublishOnly": "yarn build",
|
"prepublishOnly": "yarn build",
|
||||||
"postinstall": "rollup --config"
|
"postinstall": "rollup --config"
|
||||||
|
@ -12,14 +12,16 @@ export default [
|
|||||||
url: false,
|
url: false,
|
||||||
autoModules: true,
|
autoModules: true,
|
||||||
mode: 'extract',
|
mode: 'extract',
|
||||||
|
modules: {
|
||||||
|
generateScopedName: '[local][hash:5]'
|
||||||
|
}
|
||||||
}),
|
}),
|
||||||
typescript({useTsconfigDeclarationDir: true}), // so Rollup can convert TypeScript to JavaScript
|
typescript({useTsconfigDeclarationDir: true}), // so Rollup can convert TypeScript to JavaScript
|
||||||
],
|
],
|
||||||
output: [
|
output: [
|
||||||
{
|
{
|
||||||
file: pkg.main,
|
file: pkg.main,
|
||||||
format: 'es',
|
format: 'cjs',
|
||||||
assetFileNames: 'style.css'
|
assetFileNames: 'style.css'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
@import "../../config"
|
@import "../config"
|
||||||
|
|
||||||
.box
|
.box
|
||||||
background $foregroundLight
|
background $foregroundLight
|
||||||
@ -10,3 +10,8 @@
|
|||||||
border 2px solid $grayDark
|
border 2px solid $grayDark
|
||||||
@media (prefers-color-scheme dark)
|
@media (prefers-color-scheme dark)
|
||||||
border-color $grayLight
|
border-color $grayLight
|
||||||
|
|
||||||
|
|
||||||
|
// BODY
|
||||||
|
.body
|
||||||
|
padding 0 16px 16px
|
@ -1,2 +0,0 @@
|
|||||||
.body
|
|
||||||
padding 0 16px 16px
|
|
@ -1,18 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import css from './BoxBody.module.styl'
|
|
||||||
import { buildClassName } from '../../Util'
|
|
||||||
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
noPadding?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class BoxBody extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<div className={buildClassName([css.body, !this.props.noPadding])}>
|
|
||||||
{this.props.children}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
@ -18,19 +18,25 @@ export default class BoxHeader extends React.Component<Props> {
|
|||||||
|
|
||||||
public render = () => (
|
public render = () => (
|
||||||
<>
|
<>
|
||||||
<div className={buildClassName(
|
<div data-t="true" className={buildClassName(
|
||||||
css.header
|
css.header
|
||||||
)}>
|
)}>
|
||||||
<Row>
|
<Row nomargin justify="space-between">
|
||||||
<Col size={this.props.titleColSize as 1 || 8}>
|
|
||||||
<Text className={buildClassName(css.title, this.props.titleClassName)}>{this.props.title}</Text>
|
|
||||||
<Text className={css.subtitle}>{this.props.subtitle}</Text>
|
|
||||||
</Col>
|
|
||||||
<Col>
|
<Col>
|
||||||
<Row justify="flex-end">
|
{this.props.title && (
|
||||||
{this.props.children}
|
<Text className={buildClassName(css.title, this.props.titleClassName)}>{this.props.title}</Text>
|
||||||
</Row>
|
)}
|
||||||
|
{this.props.subtitle && (
|
||||||
|
<Text className={css.subtitle}>{this.props.subtitle}</Text>
|
||||||
|
)}
|
||||||
</Col>
|
</Col>
|
||||||
|
{this.props.children && (
|
||||||
|
<Col nogrow>
|
||||||
|
<Row justify="flex-end">
|
||||||
|
{this.props.children}
|
||||||
|
</Row>
|
||||||
|
</Col>
|
||||||
|
)}
|
||||||
</Row>
|
</Row>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
@ -1,28 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
|
|
||||||
import css from './BoxWrapper.module.styl'
|
|
||||||
import { buildClassName } from '../../Util'
|
|
||||||
|
|
||||||
interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
||||||
outline?: boolean
|
|
||||||
className?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class BoxWrapper extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<div {...this.props}
|
|
||||||
className={buildClassName(css.box, [css.outline, this.props.outline], this.props.className)}
|
|
||||||
>
|
|
||||||
{this.props.children}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Wrapper extends div
|
|
||||||
|
|
||||||
Body
|
|
||||||
noPadding?: boolean
|
|
||||||
*/
|
|
@ -1,15 +1,20 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
|
||||||
import BoxWrapper from './BoxWrapper'
|
|
||||||
import BoxHeader from './BoxHeader'
|
import BoxHeader from './BoxHeader'
|
||||||
import BoxBody from './BoxBody'
|
import { buildClassName } from '../Util'
|
||||||
|
|
||||||
|
import css from './Box.module.styl'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
|
||||||
// Wrapper
|
// Wrapper
|
||||||
|
wrapperProps?: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'className'>
|
||||||
outline?: boolean
|
outline?: boolean
|
||||||
|
/**
|
||||||
|
* @deprecated use wrapperProps.onClick
|
||||||
|
*/
|
||||||
|
onClick?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>['onClick']
|
||||||
className?: string
|
className?: string
|
||||||
onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
|
|
||||||
|
|
||||||
// Header
|
// Header
|
||||||
title?: string
|
title?: string
|
||||||
@ -26,7 +31,11 @@ interface Props {
|
|||||||
|
|
||||||
export default class Box extends React.Component<Props> {
|
export default class Box extends React.Component<Props> {
|
||||||
public render = () => (
|
public render = () => (
|
||||||
<BoxWrapper onClick={this.props.onClick} outline={this.props.outline} className={this.props.className}>
|
<div
|
||||||
|
{...this.props.wrapperProps}
|
||||||
|
onClick={this.props.onClick}
|
||||||
|
className={buildClassName(css.box, this.props.className, [css.outline, this.props.outline])}
|
||||||
|
>
|
||||||
{(this.props.headerButtons || this.props.title || this.props.titleColSize || this.props.subtitle || this.props.delimiter || this.props.titleClassName) && (
|
{(this.props.headerButtons || this.props.title || this.props.titleColSize || this.props.subtitle || this.props.delimiter || this.props.titleClassName) && (
|
||||||
<BoxHeader
|
<BoxHeader
|
||||||
title={this.props.title}
|
title={this.props.title}
|
||||||
@ -37,16 +46,11 @@ export default class Box extends React.Component<Props> {
|
|||||||
{this.props.headerButtons}
|
{this.props.headerButtons}
|
||||||
</BoxHeader>
|
</BoxHeader>
|
||||||
)}
|
)}
|
||||||
<BoxBody noPadding={this.props.noPadding}>
|
{this.props.children && (
|
||||||
{this.props.children}
|
<div className={buildClassName([css.body, !this.props.noPadding])}>
|
||||||
</BoxBody>
|
{this.props.children}
|
||||||
</BoxWrapper>
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export {
|
|
||||||
BoxWrapper,
|
|
||||||
BoxHeader,
|
|
||||||
BoxBody
|
|
||||||
}
|
|
||||||
|
@ -15,6 +15,7 @@
|
|||||||
border-radius 4px
|
border-radius 4px
|
||||||
border none
|
border none
|
||||||
justify-content center
|
justify-content center
|
||||||
|
align-items center
|
||||||
color $textOnMain
|
color $textOnMain
|
||||||
background-color $main
|
background-color $main
|
||||||
|
|
||||||
@ -24,9 +25,6 @@
|
|||||||
// Link specific
|
// Link specific
|
||||||
text-decoration none
|
text-decoration none
|
||||||
|
|
||||||
&.nomargintop
|
|
||||||
margin-top 0
|
|
||||||
|
|
||||||
&.outline
|
&.outline
|
||||||
border 2px solid @background-color
|
border 2px solid @background-color
|
||||||
padding 8px 18px // @padding - @border
|
padding 8px 18px // @padding - @border
|
||||||
@ -36,7 +34,7 @@
|
|||||||
&:hover
|
&:hover
|
||||||
&:active
|
&:active
|
||||||
&:focus
|
&:focus
|
||||||
color @color
|
color $textOnMain
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background-color @background-color
|
background-color @background-color
|
||||||
@ -47,6 +45,12 @@
|
|||||||
&:focus
|
&:focus
|
||||||
background-color darken(@background-color, 30%)
|
background-color darken(@background-color, 30%)
|
||||||
|
|
||||||
|
&.block
|
||||||
|
display flex
|
||||||
|
width 100%
|
||||||
|
margin 0
|
||||||
|
margin-top 8px
|
||||||
|
|
||||||
&.large
|
&.large
|
||||||
padding 15px 30px
|
padding 15px 30px
|
||||||
font-size rem(20)
|
font-size rem(20)
|
||||||
@ -61,11 +65,8 @@
|
|||||||
&.outline
|
&.outline
|
||||||
padding 3px 8px // @padding - @border
|
padding 3px 8px // @padding - @border
|
||||||
|
|
||||||
&.block
|
&.nomargintop
|
||||||
display flex
|
margin-top 0
|
||||||
width 100%
|
|
||||||
margin 0
|
|
||||||
margin-top 8px
|
|
||||||
|
|
||||||
&:disabled
|
&:disabled
|
||||||
background $grayLight
|
background $grayLight
|
||||||
@ -124,11 +125,17 @@ btn($color, $theme)
|
|||||||
&.outline
|
&.outline
|
||||||
color @background-color
|
color @background-color
|
||||||
border-color @background-color
|
border-color @background-color
|
||||||
|
// background none
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
&:active
|
&:active
|
||||||
&:focus
|
&:focus
|
||||||
color @color
|
color $textColor
|
||||||
|
|
||||||
|
if $theme is 'darken'
|
||||||
|
&:active
|
||||||
|
&:focus
|
||||||
|
background-color darken(@color, 30%)
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
background-color @background-color
|
background-color @background-color
|
||||||
@ -172,3 +179,6 @@ btn($color, $theme)
|
|||||||
|
|
||||||
100%
|
100%
|
||||||
transform rotate(365deg)
|
transform rotate(365deg)
|
||||||
|
|
||||||
|
.img
|
||||||
|
min-width 16px
|
@ -1,5 +1,6 @@
|
|||||||
import { Meta } from '@storybook/react/types-6-0'
|
import { Meta } from '@storybook/react/types-6-0'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import { Zap } from 'react-feather'
|
||||||
import Component from '.'
|
import Component from '.'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -8,3 +9,19 @@ export default {
|
|||||||
} as Meta
|
} as Meta
|
||||||
|
|
||||||
export const Basic = (args: any) => <Component {...args}>Button</Component>
|
export const Basic = (args: any) => <Component {...args}>Button</Component>
|
||||||
|
Basic.args = {
|
||||||
|
nomargintop: true,
|
||||||
|
icon: Zap,
|
||||||
|
size: 'small',
|
||||||
|
href: '/pouet',
|
||||||
|
block: true
|
||||||
|
}
|
||||||
|
|
||||||
|
export const WithImg = (args: any) => <Component {...args}>Button</Component>
|
||||||
|
WithImg.args = {
|
||||||
|
nomargintop: true,
|
||||||
|
icon: '/16-16.svg',
|
||||||
|
size: 'small',
|
||||||
|
href: '/pouet',
|
||||||
|
block: true
|
||||||
|
}
|
||||||
|
@ -14,7 +14,8 @@ interface Props {
|
|||||||
color?: ColorType
|
color?: ColorType
|
||||||
children?: React.ReactNode
|
children?: React.ReactNode
|
||||||
icon?: FC<IconProps> | string
|
icon?: FC<IconProps> | string
|
||||||
size?: 'large' | 'small' | 'block'
|
size?: 'large' | 'small'
|
||||||
|
block?: boolean
|
||||||
href?: string
|
href?: string
|
||||||
as?: string
|
as?: string
|
||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
@ -33,9 +34,9 @@ export default class Button extends React.Component<Props> {
|
|||||||
inner = (
|
inner = (
|
||||||
<>
|
<>
|
||||||
{typeof Icon === 'string' ? (
|
{typeof Icon === 'string' ? (
|
||||||
<Image src={Icon} width={16} height={16} />
|
<Image parentClassName={css.img} src={Icon} width={16} height={16} />
|
||||||
) : (
|
) : (
|
||||||
<Icon size={16} />
|
<Icon size={this.props.size === 'large' ? 20 : this.props.size === 'small' ? 14 : 16} />
|
||||||
)}
|
)}
|
||||||
{this.props.children && (
|
{this.props.children && (
|
||||||
<span className={css.textInner}>{this.props.children}</span>
|
<span className={css.textInner}>{this.props.children}</span>
|
||||||
@ -48,6 +49,7 @@ export default class Button extends React.Component<Props> {
|
|||||||
[css.button],
|
[css.button],
|
||||||
[css[this.props.color as string], this.props.color],
|
[css[this.props.color as string], this.props.color],
|
||||||
[css.outline, this.props.outline],
|
[css.outline, this.props.outline],
|
||||||
|
[css.block, this.props.block],
|
||||||
[css[this.props.size as string], this.props.size],
|
[css[this.props.size as string], this.props.size],
|
||||||
[css.nomargintop, this.props.nomargintop],
|
[css.nomargintop, this.props.nomargintop],
|
||||||
[css.loading, this.props.loading]
|
[css.loading, this.props.loading]
|
||||||
|
@ -5,28 +5,33 @@ $backColor = #757575
|
|||||||
.label
|
.label
|
||||||
position relative
|
position relative
|
||||||
display flex
|
display flex
|
||||||
padding-left 8px
|
|
||||||
margin 8px
|
|
||||||
user-select none
|
user-select none
|
||||||
|
align-items center
|
||||||
|
|
||||||
|
+ .label
|
||||||
|
margin-top 8px
|
||||||
|
|
||||||
p
|
p
|
||||||
margin-left 18px
|
margin-left 8px
|
||||||
|
|
||||||
span
|
span
|
||||||
top 0
|
top 0
|
||||||
left 0
|
left 0
|
||||||
width 20px
|
width 20px
|
||||||
height @width
|
height @width
|
||||||
position absolute
|
position relative
|
||||||
box-shadow inset 0 0 0 2px $backColor
|
box-shadow inset 0 0 0 2px $grayDark
|
||||||
border-radius 2px
|
border-radius 2px
|
||||||
transition all $transition
|
transition all $transition
|
||||||
|
|
||||||
|
@media (prefers-color-scheme dark)
|
||||||
|
box-shadow inset 0 0 0 2px $grayLight
|
||||||
|
|
||||||
&::after
|
&::after
|
||||||
border-radius 20px
|
border-radius 20px
|
||||||
position absolute
|
position absolute
|
||||||
transition all $transition
|
transition all $transition
|
||||||
background $default
|
background $main
|
||||||
|
|
||||||
svg
|
svg
|
||||||
transition $transition
|
transition $transition
|
||||||
@ -41,19 +46,9 @@ $backColor = #757575
|
|||||||
left 0
|
left 0
|
||||||
opacity 0
|
opacity 0
|
||||||
|
|
||||||
&:focus + span
|
|
||||||
box-shadow inset 0 0 0 2px black, 0 0 0 2px rgba(black,.3)
|
|
||||||
@media (prefers-color-scheme dark)
|
|
||||||
box-shadow inset 0 0 0 2px white, 0 0 0 2px rgba(white,.3)
|
|
||||||
|
|
||||||
&:focus:checked + span
|
|
||||||
box-shadow inset 0 0 0 2px $default, 0 0 0 2px rgba($default,.3)
|
|
||||||
@media (prefers-color-scheme dark)
|
|
||||||
box-shadow inset 0 0 0 2px $default, 0 0 0 2px rgba($default,.3)
|
|
||||||
|
|
||||||
&:checked + span
|
&:checked + span
|
||||||
background rgba($default, .5)
|
background rgba($main, .5)
|
||||||
box-shadow inset 0 0 0 2px $default
|
box-shadow inset 0 0 0 2px $main
|
||||||
|
|
||||||
svg
|
svg
|
||||||
color white
|
color white
|
||||||
@ -67,7 +62,6 @@ $backColor = #757575
|
|||||||
box-shadow inset 0 0 0 2px white
|
box-shadow inset 0 0 0 2px white
|
||||||
|
|
||||||
.radio
|
.radio
|
||||||
margin-left 18px // Margin + margin for Circle
|
|
||||||
span
|
span
|
||||||
border-radius 20px
|
border-radius 20px
|
||||||
|
|
||||||
@ -86,20 +80,19 @@ $backColor = #757575
|
|||||||
.switch
|
.switch
|
||||||
padding 2px 0 2px 10px // 2px base padding 10px circle padding
|
padding 2px 0 2px 10px // 2px base padding 10px circle padding
|
||||||
|
|
||||||
&:hover span
|
&:hover span::after
|
||||||
box-shadow none
|
|
||||||
|
|
||||||
&::after
|
|
||||||
background black
|
background black
|
||||||
|
@media (prefers-color-scheme dark)
|
||||||
|
background white
|
||||||
|
|
||||||
span
|
span
|
||||||
width 28px
|
width 28px
|
||||||
height 14px
|
height 14px
|
||||||
border-radius 20px
|
border-radius 20px
|
||||||
top 50%
|
top 50%
|
||||||
|
margin-right 10px
|
||||||
box-shadow none
|
box-shadow none
|
||||||
background rgba($backColor, .5)
|
background rgba($backColor, .5)
|
||||||
transform translateY(-50%)
|
|
||||||
|
|
||||||
&::after
|
&::after
|
||||||
content " "
|
content " "
|
||||||
@ -115,93 +108,39 @@ $backColor = #757575
|
|||||||
width 20px
|
width 20px
|
||||||
|
|
||||||
&:checked + span
|
&:checked + span
|
||||||
box-shadow none
|
|
||||||
|
|
||||||
&::after
|
&::after
|
||||||
left 100%
|
left 100%
|
||||||
transform translate(-50%, -50%)
|
transform translate(-50%, -50%)
|
||||||
background $default
|
background $main
|
||||||
|
|
||||||
.primary
|
|
||||||
$color = $primary
|
|
||||||
|
|
||||||
|
checkBox($color)
|
||||||
input:checked + span
|
input:checked + span
|
||||||
background rgba($color, .5)
|
background rgba($color, .5)
|
||||||
box-shadow inset 0 0 0 2px $color
|
box-shadow inset 0 0 0 2px $color
|
||||||
|
|
||||||
&::after
|
&::after
|
||||||
background $color
|
background $color
|
||||||
|
input:focus:checked + span
|
||||||
|
box-shadow inset 0 0 0 2px $color, 0 0 0 2px rgba($color,.3)
|
||||||
&.switch
|
&.switch
|
||||||
input:checked + span
|
input:checked + span
|
||||||
box-shadow none
|
box-shadow none
|
||||||
|
|
||||||
.secondary
|
|
||||||
$color = $secondary
|
|
||||||
|
|
||||||
input:checked + span
|
|
||||||
background rgba($color, .5)
|
|
||||||
box-shadow inset 0 0 0 2px $color
|
|
||||||
|
|
||||||
&::after
|
|
||||||
background $color
|
|
||||||
|
|
||||||
&.switch
|
|
||||||
input:checked + span
|
|
||||||
box-shadow none
|
|
||||||
|
|
||||||
.info
|
.info
|
||||||
$color = $info
|
checkBox($infoLight)
|
||||||
|
@media (prefers-color-scheme dark)
|
||||||
input:checked + span
|
checkBox($infoDark)
|
||||||
background rgba($color, .5)
|
|
||||||
box-shadow inset 0 0 0 2px $color
|
|
||||||
|
|
||||||
&::after
|
|
||||||
background $color
|
|
||||||
|
|
||||||
&.switch
|
|
||||||
input:checked + span
|
|
||||||
box-shadow none
|
|
||||||
|
|
||||||
.success
|
.success
|
||||||
$color = $success
|
checkBox($successLight)
|
||||||
|
@media (prefers-color-scheme dark)
|
||||||
|
checkBox($successDark)
|
||||||
|
|
||||||
input:checked + span
|
.error
|
||||||
background rgba($color, .5)
|
checkBox($errorLight)
|
||||||
box-shadow inset 0 0 0 2px $color
|
@media (prefers-color-scheme dark)
|
||||||
|
checkBox($errorDark)
|
||||||
&::after
|
|
||||||
background $color
|
|
||||||
|
|
||||||
&.switch
|
|
||||||
input:checked + span
|
|
||||||
box-shadow none
|
|
||||||
|
|
||||||
.danger
|
|
||||||
$color = $danger
|
|
||||||
|
|
||||||
input:checked + span
|
|
||||||
background rgba($color, .5)
|
|
||||||
box-shadow inset 0 0 0 2px $color
|
|
||||||
|
|
||||||
&::after
|
|
||||||
background $color
|
|
||||||
|
|
||||||
&.switch
|
|
||||||
input:checked + span
|
|
||||||
box-shadow none
|
|
||||||
|
|
||||||
.warning
|
.warning
|
||||||
$color = $warning
|
checkBox($warningLight)
|
||||||
|
@media (prefers-color-scheme dark)
|
||||||
input:checked + span
|
checkBox($warningDark)
|
||||||
background rgba($color, .5)
|
|
||||||
box-shadow inset 0 0 0 2px $color
|
|
||||||
|
|
||||||
&::after
|
|
||||||
background $color
|
|
||||||
|
|
||||||
&.switch
|
|
||||||
input:checked + span
|
|
||||||
box-shadow none
|
|
||||||
|
@ -7,38 +7,32 @@ import css from './Checkbox.module.styl'
|
|||||||
import Text from '../Text'
|
import Text from '../Text'
|
||||||
|
|
||||||
interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
||||||
label?: string
|
label: string
|
||||||
id: string
|
type?: 'checkbox' | 'radio' | 'switch'
|
||||||
type?: undefined
|
|
||||||
radio?: boolean
|
|
||||||
switch?: boolean
|
|
||||||
color?: ColorType
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Checkbox extends React.Component<Props> {
|
export default class Checkbox extends React.Component<Props> {
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
const props: Props = Object.assign({}, this.props)
|
const props: Partial<Props> = Object.assign({}, this.props)
|
||||||
delete props.label
|
delete props.label
|
||||||
delete props.type
|
delete props.type
|
||||||
delete props.color
|
|
||||||
delete props.switch
|
|
||||||
delete props.radio
|
|
||||||
|
|
||||||
const realType = this.props.radio ? 'radio' : 'checkbox'
|
const realType = this.props.type ?? 'checkbox'
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<label htmlFor={this.props.id} className={buildClassName(
|
<label htmlFor={this.props.id ?? this.props.label} className={buildClassName(
|
||||||
[css.label],
|
[css.label],
|
||||||
[css.radio, realType === 'radio'],
|
[css.radio, realType === 'radio'],
|
||||||
[css.switch, this.props.switch],
|
[css.switch, realType === 'switch'],
|
||||||
[css[this.props.color as string], this.props.color]
|
[css[this.props.color as string], this.props.color]
|
||||||
)}>
|
)}>
|
||||||
<input {...props}
|
<input {...props}
|
||||||
type={realType}
|
id={this.props.id ?? this.props.label}
|
||||||
|
type={realType === 'switch' ? 'checkbox' : realType}
|
||||||
/>
|
/>
|
||||||
<span>
|
<span>
|
||||||
{realType === 'checkbox' && ! this.props.switch && (
|
{realType === 'checkbox' && (
|
||||||
<Check strokeWidth={4} size={16}/>
|
<Check strokeWidth={4} size={16}/>
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
padding $gapSize 0 0 $gapSize
|
padding $gapSize 0 0 $gapSize
|
||||||
|
|
||||||
&.nogrow
|
&.nogrow
|
||||||
max-width intial
|
max-width initial
|
||||||
flex-grow 0
|
flex-grow 0
|
||||||
flex-basis initial
|
flex-basis initial
|
||||||
|
|
||||||
|
@ -7,7 +7,9 @@
|
|||||||
background $foregroundDark
|
background $foregroundDark
|
||||||
|
|
||||||
ul
|
ul
|
||||||
list-type none
|
padding 0
|
||||||
|
display flex
|
||||||
|
justify-content center
|
||||||
li
|
li
|
||||||
display inline-block
|
display inline-block
|
||||||
|
|
||||||
|
@ -1,35 +1,31 @@
|
|||||||
@import "../config"
|
@import "../config"
|
||||||
|
|
||||||
$transparent = 75%
|
$percent = 15%
|
||||||
|
|
||||||
.back
|
.back
|
||||||
transition all $transition
|
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
|
.info
|
||||||
$color = $info
|
background linear-gradient(to right, $infoLight, lighten($infoLight, $percent))
|
||||||
background linear-gradient(to left, $color, transparentify($color, $transparent))
|
@media (prefers-color-scheme dark)
|
||||||
|
background linear-gradient(to right, $infoDark, darken($infoDark, $percent))
|
||||||
|
|
||||||
|
|
||||||
.success
|
.success
|
||||||
$color = $success
|
background linear-gradient(to right, $successLight, lighten($successLight, $percent))
|
||||||
background linear-gradient(to left, $color, transparentify($color, $transparent))
|
@media (prefers-color-scheme dark)
|
||||||
|
background linear-gradient(to right, $successDark, darken($successDark, $percent))
|
||||||
|
|
||||||
.danger
|
.error
|
||||||
$color = $danger
|
background linear-gradient(to right, $errorLight, lighten($errorLight, $percent))
|
||||||
background linear-gradient(to left, $color, transparentify($color, $transparent))
|
@media (prefers-color-scheme dark)
|
||||||
|
background linear-gradient(to right, $errorDark, darken($errorDark, $percent))
|
||||||
|
|
||||||
.warning
|
.warning
|
||||||
$color = $warning
|
background linear-gradient(to right, $warningLight, lighten($warningLight, $percent))
|
||||||
background linear-gradient(to left, $color, transparentify($color, $transparent))
|
@media (prefers-color-scheme dark)
|
||||||
|
background linear-gradient(to right, $warningDark, darken($warningDark, $percent))
|
||||||
@media (prefers-color-scheme dark)
|
|
||||||
.back
|
|
||||||
background $darkBackground
|
|
||||||
|
@ -8,12 +8,18 @@ interface Props {
|
|||||||
color?: ColorType
|
color?: ColorType
|
||||||
className?: string
|
className?: string
|
||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
|
fullscreen?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Make the background a linear-gradient
|
||||||
|
*
|
||||||
|
* @version 1.0.1
|
||||||
|
*/
|
||||||
export default class GradientBackground extends React.Component<Props> {
|
export default class GradientBackground extends React.Component<Props> {
|
||||||
|
|
||||||
public render = () => (
|
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, [css.fullscreen, this.props.fullscreen])}>
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
.parent
|
.parent
|
||||||
position relative
|
position relative
|
||||||
|
display inline-flex
|
||||||
|
|
||||||
.image
|
.image
|
||||||
transition .3s
|
transition .3s
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
max-width 100%
|
max-width 100%
|
||||||
display inline-block
|
display inline-block
|
||||||
|
|
||||||
+ .parent
|
&:not(.block) + .parent:not(.block)
|
||||||
margin-left 16px
|
margin-left 16px
|
||||||
|
|
||||||
label
|
label
|
||||||
@ -217,7 +217,7 @@
|
|||||||
@media (prefers-color-scheme dark)
|
@media (prefers-color-scheme dark)
|
||||||
background #202020
|
background #202020
|
||||||
|
|
||||||
&:hover
|
&:hover:not(:disabled)
|
||||||
background rgba(gray, .2)
|
background rgba(gray, .2)
|
||||||
|
|
||||||
@media (prefers-color-scheme dark)
|
@media (prefers-color-scheme dark)
|
||||||
|
@ -24,7 +24,7 @@ interface Props {
|
|||||||
export default class Link extends React.Component<Props> {
|
export default class Link extends React.Component<Props> {
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
const external = this.props.external ?? !this.props.href.startsWith('/')
|
const external = this.props.external ?? this.props.href.startsWith('http')
|
||||||
if (external) {
|
if (external) {
|
||||||
// external link
|
// external link
|
||||||
return (
|
return (
|
||||||
|
@ -6,6 +6,7 @@
|
|||||||
width 100%
|
width 100%
|
||||||
height 7px
|
height 7px
|
||||||
pointer-events none
|
pointer-events none
|
||||||
|
z-index 200
|
||||||
|
|
||||||
top 0
|
top 0
|
||||||
&.hide
|
&.hide
|
||||||
|
@ -4,9 +4,22 @@ import { buildClassName } from '../Util'
|
|||||||
import css from './Loader.module.styl'
|
import css from './Loader.module.styl'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
/**
|
||||||
|
* The new Percentage (if you calculate it yourself)
|
||||||
|
*/
|
||||||
percent?: number
|
percent?: number
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Auto random loader
|
||||||
|
*/
|
||||||
auto?: {
|
auto?: {
|
||||||
|
/**
|
||||||
|
* the minimum and maximum interval between two increment
|
||||||
|
*/
|
||||||
interval: [number, number]
|
interval: [number, number]
|
||||||
|
/**
|
||||||
|
* the minimum and maximum incrementation (MUST be an integer)
|
||||||
|
*/
|
||||||
increment: [number, number]
|
increment: [number, number]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -15,6 +28,11 @@ interface State {
|
|||||||
percent?: number
|
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> {
|
export default class Loader extends React.Component<Props, State> {
|
||||||
|
|
||||||
public state: State = {}
|
public state: State = {}
|
||||||
|
@ -1,19 +0,0 @@
|
|||||||
@import '../config'
|
|
||||||
|
|
||||||
.menu
|
|
||||||
position absolute
|
|
||||||
opacity 0
|
|
||||||
background white
|
|
||||||
pointer-events none
|
|
||||||
border-radius 4px
|
|
||||||
box-shadow 0 2px 4px 2px rgba(black, 25%)
|
|
||||||
z-index 99
|
|
||||||
transition opacity $transition
|
|
||||||
a
|
|
||||||
display block
|
|
||||||
text-align center
|
|
||||||
padding 16px
|
|
||||||
|
|
||||||
&.shown
|
|
||||||
opacity 1
|
|
||||||
pointer-events initial
|
|
@ -1,13 +0,0 @@
|
|||||||
import { Meta } from '@storybook/react/types-6-0'
|
|
||||||
import React from 'react'
|
|
||||||
import Component from '.'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'DZEIO/Menu',
|
|
||||||
component: Component,
|
|
||||||
argTypes: {
|
|
||||||
content: {control: 'array', defaultValue: [{name: 'Name', href: 'https://www.google.com'}]}
|
|
||||||
}
|
|
||||||
} as Meta
|
|
||||||
|
|
||||||
export const Basic = (args: any) => <Component {...args} />
|
|
@ -1,25 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import Link from 'next/link'
|
|
||||||
|
|
||||||
import { buildClassName } from '../Util'
|
|
||||||
import css from './Menu.module.styl'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
pos?: {top?: number, bottom?: number, left?: number, right?: number}
|
|
||||||
content: Array<{name: string, href: string, as?: string}>
|
|
||||||
show?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Menu extends React.Component<Props> {
|
|
||||||
|
|
||||||
public render = () => (
|
|
||||||
<div className={buildClassName([css.menu], [css.shown, this.props.show])} style={this.props.pos}>
|
|
||||||
{this.props.content.map((item, index) => (
|
|
||||||
<Link key={index} href={item.href} as={item.as}>
|
|
||||||
<a>{item.name}</a>
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
@ -56,7 +56,6 @@
|
|||||||
position fixed
|
position fixed
|
||||||
top 70px
|
top 70px
|
||||||
right 0
|
right 0
|
||||||
padding 16px
|
|
||||||
border-bottom-left-radius 4px
|
border-bottom-left-radius 4px
|
||||||
transform translateX(100%)
|
transform translateX(100%)
|
||||||
background inherit
|
background inherit
|
||||||
@ -217,16 +216,19 @@
|
|||||||
padding 0
|
padding 0
|
||||||
|
|
||||||
.userMenu
|
.userMenu
|
||||||
// padding-bottom 16px
|
padding 8px 16px
|
||||||
a
|
a
|
||||||
padding 16px 0
|
display inline-block
|
||||||
|
padding-bottom 16px
|
||||||
|
|
||||||
|
|
||||||
.mobileMenu
|
.mobileMenu
|
||||||
opacity 0
|
opacity 0
|
||||||
transition opacity $transition
|
transition opacity $transition
|
||||||
|
pointer-events none
|
||||||
&.shown
|
&.shown
|
||||||
opacity 1
|
opacity 1
|
||||||
|
pointer-events initial
|
||||||
|
|
||||||
.mainGradient
|
.mainGradient
|
||||||
//WIP
|
//WIP
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
import { Meta, Story } from '@storybook/react/types-6-0'
|
import { Meta, Story } from '@storybook/react/types-6-0'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import { Zap, ZapOff } from 'react-feather'
|
||||||
import Component from '.'
|
import Component from '.'
|
||||||
|
import Text from '../Text'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: 'DZEIO/Navbar',
|
title: 'DZEIO/Navbar',
|
||||||
@ -9,13 +11,10 @@ export default {
|
|||||||
|
|
||||||
export const Basic: Story<any> = (args: any) => <Component {...args} />
|
export const Basic: Story<any> = (args: any) => <Component {...args} />
|
||||||
Basic.args = {
|
Basic.args = {
|
||||||
items: [{
|
type: 'navbar',
|
||||||
path: '/dashboard',
|
logo: {src: '/90-38.svg', width: 90, height: 38},
|
||||||
name: 'Dasboard'
|
|
||||||
}],
|
|
||||||
loginUrl: '/login',
|
loginUrl: '/login',
|
||||||
registerUrl: '/register',
|
registerUrl: '/register',
|
||||||
type: 'navbar',
|
|
||||||
user: {
|
user: {
|
||||||
name: 'Username',
|
name: 'Username',
|
||||||
description: 'User Description',
|
description: 'User Description',
|
||||||
@ -23,8 +22,20 @@ Basic.args = {
|
|||||||
links: [{
|
links: [{
|
||||||
path: '/logout',
|
path: '/logout',
|
||||||
name: 'Logout'
|
name: 'Logout'
|
||||||
}]
|
}, {
|
||||||
|
path: '/logout',
|
||||||
|
name: 'Logout'
|
||||||
|
}],
|
||||||
|
informations: (<Text>Testing :D</Text>)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
logo: {src: '/assets/logo.svg', width: 90, height: 38}
|
items: [{
|
||||||
|
path: '/dashboard',
|
||||||
|
name: 'Dasboard',
|
||||||
|
icon: Zap
|
||||||
|
}, {
|
||||||
|
path: '/dashboard',
|
||||||
|
name: 'Dasboard',
|
||||||
|
icon: ZapOff
|
||||||
|
}],
|
||||||
}
|
}
|
||||||
|
@ -21,7 +21,7 @@ interface Props {
|
|||||||
/**
|
/**
|
||||||
* Logo to display
|
* Logo to display
|
||||||
*/
|
*/
|
||||||
logo: ImageProps & {height: number, width: number}
|
logo?: ImageProps & {height: number, width: number}
|
||||||
/**
|
/**
|
||||||
* Login URL
|
* Login URL
|
||||||
*/
|
*/
|
||||||
@ -68,7 +68,7 @@ interface Props {
|
|||||||
name: string
|
name: string
|
||||||
}>
|
}>
|
||||||
/**
|
/**
|
||||||
* Internal Usem don't use it !
|
* Internal Use don't use it !
|
||||||
*/
|
*/
|
||||||
mobileMenu?: () => void
|
mobileMenu?: () => void
|
||||||
}
|
}
|
||||||
@ -82,7 +82,7 @@ interface State {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Navbar/Sidebar Component
|
* Navbar/Sidebar Component
|
||||||
* @version 1.0.0
|
* @version 1.0.3
|
||||||
*/
|
*/
|
||||||
export default class Navbar extends React.Component<Props, State> {
|
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])}>
|
<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 className={css.header} align="center">
|
||||||
<Col className={css.imgContainer}>
|
{this.props.logo && (
|
||||||
<Link href="/">
|
<Col className={css.imgContainer}>
|
||||||
<Image {...this.props.logo} height={34} width={this.props.logo.width*34/this.props.logo.height} />
|
<Link href="/">
|
||||||
</Link>
|
<Image {...this.props.logo} height={34} width={this.props.logo.width*34/this.props.logo.height} />
|
||||||
</Col>
|
</Link>
|
||||||
|
</Col>
|
||||||
|
)}
|
||||||
{this.getType() === 'sidebar' && (
|
{this.getType() === 'sidebar' && (
|
||||||
<Col nogrow><Text><div onClick={this.onSidebarButton}>
|
<Col nogrow><Text><div onClick={this.onSidebarButton}>
|
||||||
{this.state.short ? (
|
{this.state.short ? (
|
||||||
@ -184,14 +186,14 @@ export default class Navbar extends React.Component<Props, State> {
|
|||||||
)}
|
)}
|
||||||
<ul>
|
<ul>
|
||||||
{!this.state.isMobile && this.props.items.map((item) => (
|
{!this.state.isMobile && this.props.items.map((item) => (
|
||||||
<li key={item.path}><Link noStyle href={item.path}><a>
|
<li key={item.path}><Link noStyle href={item.path}>
|
||||||
<Text className={buildClassName([css.active, this.state.path?.startsWith(item.path)])}>
|
<Text className={buildClassName([css.active, this.state.path?.startsWith(item.path)])}>
|
||||||
{this.getType() === 'sidebar' && item.icon && (
|
{this.getType() === 'sidebar' && item.icon && (
|
||||||
<item.icon />
|
<item.icon />
|
||||||
)}
|
)}
|
||||||
<span>{item.name}</span>
|
<span>{item.name}</span>
|
||||||
</Text>
|
</Text>
|
||||||
</a></Link></li>
|
</Link></li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
<div style={{flex: 1}}></div>
|
<div style={{flex: 1}}></div>
|
||||||
@ -222,7 +224,7 @@ export default class Navbar extends React.Component<Props, State> {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={buildClassName(css.userMenu, [css.menuActive, !this.state.isMobile && this.state.menuActive])}>
|
<div className={buildClassName(css.userMenu, [css.menuActive, !this.state.isMobile && this.state.menuActive])}>
|
||||||
<Row>
|
<Row nomargin>
|
||||||
{this.props.user.menu?.informations && (
|
{this.props.user.menu?.informations && (
|
||||||
<Col>{this.props.user.menu?.informations}</Col>
|
<Col>{this.props.user.menu?.informations}</Col>
|
||||||
)}
|
)}
|
||||||
|
@ -0,0 +1,38 @@
|
|||||||
|
@import '../config.styl'
|
||||||
|
|
||||||
|
.section
|
||||||
|
position fixed
|
||||||
|
bottom 0
|
||||||
|
left 0
|
||||||
|
padding 0 16px
|
||||||
|
max-width 25%
|
||||||
|
@media (max-width $tablet)
|
||||||
|
max-width 50%
|
||||||
|
@media (max-width $mobile)
|
||||||
|
width 100%
|
||||||
|
max-width 100%
|
||||||
|
> div
|
||||||
|
margin-bottom 16px
|
||||||
|
animation spawn 1 forwards ease-in-out .3s
|
||||||
|
|
||||||
|
&.remove
|
||||||
|
animation despawn 1 both ease-in-out .3s
|
||||||
|
|
||||||
|
.title
|
||||||
|
font-weight normal
|
||||||
|
margin 0
|
||||||
|
@keyframes spawn
|
||||||
|
from
|
||||||
|
opacity 0
|
||||||
|
transform translateY(100%)
|
||||||
|
to
|
||||||
|
opacity 1
|
||||||
|
transform translateY(0)
|
||||||
|
|
||||||
|
@keyframes despawn
|
||||||
|
from
|
||||||
|
opacity 1
|
||||||
|
transform translateY(0)
|
||||||
|
to
|
||||||
|
opacity 0
|
||||||
|
transform translateY(100%)
|
@ -0,0 +1,18 @@
|
|||||||
|
import { Meta } from '@storybook/react/types-6-0'
|
||||||
|
import React from 'react'
|
||||||
|
import { Zap } from 'react-feather'
|
||||||
|
import Component from '.'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'DZEIO/NotificationManager',
|
||||||
|
component: Component
|
||||||
|
} as Meta
|
||||||
|
|
||||||
|
export const Basic = (args: any) => <Component {...args} />
|
||||||
|
Basic.args = {
|
||||||
|
ttl: 999999999999,
|
||||||
|
notifications: [
|
||||||
|
'Test',
|
||||||
|
'LArge text lorem ipsum dolor sit amet, i dont know what to type yolo :D'
|
||||||
|
]
|
||||||
|
}
|
179
src/dzeio/NotificationManager/index.tsx
Normal file
179
src/dzeio/NotificationManager/index.tsx
Normal file
@ -0,0 +1,179 @@
|
|||||||
|
import { buildClassName } from '../Util'
|
||||||
|
import Button from '../Button'
|
||||||
|
import Box from '../Box'
|
||||||
|
import Col from '../Col'
|
||||||
|
import Text from '../Text'
|
||||||
|
import Router from 'next/router'
|
||||||
|
import React from 'react'
|
||||||
|
import { X } from 'react-feather'
|
||||||
|
|
||||||
|
import css from './NotificationManager.module.styl'
|
||||||
|
|
||||||
|
export interface Notification {
|
||||||
|
message: string
|
||||||
|
actions?: Array<{
|
||||||
|
txt: string
|
||||||
|
action: (this: HTMLInputElement, event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
|
||||||
|
}>
|
||||||
|
ttl?: number
|
||||||
|
internal?: {
|
||||||
|
timeRemaining: number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
manageRoutes?: boolean
|
||||||
|
ttl?: number
|
||||||
|
notifications?: Array<string | Notification>
|
||||||
|
}
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
notifications: Array<Notification | undefined>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class NotificationManager extends React.Component<Props, State> {
|
||||||
|
|
||||||
|
private static instance: NotificationManager
|
||||||
|
|
||||||
|
|
||||||
|
public state: State = {
|
||||||
|
notifications: []
|
||||||
|
}
|
||||||
|
|
||||||
|
private interval?: NodeJS.Timeout
|
||||||
|
private freezedNotification?: number
|
||||||
|
|
||||||
|
public constructor(props: Props | Readonly<Props>) {
|
||||||
|
super(props)
|
||||||
|
NotificationManager.instance = this
|
||||||
|
}
|
||||||
|
|
||||||
|
public static addNotification(notif: Omit<Notification, 'internal'> | string): number {
|
||||||
|
const realNotif: Notification = typeof notif === 'string' ? { message: notif, ttl: this.instance.props.ttl ?? 2000 } : notif
|
||||||
|
|
||||||
|
if (realNotif.ttl) {
|
||||||
|
realNotif.ttl /= 100
|
||||||
|
realNotif.internal = { timeRemaining: realNotif.ttl }
|
||||||
|
}
|
||||||
|
const notifs = this.instance.state.notifications
|
||||||
|
const id = notifs.push(realNotif) - 1
|
||||||
|
this.instance.setState({
|
||||||
|
notifications: notifs
|
||||||
|
})
|
||||||
|
return id
|
||||||
|
}
|
||||||
|
|
||||||
|
public static removeNotification(id: number, array?: Array<Notification|undefined>) {
|
||||||
|
const notifs = array || this.instance.state.notifications
|
||||||
|
notifs[id] = undefined
|
||||||
|
if (array) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.instance.setState({
|
||||||
|
notifications: notifs
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
public componentDidMount() {
|
||||||
|
if (this.props.notifications) {
|
||||||
|
for (const notif of this.props.notifications) {
|
||||||
|
NotificationManager.addNotification(notif)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.props.manageRoutes) {
|
||||||
|
Router.events.on('routeChangeComplete', this.checkRouteForMessage)
|
||||||
|
this.checkRouteForMessage()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public componentDidUpdate() {
|
||||||
|
if (this.state.notifications.length > 0 && !this.interval) {
|
||||||
|
this.interval = setInterval(() => {
|
||||||
|
const notifs = this.state.notifications
|
||||||
|
for (let id = 0; id < notifs.length; id++) {
|
||||||
|
const notif = notifs[id]
|
||||||
|
if (this.freezedNotification === id && notif?.ttl) {
|
||||||
|
notif.internal = {timeRemaining: notif.ttl}
|
||||||
|
}
|
||||||
|
if (!notif || typeof notif.internal?.timeRemaining !== 'number' || id === this.freezedNotification) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
if (notif.internal.timeRemaining < 1) {
|
||||||
|
NotificationManager.removeNotification(id)
|
||||||
|
}
|
||||||
|
notif.internal.timeRemaining -= 1
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
notifications: notifs
|
||||||
|
})
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
|
if (this.state.notifications.length === 0 && this.interval) {
|
||||||
|
clearInterval(this.interval)
|
||||||
|
this.interval = undefined
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public componentWillUnMount() {
|
||||||
|
if (this.interval) {
|
||||||
|
clearInterval(this.interval)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public render = () => (
|
||||||
|
<section className={css.section}>
|
||||||
|
{this.state.notifications.map((el, index) => {
|
||||||
|
if (el === undefined) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
onMouseEnter={this.onMouseEnter(index)}
|
||||||
|
onMouseLeave={this.onMouseExit(index)}
|
||||||
|
className={buildClassName([css.remove, typeof el.internal?.timeRemaining === 'number' && el.internal.timeRemaining <= 3])}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
title={el.message}
|
||||||
|
titleClassName={css.title}
|
||||||
|
headerButtons={(
|
||||||
|
<Col nogrow>
|
||||||
|
<Text><X onClick={() => NotificationManager.removeNotification(index)} /></Text>
|
||||||
|
</Col>
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{el.actions && (
|
||||||
|
<div>
|
||||||
|
{el.actions.map((btn, aIndex) => (
|
||||||
|
<Button
|
||||||
|
onClick={btn.action as unknown as ((event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void)}
|
||||||
|
key={aIndex}
|
||||||
|
>{btn.txt}</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
|
||||||
|
private onMouseEnter = (id: number) => () => {
|
||||||
|
this.freezedNotification = id
|
||||||
|
}
|
||||||
|
|
||||||
|
private onMouseExit = (id: number) => () => {
|
||||||
|
if (this.freezedNotification === id) {
|
||||||
|
this.freezedNotification = undefined
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private checkRouteForMessage = () => {
|
||||||
|
const msg = Router.query.msg
|
||||||
|
console.log(msg)
|
||||||
|
if (typeof msg === 'string') {
|
||||||
|
NotificationManager.addNotification(decodeURI(msg))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -3,14 +3,12 @@
|
|||||||
.row
|
.row
|
||||||
display flex
|
display flex
|
||||||
flex-wrap wrap
|
flex-wrap wrap
|
||||||
|
margin (0 - $gapSize) 0 0 (0 - $gapSize)
|
||||||
|
padding $gapSize
|
||||||
|
|
||||||
&:not(.nomargin)
|
&.nomargin
|
||||||
margin (0 - $gapSize) 0 0
|
.row
|
||||||
padding 0 $gapSize * 2 0 $gapSize
|
padding 0
|
||||||
|
|
||||||
.row:not(.nomargin)
|
|
||||||
padding 0
|
|
||||||
margin (0 - $gapSize) 0 0 (0 - $gapSize)
|
|
||||||
|
|
||||||
.nowrap
|
.nowrap
|
||||||
flex-wrap nowrap
|
flex-wrap nowrap
|
||||||
|
@ -12,7 +12,6 @@ interface Props {
|
|||||||
|
|
||||||
export default class Text extends React.Component<Props> {
|
export default class Text extends React.Component<Props> {
|
||||||
|
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
const classes = buildClassName(
|
const classes = buildClassName(
|
||||||
css.text,
|
css.text,
|
||||||
@ -23,16 +22,10 @@ export default class Text extends React.Component<Props> {
|
|||||||
this.props.className
|
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>)
|
|
||||||
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>)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return React.createElement(this.props.type || 'p', {className: classes, children: this.props.children})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,17 +1,18 @@
|
|||||||
|
|
||||||
$main = #4285F4
|
$main = #4285F4
|
||||||
$textOnMain = white
|
$textOnMain = white
|
||||||
|
$mainGradient = linear-gradient(to right, $main, lighten($main, 20%))
|
||||||
|
|
||||||
$infoDark = #304FFE
|
$infoDark = #01579B
|
||||||
$infoLight = #29B6F6
|
$infoLight = #29B6F6
|
||||||
|
|
||||||
$successDark = #388E3C
|
$successDark = #1B5E20
|
||||||
$successLight = #4CAF50
|
$successLight = #4CAF50
|
||||||
|
|
||||||
$errorDark = #D32F2F
|
$errorDark = #7F0000
|
||||||
$errorLight = #F44336
|
$errorLight = #F44336
|
||||||
|
|
||||||
$warningDark = #F57C00
|
$warningDark = #C43E00
|
||||||
$warningLight = #FF9800
|
$warningLight = #FF9800
|
||||||
|
|
||||||
$backgroundDark = #161616
|
$backgroundDark = #161616
|
||||||
@ -44,14 +45,7 @@ rem($a)
|
|||||||
($a / 16)rem
|
($a / 16)rem
|
||||||
|
|
||||||
// @deprecated colors
|
// @deprecated colors
|
||||||
$primary = $main
|
|
||||||
$default = $main
|
$default = $main
|
||||||
$secondary = $main
|
|
||||||
$info = $infoLight
|
|
||||||
$success = $successLight
|
|
||||||
$danger = $errorLight
|
|
||||||
$warning = $warningLight
|
|
||||||
$darkBackground = $backgroundDark
|
|
||||||
|
|
||||||
|
|
||||||
// See https://github.com/stylus/stylus/issues/1872#issuecomment-86553717
|
// See https://github.com/stylus/stylus/issues/1872#issuecomment-86553717
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { SVGAttributes } from 'react'
|
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> {
|
export interface IconProps extends SVGAttributes<SVGElement> {
|
||||||
color?: string
|
color?: string
|
||||||
|
@ -4,6 +4,8 @@
|
|||||||
* @summary DZEIO Component Library
|
* @summary DZEIO Component Library
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import './dzeio/general.styl'
|
||||||
|
|
||||||
import Box from './dzeio/Box'
|
import Box from './dzeio/Box'
|
||||||
import Button from './dzeio/Button'
|
import Button from './dzeio/Button'
|
||||||
import Checkbox from './dzeio/Checkbox'
|
import Checkbox from './dzeio/Checkbox'
|
||||||
@ -17,8 +19,8 @@ import Image from './dzeio/Image'
|
|||||||
import Input from './dzeio/Input'
|
import Input from './dzeio/Input'
|
||||||
import Link from './dzeio/Link'
|
import Link from './dzeio/Link'
|
||||||
import Loader from './dzeio/Loader'
|
import Loader from './dzeio/Loader'
|
||||||
import Menu from './dzeio/Menu'
|
|
||||||
import Navbar from './dzeio/Navbar'
|
import Navbar from './dzeio/Navbar'
|
||||||
|
import NotificationManager from './dzeio/NotificationManager'
|
||||||
import Overflow from './dzeio/Overflow'
|
import Overflow from './dzeio/Overflow'
|
||||||
import Popup from './dzeio/Popup'
|
import Popup from './dzeio/Popup'
|
||||||
import Row from './dzeio/Row'
|
import Row from './dzeio/Row'
|
||||||
@ -40,8 +42,8 @@ export {
|
|||||||
Input,
|
Input,
|
||||||
Link,
|
Link,
|
||||||
Loader,
|
Loader,
|
||||||
Menu,
|
|
||||||
Navbar,
|
Navbar,
|
||||||
|
NotificationManager,
|
||||||
Overflow,
|
Overflow,
|
||||||
Popup,
|
Popup,
|
||||||
Row,
|
Row,
|
||||||
|
Reference in New Issue
Block a user