parent 4da1223

author Kayla Washburn <mckayla@hey.com> 1696014497 -0600 committer McKayla Washburn <mckayla@hey.com> 1696014979 +0000 parent 4da1223 author Kayla Washburn <mckayla@hey.com> 1696014497 -0600 committer McKayla Washburn <mckayla@hey.com> 1696014955 +0000 parent 4da1223 author Kayla Washburn <mckayla@hey.com> 1696014497 -0600 committer McKayla Washburn <mckayla@hey.com> 1696014933 +0000 parent 4da1223 author Kayla Washburn <mckayla@hey.com> 1696014497 -0600 committer McKayla Washburn <mckayla@hey.com> 1696014828 +0000 refactor: start using emotion for styling (#9909) get emotional apologize to the json gods `make gen` fix types this is killing me fancy `Theme` shenanigans >:( caught some mistakes do a couple more (to fix storybook) 🤬 fix linting
coder · aslilac · Oct 2, 2023 · Sep 29, 2023 · Sep 29, 2023 · Sep 29, 2023
commit 949c0101ad603a044f5d750c284d51f892040aeb
diff --git a/.gitignore b/.gitignore
@@ -30,15 +30,14 @@ site/e2e/states/*.json
 site/e2e/.auth.json
 site/playwright-report/*
 site/.swc
-site/dist/
 
 # Make target for updating golden files (any dir).
 .gen-golden
 
 # Build
-/build/
-/dist/
-site/out/
+build/
+dist/
+out/
 
 # Bundle analysis
 site/stats/

diff --git a/.prettierignore b/.prettierignore
@@ -33,15 +33,14 @@ site/e2e/states/*.json
 site/e2e/.auth.json
 site/playwright-report/*
 site/.swc
-site/dist/
 
 # Make target for updating golden files (any dir).
 .gen-golden
 
 # Build
-/build/
-/dist/
-site/out/
+build/
+dist/
+out/
 
 # Bundle analysis
 site/stats/

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -186,9 +186,6 @@
     ]
   },
   "eslint.workingDirectories": ["./site"],
-  "files.exclude": {
-    "**/node_modules": true
-  },
   "search.exclude": {
     "**.pb.go": true,
     "**/*.gen.json": true,
@@ -198,7 +195,11 @@
     "docs/api/*.md": true,
     "docs/templates/*.md": true,
     "LICENSE": true,
-    "scripts/metricsdocgen/metrics": true
+    "scripts/metricsdocgen/metrics": true,
+    "site/out/**": true,
+    "site/storybook-static/**": true,
+    "**.map": true,
+    "pnpm-lock.yaml": true
   },
   // Ensure files always have a newline.
   "files.insertFinalNewline": true,

diff --git a/Makefile b/Makefile
@@ -107,9 +107,9 @@ endif
 
 
 clean:
-	rm -rf build site/out
-	mkdir -p build site/out/bin
-	git restore site/out
+	rm -rf build/ site/build/ site/out/
+	mkdir -p build/ site/out/bin/
+	git restore site/out/
 .PHONY: clean
 
 build-slim: $(CODER_SLIM_BINARIES)

diff --git a/site/.eslintignore b/site/.eslintignore
@@ -33,14 +33,13 @@ e2e/states/*.json
 e2e/.auth.json
 playwright-report/*
 .swc
-dist/
 
 # Make target for updating golden files (any dir).
 .gen-golden
 
 # Build
-../build/
-../dist/
+build/
+dist/
 out/
 
 # Bundle analysis

diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml
@@ -156,6 +156,7 @@ rules:
   # https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#eslint
   react/jsx-key: error
   react/jsx-uses-react: "off"
+  react/no-unknown-property: ["error", { ignore: ["css"] }]
   react/react-in-jsx-scope: "off"
   "unicorn/explicit-length-check": "error"
   # https://github.com/jsx-eslint/eslint-plugin-react/issues/2628#issuecomment-984160944

diff --git a/site/.prettierignore b/site/.prettierignore
@@ -33,14 +33,13 @@ e2e/states/*.json
 e2e/.auth.json
 playwright-report/*
 .swc
-dist/
 
 # Make target for updating golden files (any dir).
 .gen-golden
 
 # Build
-../build/
-../dist/
+build/
+dist/
 out/
 
 # Bundle analysis

diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx
@@ -1,18 +1,24 @@
 import CssBaseline from "@mui/material/CssBaseline";
-import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
+import {
+  StyledEngineProvider,
+  ThemeProvider as MuiThemeProvider,
+} from "@mui/material/styles";
+import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import { withRouter } from "storybook-addon-react-router-v6";
 import { HelmetProvider } from "react-helmet-async";
-import { dark } from "../src/theme";
-import "../src/theme/globalFonts";
+import { dark } from "theme";
+import "theme/globalFonts";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 export const decorators = [
   (Story) => (
     <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={dark}>
-        <CssBaseline />
-        <Story />
-      </ThemeProvider>
+      <MuiThemeProvider theme={dark}>
+        <EmotionThemeProvider theme={dark}>
+          <CssBaseline />
+          <Story />
+        </EmotionThemeProvider>
+      </MuiThemeProvider>
     </StyledEngineProvider>
   ),
   withRouter,

diff --git a/site/jest.setup.ts b/site/jest.setup.ts
@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom";
 import { cleanup } from "@testing-library/react";
 import crypto from "crypto";
-import { server } from "./src/testHelpers/server";
+import { server } from "testHelpers/server";
 import "jest-location-mock";
 import { TextEncoder, TextDecoder } from "util";
 import { Blob } from "buffer";

diff --git a/site/package.json b/site/package.json
@@ -33,6 +33,7 @@
   "dependencies": {
     "@emoji-mart/data": "1.1.2",
     "@emoji-mart/react": "1.0.1",
+    "@emotion/css": "11.11.2",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@fastly/performance-observer-polyfill": "2.0.0",
@@ -45,11 +46,6 @@
     "@mui/styles": "5.14.0",
     "@mui/system": "5.14.0",
     "@tanstack/react-query": "4.35.3",
-    "@types/color-convert": "2.0.0",
-    "@types/lodash": "4.14.196",
-    "@types/react-color": "3.0.6",
-    "@types/react-date-range": "1.4.4",
-    "@types/semver": "7.5.0",
     "@vitejs/plugin-react": "4.0.1",
     "@xstate/inspect": "0.8.0",
     "@xstate/react": "3.2.1",
@@ -121,15 +117,20 @@
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.5.1",
     "@types/chroma-js": "2.4.0",
+    "@types/color-convert": "2.0.0",
     "@types/express": "4.17.17",
     "@types/jest": "29.5.2",
+    "@types/lodash": "4.14.196",
     "@types/node": "18.17.0",
     "@types/react": "18.2.6",
+    "@types/react-color": "3.0.6",
+    "@types/react-date-range": "1.4.4",
     "@types/react-dom": "18.2.4",
     "@types/react-helmet": "6.1.5",
     "@types/react-syntax-highlighter": "15.5.5",
     "@types/react-virtualized-auto-sizer": "1.0.1",
     "@types/react-window": "1.8.5",
+    "@types/semver": "7.5.0",
     "@types/ssh2": "1.11.13",
     "@types/ua-parser-js": "0.7.36",
     "@types/uuid": "9.0.2",