From b3b20de5163d65f3e27601875400b6c403cfc7eb Mon Sep 17 00:00:00 2001 From: Thiago Chaves Date: Wed, 6 Jul 2022 22:43:42 +0300 Subject: [PATCH] Add prettier tool, prettify code --- .prettierignore | 4 + .prettierrc.json | 1 + package.json | 2 + .../ExpressionCard/ExpressionCard.stories.tsx | 36 +++-- .../ExpressionCard/ExpressionCard.tsx | 33 ++-- src/components/ExpressionCard/index.ts | 2 +- src/components/index.ts | 2 +- src/pages/_app.tsx | 10 +- src/pages/api/hello.ts | 8 +- src/pages/index.tsx | 16 +- src/styles/components.css | 48 +++--- src/styles/globals.css | 147 ++++++++++++++---- yarn.lock | 5 + 13 files changed, 204 insertions(+), 110 deletions(-) create mode 100644 .prettierignore create mode 100644 .prettierrc.json diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..c6cad59 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +# Ignore artifacts: +build +coverage + diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1 @@ +{} diff --git a/package.json b/package.json index d7cbf6b..533f54b 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "build": "next build", "start": "next start", "lint": "next lint", + "prettify": "prettier --write src/", "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook" }, @@ -32,6 +33,7 @@ "eslint": "8.19.0", "eslint-config-next": "12.2.0", "eslint-plugin-storybook": "^0.5.13", + "prettier": "^2.7.1", "typescript": "4.7.4" } } diff --git a/src/components/ExpressionCard/ExpressionCard.stories.tsx b/src/components/ExpressionCard/ExpressionCard.stories.tsx index a028758..8132618 100644 --- a/src/components/ExpressionCard/ExpressionCard.stories.tsx +++ b/src/components/ExpressionCard/ExpressionCard.stories.tsx @@ -1,30 +1,32 @@ -import '../../styles/globals.css' -import '../../styles/components.css' +import "../../styles/globals.css"; +import "../../styles/components.css"; -import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import React from "react"; +import { ComponentStory, ComponentMeta } from "@storybook/react"; -import { ExpressionCard } from './ExpressionCard'; +import { ExpressionCard } from "./ExpressionCard"; export default { - title: 'Components/Expression Card', + title: "Components/Expression Card", component: ExpressionCard, } as ComponentMeta; -const Template: ComponentStory = (args) => ; +const Template: ComponentStory = (args) => ( + +); export const Hidden = Template.bind({}); Hidden.args = { - categories: ["category_A", "category_B"], - description: "Description of this noun", - prompt: "The noun", - show_description: false -} + categories: ["category_A", "category_B"], + description: "Description of this noun", + prompt: "The noun", + show_description: false, +}; export const Revealed = Template.bind({}); Revealed.args = { - categories: ["category_A", "category_B"], - description: "Description of this noun", - prompt: "The noun", - show_description: true -} + categories: ["category_A", "category_B"], + description: "Description of this noun", + prompt: "The noun", + show_description: true, +}; diff --git a/src/components/ExpressionCard/ExpressionCard.tsx b/src/components/ExpressionCard/ExpressionCard.tsx index 26b459a..5d2abc3 100644 --- a/src/components/ExpressionCard/ExpressionCard.tsx +++ b/src/components/ExpressionCard/ExpressionCard.tsx @@ -1,18 +1,25 @@ import { ReactNode } from "react"; export interface ExpressionCardProps { - prompt: string; - categories: string[]; - description: ReactNode; - show_description?: boolean; + prompt: string; + categories: string[]; + description: ReactNode; + show_description?: boolean; } -export function ExpressionCard({ prompt, categories, description, show_description }: ExpressionCardProps) { - return ( -
-

{prompt}

-

{categories.join(", ")}

- {show_description &&
{description}
} -
- ); -} \ No newline at end of file +export function ExpressionCard({ + prompt, + categories, + description, + show_description, +}: ExpressionCardProps) { + return ( +
+

{prompt}

+

{categories.join(", ")}

+ {show_description && ( +
{description}
+ )} +
+ ); +} diff --git a/src/components/ExpressionCard/index.ts b/src/components/ExpressionCard/index.ts index ad6d194..2356fdd 100644 --- a/src/components/ExpressionCard/index.ts +++ b/src/components/ExpressionCard/index.ts @@ -1 +1 @@ -export * from './ExpressionCard'; +export * from "./ExpressionCard"; diff --git a/src/components/index.ts b/src/components/index.ts index 1a2b2c6..2356fdd 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1 +1 @@ -export * from './ExpressionCard' \ No newline at end of file +export * from "./ExpressionCard"; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index f5c3376..ae2cb5c 100755 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,9 +1,9 @@ -import '../styles/globals.css' -import '../styles/components.css' -import type { AppProps } from 'next/app' +import "../styles/globals.css"; +import "../styles/components.css"; +import type { AppProps } from "next/app"; function MyApp({ Component, pageProps }: AppProps) { - return + return ; } -export default MyApp +export default MyApp; diff --git a/src/pages/api/hello.ts b/src/pages/api/hello.ts index f8bcc7e..74a3605 100755 --- a/src/pages/api/hello.ts +++ b/src/pages/api/hello.ts @@ -1,13 +1,13 @@ // Next.js API route support: https://nextjs.org/docs/api-routes/introduction -import type { NextApiRequest, NextApiResponse } from 'next' +import type { NextApiRequest, NextApiResponse } from "next"; type Data = { - name: string -} + name: string; +}; export default function handler( req: NextApiRequest, res: NextApiResponse ) { - res.status(200).json({ name: 'John Doe' }) + res.status(200).json({ name: "John Doe" }); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d6b9535..4b45982 100755 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,13 +1,9 @@ -import type { NextPage } from 'next' -import Head from 'next/head' -import Image from 'next/image' +import type { NextPage } from "next"; +import Head from "next/head"; +import Image from "next/image"; const Home: NextPage = () => { - return ( -
- Hello -
- ) -} + return
Hello
; +}; -export default Home +export default Home; diff --git a/src/styles/components.css b/src/styles/components.css index 4eb4bb1..82de464 100644 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -1,51 +1,47 @@ .expression-card { - display: flex; - flex-direction: column; - - background-color: lavender; - border: 1px solid darkslategray; - box-shadow: 0px 5px 5px -5px darkslategray; - padding: 16px; - word-wrap: break-word; + display: flex; + flex-direction: column; + background-color: lavender; + border: 1px solid darkslategray; + box-shadow: 0px 5px 5px -5px darkslategray; + padding: 16px; + word-wrap: break-word; } .expression-card-prompt { - color: darkslategray; - font-size: 18px; - font-weight: bold; - margin: 10px 0px; + color: darkslategray; + font-size: 18px; + font-weight: bold; + margin: 10px 0px; } .expression-card-categories { - color: slategray; - font-family: monospace; - font-size: 12px; - margin: 10px 0px; + color: slategray; + font-family: monospace; + font-size: 12px; + margin: 10px 0px; } .expression-card-details { - color: darkslategray; - font-size: 15px; - margin: 20px 0px 10px; - overflow-y: auto; + color: darkslategray; + font-size: 15px; + margin: 20px 0px 10px; + overflow-y: auto; } -.expression-card-details::-webkit-scrollbar-track -{ +.expression-card-details::-webkit-scrollbar-track { background-color: lightslategray; border-radius: 4px; } -.expression-card-details::-webkit-scrollbar -{ +.expression-card-details::-webkit-scrollbar { border-radius: 4px; width: 8px; padding-left: 14px; } -.expression-card-details::-webkit-scrollbar-thumb -{ +.expression-card-details::-webkit-scrollbar-thumb { border-radius: 4px; background-color: darkslategray; } diff --git a/src/styles/globals.css b/src/styles/globals.css index f04f772..502b0c6 100755 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -4,50 +4,131 @@ http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-size: 100%; - font: inherit; - vertical-align: baseline; + font-size: 100%; + font: inherit; + vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; } body { - line-height: 1; + line-height: 1; } -ol, ul { - list-style: none; +ol, +ul { + list-style: none; } -blockquote, q { - quotes: none; +blockquote, +q { + quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; } table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } a { color: inherit; diff --git a/yarn.lock b/yarn.lock index 77dc513..2ed91bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8556,6 +8556,11 @@ prelude-ls@~1.1.2: resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.0.tgz#b6a5bf1284026ae640f17f7ff5658a7567fc0d18" integrity sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w== +prettier@^2.7.1: + version "2.7.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64" + integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g== + pretty-error@^2.1.1: version "2.1.2" resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.2.tgz#be89f82d81b1c86ec8fdfbc385045882727f93b6"