studycardtool/app
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Add prettier tool, prettify code

Browse Source
This commit is contained in:
Thiago Chaves 2022-07-06 22:43:42 +03:00
parent 529ca8d270
commit b3b20de516
13 changed files with 204 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.prettierignore Normal file
View File

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

1
.prettierrc.json Normal file
View File

@ -0,0 +1 @@
{}

2
package.json
View File

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

36
src/components/ExpressionCard/ExpressionCard.stories.tsx
View File

@ -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
}
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,
};

33
src/components/ExpressionCard/ExpressionCard.tsx
View File

@ -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 (
<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>
);
}
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>
)}
</article>
);
}

2
src/components/ExpressionCard/index.ts
View File

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

2
src/components/index.ts
View File

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

10
src/pages/_app.tsx
View File

@ -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;

8
src/pages/api/hello.ts
View File

@ -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" });
}

16
src/pages/index.tsx
View File

@ -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;

48
src/styles/components.css
View File

@ -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;
}

147
src/styles/globals.css
View File

@ -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;

5
yarn.lock
View File

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