Add prettier tool, prettify code

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+build
+coverage
+

.prettierrc.json

@@ -0,0 +1 @@
+{}

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"
   }
 }

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<typeof ExpressionCard>;
 
-const Template: ComponentStory<typeof ExpressionCard> = (args) => <ExpressionCard {...args} />;
+const Template: ComponentStory<typeof ExpressionCard> = (args) => (
+  <ExpressionCard {...args} />
+);
 
 export const Hidden = Template.bind({});
 Hidden.args = {
   categories: ["category_A", "category_B"],
   description: "Description of this noun",
   prompt: "The noun",
-    show_description: false
-}
+  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
-}
+  show_description: true,
+};

src/components/ExpressionCard/ExpressionCard.tsx

@@ -7,12 +7,19 @@ export interface ExpressionCardProps {
   show_description?: boolean;
 }
 
-export function ExpressionCard({ prompt, categories, description, show_description }: ExpressionCardProps) {
+export function ExpressionCard({
+  prompt,
+  categories,
+  description,
+  show_description,
+}: ExpressionCardProps) {
   return (
     <article className="expression-card">
       <h2 className="expression-card-prompt">{prompt}</h2>
       <h3 className="expression-card-categories">{categories.join(", ")}</h3>
-            {show_description && <div className="expression-card-details">{description}</div>}
+      {show_description && (
+        <div className="expression-card-details">{description}</div>
+      )}
     </article>
   );
 }

src/components/ExpressionCard/index.ts

@@ -1 +1 @@
-export * from './ExpressionCard';
+export * from "./ExpressionCard";

src/components/index.ts

@@ -1 +1 @@
-export * from './ExpressionCard'
+export * from "./ExpressionCard";

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 <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }
 
-export default MyApp
+export default MyApp;

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<Data>
 ) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: "John Doe" });
 }

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 (
-    <div>
-      Hello
-    </div>
-  )
-}
+  return <div>Hello</div>;
+};
 
-export default Home
+export default Home;

src/styles/components.css

@@ -7,7 +7,6 @@
   box-shadow: 0px 5px 5px -5px darkslategray;
   padding: 16px;
   word-wrap: break-word;
-
 }
 
 .expression-card-prompt {
@@ -31,21 +30,18 @@
   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;
 }

src/styles/globals.css

@@ -4,19 +4,87 @@ 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 {
+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;
@@ -27,22 +95,35 @@ time, mark, audio, video {
   vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
   display: block;
 }
 body {
   line-height: 1;
 }
-ol, ul {
+ol,
+ul {
   list-style: none;
 }
-blockquote, q {
+blockquote,
+q {
   quotes: none;
 }
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
   content: none;
 }
 table {

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"