Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

feat: migrate Alert component from MUI to shadcn#18412

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Draft
blink-so wants to merge2 commits intomain
base:main
Choose a base branch
Loading
fromfeat/migrate-alert-to-shadcn
Draft
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 69 additions & 27 deletionssite/src/components/Alert/Alert.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,55 @@
import MuiAlert, {
type AlertColor as MuiAlertColor,
type AlertProps as MuiAlertProps,
// biome-ignore lint/nursery/noRestrictedImports: Used as base component
} from "@mui/material/Alert";
import { cva, type VariantProps } from "class-variance-authority";
import Collapse from "@mui/material/Collapse";
import { Button } from "components/Button/Button";
import {
type FC,
type PropsWithChildren,
type ReactNode,
useState,
} from "react";
import { forwardRef, useState, type FC, type PropsWithChildren, type ReactNode } from "react";
import { cn } from "utils/cn";

export type AlertColor = MuiAlertColor;
const alertVariants = cva(
"relative w-full rounded-lg border p-4 text-left",
{
variants: {
variant: {
default: "bg-surface-primary text-content-primary border-border-default",
info: "bg-blue-50 text-blue-900 border-blue-200 dark:bg-blue-950 dark:text-blue-100 dark:border-blue-800",
success: "bg-green-50 text-green-900 border-green-200 dark:bg-green-950 dark:text-green-100 dark:border-green-800",
warning: "bg-yellow-50 text-yellow-900 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-100 dark:border-yellow-800",
error: "bg-red-50 text-red-900 border-red-200 dark:bg-red-950 dark:text-red-100 dark:border-red-800",
},
},
defaultVariants: {
variant: "default",
},
},
);

export type AlertProps = MuiAlertProps & {
// Map MUI severity to our variant
const severityToVariant = {
info: "info",
success: "success",
warning: "warning",
error: "error",
} as const;

export type AlertColor = "info" | "success" | "warning" | "error";

export type AlertProps = {
actions?: ReactNode;
dismissible?: boolean;
onDismiss?: () => void;
};
severity?: AlertColor;
children?: ReactNode;
className?: string;
} & VariantProps<typeof alertVariants>;

export const Alert: FC<AlertProps> = ({
children,
actions,
dismissible,
severity = "info",
onDismiss,
...alertProps
className,
variant,
...props
}) => {
const [open, setOpen] = useState(true);

Expand All@@ -37,14 +60,21 @@ export const Alert: FC<AlertProps> = ({
return null;
}

// Use severity to determine variant if variant is not explicitly provided
const finalVariant = variant || (severity in severityToVariant ? severityToVariant[severity] : "default");

return (
<Collapse in>
<MuiAlert
{...alertProps}
css={{ textAlign: "left" }}
severity={severity}
action={
<>
<div
role="alert"
className={cn(alertVariants({ variant: finalVariant }), className)}
{...props}
>
<div className="flex items-start justify-between">
<div className="flex-1">
{children}
</div>
<div className="flex items-center gap-2 ml-4">
{/* CTAs passed in by the consumer */}
{actions}

Expand All@@ -62,22 +92,34 @@ export const Alert: FC<AlertProps> = ({
Dismiss
</Button>
)}
</>
}
>
{children}
</MuiAlert>
</div>
</div>
</div>
</Collapse>
);
};

export const AlertDetail: FC<PropsWithChildren> = ({ children }) => {
return (
<span
css={(theme) => ({ color: theme.palette.text.secondary, fontSize: 13 })}
className="text-sm opacity-75"
data-chromatic="ignore"
>
{children}
</span>
);
};

// Export AlertTitle and AlertDescription for compatibility
export const AlertTitle = forwardRef<
HTMLHeadingElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h5
ref={ref}
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
{...props}
/>
));
AlertTitle.displayName = "AlertTitle";

3 changes: 1 addition & 2 deletionssite/src/components/Alert/ErrorAlert.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
import AlertTitle from "@mui/material/AlertTitle";
import { getErrorDetail, getErrorMessage, getErrorStatus } from "api/errors";
import type { FC } from "react";
import { Link } from "../Link/Link";
import { Alert, AlertDetail, type AlertProps } from "./Alert";
import { Alert, AlertDetail,AlertTitle,type AlertProps } from "./Alert";

export const ErrorAlert: FC<
Omit<AlertProps, "severity" | "children"> & { error: unknown }
Expand Down
4 changes: 2 additions & 2 deletionssite/src/components/GitDeviceAuth/GitDeviceAuth.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
import type { Interpolation, Theme } from "@emotion/react";
import AlertTitle from "@mui/material/AlertTitle";

import CircularProgress from "@mui/material/CircularProgress";
import Link from "@mui/material/Link";
import type { ApiErrorResponse } from "api/errors";
import type { ExternalAuthDevice } from "api/typesGenerated";
import { isAxiosError } from "axios";
import { Alert, AlertDetail } from "components/Alert/Alert";
import { Alert, AlertDetail, AlertTitle } from "components/Alert/Alert";
import { CopyButton } from "components/CopyButton/CopyButton";
import { ExternalLinkIcon } from "lucide-react";
import type { FC } from "react";
Expand Down
4 changes: 1 addition & 3 deletionssite/src/modules/provisioners/ProvisionerAlert.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
import type { Theme } from "@emotion/react";
import AlertTitle from "@mui/material/AlertTitle";
import { Alert, type AlertColor } from "components/Alert/Alert";
import { AlertDetail } from "components/Alert/Alert";
import { Alert, AlertDetail, AlertTitle, type AlertColor } from "components/Alert/Alert";
import { ProvisionerTag } from "modules/provisioners/ProvisionerTag";
import type { FC } from "react";

Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
import { css } from "@emotion/css";
import AlertTitle from "@mui/material/AlertTitle";

import Autocomplete from "@mui/material/Autocomplete";
import CircularProgress from "@mui/material/CircularProgress";
import TextField from "@mui/material/TextField";
import { templateVersions } from "api/queries/templates";
import type { TemplateVersion, Workspace } from "api/typesGenerated";
import { Alert } from "components/Alert/Alert";
import { Alert, AlertTitle } from "components/Alert/Alert";
import { Avatar } from "components/Avatar/Avatar";
import { AvatarData } from "components/Avatar/AvatarData";
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
import AlertTitle from "@mui/material/AlertTitle";

import type {
DAUsResponse,
Experiments,
Expand All@@ -15,7 +15,7 @@ import { Stack } from "components/Stack/Stack";
import type { FC } from "react";
import { useDeploymentOptions } from "utils/deployOptions";
import { docs } from "utils/docs";
import { Alert } from "../../../components/Alert/Alert";
import { Alert, AlertTitle } from "../../../components/Alert/Alert";
import OptionsTable from "../OptionsTable";
import { UserEngagementChart } from "./UserEngagementChart";

Expand Down
4 changes: 2 additions & 2 deletionssite/src/pages/SetupPage/SetupPageView.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import GitHubIcon from "@mui/icons-material/GitHub";
import AlertTitle from "@mui/material/AlertTitle";

import Autocomplete from "@mui/material/Autocomplete";
import MuiButton from "@mui/material/Button";
import Checkbox from "@mui/material/Checkbox";
Expand All@@ -9,7 +9,7 @@ import TextField from "@mui/material/TextField";
import { countries } from "api/countriesGenerated";
import type * as TypesGen from "api/typesGenerated";
import { isAxiosError } from "axios";
import { Alert, AlertDetail } from "components/Alert/Alert";
import { Alert, AlertDetail, AlertTitle } from "components/Alert/Alert";
import { Button } from "components/Button/Button";
import { FormFields, VerticalForm } from "components/Form/Form";
import { CoderIcon } from "components/Icons/CoderIcon";
Expand Down
4 changes: 2 additions & 2 deletionssite/src/pages/WorkspacePage/Workspace.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,9 +2,9 @@ import type { Interpolation, Theme } from "@emotion/react";
import { useTheme } from "@emotion/react";
import HistoryOutlined from "@mui/icons-material/HistoryOutlined";
import HubOutlined from "@mui/icons-material/HubOutlined";
import AlertTitle from "@mui/material/AlertTitle";

import type * as TypesGen from "api/typesGenerated";
import { Alert, AlertDetail } from "components/Alert/Alert";
import { Alert, AlertDetail, AlertTitle } from "components/Alert/Alert";
import { SidebarIconButton } from "components/FullPageLayout/Sidebar";
import { useSearchParamsKey } from "hooks/useSearchParamsKey";
import { ProvisionerStatusAlert } from "modules/provisioners/ProvisionerStatusAlert";
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp