mirror of
https://github.com/dzeiocom/components.git
synced 2025-04-22 10:52:16 +00:00
Initial Commit
This commit is contained in:
commit
4eb95368dd
GPG Key ID:
50BD648F12C86AB6
6
.gitignore
vendored
Normal file
6
.gitignore
vendored
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
module/
|
||||||
|
storybook-static/
|
||||||
|
index.js
|
||||||
|
style.css
|
||||||
|
yarn-error.log
|
||||||
|
node_modules
|
||||||
11
.npmignore
Normal file
11
.npmignore
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
.storybook/
|
||||||
|
src/
|
||||||
|
storybook-static/
|
||||||
|
.gitignore
|
||||||
|
.npmignore
|
||||||
|
rollup.config.js
|
||||||
|
tsconfig.json
|
||||||
|
yarn.lock
|
||||||
|
yarn-error.log
|
||||||
|
tsconfig.json
|
||||||
|
yarn-error.log
|
||||||
21
.storybook/main.js
Normal file
21
.storybook/main.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
const path = require("path");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
"stories": [
|
||||||
|
"../src/dzeio/**/*.stories.@(js|jsx|ts|tsx)",
|
||||||
|
],
|
||||||
|
"addons": [
|
||||||
|
"@storybook/addon-links",
|
||||||
|
"@storybook/addon-essentials"
|
||||||
|
],
|
||||||
|
typescript: {
|
||||||
|
check: false,
|
||||||
|
checkOptions: {},
|
||||||
|
reactDocgen: 'react-docgen-typescript',
|
||||||
|
reactDocgenTypescriptOptions: {
|
||||||
|
shouldExtractLiteralValuesFromEnum: true,
|
||||||
|
propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
presets: [path.resolve(__dirname, "./next.js")]
|
||||||
|
}
|
||||||
36
.storybook/next.js
Normal file
36
.storybook/next.js
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
module.exports = {
|
||||||
|
webpackFinal: async (baseConfig, options) => {
|
||||||
|
const { module = {} } = baseConfig;
|
||||||
|
|
||||||
|
const newConfig = {
|
||||||
|
...baseConfig,
|
||||||
|
module: {
|
||||||
|
...module,
|
||||||
|
rules: [...(module.rules || [])],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// TypeScript
|
||||||
|
newConfig.module.rules.push({
|
||||||
|
test: /\.(ts|tsx)$/,
|
||||||
|
// include: [path.resolve(__dirname, '../src/client/components')],
|
||||||
|
use: ['babel-loader', 'ts-loader']
|
||||||
|
});
|
||||||
|
newConfig.resolve.extensions.push('.ts', '.tsx');
|
||||||
|
|
||||||
|
// SCSS
|
||||||
|
newConfig.module.rules.push({
|
||||||
|
test: /\.styl$/,
|
||||||
|
use: ['style-loader', {
|
||||||
|
loader: 'css-loader',
|
||||||
|
options: {
|
||||||
|
importLoaders: 1,
|
||||||
|
modules: true
|
||||||
|
},
|
||||||
|
}, 'stylus-loader'],
|
||||||
|
});
|
||||||
|
newConfig.resolve.extensions.push('.styl');
|
||||||
|
|
||||||
|
return newConfig;
|
||||||
|
},
|
||||||
|
};
|
||||||
4
.storybook/preview.js
Normal file
4
.storybook/preview.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
|
||||||
|
export const parameters = {
|
||||||
|
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||||
|
}
|
||||||
50
package.json
Normal file
50
package.json
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
{
|
||||||
|
"name": "@dzeio/components",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"license": "MIT",
|
||||||
|
"main": "./index.js",
|
||||||
|
"module": "./module/index.js",
|
||||||
|
"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-actions": "^6.1.14",
|
||||||
|
"@storybook/addon-essentials": "^6.1.14",
|
||||||
|
"@storybook/addon-knobs": "^6.1.14",
|
||||||
|
"@storybook/addon-links": "^6.1.14",
|
||||||
|
"@storybook/cli": "^6.1.14",
|
||||||
|
"@storybook/react": "^6.1.14",
|
||||||
|
"@types/node": "^14.14.28",
|
||||||
|
"@types/react": "^17.0.2",
|
||||||
|
"@types/react-dom": "^17.0.1",
|
||||||
|
"babel-loader": "^8.2.2",
|
||||||
|
"css-loader": "^5.0.2",
|
||||||
|
"next": "^10.0.5",
|
||||||
|
"react": "^17.0.1",
|
||||||
|
"react-dom": "^17.0.1",
|
||||||
|
"react-feather": "^2.0.9",
|
||||||
|
"rollup": "^2.39.0",
|
||||||
|
"rollup-plugin-styles": "^3.14.1",
|
||||||
|
"style-loader": "^2.0.0",
|
||||||
|
"stylus": "^0.54.8",
|
||||||
|
"stylus-loader": "^4.3.3",
|
||||||
|
"ts-loader": "^8.0.17",
|
||||||
|
"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"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"storybook": "start-storybook -p 6006",
|
||||||
|
"build-storybook": "build-storybook",
|
||||||
|
"build": "tsc || rollup --config",
|
||||||
|
"prepublishOnly": "yarn build"
|
||||||
|
}
|
||||||
|
}
|
||||||
32
rollup.config.js
Normal file
32
rollup.config.js
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import typescript from '@rollup/plugin-typescript';
|
||||||
|
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(), // so Rollup can convert TypeScript to JavaScript
|
||||||
|
],
|
||||||
|
output: [
|
||||||
|
{
|
||||||
|
dir: './',
|
||||||
|
format: 'cjs',
|
||||||
|
assetFileNames: 'style.css'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
file: pkg.module,
|
||||||
|
format: 'es',
|
||||||
|
assetFileNames: 'style.css'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
2
src/dzeio/Box/BoxBody/BoxBody.module.styl
Normal file
2
src/dzeio/Box/BoxBody/BoxBody.module.styl
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
.body
|
||||||
|
padding 0 16px 16px
|
||||||
18
src/dzeio/Box/BoxBody/index.tsx
Normal file
18
src/dzeio/Box/BoxBody/index.tsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
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>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
21
src/dzeio/Box/BoxHeader/BoxHeader.module.styl
Normal file
21
src/dzeio/Box/BoxHeader/BoxHeader.module.styl
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
@import "../../config.styl"
|
||||||
|
|
||||||
|
.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)
|
||||||
|
margin 0 0 8px
|
||||||
|
|
||||||
|
.subtitle
|
||||||
|
font-size rem(14)
|
||||||
|
margin 0
|
||||||
56
src/dzeio/Box/BoxHeader/index.tsx
Normal file
56
src/dzeio/Box/BoxHeader/index.tsx
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import { buildClassName } from '../../Util'
|
||||||
|
import css from './BoxHeader.module.styl'
|
||||||
|
import Row from '../../Row'
|
||||||
|
import Col from '../../Col'
|
||||||
|
import Text from '../../Text'
|
||||||
|
|
||||||
|
|
||||||
|
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.delimiter, this.props.delimiter]
|
||||||
|
)}>
|
||||||
|
<Row>
|
||||||
|
<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>
|
||||||
|
<Row justify="flex-end">
|
||||||
|
{this.props.children}
|
||||||
|
</Row>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Header
|
||||||
|
delimiter?: boolean
|
||||||
|
picture?: string // url
|
||||||
|
category?: string // subtitle but above title
|
||||||
|
title string
|
||||||
|
subtitle string
|
||||||
|
center?: boolean // if Center children is not used
|
||||||
|
children?: content
|
||||||
|
*/
|
||||||
21
src/dzeio/Box/BoxWrapper/BoxWrapper.module.styl
Normal file
21
src/dzeio/Box/BoxWrapper/BoxWrapper.module.styl
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
@import "../../config"
|
||||||
|
|
||||||
|
.box
|
||||||
|
background white
|
||||||
|
border-radius 8px
|
||||||
|
box-shadow 0px 2px 4px 0px rgba(black, .33)
|
||||||
|
transition all $transition
|
||||||
|
|
||||||
|
.outline
|
||||||
|
border 2px solid #E0E0E0
|
||||||
|
box-shadow none
|
||||||
|
transition border-color $transition
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
border-color darken(@border[2], 20%)
|
||||||
|
|
||||||
|
@media (prefers-color-scheme dark)
|
||||||
|
.box
|
||||||
|
background #202020
|
||||||
|
.outline
|
||||||
|
border-color #1F1F1F
|
||||||
28
src/dzeio/Box/BoxWrapper/index.tsx
Normal file
28
src/dzeio/Box/BoxWrapper/index.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
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
|
||||||
|
*/
|
||||||
53
src/dzeio/Box/index.tsx
Normal file
53
src/dzeio/Box/index.tsx
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import BoxWrapper from './BoxWrapper'
|
||||||
|
import BoxHeader from './BoxHeader'
|
||||||
|
import BoxBody from './BoxBody'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
|
||||||
|
// Wrapper
|
||||||
|
outline?: boolean
|
||||||
|
className?: string
|
||||||
|
|
||||||
|
// Header
|
||||||
|
title?: string
|
||||||
|
titleColSize?: number
|
||||||
|
subtitle?: string
|
||||||
|
delimiter?: boolean
|
||||||
|
titleClassName?: string
|
||||||
|
|
||||||
|
headerButtons?: React.ReactNode
|
||||||
|
|
||||||
|
// Body
|
||||||
|
noPadding?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Box extends React.Component<Props> {
|
||||||
|
public render = () => (
|
||||||
|
<BoxWrapper outline={this.props.outline} className={this.props.className}>
|
||||||
|
{(this.props.headerButtons || this.props.title || this.props.titleColSize || this.props.subtitle || this.props.delimiter || this.props.titleClassName) && (
|
||||||
|
<BoxHeader
|
||||||
|
title={this.props.title}
|
||||||
|
titleColSize={this.props.titleColSize}
|
||||||
|
subtitle={this.props.subtitle}
|
||||||
|
delimiter={this.props.delimiter}
|
||||||
|
titleClassName={this.props.titleClassName}
|
||||||
|
>
|
||||||
|
{this.props.headerButtons}
|
||||||
|
</BoxHeader>
|
||||||
|
)}
|
||||||
|
<BoxHeader></BoxHeader>
|
||||||
|
<BoxBody noPadding={this.props.noPadding}>
|
||||||
|
{this.props.children}
|
||||||
|
</BoxBody>
|
||||||
|
</BoxWrapper>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export {
|
||||||
|
BoxWrapper,
|
||||||
|
BoxHeader,
|
||||||
|
BoxBody
|
||||||
|
}
|
||||||
201
src/dzeio/Button/Button.module.styl
Normal file
201
src/dzeio/Button/Button.module.styl
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
@import '../config'
|
||||||
|
|
||||||
|
.button
|
||||||
|
font-size rem(16)
|
||||||
|
position relative
|
||||||
|
transition all $transition
|
||||||
|
font-weight 600
|
||||||
|
line-height 1.5
|
||||||
|
display inline-flex
|
||||||
|
padding 10px 20px
|
||||||
|
margin 8px 8px 0 8px
|
||||||
|
cursor pointer
|
||||||
|
align-items center
|
||||||
|
text-align center
|
||||||
|
border-radius 4px
|
||||||
|
border none
|
||||||
|
justify-content center
|
||||||
|
color white
|
||||||
|
background-color $default
|
||||||
|
|
||||||
|
// Chrome Specific
|
||||||
|
outline none
|
||||||
|
|
||||||
|
// Link specific
|
||||||
|
text-decoration none
|
||||||
|
|
||||||
|
&.nomargintop
|
||||||
|
margin-top 0
|
||||||
|
|
||||||
|
&.outline
|
||||||
|
border 2px solid @background-color
|
||||||
|
padding 8px 18px // @padding - @border
|
||||||
|
background transparent
|
||||||
|
color @background-color
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
&:active
|
||||||
|
&:focus
|
||||||
|
color @color
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color @background-color
|
||||||
|
transform translateY(-2px)
|
||||||
|
box-shadow 0 4px 4px rgba(@background-color,.2)
|
||||||
|
|
||||||
|
&:active
|
||||||
|
&:focus
|
||||||
|
background-color darken(@background-color, 30%)
|
||||||
|
|
||||||
|
&.large
|
||||||
|
padding 15px 30px
|
||||||
|
font-size rem(20)
|
||||||
|
|
||||||
|
&.outline
|
||||||
|
padding 13px 28px // @padding - @border
|
||||||
|
|
||||||
|
&.small
|
||||||
|
padding 5px 10px
|
||||||
|
font-size rem(14)
|
||||||
|
|
||||||
|
&.outline
|
||||||
|
padding 3px 8px // @padding - @border
|
||||||
|
|
||||||
|
&.block
|
||||||
|
display flex
|
||||||
|
width 100%
|
||||||
|
margin 0
|
||||||
|
margin-top 8px
|
||||||
|
|
||||||
|
&:disabled
|
||||||
|
background #E0E0E0 !important
|
||||||
|
color #B0B0B0 !important
|
||||||
|
transform none !important
|
||||||
|
box-shadow none !important
|
||||||
|
cursor initial
|
||||||
|
|
||||||
|
&.loading
|
||||||
|
color transparent !important
|
||||||
|
position relative
|
||||||
|
pointer-events none
|
||||||
|
|
||||||
|
&::after
|
||||||
|
content ""
|
||||||
|
display block
|
||||||
|
border white 2px solid
|
||||||
|
border-color transparent transparent white white
|
||||||
|
width 1em
|
||||||
|
position absolute
|
||||||
|
top calc(50% - (1em / 2))
|
||||||
|
left calc(50% - (1em / 2))
|
||||||
|
border-radius 100%
|
||||||
|
height 1em
|
||||||
|
box-sizing inherit
|
||||||
|
animation ButtonLoading 1s infinite linear
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.textInner
|
||||||
|
margin-left 8px
|
||||||
|
|
||||||
|
.primary
|
||||||
|
background-color $primary
|
||||||
|
&.outline
|
||||||
|
color @background-color
|
||||||
|
border-color @background-color
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color @background-color
|
||||||
|
|
||||||
|
&:active
|
||||||
|
&:focus
|
||||||
|
background-color darken(@background-color, 30%)
|
||||||
|
|
||||||
|
&.loading::after
|
||||||
|
border-color transparent transparent @background-color @background-color
|
||||||
|
|
||||||
|
.secondary
|
||||||
|
background-color $secondary
|
||||||
|
color black
|
||||||
|
&.outline
|
||||||
|
color @color
|
||||||
|
border-color @background-color
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color @background-color
|
||||||
|
|
||||||
|
&:active
|
||||||
|
&:focus
|
||||||
|
background-color darken(@background-color, 30%)
|
||||||
|
|
||||||
|
&.loading::after
|
||||||
|
border-color transparent transparent @color @color
|
||||||
|
.info
|
||||||
|
background-color $info
|
||||||
|
&.outline
|
||||||
|
color @background-color
|
||||||
|
border-color @background-color
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color @background-color
|
||||||
|
|
||||||
|
&:active
|
||||||
|
&:focus
|
||||||
|
background-color darken(@background-color, 30%)
|
||||||
|
|
||||||
|
&.loading::after
|
||||||
|
border-color transparent transparent @background-color @background-color
|
||||||
|
.success
|
||||||
|
background-color $success
|
||||||
|
&.outline
|
||||||
|
color @background-color
|
||||||
|
border-color @background-color
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color @background-color
|
||||||
|
|
||||||
|
&:active
|
||||||
|
&:focus
|
||||||
|
background-color darken(@background-color, 30%)
|
||||||
|
|
||||||
|
&.loading::after
|
||||||
|
border-color transparent transparent @background-color @background-color
|
||||||
|
.danger
|
||||||
|
background-color $danger
|
||||||
|
|
||||||
|
&.outline
|
||||||
|
color @background-color
|
||||||
|
border-color @background-color
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color @background-color
|
||||||
|
|
||||||
|
&:active
|
||||||
|
&:focus
|
||||||
|
background-color darken(@background-color, 30%)
|
||||||
|
|
||||||
|
&.loading::after
|
||||||
|
border-color transparent transparent @background-color @background-color
|
||||||
|
.warning
|
||||||
|
background-color $warning
|
||||||
|
|
||||||
|
&.outline
|
||||||
|
color @background-color
|
||||||
|
border-color @background-color
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color @background-color
|
||||||
|
|
||||||
|
&:active
|
||||||
|
&:focus
|
||||||
|
background-color darken(@background-color, 30%)
|
||||||
|
|
||||||
|
&.loading::after
|
||||||
|
border-color transparent transparent @background-color @background-color
|
||||||
|
|
||||||
|
@keyframes ButtonLoading
|
||||||
|
0%
|
||||||
|
transform rotate(0)
|
||||||
|
|
||||||
|
100%
|
||||||
|
transform rotate(365deg)
|
||||||
18
src/dzeio/Button/Button.stories.js
Normal file
18
src/dzeio/Button/Button.stories.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
var __assign = (this && this.__assign) || function () {
|
||||||
|
__assign = Object.assign || function(t) {
|
||||||
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||||
|
s = arguments[i];
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||||
|
t[p] = s[p];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
return __assign.apply(this, arguments);
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import Component from '.';
|
||||||
|
export default {
|
||||||
|
title: 'DZEIO/Button',
|
||||||
|
component: Component
|
||||||
|
};
|
||||||
|
export var Basic = function (args) { return React.createElement(Component, __assign({}, args), "Button"); };
|
||||||
10
src/dzeio/Button/Button.stories.tsx
Normal file
10
src/dzeio/Button/Button.stories.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { Meta } from '@storybook/react/types-6-0'
|
||||||
|
import React from 'react'
|
||||||
|
import Component from '.'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'DZEIO/Button',
|
||||||
|
component: Component
|
||||||
|
} as Meta
|
||||||
|
|
||||||
|
export const Basic = (args: any) => <Component {...args}>Button</Component>
|
||||||
67
src/dzeio/Button/index.tsx
Normal file
67
src/dzeio/Button/index.tsx
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
import React, { FC } from 'react'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { ColorType, IconProps } from '../interfaces'
|
||||||
|
import { buildClassName } from '../Util'
|
||||||
|
import Image from '../Image'
|
||||||
|
|
||||||
|
import css from './Button.module.styl'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
outline?: boolean
|
||||||
|
nomargintop?: boolean
|
||||||
|
color?: ColorType
|
||||||
|
children?: React.ReactNode
|
||||||
|
icon?: FC<IconProps> | string
|
||||||
|
size?: 'large' | 'small' | 'block'
|
||||||
|
href?: string
|
||||||
|
as?: string
|
||||||
|
disabled?: boolean
|
||||||
|
loading?: boolean
|
||||||
|
onClick?: (event: React.MouseEvent<HTMLButtonElement|HTMLAnchorElement, MouseEvent>) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Button extends React.Component<Props> {
|
||||||
|
|
||||||
|
public render = () => {
|
||||||
|
|
||||||
|
let inner: any = this.props.children
|
||||||
|
|
||||||
|
if (!this.props.loading && this.props.icon) {
|
||||||
|
const Icon = this.props.icon
|
||||||
|
inner = (
|
||||||
|
<>
|
||||||
|
{typeof Icon === 'string' ? (
|
||||||
|
<Image src={Icon} max={{ height: 16, width: 16 }} />
|
||||||
|
) : (
|
||||||
|
<Icon size={16} />
|
||||||
|
)}
|
||||||
|
{this.props.children && (
|
||||||
|
<span className={css.textInner}>{this.props.children}</span>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const classes = buildClassName(
|
||||||
|
[css.button],
|
||||||
|
[css[this.props.color as string], this.props.color],
|
||||||
|
[css.outline, this.props.outline],
|
||||||
|
[css[this.props.size as string], this.props.size],
|
||||||
|
[css.nomargintop, this.props.nomargintop],
|
||||||
|
[css.loading, this.props.loading]
|
||||||
|
)
|
||||||
|
|
||||||
|
if (this.props.href) {
|
||||||
|
return (
|
||||||
|
<Link href={this.props.href} as={this.props.as}>
|
||||||
|
<a onClick={this.props.onClick} className={buildClassName([classes], [css.disabled, this.props.disabled])}>{inner}</a>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button onClick={this.props.onClick} disabled={this.props.disabled} className={classes}>{inner}</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
207
src/dzeio/Checkbox/Checkbox.module.styl
Normal file
207
src/dzeio/Checkbox/Checkbox.module.styl
Normal file
@ -0,0 +1,207 @@
|
|||||||
|
@import "../config.styl"
|
||||||
|
|
||||||
|
$backColor = #757575
|
||||||
|
|
||||||
|
.label
|
||||||
|
position relative
|
||||||
|
display flex
|
||||||
|
padding-left 8px
|
||||||
|
margin 8px
|
||||||
|
user-select none
|
||||||
|
|
||||||
|
p
|
||||||
|
margin-left 18px
|
||||||
|
|
||||||
|
span
|
||||||
|
top 0
|
||||||
|
left 0
|
||||||
|
width 20px
|
||||||
|
height @width
|
||||||
|
position absolute
|
||||||
|
box-shadow inset 0 0 0 2px $backColor
|
||||||
|
border-radius 2px
|
||||||
|
transition all $transition
|
||||||
|
|
||||||
|
&::after
|
||||||
|
border-radius 20px
|
||||||
|
position absolute
|
||||||
|
transition all $transition
|
||||||
|
background $default
|
||||||
|
|
||||||
|
svg
|
||||||
|
transition $transition
|
||||||
|
transform scale(0)
|
||||||
|
color transparent
|
||||||
|
margin 2px
|
||||||
|
|
||||||
|
input
|
||||||
|
// visibility hidden
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
left 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
|
||||||
|
background rgba($default, .5)
|
||||||
|
box-shadow inset 0 0 0 2px $default
|
||||||
|
|
||||||
|
svg
|
||||||
|
color white
|
||||||
|
transform scale(1)
|
||||||
|
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
span
|
||||||
|
box-shadow inset 0 0 0 2px black
|
||||||
|
@media (prefers-color-scheme dark)
|
||||||
|
box-shadow inset 0 0 0 2px white
|
||||||
|
|
||||||
|
.radio
|
||||||
|
margin-left 18px // Margin + margin for Circle
|
||||||
|
span
|
||||||
|
border-radius 20px
|
||||||
|
|
||||||
|
&::after
|
||||||
|
content " "
|
||||||
|
top 5px
|
||||||
|
left 5px
|
||||||
|
width 10px
|
||||||
|
height @width
|
||||||
|
transform scale(0)
|
||||||
|
|
||||||
|
input:checked + span::after
|
||||||
|
transform scale(1)
|
||||||
|
background white
|
||||||
|
|
||||||
|
.switch
|
||||||
|
padding 2px 0 2px 10px // 2px base padding 10px circle padding
|
||||||
|
|
||||||
|
&:hover span
|
||||||
|
box-shadow none
|
||||||
|
|
||||||
|
&::after
|
||||||
|
background black
|
||||||
|
|
||||||
|
span
|
||||||
|
width 28px
|
||||||
|
height 14px
|
||||||
|
border-radius 20px
|
||||||
|
top 50%
|
||||||
|
box-shadow none
|
||||||
|
background rgba($backColor, .5)
|
||||||
|
transform translateY(-50%)
|
||||||
|
|
||||||
|
&::after
|
||||||
|
content " "
|
||||||
|
top 50%
|
||||||
|
transform translate(-50%, -50%)
|
||||||
|
left 0
|
||||||
|
background $backColor
|
||||||
|
width 20px
|
||||||
|
height @width
|
||||||
|
|
||||||
|
input
|
||||||
|
margin 0 8px
|
||||||
|
width 20px
|
||||||
|
|
||||||
|
&:checked + span
|
||||||
|
box-shadow none
|
||||||
|
|
||||||
|
&::after
|
||||||
|
left 100%
|
||||||
|
transform translate(-50%, -50%)
|
||||||
|
background $default
|
||||||
|
|
||||||
|
.primary
|
||||||
|
$color = $primary
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
.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
|
||||||
|
$color = $info
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
.success
|
||||||
|
$color = $success
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
.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
|
||||||
|
$color = $warning
|
||||||
|
|
||||||
|
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
|
||||||
18
src/dzeio/Checkbox/Checkbox.stories.js
Normal file
18
src/dzeio/Checkbox/Checkbox.stories.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
var __assign = (this && this.__assign) || function () {
|
||||||
|
__assign = Object.assign || function(t) {
|
||||||
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||||
|
s = arguments[i];
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||||
|
t[p] = s[p];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
return __assign.apply(this, arguments);
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import Checkbox from '.';
|
||||||
|
export default {
|
||||||
|
title: 'DZEIO/Checkbox',
|
||||||
|
component: Checkbox
|
||||||
|
};
|
||||||
|
export var Basic = function (args) { return React.createElement(Checkbox, __assign({}, args)); };
|
||||||
10
src/dzeio/Checkbox/Checkbox.stories.tsx
Normal file
10
src/dzeio/Checkbox/Checkbox.stories.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { Meta } from '@storybook/react/types-6-0'
|
||||||
|
import React from 'react'
|
||||||
|
import Checkbox from '.'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'DZEIO/Checkbox',
|
||||||
|
component: Checkbox
|
||||||
|
} as Meta
|
||||||
|
|
||||||
|
export const Basic = (args: any) => <Checkbox {...args} />
|
||||||
51
src/dzeio/Checkbox/index.tsx
Normal file
51
src/dzeio/Checkbox/index.tsx
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { Check } from 'react-feather'
|
||||||
|
import { buildClassName } from '../Util'
|
||||||
|
|
||||||
|
import { ColorType } from '../interfaces'
|
||||||
|
import css from './Checkbox.module.styl'
|
||||||
|
import Text from '../Text'
|
||||||
|
|
||||||
|
interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
||||||
|
label?: string
|
||||||
|
id: string
|
||||||
|
type?: undefined
|
||||||
|
radio?: boolean
|
||||||
|
switch?: boolean
|
||||||
|
color?: ColorType
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Checkbox extends React.Component<Props> {
|
||||||
|
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const props: Props = Object.assign({}, this.props)
|
||||||
|
delete props.label
|
||||||
|
delete props.type
|
||||||
|
delete props.color
|
||||||
|
delete props.switch
|
||||||
|
delete props.radio
|
||||||
|
|
||||||
|
const realType = this.props.radio ? 'radio' : 'checkbox'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<label htmlFor={this.props.id} className={buildClassName(
|
||||||
|
[css.label],
|
||||||
|
[css.radio, realType === 'radio'],
|
||||||
|
[css.switch, this.props.switch],
|
||||||
|
[css[this.props.color as string], this.props.color]
|
||||||
|
)}>
|
||||||
|
<input {...props}
|
||||||
|
type={realType}
|
||||||
|
/>
|
||||||
|
<span>
|
||||||
|
{realType === 'checkbox' && ! this.props.switch && (
|
||||||
|
<Check strokeWidth={4} size={16}/>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<Text>{this.props.label}</Text>
|
||||||
|
</label>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
5
src/dzeio/Code/Code.module.styl
Normal file
5
src/dzeio/Code/Code.module.styl
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
.code
|
||||||
|
font-family 'source code pro', monospace
|
||||||
|
background #E8EAF6
|
||||||
|
padding 4px 8px
|
||||||
|
border-radius 8px
|
||||||
25
src/dzeio/Code/Code.stories.js
Normal file
25
src/dzeio/Code/Code.stories.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
var __assign = (this && this.__assign) || function () {
|
||||||
|
__assign = Object.assign || function(t) {
|
||||||
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||||
|
s = arguments[i];
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||||
|
t[p] = s[p];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
return __assign.apply(this, arguments);
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import Component from '.';
|
||||||
|
export default {
|
||||||
|
title: 'DZEIO/Code',
|
||||||
|
component: Component,
|
||||||
|
argTypes: {
|
||||||
|
content: { control: 'text', defaultValue: 'Code Block' }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
export var Basic = function (args) {
|
||||||
|
var content = args.content;
|
||||||
|
delete args.content;
|
||||||
|
return (React.createElement(Component, __assign({}, args), content));
|
||||||
|
};
|
||||||
20
src/dzeio/Code/Code.stories.tsx
Normal file
20
src/dzeio/Code/Code.stories.tsx
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import { Meta } from '@storybook/react/types-6-0'
|
||||||
|
import React from 'react'
|
||||||
|
import Component from '.'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'DZEIO/Code',
|
||||||
|
component: Component,
|
||||||
|
argTypes: {
|
||||||
|
content: { control: 'text', defaultValue: 'Code Block'}
|
||||||
|
}
|
||||||
|
} as Meta
|
||||||
|
|
||||||
|
export const Basic = (args: any) => {
|
||||||
|
const content = args.content
|
||||||
|
delete args.content
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Component {...args}>{content}</Component>
|
||||||
|
)
|
||||||
|
}
|
||||||
28
src/dzeio/Code/index.tsx
Normal file
28
src/dzeio/Code/index.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import css from './Code.module.styl'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
block?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Code extends React.Component<Props> {
|
||||||
|
|
||||||
|
public render = () => {
|
||||||
|
const code = (
|
||||||
|
<code className={css.code}>
|
||||||
|
{this.props.children}
|
||||||
|
</code>
|
||||||
|
)
|
||||||
|
if (!this.props.block) {
|
||||||
|
return code
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<pre>
|
||||||
|
{code}
|
||||||
|
</pre>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
55
src/dzeio/Col/Col.module.styl
Normal file
55
src/dzeio/Col/Col.module.styl
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
@import "../config"
|
||||||
|
|
||||||
|
.col
|
||||||
|
max-width 100%
|
||||||
|
flex-basis 0
|
||||||
|
flex-grow 1
|
||||||
|
padding $gapSize 0 0 $gapSize
|
||||||
|
|
||||||
|
&.nogrow
|
||||||
|
max-width intial
|
||||||
|
flex-grow 0
|
||||||
|
flex-basis initial
|
||||||
|
|
||||||
|
for i in (0...$colCount+1)
|
||||||
|
.col-{i}
|
||||||
|
if i == 0
|
||||||
|
display none
|
||||||
|
else
|
||||||
|
flex 0 0 ((i / 12) * 100)%
|
||||||
|
min-width ((i / 12) * 100)%
|
||||||
|
|
||||||
|
if i != $colCount and i != 0
|
||||||
|
.offset-{i}
|
||||||
|
margin-left ((i / 12) * 100)% + (i * $gapSize + $gapSize)px
|
||||||
|
|
||||||
|
@media (max-width $tablet)
|
||||||
|
.col.tabletGrow
|
||||||
|
flex-grow 1
|
||||||
|
|
||||||
|
for i in (0...$colCountTablet+1)
|
||||||
|
.col-tablet-{i}
|
||||||
|
if i == 0
|
||||||
|
display none
|
||||||
|
else
|
||||||
|
flex 0 0 ((i / $colCountTablet) * 100)%
|
||||||
|
min-width ((i / $colCountTablet) * 100)%
|
||||||
|
|
||||||
|
if i != $colCountTablet and i != 0
|
||||||
|
.offset-tablet-{i}
|
||||||
|
margin-left ((i / $colCountTablet) * 100)% + (i * $gapSize - $gapSize)
|
||||||
|
|
||||||
|
@media (max-width $mobile)
|
||||||
|
.col.mobileGrow
|
||||||
|
flex-grow 1
|
||||||
|
|
||||||
|
for i in (0...$colCountMobile+1)
|
||||||
|
.col-mobile-{i}
|
||||||
|
if i == 0
|
||||||
|
display none
|
||||||
|
else
|
||||||
|
flex 0 0 ((i / $colCountMobile) * 100)%
|
||||||
|
min-width ((i / $colCountMobile) * 100)%
|
||||||
|
if i != $colCountMobile and i != 0
|
||||||
|
.offset-tablet-{i}
|
||||||
|
margin-left ((i / $colCountMobile) * 100)% + (i * $gapSize - $gapSize)
|
||||||
120
src/dzeio/Col/DebugCols.js
Normal file
120
src/dzeio/Col/DebugCols.js
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
var __extends = (this && this.__extends) || (function () {
|
||||||
|
var extendStatics = function (d, b) {
|
||||||
|
extendStatics = Object.setPrototypeOf ||
|
||||||
|
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||||
|
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
||||||
|
return extendStatics(d, b);
|
||||||
|
};
|
||||||
|
return function (d, b) {
|
||||||
|
extendStatics(d, b);
|
||||||
|
function __() { this.constructor = d; }
|
||||||
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
||||||
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||||
|
return new (P || (P = Promise))(function (resolve, reject) {
|
||||||
|
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||||
|
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||||
|
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||||
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||||
|
});
|
||||||
|
};
|
||||||
|
var __generator = (this && this.__generator) || function (thisArg, body) {
|
||||||
|
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
||||||
|
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
||||||
|
function verb(n) { return function (v) { return step([n, v]); }; }
|
||||||
|
function step(op) {
|
||||||
|
if (f) throw new TypeError("Generator is already executing.");
|
||||||
|
while (_) try {
|
||||||
|
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
||||||
|
if (y = 0, t) op = [op[0] & 2, t.value];
|
||||||
|
switch (op[0]) {
|
||||||
|
case 0: case 1: t = op; break;
|
||||||
|
case 4: _.label++; return { value: op[1], done: false };
|
||||||
|
case 5: _.label++; y = op[1]; op = [0]; continue;
|
||||||
|
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
||||||
|
default:
|
||||||
|
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
||||||
|
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
||||||
|
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
||||||
|
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
||||||
|
if (t[2]) _.ops.pop();
|
||||||
|
_.trys.pop(); continue;
|
||||||
|
}
|
||||||
|
op = body.call(thisArg, _);
|
||||||
|
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
||||||
|
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
||||||
|
}
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import Row from '../Row';
|
||||||
|
import css from './DebugCols.module.styl';
|
||||||
|
import Col from '.';
|
||||||
|
var Breakpoint;
|
||||||
|
(function (Breakpoint) {
|
||||||
|
Breakpoint[Breakpoint["MOBILE"] = 0] = "MOBILE";
|
||||||
|
Breakpoint[Breakpoint["TABLET"] = 1] = "TABLET";
|
||||||
|
Breakpoint[Breakpoint["COMPUT"] = 2] = "COMPUT";
|
||||||
|
})(Breakpoint || (Breakpoint = {}));
|
||||||
|
var DebugCols = /** @class */ (function (_super) {
|
||||||
|
__extends(DebugCols, _super);
|
||||||
|
function DebugCols() {
|
||||||
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
||||||
|
_this.state = {
|
||||||
|
breakpoint: Breakpoint.COMPUT
|
||||||
|
};
|
||||||
|
_this.render = function () { return (React.createElement(Row, { className: css.row },
|
||||||
|
React.createElement(Col, { size: 1, tabletSize: 1, mobileSize: 1, className: css.col },
|
||||||
|
React.createElement("div", null)),
|
||||||
|
React.createElement(Col, { size: 1, tabletSize: 1, mobileSize: 1, className: css.col },
|
||||||
|
React.createElement("div", null)),
|
||||||
|
React.createElement(Col, { size: 1, tabletSize: 1, mobileSize: 1, className: css.col },
|
||||||
|
React.createElement("div", null)),
|
||||||
|
React.createElement(Col, { size: 1, tabletSize: 1, mobileSize: 1, className: css.col },
|
||||||
|
React.createElement("div", null)),
|
||||||
|
_this.state.breakpoint !== Breakpoint.MOBILE && (React.createElement(React.Fragment, null,
|
||||||
|
_this.state.breakpoint !== Breakpoint.TABLET && (React.createElement(React.Fragment, null,
|
||||||
|
React.createElement(Col, { size: 1, className: css.col },
|
||||||
|
React.createElement("div", null)),
|
||||||
|
React.createElement(Col, { size: 1, className: css.col },
|
||||||
|
React.createElement("div", null)),
|
||||||
|
React.createElement(Col, { size: 1, className: css.col },
|
||||||
|
React.createElement("div", null)),
|
||||||
|
React.createElement(Col, { size: 1, className: css.col },
|
||||||
|
React.createElement("div", null)))),
|
||||||
|
React.createElement(Col, { size: 1, tabletSize: 1, className: css.col },
|
||||||
|
React.createElement("div", null)),
|
||||||
|
React.createElement(Col, { size: 1, tabletSize: 1, className: css.col },
|
||||||
|
React.createElement("div", null)),
|
||||||
|
React.createElement(Col, { size: 1, tabletSize: 1, className: css.col },
|
||||||
|
React.createElement("div", null)),
|
||||||
|
React.createElement(Col, { size: 1, tabletSize: 1, className: css.col },
|
||||||
|
React.createElement("div", null)))))); };
|
||||||
|
_this.onResize = function () { return __awaiter(_this, void 0, void 0, function () {
|
||||||
|
var currentBreakpoint, hasChanged;
|
||||||
|
return __generator(this, function (_a) {
|
||||||
|
currentBreakpoint = window.innerWidth <= 768 ?
|
||||||
|
Breakpoint.MOBILE :
|
||||||
|
window.innerWidth <= 1200 ?
|
||||||
|
Breakpoint.TABLET :
|
||||||
|
Breakpoint.COMPUT;
|
||||||
|
hasChanged = currentBreakpoint !== this.state.breakpoint;
|
||||||
|
if (hasChanged) {
|
||||||
|
this.setState({ breakpoint: currentBreakpoint });
|
||||||
|
}
|
||||||
|
return [2 /*return*/];
|
||||||
|
});
|
||||||
|
}); };
|
||||||
|
return _this;
|
||||||
|
}
|
||||||
|
DebugCols.prototype.componentDidMount = function () {
|
||||||
|
this.onResize();
|
||||||
|
window.addEventListener('resize', this.onResize);
|
||||||
|
};
|
||||||
|
DebugCols.prototype.componentWillUnmount = function () {
|
||||||
|
window.removeEventListener('resize', this.onResize);
|
||||||
|
};
|
||||||
|
return DebugCols;
|
||||||
|
}(React.Component));
|
||||||
|
export default DebugCols;
|
||||||
12
src/dzeio/Col/DebugCols.module.styl
Normal file
12
src/dzeio/Col/DebugCols.module.styl
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
.row
|
||||||
|
position fixed
|
||||||
|
top 0
|
||||||
|
left 0
|
||||||
|
height 100%
|
||||||
|
width 100%
|
||||||
|
z-index 10000
|
||||||
|
pointer-events none
|
||||||
|
|
||||||
|
.col > div
|
||||||
|
background rgba(red, .2)
|
||||||
|
height 100%
|
||||||
72
src/dzeio/Col/DebugCols.tsx
Normal file
72
src/dzeio/Col/DebugCols.tsx
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import Row from '../Row'
|
||||||
|
|
||||||
|
import css from './DebugCols.module.styl'
|
||||||
|
|
||||||
|
import Col from '.'
|
||||||
|
|
||||||
|
enum Breakpoint {
|
||||||
|
MOBILE,
|
||||||
|
TABLET,
|
||||||
|
COMPUT
|
||||||
|
}
|
||||||
|
|
||||||
|
interface States {
|
||||||
|
breakpoint: Breakpoint
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default class DebugCols extends React.Component<unknown, States> {
|
||||||
|
|
||||||
|
public state: States = {
|
||||||
|
breakpoint: Breakpoint.COMPUT
|
||||||
|
}
|
||||||
|
|
||||||
|
public componentDidMount() {
|
||||||
|
this.onResize()
|
||||||
|
window.addEventListener('resize', this.onResize)
|
||||||
|
}
|
||||||
|
|
||||||
|
public componentWillUnmount() {
|
||||||
|
window.removeEventListener('resize', this.onResize)
|
||||||
|
}
|
||||||
|
|
||||||
|
public render = () => (
|
||||||
|
<Row className={css.row}>
|
||||||
|
<Col size={1} tabletSize={1} mobileSize={1} className={css.col}><div></div></Col>
|
||||||
|
<Col size={1} tabletSize={1} mobileSize={1} className={css.col}><div></div></Col>
|
||||||
|
<Col size={1} tabletSize={1} mobileSize={1} className={css.col}><div></div></Col>
|
||||||
|
<Col size={1} tabletSize={1} mobileSize={1} className={css.col}><div></div></Col>
|
||||||
|
{this.state.breakpoint !== Breakpoint.MOBILE && (
|
||||||
|
<>
|
||||||
|
{this.state.breakpoint !== Breakpoint.TABLET && (
|
||||||
|
<>
|
||||||
|
<Col size={1} className={css.col}><div></div></Col>
|
||||||
|
<Col size={1} className={css.col}><div></div></Col>
|
||||||
|
<Col size={1} className={css.col}><div></div></Col>
|
||||||
|
<Col size={1} className={css.col}><div></div></Col>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<Col size={1} tabletSize={1} className={css.col}><div></div></Col>
|
||||||
|
<Col size={1} tabletSize={1} className={css.col}><div></div></Col>
|
||||||
|
<Col size={1} tabletSize={1} className={css.col}><div></div></Col>
|
||||||
|
<Col size={1} tabletSize={1} className={css.col}><div></div></Col>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Row>
|
||||||
|
)
|
||||||
|
|
||||||
|
private onResize = async () => {
|
||||||
|
const currentBreakpoint =
|
||||||
|
window.innerWidth <= 768 ?
|
||||||
|
Breakpoint.MOBILE :
|
||||||
|
window.innerWidth <= 1200 ?
|
||||||
|
Breakpoint.TABLET :
|
||||||
|
Breakpoint.COMPUT
|
||||||
|
const hasChanged = currentBreakpoint !== this.state.breakpoint
|
||||||
|
if (hasChanged) {
|
||||||
|
this.setState({ breakpoint: currentBreakpoint })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
49
src/dzeio/Col/index.tsx
Normal file
49
src/dzeio/Col/index.tsx
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { buildClassName } from '../Util'
|
||||||
|
import css from './Col.module.styl'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
size?: 0|1|2|3|4|5|6|7|8|9|10|11|12
|
||||||
|
offset?: 1|2|3|4|5|6|7|8|9|10|11
|
||||||
|
children?: React.ReactNode
|
||||||
|
className?: string
|
||||||
|
nogrow?: boolean
|
||||||
|
|
||||||
|
// Tablet related
|
||||||
|
tabletSize?: 0|1|2|3|4|5|6|7|8
|
||||||
|
tabletoffset?: 1|2|3|4|5|6|7
|
||||||
|
tabletGrow?: boolean
|
||||||
|
|
||||||
|
|
||||||
|
// Mobile related
|
||||||
|
mobileSize?: 0|1|2|3|4
|
||||||
|
mobileoffset?: 1|2|3
|
||||||
|
mobileGrow?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Col extends React.Component<Props> {
|
||||||
|
|
||||||
|
public render = () => (
|
||||||
|
<div className={buildClassName(
|
||||||
|
css.col,
|
||||||
|
|
||||||
|
// Normal
|
||||||
|
[css[`col-${this.props.size}`], typeof this.props.size === 'number'],
|
||||||
|
[css[`offset-${this.props.offset}`], this.props.offset],
|
||||||
|
|
||||||
|
// Tablet
|
||||||
|
[css[`col-tablet-${this.props.tabletSize}`], typeof this.props.tabletSize === 'number'],
|
||||||
|
[css[`offset-tablet-${this.props.tabletoffset}`], this.props.tabletoffset],
|
||||||
|
|
||||||
|
// Mobile
|
||||||
|
[css[`col-mobile-${this.props.mobileSize}`], typeof this.props.mobileSize === 'number'],
|
||||||
|
[css[`offset-mobile-${this.props.mobileoffset}`], this.props.mobileoffset],
|
||||||
|
[css.nogrow, this.props.nogrow],
|
||||||
|
[css.mobileGrow, this.props.mobileGrow],
|
||||||
|
this.props.className
|
||||||
|
)}>
|
||||||
|
{this.props.children}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
2
src/dzeio/Container/Container.module.styl
Normal file
2
src/dzeio/Container/Container.module.styl
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
.container
|
||||||
|
padding 16px
|
||||||
19
src/dzeio/Container/index.tsx
Normal file
19
src/dzeio/Container/index.tsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { buildClassName } from '../Util'
|
||||||
|
|
||||||
|
import css from './Container.module.styl'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: React.ReactNode
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Container extends React.Component<Props> {
|
||||||
|
|
||||||
|
public render = () => (
|
||||||
|
<div className={buildClassName(css.container, this.props.className)}>
|
||||||
|
{this.props.children}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
18
src/dzeio/Fieldset/Fieldset.module.styl
Normal file
18
src/dzeio/Fieldset/Fieldset.module.styl
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
@import '../config.styl'
|
||||||
|
|
||||||
|
.fieldset
|
||||||
|
border-radius 8px
|
||||||
|
border 2px solid grey
|
||||||
|
transition all $transition
|
||||||
|
margin 0
|
||||||
|
|
||||||
|
> legend
|
||||||
|
font-weight 600
|
||||||
|
transition all $transition
|
||||||
|
padding 0 4px
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
border-color black
|
||||||
|
|
||||||
|
> legend
|
||||||
|
color $default
|
||||||
21
src/dzeio/Fieldset/index.tsx
Normal file
21
src/dzeio/Fieldset/index.tsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import css from './Fieldset.module.styl'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title?: string
|
||||||
|
children?: React.ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Fieldset extends React.Component<Props> {
|
||||||
|
|
||||||
|
public render = () => (
|
||||||
|
<fieldset className={css.fieldset}>
|
||||||
|
{this.props.title && (
|
||||||
|
<legend>{this.props.title}</legend>
|
||||||
|
)}
|
||||||
|
{this.props.children}
|
||||||
|
</fieldset>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
23
src/dzeio/Footer/Footer.module.styl
Normal file
23
src/dzeio/Footer/Footer.module.styl
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
@import '../config.styl'
|
||||||
|
|
||||||
|
.footer
|
||||||
|
padding 24px 16px
|
||||||
|
|
||||||
|
.animation
|
||||||
|
animation grow 1s linear infinite
|
||||||
|
display inline-block
|
||||||
|
|
||||||
|
@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)
|
||||||
13
src/dzeio/Footer/index.tsx
Normal file
13
src/dzeio/Footer/index.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import Text from '../Text'
|
||||||
|
import css from './Footer.module.styl'
|
||||||
|
|
||||||
|
export default class Footer extends React.Component {
|
||||||
|
public render = () => (
|
||||||
|
<footer className={css.footer}>
|
||||||
|
<Text align="center">Made with <span className={css.animation}>💗</span> by Dzeio</Text>
|
||||||
|
<Text align="center">Copyright © 2020 Dzeio. All rights reserved.</Text>
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
}
|
||||||
35
src/dzeio/GradientBackground/GradientBackground.module.styl
Normal file
35
src/dzeio/GradientBackground/GradientBackground.module.styl
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
@import "../config"
|
||||||
|
|
||||||
|
$transparent = 75%
|
||||||
|
|
||||||
|
.back
|
||||||
|
transition all $transition
|
||||||
|
background linear-gradient(to left, $default, transparentify($default, $transparent))
|
||||||
|
|
||||||
|
.primary
|
||||||
|
$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, transparentify($color, $transparent))
|
||||||
|
|
||||||
|
.success
|
||||||
|
$color = $success
|
||||||
|
background linear-gradient(to left, $color, transparentify($color, $transparent))
|
||||||
|
|
||||||
|
.danger
|
||||||
|
$color = $danger
|
||||||
|
background linear-gradient(to left, $color, transparentify($color, $transparent))
|
||||||
|
|
||||||
|
.warning
|
||||||
|
$color = $warning
|
||||||
|
background linear-gradient(to left, $color, transparentify($color, $transparent))
|
||||||
|
|
||||||
|
@media (prefers-color-scheme dark)
|
||||||
|
.back
|
||||||
|
background $darkBackground
|
||||||
21
src/dzeio/GradientBackground/index.tsx
Normal file
21
src/dzeio/GradientBackground/index.tsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { ColorType } from '../interfaces'
|
||||||
|
|
||||||
|
import { buildClassName } from '../Util'
|
||||||
|
import css from './GradientBackground.module.styl'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
color?: ColorType
|
||||||
|
className?: string
|
||||||
|
children: React.ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
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])}>
|
||||||
|
{this.props.children}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
42
src/dzeio/Image/Image.module.styl
Normal file
42
src/dzeio/Image/Image.module.styl
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
.parent
|
||||||
|
position relative
|
||||||
|
|
||||||
|
.image
|
||||||
|
transition .3s
|
||||||
|
object-fit contain
|
||||||
|
z-index 2
|
||||||
|
|
||||||
|
&.ph1
|
||||||
|
position fixed
|
||||||
|
transition 0s
|
||||||
|
|
||||||
|
|
||||||
|
&.ph2
|
||||||
|
width 100% !important
|
||||||
|
position fixed
|
||||||
|
max-width 100% !important
|
||||||
|
max-height 100% !important
|
||||||
|
box-sizing border-box
|
||||||
|
padding 5%
|
||||||
|
top 0 !important
|
||||||
|
left 0 !important
|
||||||
|
height 100%
|
||||||
|
background #000000A0
|
||||||
|
|
||||||
|
|
||||||
|
&.after
|
||||||
|
background #00000000
|
||||||
|
// height 100%
|
||||||
|
box-sizing border-box
|
||||||
|
position fixed
|
||||||
|
// width 100%
|
||||||
|
z-index 0
|
||||||
|
padding initial
|
||||||
|
|
||||||
|
|
||||||
|
.hideOverflow
|
||||||
|
overflow hidden
|
||||||
|
|
||||||
|
|
||||||
|
.none
|
||||||
|
display none
|
||||||
238
src/dzeio/Image/index.tsx
Normal file
238
src/dzeio/Image/index.tsx
Normal file
@ -0,0 +1,238 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { buildClassName } from '../Util'
|
||||||
|
import NextImage from 'next/image'
|
||||||
|
|
||||||
|
import css from './Image.module.styl'
|
||||||
|
|
||||||
|
export interface ImageProps {
|
||||||
|
defaultHeight?: number
|
||||||
|
src?: string
|
||||||
|
sources?: Array<string>
|
||||||
|
deleteOnError?: boolean
|
||||||
|
downgradeOnError?: string
|
||||||
|
canFullscreen?: boolean
|
||||||
|
max?: {
|
||||||
|
height?: number|string
|
||||||
|
width?: number|string
|
||||||
|
}
|
||||||
|
width?: number|string
|
||||||
|
default?: {
|
||||||
|
height?: number|string
|
||||||
|
width?: number|string
|
||||||
|
}
|
||||||
|
alt?: string
|
||||||
|
classes?: string
|
||||||
|
className?: string
|
||||||
|
onClick?: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
enum images {
|
||||||
|
JPEG = 'image/jpeg',
|
||||||
|
XICON = 'image/x-icon',
|
||||||
|
TIFF = 'image/tiff'
|
||||||
|
}
|
||||||
|
|
||||||
|
const mimeTypes = {
|
||||||
|
apng: 'image/apng',
|
||||||
|
bmp: 'image/bmp',
|
||||||
|
gif: 'image/gif',
|
||||||
|
|
||||||
|
ico: images.XICON,
|
||||||
|
cur: images.XICON,
|
||||||
|
|
||||||
|
jpg: images.JPEG,
|
||||||
|
jpeg: images.JPEG,
|
||||||
|
jfif: images.JPEG,
|
||||||
|
pjpeg: images.JPEG,
|
||||||
|
pjp: images.JPEG,
|
||||||
|
|
||||||
|
png: 'image/png',
|
||||||
|
svg: 'image/svg+xml',
|
||||||
|
|
||||||
|
tif: images.TIFF,
|
||||||
|
tiff: images.TIFF,
|
||||||
|
|
||||||
|
webp: 'image/webp'
|
||||||
|
}
|
||||||
|
|
||||||
|
const getMimeType = (img: string) => {
|
||||||
|
const arr = img.split('.')
|
||||||
|
return mimeTypes[arr[arr.length-1] as 'apng'] || mimeTypes.png
|
||||||
|
}
|
||||||
|
|
||||||
|
type evType<T = HTMLImageElement> = React.SyntheticEvent<T, Event>
|
||||||
|
|
||||||
|
export default class Image extends React.Component<ImageProps> {
|
||||||
|
|
||||||
|
private ref: React.RefObject<HTMLImageElement> = React.createRef()
|
||||||
|
private plchldr: React.RefObject<HTMLDivElement> = React.createRef()
|
||||||
|
private parent: React.RefObject<HTMLDivElement> = React.createRef()
|
||||||
|
private pic: React.RefObject<HTMLDivElement> = React.createRef()
|
||||||
|
|
||||||
|
private wasDowngraded = false
|
||||||
|
private cardPos: Array<number> = []
|
||||||
|
private cardSize: Array<number> = []
|
||||||
|
|
||||||
|
private isFullscreen = false
|
||||||
|
|
||||||
|
public async componentDidMount() {
|
||||||
|
if (this.props.canFullscreen) {
|
||||||
|
window.addEventListener('scroll', this.onScroll)
|
||||||
|
window.addEventListener('resize', this.onResize)
|
||||||
|
this.onScroll()
|
||||||
|
this.onResize()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public async componentDidUpdate() {
|
||||||
|
this.pic.current?.classList.remove(css.none)
|
||||||
|
if (this.props.canFullscreen) {
|
||||||
|
this.onScroll()
|
||||||
|
this.onResize()
|
||||||
|
}
|
||||||
|
if (this.isFullscreen) {
|
||||||
|
this.onClick()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public async componentWillUnmount() {
|
||||||
|
if (this.props.canFullscreen) {
|
||||||
|
window.removeEventListener('scroll', this.onScroll)
|
||||||
|
window.removeEventListener('resize', this.onResize)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const pic = (
|
||||||
|
// <picture ref={this.pic} className={this.props.classes}>
|
||||||
|
// {this.props.sources && this.props.sources.map((el, index) => (
|
||||||
|
// <source key={index} srcSet={el} type={getMimeType(el)}/>
|
||||||
|
// ))}
|
||||||
|
// <img
|
||||||
|
// />
|
||||||
|
// </picture>
|
||||||
|
<div ref={this.pic} className={buildClassName(this.props.classes, css.parent)}>
|
||||||
|
<NextImage
|
||||||
|
className={buildClassName([css.image], [this.props.className])}
|
||||||
|
// ref={this.ref}
|
||||||
|
src={this.props.src || ''}
|
||||||
|
onClick={this.props.canFullscreen && this.onClick || this.props.onClick}
|
||||||
|
onLoad={this.props.default && this.onLoad || undefined}
|
||||||
|
onError={this.props.deleteOnError && this.onError || undefined}
|
||||||
|
// layout="fill"
|
||||||
|
width={200}
|
||||||
|
height={44}
|
||||||
|
// style={{
|
||||||
|
// width: this.props.default?.width,
|
||||||
|
// height: this.props.default?.height,
|
||||||
|
// maxHeight: this.props.max?.height,
|
||||||
|
// maxWidth: this.props.max?.width
|
||||||
|
// }}
|
||||||
|
alt={this.props.alt}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
if (this.props.canFullscreen) {
|
||||||
|
return (
|
||||||
|
<div ref={this.parent}>
|
||||||
|
<div ref={this.plchldr} className={css.none}></div>
|
||||||
|
{pic}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return pic
|
||||||
|
}
|
||||||
|
|
||||||
|
private onScroll = async () => {
|
||||||
|
if (!this.ref.current || this.isFullscreen || !this.props.canFullscreen) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.cardPos = [this.ref.current.offsetTop - window.scrollY, this.ref.current.offsetLeft - window.scrollX]
|
||||||
|
this.ref.current.style.top = this.cardPos[0] + 'px'
|
||||||
|
this.ref.current.style.left = this.cardPos[1] + 'px'
|
||||||
|
}
|
||||||
|
|
||||||
|
private onResize = async () => {
|
||||||
|
if (!this.ref.current || !this.plchldr.current || !this.props.canFullscreen || this.isFullscreen) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let tmp = [this.ref.current.offsetHeight, this.ref.current.offsetWidth]
|
||||||
|
if (this.parent.current) {
|
||||||
|
tmp = [this.parent.current.offsetHeight, this.ref.current.offsetWidth]
|
||||||
|
}
|
||||||
|
this.plchldr.current.style.width = `${tmp[1]}px`
|
||||||
|
this.plchldr.current.style.height = `${tmp[0]}px`
|
||||||
|
}
|
||||||
|
|
||||||
|
private onClick = async () => {
|
||||||
|
if (!this.ref.current || !this.props.canFullscreen || !this.plchldr.current) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (this.props.onClick) {
|
||||||
|
this.props.onClick()
|
||||||
|
}
|
||||||
|
|
||||||
|
const i = this.ref.current
|
||||||
|
const c = this.plchldr.current
|
||||||
|
const body = document.body
|
||||||
|
i.style.top = this.cardPos[0] + 'px'
|
||||||
|
i.style.left = this.cardPos[1] + 'px'
|
||||||
|
|
||||||
|
if (this.isFullscreen) {
|
||||||
|
i.style.width = this.cardSize[1] + 'px'
|
||||||
|
i.style.height = this.cardSize[0] + 'px'
|
||||||
|
body.classList.remove(css.hideOverflow)
|
||||||
|
i.classList.remove(css.ph2)
|
||||||
|
i.classList.add(css.after)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
if (i.classList.contains(css.ph2) || i.classList.contains(css.ph1) || this.isFullscreen) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const w = this.valToPixel(this.props.width)
|
||||||
|
const mh = this.valToPixel(this.props.max?.height)
|
||||||
|
const mw = this.valToPixel(this.props.max?.width)
|
||||||
|
c.classList.add(css.none)
|
||||||
|
i.style.height = ''
|
||||||
|
i.style.width = w
|
||||||
|
i.style.maxHeight = mh
|
||||||
|
i.style.maxWidth = mw
|
||||||
|
i.classList.remove(css.after)
|
||||||
|
}, 350)
|
||||||
|
this.isFullscreen = false
|
||||||
|
} else {
|
||||||
|
i.classList.add(css.ph1)
|
||||||
|
c.classList.remove(css.none)
|
||||||
|
i.classList.add(css.ph2)
|
||||||
|
i.classList.remove(css.ph1)
|
||||||
|
body.classList.add(css.hideOverflow)
|
||||||
|
this.isFullscreen = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private valToPixel(value: number|string|undefined): string {
|
||||||
|
if (typeof value === 'number') {
|
||||||
|
return `${value}px`
|
||||||
|
}
|
||||||
|
if (typeof value === 'undefined') {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
|
||||||
|
private onLoad = async (ev: evType) => {
|
||||||
|
ev.currentTarget.style.height = ''
|
||||||
|
ev.currentTarget.style.width = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
private onError = async (ev: evType) => {
|
||||||
|
this.w('Picture not loaded', ev.currentTarget.src)
|
||||||
|
ev.currentTarget.parentElement?.classList.add(css.none)
|
||||||
|
}
|
||||||
|
|
||||||
|
private w(...messages: any) {
|
||||||
|
console.warn('[ Picture ]', ...messages)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
198
src/dzeio/Input/Input.module.styl
Normal file
198
src/dzeio/Input/Input.module.styl
Normal file
@ -0,0 +1,198 @@
|
|||||||
|
@import '../config'
|
||||||
|
|
||||||
|
.parent
|
||||||
|
position relative
|
||||||
|
margin 16px
|
||||||
|
|
||||||
|
label
|
||||||
|
font-size 1rem
|
||||||
|
font-weight 600
|
||||||
|
color black
|
||||||
|
display inline-block
|
||||||
|
margin-bottom .5rem
|
||||||
|
transition all $transition
|
||||||
|
position absolute
|
||||||
|
top 16px
|
||||||
|
pointer-events none
|
||||||
|
left 16px
|
||||||
|
|
||||||
|
@media (prefers-color-scheme dark)
|
||||||
|
color white
|
||||||
|
|
||||||
|
svg
|
||||||
|
position absolute
|
||||||
|
color #AAA
|
||||||
|
top 14px
|
||||||
|
left 16px // input padding-left
|
||||||
|
transition color $transition
|
||||||
|
pointer-events none
|
||||||
|
|
||||||
|
~ label
|
||||||
|
left 16px + 24px + 16px
|
||||||
|
|
||||||
|
select
|
||||||
|
appearance none
|
||||||
|
|
||||||
|
input
|
||||||
|
select
|
||||||
|
padding 14px 16px
|
||||||
|
height 56px
|
||||||
|
border 2px solid rgba(black, .3)
|
||||||
|
border-radius 4px
|
||||||
|
box-sizing border-box
|
||||||
|
font-size .875rem
|
||||||
|
outline none
|
||||||
|
background transparent
|
||||||
|
transition all $transition
|
||||||
|
color black
|
||||||
|
@media (prefers-color-scheme dark)
|
||||||
|
border-color rgba(white, .3)
|
||||||
|
color white
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
border-color black
|
||||||
|
@media (prefers-color-scheme dark)
|
||||||
|
border-color white
|
||||||
|
|
||||||
|
+ svg
|
||||||
|
color black
|
||||||
|
|
||||||
|
@media (prefers-color-scheme dark)
|
||||||
|
color white
|
||||||
|
|
||||||
|
&:not(:placeholder-shown)
|
||||||
|
&:focus
|
||||||
|
&:not([placeholder=" "])
|
||||||
|
~ label
|
||||||
|
top -8px
|
||||||
|
left 16px - 4px // .input/padding-left label/padding-left
|
||||||
|
background white
|
||||||
|
padding 0 4px
|
||||||
|
|
||||||
|
@media (prefers-color-scheme dark)
|
||||||
|
background #202020
|
||||||
|
|
||||||
|
&:invalid
|
||||||
|
border-color $danger
|
||||||
|
|
||||||
|
~ label
|
||||||
|
color @border-color
|
||||||
|
|
||||||
|
~ svg
|
||||||
|
color @border-color
|
||||||
|
&:focus
|
||||||
|
border-color $default
|
||||||
|
|
||||||
|
~ label
|
||||||
|
color @border-color
|
||||||
|
|
||||||
|
~ svg
|
||||||
|
color @border-color
|
||||||
|
|
||||||
|
&.primary
|
||||||
|
border-color $primary
|
||||||
|
|
||||||
|
~ label
|
||||||
|
color @border-color
|
||||||
|
|
||||||
|
~ svg
|
||||||
|
color @border-color
|
||||||
|
|
||||||
|
&.secondary
|
||||||
|
border-color $secondary
|
||||||
|
|
||||||
|
~ label
|
||||||
|
color @border-color
|
||||||
|
|
||||||
|
~ svg
|
||||||
|
color @border-color
|
||||||
|
|
||||||
|
&.info
|
||||||
|
border-color $info
|
||||||
|
|
||||||
|
~ label
|
||||||
|
color @border-color
|
||||||
|
|
||||||
|
~ svg
|
||||||
|
color @border-color
|
||||||
|
|
||||||
|
&.success
|
||||||
|
border-color $success
|
||||||
|
|
||||||
|
~ label
|
||||||
|
color @border-color
|
||||||
|
|
||||||
|
~ svg
|
||||||
|
color @border-color
|
||||||
|
|
||||||
|
&.danger
|
||||||
|
border-color $danger
|
||||||
|
|
||||||
|
~ label
|
||||||
|
color @border-color
|
||||||
|
|
||||||
|
~ svg
|
||||||
|
color @border-color
|
||||||
|
|
||||||
|
&.warning
|
||||||
|
border-color $warning
|
||||||
|
|
||||||
|
~ label
|
||||||
|
color @border-color
|
||||||
|
|
||||||
|
~ svg
|
||||||
|
color @border-color
|
||||||
|
|
||||||
|
&.hasIcon
|
||||||
|
padding-left 16px + 24px + 16px
|
||||||
|
|
||||||
|
&.filled
|
||||||
|
border none
|
||||||
|
background rgba(gray, .1)
|
||||||
|
border-radius @border-radius @border-radius 0 0
|
||||||
|
border-bottom 2px solid rgba(black,.4)
|
||||||
|
|
||||||
|
&.opaque
|
||||||
|
background white
|
||||||
|
|
||||||
|
@media (prefers-color-scheme dark)
|
||||||
|
background #202020
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background rgba(gray, .2)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
&.opaque
|
||||||
|
background darken(white, 5%)
|
||||||
|
@media (prefers-color-scheme dark)
|
||||||
|
background #1c1c1c
|
||||||
|
&:focus
|
||||||
|
background rgba(gray, .3)
|
||||||
|
|
||||||
|
&.opaque
|
||||||
|
background white
|
||||||
|
|
||||||
|
@media (prefers-color-scheme dark)
|
||||||
|
background #202020
|
||||||
|
|
||||||
|
&:not(:placeholder-shown)
|
||||||
|
&:focus
|
||||||
|
&:not([placeholder=" "])
|
||||||
|
~ label
|
||||||
|
top 3px
|
||||||
|
left 16px - 4px // .input/padding-left label/padding-left
|
||||||
|
background transparent
|
||||||
|
padding 0
|
||||||
|
font-size .75rem
|
||||||
|
~ svg ~ label
|
||||||
|
left 16px + 24px + 16px // .input/padding-left label/padding-left
|
||||||
|
|
||||||
|
div
|
||||||
|
display flex
|
||||||
|
justify-content space-between
|
||||||
|
padding 0 16px
|
||||||
|
font-size .9em
|
||||||
|
|
||||||
|
&.block input
|
||||||
|
width 100%
|
||||||
18
src/dzeio/Input/Input.stories.js
Normal file
18
src/dzeio/Input/Input.stories.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
var __assign = (this && this.__assign) || function () {
|
||||||
|
__assign = Object.assign || function(t) {
|
||||||
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||||
|
s = arguments[i];
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||||
|
t[p] = s[p];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
return __assign.apply(this, arguments);
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import Component from '.';
|
||||||
|
export default {
|
||||||
|
title: 'DZEIO/Input',
|
||||||
|
component: Component
|
||||||
|
};
|
||||||
|
export var Basic = function (args) { return React.createElement(Component, __assign({}, args)); };
|
||||||
10
src/dzeio/Input/Input.stories.tsx
Normal file
10
src/dzeio/Input/Input.stories.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { Meta } from '@storybook/react/types-6-0'
|
||||||
|
import React from 'react'
|
||||||
|
import Component from '.'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'DZEIO/Input',
|
||||||
|
component: Component
|
||||||
|
} as Meta
|
||||||
|
|
||||||
|
export const Basic = (args: any) => <Component {...args} />
|
||||||
138
src/dzeio/Input/index.tsx
Normal file
138
src/dzeio/Input/index.tsx
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
import React, { FC } from 'react'
|
||||||
|
|
||||||
|
import { ChevronDown } from 'react-feather'
|
||||||
|
import { IconProps, ColorType } from '../interfaces'
|
||||||
|
import { buildClassName } from '../Util'
|
||||||
|
import css from './Input.module.styl'
|
||||||
|
|
||||||
|
interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
||||||
|
id?: string
|
||||||
|
label?: string
|
||||||
|
icon?: FC<IconProps>
|
||||||
|
helper?: string
|
||||||
|
characterCount?: boolean
|
||||||
|
inputRef?: React.RefObject<HTMLInputElement>
|
||||||
|
selectRef?: React.RefObject<HTMLSelectElement>
|
||||||
|
type?: 'color' | 'text' | 'date' | 'datetime-local' |
|
||||||
|
'email' | 'file' | 'month' | 'number' | 'password' |
|
||||||
|
'range' | 'search' | 'tel' | 'time' | 'url' | 'week' | 'select'
|
||||||
|
maxLength?: number | undefined
|
||||||
|
infinityText?: string
|
||||||
|
filled?: boolean
|
||||||
|
opaque?: boolean
|
||||||
|
block?: boolean
|
||||||
|
color?: ColorType
|
||||||
|
children?: React.ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Input extends React.Component<Props> {
|
||||||
|
|
||||||
|
private charCountRef: React.RefObject<HTMLSpanElement> = React.createRef()
|
||||||
|
|
||||||
|
public componentDidMount() {
|
||||||
|
this.updatecharCount()
|
||||||
|
}
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const props: Props = Object.assign({}, this.props)
|
||||||
|
const Icon = this.props.icon
|
||||||
|
delete props.label
|
||||||
|
delete props.icon
|
||||||
|
delete props.opaque
|
||||||
|
delete props.helper
|
||||||
|
delete props.infinityText
|
||||||
|
delete props.filled
|
||||||
|
delete props.inputRef
|
||||||
|
delete props.selectRef
|
||||||
|
delete props.block
|
||||||
|
delete props.color
|
||||||
|
delete props.characterCount
|
||||||
|
|
||||||
|
const baseProps: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> = {
|
||||||
|
placeholder: this.props.placeholder || ' ',
|
||||||
|
ref: this.props.inputRef,
|
||||||
|
className: buildClassName(
|
||||||
|
[css.hasIcon, Icon],
|
||||||
|
[css.filled, this.props.filled],
|
||||||
|
[css.opaque, this.props.opaque],
|
||||||
|
[css[this.props.color as string], this.props.color]
|
||||||
|
),
|
||||||
|
onInvalid: (ev: React.FormEvent<HTMLInputElement>) => ev.preventDefault()
|
||||||
|
}
|
||||||
|
|
||||||
|
let input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
|
||||||
|
|
||||||
|
if (this.props.type === 'number') {
|
||||||
|
baseProps.type = 'text'
|
||||||
|
baseProps.inputMode = 'numeric'
|
||||||
|
baseProps.pattern = '[0-9]*'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.props.type === 'select') {
|
||||||
|
input = (
|
||||||
|
<select
|
||||||
|
ref={this.props.selectRef}
|
||||||
|
className={buildClassName(
|
||||||
|
css.hasIcon,
|
||||||
|
[css.filled, this.props.filled],
|
||||||
|
[css[this.props.color as string], this.props.color]
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{this.props.children}
|
||||||
|
</select>
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
input = (
|
||||||
|
<input
|
||||||
|
{...props}
|
||||||
|
{...baseProps}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={buildClassName(
|
||||||
|
[css.parent],
|
||||||
|
[css.block, this.props.block]
|
||||||
|
)}
|
||||||
|
onChangeCapture={this.props.characterCount ? this.updatecharCount : undefined}
|
||||||
|
>
|
||||||
|
{input}
|
||||||
|
{this.props.type === 'select' && (
|
||||||
|
<ChevronDown />
|
||||||
|
)}
|
||||||
|
{Icon && (
|
||||||
|
<Icon />
|
||||||
|
)}
|
||||||
|
{this.props.label && (
|
||||||
|
<label className={css.label} htmlFor={this.props.id}>{this.props.label}</label>
|
||||||
|
)}
|
||||||
|
{(this.props.helper || this.props.characterCount) && (
|
||||||
|
<div>
|
||||||
|
<span>{this.props.helper}</span>
|
||||||
|
<span ref={this.charCountRef}></span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
private updatecharCount = async (event?: React.FormEvent<HTMLDivElement>) => {
|
||||||
|
if (this.props.characterCount && this.charCountRef.current) {
|
||||||
|
const max = this.props.maxLength || this.props.infinityText || 'Infinity'
|
||||||
|
let currentCount = 0
|
||||||
|
if (event) {
|
||||||
|
currentCount = (event.target as HTMLInputElement).value.length
|
||||||
|
} else {
|
||||||
|
if (this.props.defaultValue) {
|
||||||
|
currentCount = this.props.defaultValue.toString().length
|
||||||
|
} else if (this.props.value) {
|
||||||
|
currentCount = this.props.value.toString().length
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.charCountRef.current.innerText = currentCount + ' / ' + max
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
3
src/dzeio/Link/Link.module.styl
Normal file
3
src/dzeio/Link/Link.module.styl
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.icon
|
||||||
|
vertical-align sub
|
||||||
|
margin 2px
|
||||||
22
src/dzeio/Link/Link.stories.js
Normal file
22
src/dzeio/Link/Link.stories.js
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
var __assign = (this && this.__assign) || function () {
|
||||||
|
__assign = Object.assign || function(t) {
|
||||||
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||||
|
s = arguments[i];
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||||
|
t[p] = s[p];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
return __assign.apply(this, arguments);
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import Component from '.';
|
||||||
|
export default {
|
||||||
|
title: 'DZEIO/Link',
|
||||||
|
component: Component,
|
||||||
|
argTypes: {
|
||||||
|
href: { control: 'text', defaultValue: 'https://www.dzeio.com' },
|
||||||
|
text: { control: 'text', defaultValue: 'Dzeio' }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
export var Basic = function (args) { return React.createElement(Component, __assign({}, args), args.text); };
|
||||||
14
src/dzeio/Link/Link.stories.tsx
Normal file
14
src/dzeio/Link/Link.stories.tsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { Meta } from '@storybook/react/types-6-0'
|
||||||
|
import React from 'react'
|
||||||
|
import Component from '.'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'DZEIO/Link',
|
||||||
|
component: Component,
|
||||||
|
argTypes: {
|
||||||
|
href: {control: 'text', defaultValue: 'https://www.dzeio.com'},
|
||||||
|
text: {control: 'text', defaultValue: 'Dzeio'}
|
||||||
|
}
|
||||||
|
} as Meta
|
||||||
|
|
||||||
|
export const Basic = (args: any) => <Component {...args}>{args.text}</Component>
|
||||||
41
src/dzeio/Link/index.tsx
Normal file
41
src/dzeio/Link/index.tsx
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import NextLink from 'next/link'
|
||||||
|
import { ExternalLink } from 'react-feather'
|
||||||
|
|
||||||
|
import css from './Link.module.styl'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
href: string
|
||||||
|
children?: React.ReactNode
|
||||||
|
className?: string
|
||||||
|
forceNewTab?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Link extends React.Component<Props> {
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
if (!this.props.href.startsWith('/')) {
|
||||||
|
// external link
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
className={this.props.className}
|
||||||
|
href={this.props.href}
|
||||||
|
rel="noreferrer nofollow"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
{this.props.children}<ExternalLink size={16} className={css.icon} />
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<NextLink href={this.props.href}>
|
||||||
|
<a
|
||||||
|
className={this.props.className}
|
||||||
|
target={this.props.forceNewTab ? '_blank' : undefined}
|
||||||
|
rel={this.props.forceNewTab ? 'noreferrer nofollow' : undefined}
|
||||||
|
>{this.props.children}</a>
|
||||||
|
</NextLink>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
19
src/dzeio/Menu/Menu.module.styl
Normal file
19
src/dzeio/Menu/Menu.module.styl
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
@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
|
||||||
21
src/dzeio/Menu/Menu.stories.js
Normal file
21
src/dzeio/Menu/Menu.stories.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
var __assign = (this && this.__assign) || function () {
|
||||||
|
__assign = Object.assign || function(t) {
|
||||||
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||||
|
s = arguments[i];
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||||
|
t[p] = s[p];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
return __assign.apply(this, arguments);
|
||||||
|
};
|
||||||
|
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' }] }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
export var Basic = function (args) { return React.createElement(Component, __assign({}, args)); };
|
||||||
13
src/dzeio/Menu/Menu.stories.tsx
Normal file
13
src/dzeio/Menu/Menu.stories.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
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} />
|
||||||
25
src/dzeio/Menu/index.tsx
Normal file
25
src/dzeio/Menu/index.tsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
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>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
49
src/dzeio/Navbar/Navbar.module.styl
Normal file
49
src/dzeio/Navbar/Navbar.module.styl
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
@import "../config"
|
||||||
|
|
||||||
|
.navbar
|
||||||
|
width 100%
|
||||||
|
height 70px
|
||||||
|
padding 16px
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
left 0
|
||||||
|
border-bottom 1px solid white
|
||||||
|
|
||||||
|
&.small
|
||||||
|
padding-left 216px
|
||||||
|
|
||||||
|
.alignRight
|
||||||
|
text-align right
|
||||||
|
|
||||||
|
.favicon img
|
||||||
|
height 38px
|
||||||
|
border-radius 8px
|
||||||
|
border 2px solid white
|
||||||
|
padding 2px
|
||||||
|
background white
|
||||||
|
width 38px
|
||||||
|
|
||||||
|
.userIcon img
|
||||||
|
padding 0
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
|
.text
|
||||||
|
display inline-block
|
||||||
|
margin 0
|
||||||
|
height 38px
|
||||||
|
line-height 1
|
||||||
|
font-weight bold
|
||||||
|
font-size rem(20)
|
||||||
|
padding 7px 0 11px 16px
|
||||||
|
text-decoration none
|
||||||
|
color white
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
|
.spacer
|
||||||
|
height 70px
|
||||||
|
|
||||||
|
.icon
|
||||||
|
padding 7px 16px
|
||||||
|
color white
|
||||||
|
box-sizing content-box
|
||||||
|
cursor pointer
|
||||||
18
src/dzeio/Navbar/Navbar.stories.js
Normal file
18
src/dzeio/Navbar/Navbar.stories.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
var __assign = (this && this.__assign) || function () {
|
||||||
|
__assign = Object.assign || function(t) {
|
||||||
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
||||||
|
s = arguments[i];
|
||||||
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
||||||
|
t[p] = s[p];
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
};
|
||||||
|
return __assign.apply(this, arguments);
|
||||||
|
};
|
||||||
|
import React from 'react';
|
||||||
|
import Component from '.';
|
||||||
|
export default {
|
||||||
|
title: 'DZEIO/Navbar',
|
||||||
|
component: Component
|
||||||
|
};
|
||||||
|
export var Basic = function (args) { return React.createElement(Component, __assign({}, args)); };
|
||||||
10
src/dzeio/Navbar/Navbar.stories.tsx
Normal file
10
src/dzeio/Navbar/Navbar.stories.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { Meta } from '@storybook/react/types-6-0'
|
||||||
|
import React from 'react'
|
||||||
|
import Component from '.'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'DZEIO/Navbar',
|
||||||
|
component: Component
|
||||||
|
} as Meta
|
||||||
|
|
||||||
|
export const Basic = (args: any) => <Component {...args} />
|
||||||
25
src/dzeio/Navbar/NavbarSpace.js
Normal file
25
src/dzeio/Navbar/NavbarSpace.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
var __extends = (this && this.__extends) || (function () {
|
||||||
|
var extendStatics = function (d, b) {
|
||||||
|
extendStatics = Object.setPrototypeOf ||
|
||||||
|
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||||
|
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
||||||
|
return extendStatics(d, b);
|
||||||
|
};
|
||||||
|
return function (d, b) {
|
||||||
|
extendStatics(d, b);
|
||||||
|
function __() { this.constructor = d; }
|
||||||
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
import React from 'react';
|
||||||
|
import css from './Navbar.module.styl';
|
||||||
|
var NavbarSpace = /** @class */ (function (_super) {
|
||||||
|
__extends(NavbarSpace, _super);
|
||||||
|
function NavbarSpace() {
|
||||||
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
||||||
|
_this.render = function () { return (React.createElement("div", { className: css.spacer })); };
|
||||||
|
return _this;
|
||||||
|
}
|
||||||
|
return NavbarSpace;
|
||||||
|
}(React.Component));
|
||||||
|
export default NavbarSpace;
|
||||||
11
src/dzeio/Navbar/NavbarSpace.tsx
Normal file
11
src/dzeio/Navbar/NavbarSpace.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import css from './Navbar.module.styl'
|
||||||
|
|
||||||
|
export default class NavbarSpace extends React.Component {
|
||||||
|
|
||||||
|
public render = () => (
|
||||||
|
<div className={css.spacer}></div>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
131
src/dzeio/Navbar/index.tsx
Normal file
131
src/dzeio/Navbar/index.tsx
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { Bell, Grid } from 'react-feather'
|
||||||
|
import Router from 'next/router'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import Row from '../Row'
|
||||||
|
import Col from '../Col'
|
||||||
|
import Button from '../Button'
|
||||||
|
import Image from '../Image'
|
||||||
|
|
||||||
|
import { buildClassName } from '../Util'
|
||||||
|
import Menu from '../Menu'
|
||||||
|
import css from './Navbar.module.styl'
|
||||||
|
|
||||||
|
interface States {
|
||||||
|
domain?: string
|
||||||
|
showUserMenu?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
username?: string
|
||||||
|
userPic?: string
|
||||||
|
userMenu?: Array<{href: string, name: string}>
|
||||||
|
loginUrl?: string
|
||||||
|
registerUrl?: string
|
||||||
|
logoUrl?: string
|
||||||
|
logoLabel?: string
|
||||||
|
logo?: {
|
||||||
|
src: string
|
||||||
|
alt: string
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Navbar extends React.Component<Props, States> {
|
||||||
|
|
||||||
|
public state: States = {}
|
||||||
|
|
||||||
|
public constructor(props: Props) {
|
||||||
|
super(props)
|
||||||
|
}
|
||||||
|
|
||||||
|
public componentDidMount() {
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
domain: Router.query.domain as string
|
||||||
|
})
|
||||||
|
Router.events.on('routeChangeComplete', () => {
|
||||||
|
this.setState({
|
||||||
|
domain: Router.query.domain as string | undefined
|
||||||
|
})
|
||||||
|
})
|
||||||
|
document.body.addEventListener('click', this.onClickAnywhere)
|
||||||
|
}
|
||||||
|
|
||||||
|
public componentWillUnmount() {
|
||||||
|
document.body.removeEventListener('click', this.onClickAnywhere)
|
||||||
|
}
|
||||||
|
|
||||||
|
public render = () => (
|
||||||
|
<nav className={buildClassName([css.navbar], [css.small, this.state.domain])}>
|
||||||
|
<Row >
|
||||||
|
{this.props.logo && (
|
||||||
|
<Col>
|
||||||
|
<Row align="center">
|
||||||
|
<Link href={this.props.logoUrl || '/'}>
|
||||||
|
<a aria-label={this.props.logoLabel || 'Homepage'}>
|
||||||
|
<Image
|
||||||
|
alt={this.props.logo.alt}
|
||||||
|
src={this.props.logo.src}
|
||||||
|
max={{ height: 70-32 }}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
</Row>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
)}
|
||||||
|
<Col>
|
||||||
|
<Row justify="flex-end" align="center">
|
||||||
|
{this.props.username ? (
|
||||||
|
<>
|
||||||
|
{/* <Bell className={css.icon} />
|
||||||
|
<Grid className={css.icon} /> */}
|
||||||
|
{this.props.userPic && (
|
||||||
|
<Image
|
||||||
|
onClick={this.onMenuClick}
|
||||||
|
alt="User Profile Picture"
|
||||||
|
classes={buildClassName([css.favicon], [css.userIcon])}
|
||||||
|
src={this.props.userPic}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<p
|
||||||
|
onClick={this.props.userMenu ? this.onMenuClick : undefined}
|
||||||
|
className={css.text}
|
||||||
|
>
|
||||||
|
{this.props.username}
|
||||||
|
</p>
|
||||||
|
{this.props.userMenu && (
|
||||||
|
<Menu
|
||||||
|
show={this.state.showUserMenu}
|
||||||
|
pos={{ right: 16, top: 86 }}
|
||||||
|
content={this.props.userMenu}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Button nomargintop href={this.props.loginUrl}>Login</Button>
|
||||||
|
<Button nomargintop color="secondary" href={this.props.registerUrl}>Register</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Row>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</nav>
|
||||||
|
)
|
||||||
|
|
||||||
|
private onClickAnywhere = () => {
|
||||||
|
this.setState({
|
||||||
|
showUserMenu: false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
private onMenuClick = () => {
|
||||||
|
const newMenuState = !this.state.showUserMenu
|
||||||
|
this.setState({
|
||||||
|
showUserMenu: newMenuState
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
6
src/dzeio/Overflow/Overflow.module.styl
Normal file
6
src/dzeio/Overflow/Overflow.module.styl
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
$height = 45px
|
||||||
|
|
||||||
|
.top
|
||||||
|
height $height
|
||||||
|
.bottom
|
||||||
|
margin-top - $height
|
||||||
20
src/dzeio/Overflow/index.tsx
Normal file
20
src/dzeio/Overflow/index.tsx
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import { buildClassName } from '../Util'
|
||||||
|
import css from './Overflow.module.styl'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
bottom?: boolean
|
||||||
|
top?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Overflow extends React.Component<Props> {
|
||||||
|
|
||||||
|
public render = () => (
|
||||||
|
<div className={buildClassName(
|
||||||
|
[css.bottom, this.props.bottom],
|
||||||
|
[css.top, this.props.top]
|
||||||
|
)}></div>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
14
src/dzeio/Popup/Popup.module.styl
Normal file
14
src/dzeio/Popup/Popup.module.styl
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
.popup
|
||||||
|
position fixed
|
||||||
|
height 100%
|
||||||
|
width 100%
|
||||||
|
top 0
|
||||||
|
left 0
|
||||||
|
background rgba(black, .3)
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
|
.popupChild
|
||||||
|
cursor initial
|
||||||
|
|
||||||
|
.exit
|
||||||
|
cursor pointer
|
||||||
36
src/dzeio/Popup/index.tsx
Normal file
36
src/dzeio/Popup/index.tsx
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { X } from 'react-feather'
|
||||||
|
import { BoxWrapper, BoxHeader, BoxBody } from '../Box'
|
||||||
|
import { Props as HeaderProps } from '../Box/BoxHeader'
|
||||||
|
import Row from '../Row'
|
||||||
|
|
||||||
|
import css from './Popup.module.styl'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: React.ReactNode
|
||||||
|
onClose?: () => void
|
||||||
|
header?: HeaderProps
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Popup extends React.Component<Props> {
|
||||||
|
|
||||||
|
public render = () => (
|
||||||
|
<Row onClick={this.parentClose} justify="center" align="center" className={css.popup}>
|
||||||
|
<BoxWrapper className={css.popupChild}>
|
||||||
|
<BoxHeader {...this.props.header}>
|
||||||
|
<X onClick={this.props.onClose} className={css.exit} />
|
||||||
|
</BoxHeader>
|
||||||
|
<BoxBody>
|
||||||
|
{this.props.children}
|
||||||
|
</BoxBody>
|
||||||
|
</BoxWrapper>
|
||||||
|
</Row>
|
||||||
|
)
|
||||||
|
|
||||||
|
private parentClose = (ev: React.MouseEvent<HTMLDivElement>) => {
|
||||||
|
if ((ev.target as HTMLElement).classList.contains(css.popup) && this.props.onClose) {
|
||||||
|
this.props.onClose()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
36
src/dzeio/Row/Row.module.styl
Normal file
36
src/dzeio/Row/Row.module.styl
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
@import "../config"
|
||||||
|
|
||||||
|
.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)
|
||||||
|
|
||||||
|
.nowrap
|
||||||
|
flex-wrap nowrap
|
||||||
|
|
||||||
|
.nogrow > *
|
||||||
|
flex-grow 0
|
||||||
|
|
||||||
|
for dir in 'row-reverse' 'column' 'column-reverse'
|
||||||
|
.direction-{dir}
|
||||||
|
flex-direction unquote(dir)
|
||||||
|
|
||||||
|
@media (max-width $mobile)
|
||||||
|
for dir in 'row-reverse' 'column' 'column-reverse'
|
||||||
|
.direction-mobile-{dir}
|
||||||
|
flex-direction unquote(dir)
|
||||||
|
|
||||||
|
for just in 'flex-start' 'center' 'flex-end' 'space-between' 'space-around' 'space-evenly'
|
||||||
|
.justify-{just}
|
||||||
|
justify-content unquote(just)
|
||||||
|
|
||||||
|
for align in 'flex-start' 'center' 'flex-end' 'baseline'
|
||||||
|
.align-{align}
|
||||||
|
align-items unquote(align)
|
||||||
40
src/dzeio/Row/index.tsx
Normal file
40
src/dzeio/Row/index.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import { buildClassName } from '../Util'
|
||||||
|
import css from './Row.module.styl'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children?: React.ReactNode
|
||||||
|
direction?: 'row-reverse' | 'column' | 'column-reverse'
|
||||||
|
mobileDirection?: 'row-reverse' | 'column' | 'column-reverse'
|
||||||
|
justify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'
|
||||||
|
align?: 'flex-start' | 'center' | 'flex-end' | 'baseline'
|
||||||
|
nowrap?: boolean
|
||||||
|
nogrow?: boolean
|
||||||
|
className?: string
|
||||||
|
nomargin?: boolean
|
||||||
|
onClick?: (ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Row extends React.Component<Props> {
|
||||||
|
|
||||||
|
public render = () => (
|
||||||
|
<div
|
||||||
|
className={buildClassName(
|
||||||
|
css.row,
|
||||||
|
[css[`direction-${this.props.direction}`], this.props.direction],
|
||||||
|
[css[`direction-mobile-${this.props.mobileDirection}`], this.props.mobileDirection],
|
||||||
|
[css[`justify-${this.props.justify}`], this.props.justify],
|
||||||
|
[css[`align-${this.props.align}`], this.props.align],
|
||||||
|
[css.nowrap, this.props.nowrap],
|
||||||
|
[css.nogrow, this.props.nogrow],
|
||||||
|
this.props.className,
|
||||||
|
[css.nomargin, this.props.nomargin]
|
||||||
|
)}
|
||||||
|
onClick={this.props.onClick}
|
||||||
|
>
|
||||||
|
{this.props.children}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
32
src/dzeio/SidebarContainer/SidebarContainer.module.styl
Normal file
32
src/dzeio/SidebarContainer/SidebarContainer.module.styl
Normal file
@ -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
|
||||||
45
src/dzeio/SidebarContainer/index.tsx
Normal file
45
src/dzeio/SidebarContainer/index.tsx
Normal file
@ -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" max={{ width: '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>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
13
src/dzeio/Table/Table.module.styl
Normal file
13
src/dzeio/Table/Table.module.styl
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
.table
|
||||||
|
border-spacing 0
|
||||||
|
border 2px solid #EEE
|
||||||
|
border-radius 4px
|
||||||
|
width 100%
|
||||||
|
|
||||||
|
td
|
||||||
|
border-top 1px solid #EEE
|
||||||
|
|
||||||
|
th
|
||||||
|
td
|
||||||
|
padding 8px
|
||||||
|
text-align left
|
||||||
15
src/dzeio/Table/index.tsx
Normal file
15
src/dzeio/Table/index.tsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
import css from './Table.module.styl'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: React.ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Table extends React.Component<Props> {
|
||||||
|
|
||||||
|
public render = () => (
|
||||||
|
<table className={css.table}>{this.props.children}</table>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
21
src/dzeio/Text/Text.module.styl
Normal file
21
src/dzeio/Text/Text.module.styl
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
.text
|
||||||
|
margin 0
|
||||||
|
|
||||||
|
.white
|
||||||
|
color white
|
||||||
|
|
||||||
|
.black
|
||||||
|
color #212121
|
||||||
|
|
||||||
|
.align-center
|
||||||
|
text-align center
|
||||||
|
|
||||||
|
.align-right
|
||||||
|
text-align right
|
||||||
|
|
||||||
|
|
||||||
|
@media (prefers-color-scheme dark)
|
||||||
|
.white:not(.noDarkTheme)
|
||||||
|
color #212121
|
||||||
|
.black:not(.noDarkTheme)
|
||||||
|
color white
|
||||||
37
src/dzeio/Text/index.tsx
Normal file
37
src/dzeio/Text/index.tsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { buildClassName } from '../Util'
|
||||||
|
import css from './Text.module.styl'
|
||||||
|
interface Props {
|
||||||
|
color?: 'black' | 'white'
|
||||||
|
type?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'em'
|
||||||
|
className?: string
|
||||||
|
noDarkTheme?: boolean
|
||||||
|
align?: 'right' | 'center'
|
||||||
|
children: React.ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Text extends React.Component<Props> {
|
||||||
|
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
const classes = buildClassName(
|
||||||
|
css.text,
|
||||||
|
[css.white, this.props.color === 'white'],
|
||||||
|
[css.black, this.props.color === 'black' || !this.props.color],
|
||||||
|
[css.noDarkTheme, this.props.noDarkTheme],
|
||||||
|
[css[`align-${this.props.align}`], this.props.align],
|
||||||
|
this.props.className
|
||||||
|
)
|
||||||
|
|
||||||
|
switch (this.props.type || '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>)
|
||||||
|
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>)
|
||||||
|
default: return (<p className={classes}>{this.props.children}</p>)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
41
src/dzeio/Util.js
Normal file
41
src/dzeio/Util.js
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
export function buildClassName() {
|
||||||
|
var classes = [];
|
||||||
|
for (var _i = 0; _i < arguments.length; _i++) {
|
||||||
|
classes[_i] = arguments[_i];
|
||||||
|
}
|
||||||
|
var classesFinal = [];
|
||||||
|
root: for (var _a = 0, classes_1 = classes; _a < classes_1.length; _a++) {
|
||||||
|
var classe = classes_1[_a];
|
||||||
|
if (typeof classe === 'undefined') {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if (typeof classe === 'string') {
|
||||||
|
classesFinal.push(classe);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
var classToPut = classe.shift();
|
||||||
|
if (typeof classToPut === 'undefined') {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
for (var _b = 0, classe_1 = classe; _b < classe_1.length; _b++) {
|
||||||
|
var iterator = classe_1[_b];
|
||||||
|
if (!iterator) {
|
||||||
|
continue root;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
classesFinal.push(classToPut);
|
||||||
|
}
|
||||||
|
if (classesFinal.length === 0) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
return classesFinal.join(' ');
|
||||||
|
}
|
||||||
|
export var colors = {
|
||||||
|
default: '#3949AB',
|
||||||
|
primary: '#3949AB',
|
||||||
|
secondary: '#FCFCFC',
|
||||||
|
info: '#03A9F4',
|
||||||
|
success: '#2DCE89',
|
||||||
|
danger: '#F5365C',
|
||||||
|
warning: '#FB6340'
|
||||||
|
};
|
||||||
36
src/dzeio/Util.ts
Normal file
36
src/dzeio/Util.ts
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
export function buildClassName(...classes: Array<Array<any> | string | undefined>): string|undefined {
|
||||||
|
const classesFinal: Array<string> = []
|
||||||
|
root: for (const classe of classes) {
|
||||||
|
if (typeof classe === 'undefined') {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
if (typeof classe === 'string') {
|
||||||
|
classesFinal.push(classe)
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
const classToPut = classe.shift()
|
||||||
|
if (typeof classToPut === 'undefined') {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
for (const iterator of classe) {
|
||||||
|
if (!iterator) {
|
||||||
|
continue root
|
||||||
|
}
|
||||||
|
}
|
||||||
|
classesFinal.push(classToPut)
|
||||||
|
}
|
||||||
|
if (classesFinal.length === 0) {
|
||||||
|
return undefined
|
||||||
|
}
|
||||||
|
return classesFinal.join(' ')
|
||||||
|
}
|
||||||
|
|
||||||
|
export const colors = {
|
||||||
|
default: '#3949AB', // This color should never appear
|
||||||
|
primary: '#3949AB',
|
||||||
|
secondary: '#FCFCFC',
|
||||||
|
info: '#03A9F4',
|
||||||
|
success: '#2DCE89',
|
||||||
|
danger: '#F5365C',
|
||||||
|
warning: '#FB6340'
|
||||||
|
}
|
||||||
209
src/dzeio/_aileron.styl
Normal file
209
src/dzeio/_aileron.styl
Normal file
@ -0,0 +1,209 @@
|
|||||||
|
$path = "/assets/fonts/aileron"
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-display swap
|
||||||
|
font-family 'Aileron'
|
||||||
|
src url($path + '/Aileron-Regular.eot')
|
||||||
|
src local('Aileron Regular'), local('Aileron-Regular'),
|
||||||
|
url($path + '/Aileron-Regular.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url($path + '/Aileron-Regular.woff2') format('woff2'),
|
||||||
|
url($path + '/Aileron-Regular.woff') format('woff'),
|
||||||
|
url($path + '/Aileron-Regular.ttf') format('truetype')
|
||||||
|
font-weight normal
|
||||||
|
font-style normal
|
||||||
|
unicode-range U+0000-01FF
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-display swap
|
||||||
|
font-family 'Aileron'
|
||||||
|
src url($path + '/Aileron-BoldItalic.eot')
|
||||||
|
src local('Aileron Bold Italic'), local('Aileron-BoldItalic'),
|
||||||
|
url($path + '/Aileron-BoldItalic.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url($path + '/Aileron-BoldItalic.woff2') format('woff2'),
|
||||||
|
url($path + '/Aileron-BoldItalic.woff') format('woff'),
|
||||||
|
url($path + '/Aileron-BoldItalic.ttf') format('truetype')
|
||||||
|
font-weight bold
|
||||||
|
font-style italic
|
||||||
|
unicode-range U+0000-01FF
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-display swap
|
||||||
|
font-family 'Aileron'
|
||||||
|
src url($path + '/Aileron-HeavyItalic.eot')
|
||||||
|
src local('Aileron Heavy Italic'), local('Aileron-HeavyItalic'),
|
||||||
|
url($path + '/Aileron-HeavyItalic.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url($path + '/Aileron-HeavyItalic.woff2') format('woff2'),
|
||||||
|
url($path + '/Aileron-HeavyItalic.woff') format('woff'),
|
||||||
|
url($path + '/Aileron-HeavyItalic.ttf') format('truetype')
|
||||||
|
font-weight 900
|
||||||
|
font-style italic
|
||||||
|
unicode-range U+0000-01FF
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-display swap
|
||||||
|
font-family 'Aileron'
|
||||||
|
src url($path + '/Aileron-BlackItalic.eot')
|
||||||
|
src local('Aileron Black Italic'), local('Aileron-BlackItalic'),
|
||||||
|
url($path + '/Aileron-BlackItalic.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url($path + '/Aileron-BlackItalic.woff2') format('woff2'),
|
||||||
|
url($path + '/Aileron-BlackItalic.woff') format('woff'),
|
||||||
|
url($path + '/Aileron-BlackItalic.ttf') format('truetype')
|
||||||
|
font-weight 900
|
||||||
|
font-style italic
|
||||||
|
unicode-range U+0000-01FF
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-display swap
|
||||||
|
font-family 'Aileron'
|
||||||
|
src url($path + '/Aileron-UltraLightItalic.eot')
|
||||||
|
src local('Aileron UltraLight Italic'), local('Aileron-UltraLightItalic'),
|
||||||
|
url($path + '/Aileron-UltraLightItalic.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url($path + '/Aileron-UltraLightItalic.woff2') format('woff2'),
|
||||||
|
url($path + '/Aileron-UltraLightItalic.woff') format('woff'),
|
||||||
|
url($path + '/Aileron-UltraLightItalic.ttf') format('truetype')
|
||||||
|
font-weight 200
|
||||||
|
font-style italic
|
||||||
|
unicode-range U+0000-01FF
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-display swap
|
||||||
|
font-family 'Aileron'
|
||||||
|
src url($path + '/Aileron-Bold.eot')
|
||||||
|
src local('Aileron Bold'), local('Aileron-Bold'),
|
||||||
|
url($path + '/Aileron-Bold.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url($path + '/Aileron-Bold.woff2') format('woff2'),
|
||||||
|
url($path + '/Aileron-Bold.woff') format('woff'),
|
||||||
|
url($path + '/Aileron-Bold.ttf') format('truetype')
|
||||||
|
font-weight bold
|
||||||
|
font-style normal
|
||||||
|
unicode-range U+0000-01FF
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-display swap
|
||||||
|
font-family 'Aileron'
|
||||||
|
src url($path + '/Aileron-Black.eot')
|
||||||
|
src local('Aileron Black'), local('Aileron-Black'),
|
||||||
|
url($path + '/Aileron-Black.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url($path + '/Aileron-Black.woff2') format('woff2'),
|
||||||
|
url($path + '/Aileron-Black.woff') format('woff'),
|
||||||
|
url($path + '/Aileron-Black.ttf') format('truetype')
|
||||||
|
font-weight 900
|
||||||
|
font-style normal
|
||||||
|
unicode-range U+0000-01FF
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-display swap
|
||||||
|
font-family 'Aileron'
|
||||||
|
src url($path + '/Aileron-LightItalic.eot')
|
||||||
|
src local('Aileron Light Italic'), local('Aileron-LightItalic'),
|
||||||
|
url($path + '/Aileron-LightItalic.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url($path + '/Aileron-LightItalic.woff2') format('woff2'),
|
||||||
|
url($path + '/Aileron-LightItalic.woff') format('woff'),
|
||||||
|
url($path + '/Aileron-LightItalic.ttf') format('truetype')
|
||||||
|
font-weight 300
|
||||||
|
font-style italic
|
||||||
|
unicode-range U+0000-01FF
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-display swap
|
||||||
|
font-family 'Aileron'
|
||||||
|
src url($path + '/Aileron-SemiBold.eot')
|
||||||
|
src local('Aileron SemiBold'), local('Aileron-SemiBold'),
|
||||||
|
url($path + '/Aileron-SemiBold.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url($path + '/Aileron-SemiBold.woff2') format('woff2'),
|
||||||
|
url($path + '/Aileron-SemiBold.woff') format('woff'),
|
||||||
|
url($path + '/Aileron-SemiBold.ttf') format('truetype')
|
||||||
|
font-weight 600
|
||||||
|
font-style normal
|
||||||
|
unicode-range U+0000-01FF
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-display swap
|
||||||
|
font-family 'Aileron'
|
||||||
|
src url($path + '/Aileron-Thin.eot')
|
||||||
|
src local('Aileron Thin'), local('Aileron-Thin'),
|
||||||
|
url($path + '/Aileron-Thin.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url($path + '/Aileron-Thin.woff2') format('woff2'),
|
||||||
|
url($path + '/Aileron-Thin.woff') format('woff'),
|
||||||
|
url($path + '/Aileron-Thin.ttf') format('truetype')
|
||||||
|
font-weight 100
|
||||||
|
font-style normal
|
||||||
|
unicode-range U+0000-01FF
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-display swap
|
||||||
|
font-family 'Aileron'
|
||||||
|
src url($path + '/Aileron-SemiBoldItalic.eot')
|
||||||
|
src local('Aileron SemiBold Italic'), local('Aileron-SemiBoldItalic'),
|
||||||
|
url($path + '/Aileron-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url($path + '/Aileron-SemiBoldItalic.woff2') format('woff2'),
|
||||||
|
url($path + '/Aileron-SemiBoldItalic.woff') format('woff'),
|
||||||
|
url($path + '/Aileron-SemiBoldItalic.ttf') format('truetype')
|
||||||
|
font-weight 600
|
||||||
|
font-style italic
|
||||||
|
unicode-range U+0000-01FF
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-display swap
|
||||||
|
font-family 'Aileron'
|
||||||
|
src url($path + '/Aileron-ThinItalic.eot')
|
||||||
|
src local('Aileron Thin Italic'), local('Aileron-ThinItalic'),
|
||||||
|
url($path + '/Aileron-ThinItalic.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url($path + '/Aileron-ThinItalic.woff2') format('woff2'),
|
||||||
|
url($path + '/Aileron-ThinItalic.woff') format('woff'),
|
||||||
|
url($path + '/Aileron-ThinItalic.ttf') format('truetype')
|
||||||
|
font-weight 100
|
||||||
|
font-style italic
|
||||||
|
unicode-range U+0000-01FF
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-display swap
|
||||||
|
font-family 'Aileron'
|
||||||
|
src url($path + '/Aileron-Light.eot')
|
||||||
|
src local('Aileron Light'), local('Aileron-Light'),
|
||||||
|
url($path + '/Aileron-Light.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url($path + '/Aileron-Light.woff2') format('woff2'),
|
||||||
|
url($path + '/Aileron-Light.woff') format('woff'),
|
||||||
|
url($path + '/Aileron-Light.ttf') format('truetype')
|
||||||
|
font-weight 300
|
||||||
|
font-style normal
|
||||||
|
unicode-range U+0000-01FF
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-display swap
|
||||||
|
font-family 'Aileron'
|
||||||
|
src url($path + '/Aileron-UltraLight.eot')
|
||||||
|
src local('Aileron UltraLight'), local('Aileron-UltraLight'),
|
||||||
|
url($path + '/Aileron-UltraLight.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url($path + '/Aileron-UltraLight.woff2') format('woff2'),
|
||||||
|
url($path + '/Aileron-UltraLight.woff') format('woff'),
|
||||||
|
url($path + '/Aileron-UltraLight.ttf') format('truetype')
|
||||||
|
font-weight 200
|
||||||
|
font-style normal
|
||||||
|
unicode-range U+0000-01FF
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-display swap
|
||||||
|
font-family 'Aileron'
|
||||||
|
src url($path + '/Aileron-Italic.eot')
|
||||||
|
src local('Aileron Italic'), local('Aileron-Italic'),
|
||||||
|
url($path + '/Aileron-Italic.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url($path + '/Aileron-Italic.woff2') format('woff2'),
|
||||||
|
url($path + '/Aileron-Italic.woff') format('woff'),
|
||||||
|
url($path + '/Aileron-Italic.ttf') format('truetype')
|
||||||
|
font-weight normal
|
||||||
|
font-style italic
|
||||||
|
unicode-range U+0000-01FF
|
||||||
|
|
||||||
|
@font-face
|
||||||
|
font-display swap
|
||||||
|
font-family 'Aileron'
|
||||||
|
src url($path + '/Aileron-Heavy.eot')
|
||||||
|
src local('Aileron Heavy'), local('Aileron-Heavy'),
|
||||||
|
url($path + '/Aileron-Heavy.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url($path + '/Aileron-Heavy.woff2') format('woff2'),
|
||||||
|
url($path + '/Aileron-Heavy.woff') format('woff'),
|
||||||
|
url($path + '/Aileron-Heavy.ttf') format('truetype')
|
||||||
|
font-weight 900
|
||||||
|
font-style normal
|
||||||
|
unicode-range U+0000-01FF
|
||||||
28
src/dzeio/config.styl
Normal file
28
src/dzeio/config.styl
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
$default = #4285f4 // This color should never appear
|
||||||
|
$primary = #4285f4
|
||||||
|
$secondary = #FCFCFC
|
||||||
|
$info = #03A9F4
|
||||||
|
$success = #2DCE89
|
||||||
|
$danger = #F5365C
|
||||||
|
$warning = #FB6340
|
||||||
|
|
||||||
|
$transitionTime = .15s
|
||||||
|
$transitionFunction = ease-in-out
|
||||||
|
$transition = $transitionTime $transitionFunction
|
||||||
|
|
||||||
|
$darkBackground = #161616
|
||||||
|
|
||||||
|
// Breakpoints
|
||||||
|
$mobile = 768px
|
||||||
|
$tablet = 1200px
|
||||||
|
|
||||||
|
// Row/Col
|
||||||
|
$totalGapSize = 10%
|
||||||
|
$colCount = 12
|
||||||
|
$colCountTablet = 8
|
||||||
|
$colCountMobile = 4
|
||||||
|
|
||||||
|
$gapSize = 16px //$totalGapSize / ($colCount+1)
|
||||||
|
|
||||||
|
rem($a)
|
||||||
|
($a / 16)rem
|
||||||
23
src/dzeio/general.styl
Normal file
23
src/dzeio/general.styl
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
@import "_aileron"
|
||||||
|
|
||||||
|
*
|
||||||
|
*::before
|
||||||
|
*::after
|
||||||
|
box-sizing border-box
|
||||||
|
|
||||||
|
html
|
||||||
|
font-family Aileron, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
|
||||||
|
|
||||||
|
html
|
||||||
|
body
|
||||||
|
body > div[id="__next"]
|
||||||
|
margin 0
|
||||||
|
min-height 100vh
|
||||||
|
background #f5f5f5
|
||||||
|
|
||||||
|
@media (prefers-color-scheme dark)
|
||||||
|
background #202020
|
||||||
|
|
||||||
|
a
|
||||||
|
color inherit
|
||||||
|
text-decoration none
|
||||||
1
src/dzeio/interfaces.js
Normal file
1
src/dzeio/interfaces.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
export {};
|
||||||
8
src/dzeio/interfaces.ts
Normal file
8
src/dzeio/interfaces.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import { SVGAttributes } from 'react'
|
||||||
|
|
||||||
|
export type ColorType = 'primary' | 'secondary' | 'info' | 'success' | 'danger' | 'warning'
|
||||||
|
|
||||||
|
export interface IconProps extends SVGAttributes<SVGElement> {
|
||||||
|
color?: string
|
||||||
|
size?: string | number
|
||||||
|
}
|
||||||
11
src/dzeio/util.styl
Normal file
11
src/dzeio/util.styl
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
.fullscrean
|
||||||
|
min-height 100vh
|
||||||
|
|
||||||
|
.fullHeight
|
||||||
|
height 50vh
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Utils for Width
|
||||||
|
.w50p
|
||||||
|
width 50%
|
||||||
52
src/index.ts
Normal file
52
src/index.ts
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
import Box, { BoxBody, BoxHeader, BoxWrapper } from './dzeio/Box'
|
||||||
|
import Button from './dzeio/Button'
|
||||||
|
import Checkbox from './dzeio/Checkbox'
|
||||||
|
import Code from './dzeio/Code'
|
||||||
|
import Col from './dzeio/Col'
|
||||||
|
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 Link from './dzeio/Link'
|
||||||
|
import Menu from './dzeio/Menu'
|
||||||
|
import Navbar from './dzeio/Navbar'
|
||||||
|
import NavbarSpace from './dzeio/Navbar/NavbarSpace'
|
||||||
|
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'
|
||||||
|
|
||||||
|
import './dzeio/general.styl'
|
||||||
|
|
||||||
|
export {
|
||||||
|
Box,
|
||||||
|
BoxBody,
|
||||||
|
BoxHeader,
|
||||||
|
BoxWrapper,
|
||||||
|
Button,
|
||||||
|
Checkbox,
|
||||||
|
Code,
|
||||||
|
Col,
|
||||||
|
Container,
|
||||||
|
Fieldset,
|
||||||
|
Footer,
|
||||||
|
GradientBackground,
|
||||||
|
Image,
|
||||||
|
Input,
|
||||||
|
Link,
|
||||||
|
Menu,
|
||||||
|
Navbar,
|
||||||
|
NavbarSpace,
|
||||||
|
Overflow,
|
||||||
|
Popup,
|
||||||
|
Row,
|
||||||
|
SidebarContainer,
|
||||||
|
Table,
|
||||||
|
Text,
|
||||||
|
Util
|
||||||
|
}
|
||||||
4
src/stylus.d.ts
vendored
Normal file
4
src/stylus.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
declare module '*.styl' {
|
||||||
|
const content: any
|
||||||
|
export = content
|
||||||
|
}
|
||||||
69
tsconfig.json
Normal file
69
tsconfig.json
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
/* Basic Options */
|
||||||
|
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
|
||||||
|
"module": "esnext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
|
||||||
|
// "lib": [], /* Specify library files to be included in the compilation. */
|
||||||
|
// "allowJs": true, /* Allow javascript files to be compiled. */
|
||||||
|
// "checkJs": true, /* Report errors in .js files. */
|
||||||
|
"jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
|
||||||
|
"declaration": true, /* Generates corresponding '.d.ts' file. */
|
||||||
|
// "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",
|
||||||
|
// "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'. */
|
||||||
|
// "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'). */
|
||||||
|
|
||||||
|
/* Strict Type-Checking Options */
|
||||||
|
"strict": true, /* Enable all strict type-checking options. */
|
||||||
|
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
|
||||||
|
// "strictNullChecks": true, /* Enable strict null checks. */
|
||||||
|
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
|
||||||
|
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
|
||||||
|
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
|
||||||
|
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
|
||||||
|
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
|
||||||
|
|
||||||
|
/* Additional Checks */
|
||||||
|
// "noUnusedLocals": true, /* Report errors on unused locals. */
|
||||||
|
// "noUnusedParameters": true, /* Report errors on unused parameters. */
|
||||||
|
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
|
||||||
|
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
|
||||||
|
|
||||||
|
/* Module Resolution Options */
|
||||||
|
"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
|
||||||
|
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
|
||||||
|
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
|
||||||
|
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
|
||||||
|
// "typeRoots": [], /* List of folders to include type definitions from. */
|
||||||
|
// "types": [], /* Type declaration files to be included in compilation. */
|
||||||
|
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
|
||||||
|
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
|
||||||
|
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
|
||||||
|
|
||||||
|
/* Source Map Options */
|
||||||
|
// "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
|
||||||
|
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||||
|
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
|
||||||
|
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
|
||||||
|
|
||||||
|
/* Experimental Options */
|
||||||
|
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
|
||||||
|
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*",
|
||||||
|
"src/stylus.d.ts",
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
"build"
|
||||||
|
]
|
||||||
|
}
|
||||||
8
types/dzeio/Box/BoxBody/index.d.ts
vendored
Normal file
8
types/dzeio/Box/BoxBody/index.d.ts
vendored
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react';
|
||||||
|
interface Props {
|
||||||
|
noPadding?: boolean;
|
||||||
|
}
|
||||||
|
export default class BoxBody extends React.Component<Props> {
|
||||||
|
render: () => JSX.Element;
|
||||||
|
}
|
||||||
|
export {};
|
||||||
11
types/dzeio/Box/BoxHeader/index.d.ts
vendored
Normal file
11
types/dzeio/Box/BoxHeader/index.d.ts
vendored
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import React from 'react';
|
||||||
|
export interface Props {
|
||||||
|
title?: string;
|
||||||
|
titleColSize?: number;
|
||||||
|
subtitle?: string;
|
||||||
|
delimiter?: boolean;
|
||||||
|
titleClassName?: string;
|
||||||
|
}
|
||||||
|
export default class BoxHeader extends React.Component<Props> {
|
||||||
|
render: () => JSX.Element;
|
||||||
|
}
|
||||||
9
types/dzeio/Box/BoxWrapper/index.d.ts
vendored
Normal file
9
types/dzeio/Box/BoxWrapper/index.d.ts
vendored
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import React from 'react';
|
||||||
|
interface Props extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
||||||
|
outline?: boolean;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
export default class BoxWrapper extends React.Component<Props> {
|
||||||
|
render: () => JSX.Element;
|
||||||
|
}
|
||||||
|
export {};
|
||||||
19
types/dzeio/Box/index.d.ts
vendored
Normal file
19
types/dzeio/Box/index.d.ts
vendored
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import BoxWrapper from './BoxWrapper';
|
||||||
|
import BoxHeader from './BoxHeader';
|
||||||
|
import BoxBody from './BoxBody';
|
||||||
|
interface Props {
|
||||||
|
outline?: boolean;
|
||||||
|
className?: string;
|
||||||
|
title?: string;
|
||||||
|
titleColSize?: number;
|
||||||
|
subtitle?: string;
|
||||||
|
delimiter?: boolean;
|
||||||
|
titleClassName?: string;
|
||||||
|
headerButtons?: React.ReactNode;
|
||||||
|
noPadding?: boolean;
|
||||||
|
}
|
||||||
|
export default class Box extends React.Component<Props> {
|
||||||
|
render: () => JSX.Element;
|
||||||
|
}
|
||||||
|
export { BoxWrapper, BoxHeader, BoxBody };
|
||||||
5
types/dzeio/Button/Button.stories.d.ts
vendored
Normal file
5
types/dzeio/Button/Button.stories.d.ts
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
/// <reference types="react" />
|
||||||
|
import { Meta } from '@storybook/react/types-6-0';
|
||||||
|
declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
|
||||||
|
export default _default;
|
||||||
|
export declare const Basic: (args: any) => JSX.Element;
|
||||||
19
types/dzeio/Button/index.d.ts
vendored
Normal file
19
types/dzeio/Button/index.d.ts
vendored
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import React, { FC } from 'react';
|
||||||
|
import { ColorType, IconProps } from '../interfaces';
|
||||||
|
interface Props {
|
||||||
|
outline?: boolean;
|
||||||
|
nomargintop?: boolean;
|
||||||
|
color?: ColorType;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
icon?: FC<IconProps> | string;
|
||||||
|
size?: 'large' | 'small' | 'block';
|
||||||
|
href?: string;
|
||||||
|
as?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
loading?: boolean;
|
||||||
|
onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void;
|
||||||
|
}
|
||||||
|
export default class Button extends React.Component<Props> {
|
||||||
|
render: () => JSX.Element;
|
||||||
|
}
|
||||||
|
export {};
|
||||||
5
types/dzeio/Checkbox/Checkbox.stories.d.ts
vendored
Normal file
5
types/dzeio/Checkbox/Checkbox.stories.d.ts
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
/// <reference types="react" />
|
||||||
|
import { Meta } from '@storybook/react/types-6-0';
|
||||||
|
declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
|
||||||
|
export default _default;
|
||||||
|
export declare const Basic: (args: any) => JSX.Element;
|
||||||
14
types/dzeio/Checkbox/index.d.ts
vendored
Normal file
14
types/dzeio/Checkbox/index.d.ts
vendored
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { ColorType } from '../interfaces';
|
||||||
|
interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
||||||
|
label?: string;
|
||||||
|
id: string;
|
||||||
|
type?: undefined;
|
||||||
|
radio?: boolean;
|
||||||
|
switch?: boolean;
|
||||||
|
color?: ColorType;
|
||||||
|
}
|
||||||
|
export default class Checkbox extends React.Component<Props> {
|
||||||
|
render(): JSX.Element;
|
||||||
|
}
|
||||||
|
export {};
|
||||||
5
types/dzeio/Code/Code.stories.d.ts
vendored
Normal file
5
types/dzeio/Code/Code.stories.d.ts
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
/// <reference types="react" />
|
||||||
|
import { Meta } from '@storybook/react/types-6-0';
|
||||||
|
declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
|
||||||
|
export default _default;
|
||||||
|
export declare const Basic: (args: any) => JSX.Element;
|
||||||
8
types/dzeio/Code/index.d.ts
vendored
Normal file
8
types/dzeio/Code/index.d.ts
vendored
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react';
|
||||||
|
interface Props {
|
||||||
|
block?: boolean;
|
||||||
|
}
|
||||||
|
export default class Code extends React.Component<Props> {
|
||||||
|
render: () => JSX.Element;
|
||||||
|
}
|
||||||
|
export {};
|
||||||
17
types/dzeio/Col/DebugCols.d.ts
vendored
Normal file
17
types/dzeio/Col/DebugCols.d.ts
vendored
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import React from 'react';
|
||||||
|
declare enum Breakpoint {
|
||||||
|
MOBILE = 0,
|
||||||
|
TABLET = 1,
|
||||||
|
COMPUT = 2
|
||||||
|
}
|
||||||
|
interface States {
|
||||||
|
breakpoint: Breakpoint;
|
||||||
|
}
|
||||||
|
export default class DebugCols extends React.Component<unknown, States> {
|
||||||
|
state: States;
|
||||||
|
componentDidMount(): void;
|
||||||
|
componentWillUnmount(): void;
|
||||||
|
render: () => JSX.Element;
|
||||||
|
private onResize;
|
||||||
|
}
|
||||||
|
export {};
|
||||||
18
types/dzeio/Col/index.d.ts
vendored
Normal file
18
types/dzeio/Col/index.d.ts
vendored
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import React from 'react';
|
||||||
|
interface Props {
|
||||||
|
size?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
||||||
|
offset?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
nogrow?: boolean;
|
||||||
|
tabletSize?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
|
||||||
|
tabletoffset?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
|
||||||
|
tabletGrow?: boolean;
|
||||||
|
mobileSize?: 0 | 1 | 2 | 3 | 4;
|
||||||
|
mobileoffset?: 1 | 2 | 3;
|
||||||
|
mobileGrow?: boolean;
|
||||||
|
}
|
||||||
|
export default class Col extends React.Component<Props> {
|
||||||
|
render: () => JSX.Element;
|
||||||
|
}
|
||||||
|
export {};
|
||||||
9
types/dzeio/Container/index.d.ts
vendored
Normal file
9
types/dzeio/Container/index.d.ts
vendored
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import React from 'react';
|
||||||
|
interface Props {
|
||||||
|
children: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
export default class Container extends React.Component<Props> {
|
||||||
|
render: () => JSX.Element;
|
||||||
|
}
|
||||||
|
export {};
|
||||||
9
types/dzeio/Fieldset/index.d.ts
vendored
Normal file
9
types/dzeio/Fieldset/index.d.ts
vendored
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import React from 'react';
|
||||||
|
interface Props {
|
||||||
|
title?: string;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
}
|
||||||
|
export default class Fieldset extends React.Component<Props> {
|
||||||
|
render: () => JSX.Element;
|
||||||
|
}
|
||||||
|
export {};
|
||||||
4
types/dzeio/Footer/index.d.ts
vendored
Normal file
4
types/dzeio/Footer/index.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import React from 'react';
|
||||||
|
export default class Footer extends React.Component {
|
||||||
|
render: () => JSX.Element;
|
||||||
|
}
|
||||||
11
types/dzeio/GradientBackground/index.d.ts
vendored
Normal file
11
types/dzeio/GradientBackground/index.d.ts
vendored
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { ColorType } from '../interfaces';
|
||||||
|
interface Props {
|
||||||
|
color?: ColorType;
|
||||||
|
className?: string;
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
export default class GradientBackground extends React.Component<Props> {
|
||||||
|
render: () => JSX.Element;
|
||||||
|
}
|
||||||
|
export {};
|
||||||
43
types/dzeio/Image/index.d.ts
vendored
Normal file
43
types/dzeio/Image/index.d.ts
vendored
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
import React from 'react';
|
||||||
|
export interface ImageProps {
|
||||||
|
defaultHeight?: number;
|
||||||
|
src?: string;
|
||||||
|
sources?: Array<string>;
|
||||||
|
deleteOnError?: boolean;
|
||||||
|
downgradeOnError?: string;
|
||||||
|
canFullscreen?: boolean;
|
||||||
|
max?: {
|
||||||
|
height?: number | string;
|
||||||
|
width?: number | string;
|
||||||
|
};
|
||||||
|
width?: number | string;
|
||||||
|
default?: {
|
||||||
|
height?: number | string;
|
||||||
|
width?: number | string;
|
||||||
|
};
|
||||||
|
alt?: string;
|
||||||
|
classes?: string;
|
||||||
|
className?: string;
|
||||||
|
onClick?: () => void;
|
||||||
|
}
|
||||||
|
export default class Image extends React.Component<ImageProps> {
|
||||||
|
private ref;
|
||||||
|
private plchldr;
|
||||||
|
private parent;
|
||||||
|
private pic;
|
||||||
|
private wasDowngraded;
|
||||||
|
private cardPos;
|
||||||
|
private cardSize;
|
||||||
|
private isFullscreen;
|
||||||
|
componentDidMount(): Promise<void>;
|
||||||
|
componentDidUpdate(): Promise<void>;
|
||||||
|
componentWillUnmount(): Promise<void>;
|
||||||
|
render(): JSX.Element;
|
||||||
|
private onScroll;
|
||||||
|
private onResize;
|
||||||
|
private onClick;
|
||||||
|
private valToPixel;
|
||||||
|
private onLoad;
|
||||||
|
private onError;
|
||||||
|
private w;
|
||||||
|
}
|
||||||
5
types/dzeio/Input/Input.stories.d.ts
vendored
Normal file
5
types/dzeio/Input/Input.stories.d.ts
vendored
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
/// <reference types="react" />
|
||||||
|
import { Meta } from '@storybook/react/types-6-0';
|
||||||
|
declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
|
||||||
|
export default _default;
|
||||||
|
export declare const Basic: (args: any) => JSX.Element;
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user