jessebrault/meals-made-easy-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ran prettier on all src files now that printWidth is 120.

Browse Source
This commit is contained in:
Jesse Brault 2024-08-08 10:46:49 -05:00
parent 1ded7331ef
commit 111acea22f
18 changed files with 349 additions and 426 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/getImage.ts
View File

@ -7,11 +7,7 @@ export interface GetImageDeps {
url: string url: string
} }
const getImage = async ({ const getImage = async ({ accessToken, signal, url }: GetImageDeps): Promise<string> => {
accessToken,
signal,
url
}: GetImageDeps): Promise<string> => {
const headers = new Headers() const headers = new Headers()
if (accessToken !== null) { if (accessToken !== null) {
headers.set('Authorization', `Bearer ${accessToken}`) headers.set('Authorization', `Bearer ${accessToken}`)

25
src/api/getRecipe.ts
View File

@ -2,10 +2,7 @@ import { notFound } from '@tanstack/react-router'
import { AuthContextType } from '../auth' import { AuthContextType } from '../auth'
import { ApiError } from './ApiError' import { ApiError } from './ApiError'
import ExpiredTokenError from './ExpiredTokenError' import ExpiredTokenError from './ExpiredTokenError'
import FullRecipeView, { import FullRecipeView, { RawFullRecipeView, toFullRecipeView } from './types/FullRecipeView'
RawFullRecipeView,
toFullRecipeView
} from './types/FullRecipeView'
export interface GetRecipeDeps { export interface GetRecipeDeps {
authContext: AuthContextType authContext: AuthContextType
@ -14,24 +11,16 @@ export interface GetRecipeDeps {
abortSignal: AbortSignal abortSignal: AbortSignal
} }
const getRecipe = async ({ const getRecipe = async ({ authContext, username, slug, abortSignal }: GetRecipeDeps): Promise<FullRecipeView> => {
authContext,
username,
slug,
abortSignal
}: GetRecipeDeps): Promise<FullRecipeView> => {
const headers = new Headers() const headers = new Headers()
if (authContext.token !== null) { if (authContext.token !== null) {
headers.set('Authorization', `Bearer ${authContext.token}`) headers.set('Authorization', `Bearer ${authContext.token}`)
} }
const response = await fetch( const response = await fetch(import.meta.env.VITE_MME_API_URL + `/recipes/${username}/${slug}`, {
import.meta.env.VITE_MME_API_URL + `/recipes/${username}/${slug}`, signal: abortSignal,
{ headers,
signal: abortSignal, mode: 'cors'
headers, })
mode: 'cors'
}
)
if (response.ok) { if (response.ok) {
return toFullRecipeView((await response.json()) as RawFullRecipeView) return toFullRecipeView((await response.json()) as RawFullRecipeView)
} else if (response.status === 401) { } else if (response.status === 401) {

17
src/api/getRecipeInfos.ts
View File

@ -20,18 +20,13 @@ const getRecipeInfos = async ({
if (token !== null) { if (token !== null) {
headers.set('Authorization', `Bearer ${token}`) headers.set('Authorization', `Bearer ${token}`)
} }
const response = await fetch( const response = await fetch(import.meta.env.VITE_MME_API_URL + `/recipes?page=${pageNumber}&size=${pageSize}`, {
import.meta.env.VITE_MME_API_URL + signal: abortSignal,
`/recipes?page=${pageNumber}&size=${pageSize}`, headers,
{ mode: 'cors'
signal: abortSignal, })
headers,
mode: 'cors'
}
)
if (response.ok) { if (response.ok) {
const { pageNumber, pageSize, content } = const { pageNumber, pageSize, content } = (await response.json()) as RawRecipeInfosView
(await response.json()) as RawRecipeInfosView
return { return {
pageNumber, pageNumber,
pageSize, pageSize,

39
src/api/login.ts
View File

@ -1,28 +1,18 @@
import { LoginResult, RawLoginView } from './types/LoginView' import { LoginResult, RawLoginView } from './types/LoginView'
const login = async ( const login = async (username: string, password: string): Promise<LoginResult> => {
username: string,
password: string
): Promise<LoginResult> => {
try { try {
const response = await fetch( const response = await fetch(import.meta.env.VITE_MME_API_URL + '/auth/login', {
import.meta.env.VITE_MME_API_URL + '/auth/login', body: JSON.stringify({ username, password }),
{ credentials: 'include',
body: JSON.stringify({ username, password }), headers: {
credentials: 'include', 'Content-type': 'application/json'
headers: { },
'Content-type': 'application/json' method: 'POST',
}, mode: 'cors'
method: 'POST', })
mode: 'cors'
}
)
if (response.ok) { if (response.ok) {
const { const { username, accessToken, expires: rawExpires } = (await response.json()) as RawLoginView
username,
accessToken,
expires: rawExpires
} = (await response.json()) as RawLoginView
return { return {
_tag: 'success', _tag: 'success',
loginView: { loginView: {
@ -36,13 +26,10 @@ const login = async (
if (response.status === 401) { if (response.status === 401) {
error = 'Invalid username or password.' error = 'Invalid username or password.'
} else if (response.status === 500) { } else if (response.status === 500) {
error = error = 'There was an internal server error. Please try again later.'
'There was an internal server error. Please try again later.'
} else { } else {
error = 'Unknown error.' error = 'Unknown error.'
console.error( console.error(`Unknown error: ${response.status} ${response.statusText}`)
`Unknown error: ${response.status} ${response.statusText}`
)
} }
return { return {
_tag: 'failure', _tag: 'failure',

19
src/api/refresh.ts
View File

@ -11,14 +11,11 @@ export class ExpiredRefreshTokenError extends ApiError {
const refresh = async (): Promise<LoginView> => { const refresh = async (): Promise<LoginView> => {
let response: Response let response: Response
try { try {
response = await fetch( response = await fetch(import.meta.env.VITE_MME_API_URL + '/auth/refresh', {
import.meta.env.VITE_MME_API_URL + '/auth/refresh', credentials: 'include',
{ method: 'POST',
credentials: 'include', mode: 'cors'
method: 'POST', })
mode: 'cors'
}
)
} catch (fetchError) { } catch (fetchError) {
if (fetchError instanceof TypeError) { if (fetchError instanceof TypeError) {
throw fetchError // rethrow network issues throw fetchError // rethrow network issues
@ -27,11 +24,7 @@ const refresh = async (): Promise<LoginView> => {
} }
} }
if (response.ok) { if (response.ok) {
const { const { username, accessToken, expires: rawExpires } = (await response.json()) as RawLoginView
username,
accessToken,
expires: rawExpires
} = (await response.json()) as RawLoginView
return { return {
username, username,
accessToken, accessToken,

7
src/components/recipe-card/RecipeCard.tsx
View File

@ -32,12 +32,7 @@ const RecipeCard = ({
slug slug
}} }}
> >
<img <img className={classes.recipeImage} src={mainImageUrl} alt={mainImageAlt} title={mainImageAlt} />
className={classes.recipeImage}
src={mainImageUrl}
alt={mainImageAlt}
title={mainImageAlt}
/>
</Link> </Link>
<div className={classes.infoContainer}> <div className={classes.infoContainer}>
<div className={classes.infoRow}> <div className={classes.infoRow}>

12
src/components/recipe-visibility-icon/RecipeVisibilityIcon.tsx
View File

@ -7,17 +7,9 @@ export interface RecipeVisibilityIconProps {
const RecipeVisibilityIcon = ({ isPublic }: RecipeVisibilityIconProps) => const RecipeVisibilityIcon = ({ isPublic }: RecipeVisibilityIconProps) =>
isPublic ? ( isPublic ? (
<FontAwesomeIcon <FontAwesomeIcon icon="globe" className={classes.recipeVisibilityIcon} size="sm" />
icon="globe"
className={classes.recipeVisibilityIcon}
size="sm"
/>
) : ( ) : (
<FontAwesomeIcon <FontAwesomeIcon icon="lock" className={classes.recipeVisibilityIcon} size="sm" />
icon="lock"
className={classes.recipeVisibilityIcon}
size="sm"
/>
) )
export default RecipeVisibilityIcon export default RecipeVisibilityIcon

30
src/routes/login.tsx
View File

@ -1,10 +1,4 @@
import { import { createFileRoute, redirect, useNavigate, useRouter, useSearch } from '@tanstack/react-router'
createFileRoute,
redirect,
useNavigate,
useRouter,
useSearch
} from '@tanstack/react-router'
import { FormEvent, useState } from 'react' import { FormEvent, useState } from 'react'
import { z } from 'zod' import { z } from 'zod'
import login from '../api/login' import login from '../api/login'
@ -25,17 +19,13 @@ const Login = () => {
const password = (formData.get('password') as string | null) ?? '' const password = (formData.get('password') as string | null) ?? ''
const loginResult = await login(username, password) const loginResult = await login(username, password)
if (loginResult._tag === 'success') { if (loginResult._tag === 'success') {
auth.putToken( auth.putToken(loginResult.loginView.accessToken, loginResult.loginView.username, async () => {
loginResult.loginView.accessToken, await router.invalidate()
loginResult.loginView.username, await navigate({
async () => { to: redirect ?? '/recipes',
await router.invalidate() search: {}
await navigate({ })
to: redirect ?? '/recipes', })
search: {}
})
}
)
} else { } else {
setError(loginResult.error) setError(loginResult.error)
} }
@ -44,9 +34,7 @@ const Login = () => {
return ( return (
<div> <div>
<h2>Login Page</h2> <h2>Login Page</h2>
{expired ? ( {expired ? <p>Your session has expired. Please login again.</p> : null}
<p>Your session has expired. Please login again.</p>
) : null}
<form onSubmit={onSubmit}> <form onSubmit={onSubmit}>
<label htmlFor="username">Username</label> <label htmlFor="username">Username</label>
<input id="username" name="username" type="text" /> <input id="username" name="username" type="text" />

6
src/routes/recipes_/$username.$slug.tsx
View File

@ -38,11 +38,7 @@ export const Route = createFileRoute('/recipes/$username/$slug')({
} = useQuery( } = useQuery(
{ {
enabled: recipe !== undefined, enabled: recipe !== undefined,
queryKey: [ queryKey: ['images', recipe?.mainImage.owner.username, recipe?.mainImage.filename],
'images',
recipe?.mainImage.owner.username,
recipe?.mainImage.filename
],
queryFn: ({ signal }) => queryFn: ({ signal }) =>
getImage({ getImage({
accessToken: authContext.token, accessToken: authContext.token,

76
src/stories/Button.tsx
View File

@ -1,48 +1,42 @@
import React from 'react'; import React from 'react'
import './button.css'; import './button.css'
interface ButtonProps { interface ButtonProps {
/** /**
* Is this the principal call to action on the page? * Is this the principal call to action on the page?
*/ */
primary?: boolean; primary?: boolean
/** /**
* What background color to use * What background color to use
*/ */
backgroundColor?: string; backgroundColor?: string
/** /**
* How large should the button be? * How large should the button be?
*/ */
size?: 'small' | 'medium' | 'large'; size?: 'small' | 'medium' | 'large'
/** /**
* Button contents * Button contents
*/ */
label: string; label: string
/** /**
* Optional click handler * Optional click handler
*/ */
onClick?: () => void; onClick?: () => void
} }
/** /**
* Primary UI component for user interaction * Primary UI component for user interaction
*/ */
export const Button = ({ export const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props }: ButtonProps) => {
primary = false, const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'
size = 'medium', return (
backgroundColor, <button
label, type="button"
...props className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
}: ButtonProps) => { style={{ backgroundColor }}
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; {...props}
return ( >
<button {label}
type="button" </button>
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')} )
style={{ backgroundColor }} }
{...props}
>
{label}
</button>
);
};

67
src/stories/Configure.mdx
View File

@ -1,35 +1,37 @@
import { Meta } from "@storybook/blocks"; import { Meta } from '@storybook/blocks'
import Github from "./assets/github.svg"; import Github from './assets/github.svg'
import Discord from "./assets/discord.svg"; import Discord from './assets/discord.svg'
import Youtube from "./assets/youtube.svg"; import Youtube from './assets/youtube.svg'
import Tutorials from "./assets/tutorials.svg"; import Tutorials from './assets/tutorials.svg'
import Styling from "./assets/styling.png"; import Styling from './assets/styling.png'
import Context from "./assets/context.png"; import Context from './assets/context.png'
import Assets from "./assets/assets.png"; import Assets from './assets/assets.png'
import Docs from "./assets/docs.png"; import Docs from './assets/docs.png'
import Share from "./assets/share.png"; import Share from './assets/share.png'
import FigmaPlugin from "./assets/figma-plugin.png"; import FigmaPlugin from './assets/figma-plugin.png'
import Testing from "./assets/testing.png"; import Testing from './assets/testing.png'
import Accessibility from "./assets/accessibility.png"; import Accessibility from './assets/accessibility.png'
import Theming from "./assets/theming.png"; import Theming from './assets/theming.png'
import AddonLibrary from "./assets/addon-library.png"; import AddonLibrary from './assets/addon-library.png'
export const RightArrow = () => <svg export const RightArrow = () => (
viewBox="0 0 14 14" <svg
width="8px" viewBox="0 0 14 14"
height="14px" width="8px"
style={{ height="14px"
marginLeft: '4px', style={{
display: 'inline-block', marginLeft: '4px',
shapeRendering: 'inherit', display: 'inline-block',
verticalAlign: 'middle', shapeRendering: 'inherit',
fill: 'currentColor', verticalAlign: 'middle',
'path fill': 'currentColor' fill: 'currentColor',
}} 'path fill': 'currentColor'
> }}
<path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" /> >
</svg> <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
</svg>
)
<Meta title="Configure your project" /> <Meta title="Configure your project" />
@ -38,6 +40,7 @@ export const RightArrow = () => <svg
# Configure your project # Configure your project
Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community. Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
</div> </div>
<div className="sb-section"> <div className="sb-section">
<div className="sb-section-item"> <div className="sb-section-item">
@ -84,6 +87,7 @@ export const RightArrow = () => <svg
# Do more with Storybook # Do more with Storybook
Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs. Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
</div> </div>
<div className="sb-section"> <div className="sb-section">
@ -203,10 +207,11 @@ export const RightArrow = () => <svg
target="_blank" target="_blank"
>Discover tutorials<RightArrow /></a> >Discover tutorials<RightArrow /></a>
</div> </div>
</div> </div>
<style> <style>
{` {`
.sb-container { .sb-container {
margin-bottom: 48px; margin-bottom: 48px;
} }

52
src/stories/Header.stories.ts
View File

@ -1,33 +1,33 @@
import type { Meta, StoryObj } from '@storybook/react'; import type { Meta, StoryObj } from '@storybook/react'
import { fn } from '@storybook/test'; import { fn } from '@storybook/test'
import { Header } from './Header'; import { Header } from './Header'
const meta = { const meta = {
title: 'Example/Header', title: 'Example/Header',
component: Header, component: Header,
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
tags: ['autodocs'], tags: ['autodocs'],
parameters: { parameters: {
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
layout: 'fullscreen', layout: 'fullscreen'
}, },
args: { args: {
onLogin: fn(), onLogin: fn(),
onLogout: fn(), onLogout: fn(),
onCreateAccount: fn(), onCreateAccount: fn()
}, }
} satisfies Meta<typeof Header>; } satisfies Meta<typeof Header>
export default meta; export default meta
type Story = StoryObj<typeof meta>; type Story = StoryObj<typeof meta>
export const LoggedIn: Story = { export const LoggedIn: Story = {
args: { args: {
user: { user: {
name: 'Jane Doe', name: 'Jane Doe'
}, }
}, }
}; }
export const LoggedOut: Story = {}; export const LoggedOut: Story = {}

90
src/stories/Header.tsx
View File

@ -1,56 +1,50 @@
import React from 'react'; import React from 'react'
import { Button } from './Button'; import { Button } from './Button'
import './header.css'; import './header.css'
type User = { type User = {
name: string; name: string
}; }
interface HeaderProps { interface HeaderProps {
user?: User; user?: User
onLogin?: () => void; onLogin?: () => void
onLogout?: () => void; onLogout?: () => void
onCreateAccount?: () => void; onCreateAccount?: () => void
} }
export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => ( export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
<header> <header>
<div className="storybook-header"> <div className="storybook-header">
<div> <div>
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd"> <g fill="none" fillRule="evenodd">
<path <path
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z" d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
fill="#FFF" fill="#FFF"
/> />
<path <path d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z" fill="#555AB9" />
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z" <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
fill="#555AB9" </g>
/> </svg>
<path <h1>Acme</h1>
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" </div>
fill="#91BAF8" <div>
/> {user ? (
</g> <>
</svg> <span className="welcome">
<h1>Acme</h1> Welcome, <b>{user.name}</b>!
</div> </span>
<div> <Button size="small" onClick={onLogout} label="Log out" />
{user ? ( </>
<> ) : (
<span className="welcome"> <>
Welcome, <b>{user.name}</b>! <Button size="small" onClick={onLogin} label="Log in" />
</span> <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
<Button size="small" onClick={onLogout} label="Log out" /> </>
</> )}
) : ( </div>
<> </div>
<Button size="small" onClick={onLogin} label="Log in" /> </header>
<Button primary size="small" onClick={onCreateAccount} label="Sign up" /> )
</>
)}
</div>
</div>
</header>
);

46
src/stories/Page.stories.ts
View File

@ -1,32 +1,32 @@
import type { Meta, StoryObj } from '@storybook/react'; import type { Meta, StoryObj } from '@storybook/react'
import { within, userEvent, expect } from '@storybook/test'; import { within, userEvent, expect } from '@storybook/test'
import { Page } from './Page'; import { Page } from './Page'
const meta = { const meta = {
title: 'Example/Page', title: 'Example/Page',
component: Page, component: Page,
parameters: { parameters: {
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
layout: 'fullscreen', layout: 'fullscreen'
}, }
} satisfies Meta<typeof Page>; } satisfies Meta<typeof Page>
export default meta; export default meta
type Story = StoryObj<typeof meta>; type Story = StoryObj<typeof meta>
export const LoggedOut: Story = {}; export const LoggedOut: Story = {}
// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing // More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
export const LoggedIn: Story = { export const LoggedIn: Story = {
play: async ({ canvasElement }) => { play: async ({ canvasElement }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement)
const loginButton = canvas.getByRole('button', { name: /Log in/i }); const loginButton = canvas.getByRole('button', { name: /Log in/i })
await expect(loginButton).toBeInTheDocument(); await expect(loginButton).toBeInTheDocument()
await userEvent.click(loginButton); await userEvent.click(loginButton)
await expect(loginButton).not.toBeInTheDocument(); await expect(loginButton).not.toBeInTheDocument()
const logoutButton = canvas.getByRole('button', { name: /Log out/i }); const logoutButton = canvas.getByRole('button', { name: /Log out/i })
await expect(logoutButton).toBeInTheDocument(); await expect(logoutButton).toBeInTheDocument()
}, }
}; }

131
src/stories/Page.tsx
View File

@ -1,73 +1,72 @@
import React from 'react'; import React from 'react'
import { Header } from './Header'; import { Header } from './Header'
import './page.css'; import './page.css'
type User = { type User = {
name: string; name: string
}; }
export const Page: React.FC = () => { export const Page: React.FC = () => {
const [user, setUser] = React.useState<User>(); const [user, setUser] = React.useState<User>()
return ( return (
<article> <article>
<Header <Header
user={user} user={user}
onLogin={() => setUser({ name: 'Jane Doe' })} onLogin={() => setUser({ name: 'Jane Doe' })}
onLogout={() => setUser(undefined)} onLogout={() => setUser(undefined)}
onCreateAccount={() => setUser({ name: 'Jane Doe' })} onCreateAccount={() => setUser({ name: 'Jane Doe' })}
/> />
<section className="storybook-page"> <section className="storybook-page">
<h2>Pages in Storybook</h2> <h2>Pages in Storybook</h2>
<p> <p>
We recommend building UIs with a{' '} We recommend building UIs with a{' '}
<a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer"> <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
<strong>component-driven</strong> <strong>component-driven</strong>
</a>{' '} </a>{' '}
process starting with atomic components and ending with pages. process starting with atomic components and ending with pages.
</p> </p>
<p> <p>
Render pages with mock data. This makes it easy to build and review page states without Render pages with mock data. This makes it easy to build and review page states without needing to
needing to navigate to them in your app. Here are some handy patterns for managing page navigate to them in your app. Here are some handy patterns for managing page data in Storybook:
data in Storybook: </p>
</p> <ul>
<ul> <li>
<li> Use a higher-level connected component. Storybook helps you compose such data from the "args" of
Use a higher-level connected component. Storybook helps you compose such data from the child component stories
"args" of child component stories </li>
</li> <li>
<li> Assemble data in the page component from your services. You can mock these services out using
Assemble data in the page component from your services. You can mock these services out Storybook.
using Storybook. </li>
</li> </ul>
</ul> <p>
<p> Get a guided tutorial on component-driven development at{' '}
Get a guided tutorial on component-driven development at{' '} <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer"> Storybook tutorials
Storybook tutorials </a>
</a> . Read more in the{' '}
. Read more in the{' '} <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> docs
docs </a>
</a> .
. </p>
</p> <div className="tip-wrapper">
<div className="tip-wrapper"> <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
<span className="tip">Tip</span> Adjust the width of the canvas with the{' '} <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"> <g fill="none" fillRule="evenodd">
<g fill="none" fillRule="evenodd"> <path
<path d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z" id="a"
id="a" fill="#999"
fill="#999" />
/> </g>
</g> </svg>
</svg> Viewports addon in the toolbar
Viewports addon in the toolbar </div>
</div> </section>
</section> </article>
</article> )
); }
};

36
src/stories/button.css
View File

@ -1,30 +1,30 @@
.storybook-button { .storybook-button {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700; font-weight: 700;
border: 0; border: 0;
border-radius: 3em; border-radius: 3em;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
} }
.storybook-button--primary { .storybook-button--primary {
color: white; color: white;
background-color: #1ea7fd; background-color: #1ea7fd;
} }
.storybook-button--secondary { .storybook-button--secondary {
color: #333; color: #333;
background-color: transparent; background-color: transparent;
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
} }
.storybook-button--small { .storybook-button--small {
font-size: 12px; font-size: 12px;
padding: 10px 16px; padding: 10px 16px;
} }
.storybook-button--medium { .storybook-button--medium {
font-size: 14px; font-size: 14px;
padding: 11px 20px; padding: 11px 20px;
} }
.storybook-button--large { .storybook-button--large {
font-size: 16px; font-size: 16px;
padding: 12px 24px; padding: 12px 24px;
} }

36
src/stories/header.css
View File

@ -1,32 +1,32 @@
.storybook-header { .storybook-header {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 15px 20px; padding: 15px 20px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.storybook-header svg { .storybook-header svg {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
.storybook-header h1 { .storybook-header h1 {
font-weight: 700; font-weight: 700;
font-size: 20px; font-size: 20px;
line-height: 1; line-height: 1;
margin: 6px 0 6px 10px; margin: 6px 0 6px 10px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
.storybook-header button + button { .storybook-header button + button {
margin-left: 10px; margin-left: 10px;
} }
.storybook-header .welcome { .storybook-header .welcome {
color: #333; color: #333;
font-size: 14px; font-size: 14px;
margin-right: 10px; margin-right: 10px;
} }

80
src/stories/page.css
View File

@ -1,69 +1,69 @@
.storybook-page { .storybook-page {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
padding: 48px 20px; padding: 48px 20px;
margin: 0 auto; margin: 0 auto;
max-width: 600px; max-width: 600px;
color: #333; color: #333;
} }
.storybook-page h2 { .storybook-page h2 {
font-weight: 700; font-weight: 700;
font-size: 32px; font-size: 32px;
line-height: 1; line-height: 1;
margin: 0 0 4px; margin: 0 0 4px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
.storybook-page p { .storybook-page p {
margin: 1em 0; margin: 1em 0;
} }
.storybook-page a { .storybook-page a {
text-decoration: none; text-decoration: none;
color: #1ea7fd; color: #1ea7fd;
} }
.storybook-page ul { .storybook-page ul {
padding-left: 30px; padding-left: 30px;
margin: 1em 0; margin: 1em 0;
} }
.storybook-page li { .storybook-page li {
margin-bottom: 8px; margin-bottom: 8px;
} }
.storybook-page .tip { .storybook-page .tip {
display: inline-block; display: inline-block;
border-radius: 1em; border-radius: 1em;
font-size: 11px; font-size: 11px;
line-height: 12px; line-height: 12px;
font-weight: 700; font-weight: 700;
background: #e7fdd8; background: #e7fdd8;
color: #66bf3c; color: #66bf3c;
padding: 4px 12px; padding: 4px 12px;
margin-right: 10px; margin-right: 10px;
vertical-align: top; vertical-align: top;
} }
.storybook-page .tip-wrapper { .storybook-page .tip-wrapper {
font-size: 13px; font-size: 13px;
line-height: 20px; line-height: 20px;
margin-top: 40px; margin-top: 40px;
margin-bottom: 40px; margin-bottom: 40px;
} }
.storybook-page .tip-wrapper svg { .storybook-page .tip-wrapper svg {
display: inline-block; display: inline-block;
height: 12px; height: 12px;
width: 12px; width: 12px;
margin-right: 4px; margin-right: 4px;
vertical-align: top; vertical-align: top;
margin-top: 3px; margin-top: 3px;
} }
.storybook-page .tip-wrapper svg path { .storybook-page .tip-wrapper svg path {
fill: #1ea7fd; fill: #1ea7fd;
} }