npm i juny-react-style
theme = "dark" | "light"
<StyleThemeProvider
mode={theme} // 'dark' | 'light' ) default: light
>
... main component
</StyleThemeProvider>
import { MacContainer } from "juny-react-style";
<MacContainer><div>children</div></MacContainer>
export interface MacContainerEventProps {
onClose?: () => void
onMinimize?: () => void
onHidden?: () => void
}
export interface MacContainerHeaderWrapElementProps extends MacContainerEventProps{
width?: string
textAlign?: string
}
export interface MacContainerHeaderProps extends MacContainerHeaderWrapElementProps{
title?: string | ReactNode
buttonSize?: string
theme?: ThemeType
}
export interface MacContainerWrapElementProps extends MacContainerEventProps{
width?: string
height?: string
borderRadius?: string
backgroundColor?: string
padding?: string
theme?: ThemeType
}
export interface MacContainerBodyElementProps {
padding?: string
}
export interface MacContainerBody extends MacContainerBodyElementProps{
}
export interface MacContainerProps extends MacContainerWrapElementProps{
header?: MacContainerHeaderProps
body?: MacContainerBody
children?: ReactNode
}
const items = [
<ListItem>
<div>list 1</div>
</ListItem>,
<ListItem>
<div>list 2</div>
</ListItem>,
]
const Template: StoryFn<typeof List> = (args) => <List {...args} />
export const ListTemplate = Template.bind({})
ListTemplate.args = {
title: 'test list',
children: items
}
export interface ListDivStyleProps {
width?: string
height?: string
display?: string
flexDirection?: string
overflowY?: string
borderRadius?: string
borderWidth?: string
borderStyle?: string
borderColor?: string
opacity?: string
margin?: string
backgroundColor?: string
}
export interface ListItemDivStyleProps {
borderRadius?: string
borderWidth?: string
borderStyle?: string
borderColor?: string
margin?: string
backgroundColor?: string
padding?: string
}
export interface ListProps extends ListDivStyleProps {
children?: ReactNode[]
title?: string
headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
headingAlign?: 'center' | 'left' | 'right'
}
export interface ListItemProps extends ListItemDivStyleProps {
children?: ReactNode
}
export interface TreeItemProps {
active?: any
title?: string
}
export interface TreeListProps {
title?: string
icon?: ReactNode
items?: TreeItemProps[] | []
}
export interface ChildrenLeftRightLayoutProps {
ratio?: number
maxWidth?: string
}
export interface LeftRightLayoutProps extends ChildrenLeftRightLayoutProps{
children: ReactNode[] | ReactNode
flexDirection?: 'column' | 'row'
height?: string
width?: string
gap?: string
}