mirror of
https://github.com/dzeiocom/components.git
synced 2025-06-06 08:09:55 +00:00
Moved to NPM and lucide-icons
Signed-off-by: Avior <florian.bouillon@delta-wings.net>
This commit is contained in:
parent
e38387534a
commit
e24b31df10
GPG Key ID:
50BD648F12C86AB6
12
.editorconfig
Normal file
12
.editorconfig
Normal 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
1
.gitignore
vendored
@ -9,4 +9,3 @@ types/
|
||||
!src/stylus.d.ts
|
||||
!.storybook/*.js
|
||||
style.css
|
||||
yarn-error.log
|
||||
40667
package-lock.json
generated
Normal file
40667
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
22
package.json
22
package.json
@ -11,15 +11,15 @@
|
||||
"@storybook/addon-essentials": "^6.1.14",
|
||||
"@storybook/cli": "^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-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",
|
||||
"lucide-react": "^0.15.19",
|
||||
"next": "^10.0.0",
|
||||
"react": "^16.0.0",
|
||||
"react-dom": "^16.0.0",
|
||||
"style-loader": "^2.0.0",
|
||||
"stylus": "^0.54.8",
|
||||
"stylus-loader": "^4.3.3",
|
||||
@ -28,17 +28,17 @@
|
||||
"webpack": "^4.44.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"next": "^10.0.5",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-feather": "^2.0.9",
|
||||
"lucide-react": "^0.15.19",
|
||||
"next": "^10.0.0 || ^11.0.0",
|
||||
"react": "^16.0.0 || ^17.0.0",
|
||||
"react-dom": "^16.0.0 || ^17.0.0",
|
||||
"stylus": "^0.54.8",
|
||||
"typescript": "^4.2.3"
|
||||
"typescript": "^4.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "start-storybook -s ./.storybook/public -p 6006",
|
||||
"build": "rollup --config",
|
||||
"prepublishOnly": "yarn build",
|
||||
"prepublishOnly": "npm run build",
|
||||
"postinstall": "rollup --config"
|
||||
},
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Meta } from '@storybook/react/types-6-0'
|
||||
import React from 'react'
|
||||
import { Zap } from 'react-feather'
|
||||
import { Zap } from 'lucide-react'
|
||||
import Component from '.'
|
||||
|
||||
export default {
|
||||
|
||||
@ -34,7 +34,7 @@ export default class Button extends React.Component<Props> {
|
||||
inner = (
|
||||
<>
|
||||
{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} />
|
||||
)}
|
||||
|
||||
@ -1,44 +1,43 @@
|
||||
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
|
||||
type?: 'checkbox' | 'radio' | 'switch'
|
||||
}
|
||||
|
||||
export default class Checkbox extends React.Component<Props> {
|
||||
|
||||
public render() {
|
||||
const props: Partial<Props> = Object.assign({}, this.props)
|
||||
delete props.label
|
||||
delete props.type
|
||||
|
||||
const realType = this.props.type ?? 'checkbox'
|
||||
|
||||
return (
|
||||
<label htmlFor={this.props.id ?? this.props.label} className={buildClassName(
|
||||
[css.label],
|
||||
[css.radio, realType === 'radio'],
|
||||
[css.switch, realType === 'switch'],
|
||||
[css[this.props.color as string], this.props.color]
|
||||
)}>
|
||||
<input {...props}
|
||||
id={this.props.id ?? this.props.label}
|
||||
type={realType === 'switch' ? 'checkbox' : realType}
|
||||
/>
|
||||
<span>
|
||||
{realType === 'checkbox' && (
|
||||
<Check strokeWidth={4} size={16}/>
|
||||
)}
|
||||
</span>
|
||||
<Text>{this.props.label}</Text>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
import React from 'react'
|
||||
import { Check } from 'lucide-react'
|
||||
import { buildClassName } from '../Util'
|
||||
|
||||
import css from './Checkbox.module.styl'
|
||||
import Text from '../Text'
|
||||
|
||||
interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
||||
label: string
|
||||
type?: 'checkbox' | 'radio' | 'switch'
|
||||
}
|
||||
|
||||
export default class Checkbox extends React.Component<Props> {
|
||||
|
||||
public render() {
|
||||
const props: Partial<Props> = Object.assign({}, this.props)
|
||||
delete props.label
|
||||
delete props.type
|
||||
|
||||
const realType = this.props.type ?? 'checkbox'
|
||||
|
||||
return (
|
||||
<label htmlFor={this.props.id ?? this.props.label} className={buildClassName(
|
||||
[css.label],
|
||||
[css.radio, realType === 'radio'],
|
||||
[css.switch, realType === 'switch'],
|
||||
[css[this.props.color as string], this.props.color]
|
||||
)}>
|
||||
<input {...props}
|
||||
id={this.props.id ?? this.props.label}
|
||||
type={realType === 'switch' ? 'checkbox' : realType}
|
||||
/>
|
||||
<span>
|
||||
{realType === 'checkbox' && (
|
||||
<Check strokeWidth={4} size={16}/>
|
||||
)}
|
||||
</span>
|
||||
<Text>{this.props.label}</Text>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Meta, Story } from '@storybook/react/types-6-0'
|
||||
import React from 'react'
|
||||
import { Zap } from 'react-feather'
|
||||
import { Zap } from 'lucide-react'
|
||||
import Component from '.'
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,48 +1,48 @@
|
||||
import React, { FC } from 'react'
|
||||
import { Heart } from 'react-feather'
|
||||
import Link from '../Link'
|
||||
import { Icon } from 'react-feather'
|
||||
import Text from '../Text'
|
||||
import css from './Footer.module.styl'
|
||||
import Image from 'next/image'
|
||||
|
||||
interface Props {
|
||||
text?: string
|
||||
company?: string
|
||||
links?: Array<{
|
||||
path: string
|
||||
name: string
|
||||
}>
|
||||
socials?: Array<{
|
||||
href: string
|
||||
icon: Icon | string
|
||||
}>
|
||||
}
|
||||
|
||||
export default class Footer extends React.Component<Props> {
|
||||
public render = () => (
|
||||
<footer className={css.footer}>
|
||||
{this.props.text ? (
|
||||
<Text align="center">{this.props.text}</Text>
|
||||
) : (
|
||||
<Text align="center">Made with <span className={css.animation}><Heart color={'#E6808A'} fill={'#E6808A'} size={16} fillOpacity={0.5} /></span> by {this.props.company || 'Dzeio'}</Text>
|
||||
)}
|
||||
{this.props.links && (
|
||||
<ul>{this.props.links.map((l, index) => (
|
||||
<li key={l.path}><Text>{index !== 0 && (<> - </>)}<Link href={l.path}>{l.name}</Link></Text></li>
|
||||
))}</ul>
|
||||
)}
|
||||
{this.props.socials && (
|
||||
<ul className={css.socials}>{this.props.socials.map((l, index) => (
|
||||
<li key={l.href}><Text><Link hideIcon noStyle href={l.href}>
|
||||
{typeof l.icon === 'string' ? (
|
||||
<Image width={24} height={24} src={l.icon} />
|
||||
) : (
|
||||
<l.icon size={24} />
|
||||
)}
|
||||
</Link></Text></li>
|
||||
))}</ul>
|
||||
)}
|
||||
</footer>
|
||||
)
|
||||
import React, { FC } from 'react'
|
||||
import { Heart } from 'lucide-react'
|
||||
import Link from '../Link'
|
||||
import { LucideProps } from 'lucide-react'
|
||||
import Text from '../Text'
|
||||
import css from './Footer.module.styl'
|
||||
import Image from 'next/image'
|
||||
|
||||
interface Props {
|
||||
text?: string
|
||||
company?: string
|
||||
links?: Array<{
|
||||
path: string
|
||||
name: string
|
||||
}>
|
||||
socials?: Array<{
|
||||
href: string
|
||||
icon: FC<LucideProps> | string
|
||||
}>
|
||||
}
|
||||
|
||||
export default class Footer extends React.Component<Props> {
|
||||
public render = () => (
|
||||
<footer className={css.footer}>
|
||||
{this.props.text ? (
|
||||
<Text align="center">{this.props.text}</Text>
|
||||
) : (
|
||||
<Text align="center">Made with <span className={css.animation}><Heart color={'#E6808A'} fill={'#E6808A'} size={16} fillOpacity={0.5} /></span> by {this.props.company || 'Dzeio'}</Text>
|
||||
)}
|
||||
{this.props.links && (
|
||||
<ul>{this.props.links.map((l, index) => (
|
||||
<li key={l.path}><Text>{index !== 0 && (<> - </>)}<Link href={l.path}>{l.name}</Link></Text></li>
|
||||
))}</ul>
|
||||
)}
|
||||
{this.props.socials && (
|
||||
<ul className={css.socials}>{this.props.socials.map((l, index) => (
|
||||
<li key={l.href}><Text><Link hideIcon noStyle href={l.href}>
|
||||
{typeof l.icon === 'string' ? (
|
||||
<Image width={24} height={24} src={l.icon} />
|
||||
) : (
|
||||
<l.icon size={24} />
|
||||
)}
|
||||
</Link></Text></li>
|
||||
))}</ul>
|
||||
)}
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@ -1,29 +1,29 @@
|
||||
import { Meta } from '@storybook/react/types-6-0'
|
||||
import { Story } from "@storybook/react"
|
||||
import React from 'react'
|
||||
import Component from '.'
|
||||
import { X } from 'react-feather'
|
||||
|
||||
export default {
|
||||
title: 'DZEIO/Input',
|
||||
component: Component
|
||||
} as Meta
|
||||
|
||||
export const Basic: Story<any> = (args: any) => <Component {...args} />
|
||||
|
||||
let tmp = Basic.bind({})
|
||||
tmp.args = {label: 'Label', helper: 'Helper', maxLength: 6, characterCount: true, icon: X}
|
||||
|
||||
export const Normal = tmp
|
||||
|
||||
tmp = Basic.bind({})
|
||||
tmp.args = {label: 'Label', filled:true, helper: 'Helper', autocomplete: ['a', 'b', 'cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc'], characterCount: true, icon: X}
|
||||
|
||||
export const AutoComplete = tmp
|
||||
|
||||
export const Select: Story<any> = (args: any) => <Component type="select" {...args}>
|
||||
<option>a</option>
|
||||
<option>b</option>
|
||||
<option>c</option>
|
||||
<option>d</option>
|
||||
import { Meta } from '@storybook/react/types-6-0'
|
||||
import { Story } from "@storybook/react"
|
||||
import React from 'react'
|
||||
import Component from '.'
|
||||
import { X } from 'lucide-react'
|
||||
|
||||
export default {
|
||||
title: 'DZEIO/Input',
|
||||
component: Component
|
||||
} as Meta
|
||||
|
||||
export const Basic: Story<any> = (args: any) => <Component {...args} />
|
||||
|
||||
let tmp = Basic.bind({})
|
||||
tmp.args = {label: 'Label', helper: 'Helper', maxLength: 6, characterCount: true, icon: X}
|
||||
|
||||
export const Normal = tmp
|
||||
|
||||
tmp = Basic.bind({})
|
||||
tmp.args = {label: 'Label', filled:true, helper: 'Helper', autocomplete: ['a', 'b', 'cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc'], characterCount: true, icon: X}
|
||||
|
||||
export const AutoComplete = tmp
|
||||
|
||||
export const Select: Story<any> = (args: any) => <Component type="select" {...args}>
|
||||
<option>a</option>
|
||||
<option>b</option>
|
||||
<option>c</option>
|
||||
<option>d</option>
|
||||
</Component>
|
||||
@ -1,11 +1,10 @@
|
||||
import React, { FC } from 'react'
|
||||
|
||||
import { ChevronDown } from 'react-feather'
|
||||
import { ChevronDown } from 'lucide-react'
|
||||
import Text from '../Text'
|
||||
import { IconProps } from '../interfaces'
|
||||
import { buildClassName } from '../Util'
|
||||
import css from './Input.module.styl'
|
||||
import Row from '../Row'
|
||||
|
||||
interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
||||
id?: string
|
||||
|
||||
@ -1,65 +1,65 @@
|
||||
import React from 'react'
|
||||
import NextLink from 'next/link'
|
||||
import { ExternalLink } from 'react-feather'
|
||||
|
||||
import css from './Link.module.styl'
|
||||
import { buildClassName } from '../Util'
|
||||
|
||||
interface Props {
|
||||
linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
|
||||
href: string
|
||||
children?: React.ReactNode
|
||||
className?: string
|
||||
/**
|
||||
* Remove styling
|
||||
*/
|
||||
noStyle?: boolean
|
||||
|
||||
/**
|
||||
* Override external detection system
|
||||
*/
|
||||
external?: boolean
|
||||
|
||||
/**
|
||||
* force hiding the icon
|
||||
*/
|
||||
hideIcon?: boolean
|
||||
}
|
||||
|
||||
export default class Link extends React.Component<Props> {
|
||||
|
||||
public render() {
|
||||
const isExternal = this.props.href.startsWith('http')
|
||||
const externalProps = this.props.external ? {
|
||||
rel: 'noreferrer nofollow',
|
||||
target: '_blank'
|
||||
} : {}
|
||||
|
||||
if (isExternal) {
|
||||
// external link
|
||||
return (
|
||||
<a
|
||||
{...this.props.linkProps}
|
||||
className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
|
||||
href={this.props.href}
|
||||
{...externalProps}
|
||||
>
|
||||
{this.props.children}
|
||||
{(this.props.external !== false && !this.props.hideIcon) && (
|
||||
<ExternalLink size={16} className={css.icon} />
|
||||
)}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<NextLink href={this.props.href}>
|
||||
<a
|
||||
{...this.props.linkProps}
|
||||
{...externalProps}
|
||||
className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
|
||||
>{this.props.children}</a>
|
||||
</NextLink>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
import React from 'react'
|
||||
import NextLink from 'next/link'
|
||||
import { ExternalLink } from 'lucide-react'
|
||||
|
||||
import css from './Link.module.styl'
|
||||
import { buildClassName } from '../Util'
|
||||
|
||||
interface Props {
|
||||
linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>
|
||||
href: string
|
||||
children?: React.ReactNode
|
||||
className?: string
|
||||
/**
|
||||
* Remove styling
|
||||
*/
|
||||
noStyle?: boolean
|
||||
|
||||
/**
|
||||
* Override external detection system
|
||||
*/
|
||||
external?: boolean
|
||||
|
||||
/**
|
||||
* force hiding the icon
|
||||
*/
|
||||
hideIcon?: boolean
|
||||
}
|
||||
|
||||
export default class Link extends React.Component<Props> {
|
||||
|
||||
public render() {
|
||||
const isExternal = this.props.href.startsWith('http')
|
||||
const externalProps = this.props.external ? {
|
||||
rel: 'noreferrer nofollow',
|
||||
target: '_blank'
|
||||
} : {}
|
||||
|
||||
if (isExternal) {
|
||||
// external link
|
||||
return (
|
||||
<a
|
||||
{...this.props.linkProps}
|
||||
className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
|
||||
href={this.props.href}
|
||||
{...externalProps}
|
||||
>
|
||||
{this.props.children}
|
||||
{(this.props.external !== false && !this.props.hideIcon) && (
|
||||
<ExternalLink size={16} className={css.icon} />
|
||||
)}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<NextLink href={this.props.href}>
|
||||
<a
|
||||
{...this.props.linkProps}
|
||||
{...externalProps}
|
||||
className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
|
||||
>{this.props.children}</a>
|
||||
</NextLink>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,41 +1,41 @@
|
||||
import { Meta, Story } from '@storybook/react/types-6-0'
|
||||
import React from 'react'
|
||||
import { Zap, ZapOff } from 'react-feather'
|
||||
import Component from '.'
|
||||
import Text from '../Text'
|
||||
|
||||
export default {
|
||||
title: 'DZEIO/Navbar',
|
||||
component: Component
|
||||
} as Meta
|
||||
|
||||
export const Basic: Story<any> = (args: any) => <Component {...args} />
|
||||
Basic.args = {
|
||||
type: 'navbar',
|
||||
logo: {src: '/90-38.svg', width: 90, height: 38},
|
||||
loginUrl: '/login',
|
||||
registerUrl: '/register',
|
||||
user: {
|
||||
name: 'Username',
|
||||
description: 'User Description',
|
||||
menu: {
|
||||
links: [{
|
||||
path: '/logout',
|
||||
name: 'Logout'
|
||||
}, {
|
||||
path: '/logout',
|
||||
name: 'Logout'
|
||||
}],
|
||||
informations: (<Text>Testing :D</Text>)
|
||||
}
|
||||
},
|
||||
items: [{
|
||||
path: '/dashboard',
|
||||
name: 'Dasboard',
|
||||
icon: Zap
|
||||
}, {
|
||||
path: '/dashboard',
|
||||
name: 'Dasboard',
|
||||
icon: ZapOff
|
||||
}],
|
||||
}
|
||||
import { Meta, Story } from '@storybook/react/types-6-0'
|
||||
import React from 'react'
|
||||
import { Zap, ZapOff } from 'lucide-react'
|
||||
import Component from '.'
|
||||
import Text from '../Text'
|
||||
|
||||
export default {
|
||||
title: 'DZEIO/Navbar',
|
||||
component: Component
|
||||
} as Meta
|
||||
|
||||
export const Basic: Story<any> = (args: any) => <Component {...args} />
|
||||
Basic.args = {
|
||||
type: 'navbar',
|
||||
logo: {src: '/90-38.svg', width: 90, height: 38},
|
||||
loginUrl: '/login',
|
||||
registerUrl: '/register',
|
||||
user: {
|
||||
name: 'Username',
|
||||
description: 'User Description',
|
||||
menu: {
|
||||
links: [{
|
||||
path: '/logout',
|
||||
name: 'Logout'
|
||||
}, {
|
||||
path: '/logout',
|
||||
name: 'Logout'
|
||||
}],
|
||||
informations: (<Text>Testing :D</Text>)
|
||||
}
|
||||
},
|
||||
items: [{
|
||||
path: '/dashboard',
|
||||
name: 'Dasboard',
|
||||
icon: Zap
|
||||
}, {
|
||||
path: '/dashboard',
|
||||
name: 'Dasboard',
|
||||
icon: ZapOff
|
||||
}],
|
||||
}
|
||||
|
||||
@ -1,273 +1,273 @@
|
||||
import Router from 'next/router'
|
||||
|
||||
import Image, { ImageProps } from 'next/image'
|
||||
import React, { FC } from 'react'
|
||||
import { ChevronDown, ChevronsRight, Menu, X } from 'react-feather'
|
||||
import Text from '../Text'
|
||||
import Col from '../Col'
|
||||
import Row from '../Row'
|
||||
import Link from '../Link'
|
||||
import { buildClassName } from '../Util'
|
||||
|
||||
import css from './Navbar.module.styl'
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
* Type of Navbar
|
||||
* _note: when in mobile it is not listened_
|
||||
*/
|
||||
type: 'navbar' | 'sidebar'
|
||||
|
||||
/**
|
||||
* Logo to display
|
||||
*/
|
||||
logo?: ImageProps & {height: number, width: number}
|
||||
/**
|
||||
* Login URL
|
||||
*/
|
||||
loginUrl?: string
|
||||
/**
|
||||
* Login URL
|
||||
*/
|
||||
registerUrl?: string
|
||||
/**
|
||||
* User Informations if loggedin
|
||||
*/
|
||||
user?: {
|
||||
/**
|
||||
* Username
|
||||
*/
|
||||
name: string
|
||||
/**
|
||||
* User Short description
|
||||
*/
|
||||
description?: string
|
||||
/**
|
||||
* User Menu
|
||||
*/
|
||||
menu?: {
|
||||
/**
|
||||
* Menu links
|
||||
*/
|
||||
links: Array<{
|
||||
path: string
|
||||
name: string
|
||||
}>
|
||||
/**
|
||||
* Custom informations shown next to the links
|
||||
*/
|
||||
informations?: JSX.Element
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Links to display
|
||||
*/
|
||||
items: Array<{
|
||||
path: string
|
||||
icon?: FC
|
||||
name: string
|
||||
}>
|
||||
/**
|
||||
* Internal Use don't use it !
|
||||
*/
|
||||
mobileMenu?: () => void
|
||||
}
|
||||
|
||||
interface State {
|
||||
path?: string
|
||||
short: boolean
|
||||
isMobile: boolean
|
||||
menuActive: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Navbar/Sidebar Component
|
||||
* @version 1.0.3
|
||||
*/
|
||||
export default class Navbar extends React.Component<Props, State> {
|
||||
|
||||
public state: State = {
|
||||
short: false,
|
||||
isMobile: false,
|
||||
menuActive: false
|
||||
}
|
||||
|
||||
public componentDidMount() {
|
||||
this.setState({
|
||||
path: Router.asPath,
|
||||
menuActive: !!this.props.mobileMenu
|
||||
})
|
||||
Router.events.on('routeChangeComplete', () => {
|
||||
this.setState({path: Router.asPath, menuActive: false})
|
||||
})
|
||||
Router.events.on('routeChangeError', () => {
|
||||
this.setState({path: Router.asPath, menuActive: false})
|
||||
})
|
||||
if (!this.props.mobileMenu) {
|
||||
window.addEventListener('resize', this.onResize)
|
||||
this.onResize()
|
||||
}
|
||||
}
|
||||
|
||||
public onResize = () => {
|
||||
const isMobile = window.innerWidth <= 768
|
||||
if (this.state.isMobile !== isMobile) {
|
||||
this.setState({isMobile})
|
||||
}
|
||||
}
|
||||
|
||||
public componentDidUpdate() {
|
||||
if (!this.props.mobileMenu) {
|
||||
if (this.state.short) {
|
||||
document.body.classList.add(css.short)
|
||||
} else {
|
||||
document.body.classList.remove(css.short)
|
||||
}
|
||||
if (this.getType() === 'sidebar') {
|
||||
document.body.classList.add(css['body-sidebar'])
|
||||
document.body.classList.remove(css['body-navbar'])
|
||||
} else {
|
||||
document.body.classList.remove(css['body-sidebar'])
|
||||
document.body.classList.add(css['body-navbar'])
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public componentWillUnmount() {
|
||||
if (!this.props.mobileMenu) {
|
||||
document.body.classList.remove(css.short, css[`body-${this.getType()}`])
|
||||
window.removeEventListener('resize', this.onResize)
|
||||
}
|
||||
}
|
||||
|
||||
public onSidebarButton = () => {
|
||||
if (!this.props.mobileMenu) {
|
||||
this.setState({short: !this.state.short, menuActive: false})
|
||||
} else {
|
||||
this.props.mobileMenu()
|
||||
}
|
||||
}
|
||||
|
||||
public menuCloseCallback = () => {
|
||||
this.setState({menuActive: false})
|
||||
}
|
||||
|
||||
public getType(): 'sidebar' | 'navbar' {
|
||||
if (this.props.mobileMenu) {
|
||||
return 'sidebar'
|
||||
}
|
||||
return this.state.isMobile ? 'navbar' : this.props.type
|
||||
}
|
||||
|
||||
public render = () => (
|
||||
<>
|
||||
<nav className={buildClassName(css[this.getType()], [css.short, this.state.short && !this.props.mobileMenu], [css.mobile, this.props.mobileMenu])}>
|
||||
<Row nowrap className={css.header} align="center">
|
||||
{this.props.logo && (
|
||||
<Col className={css.imgContainer}>
|
||||
<Link href="/">
|
||||
<Image {...this.props.logo} height={34} width={this.props.logo.width*34/this.props.logo.height} />
|
||||
</Link>
|
||||
</Col>
|
||||
)}
|
||||
{this.getType() === 'sidebar' && (
|
||||
<Col nogrow><Text><div onClick={this.onSidebarButton}>
|
||||
{this.state.short ? (
|
||||
<ChevronsRight size={30} />
|
||||
) : (
|
||||
<X size={30} />
|
||||
)}
|
||||
</div></Text></Col>
|
||||
)}
|
||||
</Row>
|
||||
{this.getType() === 'sidebar' && (
|
||||
<hr/>
|
||||
)}
|
||||
<ul>
|
||||
{!this.state.isMobile && this.props.items.map((item) => (
|
||||
<li key={item.path}><Link noStyle href={item.path}>
|
||||
<Text className={buildClassName([css.active, this.state.path?.startsWith(item.path)])}>
|
||||
{this.getType() === 'sidebar' && item.icon && (
|
||||
<item.icon />
|
||||
)}
|
||||
<span>{item.name}</span>
|
||||
</Text>
|
||||
</Link></li>
|
||||
))}
|
||||
</ul>
|
||||
<div style={{flex: 1}}></div>
|
||||
{/* Spacer */}
|
||||
{this.state.isMobile && (
|
||||
<div className={css.userSpaceParent}>
|
||||
<div onClick={() => this.setState({menuActive: !this.state.menuActive})} className={css.userSpace}>
|
||||
<Text>
|
||||
<Menu size={38} className={css.mainGradient} />
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!this.state.isMobile && this.props.user ? (
|
||||
<>
|
||||
<div className={css.userSpaceParent}>
|
||||
{this.getType() === 'sidebar' && (
|
||||
<hr/>
|
||||
)}
|
||||
<div onClick={() => this.setState({menuActive: !this.state.menuActive})} className={css.userSpace}>
|
||||
<Text>
|
||||
{this.props.user.name}
|
||||
<ChevronDown className={buildClassName([css.menuActive, this.state.menuActive])} />
|
||||
</Text>
|
||||
{this.getType() === 'sidebar' && this.props.user.description && (
|
||||
<Text>{this.props.user.description}</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={buildClassName(css.userMenu, [css.menuActive, !this.state.isMobile && this.state.menuActive])}>
|
||||
<Row nomargin>
|
||||
{this.props.user.menu?.informations && (
|
||||
<Col>{this.props.user.menu?.informations}</Col>
|
||||
)}
|
||||
<Col>
|
||||
<ul>
|
||||
{this.props.user.menu?.links.map((l) => (
|
||||
<li key={l.path}><Text><Link noStyle href={l.path}>{l.name}</Link></Text></li>
|
||||
))}
|
||||
</ul>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</>
|
||||
) : !this.state.isMobile ? (
|
||||
<div className={css.userSpaceParent}>
|
||||
{this.getType() === 'sidebar' && (
|
||||
<hr/>
|
||||
)}
|
||||
<ul>
|
||||
{this.props.registerUrl && (
|
||||
<li><Link noStyle href={this.props.registerUrl}><a>
|
||||
<Text className={buildClassName(css.active)}>
|
||||
<span>Register</span>
|
||||
</Text>
|
||||
</a></Link></li>
|
||||
)}
|
||||
{this.props.loginUrl && (
|
||||
<li><Link noStyle href={this.props.loginUrl}><a>
|
||||
<Text>
|
||||
<span>Login</span>
|
||||
</Text>
|
||||
</a></Link></li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
) : undefined}
|
||||
</nav>
|
||||
|
||||
{!this.props.mobileMenu && this.state.isMobile && (
|
||||
<div className={buildClassName(css.mobileMenu, [css.shown, this.state.menuActive])}>
|
||||
<Navbar {...this.props} type="sidebar" mobileMenu={this.menuCloseCallback} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
import Router from 'next/router'
|
||||
|
||||
import Image, { ImageProps } from 'next/image'
|
||||
import React, { FC } from 'react'
|
||||
import { ChevronDown, ChevronsRight, Menu, X } from 'lucide-react'
|
||||
import Text from '../Text'
|
||||
import Col from '../Col'
|
||||
import Row from '../Row'
|
||||
import Link from '../Link'
|
||||
import { buildClassName } from '../Util'
|
||||
|
||||
import css from './Navbar.module.styl'
|
||||
|
||||
interface Props {
|
||||
/**
|
||||
* Type of Navbar
|
||||
* _note: when in mobile it is not listened_
|
||||
*/
|
||||
type: 'navbar' | 'sidebar'
|
||||
|
||||
/**
|
||||
* Logo to display
|
||||
*/
|
||||
logo?: ImageProps & {height: number, width: number}
|
||||
/**
|
||||
* Login URL
|
||||
*/
|
||||
loginUrl?: string
|
||||
/**
|
||||
* Login URL
|
||||
*/
|
||||
registerUrl?: string
|
||||
/**
|
||||
* User Informations if loggedin
|
||||
*/
|
||||
user?: {
|
||||
/**
|
||||
* Username
|
||||
*/
|
||||
name: string
|
||||
/**
|
||||
* User Short description
|
||||
*/
|
||||
description?: string
|
||||
/**
|
||||
* User Menu
|
||||
*/
|
||||
menu?: {
|
||||
/**
|
||||
* Menu links
|
||||
*/
|
||||
links: Array<{
|
||||
path: string
|
||||
name: string
|
||||
}>
|
||||
/**
|
||||
* Custom informations shown next to the links
|
||||
*/
|
||||
informations?: JSX.Element
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Links to display
|
||||
*/
|
||||
items: Array<{
|
||||
path: string
|
||||
icon?: FC
|
||||
name: string
|
||||
}>
|
||||
/**
|
||||
* Internal Use don't use it !
|
||||
*/
|
||||
mobileMenu?: () => void
|
||||
}
|
||||
|
||||
interface State {
|
||||
path?: string
|
||||
short: boolean
|
||||
isMobile: boolean
|
||||
menuActive: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Navbar/Sidebar Component
|
||||
* @version 1.0.3
|
||||
*/
|
||||
export default class Navbar extends React.Component<Props, State> {
|
||||
|
||||
public state: State = {
|
||||
short: false,
|
||||
isMobile: false,
|
||||
menuActive: false
|
||||
}
|
||||
|
||||
public componentDidMount() {
|
||||
this.setState({
|
||||
path: Router.asPath,
|
||||
menuActive: !!this.props.mobileMenu
|
||||
})
|
||||
Router.events.on('routeChangeComplete', () => {
|
||||
this.setState({path: Router.asPath, menuActive: false})
|
||||
})
|
||||
Router.events.on('routeChangeError', () => {
|
||||
this.setState({path: Router.asPath, menuActive: false})
|
||||
})
|
||||
if (!this.props.mobileMenu) {
|
||||
window.addEventListener('resize', this.onResize)
|
||||
this.onResize()
|
||||
}
|
||||
}
|
||||
|
||||
public onResize = () => {
|
||||
const isMobile = window.innerWidth <= 768
|
||||
if (this.state.isMobile !== isMobile) {
|
||||
this.setState({isMobile})
|
||||
}
|
||||
}
|
||||
|
||||
public componentDidUpdate() {
|
||||
if (!this.props.mobileMenu) {
|
||||
if (this.state.short) {
|
||||
document.body.classList.add(css.short)
|
||||
} else {
|
||||
document.body.classList.remove(css.short)
|
||||
}
|
||||
if (this.getType() === 'sidebar') {
|
||||
document.body.classList.add(css['body-sidebar'])
|
||||
document.body.classList.remove(css['body-navbar'])
|
||||
} else {
|
||||
document.body.classList.remove(css['body-sidebar'])
|
||||
document.body.classList.add(css['body-navbar'])
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public componentWillUnmount() {
|
||||
if (!this.props.mobileMenu) {
|
||||
document.body.classList.remove(css.short, css[`body-${this.getType()}`])
|
||||
window.removeEventListener('resize', this.onResize)
|
||||
}
|
||||
}
|
||||
|
||||
public onSidebarButton = () => {
|
||||
if (!this.props.mobileMenu) {
|
||||
this.setState({short: !this.state.short, menuActive: false})
|
||||
} else {
|
||||
this.props.mobileMenu()
|
||||
}
|
||||
}
|
||||
|
||||
public menuCloseCallback = () => {
|
||||
this.setState({menuActive: false})
|
||||
}
|
||||
|
||||
public getType(): 'sidebar' | 'navbar' {
|
||||
if (this.props.mobileMenu) {
|
||||
return 'sidebar'
|
||||
}
|
||||
return this.state.isMobile ? 'navbar' : this.props.type
|
||||
}
|
||||
|
||||
public render = () => (
|
||||
<>
|
||||
<nav className={buildClassName(css[this.getType()], [css.short, this.state.short && !this.props.mobileMenu], [css.mobile, this.props.mobileMenu])}>
|
||||
<Row nowrap className={css.header} align="center">
|
||||
{this.props.logo && (
|
||||
<Col className={css.imgContainer}>
|
||||
<Link href="/">
|
||||
<Image {...this.props.logo} height={34} width={this.props.logo.width*34/this.props.logo.height} />
|
||||
</Link>
|
||||
</Col>
|
||||
)}
|
||||
{this.getType() === 'sidebar' && (
|
||||
<Col nogrow><Text><div onClick={this.onSidebarButton}>
|
||||
{this.state.short ? (
|
||||
<ChevronsRight size={30} />
|
||||
) : (
|
||||
<X size={30} />
|
||||
)}
|
||||
</div></Text></Col>
|
||||
)}
|
||||
</Row>
|
||||
{this.getType() === 'sidebar' && (
|
||||
<hr/>
|
||||
)}
|
||||
<ul>
|
||||
{!this.state.isMobile && this.props.items.map((item) => (
|
||||
<li key={item.path}><Link noStyle href={item.path}>
|
||||
<Text className={buildClassName([css.active, this.state.path?.startsWith(item.path)])}>
|
||||
{this.getType() === 'sidebar' && item.icon && (
|
||||
<item.icon />
|
||||
)}
|
||||
<span>{item.name}</span>
|
||||
</Text>
|
||||
</Link></li>
|
||||
))}
|
||||
</ul>
|
||||
<div style={{flex: 1}}></div>
|
||||
{/* Spacer */}
|
||||
{this.state.isMobile && (
|
||||
<div className={css.userSpaceParent}>
|
||||
<div onClick={() => this.setState({menuActive: !this.state.menuActive})} className={css.userSpace}>
|
||||
<Text>
|
||||
<Menu size={38} className={css.mainGradient} />
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!this.state.isMobile && this.props.user ? (
|
||||
<>
|
||||
<div className={css.userSpaceParent}>
|
||||
{this.getType() === 'sidebar' && (
|
||||
<hr/>
|
||||
)}
|
||||
<div onClick={() => this.setState({menuActive: !this.state.menuActive})} className={css.userSpace}>
|
||||
<Text>
|
||||
{this.props.user.name}
|
||||
<ChevronDown className={buildClassName([css.menuActive, this.state.menuActive])} />
|
||||
</Text>
|
||||
{this.getType() === 'sidebar' && this.props.user.description && (
|
||||
<Text>{this.props.user.description}</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={buildClassName(css.userMenu, [css.menuActive, !this.state.isMobile && this.state.menuActive])}>
|
||||
<Row nomargin>
|
||||
{this.props.user.menu?.informations && (
|
||||
<Col>{this.props.user.menu?.informations}</Col>
|
||||
)}
|
||||
<Col>
|
||||
<ul>
|
||||
{this.props.user.menu?.links.map((l) => (
|
||||
<li key={l.path}><Text><Link noStyle href={l.path}>{l.name}</Link></Text></li>
|
||||
))}
|
||||
</ul>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</>
|
||||
) : !this.state.isMobile ? (
|
||||
<div className={css.userSpaceParent}>
|
||||
{this.getType() === 'sidebar' && (
|
||||
<hr/>
|
||||
)}
|
||||
<ul>
|
||||
{this.props.registerUrl && (
|
||||
<li><Link noStyle href={this.props.registerUrl}><a>
|
||||
<Text className={buildClassName(css.active)}>
|
||||
<span>Register</span>
|
||||
</Text>
|
||||
</a></Link></li>
|
||||
)}
|
||||
{this.props.loginUrl && (
|
||||
<li><Link noStyle href={this.props.loginUrl}><a>
|
||||
<Text>
|
||||
<span>Login</span>
|
||||
</Text>
|
||||
</a></Link></li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
) : undefined}
|
||||
</nav>
|
||||
|
||||
{!this.props.mobileMenu && this.state.isMobile && (
|
||||
<div className={buildClassName(css.mobileMenu, [css.shown, this.state.menuActive])}>
|
||||
<Navbar {...this.props} type="sidebar" mobileMenu={this.menuCloseCallback} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Meta } from '@storybook/react/types-6-0'
|
||||
import React from 'react'
|
||||
import { Zap } from 'react-feather'
|
||||
import { Zap } from 'lucide-react'
|
||||
import Component from '.'
|
||||
|
||||
export default {
|
||||
|
||||
@ -5,7 +5,7 @@ import Col from '../Col'
|
||||
import Text from '../Text'
|
||||
import Router from 'next/router'
|
||||
import React from 'react'
|
||||
import { X } from 'react-feather'
|
||||
import { X } from 'lucide-react'
|
||||
|
||||
import css from './NotificationManager.module.styl'
|
||||
|
||||
|
||||
@ -1,32 +1,32 @@
|
||||
import React from 'react'
|
||||
import { X } from 'react-feather'
|
||||
import Text from '../Text'
|
||||
import Box from '../Box'
|
||||
import Row from '../Row'
|
||||
|
||||
import css from './Popup.module.styl'
|
||||
|
||||
interface Props {
|
||||
children: React.ReactNode
|
||||
onClose?: () => void
|
||||
header?: Box['props']
|
||||
}
|
||||
|
||||
export default class Popup extends React.Component<Props> {
|
||||
|
||||
public render = () => (
|
||||
<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>)}>
|
||||
{this.props.children}
|
||||
</Box>
|
||||
</Row>
|
||||
)
|
||||
|
||||
private parentClose = (ev: React.MouseEvent<HTMLDivElement>) => {
|
||||
const target = ev.currentTarget
|
||||
if (target.classList.contains(css.popup) && this.props.onClose) {
|
||||
this.props.onClose()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
import React from 'react'
|
||||
import { X } from 'lucide-react'
|
||||
import Text from '../Text'
|
||||
import Box from '../Box'
|
||||
import Row from '../Row'
|
||||
|
||||
import css from './Popup.module.styl'
|
||||
|
||||
interface Props {
|
||||
children: React.ReactNode
|
||||
onClose?: () => void
|
||||
header?: Box['props']
|
||||
}
|
||||
|
||||
export default class Popup extends React.Component<Props> {
|
||||
|
||||
public render = () => (
|
||||
<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>)}>
|
||||
{this.props.children}
|
||||
</Box>
|
||||
</Row>
|
||||
)
|
||||
|
||||
private parentClose = (ev: React.MouseEvent<HTMLDivElement>) => {
|
||||
const target = ev.currentTarget
|
||||
if (target.classList.contains(css.popup) && this.props.onClose) {
|
||||
this.props.onClose()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user