Theme Blocks

Theme blocks are a collection of components designed to display the various elements of your theme within Storybook. These components offer a visual representation of your design system, including typography, colors, spacing, borders, shadows, palette variations, and more. By incorporating these blocks into your Storybook, you can easily document and showcase your theme’s design tokens.

Available Theme Block Components

Typography Block: Demonstrates the font families, sizes, and weights available in your theme.
Color Block: Displays the color palette defined in your theme, including primary, secondary, and any other custom colors.
Spacing Block: Visualizes the spacing scale used in your theme, helpful for understanding and using consistent spacing throughout your UI.
Border Block: Shows the available border radius options, aiding in the application of consistent border styles.
Shadow Block: Exhibits the shadow options defined in your theme, making it easy to apply consistent shadow effects.
Components Block: A comprehensive showcase of the styled components within your theme, including buttons, inputs, and more.
Icons Block: Displays the icons used in your theme. NOTE that icons are not included and must be supplied.

Implementing Theme Blocks in a Storybook Story

Below is an example that demonstrates how to use the theme block components in a Storybook story.

import React from 'react';
import {
  TypographyBlocks,
  ColorBlocks,
  SpacingBlocks,
  BorderBlocks,
  ShadowBlocks,
  ThemeProvider,
  theme,
  useTheme,
  extractTheme
} from 'reablocks';
 
const { theme: TWConfig } = resolveConfig(tailwindConfig);
 
export default {
  title: 'Components/Theme',
  decorators: [
    Story => {
      const { tokens } = useTheme();
 
      const {
        colors,
        borderRadius,
        boxShadow,
        spacing,
        fontFamily,
        fontSize,
        fontWeight
      } = extractTheme(tokens);
 
      return (
        <div style={{ width: '95vw' }}>
          <Story
            colors={colors}
            borderRadius={borderRadius}
            boxShadow={boxShadow}
            spacing={spacing}
            fontFamily={fontFamily}
            fontSize={fontSize}
            fontWeight={fontWeight}
          />
        </div>
      );
    }
  ]
};
 
 
export const Colors = (_: unknown, { colors }) => {
  return <ColorBlocks colors={colors} />;
};
 
export const Typography = (
  __: unknown,
  { fontFamily, fontSize, fontWeight }
) => (
  <TypographyBlocks
    families={fontFamily}
    sizes={fontSize}
    weights={fontWeight}
  />
);
 
export const Spacings = (__: unknown, { spacing }) => (
  <SpacingBlocks spacings={spacing} />
);
 
export const Borders = (_: unknown, { borderRadius }) => (
  <BorderBlocks borders={borderRadius} />
);
 
export const Shadows = (_: unknown, { boxShadow }) => (
  <ShadowBlocks shadows={boxShadow} />
);
 
export const Components = () => {
  const { theme } = useTheme();
  return <ComponentBlocks components={theme.components} />;
};
 
export const Icons = () => (
  <>
    <h2>Icon Block Helper ( icons not included )</h2>
    <IconBlocks
      icons={[
        {
          name: 'favorite',
          src: favoriteIcon
        },
        {
          name: 'another favorite',
          src: favoriteIcon
        }
      ]}
    />
  </>
);

NOTE: This example utilizes the ThemeProvider in the story decorator, allowing each story to inherit the dark theme context. Alternatively, you could use ThemeProvider in your .storybook/preview.js file to apply the theme globally to all stories.

You can see how it looks in the Storybook here.

API Customization