From b08624f6c8495579da0996c76fb793c150cb5917 Mon Sep 17 00:00:00 2001 From: Haris Shah Date: Thu, 21 Mar 2024 23:22:23 +0500 Subject: [PATCH] feat: add prettier tailwind plugin --- apps/frontend/.prettierrc | 6 ++ apps/frontend/package.json | 2 + .../public/assets/images/bg-header.svg | 1 + .../public/assets/images/company-logo.svg | 1 + .../frontend/public/favicon/favicon-32x32.png | Bin 0 -> 1063 bytes apps/frontend/src/app/layout.tsx | 11 ++- apps/frontend/src/app/page.tsx | 13 +-- apps/frontend/src/components/Card.tsx | 22 +++++ apps/frontend/tsconfig.json | 11 ++- package-lock.json | 81 +++++++++++++++++- packages/config-eslint/next.js | 27 +++--- 11 files changed, 147 insertions(+), 28 deletions(-) create mode 100644 apps/frontend/.prettierrc create mode 100644 apps/frontend/public/assets/images/bg-header.svg create mode 100644 apps/frontend/public/assets/images/company-logo.svg create mode 100644 apps/frontend/public/favicon/favicon-32x32.png create mode 100644 apps/frontend/src/components/Card.tsx diff --git a/apps/frontend/.prettierrc b/apps/frontend/.prettierrc new file mode 100644 index 0000000..5df0019 --- /dev/null +++ b/apps/frontend/.prettierrc @@ -0,0 +1,6 @@ +{ + "plugins": ["prettier-plugin-tailwindcss"], + "trailingComma": "es5", + "semi": false, + "singleQuote": true +} diff --git a/apps/frontend/package.json b/apps/frontend/package.json index 07d660c..d70812b 100644 --- a/apps/frontend/package.json +++ b/apps/frontend/package.json @@ -26,6 +26,8 @@ "@types/react-dom": "^18.2.18", "autoprefixer": "^10.4.18", "postcss": "^8.4.35", + "prettier": "^3.2.5", + "prettier-plugin-tailwindcss": "^0.5.12", "tailwindcss": "^3.4.1", "typescript": "^5.3.3" } diff --git a/apps/frontend/public/assets/images/bg-header.svg b/apps/frontend/public/assets/images/bg-header.svg new file mode 100644 index 0000000..b30a718 --- /dev/null +++ b/apps/frontend/public/assets/images/bg-header.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/frontend/public/assets/images/company-logo.svg b/apps/frontend/public/assets/images/company-logo.svg new file mode 100644 index 0000000..3e60d28 --- /dev/null +++ b/apps/frontend/public/assets/images/company-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/frontend/public/favicon/favicon-32x32.png b/apps/frontend/public/favicon/favicon-32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..1e2df7f089f46dd930239e418bf13e8e4c1cca0f GIT binary patch literal 1063 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyEa{HEjtmSN`?>!lvVtU&J%W50 z7^>757#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+081EY0-Plzi}!G9Wnr(eF` z|M+F+!xzhMK3;zF(cgdn_B?v|`rD7+fB)V2@MY=EN9|{BEWPpQ{f}RtfBl|!^+Ea3 z%d2iZe)i@2x9`6{eg66V&!4ULpSPU4KJ)Uu^RM22`~BzO$wz&&PyPA(@7<4I`yRjQ zJAZr1#XB#){D-o5+r^Vjdc3)fsquh@R{^yA;Z|8C!Zw`1zDvzMNK{QUFr z^G~yvU&yK5nOnE3q5ts2d8Z#d`S9=G|MwriU%2{m%ii0owp@Sy>dXGuA$NemCsPvS z7YvLEt(>(tKmBDkpML+hROc(RL;oBPGFiO5x8~1ErS?rgb&N^g?k~Ih+L^ zk;M!Q+`=Ht$S`Y;1W=H@#M9T6{SlWiKeL>x)y)*39#2mf#}JFtt&`J}n+ycniko-@ z3;26vOWyCzeS7I$?C$UX{_kIKV}WAF+24(KRQ;Wbm=(hXgpO=b(eBb|byZ~P5M3dt zyDB-nDx`Zw9LoWN-GrY`kHxRfy}Q3KfBxRdclJCv_%N_mL-x0j+x*I+s%JIY&vgg3Y zTes?8j%DMbh5PocynFBNZJq}$w`Q+tKfe6=^y}tkkv_Zb+uQBmSHB|O-+X(*4%OrO zQF%8%OSj*z`t$7X`oHyz%ReTa40^8r7Z}c}C9V-ADTyViR>?)FK#IZ0z|cb1&_LJF zGQ`l-%D~vl*g)IB$jZQAv*1E06b-rgDVb@NxHTN|kz5AU01WSllAy$Lg@U5|w9K4T zg_6pGRE5lfl4J&kiaC!z@o*G|X=t4CKYhmYX%GXmGPhnbx3IFX_hb=fVFi~4lfx;@ u%9}$JPT#n4;>ejJGDp}?H+U@Y(qnifE?Dx($#g2v3I - {children} + + + + + {children} ) } diff --git a/apps/frontend/src/app/page.tsx b/apps/frontend/src/app/page.tsx index 9ee10ee..c37035c 100644 --- a/apps/frontend/src/app/page.tsx +++ b/apps/frontend/src/app/page.tsx @@ -1,11 +1,12 @@ -export const metadata = { - title: 'Store | Kitchen Sink', -} +import { Card } from '@/components/Card' export default function Store(): JSX.Element { return ( -
-

Hello, World!

-
+ <> +
+
+ +
+ ) } diff --git a/apps/frontend/src/components/Card.tsx b/apps/frontend/src/components/Card.tsx new file mode 100644 index 0000000..01ffa37 --- /dev/null +++ b/apps/frontend/src/components/Card.tsx @@ -0,0 +1,22 @@ +import Image from 'next/image' +import React from 'react' + +export function Card() { + return ( +
+
+ logo +
header content
+
+
+ tags +
+
+ ) +} diff --git a/apps/frontend/tsconfig.json b/apps/frontend/tsconfig.json index 8b2e340..abd420c 100644 --- a/apps/frontend/tsconfig.json +++ b/apps/frontend/tsconfig.json @@ -5,9 +5,12 @@ "outDir": "dist", "plugins": [ { - "name": "next" - } - ] + "name": "next", + }, + ], + "paths": { + "@/*": ["./src/*"], + }, }, - "include": ["src", "next-env.d.ts", ".next/types/**/*.ts"] + "include": ["src", "next-env.d.ts", ".next/types/**/*.ts"], } diff --git a/package-lock.json b/package-lock.json index 696e156..673f23d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -112,6 +112,8 @@ "@types/react-dom": "^18.2.18", "autoprefixer": "^10.4.18", "postcss": "^8.4.35", + "prettier": "^3.2.5", + "prettier-plugin-tailwindcss": "^0.5.12", "tailwindcss": "^3.4.1", "typescript": "^5.3.3" } @@ -11424,9 +11426,9 @@ } }, "node_modules/prettier": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.4.tgz", - "integrity": "sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==", + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz", + "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==", "dev": true, "bin": { "prettier": "bin/prettier.cjs" @@ -11456,6 +11458,79 @@ } } }, + "node_modules/prettier-plugin-tailwindcss": { + "version": "0.5.12", + "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.12.tgz", + "integrity": "sha512-o74kiDBVE73oHW+pdkFSluHBL3cYEvru5YgEqNkBMFF7Cjv+w1vI565lTlfoJT4VLWDe0FMtZ7FkE/7a4pMXSQ==", + "dev": true, + "engines": { + "node": ">=14.21.3" + }, + "peerDependencies": { + "@ianvs/prettier-plugin-sort-imports": "*", + "@prettier/plugin-pug": "*", + "@shopify/prettier-plugin-liquid": "*", + "@trivago/prettier-plugin-sort-imports": "*", + "prettier": "^3.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-sort-imports": "*", + "prettier-plugin-style-order": "*", + "prettier-plugin-svelte": "*" + }, + "peerDependenciesMeta": { + "@ianvs/prettier-plugin-sort-imports": { + "optional": true + }, + "@prettier/plugin-pug": { + "optional": true + }, + "@shopify/prettier-plugin-liquid": { + "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-sort-imports": { + "optional": true + }, + "prettier-plugin-style-order": { + "optional": true + }, + "prettier-plugin-svelte": { + "optional": true + }, + "prettier-plugin-twig-melody": { + "optional": true + } + } + }, "node_modules/pretty-format": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz", diff --git a/packages/config-eslint/next.js b/packages/config-eslint/next.js index b67d68f..6acb99f 100644 --- a/packages/config-eslint/next.js +++ b/packages/config-eslint/next.js @@ -1,6 +1,6 @@ -const { resolve } = require("node:path"); +const { resolve } = require('node:path') -const project = resolve(process.cwd(), "tsconfig.json"); +const project = resolve(process.cwd(), 'tsconfig.json') /* * This is a custom ESLint configuration for use with @@ -13,12 +13,12 @@ const project = resolve(process.cwd(), "tsconfig.json"); module.exports = { extends: [ - "@vercel/style-guide/eslint/node", - "@vercel/style-guide/eslint/typescript", - "@vercel/style-guide/eslint/browser", - "@vercel/style-guide/eslint/react", - "@vercel/style-guide/eslint/next", - "eslint-config-turbo", + '@vercel/style-guide/eslint/node', + '@vercel/style-guide/eslint/typescript', + '@vercel/style-guide/eslint/browser', + '@vercel/style-guide/eslint/react', + '@vercel/style-guide/eslint/next', + 'eslint-config-turbo', ].map(require.resolve), parserOptions: { project, @@ -27,17 +27,18 @@ module.exports = { React: true, JSX: true, }, - plugins: ["only-warn"], + plugins: ['only-warn'], settings: { - "import/resolver": { + 'import/resolver': { typescript: { project, }, }, }, - ignorePatterns: ["node_modules/", "dist/"], + ignorePatterns: ['node_modules/', 'dist/'], // add rules configurations here rules: { - "import/no-default-export": "off", + 'import/no-default-export': 'off', + allowSnakeCase: true, }, -}; +}