mirror of https://github.com/coder/coder.git
refactor: start using emotion for styling (#9909)
This commit is contained in:
Kayla Washburn
GitHub
parent
4da1223a80
commit
2b5428e95f
|
|
@ -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/
|
||||
|
|
|
|||
|
|
@ -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/
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
6
Makefile
6
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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -15,6 +15,9 @@ dependencies:
|
|||
'@emoji-mart/react':
|
||||
specifier: 1.0.1
|
||||
version: 1.0.1(emoji-mart@5.4.0)(react@18.2.0)
|
||||
'@emotion/css':
|
||||
specifier: 11.11.2
|
||||
version: 11.11.2
|
||||
'@emotion/react':
|
||||
specifier: 11.11.1
|
||||
version: 11.11.1(@types/react@18.2.6)(react@18.2.0)
|
||||
|
|
@ -51,21 +54,6 @@ dependencies:
|
|||
'@tanstack/react-query':
|
||||
specifier: 4.35.3
|
||||
version: 4.35.3(react-dom@18.2.0)(react@18.2.0)
|
||||
'@types/color-convert':
|
||||
specifier: 2.0.0
|
||||
version: 2.0.0
|
||||
'@types/lodash':
|
||||
specifier: 4.14.196
|
||||
version: 4.14.196
|
||||
'@types/react-color':
|
||||
specifier: 3.0.6
|
||||
version: 3.0.6
|
||||
'@types/react-date-range':
|
||||
specifier: 1.4.4
|
||||
version: 1.4.4
|
||||
'@types/semver':
|
||||
specifier: 7.5.0
|
||||
version: 7.5.0
|
||||
'@vitejs/plugin-react':
|
||||
specifier: 4.0.1
|
||||
version: 4.0.1(vite@4.4.2)
|
||||
|
|
@ -275,18 +263,30 @@ devDependencies:
|
|||
'@types/chroma-js':
|
||||
specifier: 2.4.0
|
||||
version: 2.4.0
|
||||
'@types/color-convert':
|
||||
specifier: 2.0.0
|
||||
version: 2.0.0
|
||||
'@types/express':
|
||||
specifier: 4.17.17
|
||||
version: 4.17.17
|
||||
'@types/jest':
|
||||
specifier: 29.5.2
|
||||
version: 29.5.2
|
||||
'@types/lodash':
|
||||
specifier: 4.14.196
|
||||
version: 4.14.196
|
||||
'@types/node':
|
||||
specifier: 18.17.0
|
||||
version: 18.17.0
|
||||
'@types/react':
|
||||
specifier: 18.2.6
|
||||
version: 18.2.6
|
||||
'@types/react-color':
|
||||
specifier: 3.0.6
|
||||
version: 3.0.6
|
||||
'@types/react-date-range':
|
||||
specifier: 1.4.4
|
||||
version: 1.4.4
|
||||
'@types/react-dom':
|
||||
specifier: 18.2.4
|
||||
version: 18.2.4
|
||||
|
|
@ -302,6 +302,9 @@ devDependencies:
|
|||
'@types/react-window':
|
||||
specifier: 1.8.5
|
||||
version: 1.8.5
|
||||
'@types/semver':
|
||||
specifier: 7.5.0
|
||||
version: 7.5.0
|
||||
'@types/ssh2':
|
||||
specifier: 1.11.13
|
||||
version: 1.11.13
|
||||
|
|
@ -475,7 +478,7 @@ packages:
|
|||
'@babel/parser': 7.22.14
|
||||
'@babel/template': 7.22.5
|
||||
'@babel/traverse': 7.22.11
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
convert-source-map: 1.9.0
|
||||
debug: 4.3.4
|
||||
gensync: 1.0.0-beta.2
|
||||
|
|
@ -498,7 +501,7 @@ packages:
|
|||
'@babel/parser': 7.22.14
|
||||
'@babel/template': 7.22.5
|
||||
'@babel/traverse': 7.22.11
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
convert-source-map: 1.9.0
|
||||
debug: 4.3.4
|
||||
gensync: 1.0.0-beta.2
|
||||
|
|
@ -511,7 +514,7 @@ packages:
|
|||
resolution: {integrity: sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
'@jridgewell/gen-mapping': 0.3.3
|
||||
'@jridgewell/trace-mapping': 0.3.19
|
||||
jsesc: 2.5.2
|
||||
|
|
@ -520,14 +523,14 @@ packages:
|
|||
resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
dev: true
|
||||
|
||||
/@babel/helper-builder-binary-assignment-operator-visitor@7.22.10:
|
||||
resolution: {integrity: sha512-Av0qubwDQxC56DoUReVDeLfMEjYYSN1nZrTUrWkXd7hpU73ymRANkbuDm3yni9npkn+RXy9nNbEJZEzXr7xrfQ==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
dev: true
|
||||
|
||||
/@babel/helper-compilation-targets@7.22.10:
|
||||
|
|
@ -612,26 +615,26 @@ packages:
|
|||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
'@babel/template': 7.22.5
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
|
||||
/@babel/helper-hoist-variables@7.22.5:
|
||||
resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
|
||||
/@babel/helper-member-expression-to-functions@7.22.5:
|
||||
resolution: {integrity: sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
dev: true
|
||||
|
||||
/@babel/helper-module-imports@7.22.5:
|
||||
resolution: {integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
|
||||
/@babel/helper-module-transforms@7.22.9(@babel/core@7.22.11):
|
||||
resolution: {integrity: sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==}
|
||||
|
|
@ -644,7 +647,7 @@ packages:
|
|||
'@babel/helper-module-imports': 7.22.5
|
||||
'@babel/helper-simple-access': 7.22.5
|
||||
'@babel/helper-split-export-declaration': 7.22.6
|
||||
'@babel/helper-validator-identifier': 7.22.5
|
||||
'@babel/helper-validator-identifier': 7.22.20
|
||||
dev: true
|
||||
|
||||
/@babel/helper-module-transforms@7.22.9(@babel/core@7.22.9):
|
||||
|
|
@ -658,13 +661,13 @@ packages:
|
|||
'@babel/helper-module-imports': 7.22.5
|
||||
'@babel/helper-simple-access': 7.22.5
|
||||
'@babel/helper-split-export-declaration': 7.22.6
|
||||
'@babel/helper-validator-identifier': 7.22.5
|
||||
'@babel/helper-validator-identifier': 7.22.20
|
||||
|
||||
/@babel/helper-optimise-call-expression@7.22.5:
|
||||
resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
dev: true
|
||||
|
||||
/@babel/helper-plugin-utils@7.22.5:
|
||||
|
|
@ -699,20 +702,20 @@ packages:
|
|||
resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
|
||||
/@babel/helper-skip-transparent-expression-wrappers@7.22.5:
|
||||
resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
dev: true
|
||||
|
||||
/@babel/helper-split-export-declaration@7.22.6:
|
||||
resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
|
||||
/@babel/helper-string-parser@7.22.5:
|
||||
resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
|
||||
|
|
@ -721,11 +724,11 @@ packages:
|
|||
/@babel/helper-validator-identifier@7.22.20:
|
||||
resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dev: true
|
||||
|
||||
/@babel/helper-validator-identifier@7.22.5:
|
||||
resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dev: true
|
||||
|
||||
/@babel/helper-validator-option@7.22.5:
|
||||
resolution: {integrity: sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==}
|
||||
|
|
@ -737,7 +740,7 @@ packages:
|
|||
dependencies:
|
||||
'@babel/helper-function-name': 7.22.5
|
||||
'@babel/template': 7.22.5
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
dev: true
|
||||
|
||||
/@babel/helpers@7.22.11:
|
||||
|
|
@ -746,7 +749,7 @@ packages:
|
|||
dependencies:
|
||||
'@babel/template': 7.22.5
|
||||
'@babel/traverse': 7.22.11
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
|
|
@ -754,7 +757,7 @@ packages:
|
|||
resolution: {integrity: sha512-C/BaXcnnvBCmHTpz/VGZ8jgtE2aYlW4hxDhseJAWZb7gqGM/qtCK6iZUb0TyKFf7BOUsBH7Q7fkRsDRhg1XklQ==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
'@babel/helper-validator-identifier': 7.22.5
|
||||
'@babel/helper-validator-identifier': 7.22.20
|
||||
chalk: 2.4.2
|
||||
js-tokens: 4.0.0
|
||||
|
||||
|
|
@ -763,7 +766,7 @@ packages:
|
|||
engines: {node: '>=6.0.0'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
|
||||
/@babel/parser@7.22.16:
|
||||
resolution: {integrity: sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA==}
|
||||
|
|
@ -1437,7 +1440,7 @@ packages:
|
|||
'@babel/helper-hoist-variables': 7.22.5
|
||||
'@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.9)
|
||||
'@babel/helper-plugin-utils': 7.22.5
|
||||
'@babel/helper-validator-identifier': 7.22.5
|
||||
'@babel/helper-validator-identifier': 7.22.20
|
||||
dev: true
|
||||
|
||||
/@babel/plugin-transform-modules-umd@7.22.5(@babel/core@7.22.9):
|
||||
|
|
@ -1835,7 +1838,7 @@ packages:
|
|||
'@babel/plugin-transform-unicode-regex': 7.22.5(@babel/core@7.22.9)
|
||||
'@babel/plugin-transform-unicode-sets-regex': 7.22.5(@babel/core@7.22.9)
|
||||
'@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.22.9)
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
babel-plugin-polyfill-corejs2: 0.4.5(@babel/core@7.22.9)
|
||||
babel-plugin-polyfill-corejs3: 0.8.3(@babel/core@7.22.9)
|
||||
babel-plugin-polyfill-regenerator: 0.5.2(@babel/core@7.22.9)
|
||||
|
|
@ -1926,7 +1929,7 @@ packages:
|
|||
'@babel/plugin-transform-unicode-regex': 7.22.5(@babel/core@7.22.9)
|
||||
'@babel/plugin-transform-unicode-sets-regex': 7.22.5(@babel/core@7.22.9)
|
||||
'@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.22.9)
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
babel-plugin-polyfill-corejs2: 0.4.5(@babel/core@7.22.9)
|
||||
babel-plugin-polyfill-corejs3: 0.8.3(@babel/core@7.22.9)
|
||||
babel-plugin-polyfill-regenerator: 0.5.2(@babel/core@7.22.9)
|
||||
|
|
@ -1955,7 +1958,7 @@ packages:
|
|||
dependencies:
|
||||
'@babel/core': 7.22.9
|
||||
'@babel/helper-plugin-utils': 7.22.5
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
esutils: 2.0.3
|
||||
dev: true
|
||||
|
||||
|
|
@ -1996,13 +1999,13 @@ packages:
|
|||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
regenerator-runtime: 0.14.0
|
||||
dev: true
|
||||
|
||||
/@babel/runtime@7.22.15:
|
||||
resolution: {integrity: sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
regenerator-runtime: 0.14.0
|
||||
dev: true
|
||||
|
||||
/@babel/runtime@7.22.6:
|
||||
resolution: {integrity: sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==}
|
||||
|
|
@ -2016,7 +2019,7 @@ packages:
|
|||
dependencies:
|
||||
'@babel/code-frame': 7.22.13
|
||||
'@babel/parser': 7.22.14
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
|
||||
/@babel/traverse@7.22.11:
|
||||
resolution: {integrity: sha512-mzAenteTfomcB7mfPtyi+4oe5BZ6MXxWcn4CX+h4IRJ+OOGXBrWU6jDQavkQI9Vuc5P+donFabBfFCcmWka9lQ==}
|
||||
|
|
@ -2029,20 +2032,12 @@ packages:
|
|||
'@babel/helper-hoist-variables': 7.22.5
|
||||
'@babel/helper-split-export-declaration': 7.22.6
|
||||
'@babel/parser': 7.22.14
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
debug: 4.3.4
|
||||
globals: 11.12.0
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
/@babel/types@7.22.11:
|
||||
resolution: {integrity: sha512-siazHiGuZRz9aB9NpHy9GOs9xiQPKnMzgdr493iI1M67vRXpnEq8ZOOKzezC5q7zwuQ6sDhdSp4SD9ixKSqKZg==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
dependencies:
|
||||
'@babel/helper-string-parser': 7.22.5
|
||||
'@babel/helper-validator-identifier': 7.22.5
|
||||
to-fast-properties: 2.0.0
|
||||
|
||||
/@babel/types@7.22.19:
|
||||
resolution: {integrity: sha512-P7LAw/LbojPzkgp5oznjE6tQEIWbp4PkkfrZDINTro9zgBRtI324/EYsiSI7lhPbpIQ+DCeR2NNmMWANGGfZsg==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
|
|
@ -2050,7 +2045,6 @@ packages:
|
|||
'@babel/helper-string-parser': 7.22.5
|
||||
'@babel/helper-validator-identifier': 7.22.20
|
||||
to-fast-properties: 2.0.0
|
||||
dev: true
|
||||
|
||||
/@base2/pretty-print-object@1.0.1:
|
||||
resolution: {integrity: sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==}
|
||||
|
|
@ -2097,7 +2091,7 @@ packages:
|
|||
resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
|
||||
dependencies:
|
||||
'@babel/helper-module-imports': 7.22.5
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@emotion/hash': 0.9.1
|
||||
'@emotion/memoize': 0.8.1
|
||||
'@emotion/serialize': 1.1.2
|
||||
|
|
@ -2119,6 +2113,16 @@ packages:
|
|||
stylis: 4.2.0
|
||||
dev: false
|
||||
|
||||
/@emotion/css@11.11.2:
|
||||
resolution: {integrity: sha512-VJxe1ucoMYMS7DkiMdC2T7PWNbrEI0a39YRiyDvK2qq4lXwjRbVP/z4lpG+odCsRzadlR+1ywwrTzhdm5HNdew==}
|
||||
dependencies:
|
||||
'@emotion/babel-plugin': 11.11.0
|
||||
'@emotion/cache': 11.11.0
|
||||
'@emotion/serialize': 1.1.2
|
||||
'@emotion/sheet': 1.2.2
|
||||
'@emotion/utils': 1.2.1
|
||||
dev: false
|
||||
|
||||
/@emotion/hash@0.9.1:
|
||||
resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
|
||||
dev: false
|
||||
|
|
@ -3103,7 +3107,7 @@ packages:
|
|||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@emotion/is-prop-valid': 1.2.1
|
||||
'@mui/types': 7.2.4(@types/react@18.2.6)
|
||||
'@mui/utils': 5.14.3(react@18.2.0)
|
||||
|
|
@ -3127,7 +3131,7 @@ packages:
|
|||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@emotion/is-prop-valid': 1.2.1
|
||||
'@mui/types': 7.2.4(@types/react@18.2.6)
|
||||
'@mui/utils': 5.14.3(react@18.2.0)
|
||||
|
|
@ -3241,7 +3245,7 @@ packages:
|
|||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@mui/utils': 5.14.3(react@18.2.0)
|
||||
'@types/react': 18.2.6
|
||||
prop-types: 15.8.1
|
||||
|
|
@ -3261,7 +3265,7 @@ packages:
|
|||
'@emotion/styled':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@emotion/cache': 11.11.0
|
||||
'@emotion/react': 11.11.1(@types/react@18.2.6)(react@18.2.0)
|
||||
'@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.6)(react@18.2.0)
|
||||
|
|
@ -3348,7 +3352,7 @@ packages:
|
|||
peerDependencies:
|
||||
react: ^17.0.0 || ^18.0.0
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@types/prop-types': 15.7.5
|
||||
'@types/react-is': 18.2.1
|
||||
prop-types: 15.8.1
|
||||
|
|
@ -3362,7 +3366,7 @@ packages:
|
|||
peerDependencies:
|
||||
react: ^17.0.0 || ^18.0.0
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@types/prop-types': 15.7.5
|
||||
'@types/react-is': 18.2.1
|
||||
prop-types: 15.8.1
|
||||
|
|
@ -3465,13 +3469,13 @@ packages:
|
|||
/@radix-ui/number@1.0.1:
|
||||
resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
dev: true
|
||||
|
||||
/@radix-ui/primitive@1.0.1:
|
||||
resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
dev: true
|
||||
|
||||
/@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0):
|
||||
|
|
@ -3487,7 +3491,7 @@ packages:
|
|||
'@types/react-dom':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
|
||||
'@types/react': 18.2.6
|
||||
'@types/react-dom': 18.2.4
|
||||
|
|
@ -3508,7 +3512,7 @@ packages:
|
|||
'@types/react-dom':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@18.2.0)
|
||||
'@radix-ui/react-context': 1.0.1(@types/react@18.2.6)(react@18.2.0)
|
||||
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
|
||||
|
|
@ -3528,7 +3532,7 @@ packages:
|
|||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@types/react': 18.2.6
|
||||
react: 18.2.0
|
||||
dev: true
|
||||
|
|
@ -3542,7 +3546,7 @@ packages:
|
|||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@types/react': 18.2.6
|
||||
react: 18.2.0
|
||||
dev: true
|
||||
|
|
@ -3556,7 +3560,7 @@ packages:
|
|||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@types/react': 18.2.6
|
||||
react: 18.2.0
|
||||
dev: true
|
||||
|
|
@ -3574,7 +3578,7 @@ packages:
|
|||
'@types/react-dom':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@radix-ui/primitive': 1.0.1
|
||||
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@18.2.0)
|
||||
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
|
||||
|
|
@ -3595,7 +3599,7 @@ packages:
|
|||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@types/react': 18.2.6
|
||||
react: 18.2.0
|
||||
dev: true
|
||||
|
|
@ -3613,7 +3617,7 @@ packages:
|
|||
'@types/react-dom':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@18.2.0)
|
||||
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
|
||||
'@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.6)(react@18.2.0)
|
||||
|
|
@ -3632,7 +3636,7 @@ packages:
|
|||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.6)(react@18.2.0)
|
||||
'@types/react': 18.2.6
|
||||
react: 18.2.0
|
||||
|
|
@ -3651,7 +3655,7 @@ packages:
|
|||
'@types/react-dom':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@floating-ui/react-dom': 2.0.2(react-dom@18.2.0)(react@18.2.0)
|
||||
'@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
|
||||
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@18.2.0)
|
||||
|
|
@ -3681,7 +3685,7 @@ packages:
|
|||
'@types/react-dom':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
|
||||
'@types/react': 18.2.6
|
||||
'@types/react-dom': 18.2.4
|
||||
|
|
@ -3702,7 +3706,7 @@ packages:
|
|||
'@types/react-dom':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@radix-ui/react-slot': 1.0.2(@types/react@18.2.6)(react@18.2.0)
|
||||
'@types/react': 18.2.6
|
||||
'@types/react-dom': 18.2.4
|
||||
|
|
@ -3723,7 +3727,7 @@ packages:
|
|||
'@types/react-dom':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@radix-ui/primitive': 1.0.1
|
||||
'@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
|
||||
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@18.2.0)
|
||||
|
|
@ -3752,7 +3756,7 @@ packages:
|
|||
'@types/react-dom':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@radix-ui/number': 1.0.1
|
||||
'@radix-ui/primitive': 1.0.1
|
||||
'@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
|
||||
|
|
@ -3793,7 +3797,7 @@ packages:
|
|||
'@types/react-dom':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
|
||||
'@types/react': 18.2.6
|
||||
'@types/react-dom': 18.2.4
|
||||
|
|
@ -3810,7 +3814,7 @@ packages:
|
|||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.6)(react@18.2.0)
|
||||
'@types/react': 18.2.6
|
||||
react: 18.2.0
|
||||
|
|
@ -3829,7 +3833,7 @@ packages:
|
|||
'@types/react-dom':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@radix-ui/primitive': 1.0.1
|
||||
'@radix-ui/react-context': 1.0.1(@types/react@18.2.6)(react@18.2.0)
|
||||
'@radix-ui/react-direction': 1.0.1(@types/react@18.2.6)(react@18.2.0)
|
||||
|
|
@ -3856,7 +3860,7 @@ packages:
|
|||
'@types/react-dom':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@radix-ui/primitive': 1.0.1
|
||||
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
|
||||
'@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.6)(react@18.2.0)
|
||||
|
|
@ -3879,7 +3883,7 @@ packages:
|
|||
'@types/react-dom':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@radix-ui/primitive': 1.0.1
|
||||
'@radix-ui/react-context': 1.0.1(@types/react@18.2.6)(react@18.2.0)
|
||||
'@radix-ui/react-direction': 1.0.1(@types/react@18.2.6)(react@18.2.0)
|
||||
|
|
@ -3902,7 +3906,7 @@ packages:
|
|||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@types/react': 18.2.6
|
||||
react: 18.2.0
|
||||
dev: true
|
||||
|
|
@ -3916,7 +3920,7 @@ packages:
|
|||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.6)(react@18.2.0)
|
||||
'@types/react': 18.2.6
|
||||
react: 18.2.0
|
||||
|
|
@ -3931,7 +3935,7 @@ packages:
|
|||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.6)(react@18.2.0)
|
||||
'@types/react': 18.2.6
|
||||
react: 18.2.0
|
||||
|
|
@ -3946,7 +3950,7 @@ packages:
|
|||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@types/react': 18.2.6
|
||||
react: 18.2.0
|
||||
dev: true
|
||||
|
|
@ -3960,7 +3964,7 @@ packages:
|
|||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@types/react': 18.2.6
|
||||
react: 18.2.0
|
||||
dev: true
|
||||
|
|
@ -3974,7 +3978,7 @@ packages:
|
|||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@radix-ui/rect': 1.0.1
|
||||
'@types/react': 18.2.6
|
||||
react: 18.2.0
|
||||
|
|
@ -3989,7 +3993,7 @@ packages:
|
|||
'@types/react':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.6)(react@18.2.0)
|
||||
'@types/react': 18.2.6
|
||||
react: 18.2.0
|
||||
|
|
@ -4008,7 +4012,7 @@ packages:
|
|||
'@types/react-dom':
|
||||
optional: true
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
|
||||
'@types/react': 18.2.6
|
||||
'@types/react-dom': 18.2.4
|
||||
|
|
@ -4019,7 +4023,7 @@ packages:
|
|||
/@radix-ui/rect@1.0.1:
|
||||
resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
dev: true
|
||||
|
||||
/@remix-run/router@1.9.0:
|
||||
|
|
@ -4580,7 +4584,7 @@ packages:
|
|||
dependencies:
|
||||
'@babel/core': 7.22.11
|
||||
'@babel/preset-env': 7.22.14(@babel/core@7.22.9)
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
'@ndelangen/get-tarball': 3.0.9
|
||||
'@storybook/codemod': 7.4.0
|
||||
'@storybook/core-common': 7.4.0
|
||||
|
|
@ -4649,7 +4653,7 @@ packages:
|
|||
dependencies:
|
||||
'@babel/core': 7.22.11
|
||||
'@babel/preset-env': 7.22.14(@babel/core@7.22.11)
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
'@storybook/csf': 0.1.1
|
||||
'@storybook/csf-tools': 7.4.0
|
||||
'@storybook/node-logger': 7.4.0
|
||||
|
|
@ -4864,7 +4868,7 @@ packages:
|
|||
'@babel/generator': 7.22.10
|
||||
'@babel/parser': 7.22.14
|
||||
'@babel/traverse': 7.22.11
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
'@storybook/csf': 0.1.1
|
||||
'@storybook/types': 7.4.0
|
||||
fs-extra: 11.1.1
|
||||
|
|
@ -5390,7 +5394,7 @@ packages:
|
|||
engines: {node: '>=14'}
|
||||
dependencies:
|
||||
'@babel/code-frame': 7.22.13
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
'@types/aria-query': 5.0.1
|
||||
aria-query: 5.1.3
|
||||
chalk: 4.1.2
|
||||
|
|
@ -5527,7 +5531,7 @@ packages:
|
|||
resolution: {integrity: sha512-aACu/U/omhdk15O4Nfb+fHgH/z3QsfQzpnvRZhYhThms83ZnAOZz7zZAWO7mn2yyNQaA4xTO8GLK3uqFU4bYYw==}
|
||||
dependencies:
|
||||
'@babel/parser': 7.22.14
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
'@types/babel__generator': 7.6.4
|
||||
'@types/babel__template': 7.4.1
|
||||
'@types/babel__traverse': 7.20.1
|
||||
|
|
@ -5546,7 +5550,7 @@ packages:
|
|||
/@types/babel__generator@7.6.4:
|
||||
resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==}
|
||||
dependencies:
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
dev: true
|
||||
|
||||
/@types/babel__generator@7.6.5:
|
||||
|
|
@ -5559,7 +5563,7 @@ packages:
|
|||
resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==}
|
||||
dependencies:
|
||||
'@babel/parser': 7.22.14
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
dev: true
|
||||
|
||||
/@types/babel__template@7.4.2:
|
||||
|
|
@ -5572,7 +5576,7 @@ packages:
|
|||
/@types/babel__traverse@7.20.1:
|
||||
resolution: {integrity: sha512-MitHFXnhtgwsGZWtT68URpOvLN4EREih1u3QtQiN4VdAxWKRVvGCSvw/Qth0M0Qq3pJpnGOu5JaM/ydK7OGbqg==}
|
||||
dependencies:
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
dev: true
|
||||
|
||||
/@types/babel__traverse@7.20.2:
|
||||
|
|
@ -5596,11 +5600,11 @@ packages:
|
|||
resolution: {integrity: sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==}
|
||||
dependencies:
|
||||
'@types/color-name': 1.1.1
|
||||
dev: false
|
||||
dev: true
|
||||
|
||||
/@types/color-name@1.1.1:
|
||||
resolution: {integrity: sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==}
|
||||
dev: false
|
||||
dev: true
|
||||
|
||||
/@types/connect@3.4.35:
|
||||
resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==}
|
||||
|
|
@ -5749,6 +5753,7 @@ packages:
|
|||
|
||||
/@types/lodash@4.14.196:
|
||||
resolution: {integrity: sha512-22y3o88f4a94mKljsZcanlNWPzO0uBsBdzLAngf2tp533LzZcQzb6+eZPJ+vCTt+bqF2XnvT9gejTLsAcJAJyQ==}
|
||||
dev: true
|
||||
|
||||
/@types/mdast@3.0.12:
|
||||
resolution: {integrity: sha512-DT+iNIRNX884cx0/Q1ja7NyUPpZuv0KPyL5rGNxm1WC1OtHstl7n4Jb7nk+xacNShQMbczJjt8uFzznpp6kYBg==}
|
||||
|
|
@ -5842,14 +5847,14 @@ packages:
|
|||
dependencies:
|
||||
'@types/react': 18.2.6
|
||||
'@types/reactcss': 1.2.6
|
||||
dev: false
|
||||
dev: true
|
||||
|
||||
/@types/react-date-range@1.4.4:
|
||||
resolution: {integrity: sha512-9Y9NyNgaCsEVN/+O4HKuxzPbVjRVBGdOKRxMDcsTRWVG62lpYgnxefNckTXDWup8FvczoqPW0+ESZR6R1yymDg==}
|
||||
dependencies:
|
||||
'@types/react': 18.2.6
|
||||
date-fns: 2.30.0
|
||||
dev: false
|
||||
dev: true
|
||||
|
||||
/@types/react-dom@18.2.4:
|
||||
resolution: {integrity: sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==}
|
||||
|
|
@ -5912,7 +5917,7 @@ packages:
|
|||
resolution: {integrity: sha512-qaIzpCuXNWomGR1Xq8SCFTtF4v8V27Y6f+b9+bzHiv087MylI/nTCqqdChNeWS7tslgROmYB7yeiruWX7WnqNg==}
|
||||
dependencies:
|
||||
'@types/react': 18.2.6
|
||||
dev: false
|
||||
dev: true
|
||||
|
||||
/@types/scheduler@0.16.3:
|
||||
resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
|
||||
|
|
@ -6248,7 +6253,7 @@ packages:
|
|||
dependencies:
|
||||
'@babel/parser': 7.22.14
|
||||
'@babel/traverse': 7.22.11
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
recast: 0.23.4
|
||||
xstate: 4.38.2
|
||||
transitivePeerDependencies:
|
||||
|
|
@ -6716,7 +6721,7 @@ packages:
|
|||
engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
|
||||
dependencies:
|
||||
'@babel/template': 7.22.5
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
'@types/babel__core': 7.20.1
|
||||
'@types/babel__traverse': 7.20.1
|
||||
dev: true
|
||||
|
|
@ -6725,7 +6730,7 @@ packages:
|
|||
resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
|
||||
engines: {node: '>=10', npm: '>=6'}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
cosmiconfig: 7.1.0
|
||||
resolve: 1.22.4
|
||||
dev: false
|
||||
|
|
@ -7445,7 +7450,7 @@ packages:
|
|||
/css-vendor@2.0.8:
|
||||
resolution: {integrity: sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
is-in-browser: 1.1.3
|
||||
dev: false
|
||||
|
||||
|
|
@ -7493,7 +7498,6 @@ packages:
|
|||
engines: {node: '>=0.11'}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.6
|
||||
dev: false
|
||||
|
||||
/dayjs@1.11.4:
|
||||
resolution: {integrity: sha512-Zj/lPM5hOvQ1Bf7uAvewDaUcsJoI6JmNqmHhHl3nyumwe0XHwt8sWdOVAPACJzCebL8gQCi+K49w7iKWnGwX9g==}
|
||||
|
|
@ -7746,7 +7750,7 @@ packages:
|
|||
/dom-helpers@5.2.1:
|
||||
resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
csstype: 3.1.2
|
||||
dev: false
|
||||
|
||||
|
|
@ -8097,8 +8101,8 @@ packages:
|
|||
resolution: {integrity: sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==}
|
||||
dependencies:
|
||||
debug: 3.2.7
|
||||
is-core-module: 2.12.1
|
||||
resolve: 1.22.3
|
||||
is-core-module: 2.13.0
|
||||
resolve: 1.22.4
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
|
@ -8453,7 +8457,7 @@ packages:
|
|||
engines: {node: '>=8.3.0'}
|
||||
dependencies:
|
||||
'@babel/traverse': 7.22.11
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
c8: 7.14.0
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
|
@ -10134,7 +10138,7 @@ packages:
|
|||
'@babel/generator': 7.22.10
|
||||
'@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.22.11)
|
||||
'@babel/plugin-syntax-typescript': 7.22.5(@babel/core@7.22.11)
|
||||
'@babel/types': 7.22.11
|
||||
'@babel/types': 7.22.19
|
||||
'@jest/expect-utils': 29.6.2
|
||||
'@jest/transform': 29.6.4
|
||||
'@jest/types': 29.6.1
|
||||
|
|
@ -10412,7 +10416,7 @@ packages:
|
|||
/jss-plugin-camel-case@10.10.0:
|
||||
resolution: {integrity: sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
hyphenate-style-name: 1.0.4
|
||||
jss: 10.10.0
|
||||
dev: false
|
||||
|
|
@ -10420,21 +10424,21 @@ packages:
|
|||
/jss-plugin-default-unit@10.10.0:
|
||||
resolution: {integrity: sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
jss: 10.10.0
|
||||
dev: false
|
||||
|
||||
/jss-plugin-global@10.10.0:
|
||||
resolution: {integrity: sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
jss: 10.10.0
|
||||
dev: false
|
||||
|
||||
/jss-plugin-nested@10.10.0:
|
||||
resolution: {integrity: sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
jss: 10.10.0
|
||||
tiny-warning: 1.0.3
|
||||
dev: false
|
||||
|
|
@ -10442,14 +10446,14 @@ packages:
|
|||
/jss-plugin-props-sort@10.10.0:
|
||||
resolution: {integrity: sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
jss: 10.10.0
|
||||
dev: false
|
||||
|
||||
/jss-plugin-rule-value-function@10.10.0:
|
||||
resolution: {integrity: sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
jss: 10.10.0
|
||||
tiny-warning: 1.0.3
|
||||
dev: false
|
||||
|
|
@ -10457,7 +10461,7 @@ packages:
|
|||
/jss-plugin-vendor-prefixer@10.10.0:
|
||||
resolution: {integrity: sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
css-vendor: 2.0.8
|
||||
jss: 10.10.0
|
||||
dev: false
|
||||
|
|
@ -10465,7 +10469,7 @@ packages:
|
|||
/jss@10.10.0:
|
||||
resolution: {integrity: sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
csstype: 3.1.2
|
||||
is-in-browser: 1.1.3
|
||||
tiny-warning: 1.0.3
|
||||
|
|
@ -11731,7 +11735,7 @@ packages:
|
|||
resolution: {integrity: sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ==}
|
||||
engines: {node: '>=10'}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
dev: true
|
||||
|
||||
/postcss@8.4.27:
|
||||
|
|
@ -12088,7 +12092,7 @@ packages:
|
|||
peerDependencies:
|
||||
react: '>=16.13.1'
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
react: 18.2.0
|
||||
dev: true
|
||||
|
||||
|
|
@ -12269,7 +12273,7 @@ packages:
|
|||
react: '>=16.6.0'
|
||||
react-dom: '>=16.6.0'
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
dom-helpers: 5.2.1
|
||||
loose-envify: 1.4.0
|
||||
prop-types: 15.8.1
|
||||
|
|
@ -12460,7 +12464,7 @@ packages:
|
|||
/regenerator-transform@0.15.2:
|
||||
resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
dev: true
|
||||
|
||||
/regexp-tree@0.1.27:
|
||||
|
|
@ -12596,7 +12600,7 @@ packages:
|
|||
resolution: {integrity: sha512-P8ur/gp/AmbEzjr729bZnLjXK5Z+4P0zhIJgBgzqRih7hL7BOukHGtSTA3ACMY467GRFz3duQsi0bDZdR7DKdw==}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
is-core-module: 2.12.1
|
||||
is-core-module: 2.13.0
|
||||
path-parse: 1.0.7
|
||||
supports-preserve-symlinks-flag: 1.0.0
|
||||
dev: true
|
||||
|
|
@ -12684,7 +12688,7 @@ packages:
|
|||
/rtl-css-js@1.16.1:
|
||||
resolution: {integrity: sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==}
|
||||
dependencies:
|
||||
'@babel/runtime': 7.22.11
|
||||
'@babel/runtime': 7.22.15
|
||||
dev: false
|
||||
|
||||
/run-async@2.4.1:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
import type { Theme as MuiTheme } from "@mui/system";
|
||||
|
||||
declare module "@emotion/react" {
|
||||
interface Theme extends MuiTheme {}
|
||||
}
|
||||
|
|
@ -8,7 +8,11 @@ import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";
|
|||
import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar";
|
||||
import { dark } from "./theme";
|
||||
import "./theme/globalFonts";
|
||||
import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
|
||||
import {
|
||||
StyledEngineProvider,
|
||||
ThemeProvider as MuiThemeProvider,
|
||||
} from "@mui/material/styles";
|
||||
import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
|
|
@ -25,17 +29,19 @@ export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
|
|||
return (
|
||||
<HelmetProvider>
|
||||
<StyledEngineProvider injectFirst>
|
||||
<ThemeProvider theme={dark}>
|
||||
<CssBaseline enableColorScheme />
|
||||
<ErrorBoundary>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<AuthProvider>
|
||||
{children}
|
||||
<GlobalSnackbar />
|
||||
</AuthProvider>
|
||||
</QueryClientProvider>
|
||||
</ErrorBoundary>
|
||||
</ThemeProvider>
|
||||
<MuiThemeProvider theme={dark}>
|
||||
<EmotionThemeProvider theme={dark}>
|
||||
<CssBaseline enableColorScheme />
|
||||
<ErrorBoundary>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<AuthProvider>
|
||||
{children}
|
||||
<GlobalSnackbar />
|
||||
</AuthProvider>
|
||||
</QueryClientProvider>
|
||||
</ErrorBoundary>
|
||||
</EmotionThemeProvider>
|
||||
</MuiThemeProvider>
|
||||
</StyledEngineProvider>
|
||||
</HelmetProvider>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
// This is the only place MuiAvatar can be used
|
||||
// eslint-disable-next-line no-restricted-imports -- Read above
|
||||
import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
import { FC } from "react";
|
||||
import { combineClasses } from "utils/combineClasses";
|
||||
import { css, type Theme } from "@emotion/react";
|
||||
|
||||
export type AvatarProps = MuiAvatarProps & {
|
||||
size?: "sm" | "md" | "xl";
|
||||
|
|
@ -11,25 +10,49 @@ export type AvatarProps = MuiAvatarProps & {
|
|||
fitImage?: boolean;
|
||||
};
|
||||
|
||||
const sizeStyles = {
|
||||
sm: (theme: Theme) => ({
|
||||
width: theme.spacing(3),
|
||||
height: theme.spacing(3),
|
||||
fontSize: theme.spacing(1.5),
|
||||
}),
|
||||
md: {},
|
||||
xl: (theme: Theme) => ({
|
||||
width: theme.spacing(6),
|
||||
height: theme.spacing(6),
|
||||
fontSize: theme.spacing(3),
|
||||
}),
|
||||
};
|
||||
|
||||
const colorStyles = {
|
||||
light: {},
|
||||
darken: (theme: Theme) => ({
|
||||
background: theme.palette.divider,
|
||||
color: theme.palette.text.primary,
|
||||
}),
|
||||
};
|
||||
|
||||
const fitImageStyles = css`
|
||||
& .MuiAvatar-img {
|
||||
object-fit: contain;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Avatar: FC<AvatarProps> = ({
|
||||
size = "md",
|
||||
colorScheme = "light",
|
||||
fitImage,
|
||||
className,
|
||||
children,
|
||||
...muiProps
|
||||
}) => {
|
||||
const styles = useStyles();
|
||||
|
||||
return (
|
||||
<MuiAvatar
|
||||
{...muiProps}
|
||||
className={combineClasses([
|
||||
className,
|
||||
styles[size],
|
||||
styles[colorScheme],
|
||||
fitImage && styles.fitImage,
|
||||
])}
|
||||
css={[
|
||||
sizeStyles[size],
|
||||
colorStyles[colorScheme],
|
||||
fitImage && fitImageStyles,
|
||||
]}
|
||||
>
|
||||
{typeof children === "string" ? firstLetter(children) : children}
|
||||
</MuiAvatar>
|
||||
|
|
@ -40,8 +63,15 @@ export const Avatar: FC<AvatarProps> = ({
|
|||
* Use it to make an img element behaves like a MaterialUI Icon component
|
||||
*/
|
||||
export const AvatarIcon: FC<{ src: string }> = ({ src }) => {
|
||||
const styles = useStyles();
|
||||
return <img src={src} alt="" className={styles.avatarIcon} />;
|
||||
return (
|
||||
<img
|
||||
src={src}
|
||||
alt=""
|
||||
css={{
|
||||
maxWidth: "50%",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const firstLetter = (str: string): string => {
|
||||
|
|
@ -51,36 +81,3 @@ const firstLetter = (str: string): string => {
|
|||
|
||||
return "";
|
||||
};
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
// Size styles
|
||||
sm: {
|
||||
width: theme.spacing(3),
|
||||
height: theme.spacing(3),
|
||||
fontSize: theme.spacing(1.5),
|
||||
},
|
||||
// Just use the default value from theme
|
||||
md: {},
|
||||
xl: {
|
||||
width: theme.spacing(6),
|
||||
height: theme.spacing(6),
|
||||
fontSize: theme.spacing(3),
|
||||
},
|
||||
// Colors
|
||||
// Just use the default value from theme
|
||||
light: {},
|
||||
darken: {
|
||||
background: theme.palette.divider,
|
||||
color: theme.palette.text.primary,
|
||||
},
|
||||
// Avatar icon
|
||||
avatarIcon: {
|
||||
maxWidth: "50%",
|
||||
},
|
||||
// Fit image
|
||||
fitImage: {
|
||||
"& .MuiAvatar-img": {
|
||||
objectFit: "contain",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -1,39 +1,22 @@
|
|||
import { makeStyles } from "@mui/styles";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import { useClickable } from "hooks/useClickable";
|
||||
import { useClipboard } from "hooks/useClipboard";
|
||||
import { FC, HTMLProps } from "react";
|
||||
import { combineClasses } from "utils/combineClasses";
|
||||
|
||||
interface CopyableValueProps extends HTMLProps<HTMLDivElement> {
|
||||
value: string;
|
||||
}
|
||||
|
||||
export const CopyableValue: FC<CopyableValueProps> = ({
|
||||
value,
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
export const CopyableValue: FC<CopyableValueProps> = ({ value, ...props }) => {
|
||||
const { isCopied, copy } = useClipboard(value);
|
||||
const clickableProps = useClickable<HTMLSpanElement>(copy);
|
||||
const styles = useStyles();
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
title={isCopied ? "Copied!" : "Click to copy"}
|
||||
placement="bottom-start"
|
||||
>
|
||||
<span
|
||||
{...props}
|
||||
{...clickableProps}
|
||||
className={combineClasses([styles.value, className])}
|
||||
/>
|
||||
<span {...props} {...clickableProps} css={{ cursor: "pointer" }} />
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
const useStyles = makeStyles(() => ({
|
||||
value: {
|
||||
cursor: "pointer",
|
||||
},
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { makeStyles } from "@mui/styles";
|
||||
import { useMachine } from "@xstate/react";
|
||||
import { DeploymentBanner } from "./DeploymentBanner/DeploymentBanner";
|
||||
import { LicenseBanner } from "components/Dashboard/LicenseBanner/LicenseBanner";
|
||||
|
|
@ -19,7 +18,6 @@ import { docs } from "utils/docs";
|
|||
import { HealthBanner } from "./HealthBanner";
|
||||
|
||||
export const DashboardLayout: FC = () => {
|
||||
const styles = useStyles();
|
||||
const permissions = usePermissions();
|
||||
const [updateCheckState, updateCheckSend] = useMachine(updateCheckMachine, {
|
||||
context: {
|
||||
|
|
@ -35,10 +33,23 @@ export const DashboardLayout: FC = () => {
|
|||
<ServiceBanner />
|
||||
{canViewDeployment && <LicenseBanner />}
|
||||
|
||||
<div className={styles.site}>
|
||||
<div
|
||||
css={{
|
||||
display: "flex",
|
||||
minHeight: "100%",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<Navbar />
|
||||
|
||||
<div className={styles.siteContent}>
|
||||
<div
|
||||
css={{
|
||||
flex: 1,
|
||||
paddingBottom: dashboardContentBottomPadding, // Add bottom space since we don't use a footer
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<Suspense fallback={<Loader />}>
|
||||
<Outlet />
|
||||
</Suspense>
|
||||
|
|
@ -118,17 +129,3 @@ export const DashboardFullPage = (props: BoxProps) => {
|
|||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const useStyles = makeStyles({
|
||||
site: {
|
||||
display: "flex",
|
||||
minHeight: "100%",
|
||||
flexDirection: "column",
|
||||
},
|
||||
siteContent: {
|
||||
flex: 1,
|
||||
paddingBottom: dashboardContentBottomPadding, // Add bottom space since we don't use a footer
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import Badge from "@mui/material/Badge";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
import { useState, FC, PropsWithChildren, MouseEvent } from "react";
|
||||
import { colors } from "theme/colors";
|
||||
import * as TypesGen from "api/typesGenerated";
|
||||
|
|
@ -13,6 +12,7 @@ import {
|
|||
import { UserAvatar } from "components/UserAvatar/UserAvatar";
|
||||
import { UserDropdownContent } from "./UserDropdownContent";
|
||||
import { BUTTON_SM_HEIGHT } from "theme/theme";
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
export interface UserDropdownProps {
|
||||
user: TypesGen.User;
|
||||
|
|
@ -27,7 +27,6 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
|
|||
supportLinks,
|
||||
onSignOut,
|
||||
}: UserDropdownProps) => {
|
||||
const styles = useStyles();
|
||||
const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>();
|
||||
|
||||
const handleDropdownClick = (ev: MouseEvent<HTMLLIElement>): void => {
|
||||
|
|
@ -40,11 +39,25 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
|
|||
return (
|
||||
<>
|
||||
<MenuItem
|
||||
className={styles.menuItem}
|
||||
css={(theme) => css`
|
||||
height: ${navHeight}px;
|
||||
padding: ${theme.spacing(1.5, 0)};
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
`}
|
||||
onClick={handleDropdownClick}
|
||||
data-testid="user-dropdown-trigger"
|
||||
>
|
||||
<div className={styles.inner}>
|
||||
<div
|
||||
css={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
minWidth: 0,
|
||||
maxWidth: 300,
|
||||
}}
|
||||
>
|
||||
<Badge overlap="circular">
|
||||
<UserAvatar
|
||||
sx={{
|
||||
|
|
@ -90,24 +103,3 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
|
|||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const useStyles = makeStyles((theme) => ({
|
||||
divider: {
|
||||
marginTop: theme.spacing(1),
|
||||
marginBottom: theme.spacing(1),
|
||||
},
|
||||
inner: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
minWidth: 0,
|
||||
maxWidth: 300,
|
||||
},
|
||||
menuItem: {
|
||||
height: navHeight,
|
||||
padding: theme.spacing(1.5, 0),
|
||||
|
||||
"&:hover": {
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import { makeStyles } from "@mui/styles";
|
||||
import { Pill } from "components/Pill/Pill";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import { colors } from "theme/colors";
|
||||
import { hex } from "color-convert";
|
||||
import { useTheme } from "@mui/system";
|
||||
import { css } from "@emotion/react";
|
||||
import { readableForegroundColor } from "utils/colors";
|
||||
|
||||
export interface ServiceBannerViewProps {
|
||||
message: string;
|
||||
|
|
@ -15,7 +16,7 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
|
|||
backgroundColor,
|
||||
isPreview,
|
||||
}) => {
|
||||
const styles = useStyles();
|
||||
const theme = useTheme();
|
||||
// We don't want anything funky like an image or a heading in the service
|
||||
// banner.
|
||||
const markdownElementsAllowed = [
|
||||
|
|
@ -31,15 +32,29 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
|
|||
];
|
||||
return (
|
||||
<div
|
||||
className={styles.container}
|
||||
style={{ backgroundColor: backgroundColor }}
|
||||
css={css`
|
||||
padding: ${theme.spacing(1.5)};
|
||||
background-color: ${backgroundColor ?? theme.palette.warning.main};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.error {
|
||||
background-color: ${colors.red[12]};
|
||||
}
|
||||
`}
|
||||
>
|
||||
{isPreview && <Pill text="Preview" type="info" lightBorder />}
|
||||
<div
|
||||
className={styles.centerContent}
|
||||
style={{
|
||||
color: readableForegroundColor(backgroundColor),
|
||||
}}
|
||||
css={css`
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
font-weight: 400;
|
||||
color: ${readableForegroundColor(backgroundColor)};
|
||||
|
||||
& a {
|
||||
color: inherit;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<ReactMarkdown
|
||||
allowedElements={markdownElementsAllowed}
|
||||
|
|
@ -52,36 +67,3 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
|
|||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
container: {
|
||||
padding: theme.spacing(1.5),
|
||||
backgroundColor: theme.palette.warning.main,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
"&.error": {
|
||||
backgroundColor: colors.red[12],
|
||||
},
|
||||
},
|
||||
flex: {
|
||||
display: "column",
|
||||
},
|
||||
centerContent: {
|
||||
marginRight: "auto",
|
||||
marginLeft: "auto",
|
||||
fontWeight: 400,
|
||||
"& a": {
|
||||
color: "inherit",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const readableForegroundColor = (backgroundColor: string): string => {
|
||||
const rgb = hex.rgb(backgroundColor);
|
||||
|
||||
// Logic taken from here:
|
||||
// https://github.com/casesandberg/react-color/blob/bc9a0e1dc5d11b06c511a8e02a95bd85c7129f4b/src/helpers/color.js#L56
|
||||
// to be consistent with the color-picker label.
|
||||
const yiq = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
|
||||
return yiq >= 128 ? "#000" : "#fff";
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,50 +1,91 @@
|
|||
import { makeStyles } from "@mui/styles";
|
||||
import { PropsWithChildren, FC } from "react";
|
||||
import type { PropsWithChildren, FC } from "react";
|
||||
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
|
||||
import { DisabledBadge, EnabledBadge } from "./Badges";
|
||||
import Box, { BoxProps } from "@mui/material/Box";
|
||||
import { combineClasses } from "utils/combineClasses";
|
||||
import { useTheme } from "@mui/system";
|
||||
import { DisabledBadge, EnabledBadge } from "./Badges";
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
export const OptionName: FC<PropsWithChildren> = ({ children }) => {
|
||||
const styles = useStyles();
|
||||
return <span className={styles.optionName}>{children}</span>;
|
||||
export const OptionName: FC<PropsWithChildren> = (props) => {
|
||||
const { children } = props;
|
||||
|
||||
return (
|
||||
<span
|
||||
css={{
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export const OptionDescription: FC<PropsWithChildren> = ({ children }) => {
|
||||
const styles = useStyles();
|
||||
return <span className={styles.optionDescription}>{children}</span>;
|
||||
export const OptionDescription: FC<PropsWithChildren> = (props) => {
|
||||
const { children } = props;
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<span
|
||||
css={{
|
||||
display: "block",
|
||||
color: theme.palette.text.secondary,
|
||||
fontSize: 14,
|
||||
marginTop: theme.spacing(0.5),
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const NotSet: FC = () => {
|
||||
const styles = useStyles();
|
||||
interface OptionValueProps {
|
||||
children?: boolean | number | string | string[];
|
||||
}
|
||||
|
||||
return <span className={styles.optionValue}>Not set</span>;
|
||||
};
|
||||
export const OptionValue: FC<OptionValueProps> = (props) => {
|
||||
const { children } = props;
|
||||
const theme = useTheme();
|
||||
|
||||
export const OptionValue: FC<{ children?: unknown }> = ({ children }) => {
|
||||
const styles = useStyles();
|
||||
const optionStyles = css`
|
||||
font-size: 14px;
|
||||
font-family: ${MONOSPACE_FONT_FAMILY};
|
||||
overflow-wrap: anywhere;
|
||||
user-select: all;
|
||||
|
||||
& ul {
|
||||
padding: ${theme.spacing(2)};
|
||||
}
|
||||
`;
|
||||
|
||||
if (typeof children === "boolean") {
|
||||
return children ? <EnabledBadge /> : <DisabledBadge />;
|
||||
}
|
||||
|
||||
if (typeof children === "number") {
|
||||
return <span className={styles.optionValue}>{children}</span>;
|
||||
return <span css={optionStyles}>{children}</span>;
|
||||
}
|
||||
|
||||
if (!children || children.length === 0) {
|
||||
return <span css={optionStyles}>Not set</span>;
|
||||
}
|
||||
|
||||
if (typeof children === "string") {
|
||||
return <span className={styles.optionValue}>{children}</span>;
|
||||
return <span css={optionStyles}>{children}</span>;
|
||||
}
|
||||
|
||||
if (Array.isArray(children)) {
|
||||
if (children.length === 0) {
|
||||
return <NotSet />;
|
||||
}
|
||||
|
||||
return (
|
||||
<ul className={styles.optionValueList}>
|
||||
<ul
|
||||
css={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
listStylePosition: "inside",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: theme.spacing(0.5),
|
||||
}}
|
||||
>
|
||||
{children.map((item) => (
|
||||
<li key={item} className={styles.optionValue}>
|
||||
<li key={item} css={optionStyles}>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
|
|
@ -52,21 +93,24 @@ export const OptionValue: FC<{ children?: unknown }> = ({ children }) => {
|
|||
);
|
||||
}
|
||||
|
||||
if (children === "") {
|
||||
return <NotSet />;
|
||||
}
|
||||
|
||||
return <span className={styles.optionValue}>{JSON.stringify(children)}</span>;
|
||||
return <span css={optionStyles}>{JSON.stringify(children)}</span>;
|
||||
};
|
||||
|
||||
interface OptionConfigProps extends BoxProps {
|
||||
source?: boolean;
|
||||
}
|
||||
|
||||
// OptionalConfig takes a source bool to indicate if the Option is the source of the configured value.
|
||||
export const OptionConfig = ({
|
||||
source,
|
||||
...boxProps
|
||||
}: { source?: boolean } & BoxProps) => {
|
||||
export const OptionConfig = (props: OptionConfigProps) => {
|
||||
const { source, sx, ...attrs } = props;
|
||||
const theme = useTheme();
|
||||
const borderColor = source
|
||||
? theme.palette.primary.main
|
||||
: theme.palette.divider;
|
||||
|
||||
return (
|
||||
<Box
|
||||
{...boxProps}
|
||||
{...attrs}
|
||||
sx={{
|
||||
fontSize: 13,
|
||||
fontFamily: MONOSPACE_FONT_FAMILY,
|
||||
|
|
@ -79,68 +123,37 @@ export const OptionConfig = ({
|
|||
alignItems: "center",
|
||||
borderRadius: 0.25,
|
||||
padding: (theme) => theme.spacing(0, 1),
|
||||
border: (theme) =>
|
||||
`1px solid ${
|
||||
source ? theme.palette.primary.main : theme.palette.divider
|
||||
}`,
|
||||
"& .option-config-flag": {
|
||||
backgroundColor: source ? "rgba(0, 0, 0, 0.7)" : undefined,
|
||||
},
|
||||
...boxProps.sx,
|
||||
border: `1px solid ${borderColor}`,
|
||||
...sx,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const OptionConfigFlag = (props: BoxProps) => {
|
||||
interface OptionConfigFlagProps extends BoxProps {
|
||||
source?: boolean;
|
||||
}
|
||||
|
||||
export const OptionConfigFlag = (props: OptionConfigFlagProps) => {
|
||||
const { children, source, sx, ...attrs } = props;
|
||||
|
||||
return (
|
||||
<Box
|
||||
{...props}
|
||||
className={combineClasses([props.className, "option-config-flag"])}
|
||||
{...attrs}
|
||||
sx={{
|
||||
fontSize: 10,
|
||||
fontWeight: 600,
|
||||
margin: (theme) => theme.spacing(0, 0.75, 0, -0.5),
|
||||
display: "block",
|
||||
backgroundColor: (theme) => theme.palette.divider,
|
||||
backgroundColor: (theme) =>
|
||||
source ? "rgba(0, 0, 0, 0.7)" : theme.palette.divider,
|
||||
lineHeight: 1,
|
||||
padding: (theme) => theme.spacing(0.25, 0.5),
|
||||
borderRadius: 0.25,
|
||||
...props.sx,
|
||||
...sx,
|
||||
}}
|
||||
/>
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
optionName: {
|
||||
display: "block",
|
||||
},
|
||||
|
||||
optionDescription: {
|
||||
display: "block",
|
||||
color: theme.palette.text.secondary,
|
||||
fontSize: 14,
|
||||
marginTop: theme.spacing(0.5),
|
||||
},
|
||||
|
||||
optionValue: {
|
||||
fontSize: 14,
|
||||
fontFamily: MONOSPACE_FONT_FAMILY,
|
||||
overflowWrap: "anywhere",
|
||||
userSelect: "all",
|
||||
|
||||
"& ul": {
|
||||
padding: theme.spacing(2),
|
||||
},
|
||||
},
|
||||
|
||||
optionValueList: {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
listStylePosition: "inside",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: theme.spacing(0.5),
|
||||
},
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { makeStyles } from "@mui/styles";
|
||||
import Brush from "@mui/icons-material/Brush";
|
||||
import LaunchOutlined from "@mui/icons-material/LaunchOutlined";
|
||||
import ApprovalIcon from "@mui/icons-material/VerifiedUserOutlined";
|
||||
|
|
@ -9,24 +8,54 @@ import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined";
|
|||
import MonitorHeartOutlined from "@mui/icons-material/MonitorHeartOutlined";
|
||||
import { GitIcon } from "components/Icons/GitIcon";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
import { ElementType, PropsWithChildren, ReactNode, FC } from "react";
|
||||
import type { ElementType, FC, PropsWithChildren, ReactNode } from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { combineClasses } from "utils/combineClasses";
|
||||
import { useDashboard } from "components/Dashboard/DashboardProvider";
|
||||
import { useTheme } from "@mui/system";
|
||||
import { css } from "@emotion/css";
|
||||
|
||||
const SidebarNavItem: FC<
|
||||
PropsWithChildren<{ href: string; icon: ReactNode }>
|
||||
> = ({ children, href, icon }) => {
|
||||
const styles = useStyles();
|
||||
const theme = useTheme();
|
||||
|
||||
const activeStyles = css`
|
||||
background-color: ${theme.palette.action.hover};
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: ${theme.palette.secondary.dark};
|
||||
border-top-left-radius: ${theme.shape.borderRadius};
|
||||
border-bottom-left-radius: ${theme.shape.borderRadius};
|
||||
}
|
||||
`;
|
||||
|
||||
return (
|
||||
<NavLink
|
||||
to={href}
|
||||
className={({ isActive }) =>
|
||||
combineClasses([
|
||||
styles.sidebarNavItem,
|
||||
isActive ? styles.sidebarNavItemActive : undefined,
|
||||
])
|
||||
}
|
||||
className={({ isActive }) => css`
|
||||
${isActive && activeStyles}
|
||||
|
||||
color: inherit;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
padding: ${theme.spacing(1.5, 1.5, 1.5, 2)};
|
||||
border-radius: ${theme.shape.borderRadius / 2};
|
||||
transition: background-color 0.15s ease-in-out;
|
||||
margin-bottom: 1;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: ${theme.palette.action.hover};
|
||||
}
|
||||
`}
|
||||
>
|
||||
<Stack alignItems="center" spacing={1.5} direction="row">
|
||||
{icon}
|
||||
|
|
@ -37,16 +66,26 @@ const SidebarNavItem: FC<
|
|||
};
|
||||
|
||||
const SidebarNavItemIcon: FC<{ icon: ElementType }> = ({ icon: Icon }) => {
|
||||
const styles = useStyles();
|
||||
return <Icon className={styles.sidebarNavItemIcon} />;
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Icon
|
||||
css={{
|
||||
width: theme.spacing(2),
|
||||
height: theme.spacing(2),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const Sidebar: React.FC = () => {
|
||||
const styles = useStyles();
|
||||
const dashboard = useDashboard();
|
||||
|
||||
return (
|
||||
<nav className={styles.sidebar}>
|
||||
<nav
|
||||
css={{
|
||||
width: 245,
|
||||
}}
|
||||
>
|
||||
<SidebarNavItem
|
||||
href="general"
|
||||
icon={<SidebarNavItemIcon icon={LaunchOutlined} />}
|
||||
|
|
@ -105,47 +144,3 @@ export const Sidebar: React.FC = () => {
|
|||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
sidebar: {
|
||||
width: 245,
|
||||
},
|
||||
|
||||
sidebarNavItem: {
|
||||
color: "inherit",
|
||||
display: "block",
|
||||
fontSize: 14,
|
||||
textDecoration: "none",
|
||||
padding: theme.spacing(1.5, 1.5, 1.5, 2),
|
||||
borderRadius: theme.shape.borderRadius / 2,
|
||||
transition: "background-color 0.15s ease-in-out",
|
||||
marginBottom: 1,
|
||||
position: "relative",
|
||||
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.action.hover,
|
||||
},
|
||||
},
|
||||
|
||||
sidebarNavItemActive: {
|
||||
backgroundColor: theme.palette.action.hover,
|
||||
|
||||
"&:before": {
|
||||
content: '""',
|
||||
display: "block",
|
||||
width: 3,
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
top: 0,
|
||||
backgroundColor: theme.palette.secondary.dark,
|
||||
borderTopLeftRadius: theme.shape.borderRadius,
|
||||
borderBottomLeftRadius: theme.shape.borderRadius,
|
||||
},
|
||||
},
|
||||
|
||||
sidebarNavItemIcon: {
|
||||
width: theme.spacing(2),
|
||||
height: theme.spacing(2),
|
||||
},
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import Box from "@mui/material/Box";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { FC, ReactNode } from "react";
|
||||
import { combineClasses } from "utils/combineClasses";
|
||||
import type { FC, ReactNode } from "react";
|
||||
import { useTheme } from "@emotion/react";
|
||||
|
||||
export interface EmptyStateProps {
|
||||
/** Text Message to display, placed inside Typography component */
|
||||
|
|
@ -25,54 +24,56 @@ export interface EmptyStateProps {
|
|||
export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (
|
||||
props,
|
||||
) => {
|
||||
const { message, description, cta, className, image, ...boxProps } = props;
|
||||
const styles = useStyles();
|
||||
const { message, description, cta, image, ...boxProps } = props;
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box className={combineClasses([styles.root, className])} {...boxProps}>
|
||||
<Typography variant="h5" className={styles.title}>
|
||||
<Box
|
||||
css={{
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
textAlign: "center",
|
||||
minHeight: 360,
|
||||
padding: theme.spacing(10, 5),
|
||||
position: "relative",
|
||||
}}
|
||||
{...boxProps}
|
||||
>
|
||||
<Typography
|
||||
variant="h5"
|
||||
css={{
|
||||
fontSize: theme.spacing(3),
|
||||
}}
|
||||
>
|
||||
{message}
|
||||
</Typography>
|
||||
{description && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="textSecondary"
|
||||
className={styles.description}
|
||||
css={{
|
||||
marginTop: theme.spacing(1.5),
|
||||
fontSize: theme.spacing(2),
|
||||
lineHeight: "140%",
|
||||
maxWidth: theme.spacing(60),
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</Typography>
|
||||
)}
|
||||
{cta && <div className={styles.cta}>{cta}</div>}
|
||||
{cta && (
|
||||
<div
|
||||
css={{
|
||||
marginTop: theme.spacing(4),
|
||||
}}
|
||||
>
|
||||
{cta}
|
||||
</div>
|
||||
)}
|
||||
{image}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
textAlign: "center",
|
||||
minHeight: 360,
|
||||
padding: theme.spacing(10, 5),
|
||||
position: "relative",
|
||||
},
|
||||
|
||||
title: {
|
||||
fontSize: theme.spacing(3),
|
||||
},
|
||||
|
||||
description: {
|
||||
marginTop: theme.spacing(1.5),
|
||||
fontSize: theme.spacing(2),
|
||||
lineHeight: "140%",
|
||||
maxWidth: theme.spacing(60),
|
||||
},
|
||||
|
||||
cta: {
|
||||
marginTop: theme.spacing(4),
|
||||
},
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
import { makeStyles } from "@mui/styles";
|
||||
import { type FC, type PropsWithChildren, type ReactNode } from "react";
|
||||
import { combineClasses } from "utils/combineClasses";
|
||||
import { Stack } from "../Stack/Stack";
|
||||
|
||||
export interface PageHeaderProps {
|
||||
|
|
@ -13,16 +11,37 @@ export const PageHeader: FC<PropsWithChildren<PageHeaderProps>> = ({
|
|||
actions,
|
||||
className,
|
||||
}) => {
|
||||
const styles = useStyles({});
|
||||
|
||||
return (
|
||||
<header
|
||||
className={combineClasses([styles.root, className])}
|
||||
className={className}
|
||||
css={(theme) => ({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
paddingTop: theme.spacing(6),
|
||||
paddingBottom: theme.spacing(6),
|
||||
gap: theme.spacing(4),
|
||||
|
||||
[theme.breakpoints.down("md")]: {
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
},
|
||||
})}
|
||||
data-testid="header"
|
||||
>
|
||||
<hgroup>{children}</hgroup>
|
||||
{actions && (
|
||||
<Stack direction="row" className={styles.actions}>
|
||||
<Stack
|
||||
direction="row"
|
||||
css={(theme) => ({
|
||||
marginLeft: "auto",
|
||||
|
||||
[theme.breakpoints.down("md")]: {
|
||||
marginTop: theme.spacing(3),
|
||||
marginLeft: "initial",
|
||||
width: "100%",
|
||||
},
|
||||
})}
|
||||
>
|
||||
{actions}
|
||||
</Stack>
|
||||
)}
|
||||
|
|
@ -33,75 +52,54 @@ export const PageHeader: FC<PropsWithChildren<PageHeaderProps>> = ({
|
|||
export const PageHeaderTitle: FC<PropsWithChildren<unknown>> = ({
|
||||
children,
|
||||
}) => {
|
||||
const styles = useStyles({});
|
||||
|
||||
return <h1 className={styles.title}>{children}</h1>;
|
||||
return (
|
||||
<h1
|
||||
css={(theme) => ({
|
||||
fontSize: theme.spacing(3),
|
||||
fontWeight: 400,
|
||||
margin: 0,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
lineHeight: "140%",
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</h1>
|
||||
);
|
||||
};
|
||||
|
||||
export const PageHeaderSubtitle: FC<
|
||||
PropsWithChildren<{ condensed?: boolean }>
|
||||
> = ({ children, condensed }) => {
|
||||
const styles = useStyles({
|
||||
condensed,
|
||||
});
|
||||
|
||||
return <h2 className={styles.subtitle}>{children}</h2>;
|
||||
return (
|
||||
<h2
|
||||
css={(theme) => ({
|
||||
fontSize: theme.spacing(2),
|
||||
color: theme.palette.text.secondary,
|
||||
fontWeight: 400,
|
||||
display: "block",
|
||||
margin: 0,
|
||||
marginTop: condensed ? theme.spacing(0.5) : theme.spacing(1),
|
||||
lineHeight: "140%",
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</h2>
|
||||
);
|
||||
};
|
||||
|
||||
export const PageHeaderCaption: FC<PropsWithChildren> = ({ children }) => {
|
||||
const styles = useStyles({});
|
||||
return <span className={styles.caption}>{children}</span>;
|
||||
return (
|
||||
<span
|
||||
css={(theme) => ({
|
||||
fontSize: 12,
|
||||
color: theme.palette.text.secondary,
|
||||
fontWeight: 600,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.1em",
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
paddingTop: theme.spacing(6),
|
||||
paddingBottom: theme.spacing(6),
|
||||
gap: theme.spacing(4),
|
||||
|
||||
[theme.breakpoints.down("md")]: {
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
},
|
||||
},
|
||||
|
||||
title: {
|
||||
fontSize: theme.spacing(3),
|
||||
fontWeight: 400,
|
||||
margin: 0,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
lineHeight: "140%",
|
||||
},
|
||||
|
||||
subtitle: {
|
||||
fontSize: theme.spacing(2),
|
||||
color: theme.palette.text.secondary,
|
||||
fontWeight: 400,
|
||||
display: "block",
|
||||
margin: 0,
|
||||
marginTop: ({ condensed }: { condensed?: boolean }) =>
|
||||
condensed ? theme.spacing(0.5) : theme.spacing(1),
|
||||
lineHeight: "140%",
|
||||
},
|
||||
|
||||
actions: {
|
||||
marginLeft: "auto",
|
||||
|
||||
[theme.breakpoints.down("md")]: {
|
||||
marginTop: theme.spacing(3),
|
||||
marginLeft: "initial",
|
||||
width: "100%",
|
||||
},
|
||||
},
|
||||
|
||||
caption: {
|
||||
fontSize: 12,
|
||||
color: theme.palette.text.secondary,
|
||||
fontWeight: 600,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.1em",
|
||||
},
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { FC, PropsWithChildren, useState } from "react";
|
||||
import { Section } from "components/SettingsLayout/Section";
|
||||
import { TokensPageView } from "./TokensPageView";
|
||||
import makeStyles from "@mui/styles/makeStyles";
|
||||
import { useTokensData } from "./hooks";
|
||||
import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
|
||||
import { Stack } from "components/Stack/Stack";
|
||||
|
|
@ -9,14 +8,19 @@ import Button from "@mui/material/Button";
|
|||
import { Link as RouterLink } from "react-router-dom";
|
||||
import AddIcon from "@mui/icons-material/AddOutlined";
|
||||
import { APIKeyWithOwner } from "api/typesGenerated";
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
|
||||
const styles = useStyles();
|
||||
|
||||
const cliCreateCommand = "coder tokens create";
|
||||
|
||||
const TokenActions = () => (
|
||||
<Stack direction="row" justifyContent="end" className={styles.tokenActions}>
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="end"
|
||||
css={(theme) => ({
|
||||
marginBottom: theme.spacing(1),
|
||||
})}
|
||||
>
|
||||
<Button startIcon={<AddIcon />} component={RouterLink} to="new">
|
||||
Add token
|
||||
</Button>
|
||||
|
|
@ -43,7 +47,15 @@ export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
|
|||
<>
|
||||
<Section
|
||||
title="Tokens"
|
||||
className={styles.section}
|
||||
css={(theme) => css`
|
||||
& code {
|
||||
background: ${theme.palette.divider};
|
||||
font-size: 12px;
|
||||
padding: 2px 4px;
|
||||
color: ${theme.palette.text.primary};
|
||||
border-radius: 2px;
|
||||
}
|
||||
`}
|
||||
description={
|
||||
<>
|
||||
Tokens are used to authenticate with the Coder API. You can create a
|
||||
|
|
@ -73,19 +85,4 @@ export const TokensPage: FC<PropsWithChildren<unknown>> = () => {
|
|||
);
|
||||
};
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
section: {
|
||||
"& code": {
|
||||
background: theme.palette.divider,
|
||||
fontSize: 12,
|
||||
padding: "2px 4px",
|
||||
color: theme.palette.text.primary,
|
||||
borderRadius: 2,
|
||||
},
|
||||
},
|
||||
tokenActions: {
|
||||
marginBottom: theme.spacing(1),
|
||||
},
|
||||
}));
|
||||
|
||||
export default TokensPage;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ import {
|
|||
WorkspaceParametersForm,
|
||||
} from "./WorkspaceParametersForm";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
|
||||
import { FC } from "react";
|
||||
import { isApiValidationError } from "api/errors";
|
||||
|
|
@ -74,11 +73,13 @@ export type WorkspaceParametersPageViewProps = {
|
|||
export const WorkspaceParametersPageView: FC<
|
||||
WorkspaceParametersPageViewProps
|
||||
> = ({ data, submitError, isSubmitting, onSubmit, onCancel }) => {
|
||||
const styles = useStyles();
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader className={styles.pageHeader}>
|
||||
<PageHeader
|
||||
css={{
|
||||
paddingTop: 0,
|
||||
}}
|
||||
>
|
||||
<PageHeaderTitle>Workspace parameters</PageHeaderTitle>
|
||||
</PageHeader>
|
||||
|
||||
|
|
@ -102,10 +103,4 @@ export const WorkspaceParametersPageView: FC<
|
|||
);
|
||||
};
|
||||
|
||||
const useStyles = makeStyles(() => ({
|
||||
pageHeader: {
|
||||
paddingTop: 0,
|
||||
},
|
||||
}));
|
||||
|
||||
export default WorkspaceParametersPage;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { makeStyles } from "@mui/styles";
|
||||
import { useMachine } from "@xstate/react";
|
||||
import { Alert } from "components/Alert/Alert";
|
||||
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
|
||||
|
|
@ -31,17 +30,7 @@ const getAutostart = (workspace: TypesGen.Workspace) =>
|
|||
const getAutostop = (workspace: TypesGen.Workspace) =>
|
||||
ttlMsToAutostop(workspace.ttl_ms);
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
topMargin: {
|
||||
marginTop: theme.spacing(3),
|
||||
},
|
||||
pageHeader: {
|
||||
paddingTop: 0,
|
||||
},
|
||||
}));
|
||||
|
||||
export const WorkspaceSchedulePage: FC = () => {
|
||||
const styles = useStyles();
|
||||
const params = useParams() as { username: string; workspace: string };
|
||||
const navigate = useNavigate();
|
||||
const username = params.username.replace("@", "");
|
||||
|
|
@ -72,7 +61,11 @@ export const WorkspaceSchedulePage: FC = () => {
|
|||
<Helmet>
|
||||
<title>{pageTitle([workspaceName, "Schedule"])}</title>
|
||||
</Helmet>
|
||||
<PageHeader className={styles.pageHeader}>
|
||||
<PageHeader
|
||||
css={{
|
||||
paddingTop: 0,
|
||||
}}
|
||||
>
|
||||
<PageHeaderTitle>Workspace Schedule</PageHeaderTitle>
|
||||
</PageHeader>
|
||||
{(scheduleState.hasTag("loading") || !template) && <Loader />}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { makeStyles } from "@mui/styles";
|
||||
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
|
||||
import { ComponentProps, FC } from "react";
|
||||
import { WorkspaceSettingsForm } from "./WorkspaceSettingsForm";
|
||||
|
|
@ -19,11 +18,13 @@ export const WorkspaceSettingsPageView: FC<WorkspaceSettingsPageViewProps> = ({
|
|||
error,
|
||||
workspace,
|
||||
}) => {
|
||||
const styles = useStyles();
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader className={styles.pageHeader}>
|
||||
<PageHeader
|
||||
css={{
|
||||
paddingTop: 0,
|
||||
}}
|
||||
>
|
||||
<PageHeaderTitle>Workspace Settings</PageHeaderTitle>
|
||||
</PageHeader>
|
||||
|
||||
|
|
@ -37,9 +38,3 @@ export const WorkspaceSettingsPageView: FC<WorkspaceSettingsPageViewProps> = ({
|
|||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const useStyles = makeStyles(() => ({
|
||||
pageHeader: {
|
||||
paddingTop: 0,
|
||||
},
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ import AddOutlined from "@mui/icons-material/AddOutlined";
|
|||
import Button from "@mui/material/Button";
|
||||
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
|
||||
import { Link as RouterLink, useNavigate } from "react-router-dom";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
import { useClickableTableRow } from "hooks/useClickableTableRow";
|
||||
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
|
||||
import Box from "@mui/material/Box";
|
||||
|
|
@ -30,6 +29,8 @@ import Checkbox from "@mui/material/Checkbox";
|
|||
import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton";
|
||||
import Skeleton from "@mui/material/Skeleton";
|
||||
import { InfoTooltip } from "components/InfoTooltip/InfoTooltip";
|
||||
import { css } from "@emotion/react";
|
||||
import { useTheme } from "@mui/system";
|
||||
|
||||
export interface WorkspacesTableProps {
|
||||
workspaces?: Workspace[];
|
||||
|
|
@ -49,7 +50,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
|
|||
onCheckChange,
|
||||
canCheckWorkspaces,
|
||||
}) => {
|
||||
const styles = useStyles();
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<TableContainer>
|
||||
|
|
@ -100,7 +101,9 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
|
|||
|
||||
<Cond>
|
||||
<TableEmpty
|
||||
className={styles.withImage}
|
||||
css={{
|
||||
paddingBottom: 0,
|
||||
}}
|
||||
message="Create a workspace"
|
||||
description="A workspace is your personal, customizable development environment in the cloud"
|
||||
cta={
|
||||
|
|
@ -114,7 +117,19 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
|
|||
</Button>
|
||||
}
|
||||
image={
|
||||
<div className={styles.emptyImage}>
|
||||
<div
|
||||
css={css`
|
||||
max-width: 50%;
|
||||
height: ${theme.spacing(34)};
|
||||
overflow: hidden;
|
||||
margin-top: ${theme.spacing(6)};
|
||||
opacity: 0.85;
|
||||
|
||||
& img {
|
||||
max-width: 100%;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<img src="/featured/workspaces.webp" alt="" />
|
||||
</div>
|
||||
}
|
||||
|
|
@ -321,20 +336,3 @@ const TableLoader = ({
|
|||
const cantBeChecked = (workspace: Workspace) => {
|
||||
return ["deleting", "pending"].includes(workspace.latest_build.status);
|
||||
};
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
withImage: {
|
||||
paddingBottom: 0,
|
||||
},
|
||||
emptyImage: {
|
||||
maxWidth: "50%",
|
||||
height: theme.spacing(34),
|
||||
overflow: "hidden",
|
||||
marginTop: theme.spacing(6),
|
||||
opacity: 0.85,
|
||||
|
||||
"& img": {
|
||||
maxWidth: "100%",
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { hex } from "color-convert";
|
||||
|
||||
/**
|
||||
* Does not support shorthand hex strings (e.g., #fff), just to maximize
|
||||
* compatibility with server, which also doesn't support shorthand
|
||||
|
|
@ -83,3 +85,13 @@ export function hslToHex(hsl: string): string {
|
|||
};
|
||||
return `#${f(0)}${f(8)}${f(4)}`;
|
||||
}
|
||||
|
||||
export const readableForegroundColor = (backgroundColor: string): string => {
|
||||
const rgb = hex.rgb(backgroundColor);
|
||||
|
||||
// Logic taken from here:
|
||||
// https://github.com/casesandberg/react-color/blob/bc9a0e1dc5d11b06c511a8e02a95bd85c7129f4b/src/helpers/color.js#L56
|
||||
// to be consistent with the color-picker label.
|
||||
const yiq = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
|
||||
return yiq >= 128 ? "#000" : "#fff";
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"downlevelIteration": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"incremental": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "@emotion/react",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"module": "commonjs",
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"outDir": "./dist/",
|
||||
"outDir": "build/",
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"target": "es2020",
|
||||
"baseUrl": "./src"
|
||||
"baseUrl": "src/"
|
||||
},
|
||||
"include": ["**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules", "_jest"],
|
||||
"types": ["node", "jest", "@testing-library/jest-dom"]
|
||||
"exclude": ["node_modules/", "_jest"],
|
||||
"types": ["@emotion/react", "@testing-library/jest-dom", "jest", "node"]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue