Skip to content

Commit 80758e4

Browse files
ivyolamitivyolamit
authored
Add Theme button in Perseus storybook to allow theme switching (#2773)
## Summary: Add Theme button in Perseus storybook to allow theme switching https://github.com/user-attachments/assets/9f6dbede-2004-4d3b-ac99-23b0016808d6 Author: ivyolamit Reviewers: nishasy, jeremywiebe Required Reviewers: Approved By: nishasy, jeremywiebe Checks: ✅ 10 checks were successful Pull Request URL: #2773
1 parent c1f5dab commit 80758e4

File tree

5 files changed

+80
-20
lines changed

5 files changed

+80
-20
lines changed

‎.changeset/light-geckos-taste.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎.storybook/preview.tsx

Lines changed: 61 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from "react";
22
import {color} from "@khanacademy/wonder-blocks-tokens";
33
import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
4+
import {ThemeSwitcher} from "@khanacademy/wonder-blocks-theming";
45

56
import {
67
setDependencies,
@@ -17,35 +18,75 @@ import "./reset.css";
1718
// Import the Wonder Blocks CSS variables
1819
import "@khanacademy/wonder-blocks-tokens/styles.css";
1920

20-
import type {Preview} from "@storybook/react-vite";
21+
import type {Decorator, Preview} from "@storybook/react-vite";
2122

2223
// IMPORTANT: This code runs ONCE per story file, not per story within that file.
2324
// If you want code to run once per story, see `StorybookWrapper`.
2425

2526
setDependencies(storybookTestDependencies);
2627

28+
const withPerseusDecorator: Decorator = (Story) => {
29+
return (
30+
<RenderStateRoot>
31+
<DependenciesContext.Provider value={storybookDependenciesV2}>
32+
{/* Most of our components have an expectation to be rendered
33+
inside of a .framework-perseus container. We want to make sure
34+
we can include it here, since it can also affect the styling.
35+
36+
Include box-sizing-border-box-reset to reflect the global styles
37+
from prod.
38+
*/}
39+
<div className="framework-perseus box-sizing-border-box-reset">
40+
<Story />
41+
</div>
42+
</DependenciesContext.Provider>
43+
</RenderStateRoot>
44+
);
45+
};
46+
47+
const withThemeSwitcher: Decorator = (Story, context) => {
48+
const theme = context.globals.theme;
49+
50+
return (
51+
<ThemeSwitcher theme={theme}>
52+
<Story />
53+
</ThemeSwitcher>
54+
);
55+
};
56+
57+
const supportedThemes = {
58+
description: "Global theme for components",
59+
toolbar: {
60+
// The label to show for this toolbar item
61+
title: "Theme",
62+
icon: "switchalt",
63+
// Array of plain string values or MenuItem shape (see below)
64+
items: [
65+
{
66+
value: "default",
67+
icon: "circlehollow",
68+
title: "Wonder Blocks (default)",
69+
},
70+
{
71+
value: "thunderblocks",
72+
icon: "lightning",
73+
title: "Shape Your Learning (Thunder Blocks)",
74+
},
75+
],
76+
// Change title based on selected value
77+
dynamicTitle: true,
78+
},
79+
};
80+
2781
const preview: Preview = {
2882
// These decorators apply to all stories, both inside and outside the
2983
// fixture framework.
30-
decorators: [
31-
(Story) => (
32-
<RenderStateRoot>
33-
<DependenciesContext.Provider value={storybookDependenciesV2}>
34-
{/* Most of our components have an expectation to be
35-
rendered inside of a .framework-perseus container.
36-
We want to make sure we can include it here, since it
37-
can also affect the styling.
38-
39-
Include box-sizing-border-box-reset to reflect
40-
the global styles from prod.
41-
*/}
42-
<div className="framework-perseus box-sizing-border-box-reset">
43-
<Story />
44-
</div>
45-
</DependenciesContext.Provider>
46-
</RenderStateRoot>
47-
),
48-
],
84+
decorators: [withPerseusDecorator, withThemeSwitcher],
85+
globalTypes: {
86+
// Added theme globalTypes to be consistent with WonderBlocks supported
87+
// themes, that will allow the user to select a theme from the toolbar.
88+
theme: supportedThemes,
89+
},
4990
// These parameters apply to all stories, both inside and outside the fixture
5091
// framework.
5192
parameters: {

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"@khanacademy/wonder-blocks-layout": "catalog:devDeps",
2929
"@khanacademy/wonder-blocks-popover": "catalog:devDeps",
3030
"@khanacademy/wonder-blocks-switch": "catalog:devDeps",
31+
"@khanacademy/wonder-blocks-theming": "catalog:devDeps",
3132
"@khanacademy/wonder-blocks-tokens": "catalog:devDeps",
3233
"@khanacademy/wonder-blocks-typography": "catalog:devDeps",
3334
"@phosphor-icons/core": "catalog:devDeps",

‎pnpm-lock.yaml

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pnpm-workspace.yaml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,14 @@
2121
# The sync-dependencies.ts script ensures that peer deps are always
2222
# specified as a range, and the dev deps are always pinned to the
2323
# version at the bottom of that range.
24+
#
25+
# To add a new package:
26+
# 1. Add the new package both in peerDeps and devDeps below.
27+
# 2. Then it both in devDependencies and peerDependencies of the relevant package
28+
# example, in packages/perseus/package.json file:
29+
# devDependencies -> "@khanacademy/wonder-blocks-link": "catalog:devDeps",
30+
# peerDependencies -> "@khanacademy/wonder-blocks-link": "catalog:peerDeps",
31+
# 3. Run pnpm install in root
2432
packages:
2533
- config/build
2634
- dev
@@ -57,6 +65,7 @@ catalogs:
5765
"@khanacademy/wonder-blocks-progress-spinner": ^3.1.31
5866
"@khanacademy/wonder-blocks-search-field": ^5.1.38
5967
"@khanacademy/wonder-blocks-switch": ^3.3.13
68+
"@khanacademy/wonder-blocks-theming": ^4.0.0
6069
"@khanacademy/wonder-blocks-timing": ^7.0.2
6170
"@khanacademy/wonder-blocks-tokens": ^12.0.2
6271
"@khanacademy/wonder-blocks-toolbar": ^5.1.33
@@ -94,6 +103,7 @@ catalogs:
94103
"@khanacademy/wonder-blocks-progress-spinner": 3.1.31
95104
"@khanacademy/wonder-blocks-search-field": 5.1.38
96105
"@khanacademy/wonder-blocks-switch": 3.3.13
106+
"@khanacademy/wonder-blocks-theming": 4.0.0
97107
"@khanacademy/wonder-blocks-timing": 7.0.2
98108
"@khanacademy/wonder-blocks-tokens": 12.0.2
99109
"@khanacademy/wonder-blocks-toolbar": 5.1.33

0 commit comments

Comments
 (0)