Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
chore(Theme): added theme context stories (#96)
  • Loading branch information
benjitrosch committed Apr 18, 2022
1 parent f46ac7d commit 52fdbd7
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 17 deletions.
112 changes: 95 additions & 17 deletions src/Theme/Theme.stories.tsx
Expand Up @@ -2,33 +2,111 @@ import React from 'react'
import { Story, Meta } from '@storybook/react'

import Theme, { ThemeProps } from '.'
import Button from '../Button'
import ThemeItem from './ThemeItem'

import { DEFAULT_THEMES } from '../defaultThemes'
import { toTitleCase } from '../utils'
import { useTheme } from './useTheme'

export default {
title: 'Utils/Theme',
component: Theme,
} as Meta

export const Default: Story<ThemeProps> = (args) => {
const { theme, setTheme } = useTheme()

return (
<div className="flex flex-col gap-y-4">
{DEFAULT_THEMES.map((theme) => (
<Theme
key={`theme.${theme}`}
dataTheme={theme}
className="p-8 bg-neutral rounded-2xl"
<div>
<h4 className="mb-4">Current Theme: {theme}</h4>
<div className="flex flex-wrap gap-4">
{DEFAULT_THEMES.map((t, i) => (
<ThemeItem
key={`theme_${t}_#${i}`}
dataTheme={t}
role="button"
aria-label="Theme select"
aria-pressed={t === theme}
selected={t === theme}
tabIndex={0}
onClick={() => {
document
.getElementsByTagName('html')[0]
.setAttribute('data-theme', t)
window.localStorage.setItem('sb-react-daisyui-preview-theme', t)
setTheme(t)
}}
/>
))}
</div>
</div>
)
}
Default.args = {}

export const NestedThemes: Story<ThemeProps> = (args) => {
const { theme, setTheme } = useTheme()

const renderNestedThemes = (themes: readonly string[]) => {
const nodes: React.ReactNode[] = []

for (let i = 0; i < themes.length; i += 2) {
nodes.push(
<ThemeItem
key={`theme_${themes[i]}_#${i}`}
dataTheme={themes[i]}
role="button"
aria-label="Theme select"
aria-pressed={themes[i] === theme}
selected={themes[i] === theme}
tabIndex={0}
onClick={(e) => {
e.stopPropagation()

document
.getElementsByTagName('html')[0]
.setAttribute('data-theme', themes[i])
window.localStorage.setItem(
'sb-react-daisyui-preview-theme',
themes[i]
)
setTheme(themes[i])
}}
>
<h2 className="text-xl font-semibold mb-4">{toTitleCase(theme)}</h2>
<div className="flex gap-x-2">
<Button>Default</Button>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="accent">Accent</Button>
</div>
</Theme>
))}
<ThemeItem
key={`theme_${themes[i + 1]}_#${i + 1}`}
dataTheme={themes[i + 1]}
role="button"
aria-label="Theme select"
aria-pressed={themes[i + 1] === theme}
selected={themes[i + 1] === theme}
tabIndex={0}
onClick={(e) => {
e.stopPropagation()

document
.getElementsByTagName('html')[0]
.setAttribute('data-theme', themes[i + 1])
window.localStorage.setItem(
'sb-react-daisyui-preview-theme',
themes[i + 1]
)
setTheme(themes[i + 1])
}}
/>
</ThemeItem>
)
}

return <div className="flex flex-wrap gap-4">{nodes}</div>
}

return (
<div>
<h4 className="mb-4">Current Theme: {theme}</h4>
<div className="flex flex-col gap-y-4">
{renderNestedThemes(DEFAULT_THEMES)}
</div>
</div>
)
}
NestedThemes.args = {}
59 changes: 59 additions & 0 deletions src/Theme/ThemeItem.tsx
@@ -0,0 +1,59 @@
import React from 'react'
import clsx from 'clsx'
import { twMerge } from 'tailwind-merge'

export type ThemeItemProps = React.HTMLAttributes<HTMLDivElement> & {
dataTheme: string
selected?: boolean
}

const ThemeItem = ({
selected,
children,
dataTheme,
className,
...props
}: ThemeItemProps) => {
const classes = twMerge(
className,
'border-base-content/20 hover:border-base-content/40 outline-base-content\
overflow-hidden rounded-lg border outline-2 outline-offset-2',
clsx({
outline: selected,
})
)

return (
<div {...props} data-theme={dataTheme} className={classes}>
<div className="bg-base-100 text-base-content w-full cursor-pointer font-sans">
<div className="grid grid-cols-5 grid-rows-3">
<div className="bg-base-200 col-start-1 row-span-2 row-start-1" />
<div className="bg-base-300 col-start-1 row-start-3" />
<div className="bg-base-100 col-span-4 col-start-2 row-span-3 row-start-1 flex flex-col gap-1 p-2">
<div className="font-bold">{dataTheme}</div>
<div className="flex flex-wrap gap-1">
<div className="bg-primary flex aspect-square w-5 items-center justify-center rounded lg:w-6">
<div className="text-primary-content text-sm font-bold">A</div>
</div>

<div className="bg-secondary flex aspect-square w-5 items-center justify-center rounded lg:w-6">
<div className="text-primary-content text-sm font-bold">A</div>
</div>

<div className="bg-accent flex aspect-square w-5 items-center justify-center rounded lg:w-6">
<div className="text-primary-content text-sm font-bold">A</div>
</div>

<div className="bg-neutral flex aspect-square w-5 items-center justify-center rounded lg:w-6">
<div className="text-primary-content text-sm font-bold">A</div>
</div>
</div>
{children && <div className="my-2">{children}</div>}
</div>
</div>
</div>
</div>
)
}

export default ThemeItem

0 comments on commit 52fdbd7

Please sign in to comment.