add client facing theme

.gitignore

@@ -7,3 +7,9 @@ dist
 storybook-static/*
 .yarn
 .yarnrc.yml
+/.idea/inspectionProfiles/Project_Default.xml
+/.idea/.gitignore
+/.idea/design-system.iml
+/.idea/modules.xml
+/.idea/vcs.xml
+/.idea/prettier.xml

.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: {

.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 (
+      <Box>
+        <Fonts />
+        <StoryBookThemeContext.Provider value={{ theme }}>
+          <RGThemeProvider theme={storyTheme}>
+            <Story />
+          </RGThemeProvider>
+        </StoryBookThemeContext.Provider>
+      </Box>
+    );
+  },
+];

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 (`<RaidGuildThemeOnly />` and `<ClientThemeOnly />`) exist to conditionally hide certain parts of a story depending on the theme.

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;
 

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;

src/components/molecules/RoleBadge/index.tsx

@@ -1 +1 @@
-export { default as RoleBadge } from './RoleBadge';
+export { default as RoleBadge, RoleBadgeProps } from './RoleBadge';

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';

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<typeof ButtonComponent> = () => (
-  <Stack>
-    {buttonVariants.map((button) => (
-      <Flex width='400px' justify='space-between' key='variant'>
-        <Text size='lg'>{button.name}</Text>
-        <ButtonComponent variant={button.variant} width='150px'>
-          Let&apos;s Go
-        </ButtonComponent>
-      </Flex>
-    ))}
-  </Stack>
-);
+const Buttons: StoryFn<typeof ButtonComponent> = () => {
+  return (
+    <Stack>
+      {buttonVariants.map((button) => {
+        if (button.raidGuildThemeOnly) {
+          return (
+            <RaidGuildThemeOnly key={button.variant}>
+              <Flex width='400px' justify='space-between' key={button.variant}>
+                <Text size='lg'>{button.name}</Text>
+                <ButtonComponent variant={button.variant} width='150px'>
+                  Let&apos;s Go
+                </ButtonComponent>
+              </Flex>
+            </RaidGuildThemeOnly>
+          );
+        }
+        return (
+          <Flex width='400px' justify='space-between' key={button.variant}>
+            <Text size='lg'>{button.name}</Text>
+            <ButtonComponent variant={button.variant} width='150px'>
+              Let&apos;s Go
+            </ButtonComponent>
+          </Flex>
+        );
+      })}
+    </Stack>
+  );
+};
 
 export { Buttons };

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 = () => (
+  <Box position='relative'>
+    <Box
+      bgImg={castle}
+      left={0}
+      top={0}
+      right={0}
+      bottom={0}
+      backgroundSize='cover'
+      backgroundPosition='right'
+      backgroundRepeat='no-repeat'
+      opacity={0.4}
+      position='absolute'
+      zIndex={-1}
+    />
+    <Flex direction='column' justify='space-between' minH='70vh' w='100%'>
+      <Stack align='center' spacing={6} my={40}>
+        <Heading as='h1' size='3xl' color='white' textAlign='center'>
+          Raid Guild Design Guide
+        </Heading>
+        <Text align='center' mb={5} fontFamily='texturina'>
+          Use the navigation on the left to explore existing components built
+          with Raid Guild styling.
+        </Text>
+      </Stack>
+      <FooterSimple />
+    </Flex>
+  </Box>
+);
+
+export default {
+  title: 'Client Design System',
+  component: ClientDesignSystem,
+  parameters: {
+    chakra: {
+      theme: {},
+    },
+  },
+} as Meta;

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}</>;
+};

src/theme/index.ts

@@ -90,4 +90,11 @@ const theme = extendTheme({
   },
 });
 
+export const clientTheme = extendTheme({
+  colors,
+  layerStyles: {
+    ...gradientStyles,
+  },
+});
+
 export default theme;