fix!: Increase specificity on button styles

.eslintrc.js

@@ -94,6 +94,32 @@ module.exports = {
         "testing-library/no-node-access": "off",
       },
     },
+    {
+      files: ["./**/*.stories.{ts,tsx}"],
+      rules: {
+        "@typescript-eslint/no-restricted-imports": [
+          "error",
+          {
+            paths: [
+              {
+                name: "@faker-js/faker",
+                message: "Please use @faker-js/faker/locale/en instead.",
+                allowTypeImports: true,
+              },
+              {
+                name: "@mui/material",
+                message: "Please use @mui/material/<COMPONENT_NAME> instead.",
+                allowTypeImports: true,
+              },
+              // Note: @emotion/styled restrictions are not applied to story files
+            ],
+            patterns: [
+              // Note: @emotion/styled pattern restrictions are not applied to story files
+            ],
+          },
+        ],
+      },
+    },
   ],
 }
 
@@ -137,9 +163,25 @@ function restrictedImports({ paths = [], patterns = [] } = {}) {
             message: "Please use @mui/material/<COMPONENT_NAME> instead.",
             allowTypeImports: true,
           },
+          {
+            name: "@emotion/styled",
+            importNames: ["styled"],
+            message:
+              "Do not import 'styled' from @emotion/styled. Use 'styled' from '../StyleIsolation/StyleIsolation' (or relative path to StyleIsolation) instead. For components that need shouldForwardProp, use 'import { default as emotionStyled } from \"@emotion/styled\"'.",
+            allowTypeImports: true,
+          },
           ...paths,
         ],
-        patterns: [...patterns],
+        patterns: [
+          {
+            group: ["@emotion/styled"],
+            importNames: ["default"],
+            message:
+              "Do not use default import from @emotion/styled as 'styled'. Use 'styled' from '../StyleIsolation/StyleIsolation' instead. For components that need shouldForwardProp, use 'import { default as emotionStyled } from \"@emotion/styled\"'.",
+            allowTypeImports: true,
+          },
+          ...patterns,
+        ],
       },
     ],
   }

.github/workflows/ci.yml

@@ -45,7 +45,7 @@ jobs:
           cache-dependency-path: yarn.lock
 
       - name: Install dependencies
-        run: yarn install
+        run: yarn install --immutable && yarn msw init
 
       - name: Build Storybook
         run: yarn build-storybook

.github/workflows/publish-pages.yml

@@ -3,7 +3,7 @@ name: Publish Storybook
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: [main, cc/initial]
+    branches: [main]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -21,8 +21,8 @@ jobs:
           cache: yarn
           cache-dependency-path: yarn.lock
 
-      - name: Install dependencies
-        run: yarn install
+      - name: Install dependencies & Initialize
+        run: yarn install --immutable && yarn msw init
 
       - name: Build Storybook
         run: yarn build-storybook

.storybook/main.ts

@@ -2,12 +2,26 @@ import { StorybookConfig } from "@storybook/react-webpack5"
 import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin"
 import { exec as execCb } from "child_process"
 import { promisify } from "util"
+import * as fs from "fs"
+import * as path from "path"
 
 const exec = promisify(execCb)
 const getGitSha = async (): Promise<string> => {
   const { stdout } = await exec("git rev-parse HEAD")
   return stdout.trim()
 }
+// We have postinstall hooks disabled, so ensure that MSW is initialized
+const serviceWorkerPath = path.join(
+  process.cwd(),
+  "storybook-public",
+  "mockServiceWorker.js",
+)
+if (!fs.existsSync(serviceWorkerPath)) {
+  console.error(
+    "mockServiceWorker.js not found at storybook-public/mockServiceWorker.js. Please run 'yarn msw init storybook-public' to initialize MSW.",
+  )
+  process.exit(1)
+}
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.tsx"],

bundle-preview/bundle-ai-chat-canvas-styles.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AI Chat - Canvas Styles Isolation</title>
+    <link
+      rel="stylesheet"
+      href="https://du11hjcvx0uqb.cloudfront.net/dist/brandable_css/new_styles_normal_contrast/bundles/common-b1f4c00140.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://courses.learn.mit.edu/static/mitxonline/css/lms-main-v1.74535dae9600.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://courses.learn.mit.edu/static/mitxonline/css/lms-course.53e9aeb4ede6.css"
+    />
+  </head>
+  <body>
+    <div id="ai-chat-container"></div>
+    <script type="module">
+      import * as aiChat from "./static/bundles/aiChat.es.js"
+
+      const requestOpts = {
+        apiUrl: "https://api.rc.learn.mit.edu/ai/http/demo_canvas_tutor_agent/",
+        transformBody: (messages, { problem_set_title }) => {
+          const body = {
+            message: messages[messages.length - 1].content,
+            run_readable_id: "14566-kaleba:20211202+canvas",
+            problem_set_title: problem_set_title || "Deliverable 6 - 15.060",
+          }
+          return body
+        },
+      }
+
+      aiChat.init(
+        {
+          requestOpts,
+          entryScreenEnabled: false,
+          initialMessages: [
+            {
+              role: "assistant",
+              content:
+                "This page applies page styles from Canvas to demonstrate style isolation. How can I help you today?",
+            },
+          ],
+        },
+        {
+          container: document.getElementById("ai-chat-container"),
+        },
+      )
+    </script>
+  </body>
+</html>

bundle-preview/bundle-ai-drawer-canvas-styles.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Home</title>
+    <style>
+      .app-frame {
+        width: 600px;
+        max-width: 50vw;
+        height: 400px;
+      }
+    </style>
+    <link
+      rel="stylesheet"
+      href="https://du11hjcvx0uqb.cloudfront.net/dist/brandable_css/new_styles_normal_contrast/bundles/common-b1f4c00140.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://courses.learn.mit.edu/static/mitxonline/css/lms-main-v1.74535dae9600.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://courses.learn.mit.edu/static/mitxonline/css/lms-course.53e9aeb4ede6.css"
+    />
+  </head>
+  <body>
+    <iframe class="app-frame" src="./iframe.html"></iframe>
+  </body>
+  <script type="module">
+    import * as aiDrawerManager from "./static/bundles/aiDrawerManager.es.js"
+    /**
+     * Accepts options of https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-ai-aidrawermanager--docs
+     */
+    aiDrawerManager.init({
+      messageOrigin: window.location.origin, // iframe is served in same origin for this demo,
+      transformBody: (messages) => ({
+        message: messages[messages.length - 1].content,
+      }),
+      className: "ai-chat",
+    })
+  </script>
+</html>