feat #92 - Refac preview.tsx to use react-jss

.storybook/preview.tsx

@@ -1,23 +1,17 @@
 import './index.css'
 import cn from 'classnames'
-import { createUseStyles } from 'react-jss'
 import document from 'global/document'
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 import isChromatic from 'chromatic/isChromatic'
 import { Story } from '@storybook/react/types-6-0'
 import { StoryContext } from '@storybook/addons'
-import { ThemesType } from '../src/components/assets/styles/themes'
-import { withCssResources } from '@storybook/addon-cssresources'
 import {
-	convert,
-	createReset,
-	Global,
-	styled,
-	Theme,
-	ThemeProvider,
 	themes,
-	useTheme
-} from '@storybook/theming'
+	Theme,
+	ThemesType
+} from '../src/components/assets/styles/themes'
+import { createUseStyles, ThemeProvider, useTheme } from 'react-jss'
+import { withCssResources } from '@storybook/addon-cssresources'
 import React, { FC, ReactNode, useEffect } from 'react'
 
 const { dark, light } = ThemesType
@@ -31,47 +25,27 @@ const useStyles = createUseStyles({
 	}
 })
 
-const ThemeBlock = styled.div(
-	{
+const useStylesWithTheme = createUseStyles({
+	themeBlock: {
+		background: ({ theme }: { theme: Theme }) => theme.background,
 		height: '100vh',
-		left: 0,
+		left: props => (props.side === 'left' ? 0 : '50vw'),
 		overflow: 'auto',
-		right: '50vw',
+		right: props => (props.side === 'right' ? '50vw' : 0),
 		width: '50vw'
-	},
-	({ theme }) => ({
-		background: theme.background.app,
-		color: theme.color.defaultText
-	}),
-	// @ts-ignore
-	({ side }) =>
-		side === 'left'
-			? {
-					left: 0,
-					right: '50vw'
-			  }
-			: {
-					left: '50vw',
-					right: 0
-			  }
-)
-
-const ThemedSetRoot = () => {
+	}
+})
+
+const ThemedCanvasBg = () => {
 	const theme: Theme = useTheme()
 
 	useEffect(() => {
-		document.body.style.background = theme.background.app
-		document.body.style.color = theme.defaultText
+		document.body.style.background = theme.background
 	})
 
 	return null
 }
 
-interface StoryWrapperProps {
-	children: ReactNode
-	dark?: boolean
-}
-
 /*
 This wrapper does two things:
   1. Adds padding to the story since it was removed from .sb-show-main in ./index.css
@@ -90,7 +64,36 @@ const StoryWrapper: FC<StoryWrapperProps> = ({
 	return <div className={wrapperClasses}>{children}</div>
 }
 
-const ThemeWrapper = (
+interface StoryWrapperProps {
+	children: ReactNode
+	dark?: boolean
+}
+
+/* This adds a wrapper to style the left and right blocks for side-by-side viewing of dark and light themes. */
+const ThemedBlock: FC<ThemedBlockProps> = ({
+	children,
+	...props
+}: ThemedBlockProps) => {
+	const theme = useTheme()
+	const classes = useStylesWithTheme({ ...props, theme })
+	const { side } = props
+
+	return (
+		<div className={classes.themeBlock}>
+			<StoryWrapper dark={side === 'left' ? false : true}>
+				{children}
+			</StoryWrapper>
+		</div>
+	)
+}
+
+interface ThemedBlockProps {
+	children: ReactNode
+	side: 'left' | 'right'
+}
+
+/* This is the decorator that wraps the stories with a theme provider and a wrapper div for side-by-side view. */
+const ThemeDecorator = (
 	ComponentStory: Story,
 	{ globals: { theme = light } }: StoryContext
 ) => {
@@ -100,34 +103,24 @@ const ThemeWrapper = (
 		case 'side-by-side': {
 			return (
 				<div className={classes.storyContainer}>
-					<ThemeProvider theme={convert(themes.light)}>
-						<Global styles={createReset} />
-					</ThemeProvider>
-					<ThemeProvider theme={convert(themes.light)}>
-						{/* @ts-ignore */}
-						<ThemeBlock side='left'>
-							<StoryWrapper>
-								<ComponentStory />
-							</StoryWrapper>
-						</ThemeBlock>
+					<ThemeProvider theme={themes[light]}>
+						<ThemedBlock side='left'>
+							<ComponentStory />
+						</ThemedBlock>
 					</ThemeProvider>
-					<ThemeProvider theme={convert(themes.dark)}>
-						{/* @ts-ignore */}
-						<ThemeBlock side='right'>
-							<StoryWrapper dark>
-								<ComponentStory />
-							</StoryWrapper>
-						</ThemeBlock>
+					<ThemeProvider theme={themes[dark]}>
+						<ThemedBlock side='right'>
+							<ComponentStory />
+						</ThemedBlock>
 					</ThemeProvider>
 				</div>
 			)
 		}
 
 		default: {
 			return (
-				<ThemeProvider theme={convert(themes[theme])}>
-					<Global styles={createReset} />
-					<ThemedSetRoot />
+				<ThemeProvider theme={themes[theme]}>
+					<ThemedCanvasBg />
 					<StoryWrapper dark={theme === dark}>
 						<ComponentStory />
 					</StoryWrapper>
@@ -161,4 +154,4 @@ export const globalTypes = {
 	}
 }
 
-export const decorators = [withCssResources, ThemeWrapper]
+export const decorators = [withCssResources, ThemeDecorator]

src/components/assets/styles/baseStyles.ts

@@ -1,12 +1,8 @@
 import { ColorManipulationTypes, manipulateColor } from '../../utils'
 import { dassanaBlues, dassanaGrays } from './colors'
-import { getThemePalette, ThemePalette, ThemesType } from './themes'
+import { Theme, themes, ThemesType } from './themes'
 
-export const generateBaseStyles = ({
-	background,
-	primary,
-	text
-}: ThemePalette) => {
+export const generateBaseStyles = ({ background, primary, text }: Theme) => {
 	const base = {
 		bgColor: background,
 		borderColor: dassanaGrays[6],
@@ -38,7 +34,9 @@ export const generateBaseStyles = ({
 	return { base, disabled, focus, hover, placeholder }
 }
 
+const { dark, light } = ThemesType
+
 export const generalColors = {
-	[ThemesType.dark]: generateBaseStyles(getThemePalette(ThemesType.dark)),
-	[ThemesType.light]: generateBaseStyles(getThemePalette(ThemesType.light))
+	[ThemesType.dark]: generateBaseStyles(themes[dark]),
+	[ThemesType.light]: generateBaseStyles(themes[light])
 }

src/components/assets/styles/themes.ts

@@ -1,13 +1,13 @@
 import { dassanaBlue, dassanaGrays, dassanaReds, dassanaWhite } from './colors'
 
-export interface ThemePalette {
+export interface Theme {
 	background: string
 	primary: string
 	error: string
 	text: { disabled: string; primary: string }
 }
 
-export const lightPalette: ThemePalette = {
+export const lightPalette: Theme = {
 	background: dassanaWhite,
 	error: dassanaReds[6],
 	primary: dassanaBlue,
@@ -17,7 +17,7 @@ export const lightPalette: ThemePalette = {
 	}
 }
 
-export const darkPalette: ThemePalette = {
+export const darkPalette: Theme = {
 	background: dassanaGrays[9],
 	error: dassanaReds[6],
 	primary: dassanaBlue,
@@ -32,8 +32,7 @@ export enum ThemesType {
 	light = 'light'
 }
 
-const { dark, light } = ThemesType
-
-const themes = { [dark]: darkPalette, [light]: lightPalette }
-
-export const getThemePalette = (theme: ThemesType) => themes[theme]
+export const themes = {
+	[ThemesType.dark]: darkPalette,
+	[ThemesType.light]: lightPalette
+}