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

chore: update no-restricted-imports lint rule#12180

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

Merged
aslilac merged 1 commit intomainfromuse-theme-lint
Feb 16, 2024
Merged
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
5 changes: 5 additions & 0 deletionssite/.eslintrc.yaml
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -144,6 +144,11 @@ rules:
"You should use the native HTML elements as span, p, h1, h2, h3..."
- name: "@mui/material/Box"
message: "You should use a <div> instead"
- name: "@mui/material/styles"
importNames: ["Interpolation", "Theme", "useTheme"]
message: "Import from @emotion/react instead."
- name: "lodash"
message: "Import from lodash/<name> instead."
no-unused-vars: "off"
"object-curly-spacing": "off"
react-hooks/exhaustive-deps: warn
Expand Down
62 changes: 34 additions & 28 deletionssite/src/components/FullPageLayout/Sidebar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
import { Interpolation, Theme, useTheme } from "@mui/material/styles";
import { ComponentProps, HTMLAttributes } from "react";
import { Link, LinkProps } from "react-router-dom";
import {typeInterpolation,typeTheme, useTheme } from "@emotion/react";
import {typeComponentProps, type FC, type HTMLAttributes } from "react";
import { Link,typeLinkProps } from "react-router-dom";
import { TopbarIconButton } from "./Topbar";

export const Sidebar = (props:HTMLAttributes<HTMLDivElement>) => {
export const Sidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
const theme = useTheme();
return (
<div
Expand All@@ -23,14 +23,18 @@ export const Sidebar = (props: HTMLAttributes<HTMLDivElement>) => {
);
};

export const SidebarLink= (props: LinkProps) => {
export const SidebarLink: FC<LinkProps>= (props) => {
return <Link css={styles.sidebarItem} {...props} />;
};

export const SidebarItem = (
props: HTMLAttributes<HTMLButtonElement> & { isActive?: boolean },
) => {
const { isActive, ...buttonProps } = props;
interface SidebarItemProps extends HTMLAttributes<HTMLButtonElement> {
isActive?: boolean;
}

export const SidebarItem: FC<SidebarItemProps> = ({
isActive,
...buttonProps
}) => {
const theme = useTheme();

return (
Expand All@@ -49,7 +53,7 @@ export const SidebarItem = (
);
};

export const SidebarCaption = (props:HTMLAttributes<HTMLSpanElement>) => {
export const SidebarCaption: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
return (
<span
css={{
Expand All@@ -66,29 +70,16 @@ export const SidebarCaption = (props: HTMLAttributes<HTMLSpanElement>) => {
);
};

export const SidebarIconButton = (
props: { isActive: boolean } & ComponentProps<typeof TopbarIconButton>,
) => {
const theme = useTheme();
interface SidebarIconButton extends ComponentProps<typeof TopbarIconButton> {
isActive: boolean;
}

export const SidebarIconButton: FC<SidebarIconButton> = (props) => {
return (
<TopbarIconButton
css={[
{ opacity: 0.75, "&:hover": { opacity: 1 } },
props.isActive && {
opacity: 1,
position: "relative",
"&::before": {
content: '""',
position: "absolute",
left: 0,
top: 0,
bottom: 0,
width: 2,
backgroundColor: theme.palette.primary.main,
height: "100%",
},
},
props.isActive && styles.activeSidebarIconButton,
]}
{...props}
/>
Expand All@@ -112,4 +103,19 @@ const styles = {
backgroundColor: theme.palette.action.hover,
},
}),

activeSidebarIconButton: (theme) => ({
opacity: 1,
position: "relative",
"&::before": {
content: '""',
position: "absolute",
left: 0,
top: 0,
bottom: 0,
width: 2,
backgroundColor: theme.palette.primary.main,
height: "100%",
},
}),
} satisfies Record<string, Interpolation<Theme>>;
2 changes: 1 addition & 1 deletionsite/src/components/FullPageLayout/Topbar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { css } from "@emotion/css";
import Button, { ButtonProps } from "@mui/material/Button";
import IconButton, { IconButtonProps } from "@mui/material/IconButton";
import { useTheme } from "@mui/material/styles";
import { useTheme } from "@emotion/react";
import { AvatarProps, ExternalAvatar } from "components/Avatar/Avatar";
import {
type FC,
Expand Down
11 changes: 8 additions & 3 deletionssite/src/components/Menu/Search.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
import SearchOutlined from "@mui/icons-material/SearchOutlined";
// eslint-disable-next-line no-restricted-imports -- use it to have the component prop
import Box, { BoxProps } from "@mui/material/Box";
import { Interpolation, Theme, useTheme } from "@mui/material/styles";
import Box, {typeBoxProps } from "@mui/material/Box";
import {typeInterpolation,typeTheme, useTheme } from "@emotion/react";
import visuallyHidden from "@mui/utils/visuallyHidden";
import { FC, HTMLAttributes, InputHTMLAttributes, forwardRef } from "react";
import {
type FC,
type HTMLAttributes,
type InputHTMLAttributes,
forwardRef,
} from "react";

export const Search = forwardRef<HTMLElement, BoxProps>(
({ children, ...boxProps }, ref) => {
Expand Down
2 changes: 1 addition & 1 deletionsite/src/hooks/usePaginatedQuery.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { useEffect } from "react";
import { useEffectEvent } from "./hookPolyfills";
import { type SetURLSearchParams, useSearchParams } from "react-router-dom";
import{clamp}from "lodash";
import clamp from "lodash/clamp";

import {
type QueryFunctionContext,
Expand Down
2 changes: 1 addition & 1 deletionsite/src/pages/HealthPage/Content.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -14,7 +14,7 @@ import { css } from "@emotion/css";
import DoNotDisturbOnOutlined from "@mui/icons-material/DoNotDisturbOnOutlined";
import { HealthMessage, HealthSeverity } from "api/typesGenerated";
import Link from "@mui/material/Link";
import { useTheme } from "@mui/material/styles";
import { useTheme } from "@emotion/react";

const CONTENT_PADDING = 36;

Expand Down
27 changes: 14 additions & 13 deletionssite/src/pages/HealthPage/DERPPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,16 @@
import { Link, useOutletContext } from "react-router-dom";
import type {
HealthMessage,
HealthSeverity,
HealthcheckReport,
} from "api/typesGenerated";
import Button from "@mui/material/Button";
import LocationOnOutlined from "@mui/icons-material/LocationOnOutlined";
import { Alert } from "components/Alert/Alert";
import { Helmet } from "react-helmet-async";
import { pageTitle } from "utils/page";
import { useTheme } from "@emotion/react";
import { type FC } from "react";
import {
Header,
HeaderTitle,
Expand All@@ -9,19 +21,8 @@ import {
Logs,
HealthyDot,
} from "./Content";
import {
HealthMessage,
HealthSeverity,
HealthcheckReport,
} from "api/typesGenerated";
import Button from "@mui/material/Button";
import LocationOnOutlined from "@mui/icons-material/LocationOnOutlined";
import { healthyColor } from "./healthyColor";
import { Alert } from "components/Alert/Alert";
import { Helmet } from "react-helmet-async";
import { pageTitle } from "utils/page";
import { useTheme } from "@mui/material/styles";
import { DismissWarningButton } from "./DismissWarningButton";
import { healthyColor } from "./healthyColor";

const flags = [
"UDP",
Expand All@@ -38,7 +39,7 @@ const flags = [
"PCP",
];

export const DERPPage = () => {
export const DERPPage: FC = () => {
const { derp } = useOutletContext<HealthcheckReport>();
const { netcheck, regions, netcheck_logs: logs } = derp;
const theme = useTheme();
Expand Down
9 changes: 4 additions & 5 deletionssite/src/pages/HealthPage/ProvisionerDaemonsPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,23 +9,22 @@ import {
} from "./Content";
import { Helmet } from "react-helmet-async";
import { pageTitle } from "utils/page";
import { useTheme } from "@mui/material/styles";
import { useTheme } from "@emotion/react";
import { DismissWarningButton } from "./DismissWarningButton";
import { Alert } from "components/Alert/Alert";
import { HealthcheckReport } from "api/typesGenerated";
importtype{ HealthcheckReport } from "api/typesGenerated";
import { createDayString } from "utils/createDayString";

import { type FC } from "react";
import { useOutletContext } from "react-router-dom";
import Business from "@mui/icons-material/Business";
import Person from "@mui/icons-material/Person";
import SwapHoriz from "@mui/icons-material/SwapHoriz";
import Tooltip from "@mui/material/Tooltip";
import Sell from "@mui/icons-material/Sell";
import { FC } from "react";
import CloseIcon from "@mui/icons-material/Close";
import IconButton from "@mui/material/IconButton";

export const ProvisionerDaemonsPage = () => {
export const ProvisionerDaemonsPage: FC = () => {
const healthStatus = useOutletContext<HealthcheckReport>();
const { provisioner_daemons: daemons } = healthStatus;
const theme = useTheme();
Expand Down
2 changes: 1 addition & 1 deletionsite/src/pages/HealthPage/WebsocketPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,7 +10,7 @@ import {
import { HealthcheckReport } from "api/typesGenerated";
import CodeOutlined from "@mui/icons-material/CodeOutlined";
import Tooltip from "@mui/material/Tooltip";
import { useTheme } from "@mui/material/styles";
import { useTheme } from "@emotion/react";
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
import { Alert } from "components/Alert/Alert";
import { pageTitle } from "utils/page";
Expand Down
7 changes: 4 additions & 3 deletionssite/src/pages/HealthPage/WorkspaceProxyPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,18 +8,19 @@ import {
Main,
Pill,
} from "./Content";
import { HealthcheckReport } from "api/typesGenerated";
import { useTheme } from "@mui/material/styles";
importtype{ HealthcheckReport } from "api/typesGenerated";
import { useTheme } from "@emotion/react";
import { createDayString } from "utils/createDayString";
import PublicOutlined from "@mui/icons-material/PublicOutlined";
import Tooltip from "@mui/material/Tooltip";
import TagOutlined from "@mui/icons-material/TagOutlined";
import { Alert } from "components/Alert/Alert";
import { type FC } from "react";
import { Helmet } from "react-helmet-async";
import { pageTitle } from "utils/page";
import { DismissWarningButton } from "./DismissWarningButton";

export const WorkspaceProxyPage = () => {
export const WorkspaceProxyPage: FC = () => {
const healthStatus = useOutletContext<HealthcheckReport>();
const { workspace_proxy } = healthStatus;
const { regions } = workspace_proxy.workspace_proxies;
Expand Down
4 changes: 2 additions & 2 deletionssite/src/pages/HealthPage/healthyColor.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { Theme } from "@mui/material/styles";
import { HealthSeverity } from "api/typesGenerated";
importtype{ Theme } from "@emotion/react";
importtype{ HealthSeverity } from "api/typesGenerated";

export const healthyColor = (theme: Theme, severity: HealthSeverity) => {
switch (severity) {
Expand Down
16 changes: 10 additions & 6 deletionssite/src/pages/WorkspacePage/ResourcesSidebar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { Interpolation, Theme } from "@emotion/react";
import {typeInterpolation,typeTheme, useTheme } from "@emotion/react";
import Skeleton from "@mui/material/Skeleton";
import {useTheme} from "@mui/material/styles";
import { WorkspaceResource } from "api/typesGenerated";
import {type FC} from "react";
importtype{ WorkspaceResource } from "api/typesGenerated";
import {
Sidebar,
SidebarCaption,
Expand All@@ -16,9 +16,13 @@ type ResourcesSidebarProps = {
isSelected: (resource: WorkspaceResource) => boolean;
};

export const ResourcesSidebar = (props: ResourcesSidebarProps) => {
export const ResourcesSidebar: FC<ResourcesSidebarProps> = ({
failed,
onChange,
isSelected,
resources,
}) => {
const theme = useTheme();
const { failed, onChange, isSelected, resources } = props;

return (
<Sidebar>
Expand DownExpand Up@@ -83,7 +87,7 @@ export const ResourcesSidebar = (props: ResourcesSidebarProps) => {
);
};

export const ResourceSidebarItemSkeleton = () => {
export const ResourceSidebarItemSkeleton: FC = () => {
return (
<div css={[styles.root, { pointerEvents: "none" }]}>
<Skeleton variant="circular" width={16} height={16} />
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
import { useTheme } from "@mui/material/styles";
import { useTheme } from "@emotion/react";
import { Workspace } from "api/typesGenerated";
import { SidebarLink, SidebarCaption } from "components/FullPageLayout/Sidebar";

Expand Down
2 changes: 1 addition & 1 deletionsite/src/pages/WorkspacePage/Workspace.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,7 @@ import { WorkspaceDeletedBanner } from "./WorkspaceDeletedBanner";
import { WorkspaceTopbar } from "./WorkspaceTopbar";
import { HistorySidebar } from "./HistorySidebar";
import HistoryOutlined from "@mui/icons-material/HistoryOutlined";
import { useTheme } from "@mui/material/styles";
import { useTheme } from "@emotion/react";
import { SidebarIconButton } from "components/FullPageLayout/Sidebar";
import HubOutlined from "@mui/icons-material/HubOutlined";
import { ResourcesSidebar } from "./ResourcesSidebar";
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,6 @@ import IconButton from "@mui/material/IconButton";
import RemoveIcon from "@mui/icons-material/RemoveOutlined";
import AddIcon from "@mui/icons-material/AddOutlined";
import Tooltip from "@mui/material/Tooltip";
import _ from "lodash";
import { getErrorMessage } from "api/errors";
import {
updateDeadline,
Expand Down
1 change: 1 addition & 0 deletionssite/src/theme/index.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
// eslint-disable-next-line no-restricted-imports -- we still use `Theme` as a basis for our actual theme, for now.
import type { Theme as MuiTheme } from "@mui/material/styles";
import type * as monaco from "monaco-editor";
import type { NewTheme } from "./experimental";
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp