Pettier format

Author: YYsuni

.prettierignore

@@ -1,3 +1,7 @@
 node_modules
 package-lock.json
-README.md
+README.md
+.next
+pnpm-lock.yaml
+dist
+storybook-static

.prettierrc

@@ -2,9 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
-html,body,#storybook-root {
-  @apply h-full;
+html,
+body,
+#storybook-root {
+	@apply h-full;
 }
 body {
-  padding: 0 !important;
-}
+	padding: 0 !important;
+}

.storybook/style.css

@@ -44,7 +44,7 @@
 		"postcss": "^8.4.23",
 		"postcss-loader": "^7.2.4",
 		"prettier": "^2.8.2",
-		"prettier-plugin-tailwindcss": "^0.2.7",
+		"prettier-plugin-tailwindcss": "^0.2.8",
 		"react": "^18.2.0",
 		"rollup": "^3.9.1",
 		"rollup-plugin-peer-deps-external": "^2.2.4",

package.json

@@ -1,3 +1,3 @@
 packages:
   - 'website'
-  - '.'
+  - '.'

pnpm-lock.yaml

@@ -1,6 +1,5 @@
 export default {
 	plugins: {
-		'tailwindcss/nesting': {},
 		tailwindcss: {},
 		autoprefixer: {}
 	}

pnpm-workspace.yaml

@@ -0,0 +1,13 @@
+module.exports = {
+	jsxSingleQuote: true,
+	jsxBracketSameLine: true,
+	printWidth: 120,
+	singleQuote: true,
+	trailingComma: 'none',
+	useTabs: true,
+	tabWidth: 2,
+	semi: false,
+	arrowParens: 'avoid',
+	bracketSameLine: true,
+	plugins: [require('prettier-plugin-tailwindcss')]
+}

postcss.config.js

@@ -78,7 +78,7 @@ export default function JsonNode({ node, depth, deleteHandle: _deleteHandle, nam
 
 				if (editHandle) editHandle(name!, evalValue, node)
 			} catch (e) {
-				const trimmedStringValue = resolveEvalFailedNewValue(type, newValue);
+				const trimmedStringValue = resolveEvalFailedNewValue(type, newValue)
 				if (editHandle) editHandle(name!, trimmedStringValue, node)
 			}
 

prettier.config.cjs

@@ -95,7 +95,7 @@ export function customCopy(customOptions?: CustomizeOptions) {
 
 export function resolveEvalFailedNewValue(type: string, value: string) {
 	if (type === 'string') {
-		return value.trim().replace(/^\"([\s\S]+?)\"$/, '$1');
+		return value.trim().replace(/^\"([\s\S]+?)\"$/, '$1')
 	}
-	return value;
-}
+	return value
+}

prettier.config.js

@@ -0,0 +1,7 @@
+node_modules
+package-lock.json
+README.md
+.next
+pnpm-lock.yaml
+dist
+storybook-static

src/components/json-node.tsx

@@ -6,7 +6,8 @@
 		"dev": "next dev",
 		"build": "next build",
 		"start": "next start",
-		"lint": "next lint"
+		"lint": "next lint",
+		"format": "prettier --write ."
 	},
 	"dependencies": {
 		"@types/node": "20.5.9",
@@ -18,6 +19,8 @@
 		"hljs": "^6.2.3",
 		"next": "13.4.19",
 		"postcss": "8.4.29",
+		"prettier": "^2.8.2",
+		"prettier-plugin-tailwindcss": "^0.2.8",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react18-json-view": "workspace:*",

src/utils.ts

@@ -1,6 +1,6 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
 }

website/.prettierignore

@@ -1,3 +1,13 @@
 module.exports = {
+	jsxSingleQuote: true,
+	jsxBracketSameLine: true,
+	printWidth: 120,
+	singleQuote: true,
+	trailingComma: 'none',
+	useTabs: true,
+	tabWidth: 2,
+	semi: false,
+	arrowParens: 'avoid',
+	bracketSameLine: true,
 	plugins: [require('prettier-plugin-tailwindcss')]
 }

website/.prettierrc

@@ -1,8 +1,8 @@
 export default function Footer() {
 	return (
-		<footer className=' bg-gray-100 dark:bg-transparent dark:border-t border-gray-100/10'>
-			<div className='py-8 container flex items-center'>
-				<img src='https://avatars.githubusercontent.com/u/53907086?v=4' className='w-6 h-6 rounded-full mr-2' />
+		<footer className=' border-gray-100/10 bg-gray-100 dark:border-t dark:bg-transparent'>
+			<div className='container flex items-center py-8'>
+				<img src='https://avatars.githubusercontent.com/u/53907086?v=4' className='mr-2 h-6 w-6 rounded-full' />
 				Made by
 				<a className='ml-1 font-bold' target='_blank' href='https://github.com/YYsuni'>
 					Suni

website/package.json

@@ -14,7 +14,7 @@ import CollapseString from '@/contents/collapse-string'
 
 export default function Home() {
 	return (
-		<main className='container pt-12 max-sm:pt-4 pb-20'>
+		<main className='container pb-20 pt-12 max-sm:pt-4'>
 			<Hero />
 
 			<Installation />

website/postcss.config.js

@@ -58,19 +58,19 @@ export default function Theme() {
 						setTheme('light')
 					}
 				}}
-				className='border border-slate-300 h-8 w-8 flex justify-center items-center rounded-lg'>
+				className='flex h-8 w-8 items-center justify-center rounded-lg border border-slate-300'>
 				{theme === 'light' ? (
-					<LightSVG className='w-4 h-4' />
+					<LightSVG className='h-4 w-4' />
 				) : theme === 'dark' ? (
-					<DarkSVG className='w-4 h-4' />
+					<DarkSVG className='h-4 w-4' />
 				) : (
-					<SystemSVG className='w-4 h-4' />
+					<SystemSVG className='h-4 w-4' />
 				)}
 			</button>
 		)
 	return (
-		<button className='border border-slate-300 h-8 w-8 flex justify-center items-center rounded-lg'>
-			<SystemSVG className='w-4 h-4' />
+		<button className='flex h-8 w-8 items-center justify-center rounded-lg border border-slate-300'>
+			<SystemSVG className='h-4 w-4' />
 		</button>
 	)
 }

website/prettier.config.js

@@ -29,13 +29,13 @@ export default function CollapseString() {
 		<>
 			<h2 className='mt-20 text-lg font-medium'>Collapse String</h2>
 
-			<div className='flex gap-2 mt-3 items-center flex-wrap'>
-				<ul className='flex flex-wrap gap-1 select-none'>
+			<div className='mt-3 flex flex-wrap items-center gap-2'>
+				<ul className='flex select-none flex-wrap gap-1'>
 					{options.map(item => (
 						<li
 							key={item}
 							className={clsx(
-								'border rounded-lg cursor-pointer px-2 py-1 text-center min-w-[32px]',
+								'min-w-[32px] cursor-pointer rounded-lg border px-2 py-1 text-center',
 								selected === item && 'bg-slate-200 dark:bg-slate-700'
 							)}
 							onClick={() => setSelected(item)}>
@@ -46,7 +46,7 @@ export default function CollapseString() {
 
 				<input
 					value={length}
-					className='py-1 px-2 rounded-lg border bg-white'
+					className='rounded-lg border bg-white px-2 py-1'
 					type='number'
 					onInput={e => {
 						const target = e.target as HTMLInputElement
@@ -58,19 +58,19 @@ export default function CollapseString() {
 			</div>
 
 			<div className='relative'>
-				<code className='my-3 flex items-center text-sm justify-between rounded-lg border bg-slate-50 p-4 dark:bg-slate-700 overflow-auto'>
+				<code className='my-3 flex items-center justify-between overflow-auto rounded-lg border bg-slate-50 p-4 text-sm dark:bg-slate-700'>
 					<pre
 						dangerouslySetInnerHTML={{
 							__html: highlightedCode
 						}}
 					/>
 				</code>
-				<button onClick={copy} className='rounded-lg p-1 absolute top-3 right-4 bg-white/50 border backdrop-blur'>
+				<button onClick={copy} className='absolute right-4 top-3 rounded-lg border bg-white/50 p-1 backdrop-blur'>
 					{copied ? <CopiedSVG className='h-5 w-5' /> : <CopySVG className='h-5 w-5' />}
 				</button>
 			</div>
 
-			<div className='rounded-lg border p-4 text-sm mt-2 bg-white dark:bg-[#0E0832]'>
+			<div className='mt-2 rounded-lg border bg-white p-4 text-sm dark:bg-[#0E0832]'>
 				<JsonView
 					collapseStringMode={selected}
 					collapseStringsAfterLength={length}