[WIP] FEI-5589: Experiment with CSS modules - DO NOT REVIEW

.changeset/brown-bottles-arrive.md

@@ -0,0 +1,12 @@
+---
+"@khanacademy/wonder-blocks-tokens": major
+"@khanacademy/wonder-blocks-core": major
+"@khanacademy/wonder-blocks-form": major
+"@khanacademy/wonder-blocks-icon": major
+"@khanacademy/wonder-blocks-layout": major
+"@khanacademy/wonder-blocks-progress-spinner": major
+"@khanacademy/wonder-blocks-typography": major
+"@khanacademy/wb-dev-build-settings": major
+---
+
+Use css-modules

.storybook/main.ts

@@ -26,9 +26,11 @@ const config: StorybookConfig = {
         const mergedConfig = mergeConfig(config, {
             resolve: {
                 // Allow us to detect changes from local wonder-blocks packages.
+                // NOTE: Only applies to ts(x) files to avoid conflicts with
+                // the tokens.css import.
                 alias: [
                     {
-                        find: /^@khanacademy\/wonder-blocks(-.*)$/,
+                        find: /^@khanacademy\/wonder-blocks(-[a-z]*)$/,
                         replacement: resolve(
                             __dirname,
                             "../packages/wonder-blocks$1/src",

.storybook/preview.tsx

@@ -7,6 +7,8 @@ import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
 import {RenderStateRoot} from "../packages/wonder-blocks-core/src";
 import {Preview} from "@storybook/react";
 
+import "@khanacademy/wonder-blocks-tokens/css/tokens.css";
+
 /**
  * WB Official breakpoints
  * @see https://khanacademy.atlassian.net/wiki/spaces/WB/pages/2099970518/Layout+Breakpoints

__docs__/wonder-blocks-button/button.stories.module.css

@@ -0,0 +1,28 @@
+.row {
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: var(--wb-spacing-xSmall_8);
+}
+
+.button {
+    margin-right: var(--wb-spacing-xSmall_8);
+}
+
+.truncatedButton {
+    max-width: 200px;
+    margin-bottom: var(--wb-spacing-medium_16);
+}
+
+.fillSpace {
+    min-width: 140px;
+}
+
+.example {
+    background: var(--wb-color-offWhite);
+    padding: var(--wb-spacing-medium_16);
+}
+
+.label {
+    margin-top: var(--wb-spacing-large_24);
+    margin-bottom: var(--wb-spacing-xSmall_8);
+}

__docs__/wonder-blocks-button/button.stories.tsx

@@ -1,16 +1,17 @@
 import * as React from "react";
-import {StyleSheet} from "aphrodite";
+// import {StyleSheet} from "aphrodite";
 import type {Meta, StoryObj} from "@storybook/react";
 import {expect, fireEvent, userEvent, within} from "@storybook/test";
 
 import {MemoryRouter, Route, Switch} from "react-router-dom";
 
-import type {StyleDeclaration} from "aphrodite";
+// import type {StyleDeclaration} from "aphrodite";
 
 import pencilSimple from "@phosphor-icons/core/regular/pencil-simple.svg";
 import pencilSimpleBold from "@phosphor-icons/core/bold/pencil-simple-bold.svg";
 import plus from "@phosphor-icons/core/regular/plus.svg";
 
+import {cx} from "class-variance-authority";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
@@ -27,6 +28,8 @@ import ComponentInfo from "../../.storybook/components/component-info";
 import ButtonArgTypes from "./button.argtypes";
 import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
 
+import styles from "./button.stories.module.css";
+
 /**
  * Reusable button component.
  *
@@ -132,31 +135,31 @@ export const Tertiary: StoryComponentType = {
     },
 };
 
-export const styles: StyleDeclaration = StyleSheet.create({
-    row: {
-        flexDirection: "row",
-        alignItems: "center",
-        marginBottom: spacing.xSmall_8,
-    },
-    button: {
-        marginRight: spacing.xSmall_8,
-    },
-    truncatedButton: {
-        maxWidth: 200,
-        marginBottom: spacing.medium_16,
-    },
-    fillSpace: {
-        minWidth: 140,
-    },
-    example: {
-        background: color.offWhite,
-        padding: spacing.medium_16,
-    },
-    label: {
-        marginTop: spacing.large_24,
-        marginBottom: spacing.xSmall_8,
-    },
-});
+// export const styles: StyleDeclaration = StyleSheet.create({
+//     row: {
+//         flexDirection: "row",
+//         alignItems: "center",
+//         marginBottom: spacing.xSmall_8,
+//     },
+//     button: {
+//         marginRight: spacing.xSmall_8,
+//     },
+//     truncatedButton: {
+//         maxWidth: 200,
+//         marginBottom: spacing.medium_16,
+//     },
+//     fillSpace: {
+//         minWidth: 140,
+//     },
+//     example: {
+//         background: color.offWhite,
+//         padding: spacing.medium_16,
+//     },
+//     label: {
+//         marginTop: spacing.large_24,
+//         marginBottom: spacing.xSmall_8,
+//     },
+// });
 
 export const Variants: StoryComponentType = () => (
     <View style={{padding: spacing.medium_16, gap: spacing.medium_16}}>
@@ -436,7 +439,7 @@ export const Size: StoryComponentType = () => (
     <View>
         <View style={styles.row}>
             <LabelMedium style={styles.fillSpace}>small</LabelMedium>
-            <View style={[styles.row, styles.example]}>
+            <View style={cx([styles.row, styles.example])}>
                 <Button style={styles.button} onClick={() => {}} size="small">
                     Label
                 </Button>
@@ -461,7 +464,7 @@ export const Size: StoryComponentType = () => (
         <View style={styles.row}>
             <LabelMedium style={styles.fillSpace}>medium (default)</LabelMedium>
 
-            <View style={[styles.row, styles.example]}>
+            <View style={cx([styles.row, styles.example])}>
                 <Button style={styles.button} onClick={() => {}} size="medium">
                     Label
                 </Button>
@@ -485,7 +488,7 @@ export const Size: StoryComponentType = () => (
         </View>
         <View style={styles.row}>
             <LabelMedium style={styles.fillSpace}>large</LabelMedium>
-            <View style={[styles.row, styles.example]}>
+            <View style={cx([styles.row, styles.example])}>
                 <Button style={styles.button} onClick={() => {}} size="large">
                     Label
                 </Button>

__docs__/wonder-blocks-button/navigation-callbacks.mdx

@@ -1,11 +1,11 @@
 import {Meta, Story, Canvas} from "@storybook/blocks";
 import {MemoryRouter, Route, Switch} from "react-router-dom";
-import * as NavigationCallbacksStories from './navigation-callbacks.stories';
+import * as NavigationCallbacksStories from "./navigation-callbacks.stories";
 
 import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 
-import {styles} from "./button.stories";
+import styles from "./button.stories.module.css";
 
 <Meta of={NavigationCallbacksStories} />
 
@@ -18,26 +18,26 @@ passing in a URL to the `href` prop and also passing in a callback
 function to either the `onClick`, `beforeNav`, or `safeWithNav` prop.
 Which prop you choose depends on your use case.
 
-* `onClick` is guaranteed to run to completion before navigation starts,
-  but it is not async aware, so it should only be used if all of the code
-  in your callback function executes synchronously.
-
-* `beforeNav` is guaranteed to run async operations before navigation
-  starts. You must return a promise from the callback function passed in
-  to this prop, and the navigation will happen after the promise
-  resolves. If the promise rejects, the navigation will not occur.
-  This prop should be used if it's important that the async code
-  completely finishes before the next URL starts loading.
-
-* `safeWithNav` runs async code concurrently with navigation when safe,
-  but delays navigation until the async code is finished when
-  concurrent execution is not safe. You must return a promise from the
-  callback function passed in to this prop, and Wonder Blocks will run
-  the async code in parallel with client-side navigation or while opening
-  a new tab, but will wait until the async code finishes to start a
-  server-side navigation. If the promise rejects the navigation will
-  happen anyway. This prop should be used when it's okay to load
-  the next URL while the async callback code is running.
+-   `onClick` is guaranteed to run to completion before navigation starts,
+    but it is not async aware, so it should only be used if all of the code
+    in your callback function executes synchronously.
+
+-   `beforeNav` is guaranteed to run async operations before navigation
+    starts. You must return a promise from the callback function passed in
+    to this prop, and the navigation will happen after the promise
+    resolves. If the promise rejects, the navigation will not occur.
+    This prop should be used if it's important that the async code
+    completely finishes before the next URL starts loading.
+
+-   `safeWithNav` runs async code concurrently with navigation when safe,
+    but delays navigation until the async code is finished when
+    concurrent execution is not safe. You must return a promise from the
+    callback function passed in to this prop, and Wonder Blocks will run
+    the async code in parallel with client-side navigation or while opening
+    a new tab, but will wait until the async code finishes to start a
+    server-side navigation. If the promise rejects the navigation will
+    happen anyway. This prop should be used when it's okay to load
+    the next URL while the async callback code is running.
 
 This table gives an overview of the options:
 

__docs__/wonder-blocks-button/navigation-callbacks.stories.tsx

@@ -1,11 +1,10 @@
 import * as React from "react";
 import {MemoryRouter, Route, Switch} from "react-router-dom";
 
+import styles from "./button.stories.module.css";
 import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 
-import {styles} from "./button.stories";
-
 const BeforeNavCallbacks = () => (
     <MemoryRouter>
         <View style={styles.row}>

__docs__/wonder-blocks-core/view.stories.module.css

@@ -0,0 +1,23 @@
+.container {
+    background: var(--wb-color-offBlack8);
+    gap: var(--wb-spacing-medium_16);
+    padding: var(--wb-spacing-xLarge_32);
+}
+
+.view {
+    border: 1px dashed var(--wb-color-lightBlue);
+    gap: var(--wb-spacing-medium_16);
+    padding: var(--wb-spacing-medium_16);
+
+}
+
+.item {
+    background: var(--wb-color-offBlack32);
+    padding: var(--wb-spacing-medium_16);
+}
+
+.inlineStyles {
+    background: var(--wb-color-lightBlue);
+    border: 1px solid var(--wb-color-blue);
+    padding: var(--wb-spacing-xxxSmall_4);
+}

__docs__/wonder-blocks-core/view.stories.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
-import {StyleSheet} from "aphrodite";
+// import {css} from "aphrodite";
 import type {Meta, StoryObj} from "@storybook/react";
 
+import {cx} from "class-variance-authority";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {
     HeadingMedium,
     LabelMedium,
@@ -14,6 +15,8 @@
 import ComponentInfo from "../../.storybook/components/component-info";
 import viewArgTypes from "./view.argtypes";
 
+import styles from "./view.stories.module.css";
+
 export default {
     title: "Packages / Core / View",
     component: View,
@@ -46,20 +49,13 @@
 };
 
 export const InlineStyles: StoryComponentType = () => (
-    <View style={styles.container}>
-        <HeadingMedium>Hello, world!</HeadingMedium>
-        <View
-            style={[
-                styles.container,
-                {
-                    background: color.lightBlue,
-                    border: `1px solid ${color.blue}`,
-                    padding: spacing.xxxSmall_4,
-                },
-            ]}
-        >
-            The style prop can accept a (nested) array of Aphrodite styles and
-            inline styles.
+    <View>
+        <View style={styles.container}>
+            <HeadingMedium>Hello, world!</HeadingMedium>
+            <View style={cx([styles.container, styles.inlineStyles])}>
+                The style prop can accept a (nested) array of Aphrodite styles
+                and inline styles.
+            </View>
         </View>
     </View>
 );
@@ -75,7 +71,7 @@
 export const OtherProps: StoryComponentType = {
     name: "Using other props",
     render: () => (
-        <View style={styles.container}>
+        <View className={styles.container}>
             <View
                 onClick={() => {
                     // eslint-disable-next-line no-console
@@ -132,22 +128,3 @@
         },
     },
 };
-
-const styles = StyleSheet.create({
-    container: {
-        background: color.offBlack8,
-        gap: spacing.medium_16,
-        padding: spacing.xLarge_32,
-    },
-
-    view: {
-        border: `1px dashed ${color.lightBlue}`,
-        gap: spacing.medium_16,
-        padding: spacing.medium_16,
-    },
-
-    item: {
-        background: color.offBlack32,
-        padding: spacing.medium_16,
-    },
-});

__docs__/wonder-blocks-layout/strut.stories.module.css

@@ -0,0 +1,20 @@
+.row {
+    flex-direction: row;
+}
+
+.column {
+    flex-direction: column;
+}
+
+.strut {
+    align-self: center;
+    background-color: var(--wb-color-darkBlue);
+}
+
+.thin {
+    height: 4px;
+}
+
+.thick {
+    height: 8px;
+}