Ran prettier on all src files now that printWidth is 120.
This commit is contained in:
Jesse Brault
parent
1ded7331ef
commit
111acea22f
@ -7,11 +7,7 @@ export interface GetImageDeps {
|
||||
url: string
|
||||
}
|
||||
|
||||
const getImage = async ({
|
||||
accessToken,
|
||||
signal,
|
||||
url
|
||||
}: GetImageDeps): Promise<string> => {
|
||||
const getImage = async ({ accessToken, signal, url }: GetImageDeps): Promise<string> => {
|
||||
const headers = new Headers()
|
||||
if (accessToken !== null) {
|
||||
headers.set('Authorization', `Bearer ${accessToken}`)
|
||||
|
||||
@ -2,10 +2,7 @@ import { notFound } from '@tanstack/react-router'
|
||||
import { AuthContextType } from '../auth'
|
||||
import { ApiError } from './ApiError'
|
||||
import ExpiredTokenError from './ExpiredTokenError'
|
||||
import FullRecipeView, {
|
||||
RawFullRecipeView,
|
||||
toFullRecipeView
|
||||
} from './types/FullRecipeView'
|
||||
import FullRecipeView, { RawFullRecipeView, toFullRecipeView } from './types/FullRecipeView'
|
||||
|
||||
export interface GetRecipeDeps {
|
||||
authContext: AuthContextType
|
||||
@ -14,24 +11,16 @@ export interface GetRecipeDeps {
|
||||
abortSignal: AbortSignal
|
||||
}
|
||||
|
||||
const getRecipe = async ({
|
||||
authContext,
|
||||
username,
|
||||
slug,
|
||||
abortSignal
|
||||
}: GetRecipeDeps): Promise<FullRecipeView> => {
|
||||
const getRecipe = async ({ authContext, username, slug, abortSignal }: GetRecipeDeps): Promise<FullRecipeView> => {
|
||||
const headers = new Headers()
|
||||
if (authContext.token !== null) {
|
||||
headers.set('Authorization', `Bearer ${authContext.token}`)
|
||||
}
|
||||
const response = await fetch(
|
||||
import.meta.env.VITE_MME_API_URL + `/recipes/${username}/${slug}`,
|
||||
{
|
||||
signal: abortSignal,
|
||||
headers,
|
||||
mode: 'cors'
|
||||
}
|
||||
)
|
||||
const response = await fetch(import.meta.env.VITE_MME_API_URL + `/recipes/${username}/${slug}`, {
|
||||
signal: abortSignal,
|
||||
headers,
|
||||
mode: 'cors'
|
||||
})
|
||||
if (response.ok) {
|
||||
return toFullRecipeView((await response.json()) as RawFullRecipeView)
|
||||
} else if (response.status === 401) {
|
||||
|
||||
@ -20,18 +20,13 @@ const getRecipeInfos = async ({
|
||||
if (token !== null) {
|
||||
headers.set('Authorization', `Bearer ${token}`)
|
||||
}
|
||||
const response = await fetch(
|
||||
import.meta.env.VITE_MME_API_URL +
|
||||
`/recipes?page=${pageNumber}&size=${pageSize}`,
|
||||
{
|
||||
signal: abortSignal,
|
||||
headers,
|
||||
mode: 'cors'
|
||||
}
|
||||
)
|
||||
const response = await fetch(import.meta.env.VITE_MME_API_URL + `/recipes?page=${pageNumber}&size=${pageSize}`, {
|
||||
signal: abortSignal,
|
||||
headers,
|
||||
mode: 'cors'
|
||||
})
|
||||
if (response.ok) {
|
||||
const { pageNumber, pageSize, content } =
|
||||
(await response.json()) as RawRecipeInfosView
|
||||
const { pageNumber, pageSize, content } = (await response.json()) as RawRecipeInfosView
|
||||
return {
|
||||
pageNumber,
|
||||
pageSize,
|
||||
|
||||
@ -1,28 +1,18 @@
|
||||
import { LoginResult, RawLoginView } from './types/LoginView'
|
||||
|
||||
const login = async (
|
||||
username: string,
|
||||
password: string
|
||||
): Promise<LoginResult> => {
|
||||
const login = async (username: string, password: string): Promise<LoginResult> => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
import.meta.env.VITE_MME_API_URL + '/auth/login',
|
||||
{
|
||||
body: JSON.stringify({ username, password }),
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'Content-type': 'application/json'
|
||||
},
|
||||
method: 'POST',
|
||||
mode: 'cors'
|
||||
}
|
||||
)
|
||||
const response = await fetch(import.meta.env.VITE_MME_API_URL + '/auth/login', {
|
||||
body: JSON.stringify({ username, password }),
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'Content-type': 'application/json'
|
||||
},
|
||||
method: 'POST',
|
||||
mode: 'cors'
|
||||
})
|
||||
if (response.ok) {
|
||||
const {
|
||||
username,
|
||||
accessToken,
|
||||
expires: rawExpires
|
||||
} = (await response.json()) as RawLoginView
|
||||
const { username, accessToken, expires: rawExpires } = (await response.json()) as RawLoginView
|
||||
return {
|
||||
_tag: 'success',
|
||||
loginView: {
|
||||
@ -36,13 +26,10 @@ const login = async (
|
||||
if (response.status === 401) {
|
||||
error = 'Invalid username or password.'
|
||||
} else if (response.status === 500) {
|
||||
error =
|
||||
'There was an internal server error. Please try again later.'
|
||||
error = 'There was an internal server error. Please try again later.'
|
||||
} else {
|
||||
error = 'Unknown error.'
|
||||
console.error(
|
||||
`Unknown error: ${response.status} ${response.statusText}`
|
||||
)
|
||||
console.error(`Unknown error: ${response.status} ${response.statusText}`)
|
||||
}
|
||||
return {
|
||||
_tag: 'failure',
|
||||
|
||||
@ -11,14 +11,11 @@ export class ExpiredRefreshTokenError extends ApiError {
|
||||
const refresh = async (): Promise<LoginView> => {
|
||||
let response: Response
|
||||
try {
|
||||
response = await fetch(
|
||||
import.meta.env.VITE_MME_API_URL + '/auth/refresh',
|
||||
{
|
||||
credentials: 'include',
|
||||
method: 'POST',
|
||||
mode: 'cors'
|
||||
}
|
||||
)
|
||||
response = await fetch(import.meta.env.VITE_MME_API_URL + '/auth/refresh', {
|
||||
credentials: 'include',
|
||||
method: 'POST',
|
||||
mode: 'cors'
|
||||
})
|
||||
} catch (fetchError) {
|
||||
if (fetchError instanceof TypeError) {
|
||||
throw fetchError // rethrow network issues
|
||||
@ -27,11 +24,7 @@ const refresh = async (): Promise<LoginView> => {
|
||||
}
|
||||
}
|
||||
if (response.ok) {
|
||||
const {
|
||||
username,
|
||||
accessToken,
|
||||
expires: rawExpires
|
||||
} = (await response.json()) as RawLoginView
|
||||
const { username, accessToken, expires: rawExpires } = (await response.json()) as RawLoginView
|
||||
return {
|
||||
username,
|
||||
accessToken,
|
||||
|
||||
@ -32,12 +32,7 @@ const RecipeCard = ({
|
||||
slug
|
||||
}}
|
||||
>
|
||||
<img
|
||||
className={classes.recipeImage}
|
||||
src={mainImageUrl}
|
||||
alt={mainImageAlt}
|
||||
title={mainImageAlt}
|
||||
/>
|
||||
<img className={classes.recipeImage} src={mainImageUrl} alt={mainImageAlt} title={mainImageAlt} />
|
||||
</Link>
|
||||
<div className={classes.infoContainer}>
|
||||
<div className={classes.infoRow}>
|
||||
|
||||
@ -7,17 +7,9 @@ export interface RecipeVisibilityIconProps {
|
||||
|
||||
const RecipeVisibilityIcon = ({ isPublic }: RecipeVisibilityIconProps) =>
|
||||
isPublic ? (
|
||||
<FontAwesomeIcon
|
||||
icon="globe"
|
||||
className={classes.recipeVisibilityIcon}
|
||||
size="sm"
|
||||
/>
|
||||
<FontAwesomeIcon icon="globe" className={classes.recipeVisibilityIcon} size="sm" />
|
||||
) : (
|
||||
<FontAwesomeIcon
|
||||
icon="lock"
|
||||
className={classes.recipeVisibilityIcon}
|
||||
size="sm"
|
||||
/>
|
||||
<FontAwesomeIcon icon="lock" className={classes.recipeVisibilityIcon} size="sm" />
|
||||
)
|
||||
|
||||
export default RecipeVisibilityIcon
|
||||
|
||||
@ -1,10 +1,4 @@
|
||||
import {
|
||||
createFileRoute,
|
||||
redirect,
|
||||
useNavigate,
|
||||
useRouter,
|
||||
useSearch
|
||||
} from '@tanstack/react-router'
|
||||
import { createFileRoute, redirect, useNavigate, useRouter, useSearch } from '@tanstack/react-router'
|
||||
import { FormEvent, useState } from 'react'
|
||||
import { z } from 'zod'
|
||||
import login from '../api/login'
|
||||
@ -25,17 +19,13 @@ const Login = () => {
|
||||
const password = (formData.get('password') as string | null) ?? ''
|
||||
const loginResult = await login(username, password)
|
||||
if (loginResult._tag === 'success') {
|
||||
auth.putToken(
|
||||
loginResult.loginView.accessToken,
|
||||
loginResult.loginView.username,
|
||||
async () => {
|
||||
await router.invalidate()
|
||||
await navigate({
|
||||
to: redirect ?? '/recipes',
|
||||
search: {}
|
||||
})
|
||||
}
|
||||
)
|
||||
auth.putToken(loginResult.loginView.accessToken, loginResult.loginView.username, async () => {
|
||||
await router.invalidate()
|
||||
await navigate({
|
||||
to: redirect ?? '/recipes',
|
||||
search: {}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
setError(loginResult.error)
|
||||
}
|
||||
@ -44,9 +34,7 @@ const Login = () => {
|
||||
return (
|
||||
<div>
|
||||
<h2>Login Page</h2>
|
||||
{expired ? (
|
||||
<p>Your session has expired. Please login again.</p>
|
||||
) : null}
|
||||
{expired ? <p>Your session has expired. Please login again.</p> : null}
|
||||
<form onSubmit={onSubmit}>
|
||||
<label htmlFor="username">Username</label>
|
||||
<input id="username" name="username" type="text" />
|
||||
|
||||
@ -38,11 +38,7 @@ export const Route = createFileRoute('/recipes/$username/$slug')({
|
||||
} = useQuery(
|
||||
{
|
||||
enabled: recipe !== undefined,
|
||||
queryKey: [
|
||||
'images',
|
||||
recipe?.mainImage.owner.username,
|
||||
recipe?.mainImage.filename
|
||||
],
|
||||
queryKey: ['images', recipe?.mainImage.owner.username, recipe?.mainImage.filename],
|
||||
queryFn: ({ signal }) =>
|
||||
getImage({
|
||||
accessToken: authContext.token,
|
||||
|
||||
@ -1,48 +1,42 @@
|
||||
import React from 'react';
|
||||
import './button.css';
|
||||
import React from 'react'
|
||||
import './button.css'
|
||||
|
||||
interface ButtonProps {
|
||||
/**
|
||||
* Is this the principal call to action on the page?
|
||||
*/
|
||||
primary?: boolean;
|
||||
/**
|
||||
* What background color to use
|
||||
*/
|
||||
backgroundColor?: string;
|
||||
/**
|
||||
* How large should the button be?
|
||||
*/
|
||||
size?: 'small' | 'medium' | 'large';
|
||||
/**
|
||||
* Button contents
|
||||
*/
|
||||
label: string;
|
||||
/**
|
||||
* Optional click handler
|
||||
*/
|
||||
onClick?: () => void;
|
||||
/**
|
||||
* Is this the principal call to action on the page?
|
||||
*/
|
||||
primary?: boolean
|
||||
/**
|
||||
* What background color to use
|
||||
*/
|
||||
backgroundColor?: string
|
||||
/**
|
||||
* How large should the button be?
|
||||
*/
|
||||
size?: 'small' | 'medium' | 'large'
|
||||
/**
|
||||
* Button contents
|
||||
*/
|
||||
label: string
|
||||
/**
|
||||
* Optional click handler
|
||||
*/
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* Primary UI component for user interaction
|
||||
*/
|
||||
export const Button = ({
|
||||
primary = false,
|
||||
size = 'medium',
|
||||
backgroundColor,
|
||||
label,
|
||||
...props
|
||||
}: ButtonProps) => {
|
||||
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
|
||||
style={{ backgroundColor }}
|
||||
{...props}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
export const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props }: ButtonProps) => {
|
||||
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
|
||||
style={{ backgroundColor }}
|
||||
{...props}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,35 +1,37 @@
|
||||
import { Meta } from "@storybook/blocks";
|
||||
import { Meta } from '@storybook/blocks'
|
||||
|
||||
import Github from "./assets/github.svg";
|
||||
import Discord from "./assets/discord.svg";
|
||||
import Youtube from "./assets/youtube.svg";
|
||||
import Tutorials from "./assets/tutorials.svg";
|
||||
import Styling from "./assets/styling.png";
|
||||
import Context from "./assets/context.png";
|
||||
import Assets from "./assets/assets.png";
|
||||
import Docs from "./assets/docs.png";
|
||||
import Share from "./assets/share.png";
|
||||
import FigmaPlugin from "./assets/figma-plugin.png";
|
||||
import Testing from "./assets/testing.png";
|
||||
import Accessibility from "./assets/accessibility.png";
|
||||
import Theming from "./assets/theming.png";
|
||||
import AddonLibrary from "./assets/addon-library.png";
|
||||
import Github from './assets/github.svg'
|
||||
import Discord from './assets/discord.svg'
|
||||
import Youtube from './assets/youtube.svg'
|
||||
import Tutorials from './assets/tutorials.svg'
|
||||
import Styling from './assets/styling.png'
|
||||
import Context from './assets/context.png'
|
||||
import Assets from './assets/assets.png'
|
||||
import Docs from './assets/docs.png'
|
||||
import Share from './assets/share.png'
|
||||
import FigmaPlugin from './assets/figma-plugin.png'
|
||||
import Testing from './assets/testing.png'
|
||||
import Accessibility from './assets/accessibility.png'
|
||||
import Theming from './assets/theming.png'
|
||||
import AddonLibrary from './assets/addon-library.png'
|
||||
|
||||
export const RightArrow = () => <svg
|
||||
viewBox="0 0 14 14"
|
||||
width="8px"
|
||||
height="14px"
|
||||
style={{
|
||||
marginLeft: '4px',
|
||||
display: 'inline-block',
|
||||
shapeRendering: 'inherit',
|
||||
verticalAlign: 'middle',
|
||||
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>
|
||||
export const RightArrow = () => (
|
||||
<svg
|
||||
viewBox="0 0 14 14"
|
||||
width="8px"
|
||||
height="14px"
|
||||
style={{
|
||||
marginLeft: '4px',
|
||||
display: 'inline-block',
|
||||
shapeRendering: 'inherit',
|
||||
verticalAlign: 'middle',
|
||||
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>
|
||||
)
|
||||
|
||||
<Meta title="Configure your project" />
|
||||
|
||||
@ -38,6 +40,7 @@ export const RightArrow = () => <svg
|
||||
# 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.
|
||||
|
||||
</div>
|
||||
<div className="sb-section">
|
||||
<div className="sb-section-item">
|
||||
@ -84,6 +87,7 @@ export const RightArrow = () => <svg
|
||||
# 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.
|
||||
|
||||
</div>
|
||||
|
||||
<div className="sb-section">
|
||||
@ -203,10 +207,11 @@ export const RightArrow = () => <svg
|
||||
target="_blank"
|
||||
>Discover tutorials<RightArrow /></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
{`
|
||||
{`
|
||||
.sb-container {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
@ -1,33 +1,33 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { fn } from '@storybook/test';
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
import { fn } from '@storybook/test'
|
||||
|
||||
import { Header } from './Header';
|
||||
import { Header } from './Header'
|
||||
|
||||
const meta = {
|
||||
title: 'Example/Header',
|
||||
component: Header,
|
||||
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
args: {
|
||||
onLogin: fn(),
|
||||
onLogout: fn(),
|
||||
onCreateAccount: fn(),
|
||||
},
|
||||
} satisfies Meta<typeof Header>;
|
||||
title: 'Example/Header',
|
||||
component: Header,
|
||||
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
||||
layout: 'fullscreen'
|
||||
},
|
||||
args: {
|
||||
onLogin: fn(),
|
||||
onLogout: fn(),
|
||||
onCreateAccount: fn()
|
||||
}
|
||||
} satisfies Meta<typeof Header>
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const LoggedIn: Story = {
|
||||
args: {
|
||||
user: {
|
||||
name: 'Jane Doe',
|
||||
},
|
||||
},
|
||||
};
|
||||
args: {
|
||||
user: {
|
||||
name: 'Jane Doe'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const LoggedOut: Story = {};
|
||||
export const LoggedOut: Story = {}
|
||||
|
||||
@ -1,56 +1,50 @@
|
||||
import React from 'react';
|
||||
import React from 'react'
|
||||
|
||||
import { Button } from './Button';
|
||||
import './header.css';
|
||||
import { Button } from './Button'
|
||||
import './header.css'
|
||||
|
||||
type User = {
|
||||
name: string;
|
||||
};
|
||||
name: string
|
||||
}
|
||||
|
||||
interface HeaderProps {
|
||||
user?: User;
|
||||
onLogin?: () => void;
|
||||
onLogout?: () => void;
|
||||
onCreateAccount?: () => void;
|
||||
user?: User
|
||||
onLogin?: () => void
|
||||
onLogout?: () => void
|
||||
onCreateAccount?: () => void
|
||||
}
|
||||
|
||||
export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
|
||||
<header>
|
||||
<div className="storybook-header">
|
||||
<div>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fillRule="evenodd">
|
||||
<path
|
||||
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
|
||||
fill="#FFF"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
<path
|
||||
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
|
||||
fill="#91BAF8"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<h1>Acme</h1>
|
||||
</div>
|
||||
<div>
|
||||
{user ? (
|
||||
<>
|
||||
<span className="welcome">
|
||||
Welcome, <b>{user.name}</b>!
|
||||
</span>
|
||||
<Button size="small" onClick={onLogout} label="Log out" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Button size="small" onClick={onLogin} label="Log in" />
|
||||
<Button primary size="small" onClick={onCreateAccount} label="Sign up" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
<header>
|
||||
<div className="storybook-header">
|
||||
<div>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fillRule="evenodd">
|
||||
<path
|
||||
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
|
||||
fill="#FFF"
|
||||
/>
|
||||
<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" />
|
||||
<path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
|
||||
</g>
|
||||
</svg>
|
||||
<h1>Acme</h1>
|
||||
</div>
|
||||
<div>
|
||||
{user ? (
|
||||
<>
|
||||
<span className="welcome">
|
||||
Welcome, <b>{user.name}</b>!
|
||||
</span>
|
||||
<Button size="small" onClick={onLogout} label="Log out" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Button size="small" onClick={onLogin} label="Log in" />
|
||||
<Button primary size="small" onClick={onCreateAccount} label="Sign up" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
|
||||
@ -1,32 +1,32 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { within, userEvent, expect } from '@storybook/test';
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
import { within, userEvent, expect } from '@storybook/test'
|
||||
|
||||
import { Page } from './Page';
|
||||
import { Page } from './Page'
|
||||
|
||||
const meta = {
|
||||
title: 'Example/Page',
|
||||
component: Page,
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
} satisfies Meta<typeof Page>;
|
||||
title: 'Example/Page',
|
||||
component: Page,
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
|
||||
layout: 'fullscreen'
|
||||
}
|
||||
} satisfies Meta<typeof Page>
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
export default 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
|
||||
export const LoggedIn: Story = {
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const loginButton = canvas.getByRole('button', { name: /Log in/i });
|
||||
await expect(loginButton).toBeInTheDocument();
|
||||
await userEvent.click(loginButton);
|
||||
await expect(loginButton).not.toBeInTheDocument();
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement)
|
||||
const loginButton = canvas.getByRole('button', { name: /Log in/i })
|
||||
await expect(loginButton).toBeInTheDocument()
|
||||
await userEvent.click(loginButton)
|
||||
await expect(loginButton).not.toBeInTheDocument()
|
||||
|
||||
const logoutButton = canvas.getByRole('button', { name: /Log out/i });
|
||||
await expect(logoutButton).toBeInTheDocument();
|
||||
},
|
||||
};
|
||||
const logoutButton = canvas.getByRole('button', { name: /Log out/i })
|
||||
await expect(logoutButton).toBeInTheDocument()
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,73 +1,72 @@
|
||||
import React from 'react';
|
||||
import React from 'react'
|
||||
|
||||
import { Header } from './Header';
|
||||
import './page.css';
|
||||
import { Header } from './Header'
|
||||
import './page.css'
|
||||
|
||||
type User = {
|
||||
name: string;
|
||||
};
|
||||
name: string
|
||||
}
|
||||
|
||||
export const Page: React.FC = () => {
|
||||
const [user, setUser] = React.useState<User>();
|
||||
const [user, setUser] = React.useState<User>()
|
||||
|
||||
return (
|
||||
<article>
|
||||
<Header
|
||||
user={user}
|
||||
onLogin={() => setUser({ name: 'Jane Doe' })}
|
||||
onLogout={() => setUser(undefined)}
|
||||
onCreateAccount={() => setUser({ name: 'Jane Doe' })}
|
||||
/>
|
||||
return (
|
||||
<article>
|
||||
<Header
|
||||
user={user}
|
||||
onLogin={() => setUser({ name: 'Jane Doe' })}
|
||||
onLogout={() => setUser(undefined)}
|
||||
onCreateAccount={() => setUser({ name: 'Jane Doe' })}
|
||||
/>
|
||||
|
||||
<section className="storybook-page">
|
||||
<h2>Pages in Storybook</h2>
|
||||
<p>
|
||||
We recommend building UIs with a{' '}
|
||||
<a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
|
||||
<strong>component-driven</strong>
|
||||
</a>{' '}
|
||||
process starting with atomic components and ending with pages.
|
||||
</p>
|
||||
<p>
|
||||
Render pages with mock data. This makes it easy to build and review page states without
|
||||
needing to navigate to them in your app. Here are some handy patterns for managing page
|
||||
data in Storybook:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Use a higher-level connected component. Storybook helps you compose such data from the
|
||||
"args" of child component stories
|
||||
</li>
|
||||
<li>
|
||||
Assemble data in the page component from your services. You can mock these services out
|
||||
using Storybook.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Get a guided tutorial on component-driven development at{' '}
|
||||
<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
|
||||
Storybook tutorials
|
||||
</a>
|
||||
. Read more in the{' '}
|
||||
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
|
||||
docs
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<div className="tip-wrapper">
|
||||
<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">
|
||||
<g fill="none" fillRule="evenodd">
|
||||
<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"
|
||||
id="a"
|
||||
fill="#999"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
Viewports addon in the toolbar
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
};
|
||||
<section className="storybook-page">
|
||||
<h2>Pages in Storybook</h2>
|
||||
<p>
|
||||
We recommend building UIs with a{' '}
|
||||
<a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
|
||||
<strong>component-driven</strong>
|
||||
</a>{' '}
|
||||
process starting with atomic components and ending with pages.
|
||||
</p>
|
||||
<p>
|
||||
Render pages with mock data. This makes it easy to build and review page states without needing to
|
||||
navigate to them in your app. Here are some handy patterns for managing page data in Storybook:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
Use a higher-level connected component. Storybook helps you compose such data from the "args" of
|
||||
child component stories
|
||||
</li>
|
||||
<li>
|
||||
Assemble data in the page component from your services. You can mock these services out using
|
||||
Storybook.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Get a guided tutorial on component-driven development at{' '}
|
||||
<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
|
||||
Storybook tutorials
|
||||
</a>
|
||||
. Read more in the{' '}
|
||||
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
|
||||
docs
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<div className="tip-wrapper">
|
||||
<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">
|
||||
<g fill="none" fillRule="evenodd">
|
||||
<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"
|
||||
id="a"
|
||||
fill="#999"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
Viewports addon in the toolbar
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,30 +1,30 @@
|
||||
.storybook-button {
|
||||
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
border: 0;
|
||||
border-radius: 3em;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
border: 0;
|
||||
border-radius: 3em;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
.storybook-button--primary {
|
||||
color: white;
|
||||
background-color: #1ea7fd;
|
||||
color: white;
|
||||
background-color: #1ea7fd;
|
||||
}
|
||||
.storybook-button--secondary {
|
||||
color: #333;
|
||||
background-color: transparent;
|
||||
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
|
||||
color: #333;
|
||||
background-color: transparent;
|
||||
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
|
||||
}
|
||||
.storybook-button--small {
|
||||
font-size: 12px;
|
||||
padding: 10px 16px;
|
||||
font-size: 12px;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
.storybook-button--medium {
|
||||
font-size: 14px;
|
||||
padding: 11px 20px;
|
||||
font-size: 14px;
|
||||
padding: 11px 20px;
|
||||
}
|
||||
.storybook-button--large {
|
||||
font-size: 16px;
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
@ -1,32 +1,32 @@
|
||||
.storybook-header {
|
||||
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.storybook-header svg {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.storybook-header h1 {
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
margin: 6px 0 6px 10px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
margin: 6px 0 6px 10px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.storybook-header button + button {
|
||||
margin-left: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.storybook-header .welcome {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@ -1,69 +1,69 @@
|
||||
.storybook-page {
|
||||
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
padding: 48px 20px;
|
||||
margin: 0 auto;
|
||||
max-width: 600px;
|
||||
color: #333;
|
||||
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
padding: 48px 20px;
|
||||
margin: 0 auto;
|
||||
max-width: 600px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.storybook-page h2 {
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
margin: 0 0 4px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
margin: 0 0 4px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.storybook-page p {
|
||||
margin: 1em 0;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.storybook-page a {
|
||||
text-decoration: none;
|
||||
color: #1ea7fd;
|
||||
text-decoration: none;
|
||||
color: #1ea7fd;
|
||||
}
|
||||
|
||||
.storybook-page ul {
|
||||
padding-left: 30px;
|
||||
margin: 1em 0;
|
||||
padding-left: 30px;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.storybook-page li {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.storybook-page .tip {
|
||||
display: inline-block;
|
||||
border-radius: 1em;
|
||||
font-size: 11px;
|
||||
line-height: 12px;
|
||||
font-weight: 700;
|
||||
background: #e7fdd8;
|
||||
color: #66bf3c;
|
||||
padding: 4px 12px;
|
||||
margin-right: 10px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
border-radius: 1em;
|
||||
font-size: 11px;
|
||||
line-height: 12px;
|
||||
font-weight: 700;
|
||||
background: #e7fdd8;
|
||||
color: #66bf3c;
|
||||
padding: 4px 12px;
|
||||
margin-right: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.storybook-page .tip-wrapper {
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.storybook-page .tip-wrapper svg {
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
margin-right: 4px;
|
||||
vertical-align: top;
|
||||
margin-top: 3px;
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
margin-right: 4px;
|
||||
vertical-align: top;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.storybook-page .tip-wrapper svg path {
|
||||
fill: #1ea7fd;
|
||||
fill: #1ea7fd;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user