Thream/website
Archived
2
2
Fork 0
Code Issues Pull Requests Releases Activity

chore: better Prettier config for easier reviews

Browse Source
This commit is contained in:
Théo LUDWIG
2023-10-23 23:33:39 +02:00
parent a8781724d4
commit 71ea41695f
209 changed files with 4093 additions and 4114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/design/Button/Button.tsx
View File

@ -1,18 +1,18 @@
import { forwardRef } from 'react'
import classNames from 'clsx'
import { forwardRef } from "react"
import classNames from "clsx"
const className =
'py-2 px-6 font-paragraph rounded-lg bg-transparent border hover:text-white dark:hover:text-black fill-current stroke-current transform transition-colors duration-300 ease-in-out focus:outline-none focus:text-white dark:focus:text-black'
"py-2 px-6 font-paragraph rounded-lg bg-transparent border hover:text-white dark:hover:text-black fill-current stroke-current transform transition-colors duration-300 ease-in-out focus:outline-none focus:text-white dark:focus:text-black"
const classNameGreen =
'border-green-800 dark:border-green-400 text-green-800 dark:text-green-400 hover:bg-green-800 focus:bg-green-800 dark:focus:bg-green-400 dark:hover:bg-green-400'
"border-green-800 dark:border-green-400 text-green-800 dark:text-green-400 hover:bg-green-800 focus:bg-green-800 dark:focus:bg-green-400 dark:hover:bg-green-400"
const classNameRed =
'border-red-800 dark:border-red-400 text-red-800 dark:text-red-400 hover:bg-red-800 focus:bg-red-800 dark:focus:bg-red-400 dark:hover:bg-red-400'
"border-red-800 dark:border-red-400 text-red-800 dark:text-red-400 hover:bg-red-800 focus:bg-red-800 dark:focus:bg-red-400 dark:hover:bg-red-400"
export type ButtonColor = 'green' | 'red'
export type ButtonColor = "green" | "red"
export interface ButtonLinkProps extends React.ComponentPropsWithRef<'a'> {
export interface ButtonLinkProps extends React.ComponentPropsWithRef<"a"> {
color?: ButtonColor
}
@ -21,7 +21,7 @@ export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
const {
children,
className: givenClassName,
color = 'green',
color = "green",
...rest
} = props
@ -31,22 +31,22 @@ export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
className={classNames(
className,
{
[classNameGreen]: color === 'green',
[classNameRed]: color === 'red'
[classNameGreen]: color === "green",
[classNameRed]: color === "red",
},
givenClassName
givenClassName,
)}
{...rest}
>
{children}
</a>
)
}
},
)
ButtonLink.displayName = 'ButtonLink'
ButtonLink.displayName = "ButtonLink"
export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
export interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {
color?: ButtonColor
}
@ -54,7 +54,7 @@ export const Button: React.FC<ButtonProps> = (props) => {
const {
children,
className: givenClassName,
color = 'green',
color = "green",
...rest
} = props
@ -63,10 +63,10 @@ export const Button: React.FC<ButtonProps> = (props) => {
className={classNames(
className,
{
[classNameGreen]: color === 'green',
[classNameRed]: color === 'red'
[classNameGreen]: color === "green",
[classNameRed]: color === "red",
},
givenClassName
givenClassName,
)}
{...rest}
>

2
components/design/Button/index.ts
View File

@ -1 +1 @@
export * from './Button'
export * from "./Button"

12
components/design/Checkbox/Checkbox.tsx
View File

@ -1,6 +1,6 @@
import classNames from 'clsx'
import classNames from "clsx"
export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
export interface CheckboxProps extends React.ComponentPropsWithRef<"input"> {
className?: string
label: string
}
@ -8,15 +8,15 @@ export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
export const Checkbox: React.FC<CheckboxProps> = (props) => {
const { label, id, className } = props
return (
<div className={classNames('mt-4 flex items-center', className)}>
<div className={classNames("mt-4 flex items-center", className)}>
<input
{...props}
type='checkbox'
type="checkbox"
id={id}
className='relative mr-3 min-h-[25px] min-w-[25px] cursor-pointer appearance-none rounded-md bg-gradient-to-t from-[#bcc7d4] to-[#d3dfed] transition-all before:absolute before:left-[59%] before:top-[50%] before:h-[12px] before:w-[2px] before:translate-x-[-59%] before:translate-y-[-50%] before:rotate-[40deg] before:scale-0 before:bg-black before:transition-all after:absolute after:left-[36%] after:top-[62.5%] after:h-[7px] after:w-[2px] after:translate-x-[-35%] after:translate-y-[-62.5%] after:rotate-[-50deg] after:scale-0 after:bg-black after:transition-all after:duration-200 checked:before:scale-100 checked:after:scale-100 dark:from-[#1f2937] dark:to-[#273547] dark:before:bg-white dark:after:bg-white'
className="relative mr-3 min-h-[25px] min-w-[25px] cursor-pointer appearance-none rounded-md bg-gradient-to-t from-[#bcc7d4] to-[#d3dfed] transition-all before:absolute before:left-[59%] before:top-[50%] before:h-[12px] before:w-[2px] before:translate-x-[-59%] before:translate-y-[-50%] before:rotate-[40deg] before:scale-0 before:bg-black before:transition-all after:absolute after:left-[36%] after:top-[62.5%] after:h-[7px] after:w-[2px] after:translate-x-[-35%] after:translate-y-[-62.5%] after:rotate-[-50deg] after:scale-0 after:bg-black after:transition-all after:duration-200 checked:before:scale-100 checked:after:scale-100 dark:from-[#1f2937] dark:to-[#273547] dark:before:bg-white dark:after:bg-white"
/>
<label
className='duration-400 cursor-pointer select-none opacity-80 transition hover:opacity-100 '
className="duration-400 cursor-pointer select-none opacity-80 transition hover:opacity-100 "
htmlFor={id}
>
{label}

2
components/design/Checkbox/index.ts
View File

@ -1 +1 @@
export * from './Checkbox'
export * from "./Checkbox"

4
components/design/Divider/Divider.tsx
View File

@ -1,7 +1,7 @@
export const Divider: React.FC = () => {
return (
<div className='relative mb-3 flex h-[2px] w-full justify-center'>
<div className='absolute h-[2px] w-8/12 rounded-full bg-gray-600 dark:bg-white/20'></div>
<div className="relative mb-3 flex h-[2px] w-full justify-center">
<div className="absolute h-[2px] w-8/12 rounded-full bg-gray-600 dark:bg-white/20"></div>
</div>
)
}

2
components/design/Divider/index.ts
View File

@ -1 +1 @@
export * from './Divider'
export * from "./Divider"

28
components/design/FormState/FormState.tsx
View File

@ -1,10 +1,10 @@
import classNames from 'clsx'
import useTranslation from 'next-translate/useTranslation'
import type { FetchState as FormStateType } from 'react-component-form'
import classNames from "clsx"
import useTranslation from "next-translate/useTranslation"
import type { FetchState as FormStateType } from "react-component-form"
import { Loader } from '../Loader'
import { Loader } from "../Loader"
export interface FormStateProps extends React.ComponentPropsWithoutRef<'div'> {
export interface FormStateProps extends React.ComponentPropsWithoutRef<"div"> {
state: FormStateType
message?: string | null
id?: string
@ -14,15 +14,15 @@ export const FormState: React.FC<FormStateProps> = (props) => {
const { state, message, id, ...rest } = props
const { t } = useTranslation()
if (state === 'loading') {
if (state === "loading") {
return (
<div data-cy='loader' className='mt-8 flex justify-center'>
<div data-cy="loader" className="mt-8 flex justify-center">
<Loader />
</div>
)
}
if (state === 'idle' || message == null) {
if (state === "idle" || message == null) {
return null
}
@ -31,15 +31,15 @@ export const FormState: React.FC<FormStateProps> = (props) => {
{...rest}
className={classNames(
props.className,
'mt-6 flex max-w-xl items-center text-center font-medium',
"mt-6 flex max-w-xl items-center text-center font-medium",
{
'text-red-800 dark:text-red-400': state === 'error',
'text-green-800 dark:text-green-400': state === 'success'
}
"text-red-800 dark:text-red-400": state === "error",
"text-green-800 dark:text-green-400": state === "success",
},
)}
>
<div className='inline bg-cover font-headline' />
<span id={id} className='pl-2'>
<div className="inline bg-cover font-headline" />
<span id={id} className="pl-2">
<b>{t(`errors:${state}`)}:</b> {message}
</span>
</div>

2
components/design/FormState/index.ts
View File

@ -1 +1 @@
export * from './FormState'
export * from "./FormState"

8
components/design/IconButton/IconButton.tsx
View File

@ -1,7 +1,7 @@
import classNames from 'clsx'
import classNames from "clsx"
export interface IconButtonProps
extends React.ComponentPropsWithoutRef<'button'> {}
extends React.ComponentPropsWithoutRef<"button"> {}
export const IconButton: React.FC<IconButtonProps> = (props) => {
const { children, className, ...rest } = props
@ -9,8 +9,8 @@ export const IconButton: React.FC<IconButtonProps> = (props) => {
return (
<button
className={classNames(
'flex items-center justify-center text-center text-green-800 hover:animate-pulse focus:animate-pulse focus:outline-none dark:text-green-400',
className
"flex items-center justify-center text-center text-green-800 hover:animate-pulse focus:animate-pulse focus:outline-none dark:text-green-400",
className,
)}
{...rest}
>

2
components/design/IconButton/index.ts
View File

@ -1 +1 @@
export * from './IconButton'
export * from "./IconButton"

18
components/design/IconLink/IconLink.tsx
View File

@ -1,5 +1,5 @@
import Link from 'next/link'
import classNames from 'clsx'
import Link from "next/link"
import classNames from "clsx"
export interface IconLinkProps {
selected?: boolean
@ -9,27 +9,27 @@ export interface IconLinkProps {
}
export const IconLink: React.FC<React.PropsWithChildren<IconLinkProps>> = (
props
props,
) => {
const { children, selected, href, title, className } = props
return (
<Link
href={href}
className='group relative flex w-full justify-center'
className="group relative flex w-full justify-center"
title={title}
>
<div
className={classNames('group flex w-full justify-center', className)}
className={classNames("group flex w-full justify-center", className)}
>
{children}
<div className='absolute left-0 flex h-12 w-3 items-center'>
<div className="absolute left-0 flex h-12 w-3 items-center">
<span
className={classNames(
'absolute w-4/12 rounded-r-lg bg-green-700 group-hover:h-5',
"absolute w-4/12 rounded-r-lg bg-green-700 group-hover:h-5",
{
'h-full': selected
}
"h-full": selected,
},
)}
></span>
</div>

2
components/design/IconLink/index.ts
View File

@ -1 +1 @@
export * from './IconLink'
export * from "./IconLink"

50
components/design/Input/Input.tsx
View File

@ -1,11 +1,11 @@
import { useState } from 'react'
import Link from 'next/link'
import useTranslation from 'next-translate/useTranslation'
import classNames from 'clsx'
import { useState } from "react"
import Link from "next/link"
import useTranslation from "next-translate/useTranslation"
import classNames from "clsx"
import { FormState } from '../FormState'
import { FormState } from "../FormState"
export interface InputProps extends React.ComponentPropsWithRef<'input'> {
export interface InputProps extends React.ComponentPropsWithRef<"input"> {
label: string
error?: string | null
showForgotPassword?: boolean
@ -13,7 +13,7 @@ export interface InputProps extends React.ComponentPropsWithRef<'input'> {
}
export const getInputType = (inputType: string): string => {
return inputType === 'password' ? 'text' : 'password'
return inputType === "password" ? "text" : "password"
}
export const Input: React.FC<InputProps> = (props) => {
@ -21,7 +21,7 @@ export const Input: React.FC<InputProps> = (props) => {
label,
name,
className,
type = 'text',
type = "text",
showForgotPassword = false,
error,
...rest
@ -35,43 +35,43 @@ export const Input: React.FC<InputProps> = (props) => {
}
return (
<div className='flex flex-col'>
<div className={classNames('mb-2 mt-6 flex justify-between', className)}>
<label className='pl-1' htmlFor={name}>
<div className="flex flex-col">
<div className={classNames("mb-2 mt-6 flex justify-between", className)}>
<label className="pl-1" htmlFor={name}>
{label}
</label>
{type === 'password' && showForgotPassword ? (
{type === "password" && showForgotPassword ? (
<Link
href='/authentication/forgot-password'
className='text-center font-headline text-xs text-green-800 hover:underline dark:text-green-400 sm:text-sm'
data-cy='forgot-password-link'
href="/authentication/forgot-password"
className="text-center font-headline text-xs text-green-800 hover:underline dark:text-green-400 sm:text-sm"
data-cy="forgot-password-link"
>
{t('authentication:forgot-password')}
{t("authentication:forgot-password")}
</Link>
) : null}
</div>
<div className='relative mt-0'>
<div className="relative mt-0">
<input
data-cy={`input-${name ?? 'name'}`}
className='h-11 w-full rounded-lg border border-transparent bg-[#f1f1f1] px-3 font-paragraph leading-10 text-[#2a2a2a] caret-green-600 focus:border focus:shadow-green focus:outline-none'
data-cy={`input-${name ?? "name"}`}
className="h-11 w-full rounded-lg border border-transparent bg-[#f1f1f1] px-3 font-paragraph leading-10 text-[#2a2a2a] caret-green-600 focus:border focus:shadow-green focus:outline-none"
{...rest}
id={name}
name={name}
type={inputType}
/>
{type === 'password' && (
{type === "password" && (
<div
data-cy='password-eye'
data-cy="password-eye"
onClick={handlePassword}
style={{
backgroundImage: `url('/images/svg/icons/input/${inputType}.svg')`
backgroundImage: `url('/images/svg/icons/input/${inputType}.svg')`,
}}
className='absolute right-4 top-3 z-10 h-5 w-5 cursor-pointer bg-[#f1f1f1] bg-cover'
className="absolute right-4 top-3 z-10 h-5 w-5 cursor-pointer bg-[#f1f1f1] bg-cover"
/>
)}
<FormState
id={`error-${name ?? 'input'}`}
state={error == null ? 'idle' : 'error'}
id={`error-${name ?? "input"}`}
state={error == null ? "idle" : "error"}
message={error}
/>
</div>

2
components/design/Input/index.ts
View File

@ -1 +1 @@
export * from './Input'
export * from "./Input"

22
components/design/Loader/Loader.tsx
View File

@ -1,4 +1,4 @@
import styles from './Loader.module.css'
import styles from "./Loader.module.css"
export interface LoaderProps {
width?: number
@ -12,19 +12,19 @@ export const Loader: React.FC<LoaderProps> = (props) => {
return (
<div className={className}>
<div
data-cy='progress-spinner'
className='relative mx-auto my-0 before:block before:pt-[100%] before:content-none'
data-cy="progress-spinner"
className="relative mx-auto my-0 before:block before:pt-[100%] before:content-none"
style={{ width: `${width}px`, height: `${height}px` }}
>
<svg className={styles['progressSpinnerSvg']} viewBox='25 25 50 50'>
<svg className={styles["progressSpinnerSvg"]} viewBox="25 25 50 50">
<circle
className={styles['progressSpinnerCircle']}
cx='50'
cy='50'
r='20'
fill='none'
strokeWidth='2'
strokeMiterlimit='10'
className={styles["progressSpinnerCircle"]}
cx="50"
cy="50"
r="20"
fill="none"
strokeWidth="2"
strokeMiterlimit="10"
/>
</svg>
</div>

2
components/design/Loader/index.ts
View File

@ -1 +1 @@
export * from './Loader'
export * from "./Loader"

6
components/design/Main/Main.tsx
View File

@ -1,4 +1,4 @@
import classNames from 'clsx'
import classNames from "clsx"
export interface MainProps {
className?: string
@ -10,8 +10,8 @@ export const Main: React.FC<React.PropsWithChildren<MainProps>> = (props) => {
return (
<main
className={classNames(
'flex flex-1 flex-col items-center justify-center py-8',
className
"flex flex-1 flex-col items-center justify-center py-8",
className,
)}
>
{children}

2
components/design/Main/index.ts
View File

@ -1 +1 @@
export * from './Main'
export * from "./Main"

40
components/design/SocialMediaButton/SocialMediaButton.tsx
View File

@ -1,9 +1,9 @@
import { useMemo } from 'react'
import Image from 'next/image'
import classNames from 'clsx'
import { useMemo } from "react"
import Image from "next/image"
import classNames from "clsx"
import type { ProviderOAuth } from '../../../models/OAuth'
import styles from './SocialMediaButton.module.css'
import type { ProviderOAuth } from "../../../models/OAuth"
import styles from "./SocialMediaButton.module.css"
export type SocialMedia = ProviderOAuth
@ -12,13 +12,13 @@ type SocialMediaColors = {
}
const socialMediaColors: SocialMediaColors = {
Discord: '#404EED',
GitHub: '#24292E',
Google: '#FCFCFC'
Discord: "#404EED",
GitHub: "#24292E",
Google: "#FCFCFC",
}
const className =
'py-2 px-6 inline-flex outline-none items-center font-paragraph rounded-lg cursor-pointer transition duration-300 ease-in-out hover:opacity-80 focus:outline-none'
"py-2 px-6 inline-flex outline-none items-center font-paragraph rounded-lg cursor-pointer transition duration-300 ease-in-out hover:opacity-80 focus:outline-none"
interface SocialMediaChildrenProps {
socialMedia: SocialMedia
@ -36,13 +36,13 @@ const SocialMediaChildren: React.FC<SocialMediaChildrenProps> = (props) => {
src={`/images/svg/web/${socialMedia}.svg`}
alt={socialMedia}
/>
<span className='ml-2'>{socialMedia}</span>
<span className="ml-2">{socialMedia}</span>
</>
)
}
export interface SocialMediaButtonProps
extends React.ComponentPropsWithRef<'button'>,
extends React.ComponentPropsWithRef<"button">,
SocialMediaChildrenProps {}
export const SocialMediaButton: React.FC<SocialMediaButtonProps> = (props) => {
@ -58,12 +58,12 @@ export const SocialMediaButton: React.FC<SocialMediaButtonProps> = (props) => {
style={{ background: socialMediaColor }}
className={classNames(
className,
styles['button'],
styles["button"],
{
[styles['buttonGoogle'] as string]: socialMedia === 'Google',
[styles['buttonMedia'] as string]: socialMedia !== 'Google'
[styles["buttonGoogle"] as string]: socialMedia === "Google",
[styles["buttonMedia"] as string]: socialMedia !== "Google",
},
givenClassName
givenClassName,
)}
>
<SocialMediaChildren socialMedia={socialMedia} />
@ -72,7 +72,7 @@ export const SocialMediaButton: React.FC<SocialMediaButtonProps> = (props) => {
}
export interface SocialMediaLinkProps
extends React.ComponentPropsWithRef<'a'>,
extends React.ComponentPropsWithRef<"a">,
SocialMediaChildrenProps {}
export const SocialMediaLink: React.FC<SocialMediaLinkProps> = (props) => {
@ -88,12 +88,12 @@ export const SocialMediaLink: React.FC<SocialMediaLinkProps> = (props) => {
style={{ background: socialMediaColor }}
className={classNames(
className,
styles['button'],
styles["button"],
{
[styles['buttonGoogle'] as string]: socialMedia === 'Google',
[styles['buttonMedia'] as string]: socialMedia !== 'Google'
[styles["buttonGoogle"] as string]: socialMedia === "Google",
[styles["buttonMedia"] as string]: socialMedia !== "Google",
},
givenClassName
givenClassName,
)}
>
<SocialMediaChildren socialMedia={socialMedia} />

2
components/design/SocialMediaButton/index.ts
View File

@ -1 +1 @@
export * from './SocialMediaButton'
export * from "./SocialMediaButton"

16
components/design/Textarea/Textarea.tsx
View File

@ -1,5 +1,5 @@
import type { TextareaAutosizeProps } from 'react-textarea-autosize'
import TextareaAutosize from 'react-textarea-autosize'
import type { TextareaAutosizeProps } from "react-textarea-autosize"
import TextareaAutosize from "react-textarea-autosize"
export interface TextareaProps extends TextareaAutosizeProps {
label: string
@ -9,16 +9,16 @@ export const Textarea: React.FC<TextareaProps> = (props) => {
const { label, id, ...rest } = props
return (
<div className='flex flex-col'>
<div className='mb-2 mt-6 flex justify-between'>
<label className='pl-1' htmlFor={id}>
<div className="flex flex-col">
<div className="mb-2 mt-6 flex justify-between">
<label className="pl-1" htmlFor={id}>
{label}
</label>
</div>
<div className='relative mt-0'>
<div className="relative mt-0">
<TextareaAutosize
className='w-full resize-none overflow-hidden rounded-lg bg-[#f1f1f1] p-3 font-paragraph text-[#2a2a2a] caret-green-600 focus:border focus:shadow-green focus:outline-none'
wrap='soft'
className="w-full resize-none overflow-hidden rounded-lg bg-[#f1f1f1] p-3 font-paragraph text-[#2a2a2a] caret-green-600 focus:border focus:shadow-green focus:outline-none"
wrap="soft"
id={id}
name={id}
{...rest}

2
components/design/Textarea/index.ts
View File

@ -1 +1 @@
export * from './Textarea'
export * from "./Textarea"