diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx index 35b52cefb8..7b5f7989dc 100644 --- a/site/src/components/Badges/Badges.tsx +++ b/site/src/components/Badges/Badges.tsx @@ -1,5 +1,4 @@ import { Badge } from "#/components/Badge/Badge"; -import { Stack } from "#/components/Stack/Stack"; export const EnabledBadge: React.FC = () => { return ( @@ -51,8 +50,6 @@ export const DeprecatedBadge: React.FC = () => { export const Badges: React.FC = ({ children }) => { return ( - - {children} - +
{children}
); }; diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx index 851dd5534c..2c91e4aa0b 100644 --- a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx +++ b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx @@ -1,7 +1,6 @@ import type { Interpolation, Theme } from "@emotion/react"; import TextField from "@mui/material/TextField"; import { type FC, type FormEvent, useId, useState } from "react"; -import { Stack } from "../../Stack/Stack"; import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog"; interface DeleteDialogProps { @@ -62,17 +61,15 @@ export const DeleteDialog: FC = ({ confirmText={confirmText} description={ <> - +

{verb ?? "Deleting"} this {entity} is irreversible!

- {Boolean(info) &&
{info}
} -

Type {name} below to confirm.

- +
= ({ if (!isUploading && file) { return ( - - +
{file.name} - +
- + ); } @@ -66,7 +63,7 @@ export const FileUpload: FC = ({ {...clickable} {...fileDrop} > - +
{isUploading ? ( @@ -75,11 +72,11 @@ export const FileUpload: FC = ({ )}
- +
{title} {description} - - +
+
= ({ ); }; -export const FormFields: FC> = (props) => { +export const FormFields: FC> = ({ + className, + ...props +}) => { return ( - diff --git a/site/src/components/FullPageForm/FullPageForm.stories.tsx b/site/src/components/FullPageForm/FullPageForm.stories.tsx index 2820f075e2..ac270a45ba 100644 --- a/site/src/components/FullPageForm/FullPageForm.stories.tsx +++ b/site/src/components/FullPageForm/FullPageForm.stories.tsx @@ -3,7 +3,6 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import type { FC } from "react"; import { Button } from "#/components/Button/Button"; import { FormFooter } from "#/components/Form/Form"; -import { Stack } from "../Stack/Stack"; import { FullPageForm, type FullPageFormProps } from "./FullPageForm"; const Template: FC = (props) => ( @@ -13,14 +12,14 @@ const Template: FC = (props) => ( e.preventDefault(); }} > - +
- +
); diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx index 9654422c89..e0d0d4bbe8 100644 --- a/site/src/components/RichParameterInput/RichParameterInput.tsx +++ b/site/src/components/RichParameterInput/RichParameterInput.tsx @@ -12,12 +12,12 @@ import { Button } from "#/components/Button/Button"; import { ExternalImage } from "#/components/ExternalImage/ExternalImage"; import { MemoizedMarkdown } from "#/components/Markdown/Markdown"; import { Pill } from "#/components/Pill/Pill"; -import { Stack } from "#/components/Stack/Stack"; import { Tooltip, TooltipContent, TooltipTrigger, } from "#/components/Tooltip/Tooltip"; +import { cn } from "#/utils/cn"; import type { AutofillBuildParameter, AutofillSource, @@ -182,7 +182,7 @@ const ParameterLabel: FC = ({ parameter, isPreset }) => { return ( ); }; @@ -235,10 +235,12 @@ export const RichParameterInput: FC = ({ const [hideSuggestion, setHideSuggestion] = useState(false); return ( - @@ -276,7 +278,7 @@ export const RichParameterInput: FC = ({ )} - + ); }; @@ -332,7 +334,7 @@ const RichParameterField: FC = ({ value={option.value} control={} label={ - +
{option.icon && ( = ({ /> )} {option.description ? ( - {small ? ( @@ -366,11 +370,11 @@ const RichParameterField: FC = ({ )} - +
) : ( option.name )} - + } /> ))} diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx index 0a21f8dec6..f95098792d 100644 --- a/site/src/components/Sidebar/Sidebar.tsx +++ b/site/src/components/Sidebar/Sidebar.tsx @@ -1,6 +1,5 @@ import type { ElementType, FC, ReactNode } from "react"; import { Link, NavLink } from "react-router"; -import { Stack } from "#/components/Stack/Stack"; import { cn } from "#/utils/cn"; interface SidebarProps { @@ -31,7 +30,7 @@ export const SidebarHeader: FC = ({ linkTo, }) => { return ( - +
{avatar}
{linkTo ? ( @@ -45,7 +44,7 @@ export const SidebarHeader: FC = ({ {subtitle}
- +
); }; @@ -100,10 +99,10 @@ export const SidebarNavItem: FC = ({ ) } > - +
{children} - +
); }; diff --git a/site/src/components/Stack/Stack.stories.tsx b/site/src/components/Stack/Stack.stories.tsx deleted file mode 100644 index 7931b96aa5..0000000000 --- a/site/src/components/Stack/Stack.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react-vite"; -import { Stack } from "./Stack"; - -const meta: Meta = { - title: "components/Stack", - component: Stack, - args: { - children: ( - <> - チェンソーマン - ジョジョの奇妙な冒険 - スパイファミリー - 葬送のフリーレン - 少女革命ウテナ - PSYCHO-PASS サイコパス - 機動戦士ガンダム 水星の魔女 - 勇気爆発バーンブレイバーン - Re:ゼロから始める異世界生活 - ダンジョン飯 - - ), - }, -}; - -export default meta; -type Story = StoryObj; - -export const Vertical: Story = {}; - -export const VerticalCenter: Story = { - args: { - alignItems: "center", - }, -}; - -export const Horizontal: Story = { - args: { - direction: "row", - }, -}; - -export const HorizontalWrap: Story = { - args: { - direction: "row", - wrap: "wrap", - }, -}; diff --git a/site/src/components/Stack/Stack.tsx b/site/src/components/Stack/Stack.tsx deleted file mode 100644 index e2a660167a..0000000000 --- a/site/src/components/Stack/Stack.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import type { CSSObject } from "@emotion/react"; - -type StackProps = React.ComponentPropsWithRef<"div"> & { - className?: string; - direction?: "column" | "row"; - spacing?: number; - alignItems?: CSSObject["alignItems"]; - justifyContent?: CSSObject["justifyContent"]; - wrap?: CSSObject["flexWrap"]; -}; - -/** - * @deprecated Stack component is deprecated. Use Tailwind flex utilities instead. - */ -export const Stack: React.FC = (props) => { - const { - children, - direction = "column", - spacing = 2, - alignItems, - justifyContent, - wrap, - ...divProps - } = props; - - return ( -
- {children} -
- ); -}; diff --git a/site/src/components/StackLabel/StackLabel.tsx b/site/src/components/StackLabel/StackLabel.tsx index ad33fecb57..0f701f29f5 100644 --- a/site/src/components/StackLabel/StackLabel.tsx +++ b/site/src/components/StackLabel/StackLabel.tsx @@ -1,5 +1,4 @@ import type { ComponentProps, FC } from "react"; -import { Stack } from "#/components/Stack/Stack"; import { cn } from "#/utils/cn"; /** @@ -7,14 +6,13 @@ import { cn } from "#/utils/cn"; * buttons, checkboxes, or switches to ensure proper styling. */ -export const StackLabel: FC> = ({ +export const StackLabel: FC> = ({ className, ...props }) => { return ( - ); diff --git a/site/src/modules/management/DeploymentSidebarView.tsx b/site/src/modules/management/DeploymentSidebarView.tsx index 75d6528e7b..2e6306ac10 100644 --- a/site/src/modules/management/DeploymentSidebarView.tsx +++ b/site/src/modules/management/DeploymentSidebarView.tsx @@ -5,7 +5,6 @@ import { Sidebar as BaseSidebar, SettingsSidebarNavItem as SidebarNavItem, } from "#/components/Sidebar/Sidebar"; -import { Stack } from "#/components/Stack/Stack"; import type { Permissions } from "#/modules/permissions"; import { getPrereleaseFlag } from "#/utils/buildInfo"; @@ -86,9 +85,9 @@ export const DeploymentSidebarView: FC = ({ )} {permissions.viewAnyGroup && ( - +
Groups {showOrganizations && } - +
)} {permissions.viewOrganizationIDPSyncSettings && ( @@ -108,9 +107,9 @@ export const DeploymentSidebarView: FC = ({ )} {permissions.editDeploymentConfig && ( - +
Manage Coder Agents - +
)} diff --git a/site/src/modules/resources/AgentMetadata.tsx b/site/src/modules/resources/AgentMetadata.tsx index 7668a9d718..8942ea4778 100644 --- a/site/src/modules/resources/AgentMetadata.tsx +++ b/site/src/modules/resources/AgentMetadata.tsx @@ -15,7 +15,6 @@ import type { WorkspaceAgentMetadata, } from "#/api/typesGenerated"; import { Skeleton } from "#/components/Skeleton/Skeleton"; -import { Stack } from "#/components/Stack/Stack"; import { Tooltip, TooltipContent, @@ -139,7 +138,7 @@ export const AgentMetadata: FC = ({ const AgentMetadataSkeleton: FC = () => { return ( - +
@@ -154,7 +153,7 @@ const AgentMetadataSkeleton: FC = () => {
- +
); }; diff --git a/site/src/modules/resources/AgentOutdatedTooltip.tsx b/site/src/modules/resources/AgentOutdatedTooltip.tsx index 499a17b2bf..8fbbaf01a5 100644 --- a/site/src/modules/resources/AgentOutdatedTooltip.tsx +++ b/site/src/modules/resources/AgentOutdatedTooltip.tsx @@ -10,7 +10,6 @@ import { HelpPopoverTitle, HelpPopoverTrigger, } from "#/components/HelpPopover/HelpPopover"; -import { Stack } from "#/components/Stack/Stack"; import { agentVersionStatus } from "../../utils/workspace"; type AgentOutdatedTooltipProps = { @@ -46,25 +45,25 @@ export const AgentOutdatedTooltip: FC = ({ - +
{title} {text}
- +
Agent version {agent.version} - +
- +
Server version {serverVersion} - +
= ({ Update workspace - +
); diff --git a/site/src/modules/resources/AgentRowPreview.tsx b/site/src/modules/resources/AgentRowPreview.tsx index 4c5253060a..00db3bde07 100644 --- a/site/src/modules/resources/AgentRowPreview.tsx +++ b/site/src/modules/resources/AgentRowPreview.tsx @@ -3,7 +3,6 @@ import type { FC } from "react"; import type { WorkspaceAgent } from "#/api/typesGenerated"; import { TerminalIcon } from "#/components/Icons/TerminalIcon"; import { VSCodeIcon } from "#/components/Icons/VSCodeIcon"; -import { Stack } from "#/components/Stack/Stack"; import { DisplayAppNameMap } from "./AppLink/AppLink"; import { AppPreview } from "./AppLink/AppPreview"; import { BaseIcon } from "./AppLink/BaseIcon"; @@ -22,27 +21,21 @@ export const AgentRowPreview: FC = ({ alignValues, }) => { return ( - - +
- - = ({ > Agent: {agent.name} - +
- = ({ {agent.operating_system} - +
- Apps: - +
{/* We display all modules returned in agent.apps */} {agent.apps.map((app) => ( @@ -130,11 +114,11 @@ export const AgentRowPreview: FC = ({ {agent.apps.length === 0 && agent.display_apps.length === 0 && ( None )} - - - - - +
+ + + + ); }; diff --git a/site/src/modules/resources/AppLink/AppPreview.tsx b/site/src/modules/resources/AppLink/AppPreview.tsx index cd9c39280b..4389c79722 100644 --- a/site/src/modules/resources/AppLink/AppPreview.tsx +++ b/site/src/modules/resources/AppLink/AppPreview.tsx @@ -1,14 +1,8 @@ import type { FC, PropsWithChildren } from "react"; -import { Stack } from "#/components/Stack/Stack"; export const AppPreview: FC = ({ children }) => { return ( - +
{children} - +
); }; diff --git a/site/src/modules/resources/ResourceCard.tsx b/site/src/modules/resources/ResourceCard.tsx index 71e99544ed..c7cc0a9edf 100644 --- a/site/src/modules/resources/ResourceCard.tsx +++ b/site/src/modules/resources/ResourceCard.tsx @@ -5,7 +5,6 @@ import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown"; import { Button } from "#/components/Button/Button"; import { CopyableValue } from "#/components/CopyableValue/CopyableValue"; import { MemoizedInlineMarkdown } from "#/components/Markdown/InlineMarkdown"; -import { Stack } from "#/components/Stack/Stack"; import { Tooltip, TooltipContent, @@ -97,13 +96,11 @@ export const ResourceCard: FC = ({ resource, agentRow }) => { return (
- - +
@@ -111,7 +108,7 @@ export const ResourceCard: FC = ({ resource, agentRow }) => {
{resource.type}
{resource.name}
- +
= ({ resource, agentRow }) => { )} - +
{resource.agents && resource.agents.length > 0 && (
{resource.agents.map(agentRow)}
diff --git a/site/src/modules/resources/Resources.tsx b/site/src/modules/resources/Resources.tsx index 090243fd66..6cdb932696 100644 --- a/site/src/modules/resources/Resources.tsx +++ b/site/src/modules/resources/Resources.tsx @@ -2,7 +2,6 @@ import { type FC, type JSX, useState } from "react"; import type { WorkspaceAgent, WorkspaceResource } from "#/api/typesGenerated"; import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown"; import { Button } from "#/components/Button/Button"; -import { Stack } from "#/components/Stack/Stack"; import { ResourceCard } from "./ResourceCard"; const countAgents = (resource: WorkspaceResource) => { @@ -26,7 +25,7 @@ export const Resources: FC = ({ resources, agentRow }) => { const hasHideResources = resources.some((r) => r.hide); return ( - +
{displayResources.map((resource) => ( = ({ resources, agentRow }) => {
)} - + ); }; diff --git a/site/src/modules/resources/SSHButton/SSHButton.tsx b/site/src/modules/resources/SSHButton/SSHButton.tsx index a4f0f01b5b..0a6761d0d9 100644 --- a/site/src/modules/resources/SSHButton/SSHButton.tsx +++ b/site/src/modules/resources/SSHButton/SSHButton.tsx @@ -14,7 +14,6 @@ import { PopoverContent, PopoverTrigger, } from "#/components/Popover/Popover"; -import { Stack } from "#/components/Stack/Stack"; import { docs } from "#/utils/docs"; interface AgentSSHButtonProps { @@ -49,7 +48,7 @@ export const AgentSSHButton: FC = ({
    - +
    = ({ helpText="Connect to the agent:" codeExample={`ssh ${agentName}.${workspaceName}.${workspaceOwnerUsername}.${sshSuffix}`} /> - +
diff --git a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx index 36743eba0a..9254cb29bc 100644 --- a/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx +++ b/site/src/modules/workspaces/DynamicParameter/DynamicParameter.tsx @@ -36,7 +36,6 @@ import { SelectValue, } from "#/components/Select/Select"; import { Slider } from "#/components/Slider/Slider"; -import { Stack } from "#/components/Stack/Stack"; import { Switch } from "#/components/Switch/Switch"; import { TagInput } from "#/components/TagInput/TagInput"; import { Textarea } from "#/components/Textarea/Textarea"; @@ -505,7 +504,7 @@ const MaskableInput: FC = ({ const [showMaskedInput, setShowMaskedInput] = useState(false); return ( - +
= ({ )} )} - +
); }; @@ -552,7 +551,7 @@ const MaskableTextArea: FC = ({ const [showMaskedInput, setShowMaskedInput] = useState(false); return ( - +