mirror of
https://github.com/dzeiocom/components.git
synced 2025-07-25 06:19:50 +00:00
Merge branch 'master' of github.com:dzeiocom/components
Signed-off-by: Avior <florian.bouillon@delta-wings.net>
This commit is contained in:
@ -6,13 +6,18 @@ 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
|
||||
/**
|
||||
* Override external detection system
|
||||
* Remove styling
|
||||
*/
|
||||
noStyle?: boolean
|
||||
|
||||
/**
|
||||
* Override external detection system
|
||||
*/
|
||||
external?: boolean
|
||||
}
|
||||
|
||||
@ -24,6 +29,7 @@ export default class Link extends React.Component<Props> {
|
||||
// external link
|
||||
return (
|
||||
<a
|
||||
{...this.props.linkProps}
|
||||
className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
|
||||
href={this.props.href}
|
||||
rel="noreferrer nofollow"
|
||||
@ -36,6 +42,7 @@ export default class Link extends React.Component<Props> {
|
||||
return (
|
||||
<NextLink href={this.props.href}>
|
||||
<a
|
||||
{...this.props.linkProps}
|
||||
className={buildClassName(this.props.className, [css.link, !this.props.noStyle])}
|
||||
>{this.props.children}</a>
|
||||
</NextLink>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta } from '@storybook/react/types-6-0'
|
||||
import { Meta, Story } from '@storybook/react/types-6-0'
|
||||
import React from 'react'
|
||||
import Component from '.'
|
||||
|
||||
@ -7,4 +7,24 @@ export default {
|
||||
component: Component
|
||||
} as Meta
|
||||
|
||||
export const Basic = (args: any) => <Component {...args} />
|
||||
export const Basic: Story<any> = (args: any) => <Component {...args} />
|
||||
Basic.args = {
|
||||
items: [{
|
||||
path: '/dashboard',
|
||||
name: 'Dasboard'
|
||||
}],
|
||||
loginUrl: '/login',
|
||||
registerUrl: '/register',
|
||||
type: 'navbar',
|
||||
user: {
|
||||
name: 'Username',
|
||||
description: 'User Description',
|
||||
menu: {
|
||||
links: [{
|
||||
path: '/logout',
|
||||
name: 'Logout'
|
||||
}]
|
||||
}
|
||||
},
|
||||
logo: {src: '/assets/logo.svg', width: 90, height: 38}
|
||||
}
|
||||
|
||||
@ -12,27 +12,64 @@ 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
|
||||
settings?: 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
|
||||
}
|
||||
|
||||
@ -43,6 +80,10 @@ interface State {
|
||||
menuActive: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Navbar/Sidebar Component
|
||||
* @version 1.0.0
|
||||
*/
|
||||
export default class Navbar extends React.Component<Props, State> {
|
||||
|
||||
public state: State = {
|
||||
@ -123,7 +164,11 @@ export default class Navbar extends React.Component<Props, State> {
|
||||
<>
|
||||
<nav className={buildClassName(css[this.getType()], [css.short, this.state.short && !this.props.mobileMenu], [css.mobile, this.props.mobileMenu])}>
|
||||
<Row nowrap className={css.header} align="center">
|
||||
<Col className={css.imgContainer}><Link href="/"><Image {...this.props.logo} height={34} width={this.props.logo.width*34/this.props.logo.height} /></Link></Col>
|
||||
<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 ? (
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
@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
|
||||
@ -1,45 +0,0 @@
|
||||
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" width={175} height={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>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
@ -1,3 +1,9 @@
|
||||
/**
|
||||
* Copyright (c) 2021
|
||||
*
|
||||
* @summary DZEIO Component Library
|
||||
*/
|
||||
|
||||
import Box from './dzeio/Box'
|
||||
import Button from './dzeio/Button'
|
||||
import Checkbox from './dzeio/Checkbox'
|
||||
@ -16,7 +22,6 @@ import Navbar from './dzeio/Navbar'
|
||||
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'
|
||||
@ -40,7 +45,6 @@ export {
|
||||
Overflow,
|
||||
Popup,
|
||||
Row,
|
||||
SidebarContainer,
|
||||
Table,
|
||||
Text,
|
||||
Util
|
||||
|
||||
Reference in New Issue
Block a user