Skip to content

Commit b4fb754

Browse files
BrunoQuaresmaBrunoQuaresma
authored
feat(site): show previous agent scripts logs (#12233)
1 parent 0398e3c commit b4fb754

File tree

11 files changed

+553
-352
lines changed

11 files changed

+553
-352
lines changed

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

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Tabs, TabLink } from "./Tabs";
1+
import { Tabs, TabLink, TabsList } from "./Tabs";
22
import type { Meta, StoryObj } from "@storybook/react";
33

44
const meta: Meta<typeof Tabs> = {
@@ -11,12 +11,19 @@ type Story = StoryObj<typeof Tabs>;
1111

1212
export const Default: Story = {
1313
args: {
14+
active: "tab-1",
1415
children: (
15-
<>
16-
<TabLink to="">Tab 1</TabLink>
17-
<TabLink to="tab-3">Tab 2</TabLink>
18-
<TabLink to="tab-4">Tab 3</TabLink>
19-
</>
16+
<TabsList>
17+
<TabLink value="tab-1" to="">
18+
Tab 1
19+
</TabLink>
20+
<TabLink value="tab-2" to="tab-3">
21+
Tab 2
22+
</TabLink>
23+
<TabLink value="tab-3" to="tab-4">
24+
Tab 3
25+
</TabLink>
26+
</TabsList>
2027
),
2128
},
2229
};

‎site/src/components/Tabs/Tabs.tsx

Lines changed: 81 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,95 @@
1-
import { cx } from "@emotion/css";
2-
import { type FC, type PropsWithChildren } from "react";
3-
import { NavLink, NavLinkProps } from "react-router-dom";
4-
import { Margins } from "components/Margins/Margins";
5-
import { type ClassName, useClassName } from "hooks/useClassName";
1+
import { HTMLAttributes, type FC, createContext, useContext } from "react";
2+
import { Link, LinkProps } from "react-router-dom";
3+
import { Interpolation, Theme, useTheme } from "@emotion/react";
4+
5+
export const TAB_PADDING_Y = 12;
6+
export const TAB_PADDING_X = 16;
7+
8+
type TabsContextValue = {
9+
active: string;
10+
};
11+
12+
const TabsContext = createContext<TabsContextValue | undefined>(undefined);
13+
14+
type TabsProps = HTMLAttributes<HTMLDivElement> & TabsContextValue;
15+
16+
export const Tabs: FC<TabsProps> = ({ active, ...htmlProps }) => {
17+
const theme = useTheme();
618

7-
export const Tabs: FC<PropsWithChildren> = ({ children }) => {
819
return (
9-
<div
10-
css={(theme) => ({
11-
borderBottom: `1px solid ${theme.palette.divider}`,
12-
marginBottom: 40,
13-
})}
14-
>
15-
<Margins
20+
<TabsContext.Provider value={{ active }}>
21+
<div
1622
css={{
17-
display: "flex",
18-
alignItems: "center",
19-
gap: 2,
23+
borderBottom: `1px solid ${theme.palette.divider}`,
2024
}}
21-
>
22-
{children}
23-
</Margins>
24-
</div>
25+
{...htmlProps}
26+
/>
27+
</TabsContext.Provider>
28+
);
29+
};
30+
31+
type TabsListProps = HTMLAttributes<HTMLDivElement>;
32+
33+
export const TabsList: FC<TabsListProps> = (props) => {
34+
return (
35+
<div
36+
role="tablist"
37+
css={{
38+
display: "flex",
39+
alignItems: "baseline",
40+
}}
41+
{...props}
42+
/>
2543
);
2644
};
2745

28-
interface TabLinkProps extends NavLinkProps {
29-
className?: string;
30-
}
46+
type TabLinkProps = LinkProps & {
47+
value: string;
48+
};
3149

32-
export const TabLink: FC<TabLinkProps> = ({
33-
className,
34-
children,
35-
...linkProps
36-
}) => {
37-
const tabLink = useClassName(classNames.tabLink, []);
38-
const activeTabLink = useClassName(classNames.activeTabLink, []);
50+
export const TabLink: FC<TabLinkProps> = ({ value, ...linkProps }) => {
51+
const tabsContext = useContext(TabsContext);
52+
53+
if (!tabsContext) {
54+
throw new Error("Tab only can be used inside of Tabs");
55+
}
56+
57+
const isActive = tabsContext.active === value;
3958

4059
return (
41-
<NavLink
42-
className={({ isActive }) =>
43-
cx([tabLink, isActive && activeTabLink, className])
44-
}
60+
<Link
4561
{...linkProps}
46-
>
47-
{children}
48-
</NavLink>
62+
css={[styles.tabLink, isActive ? styles.activeTabLink : ""]}
63+
/>
4964
);
5065
};
5166

52-
const classNames = {
53-
tabLink: (css, theme) => css`
54-
text-decoration: none;
55-
color: ${theme.palette.text.secondary};
56-
font-size: 14px;
57-
display: block;
58-
padding: 0 16px 16px;
59-
60-
&:hover {
61-
color: ${theme.palette.text.primary};
62-
}
63-
`,
64-
activeTabLink: (css, theme) => css`
65-
color: ${theme.palette.text.primary};
66-
position: relative;
67-
68-
&:before {
69-
content: "";
70-
left: 0;
71-
bottom: 0;
72-
height: 2px;
73-
width: 100%;
74-
background: ${theme.palette.primary.main};
75-
position: absolute;
76-
}
77-
`,
78-
} satisfies Record<string, ClassName>;
67+
const styles = {
68+
tabLink: (theme) => ({
69+
textDecoration: "none",
70+
color: theme.palette.text.secondary,
71+
fontSize: 14,
72+
display: "block",
73+
padding: `${TAB_PADDING_Y}px ${TAB_PADDING_X}px`,
74+
fontWeight: 500,
75+
lineHeight: "1",
76+
77+
"&:hover": {
78+
color: theme.palette.text.primary,
79+
},
80+
}),
81+
activeTabLink: (theme) => ({
82+
color: theme.palette.text.primary,
83+
position: "relative",
84+
85+
"&:before": {
86+
content: '""',
87+
left: 0,
88+
bottom: -1,
89+
height: 1,
90+
width: "100%",
91+
background: theme.palette.primary.main,
92+
position: "absolute",
93+
},
94+
}),
95+
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)