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/globals.css";
-import '../../styles/components.css'
+import "../../styles/components.css";
 
-import React from 'react';
+import React from "react";
-import { ComponentStory, ComponentMeta } from '@storybook/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"],
+  categories: ["category_A", "category_B"],
-    description: "Description of this noun",
+  description: "Description of this noun",
-    prompt: "The noun",
+  prompt: "The noun",
-    show_description: false
+  show_description: false,
-}
+};
 
 export const Revealed = Template.bind({});
 Revealed.args = {
-    categories: ["category_A", "category_B"],
+  categories: ["category_A", "category_B"],
-    description: "Description of this noun",
+  description: "Description of this noun",
-    prompt: "The noun",
+  prompt: "The noun",
-    show_description: true
+  show_description: true,
-}
+};

src/components/ExpressionCard/ExpressionCard.tsx

@@ -1,18 +1,25 @@
 import { ReactNode } from "react";
 
 export interface ExpressionCardProps {
-    prompt: string;
+  prompt: string;
-    categories: string[];
+  categories: string[];
-    description: ReactNode;
+  description: ReactNode;
-    show_description?: boolean;
+  show_description?: boolean;
 }
 
-export function ExpressionCard({ prompt, categories, description, show_description }: ExpressionCardProps) {
+export function ExpressionCard({
-    return (
+  prompt,
-        <article className="expression-card">
+  categories,
-            <h2 className="expression-card-prompt">{prompt}</h2>
+  description,
-            <h3 className="expression-card-categories">{categories.join(", ")}</h3>
+  show_description,
-            {show_description && <div className="expression-card-details">{description}</div>}
+}: ExpressionCardProps) {
-        </article>
+  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>
+      )}
+    </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/globals.css";
-import '../styles/components.css'
+import "../styles/components.css";
-import type { AppProps } from 'next/app'
+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 type { NextPage } from "next";
-import Head from 'next/head'
+import Head from "next/head";
-import Image from 'next/image'
+import Image from "next/image";
 
 const Home: NextPage = () => {
-  return (
+  return <div>Hello</div>;
-    <div>
+};
-      Hello
-    </div>
-  )
-}
 
-export default Home
+export default Home;

src/styles/components.css

@@ -1,51 +1,47 @@
 .expression-card {
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-
-    background-color: lavender;
-    border: 1px solid darkslategray;
-	box-shadow: 0px 5px 5px -5px darkslategray;
-    padding: 16px;
-    word-wrap: break-word;
 
+  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;
+  color: darkslategray;
-    font-size: 18px;
+  font-size: 18px;
-    font-weight: bold;
+  font-weight: bold;
-    margin: 10px 0px;
+  margin: 10px 0px;
 }
 
 .expression-card-categories {
-    color: slategray;
+  color: slategray;
-    font-family: monospace;
+  font-family: monospace;
-    font-size: 12px;
+  font-size: 12px;
-    margin: 10px 0px;
+  margin: 10px 0px;
 }
 
 .expression-card-details {
-    color: darkslategray;
+  color: darkslategray;
-    font-size: 15px;
+  font-size: 15px;
-    margin: 20px 0px 10px;
+  margin: 20px 0px 10px;
-    overflow-y: auto;
+  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,50 +4,131 @@ http://meyerweb.com/eric/tools/css/reset/
 v2.0 | 20110126
 */
 
-html, body, div, span, applet, object, iframe,
+html,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+body,
-a, abbr, acronym, address, big, cite, code,
+div,
-del, dfn, em, img, ins, kbd, q, s, samp,
+span,
-small, strike, strong, sub, sup, tt, var,
+applet,
-b, u, i, center,
+object,
-dl, dt, dd, ol, ul, li,
+iframe,
-fieldset, form, label, legend,
+h1,
-table, caption, tbody, tfoot, thead, tr, th, td,
+h2,
-article, aside, canvas, details, embed, 
+h3,
-figure, figcaption, footer, header, hgroup, 
+h4,
-menu, nav, output, ruby, section, summary,
+h5,
-time, mark, audio, video {
+h6,
-	margin: 0;
+p,
-	padding: 0;
+blockquote,
-	border: 0;
+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-size: 100%;
-	font: inherit;
+  font: inherit;
-	vertical-align: baseline;
+  vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
+article,
-footer, header, hgroup, menu, nav, section {
+aside,
-	display: block;
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
 }
 body {
-	line-height: 1;
+  line-height: 1;
 }
-ol, ul {
+ol,
-	list-style: none;
+ul {
+  list-style: none;
 }
-blockquote, q {
+blockquote,
-	quotes: none;
+q {
+  quotes: none;
 }
-blockquote:before, blockquote:after,
+blockquote:before,
-q:before, q:after {
+blockquote:after,
-	content: '';
+q:before,
-	content: none;
+q:after {
+  content: "";
+  content: none;
 }
 table {
-	border-collapse: collapse;
+  border-collapse: collapse;
-	border-spacing: 0;
+  border-spacing: 0;
 }
 a {
   color: inherit;

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"