Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 08f7774

Browse files
aslilacaslilac
committed
🍒
1 parent 33761c9 commit 08f7774

File tree

33 files changed

+354
-398
lines changed

33 files changed

+354
-398
lines changed

‎site/.storybook/preview.jsx

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,21 @@ import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
77
import { withRouter } from "storybook-addon-react-router-v6";
88
import { HelmetProvider } from "react-helmet-async";
99
import { dark } from "theme/mui";
10+
import { dark as experimental } from "theme/experimental";
11+
import colors from "theme/tailwind";
1012
import "theme/globalFonts";
1113
import { QueryClient, QueryClientProvider } from "react-query";
1214

15+
const theme = {
16+
...dark,
17+
experimental,
18+
};
19+
1320
export const decorators = [
1421
(Story) => (
1522
<StyledEngineProvider injectFirst>
16-
<MuiThemeProvider theme={dark}>
17-
<EmotionThemeProvider theme={dark}>
23+
<MuiThemeProvider theme={theme}>
24+
<EmotionThemeProvider theme={theme}>
1825
<CssBaseline />
1926
<Story />
2027
</EmotionThemeProvider>
@@ -39,6 +46,19 @@ export const decorators = [
3946
];
4047

4148
export const parameters = {
49+
backgrounds: {
50+
default: "dark",
51+
values: [
52+
{
53+
name: "dark",
54+
value: colors.gray[950],
55+
},
56+
{
57+
name: "light",
58+
value: colors.gray[50],
59+
},
60+
],
61+
},
4262
actions: {
4363
argTypesRegex: "^(on|handler)[A-Z].*",
4464
},

‎site/src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import CssBaseline from "@mui/material/CssBaseline";
22
import { QueryClient, QueryClientProvider } from "react-query";
33
import { AuthProvider } from "components/AuthProvider/AuthProvider";
4-
import { FC, PropsWithChildren, ReactNode } from "react";
4+
import type { FC, PropsWithChildren, ReactNode } from "react";
55
import { HelmetProvider } from "react-helmet-async";
66
import { AppRouter } from "./AppRouter";
77
import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";

‎site/src/components/AvatarCard/AvatarCard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export function AvatarCard({
7575
src={imgUrl}
7676
alt={altText}
7777
size="md"
78-
css={{ backgroundColor: colors.gray[7] }}
78+
css={{ backgroundColor: colors.gray[9] }}
7979
>
8080
{header}
8181
</Avatar>

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import {
3+
Badges,
4+
AlphaBadge,
5+
EnabledBadge,
6+
EntitledBadge,
7+
EnterpriseBadge,
8+
} from "./Badges";
9+
10+
const meta: Meta<typeof Badges> = {
11+
title: "components/Badges",
12+
component: Badges,
13+
args: {},
14+
};
15+
16+
export default meta;
17+
type Story = StoryObj<typeof Badges>;
18+
19+
export const Enabled: Story = {
20+
args: {
21+
children: <EnabledBadge />,
22+
},
23+
};
24+
export const Entitled: Story = {
25+
args: {
26+
children: <EntitledBadge />,
27+
},
28+
};
29+
export const Enterprise: Story = {
30+
args: {
31+
children: <EnterpriseBadge />,
32+
},
33+
};
34+
export const Alpha: Story = {
35+
args: {
36+
children: <AlphaBadge />,
37+
},
38+
};

‎site/src/components/DeploySettingsLayout/Badges.tsx renamed to ‎site/src/components/Badges/Badges.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { PropsWithChildren, FC } from "react";
22
import Tooltip from "@mui/material/Tooltip";
33
import { type Interpolation, type Theme } from "@emotion/react";
44
import { Stack } from "components/Stack/Stack";
5-
import { colors } from "theme/colors";
5+
import colors from "theme/tailwind";
66

77
const styles = {
88
badge: {
@@ -111,9 +111,9 @@ export const AlphaBadge: FC = () => {
111111
css={[
112112
styles.badge,
113113
{
114-
border: `1px solid ${colors.violet[10]}`,
115-
backgroundColor: colors.violet[14],
116-
color: colors.violet[1],
114+
border: `1px solid ${colors.violet[600]}`,
115+
backgroundColor: colors.violet[950],
116+
color: colors.violet[50],
117117
},
118118
]}
119119
>

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

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
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 InfoLight: Story = {
62+
// args: {
63+
// children: "Information",
64+
// type: "info",
65+
// lightBorder: true,
66+
// },
67+
// };
68+
69+
export const Default: Story = {
70+
args: {
71+
children: "Neutral/default",
72+
},
73+
};
74+
75+
export const DefaultLight: Story = {
76+
args: {
77+
children: "Neutral/default",
78+
},
79+
};
80+
81+
// export const WarningLight: Story = {
82+
// args: {
83+
// children: "Warning",
84+
// type: "warning",
85+
// lightBorder: true,
86+
// },
87+
// };

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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+
type: CalloutType;
18+
}
19+
20+
export const Callout: FC<CalloutProps> = (props) => {
21+
const { children, type } = props;
22+
23+
const theme = useTheme();
24+
25+
return (
26+
<div
27+
css={{
28+
backgroundColor: theme.experimental.roles[type].background,
29+
border: `1px solid ${theme.experimental.roles[type].outline}`,
30+
borderRadius: theme.shape.borderRadius,
31+
color: theme.experimental.roles[type].text,
32+
padding: theme.spacing(1, 2),
33+
margin: theme.spacing(1, 0),
34+
}}
35+
>
36+
{children}
37+
</div>
38+
);
39+
};

‎site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { Pill } from "components/Pill/Pill";
22
import ReactMarkdown from "react-markdown";
33
import { colors } from "theme/colors";
4-
import { useTheme } from "@mui/system";
5-
import { css } from "@emotion/react";
4+
import { css, useTheme } from "@emotion/react";
65
import { readableForegroundColor } from "utils/colors";
76

87
export interface ServiceBannerViewProps {

‎site/src/components/DeploySettingsLayout/Sidebar.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ import { Stack } from "components/Stack/Stack";
1212
import type { ElementType, FC, PropsWithChildren, ReactNode } from "react";
1313
import { NavLink } from "react-router-dom";
1414
import { useDashboard } from "components/Dashboard/DashboardProvider";
15-
import { useTheme } from "@mui/system";
1615
import { css } from "@emotion/css";
16+
import { useTheme } from "@emotion/react";
1717

1818
const SidebarNavItem: FC<
1919
PropsWithChildren<{ href: string; icon: ReactNode }>
@@ -66,6 +66,9 @@ const SidebarNavItem: FC<
6666
);
6767
};
6868

69+
// TODO: :axe:
70+
// do we really have like 5 of the same file?
71+
6972
const SidebarNavItemIcon: FC<{ icon: ElementType }> = ({ icon: Icon }) => {
7073
return <Icon css={{ width: 16, height: 16 }} />;
7174
};
@@ -74,11 +77,7 @@ export const Sidebar: React.FC = () => {
7477
const dashboard = useDashboard();
7578

7679
return (
77-
<nav
78-
css={{
79-
width: 245,
80-
}}
81-
>
80+
<nav css={{ width: 245 }}>
8281
<SidebarNavItem
8382
href="general"
8483
icon={<SidebarNavItemIcon icon={LaunchOutlined} />}

‎site/src/components/Form/Form.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
type PropsWithChildren,
77
useContext,
88
} from "react";
9-
import { AlphaBadge } from "components/DeploySettingsLayout/Badges";
9+
import { AlphaBadge } from "components/Badges/Badges";
1010
import { Stack } from "components/Stack/Stack";
1111
import {
1212
FormFooter as BaseFormFooter,

0 commit comments

Comments
 (0)