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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy