dzeio/components
1
0
Fork 0
mirror of https://github.com/dzeiocom/components.git synced 2025-06-07 00:29:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Moved to NPM and lucide-icons

Browse Source 
Signed-off-by: Avior <florian.bouillon@delta-wings.net>
This commit is contained in:
Florian Bouillon 2021-06-28 10:56:58 +02:00
parent e38387534a
commit e24b31df10
Signed by: Florian Bouillon
GPG Key ID: 50BD648F12C86AB6
18 changed files with 41225 additions and 11994 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.editorconfig Normal file
View File

@ -0,0 +1,12 @@
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
indent_style = tab
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

1
.gitignore vendored
View File

@ -9,4 +9,3 @@ types/
!src/stylus.d.ts !src/stylus.d.ts
!.storybook/*.js !.storybook/*.js
style.css style.css
yarn-error.log

40667
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

22
package.json
View File

@ -11,15 +11,15 @@
"@storybook/addon-essentials": "^6.1.14", "@storybook/addon-essentials": "^6.1.14",
"@storybook/cli": "^6.1.14", "@storybook/cli": "^6.1.14",
"@storybook/react": "^6.1.14", "@storybook/react": "^6.1.14",
"@types/node": "^14.14.28", "@types/node": "^15.12.1",
"@types/react": "^17.0.2", "@types/react": "^17.0.2",
"@types/react-dom": "^17.0.1", "@types/react-dom": "^17.0.1",
"babel-loader": "^8.2.2", "babel-loader": "^8.2.2",
"css-loader": "^5.0.2", "css-loader": "^5.0.2",
"next": "^10.0.5", "lucide-react": "^0.15.19",
"react": "^17.0.1", "next": "^10.0.0",
"react-dom": "^17.0.1", "react": "^16.0.0",
"react-feather": "^2.0.9", "react-dom": "^16.0.0",
"style-loader": "^2.0.0", "style-loader": "^2.0.0",
"stylus": "^0.54.8", "stylus": "^0.54.8",
"stylus-loader": "^4.3.3", "stylus-loader": "^4.3.3",
@ -28,17 +28,17 @@
"webpack": "^4.44.2" "webpack": "^4.44.2"
}, },
"peerDependencies": { "peerDependencies": {
"next": "^10.0.5", "lucide-react": "^0.15.19",
"react": "^17.0.1", "next": "^10.0.0 || ^11.0.0",
"react-dom": "^17.0.1", "react": "^16.0.0 || ^17.0.0",
"react-feather": "^2.0.9", "react-dom": "^16.0.0 || ^17.0.0",
"stylus": "^0.54.8", "stylus": "^0.54.8",
"typescript": "^4.2.3" "typescript": "^4.0.0"
}, },
"scripts": { "scripts": {
"dev": "start-storybook -s ./.storybook/public -p 6006", "dev": "start-storybook -s ./.storybook/public -p 6006",
"build": "rollup --config", "build": "rollup --config",
"prepublishOnly": "yarn build", "prepublishOnly": "npm run build",
"postinstall": "rollup --config" "postinstall": "rollup --config"
}, },
"dependencies": { "dependencies": {

2
src/dzeio/Button/Button.stories.tsx
View File

@ -1,6 +1,6 @@
import { Meta } from '@storybook/react/types-6-0' import { Meta } from '@storybook/react/types-6-0'
import React from 'react' import React from 'react'
import { Zap } from 'react-feather' import { Zap } from 'lucide-react'
import Component from '.' import Component from '.'
export default { export default {

2
src/dzeio/Button/index.tsx
View File

@ -34,7 +34,7 @@ export default class Button extends React.Component<Props> {
inner = ( inner = (
<> <>
{typeof Icon === 'string' ? ( {typeof Icon === 'string' ? (
<Image imageProps={{src: Icon, width: 16, height: 16, className: css.img}} /> <Image imageProps={{src: Icon, width: 16, height: 16}} />
) : ( ) : (
<Icon size={this.props.size === 'large' ? 20 : this.props.size === 'small' ? 14 : 16} /> <Icon size={this.props.size === 'large' ? 20 : this.props.size === 'small' ? 14 : 16} />
)} )}

87
src/dzeio/Checkbox/index.tsx
View File

@ -1,44 +1,43 @@
import React from 'react' import React from 'react'
import { Check } from 'react-feather' import { Check } from 'lucide-react'
import { buildClassName } from '../Util' import { buildClassName } from '../Util'
import { ColorType } from '../interfaces' import css from './Checkbox.module.styl'
import css from './Checkbox.module.styl' import Text from '../Text'
import Text from '../Text'
interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> { label: string
label: string type?: 'checkbox' | 'radio' | 'switch'
type?: 'checkbox' | 'radio' | 'switch' }
}
export default class Checkbox extends React.Component<Props> {
export default class Checkbox extends React.Component<Props> {
public render() {
public render() { const props: Partial<Props> = Object.assign({}, this.props)
const props: Partial<Props> = Object.assign({}, this.props) delete props.label
delete props.label delete props.type
delete props.type
const realType = this.props.type ?? 'checkbox'
const realType = this.props.type ?? 'checkbox'
return (
return ( <label htmlFor={this.props.id ?? this.props.label} className={buildClassName(
<label htmlFor={this.props.id ?? this.props.label} className={buildClassName( [css.label],
[css.label], [css.radio, realType === 'radio'],
[css.radio, realType === 'radio'], [css.switch, realType === 'switch'],
[css.switch, realType === 'switch'], [css[this.props.color as string], this.props.color]
[css[this.props.color as string], this.props.color] )}>
)}> <input {...props}
<input {...props} id={this.props.id ?? this.props.label}
id={this.props.id ?? this.props.label} type={realType === 'switch' ? 'checkbox' : realType}
type={realType === 'switch' ? 'checkbox' : realType} />
/> <span>
<span> {realType === 'checkbox' && (
{realType === 'checkbox' && ( <Check strokeWidth={4} size={16}/>
<Check strokeWidth={4} size={16}/> )}
)} </span>
</span> <Text>{this.props.label}</Text>
<Text>{this.props.label}</Text> </label>
</label> )
) }
}
}
}

2
src/dzeio/Footer/Footer.stories.tsx
View File

@ -1,6 +1,6 @@
import { Meta, Story } from '@storybook/react/types-6-0' import { Meta, Story } from '@storybook/react/types-6-0'
import React from 'react' import React from 'react'
import { Zap } from 'react-feather' import { Zap } from 'lucide-react'
import Component from '.' import Component from '.'
export default { export default {

94
src/dzeio/Footer/index.tsx
View File

@ -1,48 +1,48 @@
import React, { FC } from 'react' import React, { FC } from 'react'
import { Heart } from 'react-feather' import { Heart } from 'lucide-react'
import Link from '../Link' import Link from '../Link'
import { Icon } from 'react-feather' import { LucideProps } from 'lucide-react'
import Text from '../Text' import Text from '../Text'
import css from './Footer.module.styl' import css from './Footer.module.styl'
import Image from 'next/image' import Image from 'next/image'
interface Props { interface Props {
text?: string text?: string
company?: string company?: string
links?: Array<{ links?: Array<{
path: string path: string
name: string name: string
}> }>
socials?: Array<{ socials?: Array<{
href: string href: string
icon: Icon | string icon: FC<LucideProps> | string
}> }>
} }
export default class Footer extends React.Component<Props> { export default class Footer extends React.Component<Props> {
public render = () => ( public render = () => (
<footer className={css.footer}> <footer className={css.footer}>
{this.props.text ? ( {this.props.text ? (
<Text align="center">{this.props.text}</Text> <Text align="center">{this.props.text}</Text>
) : ( ) : (
<Text align="center">Made with <span className={css.animation}><Heart color={'#E6808A'} fill={'#E6808A'} size={16} fillOpacity={0.5} /></span> by {this.props.company || 'Dzeio'}</Text> <Text align="center">Made with <span className={css.animation}><Heart color={'#E6808A'} fill={'#E6808A'} size={16} fillOpacity={0.5} /></span> by {this.props.company || 'Dzeio'}</Text>
)} )}
{this.props.links && ( {this.props.links && (
<ul>{this.props.links.map((l, index) => ( <ul>{this.props.links.map((l, index) => (
<li key={l.path}><Text>{index !== 0 && (<>&nbsp;- </>)}<Link href={l.path}>{l.name}</Link></Text></li> <li key={l.path}><Text>{index !== 0 && (<>&nbsp;- </>)}<Link href={l.path}>{l.name}</Link></Text></li>
))}</ul> ))}</ul>
)} )}
{this.props.socials && ( {this.props.socials && (
<ul className={css.socials}>{this.props.socials.map((l, index) => ( <ul className={css.socials}>{this.props.socials.map((l, index) => (
<li key={l.href}><Text><Link hideIcon noStyle href={l.href}> <li key={l.href}><Text><Link hideIcon noStyle href={l.href}>
{typeof l.icon === 'string' ? ( {typeof l.icon === 'string' ? (
<Image width={24} height={24} src={l.icon} /> <Image width={24} height={24} src={l.icon} />
) : ( ) : (
<l.icon size={24} /> <l.icon size={24} />
)} )}
</Link></Text></li> </Link></Text></li>
))}</ul> ))}</ul>
)} )}
</footer> </footer>
) )
} }

56
src/dzeio/Input/Input.stories.tsx
View File

@ -1,29 +1,29 @@
import { Meta } from '@storybook/react/types-6-0' import { Meta } from '@storybook/react/types-6-0'
import { Story } from "@storybook/react" import { Story } from "@storybook/react"
import React from 'react' import React from 'react'
import Component from '.' import Component from '.'
import { X } from 'react-feather' import { X } from 'lucide-react'
export default { export default {
title: 'DZEIO/Input', title: 'DZEIO/Input',
component: Component component: Component
} as Meta } as Meta
export const Basic: Story<any> = (args: any) => <Component {...args} /> export const Basic: Story<any> = (args: any) => <Component {...args} />
let tmp = Basic.bind({}) let tmp = Basic.bind({})
tmp.args = {label: 'Label', helper: 'Helper', maxLength: 6, characterCount: true, icon: X} tmp.args = {label: 'Label', helper: 'Helper', maxLength: 6, characterCount: true, icon: X}
export const Normal = tmp export const Normal = tmp
tmp = Basic.bind({}) tmp = Basic.bind({})
tmp.args = {label: 'Label', filled:true, helper: 'Helper', autocomplete: ['a', 'b', 'cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc'], characterCount: true, icon: X} tmp.args = {label: 'Label', filled:true, helper: 'Helper', autocomplete: ['a', 'b', 'cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc'], characterCount: true, icon: X}
export const AutoComplete = tmp export const AutoComplete = tmp
export const Select: Story<any> = (args: any) => <Component type="select" {...args}> export const Select: Story<any> = (args: any) => <Component type="select" {...args}>
<option>a</option> <option>a</option>
<option>b</option> <option>b</option>
<option>c</option> <option>c</option>
<option>d</option> <option>d</option>
</Component> </Component>

3
src/dzeio/Input/index.tsx
View File

@ -1,11 +1,10 @@
import React, { FC } from 'react' import React, { FC } from 'react'
import { ChevronDown } from 'react-feather' import { ChevronDown } from 'lucide-react'
import Text from '../Text' import Text from '../Text'
import { IconProps } from '../interfaces' import { IconProps } from '../interfaces'
import { buildClassName } from '../Util' import { buildClassName } from '../Util'
import css from './Input.module.styl' import css from './Input.module.styl'
import Row from '../Row'
interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> { interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
id?: string id?: string

130
src/dzeio/Link/index.tsx
View File

@ -1,65 +1,65 @@
import React from 'react' import React from 'react'
import NextLink from 'next/link' import NextLink from 'next/link'
import { ExternalLink } from 'react-feather' import { ExternalLink } from 'lucide-react'
import css from './Link.module.styl' import css from './Link.module.styl'
import { buildClassName } from '../Util' import { buildClassName } from '../Util'
interface Props { interface Props {
linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
href: string href: string
children?: React.ReactNode children?: React.ReactNode
className?: string className?: string
/** /**
* Remove styling * Remove styling
*/ */
noStyle?: boolean noStyle?: boolean
/** /**
* Override external detection system * Override external detection system
*/ */
external?: boolean external?: boolean
/** /**
* force hiding the icon * force hiding the icon
*/ */
hideIcon?: boolean hideIcon?: boolean
} }
export default class Link extends React.Component<Props> { export default class Link extends React.Component<Props> {
public render() { public render() {
const isExternal = this.props.href.startsWith('http') const isExternal = this.props.href.startsWith('http')
const externalProps = this.props.external ? { const externalProps = this.props.external ? {
rel: 'noreferrer nofollow', rel: 'noreferrer nofollow',
target: '_blank' target: '_blank'
} : {} } : {}
if (isExternal) { if (isExternal) {
// external link // external link
return ( return (
<a <a
{...this.props.linkProps} {...this.props.linkProps}
className={buildClassName(this.props.className, [css.link, !this.props.noStyle])} className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
href={this.props.href} href={this.props.href}
{...externalProps} {...externalProps}
> >
{this.props.children} {this.props.children}
{(this.props.external !== false && !this.props.hideIcon) && ( {(this.props.external !== false && !this.props.hideIcon) && (
<ExternalLink size={16} className={css.icon} /> <ExternalLink size={16} className={css.icon} />
)} )}
</a> </a>
) )
} }
return ( return (
<NextLink href={this.props.href}> <NextLink href={this.props.href}>
<a <a
{...this.props.linkProps} {...this.props.linkProps}
{...externalProps} {...externalProps}
className={buildClassName(this.props.className, [css.link, !this.props.noStyle])} className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
>{this.props.children}</a> >{this.props.children}</a>
</NextLink> </NextLink>
) )
} }
} }

82
src/dzeio/Navbar/Navbar.stories.tsx
View File

@ -1,41 +1,41 @@
import { Meta, Story } from '@storybook/react/types-6-0' import { Meta, Story } from '@storybook/react/types-6-0'
import React from 'react' import React from 'react'
import { Zap, ZapOff } from 'react-feather' import { Zap, ZapOff } from 'lucide-react'
import Component from '.' import Component from '.'
import Text from '../Text' import Text from '../Text'
export default { export default {
title: 'DZEIO/Navbar', title: 'DZEIO/Navbar',
component: Component component: Component
} as Meta } as Meta
export const Basic: Story<any> = (args: any) => <Component {...args} /> export const Basic: Story<any> = (args: any) => <Component {...args} />
Basic.args = { Basic.args = {
type: 'navbar', type: 'navbar',
logo: {src: '/90-38.svg', width: 90, height: 38}, logo: {src: '/90-38.svg', width: 90, height: 38},
loginUrl: '/login', loginUrl: '/login',
registerUrl: '/register', registerUrl: '/register',
user: { user: {
name: 'Username', name: 'Username',
description: 'User Description', description: 'User Description',
menu: { menu: {
links: [{ links: [{
path: '/logout', path: '/logout',
name: 'Logout' name: 'Logout'
}, { }, {
path: '/logout', path: '/logout',
name: 'Logout' name: 'Logout'
}], }],
informations: (<Text>Testing :D</Text>) informations: (<Text>Testing :D</Text>)
} }
}, },
items: [{ items: [{
path: '/dashboard', path: '/dashboard',
name: 'Dasboard', name: 'Dasboard',
icon: Zap icon: Zap
}, { }, {
path: '/dashboard', path: '/dashboard',
name: 'Dasboard', name: 'Dasboard',
icon: ZapOff icon: ZapOff
}], }],
} }

546
src/dzeio/Navbar/index.tsx
View File

@ -1,273 +1,273 @@
import Router from 'next/router' import Router from 'next/router'
import Image, { ImageProps } from 'next/image' import Image, { ImageProps } from 'next/image'
import React, { FC } from 'react' import React, { FC } from 'react'
import { ChevronDown, ChevronsRight, Menu, X } from 'react-feather' import { ChevronDown, ChevronsRight, Menu, X } from 'lucide-react'
import Text from '../Text' import Text from '../Text'
import Col from '../Col' import Col from '../Col'
import Row from '../Row' import Row from '../Row'
import Link from '../Link' import Link from '../Link'
import { buildClassName } from '../Util' import { buildClassName } from '../Util'
import css from './Navbar.module.styl' import css from './Navbar.module.styl'
interface Props { interface Props {
/** /**
* Type of Navbar * Type of Navbar
* _note: when in mobile it is not listened_ * _note: when in mobile it is not listened_
*/ */
type: 'navbar' | 'sidebar' type: 'navbar' | 'sidebar'
/** /**
* Logo to display * Logo to display
*/ */
logo?: ImageProps & {height: number, width: number} logo?: ImageProps & {height: number, width: number}
/** /**
* Login URL * Login URL
*/ */
loginUrl?: string loginUrl?: string
/** /**
* Login URL * Login URL
*/ */
registerUrl?: string registerUrl?: string
/** /**
* User Informations if loggedin * User Informations if loggedin
*/ */
user?: { user?: {
/** /**
* Username * Username
*/ */
name: string name: string
/** /**
* User Short description * User Short description
*/ */
description?: string description?: string
/** /**
* User Menu * User Menu
*/ */
menu?: { menu?: {
/** /**
* Menu links * Menu links
*/ */
links: Array<{ links: Array<{
path: string path: string
name: string name: string
}> }>
/** /**
* Custom informations shown next to the links * Custom informations shown next to the links
*/ */
informations?: JSX.Element informations?: JSX.Element
} }
} }
/** /**
* Links to display * Links to display
*/ */
items: Array<{ items: Array<{
path: string path: string
icon?: FC icon?: FC
name: string name: string
}> }>
/** /**
* Internal Use don't use it ! * Internal Use don't use it !
*/ */
mobileMenu?: () => void mobileMenu?: () => void
} }
interface State { interface State {
path?: string path?: string
short: boolean short: boolean
isMobile: boolean isMobile: boolean
menuActive: boolean menuActive: boolean
} }
/** /**
* Navbar/Sidebar Component * Navbar/Sidebar Component
* @version 1.0.3 * @version 1.0.3
*/ */
export default class Navbar extends React.Component<Props, State> { export default class Navbar extends React.Component<Props, State> {
public state: State = { public state: State = {
short: false, short: false,
isMobile: false, isMobile: false,
menuActive: false menuActive: false
} }
public componentDidMount() { public componentDidMount() {
this.setState({ this.setState({
path: Router.asPath, path: Router.asPath,
menuActive: !!this.props.mobileMenu menuActive: !!this.props.mobileMenu
}) })
Router.events.on('routeChangeComplete', () => { Router.events.on('routeChangeComplete', () => {
this.setState({path: Router.asPath, menuActive: false}) this.setState({path: Router.asPath, menuActive: false})
}) })
Router.events.on('routeChangeError', () => { Router.events.on('routeChangeError', () => {
this.setState({path: Router.asPath, menuActive: false}) this.setState({path: Router.asPath, menuActive: false})
}) })
if (!this.props.mobileMenu) { if (!this.props.mobileMenu) {
window.addEventListener('resize', this.onResize) window.addEventListener('resize', this.onResize)
this.onResize() this.onResize()
} }
} }
public onResize = () => { public onResize = () => {
const isMobile = window.innerWidth <= 768 const isMobile = window.innerWidth <= 768
if (this.state.isMobile !== isMobile) { if (this.state.isMobile !== isMobile) {
this.setState({isMobile}) this.setState({isMobile})
} }
} }
public componentDidUpdate() { public componentDidUpdate() {
if (!this.props.mobileMenu) { if (!this.props.mobileMenu) {
if (this.state.short) { if (this.state.short) {
document.body.classList.add(css.short) document.body.classList.add(css.short)
} else { } else {
document.body.classList.remove(css.short) document.body.classList.remove(css.short)
} }
if (this.getType() === 'sidebar') { if (this.getType() === 'sidebar') {
document.body.classList.add(css['body-sidebar']) document.body.classList.add(css['body-sidebar'])
document.body.classList.remove(css['body-navbar']) document.body.classList.remove(css['body-navbar'])
} else { } else {
document.body.classList.remove(css['body-sidebar']) document.body.classList.remove(css['body-sidebar'])
document.body.classList.add(css['body-navbar']) document.body.classList.add(css['body-navbar'])
} }
} }
} }
public componentWillUnmount() { public componentWillUnmount() {
if (!this.props.mobileMenu) { if (!this.props.mobileMenu) {
document.body.classList.remove(css.short, css[`body-${this.getType()}`]) document.body.classList.remove(css.short, css[`body-${this.getType()}`])
window.removeEventListener('resize', this.onResize) window.removeEventListener('resize', this.onResize)
} }
} }
public onSidebarButton = () => { public onSidebarButton = () => {
if (!this.props.mobileMenu) { if (!this.props.mobileMenu) {
this.setState({short: !this.state.short, menuActive: false}) this.setState({short: !this.state.short, menuActive: false})
} else { } else {
this.props.mobileMenu() this.props.mobileMenu()
} }
} }
public menuCloseCallback = () => { public menuCloseCallback = () => {
this.setState({menuActive: false}) this.setState({menuActive: false})
} }
public getType(): 'sidebar' | 'navbar' { public getType(): 'sidebar' | 'navbar' {
if (this.props.mobileMenu) { if (this.props.mobileMenu) {
return 'sidebar' return 'sidebar'
} }
return this.state.isMobile ? 'navbar' : this.props.type return this.state.isMobile ? 'navbar' : this.props.type
} }
public render = () => ( public render = () => (
<> <>
<nav className={buildClassName(css[this.getType()], [css.short, this.state.short && !this.props.mobileMenu], [css.mobile, this.props.mobileMenu])}> <nav className={buildClassName(css[this.getType()], [css.short, this.state.short && !this.props.mobileMenu], [css.mobile, this.props.mobileMenu])}>
<Row nowrap className={css.header} align="center"> <Row nowrap className={css.header} align="center">
{this.props.logo && ( {this.props.logo && (
<Col className={css.imgContainer}> <Col className={css.imgContainer}>
<Link href="/"> <Link href="/">
<Image {...this.props.logo} height={34} width={this.props.logo.width*34/this.props.logo.height} /> <Image {...this.props.logo} height={34} width={this.props.logo.width*34/this.props.logo.height} />
</Link> </Link>
</Col> </Col>
)} )}
{this.getType() === 'sidebar' && ( {this.getType() === 'sidebar' && (
<Col nogrow><Text><div onClick={this.onSidebarButton}> <Col nogrow><Text><div onClick={this.onSidebarButton}>
{this.state.short ? ( {this.state.short ? (
<ChevronsRight size={30} /> <ChevronsRight size={30} />
) : ( ) : (
<X size={30} /> <X size={30} />
)} )}
</div></Text></Col> </div></Text></Col>
)} )}
</Row> </Row>
{this.getType() === 'sidebar' && ( {this.getType() === 'sidebar' && (
<hr/> <hr/>
)} )}
<ul> <ul>
{!this.state.isMobile && this.props.items.map((item) => ( {!this.state.isMobile && this.props.items.map((item) => (
<li key={item.path}><Link noStyle href={item.path}> <li key={item.path}><Link noStyle href={item.path}>
<Text className={buildClassName([css.active, this.state.path?.startsWith(item.path)])}> <Text className={buildClassName([css.active, this.state.path?.startsWith(item.path)])}>
{this.getType() === 'sidebar' && item.icon && ( {this.getType() === 'sidebar' && item.icon && (
<item.icon /> <item.icon />
)} )}
<span>{item.name}</span> <span>{item.name}</span>
</Text> </Text>
</Link></li> </Link></li>
))} ))}
</ul> </ul>
<div style={{flex: 1}}></div> <div style={{flex: 1}}></div>
{/* Spacer */} {/* Spacer */}
{this.state.isMobile && ( {this.state.isMobile && (
<div className={css.userSpaceParent}> <div className={css.userSpaceParent}>
<div onClick={() => this.setState({menuActive: !this.state.menuActive})} className={css.userSpace}> <div onClick={() => this.setState({menuActive: !this.state.menuActive})} className={css.userSpace}>
<Text> <Text>
<Menu size={38} className={css.mainGradient} /> <Menu size={38} className={css.mainGradient} />
</Text> </Text>
</div> </div>
</div> </div>
)} )}
{!this.state.isMobile && this.props.user ? ( {!this.state.isMobile && this.props.user ? (
<> <>
<div className={css.userSpaceParent}> <div className={css.userSpaceParent}>
{this.getType() === 'sidebar' && ( {this.getType() === 'sidebar' && (
<hr/> <hr/>
)} )}
<div onClick={() => this.setState({menuActive: !this.state.menuActive})} className={css.userSpace}> <div onClick={() => this.setState({menuActive: !this.state.menuActive})} className={css.userSpace}>
<Text> <Text>
{this.props.user.name} {this.props.user.name}
<ChevronDown className={buildClassName([css.menuActive, this.state.menuActive])} /> <ChevronDown className={buildClassName([css.menuActive, this.state.menuActive])} />
</Text> </Text>
{this.getType() === 'sidebar' && this.props.user.description && ( {this.getType() === 'sidebar' && this.props.user.description && (
<Text>{this.props.user.description}</Text> <Text>{this.props.user.description}</Text>
)} )}
</div> </div>
</div> </div>
<div className={buildClassName(css.userMenu, [css.menuActive, !this.state.isMobile && this.state.menuActive])}> <div className={buildClassName(css.userMenu, [css.menuActive, !this.state.isMobile && this.state.menuActive])}>
<Row nomargin> <Row nomargin>
{this.props.user.menu?.informations && ( {this.props.user.menu?.informations && (
<Col>{this.props.user.menu?.informations}</Col> <Col>{this.props.user.menu?.informations}</Col>
)} )}
<Col> <Col>
<ul> <ul>
{this.props.user.menu?.links.map((l) => ( {this.props.user.menu?.links.map((l) => (
<li key={l.path}><Text><Link noStyle href={l.path}>{l.name}</Link></Text></li> <li key={l.path}><Text><Link noStyle href={l.path}>{l.name}</Link></Text></li>
))} ))}
</ul> </ul>
</Col> </Col>
</Row> </Row>
</div> </div>
</> </>
) : !this.state.isMobile ? ( ) : !this.state.isMobile ? (
<div className={css.userSpaceParent}> <div className={css.userSpaceParent}>
{this.getType() === 'sidebar' && ( {this.getType() === 'sidebar' && (
<hr/> <hr/>
)} )}
<ul> <ul>
{this.props.registerUrl && ( {this.props.registerUrl && (
<li><Link noStyle href={this.props.registerUrl}><a> <li><Link noStyle href={this.props.registerUrl}><a>
<Text className={buildClassName(css.active)}> <Text className={buildClassName(css.active)}>
<span>Register</span> <span>Register</span>
</Text> </Text>
</a></Link></li> </a></Link></li>
)} )}
{this.props.loginUrl && ( {this.props.loginUrl && (
<li><Link noStyle href={this.props.loginUrl}><a> <li><Link noStyle href={this.props.loginUrl}><a>
<Text> <Text>
<span>Login</span> <span>Login</span>
</Text> </Text>
</a></Link></li> </a></Link></li>
)} )}
</ul> </ul>
</div> </div>
) : undefined} ) : undefined}
</nav> </nav>
{!this.props.mobileMenu && this.state.isMobile && ( {!this.props.mobileMenu && this.state.isMobile && (
<div className={buildClassName(css.mobileMenu, [css.shown, this.state.menuActive])}> <div className={buildClassName(css.mobileMenu, [css.shown, this.state.menuActive])}>
<Navbar {...this.props} type="sidebar" mobileMenu={this.menuCloseCallback} /> <Navbar {...this.props} type="sidebar" mobileMenu={this.menuCloseCallback} />
</div> </div>
)} )}
</> </>
) )
} }

2
src/dzeio/NotificationManager/NotificationManager.stories.tsx
View File

@ -1,6 +1,6 @@
import { Meta } from '@storybook/react/types-6-0' import { Meta } from '@storybook/react/types-6-0'
import React from 'react' import React from 'react'
import { Zap } from 'react-feather' import { Zap } from 'lucide-react'
import Component from '.' import Component from '.'
export default { export default {

2
src/dzeio/NotificationManager/index.tsx
View File

@ -5,7 +5,7 @@ import Col from '../Col'
import Text from '../Text' import Text from '../Text'
import Router from 'next/router' import Router from 'next/router'
import React from 'react' import React from 'react'
import { X } from 'react-feather' import { X } from 'lucide-react'
import css from './NotificationManager.module.styl' import css from './NotificationManager.module.styl'

64
src/dzeio/Popup/index.tsx
View File

@ -1,32 +1,32 @@
import React from 'react' import React from 'react'
import { X } from 'react-feather' import { X } from 'lucide-react'
import Text from '../Text' import Text from '../Text'
import Box from '../Box' import Box from '../Box'
import Row from '../Row' import Row from '../Row'
import css from './Popup.module.styl' import css from './Popup.module.styl'
interface Props { interface Props {
children: React.ReactNode children: React.ReactNode
onClose?: () => void onClose?: () => void
header?: Box['props'] header?: Box['props']
} }
export default class Popup extends React.Component<Props> { export default class Popup extends React.Component<Props> {
public render = () => ( public render = () => (
<Row nomargin onClick={this.parentClose} justify="center" align="center" className={css.popup}> <Row nomargin onClick={this.parentClose} justify="center" align="center" className={css.popup}>
<Box {...this.props.header} className={css.popupChild} onClick={(ev) => ev.stopPropagation()} headerButtons={(<Text><X onClick={this.props.onClose} className={css.exit} /></Text>)}> <Box {...this.props.header} className={css.popupChild} onClick={(ev) => ev.stopPropagation()} headerButtons={(<Text><X onClick={this.props.onClose} className={css.exit} /></Text>)}>
{this.props.children} {this.props.children}
</Box> </Box>
</Row> </Row>
) )
private parentClose = (ev: React.MouseEvent<HTMLDivElement>) => { private parentClose = (ev: React.MouseEvent<HTMLDivElement>) => {
const target = ev.currentTarget const target = ev.currentTarget
if (target.classList.contains(css.popup) && this.props.onClose) { if (target.classList.contains(css.popup) && this.props.onClose) {
this.props.onClose() this.props.onClose()
} }
} }
} }

11445
yarn.lock
View File

File diff suppressed because it is too large Load Diff