[WIP] FEI-5591: Experiment with Panda CSS - DO NOT REVIEW

.changeset/old-adults-admire.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-theming": minor
+---
+
+Add Panda preset

.changeset/plenty-dolls-refuse.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-layout": major
+---
+
+Migrate Strut to PandaCss

.changeset/polite-melons-peel.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-icon": major
+---
+
+Migrate PhosphorIcon to Panda CSS

.changeset/rare-actors-boil.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/wonder-blocks-form": major
+"@khanacademy/wonder-blocks-typography": major
+---
+
+Migrate TextField and Typography to PandaCSS

.changeset/sharp-nails-peel.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-progress-spinner": major
+---
+
+Migrate ProgressSpinner to Panda"

.changeset/small-parrots-smell.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-core": major
+---
+
+Use PandaCSS in View

.changeset/spotty-rivers-admire.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-button": major
+---
+
+Add panda support to Button (including theming)

.gitignore

@@ -7,3 +7,7 @@ storybook-static
 !.vscode
 .DS_Store
 yarn-error.log
+
+## Panda
+styled-system
+styled-system-studio

.storybook/index.css

@@ -0,0 +1,2 @@
+@layer reset, base, tokens, recipes, utilities;
+/* @layer utilities; */

.storybook/main.ts

@@ -34,6 +34,13 @@ const config: StorybookConfig = {
                             "../packages/wonder-blocks$1/src",
                         ),
                     },
+                    {
+                        find: /^\@\/styled-system\/([\w]+)/,
+                        replacement: resolve(
+                            __dirname,
+                            "../styled-system/$1",
+                        ),
+                    },
                 ],
             },
         });

.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 "./index.css";
+
 /**
  * WB Official breakpoints
  * @see https://khanacademy.atlassian.net/wiki/spaces/WB/pages/2099970518/Layout+Breakpoints

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

@@ -1,11 +1,11 @@
 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";
@@ -26,6 +26,8 @@
 
 import ButtonArgTypes from "./button.argtypes";
 import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
+import {SystemStyleObject} from "@/styled-system/types";
+import {css} from "@/styled-system/css";
 
 /**
  * Reusable button component.
@@ -132,35 +134,35 @@
     },
 };
 
-export const styles: StyleDeclaration = StyleSheet.create({
-    row: {
+export const styles: Record<string, SystemStyleObject> = {
+    row: css.raw({
         flexDirection: "row",
         alignItems: "center",
-        marginBottom: spacing.xSmall_8,
-    },
-    button: {
-        marginRight: spacing.xSmall_8,
-    },
-    truncatedButton: {
+        marginBottom: "xSmall_8",
+    }),
+    button: css.raw({
+        marginRight: "xSmall_8",
+    }),
+    truncatedButton: css.raw({
         maxWidth: 200,
-        marginBottom: spacing.medium_16,
-    },
-    fillSpace: {
+        marginBottom: "medium_16",
+    }),
+    fillSpace: css.raw({
         minWidth: 140,
-    },
-    example: {
-        background: color.offWhite,
-        padding: spacing.medium_16,
-    },
-    label: {
-        marginTop: spacing.large_24,
-        marginBottom: spacing.xSmall_8,
-    },
-});
+    }),
+    example: css.raw({
+        background: "offWhite",
+        padding: "medium_16",
+    }),
+    label: css.raw({
+        marginTop: "large_24",
+        marginBottom: "xSmall_8",
+    }),
+};
 
 export const Variants: StoryComponentType = () => (
-    <View style={{padding: spacing.medium_16, gap: spacing.medium_16}}>
-        <View style={{flexDirection: "row", gap: spacing.medium_16}}>
+    <View style={{padding: "medium_16", gap: "medium_16"}}>
+        <View style={{flexDirection: "row", gap: "medium_16"}}>
             <Button onClick={() => {}}>Hello, world!</Button>
             <Button onClick={() => {}} kind="secondary">
                 Hello, world!
@@ -169,7 +171,7 @@
                 Hello, world!
             </Button>
         </View>
-        <View style={{flexDirection: "row", gap: spacing.medium_16}}>
+        <View style={{flexDirection: "row", gap: "medium_16"}}>
             <Button onClick={() => {}} disabled={true}>
                 Hello, world!
             </Button>
@@ -180,7 +182,7 @@
                 Hello, world!
             </Button>
         </View>
-        <View style={{flexDirection: "row", gap: spacing.medium_16}}>
+        <View style={{flexDirection: "row", gap: "medium_16"}}>
             <Button onClick={() => {}} color="destructive">
                 Hello, world!
             </Button>
@@ -247,26 +249,28 @@
 };
 
 export const Dark: StoryComponentType = () => (
-    <View style={{backgroundColor: color.darkBlue, padding: spacing.medium_16}}>
-        <View style={{flexDirection: "row"}}>
+    <View
+        style={{
+            backgroundColor: "darkBlue",
+            padding: "medium_16",
+            gap: "medium_16",
+        }}
+    >
+        <View style={{flexDirection: "row", gap: "medium_16"}}>
             <Button onClick={() => {}} light={true}>
                 Hello, world!
             </Button>
-            <Strut size={16} />
             <Button onClick={() => {}} light={true} kind="secondary">
                 Hello, world!
             </Button>
-            <Strut size={16} />
             <Button onClick={() => {}} light={true} kind="tertiary">
                 Hello, world!
             </Button>
         </View>
-        <Strut size={16} />
-        <View style={{flexDirection: "row"}}>
+        <View style={{flexDirection: "row", gap: "medium_16"}}>
             <Button onClick={() => {}} light={true} disabled={true}>
                 Hello, world!
             </Button>
-            <Strut size={16} />
             <Button
                 onClick={() => {}}
                 light={true}
@@ -275,7 +279,6 @@
             >
                 Hello, world!
             </Button>
-            <Strut size={16} />
             <Button
                 onClick={() => {}}
                 light={true}
@@ -285,12 +288,10 @@
                 Hello, world!
             </Button>
         </View>
-        <Strut size={16} />
-        <View style={{flexDirection: "row"}}>
+        <View style={{flexDirection: "row", gap: "medium_16"}}>
             <Button onClick={() => {}} light={true} color="destructive">
                 Hello, world!
             </Button>
-            <Strut size={16} />
             <Button
                 onClick={() => {}}
                 light={true}
@@ -299,7 +300,6 @@
             >
                 Hello, world!
             </Button>
-            <Strut size={16} />
             <Button
                 onClick={() => {}}
                 light={true}
@@ -622,15 +622,15 @@
         },
     },
     render: (args: any) => (
-        <View style={{gap: spacing.medium_16}}>
+        <View style={{gap: "medium_16"}}>
             <HeadingSmall>Wonder Blocks theme (default)</HeadingSmall>
-            <View style={{flexDirection: "row", gap: spacing.medium_16}}>
+            <View style={{flexDirection: "row", gap: "medium_16"}}>
                 <Button {...args} kind="primary" />
                 <Button {...args} kind="secondary" />
                 <Button {...args} kind="tertiary" />
             </View>
             <HeadingSmall>Khanmigo theme</HeadingSmall>
-            <View style={{flexDirection: "row", gap: spacing.medium_16}}>
+            <View style={{flexDirection: "row", gap: "medium_16"}}>
                 <ThemeSwitcherContext.Provider value="khanmigo">
                     <Button {...args} kind="primary" />
                     <Button {...args} kind="secondary" />
@@ -758,7 +758,7 @@
 
         return (
             <ThemeSwitcherContext.Provider value="khanmigo">
-                <View style={{gap: spacing.medium_16}}>
+                <View style={{gap: "medium_16"}}>
                     {stories.map((Story, i) => (
                         <Story key={i} />
                     ))}

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

@@ -1,7 +1,13 @@
 import * as React from "react";
-import {StyleSheet} from "aphrodite";
+// import {StyleSheet} from "aphrodite";
 import type {Meta, StoryObj} from "@storybook/react";
 
+import {css} from "@/styled-system/css";
+// ISSUE(juan): Panda CSS does not support external files.
+// This is due to the fact that static analysis is not possible with external
+// references.
+// https://panda-css.com/docs/guides/dynamic-styling#what-you-cant-do
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {
     HeadingMedium,
@@ -51,11 +57,15 @@
         <View
             style={[
                 styles.container,
-                {
-                    background: color.lightBlue,
-                    border: `1px solid ${color.blue}`,
-                    padding: spacing.xxxSmall_4,
-                },
+                css.raw({
+                    background: "{colors.lightBlue}",
+                    // ISSUE(juan): shorthand property defined in view.tsx
+                    // will take precedence over the longhand property.
+                    // This means that the border will be 0px (instead of 1px).
+                    // https://panda-css.com/docs/concepts/writing-styles#property-conflicts
+                    border: "1px solid {colors.gold}",
+                    padding: 4,
+                }),
             ]}
         >
             The style prop can accept a (nested) array of Aphrodite styles and
@@ -133,21 +143,28 @@
     },
 };
 
-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,
-    },
-});
+const styles = {
+    // HACK(juan): css.raw needs to be used so that the compiler can identify
+    // that the tokens are being used and extract them via static analysis.
+    // https://panda-css.com/docs/guides/dynamic-styling#alternative
+    container: css.raw({
+        background: "offBlack8",
+        gap: "medium_16",
+        padding: "xLarge_32",
+    }),
+
+    view: css.raw({
+        // ISSUE(juan): shorthand property defined in view.tsx will take
+        // precedence over the longhand property. This means that the border
+        // will be 0px (instead of 1px).
+        // https://panda-css.com/docs/concepts/writing-styles#property-conflicts
+        border: `1px dashed {colors.lightBlue}`,
+        gap: "medium_16",
+        padding: "medium_16",
+    }),
+
+    item: css.raw({
+        background: "offBlack32",
+        padding: "medium_16",
+    }),
+};