Skip to content

Commit b38fc57

Browse files
SkySailsSkySails
committed
chore: run linting
1 parent ede29b4 commit b38fc57

26 files changed

+1268
-1070
lines changed

‎examples/playground/src/MainWindow.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import MapPane from "./components/map";
1+
import MapPane from "./components/map"
22

33
export default function MainWindow() {
4-
return (
5-
<div className="h-screen w-screen">
6-
<MapPane />
7-
</div>
8-
)
9-
}
4+
return (
5+
<div className="h-screen w-screen">
6+
<MapPane />
7+
</div>
8+
)
9+
}

‎examples/playground/src/Root.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
import MainWindow from "./MainWindow"
2-
import SideBar from "./components/SideBar"
31
import { Route, Routes } from "react-router-dom"
4-
import useUserUpdater from "./hooks/useUserUpdater"
2+
import SideBar from "./components/SideBar"
53
import useAppConfigLoader from "./hooks/useAppConfigLoader"
4+
import useUserUpdater from "./hooks/useUserUpdater"
5+
import MainWindow from "./MainWindow"
6+
import Amdb from "./pages/Amdb"
67
import App from "./pages/App"
78
import Auth from "./pages/Auth"
8-
import Tiles from "./pages/Tiles"
99
import Charts from "./pages/Charts"
10-
import Amdb from "./pages/Amdb"
1110
import Packages from "./pages/Packages"
11+
import Tiles from "./pages/Tiles"
1212

1313
export default function Root() {
14-
useAppConfigLoader();
15-
useUserUpdater();
14+
useAppConfigLoader()
15+
useUserUpdater()
1616

1717
return (
18-
<main className='flex flex-row h-screen'>
18+
<main className="flex flex-row h-screen">
1919
<SideBar />
2020
<Routes>
2121
<Route path="/app" element={<App />} />

‎examples/playground/src/components/Button.tsx

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,39 @@
1-
import clsx from "clsx";
2-
import { PropsWithChildren } from "react";
1+
import clsx from "clsx"
2+
import { PropsWithChildren } from "react"
33

44
interface Props {
5-
selected?: boolean;
6-
className?: string;
7-
disabled?: boolean;
8-
onClick: () => void;
5+
selected?: boolean
6+
className?: string
7+
disabled?: boolean
8+
onClick: () => void
99
}
1010

1111
export default function Button({ selected, onClick, children, className, disabled }: PropsWithChildren<Props>) {
12-
return (
13-
<button disabled={disabled} onClick={onClick} className={clsx("p-1 rounded-lg shadow-lg border-blue-gray-400 border-[1px] text-white text-sm font-semibold disabled:text-gray-200", selected ? 'bg-blue-50 enabled:hover:bg-blue-25' : 'bg-blue-gray-200 enabled:hover:bg-blue-gray-50', className)}>
14-
{children}
15-
</button>
16-
)
12+
return (
13+
<button
14+
disabled={disabled}
15+
onClick={onClick}
16+
className={clsx(
17+
"p-1 rounded-lg shadow-lg border-blue-gray-400 border-[1px] text-white text-sm font-semibold disabled:text-gray-200",
18+
selected ? "bg-blue-50 enabled:hover:bg-blue-25" : "bg-blue-gray-200 enabled:hover:bg-blue-gray-50",
19+
className,
20+
)}>
21+
{children}
22+
</button>
23+
)
1724
}
1825

19-
export function LargeButton({ onClick, children, className, disabled }: PropsWithChildren<Omit<Props, 'selected'>>) {
20-
return (
21-
<button disabled={disabled} onClick={onClick} className={clsx("p-2 rounded-lg shadow-lg text-white text-sm font-semibold disabled:text-gray-200", 'bg-blue-50 enabled:hover:bg-blue-25', className)}>
22-
{children}
23-
</button>
24-
)
25-
}
26+
export function LargeButton({ onClick, children, className, disabled }: PropsWithChildren<Omit<Props, "selected">>) {
27+
return (
28+
<button
29+
disabled={disabled}
30+
onClick={onClick}
31+
className={clsx(
32+
"p-2 rounded-lg shadow-lg text-white text-sm font-semibold disabled:text-gray-200",
33+
"bg-blue-50 enabled:hover:bg-blue-25",
34+
className,
35+
)}>
36+
{children}
37+
</button>
38+
)
39+
}

‎examples/playground/src/components/JsonView.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
import clsx from "clsx";
1+
import clsx from "clsx"
22

33
interface Props {
4-
content: any;
5-
onClick?: () => void;
4+
content: any
5+
onClick?: () => void
66
}
77

88
export default function JsonView({ content, onClick }: Props) {
9-
return (
10-
<div className={clsx("pane overflow-auto w-full no-scrollbar", onClick && 'cursor-pointer')}>
11-
<pre className={clsx("text-white text-xs", onClick && 'hover:text-gray-50')}>{JSON.stringify(content, null, 2)}</pre>
12-
</div>
13-
)
14-
}
9+
return (
10+
<div className={clsx("pane overflow-auto w-full no-scrollbar", onClick && "cursor-pointer")}>
11+
<pre className={clsx("text-white text-xs", onClick && "hover:text-gray-50")}>
12+
{JSON.stringify(content, null, 2)}
13+
</pre>
14+
</div>
15+
)
16+
}

‎examples/playground/src/components/SegmentControl.tsx

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,35 @@
11
import clsx from "clsx"
22

33
interface Props {
4-
segments: (string | { label: string, disabled?: boolean })[]
5-
index: number,
6-
onChange: (index: number) => void,
7-
inactiveTextColor?: (index: number) => string,
8-
activeBackgroundColor?: (index: number) => string,
4+
segments: (string | { label: string; disabled?: boolean })[]
5+
index: number
6+
onChange: (index: number) => void
7+
inactiveTextColor?: (index: number) => string
8+
activeBackgroundColor?: (index: number) => string
99
}
1010

1111
export default function SegmentControl({ segments, index, onChange, inactiveTextColor, activeBackgroundColor }: Props) {
12-
return (
13-
<div className="flex flex-row bg-ng-background-500 rounded-md border-2 border-ng-background-600">
14-
{segments.map((segment, i) => {
15-
const [disabled, label] = typeof segment === 'object' ? [segment.disabled ?? false, segment.label] : [false, segment];
12+
return (
13+
<div className="flex flex-row bg-ng-background-500 rounded-md border-2 border-ng-background-600">
14+
{segments.map((segment, i) => {
15+
const [disabled, label] =
16+
typeof segment === "object" ? [segment.disabled ?? false, segment.label] : [false, segment]
1617

17-
return (
18-
<button
19-
onClick={() => onChange(i)}
20-
disabled={disabled}
21-
className={clsx(
22-
"flex-1 rounded-md font-semibold text-xs enabled:hover:shadow-lg p-1 disabled:text-gray-300",
23-
index === i ? activeBackgroundColor?.(i) ?? 'bg-blue-50' : 'enabled:hover:bg-white enabled:hover:bg-opacity-5',
24-
index === i || !inactiveTextColor ? 'text-white' : inactiveTextColor?.(i)
25-
)}>
26-
{label}
27-
</button>
28-
)
29-
})}
30-
</div>
31-
);
32-
}
18+
return (
19+
<button
20+
onClick={() => onChange(i)}
21+
disabled={disabled}
22+
className={clsx(
23+
"flex-1 rounded-md font-semibold text-xs enabled:hover:shadow-lg p-1 disabled:text-gray-300",
24+
index === i
25+
? activeBackgroundColor?.(i) ?? "bg-blue-50"
26+
: "enabled:hover:bg-white enabled:hover:bg-opacity-5",
27+
index === i || !inactiveTextColor ? "text-white" : inactiveTextColor?.(i),
28+
)}>
29+
{label}
30+
</button>
31+
)
32+
})}
33+
</div>
34+
)
35+
}

‎examples/playground/src/components/SideBar.tsx

Lines changed: 60 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,70 @@
1-
import clsx from "clsx";
2-
import { IconType } from "react-icons";
3-
import { FaDatabase, FaDownload, FaGlobe, FaMap, FaUser } from "react-icons/fa";
4-
import { MdOutlineSettings } from "react-icons/md";
5-
import { NavLink } from "react-router-dom";
6-
import { appState } from "../state/app";
7-
import { useRecoilValue } from "recoil";
8-
import { Scope } from "@navigraph/app";
9-
import { userState } from "../state/user";
1+
import { Scope } from "@navigraph/app"
2+
import clsx from "clsx"
3+
import { IconType } from "react-icons"
4+
import { FaDatabase, FaDownload, FaGlobe, FaMap, FaUser } from "react-icons/fa"
5+
import { MdOutlineSettings } from "react-icons/md"
6+
import { NavLink } from "react-router-dom"
7+
import { useRecoilValue } from "recoil"
8+
import { appState } from "../state/app"
9+
import { userState } from "../state/user"
1010

1111
interface SideBarLinkProps {
12-
path: string
13-
children: string
14-
icon: IconType
15-
disabled?: boolean
12+
path: string
13+
children: string
14+
icon: IconType
15+
disabled?: boolean
1616
}
1717

1818
function SideBarLink({ path, children, icon: Icon, disabled }: SideBarLinkProps) {
19-
return (
20-
<NavLink className={clsx("flex flex-col gap-1 items-center group", disabled && 'pointer-events-none')} to={path}>
21-
{({ isActive }) =>
22-
<>
23-
<Icon className={clsx("group-hover:text-blue-25", disabled ? 'text-gray-900' : isActive ? 'text-blue-25' : 'text-white')} size={20} />
24-
<span className={clsx("text-sm group-hover:text-blue-50", disabled ? 'text-gray-900' : isActive ? 'text-blue-25' : 'text-white')}>{children}</span>
25-
</>
26-
}
27-
</NavLink>
28-
)
19+
return (
20+
<NavLink className={clsx("flex flex-col gap-1 items-center group", disabled && "pointer-events-none")} to={path}>
21+
{({ isActive }) => (
22+
<>
23+
<Icon
24+
className={clsx(
25+
"group-hover:text-blue-25",
26+
disabled ? "text-gray-900" : isActive ? "text-blue-25" : "text-white",
27+
)}
28+
size={20}
29+
/>
30+
<span
31+
className={clsx(
32+
"text-sm group-hover:text-blue-50",
33+
disabled ? "text-gray-900" : isActive ? "text-blue-25" : "text-white",
34+
)}>
35+
{children}
36+
</span>
37+
</>
38+
)}
39+
</NavLink>
40+
)
2941
}
3042

3143
export default function SideBar() {
32-
const app = useRecoilValue(appState);
44+
const app = useRecoilValue(appState)
3345

34-
const user = useRecoilValue(userState);
46+
const user = useRecoilValue(userState)
3547

36-
return (
37-
<div className="flex flex-col w-20 p-3 gap-5">
38-
<SideBarLink path="/app" icon={MdOutlineSettings}>App</SideBarLink>
39-
<SideBarLink path="/auth" icon={FaUser} disabled={!app}>Auth</SideBarLink>
40-
<SideBarLink path="/tiles" icon={FaGlobe} disabled={!user?.scope.includes(Scope.TILES)}>Tiles</SideBarLink>
41-
<SideBarLink path="/charts" icon={FaMap} disabled={!user?.scope.includes(Scope.CHARTS)}>Charts</SideBarLink>
42-
<SideBarLink path="/amdb" icon={FaDatabase} disabled={!user?.scope.includes(Scope.AMDB)}>AMDB</SideBarLink>
43-
<SideBarLink path="/packages" icon={FaDownload} disabled={!user?.scope.includes(Scope.FMSDATA)}>Packages</SideBarLink>
44-
</div >
45-
)
46-
}
48+
return (
49+
<div className="flex flex-col w-20 p-3 gap-5">
50+
<SideBarLink path="/app" icon={MdOutlineSettings}>
51+
App
52+
</SideBarLink>
53+
<SideBarLink path="/auth" icon={FaUser} disabled={!app}>
54+
Auth
55+
</SideBarLink>
56+
<SideBarLink path="/tiles" icon={FaGlobe} disabled={!user?.scope.includes(Scope.TILES)}>
57+
Tiles
58+
</SideBarLink>
59+
<SideBarLink path="/charts" icon={FaMap} disabled={!user?.scope.includes(Scope.CHARTS)}>
60+
Charts
61+
</SideBarLink>
62+
<SideBarLink path="/amdb" icon={FaDatabase} disabled={!user?.scope.includes(Scope.AMDB)}>
63+
AMDB
64+
</SideBarLink>
65+
<SideBarLink path="/packages" icon={FaDownload} disabled={!user?.scope.includes(Scope.FMSDATA)}>
66+
Packages
67+
</SideBarLink>
68+
</div>
69+
)
70+
}

‎examples/playground/src/components/TextField.tsx

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,32 @@ import clsx from "clsx"
22
import { IconType } from "react-icons"
33

44
interface Props {
5-
value: string
6-
onChange: (value: string) => void
7-
label: string
8-
icon?: IconType
9-
className?: string
10-
disabled?: boolean
5+
value: string
6+
onChange: (value: string) => void
7+
label: string
8+
icon?: IconType
9+
className?: string
10+
disabled?: boolean
1111
}
1212

1313
export function TextField({ value, onChange, label, className, icon: Icon, disabled }: Props) {
14-
return (
15-
<div className="relative">
16-
<input
17-
type="text"
18-
value={value}
19-
disabled={disabled}
20-
placeholder={label}
21-
onChange={(e) => onChange(e.target.value)}
22-
className={clsx("peer rounded-md bg-ng-background-300 shadow-inner border-ng-background-400 border-2 p-2 text-opacity-100 focus:border-white text-white text-sm disabled:text-gray-100", Icon && 'pl-10', className)}
23-
/>
24-
{Icon && <Icon className="absolute top-1/2 left-3 -translate-y-1/2 peer-focus:text-white text-gray-200" size={15} />}
25-
</div>
26-
)
27-
}
14+
return (
15+
<div className="relative">
16+
<input
17+
type="text"
18+
value={value}
19+
disabled={disabled}
20+
placeholder={label}
21+
onChange={e => onChange(e.target.value)}
22+
className={clsx(
23+
"peer rounded-md bg-ng-background-300 shadow-inner border-ng-background-400 border-2 p-2 text-opacity-100 focus:border-white text-white text-sm disabled:text-gray-100",
24+
Icon && "pl-10",
25+
className,
26+
)}
27+
/>
28+
{Icon && (
29+
<Icon className="absolute top-1/2 left-3 -translate-y-1/2 peer-focus:text-white text-gray-200" size={15} />
30+
)}
31+
</div>
32+
)
33+
}

0 commit comments

Comments
 (0)