theoludwig/react-component-form
Archived
1
1
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:26:27 +02:00
parent 1224ece116
commit a49e844c70
50 changed files with 4642 additions and 3862 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
example/components/design/Button.tsx
View File

@ -1,6 +1,6 @@
import classNames from 'clsx'
import classNames from "clsx"
export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {}
export interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {}
export const Button: React.FC<ButtonProps> = (props) => {
const { children, className, ...rest } = props
@ -8,8 +8,8 @@ export const Button: React.FC<ButtonProps> = (props) => {
return (
<button
className={classNames(
'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 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',
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 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",
className,
)}
{...rest}
>

28
example/components/design/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
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
}
@ -32,15 +32,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(`common:${state}`)}:</b> {message}
</span>
</div>

22
example/components/design/Input.tsx
View File

@ -1,8 +1,8 @@
import classNames from 'clsx'
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
className?: string
@ -12,23 +12,23 @@ export const Input: React.FC<InputProps> = (props) => {
const { label, name, className, error, ...rest } = props
return (
<div className='flex flex-col'>
<div className={classNames('mt-6 mb-2 flex justify-between', className)}>
<label className='pl-1' htmlFor={name}>
<div className="flex flex-col">
<div className={classNames("mt-6 mb-2 flex justify-between", className)}>
<label className="pl-1" htmlFor={name}>
{label}
</label>
</div>
<div className='relative mt-0'>
<div className="relative mt-0">
<input
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'
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}
data-cy={`input-${name ?? 'name'}`}
data-cy={`input-${name ?? "name"}`}
/>
<FormState
id={`error-${name ?? 'input'}`}
state={error == null ? 'idle' : 'error'}
id={`error-${name ?? "input"}`}
state={error == null ? "idle" : "error"}
message={error}
/>
</div>

8
example/components/design/Link.tsx
View File

@ -1,6 +1,6 @@
import classNames from 'clsx'
import classNames from "clsx"
export interface LinkProps extends React.ComponentPropsWithoutRef<'a'> {}
export interface LinkProps extends React.ComponentPropsWithoutRef<"a"> {}
export const Link: React.FC<LinkProps> = (props) => {
const { children, className, ...rest } = props
@ -8,8 +8,8 @@ export const Link: React.FC<LinkProps> = (props) => {
return (
<a
className={classNames(
'text-green-800 hover:underline dark:text-green-400',
className
"text-green-800 hover:underline dark:text-green-400",
className,
)}
{...rest}
>

22
example/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={props.className}>
<div
data-cy='progress-spinner'
className='relative my-0 mx-auto before:content-none before:block before:pt-[100%]'
data-cy="progress-spinner"
className="relative my-0 mx-auto before:content-none before:block before:pt-[100%]"
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
example/components/design/Loader/index.ts
View File

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

6
example/components/design/TextSpecial.tsx
View File

@ -1,14 +1,14 @@
import classNames from 'clsx'
import classNames from "clsx"
export interface TextSpecialProps
extends React.ComponentPropsWithoutRef<'span'> {}
extends React.ComponentPropsWithoutRef<"span"> {}
export const TextSpecial: React.FC<TextSpecialProps> = (props) => {
const { children, className, ...rest } = props
return (
<span
className={classNames('text-green-800 dark:text-green-400', className)}
className={classNames("text-green-800 dark:text-green-400", className)}
{...rest}
>
{children}