prettify packages/shared

emiljohansson · Feb 18, 2023 · 01d30c4 · 01d30c4
1 parent 323371e
commit 01d30c4
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 151 deletions.
diff --git a/apps/next/x.eslintrc.js b/apps/next/x.eslintrc.js
diff --git a/package.json b/package.json
@@ -17,6 +17,8 @@
 		"test:ci": "start-server-and-test start http://localhost:3000 \"cypress run --headless --browser chrome\"",
 		"cy:run": "cypress run --headless --browser chrome",
 		"cy:open": "cypress open",
+		"prettier:check": "prettier --check .",
+		"format": "prettier --write \"packages/shared/*.{ts,tsx}\"",
 		"lint": "turbo run lint"
 	},
 	"workspaces": [

diff --git a/packages/shared/CheckboxWithLabel.tsx b/packages/shared/CheckboxWithLabel.tsx
@@ -1,24 +1,25 @@
-import type { CheckboxProps } from '@radix-ui/react-checkbox'
-import { Root, Indicator } from '@radix-ui/react-checkbox'
-import { CheckIcon } from '@radix-ui/react-icons'
+import type { CheckboxProps } from "@radix-ui/react-checkbox"
+import { Root, Indicator } from "@radix-ui/react-checkbox"
+import { CheckIcon } from "@radix-ui/react-icons"
 
 interface Props extends CheckboxProps {
-  labelText: string
+	labelText: string
 }
 
 export const CheckboxWithLabel = ({ labelText, ...props }: Props) => (
-  <div className="flex items-center">
-    <Root
-      className="bg-white cursor-default w-6 h-6 rounded flex items-center justify-center shadow hover:bg-gray-50"
-      defaultChecked id="c1"
-      {...props}
-    >
-      <Indicator>
-        <CheckIcon className="text-primary" />
-      </Indicator>
-    </Root>
-    <label className="pl-3" htmlFor="c1">
-      {labelText}
-    </label>
-  </div>
+	<div className="flex items-center">
+		<Root
+			className="bg-white cursor-default w-6 h-6 rounded flex items-center justify-center shadow hover:bg-gray-50"
+			defaultChecked
+			id="c1"
+			{...props}
+		>
+			<Indicator>
+				<CheckIcon className="text-primary" />
+			</Indicator>
+		</Root>
+		<label className="pl-3" htmlFor="c1">
+			{labelText}
+		</label>
+	</div>
 )
diff --git a/packages/shared/Header.tsx b/packages/shared/Header.tsx
@@ -1,17 +1,17 @@
-import type { PropsWithChildren } from 'react'
-import Link from 'next/link'
-import { FiArrowLeft } from 'react-icons/fi'
+import type { PropsWithChildren } from "react"
+import Link from "next/link"
+import { FiArrowLeft } from "react-icons/fi"
 
 const Header = ({ children }: PropsWithChildren) => {
-  return (
-    <header className="flex font p-4">
-      <Link href="/" data-test="back-link">
-        <FiArrowLeft size={30} strokeWidth="1.5" />
-        <span className="sr-only">Back</span>
-      </Link>
-      <div className="ml-auto">{children}</div>
-    </header>
-  )
+	return (
+		<header className="flex font p-4">
+			<Link href="/" data-test="back-link">
+				<FiArrowLeft size={30} strokeWidth="1.5" />
+				<span className="sr-only">Back</span>
+			</Link>
+			<div className="ml-auto">{children}</div>
+		</header>
+	)
 }
 
 export default Header
diff --git a/packages/shared/HeaderAction.tsx b/packages/shared/HeaderAction.tsx
@@ -1,13 +1,17 @@
-import type { PropsWithChildren, ReactNode } from 'react'
+import type { PropsWithChildren, ReactNode } from "react"
 
-const HeaderAction = ({ children, onClick, ...attributes }: PropsWithChildren<{
-  children?: ReactNode
-  onClick: () => void
-  attributes?: { [key: string]: string }[]
-}>) => <button
-  className="ml-2"
-  onClick={onClick}
-  {...attributes}
->{children}</button>
+const HeaderAction = ({
+	children,
+	onClick,
+	...attributes
+}: PropsWithChildren<{
+	children?: ReactNode
+	onClick: () => void
+	attributes?: { [key: string]: string }[]
+}>) => (
+	<button className="ml-2" onClick={onClick} {...attributes}>
+		{children}
+	</button>
+)
 
 export default HeaderAction
diff --git a/packages/shared/Progress.tsx b/packages/shared/Progress.tsx
@@ -1,32 +1,29 @@
-import { Root, Indicator } from '@radix-ui/react-progress'
-import { motion } from 'framer-motion'
-import { classNames } from 'lib/utils/string'
+import { Root, Indicator } from "@radix-ui/react-progress"
+import { motion } from "framer-motion"
+import { classNames } from "lib/utils/string"
 
 export const Progress = ({ progress }: { progress: number }) => {
-  let colorClass = 'bg-green-400'
-  if (progress <= 25) {
-    colorClass = 'bg-red-400'
-  } else if (progress <= 50) {
-    colorClass = 'bg-yellow-200'
-  }
-  return (
-    <Root
-      value={progress}
-      className="relative overflow-hidden bg-black-rich/50 rounded-full w-96 h-6"
-      title="Progress"
-    >
-      <Indicator
-        asChild
-        className="h-full"
-      >
-        <motion.div
-          className={classNames('h-full w-0', colorClass)}
-          animate={{
-            width: progress + '%',
-          }}
-          transition={{ duration: 0.4 }}
-        />
-      </Indicator>
-    </Root>
-  )
+	let colorClass = "bg-green-400"
+	if (progress <= 25) {
+		colorClass = "bg-red-400"
+	} else if (progress <= 50) {
+		colorClass = "bg-yellow-200"
+	}
+	return (
+		<Root
+			value={progress}
+			className="relative overflow-hidden bg-black-rich/50 rounded-full w-96 h-6"
+			title="Progress"
+		>
+			<Indicator asChild className="h-full">
+				<motion.div
+					className={classNames("h-full w-0", colorClass)}
+					animate={{
+						width: progress + "%",
+					}}
+					transition={{ duration: 0.4 }}
+				/>
+			</Indicator>
+		</Root>
+	)
 }
diff --git a/packages/shared/Slider.tsx b/packages/shared/Slider.tsx
@@ -1,23 +1,23 @@
-import type { SliderProps } from '@radix-ui/react-slider'
-import { Root, Track, Range, Thumb } from '@radix-ui/react-slider'
+import type { SliderProps } from "@radix-ui/react-slider"
+import { Root, Track, Range, Thumb } from "@radix-ui/react-slider"
 
-interface Props extends Omit<SliderProps, 'defaultValue'> {
-  defaultValue: number
-  label?: string
+interface Props extends Omit<SliderProps, "defaultValue"> {
+	defaultValue: number
+	label?: string
 }
 
 export const Slider = ({ defaultValue, max, label, ...props }: Props) => (
-  <Root
-    className="relative flex items-center select-none touch-none w-full h-5"
-    defaultValue={[defaultValue]}
-    max={max}
-    step={1}
-    aria-label={label}
-    {...props}
-  >
-    <Track className="bg-gray-600 relative flex-grow rounded-full h-[3px]">
-      <Range className="absolute bg-primary rounded-full h-full" />
-    </Track>
-    <Thumb className="block w-5 h-5 bg-primary shadow-md rounded-full hover:bg-primary-dark" />
-  </Root>
+	<Root
+		className="relative flex items-center select-none touch-none w-full h-5"
+		defaultValue={[defaultValue]}
+		max={max}
+		step={1}
+		aria-label={label}
+		{...props}
+	>
+		<Track className="bg-gray-600 relative flex-grow rounded-full h-[3px]">
+			<Range className="absolute bg-primary rounded-full h-full" />
+		</Track>
+		<Thumb className="block w-5 h-5 bg-primary shadow-md rounded-full hover:bg-primary-dark" />
+	</Root>
 )
diff --git a/packages/shared/ThemeToggle.tsx b/packages/shared/ThemeToggle.tsx
@@ -1,61 +1,56 @@
-import { useEffect, useState } from 'react'
-import { motion } from 'framer-motion'
-import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
+import { useEffect, useState } from "react"
+import { motion } from "framer-motion"
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
 
-const darkClassName = 'dark'
+const darkClassName = "dark"
 let savedDarkMode: boolean | undefined
 
 const useDarkMode = () => {
-  const [darkMode, setDarkMode] = useState<boolean | undefined>(savedDarkMode)
+	const [darkMode, setDarkMode] = useState<boolean | undefined>(savedDarkMode)
 
-  useEffect(() => {
-    if (darkMode === undefined) {
-      setDarkMode(document.documentElement.classList.contains(darkClassName))
-      savedDarkMode = document.documentElement.classList.contains(darkClassName)
-      return
-    }
-    localStorage.setItem(
-      'theme',
-      darkMode
-        ? darkClassName
-        : '',
-    )
-    document.documentElement.classList.toggle(darkClassName, localStorage.theme === darkClassName)
-    savedDarkMode = document.documentElement.classList.contains(darkClassName)
-  }, [darkMode])
+	useEffect(() => {
+		if (darkMode === undefined) {
+			setDarkMode(document.documentElement.classList.contains(darkClassName))
+			savedDarkMode = document.documentElement.classList.contains(darkClassName)
+			return
+		}
+		localStorage.setItem("theme", darkMode ? darkClassName : "")
+		document.documentElement.classList.toggle(darkClassName, localStorage.theme === darkClassName)
+		savedDarkMode = document.documentElement.classList.contains(darkClassName)
+	}, [darkMode])
 
-  return [darkMode, setDarkMode] as const
+	return [darkMode, setDarkMode] as const
 }
 
 export const ThemeToggle = () => {
-  const [darkMode, setDarkMode] = useDarkMode()
+	const [darkMode, setDarkMode] = useDarkMode()
 
-  return (
-    <motion.button
-      className="dark:text-white absolute right-0 cursor-pointer inline-block p-2 m-3"
-      onClick={() => setDarkMode(!darkMode)}
-      data-test="toggle-dark-mode"
-    >
-      <motion.div
-        initial={{
-          scale: darkMode === undefined ? 0.5 : 1,
-          opacity: darkMode === undefined ? 0 : 1,
-          y: darkMode === undefined ? '-100%' : 0,
-        }}
-        animate={{
-          scale: darkMode === undefined ? 0.5 : 1,
-          opacity: darkMode === undefined ? 0 : 1,
-          y: darkMode === undefined ? '-100%' : 0,
-        }}
-        transition={{ duration: 0.5, delay: 0.5 }}
-      >
-        <span className="sr-only">Use {darkMode ? 'dark' : 'light'} mode</span>
-        {
-          darkMode
-            ? <MoonIcon className="block" width="24" height="24" />
-            : <SunIcon className="block" width="24" height="24" />
-        }
-      </motion.div>
-    </motion.button>
-  )
+	return (
+		<motion.button
+			className="dark:text-white absolute right-0 cursor-pointer inline-block p-2 m-3"
+			onClick={() => setDarkMode(!darkMode)}
+			data-test="toggle-dark-mode"
+		>
+			<motion.div
+				initial={{
+					scale: darkMode === undefined ? 0.5 : 1,
+					opacity: darkMode === undefined ? 0 : 1,
+					y: darkMode === undefined ? "-100%" : 0,
+				}}
+				animate={{
+					scale: darkMode === undefined ? 0.5 : 1,
+					opacity: darkMode === undefined ? 0 : 1,
+					y: darkMode === undefined ? "-100%" : 0,
+				}}
+				transition={{ duration: 0.5, delay: 0.5 }}
+			>
+				<span className="sr-only">Use {darkMode ? "dark" : "light"} mode</span>
+				{darkMode ? (
+					<MoonIcon className="block" width="24" height="24" />
+				) : (
+					<SunIcon className="block" width="24" height="24" />
+				)}
+			</motion.div>
+		</motion.button>
+	)
 }
diff --git a/packages/shared/styled-jsx.d.ts b/packages/shared/styled-jsx.d.ts
@@ -1,8 +1,8 @@
-import 'react'
+import "react"
 
-declare module 'react' {
-  interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
-    jsx?: boolean;
-    global?: boolean;
-  }
+declare module "react" {
+	interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
+		jsx?: boolean
+		global?: boolean
+	}
 }