diff --git a/.gitignore b/.gitignore index d9a9232..a4d4bd7 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,4 @@ dist storybook-static/* .yarn .yarnrc.yml +/.idea/* \ No newline at end of file diff --git a/.storybook/main.ts b/.storybook/main.ts index 8468c49..6436344 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -11,7 +11,7 @@ const config: StorybookConfig = { '@storybook/addon-links', { name: '@storybook/addon-essentials', options: { docs: false } }, '@storybook/addon-docs', - '@chakra-ui/storybook-addon', + // '@chakra-ui/storybook-addon', ], core: { builder: { diff --git a/.storybook/preview.js b/.storybook/preview.js deleted file mode 100644 index 4e0213d..0000000 --- a/.storybook/preview.js +++ /dev/null @@ -1,42 +0,0 @@ -import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; -import { themes } from '@storybook/theming'; -import theme from '../src/theme/index'; -import { Fonts, Box } from '../src'; - -export const parameters = { - viewport: { - viewports: INITIAL_VIEWPORTS, - }, - actions: { argTypesRegex: '^on[A-Z].*' }, - // Storybook a11y addon configuration - a11y: { - // the target DOM element - element: '#root', - // sets the execution mode for the addon - manual: false, - }, - chakra: { - theme, - }, - controls: { - expanded: true, - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, - options: { - storySort: { - method: 'alphabetical', - }, - }, -}; - -export const decorators = [ - (Story) => ( - - - - - ), -]; diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx new file mode 100644 index 0000000..dae180c --- /dev/null +++ b/.storybook/preview.tsx @@ -0,0 +1,65 @@ +import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; +import { Fonts, Box, RGThemeProvider, defaultTheme, clientTheme } from '../src'; +import { Decorator } from '@storybook/react'; +import React from 'react'; +import { StoryBookThemeContext } from '../src/stories/utils'; + +export const parameters = { + viewport: { + viewports: INITIAL_VIEWPORTS, + }, + actions: { argTypesRegex: '^on[A-Z].*' }, + // Storybook a11y addon configuration + a11y: { + // the target DOM element + element: '#root', + // sets the execution mode for the addon + manual: false, + }, + controls: { + expanded: true, + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, + options: { + storySort: { + method: 'alphabetical', + }, + }, +}; + +export const globalTypes = { + theme: { + name: 'Theme', + description: 'Global theme for components', + defaultValue: 'light', + toolbar: { + icon: 'circlehollow', + // Array of plain string values or MenuItem shape (see below) + items: ['guild', 'client'], + // Property that specifies if the name of the item will be displayed + showName: true, + // Change title based on selected value + dynamicTitle: true, + }, + }, +}; + +export const decorators: Decorator[] = [ + (Story, context) => { + const theme = context.parameters.theme || context.globals.theme; + const storyTheme = theme === 'guild' ? defaultTheme : clientTheme; + return ( + + + + + + + + + ); + }, +]; diff --git a/README.md b/README.md index ef6ec5c..8e244a0 100644 --- a/README.md +++ b/README.md @@ -23,3 +23,6 @@ On http://localhost:6006/ you'll see the components built in the [storybook](htt ## Prettier If you do not already use [Prettier](https://prettier.io/), please add Prettier to your text editor. Prettier allows us to have consistent formatting without having to think much about it. + +## Helper components +Not all variations and components are available in both themes. Helper utility components (`` and ``) exist to conditionally hide certain parts of a story depending on the theme. \ No newline at end of file diff --git a/src/components/atoms/Tag/Tag.tsx b/src/components/atoms/Tag/Tag.tsx index 8dbf99c..1b0eb0d 100644 --- a/src/components/atoms/Tag/Tag.tsx +++ b/src/components/atoms/Tag/Tag.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { ChakraTag, ChakraTagProps } from '../../chakra'; -interface CustomTagProps { +type CustomTagProps = { label?: string; -} +}; export type TagProps = CustomTagProps & ChakraTagProps; diff --git a/src/components/molecules/RoleBadge/RoleBadge.tsx b/src/components/molecules/RoleBadge/RoleBadge.tsx index ba66568..a860077 100644 --- a/src/components/molecules/RoleBadge/RoleBadge.tsx +++ b/src/components/molecules/RoleBadge/RoleBadge.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Flex } from '../../chakra'; import { roleImage } from './roleImages'; -interface RoleBadgeProps { +export interface RoleBadgeProps { roleName: string; width?: number | string; height?: number | string; diff --git a/src/components/molecules/RoleBadge/index.tsx b/src/components/molecules/RoleBadge/index.tsx index 19824ec..4e6b333 100644 --- a/src/components/molecules/RoleBadge/index.tsx +++ b/src/components/molecules/RoleBadge/index.tsx @@ -1 +1 @@ -export { default as RoleBadge } from './RoleBadge'; +export { default as RoleBadge, RoleBadgeProps } from './RoleBadge'; diff --git a/src/index.ts b/src/index.ts index bbdadf7..2c9e7bd 100644 --- a/src/index.ts +++ b/src/index.ts @@ -24,4 +24,4 @@ export { default as RGThemeProvider, Fonts, } from './components/RGThemeProvider'; -export { default as defaultTheme } from './theme'; +export { default as defaultTheme, clientTheme } from './theme'; diff --git a/src/stories/atoms/Button.stories.tsx b/src/stories/atoms/Button.stories.tsx index 0348981..3f6c002 100644 --- a/src/stories/atoms/Button.stories.tsx +++ b/src/stories/atoms/Button.stories.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Meta, StoryFn } from '@storybook/react'; import { Button as ButtonComponent, Flex, Stack, Text } from '../..'; +import { RaidGuildThemeOnly } from '../utils'; export default { title: 'Components/Atoms/Buttons', @@ -9,23 +10,43 @@ export default { const buttonVariants = [ { name: 'Solid', variant: 'solid' }, - { name: 'Bright', variant: 'bright' }, + { name: 'Bright', variant: 'bright', raidGuildThemeOnly: true }, { name: 'Outline', variant: 'outline' }, - { name: 'Gradient Outline', variant: 'gradientOutline' }, + { + name: 'Gradient Outline', + variant: 'gradientOutline', + raidGuildThemeOnly: true, + }, { name: 'Ghost', variant: 'ghost' }, ]; -const Buttons: StoryFn = () => ( - - {buttonVariants.map((button) => ( - - {button.name} - - Let's Go - - - ))} - -); +const Buttons: StoryFn = () => { + return ( + + {buttonVariants.map((button) => { + if (button.raidGuildThemeOnly) { + return ( + + + {button.name} + + Let's Go + + + + ); + } + return ( + + {button.name} + + Let's Go + + + ); + })} + + ); +}; export { Buttons }; diff --git a/src/stories/index-client.stories.tsx b/src/stories/index-client.stories.tsx new file mode 100644 index 0000000..6b03005 --- /dev/null +++ b/src/stories/index-client.stories.tsx @@ -0,0 +1,48 @@ +import { Meta } from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; +import React from 'react'; + +import { Heading, Stack, Text, Flex, Box } from '..'; + +import castle from '../assets/images/raid-guild-castle.png'; +import FooterSimple from '../components/footers/FooterSimple'; + +export const ClientDesignSystem: StoryFn = () => ( + + + + + + Raid Guild Design Guide + + + Use the navigation on the left to explore existing components built + with Raid Guild styling. + + + + + +); + +export default { + title: 'Client Design System', + component: ClientDesignSystem, + parameters: { + chakra: { + theme: {}, + }, + }, +} as Meta; diff --git a/src/stories/utils.tsx b/src/stories/utils.tsx new file mode 100644 index 0000000..dd4cc0a --- /dev/null +++ b/src/stories/utils.tsx @@ -0,0 +1,31 @@ +/* eslint-disable react/jsx-no-useless-fragment */ +import React, { PropsWithChildren, useContext } from 'react'; + +export const StoryBookThemeContext = React.createContext<{ + theme: 'client' | 'guild'; +}>({ theme: 'guild' }); + +export const useCurrentTheme = () => { + const { theme } = useContext(StoryBookThemeContext); + return theme; +}; + +export const RaidGuildThemeOnly = ({ children }: PropsWithChildren) => { + const theme = useCurrentTheme(); + + if (theme !== 'guild') { + return null; + } + + return <>{children}; +}; + +export const ClientThemeOnly = ({ children }: PropsWithChildren) => { + const theme = useCurrentTheme(); + + if (theme !== 'client') { + return null; + } + + return <>{children}; +}; diff --git a/src/theme/index.ts b/src/theme/index.ts index 5923e53..ee6b238 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -90,4 +90,11 @@ const theme = extendTheme({ }, }); +export const clientTheme = extendTheme({ + colors, + layerStyles: { + ...gradientStyles, + }, +}); + export default theme;