From afd8f3643714b2dc2406934405c3a464fdfabd17 Mon Sep 17 00:00:00 2001 From: SevicheCC <91365763+Sevichecc@users.noreply.github.com> Date: Mon, 5 Jun 2023 00:51:23 +0800 Subject: [PATCH] feat: form UI --- .prettierrc | 8 + app/page.tsx | 11 +- components/ClientOnly.tsx | 22 ++ components/InputForm.tsx | 77 ++++++- components/ScopeInput.tsx | 98 ++++++++ components/ui/checkbox.tsx | 30 +++ components/ui/collapsible.tsx | 11 + lib/types.ts | 28 +++ lib/utils.ts | 44 +++- package.json | 5 + pnpm-lock.yaml | 282 +++++++++++++++++++++++ prettier.config.js | 5 + tailwind.config.ts => tailwind.config.js | 23 +- tsconfig.json | 2 - 14 files changed, 616 insertions(+), 30 deletions(-) create mode 100644 .prettierrc create mode 100644 components/ClientOnly.tsx create mode 100644 components/ScopeInput.tsx create mode 100644 components/ui/checkbox.tsx create mode 100644 components/ui/collapsible.tsx create mode 100644 lib/types.ts create mode 100644 prettier.config.js rename tailwind.config.ts => tailwind.config.js (80%) diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..f92043e --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "tabWidth": 2, + "useTabs": false, + "plugins": [ + "prettier-plugin-tailwindcss" + ], + "pluginSearchDirs": false +} \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index a79f27d..1283536 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,9 +1,12 @@ -import InputForm from "@/components/InputForm" +import InputForm from "@/components/InputForm"; +import ClientOnly from "@/components/ClientOnly"; export default function Home() { return ( -
- +
+ + +
- ) + ); } diff --git a/components/ClientOnly.tsx b/components/ClientOnly.tsx new file mode 100644 index 0000000..8386355 --- /dev/null +++ b/components/ClientOnly.tsx @@ -0,0 +1,22 @@ +'use client' +import { useEffect, useState } from 'react' + +interface ClientOnlyProps { + children: React.ReactNode +} + +const ClientOnly: React.FC = ({ children }) => { + const [hasMounted, setHasMounted] = useState(false) + + useEffect(() => { + setHasMounted(true) + }, []) + + if (!hasMounted) { + return null + } + + return <>{children} +} + +export default ClientOnly \ No newline at end of file diff --git a/components/InputForm.tsx b/components/InputForm.tsx index cf63355..f491333 100644 --- a/components/InputForm.tsx +++ b/components/InputForm.tsx @@ -1,4 +1,5 @@ 'use client' + import * as z from "zod" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" @@ -14,11 +15,14 @@ import { FormMessage, } from "@/components/ui/form" import { Input } from "@/components/ui/input" +import ScopeInput from './ScopeInput'; const formSchema = z.object({ - clientName: z.string(), - redirectUris: z.string().url(), - scopes: z.string() + instance: z.string().trim(), + clientName: z.string().trim(), + redirectUris: z.string().url().trim(), + scopes: z.string().array().nonempty().optional(), + website: z.string().trim().optional() }) const InputForm = () => { @@ -26,8 +30,7 @@ const InputForm = () => { resolver: zodResolver(formSchema), defaultValues: { clientName: '', - redirectUris: '', - + redirectUris: 'urn:ietf:wg:oauth:2.0:oob', }, }) @@ -39,19 +42,71 @@ const InputForm = () => { return (
- +

M-OAuth

+ + ( + + Instance + + + + + + + )} + /> ( - Username + Application name - + + + + + )} + /> + ( + + Application Website + + + + + + )} + /> + ( + + Redirect URI + + + + Use urn:ietf:wg:oauth:2.0:oob for local tests + + + )} + /> + ( + + Scopes + + - - This is your public display name. - )} diff --git a/components/ScopeInput.tsx b/components/ScopeInput.tsx new file mode 100644 index 0000000..d3174e1 --- /dev/null +++ b/components/ScopeInput.tsx @@ -0,0 +1,98 @@ +"use client"; + +import { Checkbox } from "@/components/ui/checkbox"; +import { ReadScope, AdminScope, WriteScope } from "@/lib/types"; +import { readScopes, adminScopes, writeScopes } from "@/lib/utils"; +import { MethodType } from "@/lib/types"; +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/components/ui/collapsible"; +import { ChevronsUpDown } from "lucide-react"; +import { Button } from "@/components/ui/button"; + +interface ScopeSectionProps { + method: MethodType; + scopes?: ReadScope[] | WriteScope[] | AdminScope[]; +} + +const ScopeSection: React.FC = ({ method, scopes }) => { + return ( + +
+
+ +
+ +

+ {method === "read" && "read all your account's data"} + {method === "write" && "modify all your account's data"} + {method === "admin" && "read all data on the server"} + {method === "follow" && "modify account relationships"} + {method === "push" && "receive your push notifications"} + {method === "crypto" && "use end-to-end encryption"} +

+
+
+ {scopes && ( + + + + )} +
+ + {scopes && ( +
+ {scopes.map((scope) => ( +
+ +
+ +
+
+ ))} +
+ )} + + + ); +}; + +const ScopeInput = (props: any) => { + return ( +
+ + + + + + +
+ ); +}; + +export default ScopeInput; diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx new file mode 100644 index 0000000..df61a13 --- /dev/null +++ b/components/ui/checkbox.tsx @@ -0,0 +1,30 @@ +"use client" + +import * as React from "react" +import * as CheckboxPrimitive from "@radix-ui/react-checkbox" +import { Check } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Checkbox = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + +)) +Checkbox.displayName = CheckboxPrimitive.Root.displayName + +export { Checkbox } diff --git a/components/ui/collapsible.tsx b/components/ui/collapsible.tsx new file mode 100644 index 0000000..9fa4894 --- /dev/null +++ b/components/ui/collapsible.tsx @@ -0,0 +1,11 @@ +"use client" + +import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" + +const Collapsible = CollapsiblePrimitive.Root + +const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger + +const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent + +export { Collapsible, CollapsibleTrigger, CollapsibleContent } diff --git a/lib/types.ts b/lib/types.ts new file mode 100644 index 0000000..504558b --- /dev/null +++ b/lib/types.ts @@ -0,0 +1,28 @@ +export type MethodType = "read" | "write" | "follow" | "push" | 'crypto' | 'admin' + +export type ReadScope = + |"account" + | "blocks" + | "bookmarks" + | "favourites" + | "filters" + | "filters" + | "lists" + | "mutes" + | "notifications" + | "search" + | "statuses"; + +export type WriteScope = Omit + | 'conversations' + | 'media' + | "reports" + +export type AdminScope = + "account" + | "reports" + | "domain_allows" + | "domain_blocks" + | "ip_blocks" + | "email_domain_blocks" + | "canonical_email_blocks"; diff --git a/lib/utils.ts b/lib/utils.ts index e8ed525..2a756e2 100644 --- a/lib/utils.ts +++ b/lib/utils.ts @@ -1,7 +1,45 @@ -import { clsx, type ClassValue } from "clsx" -import { twMerge } from "tailwind-merge" +import { clsx, type ClassValue } from "clsx"; +import { twMerge } from "tailwind-merge"; +import { ReadScope, WriteScope, AdminScope } from "@/lib/types"; export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)) + return twMerge(clsx(inputs)); } +export const readScopes: ReadScope[] = [ + "account", + "blocks", + "bookmarks", + "favourites", + "filters", + "lists", + "mutes", + "notifications", + "search", + "statuses", +]; + +export const writeScopes: WriteScope[] = [ + "account", + "blocks", + "bookmarks", + "favourites", + "filters", + "lists", + "mutes", + "notifications", + "statuses", + "conversations", + "media", + "reports", +]; + +export const adminScopes: AdminScope[] = [ + "account", + "reports", + "domain_allows", + "domain_blocks", + "ip_blocks", + "email_domain_blocks", + "canonical_email_blocks", +]; diff --git a/package.json b/package.json index 062b1a3..ad67b25 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,10 @@ }, "dependencies": { "@hookform/resolvers": "^3.1.0", + "@radix-ui/react-checkbox": "^1.0.4", + "@radix-ui/react-collapsible": "^1.0.3", "@radix-ui/react-label": "^2.0.2", + "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "@types/node": "20.2.5", "@types/react": "18.2.7", @@ -38,6 +41,8 @@ "eslint-config-prettier": "^8.8.0", "husky": "^8.0.3", "lint-staged": "^13.2.2", + "prettier": "^2.8.8", + "prettier-plugin-tailwindcss": "^0.3.0", "tailwindcss": "^3.3.2" } } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 19b512d..2715cec 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,9 +4,18 @@ dependencies: '@hookform/resolvers': specifier: ^3.1.0 version: 3.1.0(react-hook-form@7.44.3) + '@radix-ui/react-checkbox': + specifier: ^1.0.4 + version: 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-collapsible': + specifier: ^1.0.3 + version: 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-label': specifier: ^2.0.2 version: 2.0.2(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-separator': + specifier: ^1.0.3 + version: 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-slot': specifier: ^1.0.2 version: 1.0.2(@types/react@18.2.7)(react@18.2.0) @@ -78,6 +87,12 @@ devDependencies: lint-staged: specifier: ^13.2.2 version: 13.2.2 + prettier: + specifier: ^2.8.8 + version: 2.8.8 + prettier-plugin-tailwindcss: + specifier: ^0.3.0 + version: 0.3.0(prettier@2.8.8) tailwindcss: specifier: ^3.3.2 version: 3.3.2 @@ -318,6 +333,68 @@ packages: tslib: 2.5.3 dev: false + /@radix-ui/primitive@1.0.1: + resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==} + dependencies: + '@babel/runtime': 7.22.3 + dev: false + + /@radix-ui/react-checkbox@1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.22.3 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@types/react': 18.2.7 + '@types/react-dom': 18.2.4 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /@radix-ui/react-collapsible@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.22.3 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-id': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@types/react': 18.2.7 + '@types/react-dom': 18.2.4 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.7)(react@18.2.0): resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==} peerDependencies: @@ -332,6 +409,35 @@ packages: react: 18.2.0 dev: false + /@radix-ui/react-context@1.0.1(@types/react@18.2.7)(react@18.2.0): + resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.3 + '@types/react': 18.2.7 + react: 18.2.0 + dev: false + + /@radix-ui/react-id@1.0.1(@types/react@18.2.7)(react@18.2.0): + resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.3 + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@types/react': 18.2.7 + react: 18.2.0 + dev: false + /@radix-ui/react-label@2.0.2(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==} peerDependencies: @@ -353,6 +459,28 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.22.3 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@types/react': 18.2.7 + '@types/react-dom': 18.2.4 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==} peerDependencies: @@ -374,6 +502,27 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@radix-ui/react-separator@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.22.3 + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.7)(react-dom@18.2.0)(react@18.2.0) + '@types/react': 18.2.7 + '@types/react-dom': 18.2.4 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-slot@1.0.2(@types/react@18.2.7)(react@18.2.0): resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==} peerDependencies: @@ -389,6 +538,78 @@ packages: react: 18.2.0 dev: false + /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.7)(react@18.2.0): + resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.3 + '@types/react': 18.2.7 + react: 18.2.0 + dev: false + + /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.7)(react@18.2.0): + resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.3 + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@types/react': 18.2.7 + react: 18.2.0 + dev: false + + /@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.7)(react@18.2.0): + resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.3 + '@types/react': 18.2.7 + react: 18.2.0 + dev: false + + /@radix-ui/react-use-previous@1.0.1(@types/react@18.2.7)(react@18.2.0): + resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.3 + '@types/react': 18.2.7 + react: 18.2.0 + dev: false + + /@radix-ui/react-use-size@1.0.1(@types/react@18.2.7)(react@18.2.0): + resolution: {integrity: sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.22.3 + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.7)(react@18.2.0) + '@types/react': 18.2.7 + react: 18.2.0 + dev: false + /@rushstack/eslint-patch@1.3.0: resolution: {integrity: sha512-IthPJsJR85GhOkp3Hvp8zFOPK5ynKn6STyHa/WZpioK7E1aYDiBzpqQPrngc14DszIUkIrdd3k9Iu0XSzlP/1w==} dev: false @@ -2588,6 +2809,67 @@ packages: resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} engines: {node: '>= 0.8.0'} + /prettier-plugin-tailwindcss@0.3.0(prettier@2.8.8): + resolution: {integrity: sha512-009/Xqdy7UmkcTBpwlq7jsViDqXAYSOMLDrHAdTMlVZOrKfM2o9Ci7EMWTMZ7SkKBFTG04UM9F9iM2+4i6boDA==} + engines: {node: '>=12.17.0'} + peerDependencies: + '@ianvs/prettier-plugin-sort-imports': '*' + '@prettier/plugin-pug': '*' + '@shopify/prettier-plugin-liquid': '*' + '@shufo/prettier-plugin-blade': '*' + '@trivago/prettier-plugin-sort-imports': '*' + prettier: '>=2.2.0' + prettier-plugin-astro: '*' + prettier-plugin-css-order: '*' + prettier-plugin-import-sort: '*' + prettier-plugin-jsdoc: '*' + prettier-plugin-marko: '*' + prettier-plugin-organize-attributes: '*' + prettier-plugin-organize-imports: '*' + prettier-plugin-style-order: '*' + prettier-plugin-svelte: '*' + prettier-plugin-twig-melody: '*' + peerDependenciesMeta: + '@ianvs/prettier-plugin-sort-imports': + optional: true + '@prettier/plugin-pug': + optional: true + '@shopify/prettier-plugin-liquid': + optional: true + '@shufo/prettier-plugin-blade': + optional: true + '@trivago/prettier-plugin-sort-imports': + optional: true + prettier-plugin-astro: + optional: true + prettier-plugin-css-order: + optional: true + prettier-plugin-import-sort: + optional: true + prettier-plugin-jsdoc: + optional: true + prettier-plugin-marko: + optional: true + prettier-plugin-organize-attributes: + optional: true + prettier-plugin-organize-imports: + optional: true + prettier-plugin-style-order: + optional: true + prettier-plugin-svelte: + optional: true + prettier-plugin-twig-melody: + optional: true + dependencies: + prettier: 2.8.8 + dev: true + + /prettier@2.8.8: + resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==} + engines: {node: '>=10.13.0'} + hasBin: true + dev: true + /prop-types@15.8.1: resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==} dependencies: diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 0000000..88ca8ff --- /dev/null +++ b/prettier.config.js @@ -0,0 +1,5 @@ +module.exports = { + plugins: [require("prettier-plugin-tailwindcss")], + tailwindConfig: "./tailwind.config.js", + tailwindFunctions: ["clsx"], +}; diff --git a/tailwind.config.ts b/tailwind.config.js similarity index 80% rename from tailwind.config.ts rename to tailwind.config.js index affbcbc..3e6593c 100644 --- a/tailwind.config.ts +++ b/tailwind.config.js @@ -1,9 +1,9 @@ -import type { Config } from 'tailwindcss' -import { fontFamily } from 'tailwindcss/defaultTheme' +const { fontFamily } = require("tailwindcss/defaultTheme"); -export default { - darkMode: ["class"], - content:["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"], +/** @type {import('tailwindcss').Config} */ +module.exports = { + darkMode: ["class"], + content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"], theme: { container: { center: true, @@ -49,18 +49,21 @@ export default { }, }, borderRadius: { - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", + lg: `var(--radius)`, + md: `calc(var(--radius) - 2px)`, sm: "calc(var(--radius) - 4px)", }, + fontFamily: { + sans: ["var(--font-sans)", ...fontFamily.sans], + }, keyframes: { "accordion-down": { - from: { height: '0' }, + from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: '0' }, + to: { height: 0 }, }, }, animation: { @@ -70,4 +73,4 @@ export default { }, }, plugins: [require("tailwindcss-animate")], -} satisfies Config +}; diff --git a/tsconfig.json b/tsconfig.json index d6c7c4b..cf0df7d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,5 @@ { "compilerOptions": { - "baseUrl": ".", "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, @@ -29,7 +28,6 @@ "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", - "tailwind.config.ts", "next.config.js" ], "exclude": ["node_modules"]