Skip to content

Commit 598c675

Browse files
aslilacaslilac
committed
🌭
1 parent dff53d0 commit 598c675

File tree

37 files changed

+236
-133
lines changed

37 files changed

+236
-133
lines changed

‎site/.storybook/main.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import turbosnap from "vite-plugin-turbosnap";
2-
import { mergeConfig } from "vite";
32

43
module.exports = {
54
stories: ["../src/**/*.stories.tsx"],

‎site/.storybook/preview.jsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,11 @@ import {
66
import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
77
import { withRouter } from "storybook-addon-react-router-v6";
88
import { HelmetProvider } from "react-helmet-async";
9-
import { dark } from "theme/mui";
10-
import { dark as experimental } from "theme/experimental";
9+
import theme from "theme";
1110
import colors from "theme/tailwind";
1211
import "theme/globalFonts";
1312
import { QueryClient, QueryClientProvider } from "react-query";
1413

15-
const theme = {
16-
...dark,
17-
experimental,
18-
};
19-
2014
export const decorators = [
2115
(Story) => (
2216
<StyledEngineProvider injectFirst>

‎site/src/@types/emotion.d.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import type { Theme as MuiTheme } from "@mui/material/styles";
1+
import type { Theme as CoderTheme } from "theme";
22

33
declare module "@emotion/react" {
4-
interface Theme extends MuiTheme {}
4+
interface Theme extends CoderTheme {}
55
}
6+
s;

‎site/src/@types/mui.d.ts

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,3 @@ declare module "@mui/material/Button" {
2424
xlarge: true;
2525
}
2626
}
27-
28-
declare module "@mui/system" {
29-
interface Theme {
30-
experimental: NewTheme;
31-
}
32-
}

‎site/src/App.tsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ import { HelmetProvider } from "react-helmet-async";
66
import { AppRouter } from "./AppRouter";
77
import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";
88
import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar";
9-
import { dark } from "./theme/mui";
10-
import { dark as experimental } from "./theme/experimental";
9+
import theme from "./theme";
1110
import "./theme/globalFonts";
1211
import {
1312
StyledEngineProvider,
@@ -30,11 +29,6 @@ const defaultQueryClient = new QueryClient({
3029
},
3130
});
3231

33-
const theme = {
34-
...dark,
35-
experimental,
36-
};
37-
3832
export const ThemeProviders: FC<PropsWithChildren> = ({ children }) => {
3933
return (
4034
<StyledEngineProvider injectFirst>

‎site/src/components/Alert/Alert.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const Alert: FC<AlertProps> = ({
2121
children,
2222
actions,
2323
dismissible,
24-
severity,
24+
severity = "info",
2525
onDismiss,
2626
...alertProps
2727
}) => {

‎site/src/components/BuildAvatar/BuildAvatar.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,7 @@ export const BuildAvatar: FC<BuildAvatarProps> = ({ build, size }) => {
1717
const theme = useTheme();
1818
const { status, type } = getDisplayWorkspaceBuildStatus(theme, build);
1919
const badgeType = useClassName(
20-
(css, theme) => css`
21-
background-color: ${theme.palette[type].light};
22-
`,
20+
(css, theme) => css({ backgroundColor: theme.palette[type].light }),
2321
[type],
2422
);
2523

‎site/src/components/Callout/Callout.stories.tsx

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { Callout } from "./Callout";
2+
import type { Meta, StoryObj } from "@storybook/react";
3+
4+
const meta: Meta<typeof Callout> = {
5+
title: "components/Callout",
6+
component: Callout,
7+
};
8+
9+
export default meta;
10+
type Story = StoryObj<typeof Callout>;
11+
12+
export const Danger: Story = {
13+
args: {
14+
children: "Danger",
15+
type: "danger",
16+
},
17+
};
18+
19+
export const Error: Story = {
20+
args: {
21+
children: "Error",
22+
type: "error",
23+
},
24+
};
25+
26+
export const Warning: Story = {
27+
args: {
28+
children: "Warning",
29+
type: "warning",
30+
},
31+
};
32+
33+
export const Notice: Story = {
34+
args: {
35+
children: "Notice",
36+
type: "notice",
37+
},
38+
};
39+
40+
export const Info: Story = {
41+
args: {
42+
children: "Information",
43+
type: "info",
44+
},
45+
};
46+
47+
export const Success: Story = {
48+
args: {
49+
children: "Success",
50+
type: "success",
51+
},
52+
};
53+
54+
export const Active: Story = {
55+
args: {
56+
children: "Active",
57+
type: "active",
58+
},
59+
};
60+
61+
export const Default: Story = {
62+
args: {
63+
children: "Neutral/default",
64+
},
65+
};
66+
67+
export const DefaultLight: Story = {
68+
args: {
69+
children: "Neutral/default",
70+
},
71+
};

‎site/src/components/Callout/Callout.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { type FC, type ReactNode } from "react";
2+
import { useTheme } from "@emotion/react";
3+
4+
// TODO: use a `ThemeRole` type or something
5+
export type CalloutType =
6+
| "danger"
7+
| "error"
8+
| "warning"
9+
| "notice"
10+
| "info"
11+
| "success"
12+
| "active";
13+
// | "neutral";
14+
15+
export interface CalloutProps {
16+
children?: ReactNode;
17+
icon?: ReactNode | boolean;
18+
type: CalloutType;
19+
}
20+
21+
export const Callout: FC<CalloutProps> = ({ children, type }) => {
22+
const theme = useTheme();
23+
24+
return (
25+
<div
26+
css={{
27+
backgroundColor: theme.experimental.roles[type].background,
28+
border: `1px solid ${theme.experimental.roles[type].outline}`,
29+
borderRadius: theme.shape.borderRadius,
30+
color: theme.experimental.roles[type].text,
31+
padding: "8px 16px",
32+
}}
33+
>
34+
{children}
35+
</div>
36+
);
37+
};

‎site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
} from "@emotion/react";
77
import Link from "@mui/material/Link";
88
import { css } from "@emotion/react";
9-
import { useState } from "react";
9+
import { type FC, useState } from "react";
1010
import { Expander } from "components/Expander/Expander";
1111
import { Pill } from "components/Pill/Pill";
1212
import { colors } from "theme/colors";
@@ -32,7 +32,7 @@ export interface LicenseBannerViewProps {
3232
warnings: string[];
3333
}
3434

35-
export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
35+
export const LicenseBannerView: FC<LicenseBannerViewProps> = ({
3636
errors,
3737
warnings,
3838
}) => {

0 commit comments

Comments
 (0)