raider/rtpunish-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add build script

Browse source
This commit is contained in:
Kevin Kandlbinder 2024-11-12 15:12:19 +00:00
parent 1160a04d23
commit aa89362a0f
24 changed files with 509 additions and 461 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
.forgejo/workflows/build.yaml Normal file
View file

@ -0,0 +1,41 @@
jobs:
build:
runs-on: ubuntu-latest
name: Build application
steps:
- uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: 22
- name: Get NPM cache directory
id: npm-cache-dir
shell: bash
run: echo "dir=$(npm config get cache)" >> ${GITHUB_OUTPUT}
- uses: actions/cache@v4
name: Cache NPM
id: npm-cache
with:
path: ${{ steps.npm-cache-dir.outputs.dir }}
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- run: npm ci
name: Install dependencies
- run: npm lint
name: Lint code
- run: npm build
name: Build project
- run: npm test
name: Test project
- run: npm build-storybook
name: Build storybook
- uses: actions/upload-artifact@v4
name: Upload build directories
with:
name: build-artifacts
path: |
dist/
build/
.svelte-kit/
storybook-static/

2
.gitignore vendored
View file

@ -21,3 +21,5 @@ Thumbs.db
# Vite # Vite
vite.config.js.timestamp-* vite.config.js.timestamp-*
vite.config.ts.timestamp-* vite.config.ts.timestamp-*
/storybook-static

27
.storybook/main.js
View file

@ -1,20 +1,15 @@
/** @type { import('@storybook/sveltekit').StorybookConfig } */ /** @type { import('@storybook/sveltekit').StorybookConfig } */
const config = { const config = {
"stories": [ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
"../src/**/*.mdx", addons: [
"../src/**/*.stories.@(js|ts|svelte)" '@storybook/addon-svelte-csf',
], '@storybook/addon-essentials',
"addons": [ '@chromatic-com/storybook',
"@storybook/addon-svelte-csf", '@storybook/addon-interactions'
"@storybook/addon-essentials", ],
"@chromatic-com/storybook", framework: {
"@storybook/addon-interactions" name: '@storybook/sveltekit',
], options: {}
"framework": { }
"name": "@storybook/sveltekit",
"options": {}
}
}; };
export default config; export default config;

16
.storybook/preview.js
View file

@ -1,13 +1,13 @@
/** @type { import('@storybook/svelte').Preview } */ /** @type { import('@storybook/svelte').Preview } */
const preview = { const preview = {
parameters: { parameters: {
controls: { controls: {
matchers: { matchers: {
color: /(background|color)$/i, color: /(background|color)$/i,
date: /Date$/i, date: /Date$/i
}, }
}, }
}, }
}; };
export default preview; export default preview;

4
.vscode/extensions.json vendored
View file

@ -1,5 +1,3 @@
{ {
"recommendations": [ "recommendations": ["inlang.vs-code-extension"]
"inlang.vs-code-extension"
]
} }

16
messages/de.json
View file

@ -1,10 +1,10 @@
{ {
"$schema": "https://inlang.com/schema/inlang-message-format", "$schema": "https://inlang.com/schema/inlang-message-format",
"hello_world": "Hello, {name} from de!", "hello_world": "Hello, {name} from de!",
"body_part_throat": "Hals", "body_part_throat": "Hals",
"body_part_thigh": "Oberschenkel", "body_part_thigh": "Oberschenkel",
"body_part_ankle": "Knöchel", "body_part_ankle": "Knöchel",
"body_part_upper_arm": "Oberarm", "body_part_upper_arm": "Oberarm",
"action_shock": "Shocken", "action_shock": "Shocken",
"action_vibrate": "Vibrieren" "action_vibrate": "Vibrieren"
} }

16
messages/en.json
View file

@ -1,10 +1,10 @@
{ {
"$schema": "https://inlang.com/schema/inlang-message-format", "$schema": "https://inlang.com/schema/inlang-message-format",
"hello_world": "Hello, {name} from en!", "hello_world": "Hello, {name} from en!",
"body_part_throat": "Throat", "body_part_throat": "Throat",
"body_part_thigh": "Thigh", "body_part_thigh": "Thigh",
"body_part_ankle": "Ankle", "body_part_ankle": "Ankle",
"body_part_upper_arm": "Upper Arm", "body_part_upper_arm": "Upper Arm",
"action_shock": "Shock", "action_shock": "Shock",
"action_vibrate": "Vibrate" "action_vibrate": "Vibrate"
} }

91
src/app.css
View file

@ -1,48 +1,53 @@
:root { :root {
--padding: 30px; --padding: 30px;
--gap: 20px; --gap: 20px;
--radius: 20px; --radius: 20px;
--width: 700px; --width: 700px;
--layout-slant: -30deg; --layout-slant: -30deg;
--color-base: #fff; --color-base: #fff;
--color-primary-100: #331400; --color-primary-100: #331400;
--color-primary-300: #cc5200; --color-primary-300: #cc5200;
--color-primary-500: #ff7e29; --color-primary-500: #ff7e29;
--color-primary-700: #ffa061; --color-primary-700: #ffa061;
--color-primary-900: #ffc299; --color-primary-900: #ffc299;
--color-secondary-0: #040127; --color-secondary-0: #040127;
--color-secondary-100: #060240; --color-secondary-100: #060240;
--color-secondary-300: #0b046c; --color-secondary-300: #0b046c;
--color-secondary-500: #170cb6; --color-secondary-500: #170cb6;
--color-secondary-700: #4c40e7; --color-secondary-700: #4c40e7;
--color-secondary-900: #a8a4ea; --color-secondary-900: #a8a4ea;
--color-accent: var(--color-primary-500); --color-accent: var(--color-primary-500);
--color-accent-contrast: #fff; --color-accent-contrast: #fff;
--color-border: rgba(0, 0, 0, .1); --color-border: rgba(0, 0, 0, 0.1);
--color-surface: #ececec; --color-surface: #ececec;
--color-dark-surface: rgba(26, 37, 22, .9); --color-dark-surface: rgba(26, 37, 22, 0.9);
--color-dark-surface-text: white; --color-dark-surface-text: white;
--color-dark-surface-text-dim: #808080; --color-dark-surface-text-dim: #808080;
--color-light-surface: rgba(255, 255, 255, .9); --color-light-surface: rgba(255, 255, 255, 0.9);
--color-light-surface-text: var(--color-text); --color-light-surface-text: var(--color-text);
--color-accent-surface: var(--color-accent); --color-accent-surface: var(--color-accent);
--color-accent-surface-text: var(--color-accent-contrast); --color-accent-surface-text: var(--color-accent-contrast);
--color-highlight-accent: rgba(255, 145, 49, .2); --color-highlight-accent: rgba(255, 145, 49, 0.2);
--color-highlight-blue: rgba(10, 10, 255, .2); --color-highlight-blue: rgba(10, 10, 255, 0.2);
--color-highlight-white: rgba(200, 200, 200, .2); --color-highlight-white: rgba(200, 200, 200, 0.2);
--color-highlight-grey: rgba(100, 100, 100, .2); --color-highlight-grey: rgba(100, 100, 100, 0.2);
--color-highlight-yellow: rgba(255, 230, 10, .2); --color-highlight-yellow: rgba(255, 230, 10, 0.2);
--color-highlight-green: rgba(10, 255, 10, .2); --color-highlight-green: rgba(10, 255, 10, 0.2);
--color-highlight-red: rgba(255, 10, 10, .2); --color-highlight-red: rgba(255, 10, 10, 0.2);
--color-highlight-pink: rgba(255, 128, 255, .2); --color-highlight-pink: rgba(255, 128, 255, 0.2);
--color-highlight-purple: rgba(204, 30, 152, .2); --color-highlight-purple: rgba(204, 30, 152, 0.2);
--color-text: black; --color-text: black;
--color-background: var(--color-base); --color-background: var(--color-base);
--nav-space: 95px; --nav-space: 95px;
--fill-pattern: repeating-linear-gradient( var(--layout-slant), var(--color-base) 0, var(--color-primary-500) .5px 3px, var(--color-base) 3.5px 12px ); --fill-pattern: repeating-linear-gradient(
--filter-gray: grayscale(1); var(--layout-slant),
var(--color-base) 0,
var(--color-primary-500) 0.5px 3px,
var(--color-base) 3.5px 12px
);
--filter-gray: grayscale(1);
} }
body { body {
font-family: 'Roboto Flex Variable', sans-serif; font-family: 'Roboto Flex Variable', sans-serif;
} }

76
src/lib/components/ActionCard.svelte
View file

@ -1,53 +1,53 @@
<script lang="ts"> <script lang="ts">
import type { Action } from "$lib/types"; import type { Action } from '$lib/types';
import { Coins } from "lucide-svelte"; import { Coins } from 'lucide-svelte';
import * as m from '$lib/paraglide/messages.js'; import * as m from '$lib/paraglide/messages.js';
export let action: Action; export let action: Action;
const onclick = (ev: MouseEvent) => { const onclick = (ev: MouseEvent) => {
ev.preventDefault(); ev.preventDefault();
} };
</script> </script>
<button class="action-card" {onclick}> <button class="action-card" {onclick}>
<span class="body-part">{m[`body_part_${action.bodyPart}`]()}</span> <span class="body-part">{m[`body_part_${action.bodyPart}`]()}</span>
<span class="type">{m[`action_${action.type}`]()}</span> <span class="type">{m[`action_${action.type}`]()}</span>
<span class="cost"><Coins /> {action.cost} coins</span> <span class="cost"><Coins /> {action.cost} coins</span>
</button> </button>
<style> <style>
.action-card { .action-card {
background-color: var(--color-base); background-color: var(--color-base);
border: thin solid var(--color-border); border: thin solid var(--color-border);
font: inherit; font: inherit;
cursor: pointer; cursor: pointer;
border-radius: var(--radius); border-radius: var(--radius);
padding: var(--padding); padding: var(--padding);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
.body-part { .body-part {
opacity: .75; opacity: 0.75;
} }
.type { .type {
font-size: 1.4em; font-size: 1.4em;
font-weight: 800; font-weight: 800;
color: var(--color-accent); color: var(--color-accent);
margin-bottom: 10px; margin-bottom: 10px;
} }
.cost { .cost {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 5px; gap: 5px;
opacity: .75; opacity: 0.75;
> :global(svg) { > :global(svg) {
color: var(--color-accent); color: var(--color-accent);
} }
} }
} }
</style> </style>

22
src/lib/components/StoreGrid.svelte
View file

@ -1,19 +1,19 @@
<script lang="ts"> <script lang="ts">
import type { Action } from "$lib/types"; import type { Action } from '$lib/types';
import ActionCard from './ActionCard.svelte'; import ActionCard from './ActionCard.svelte';
export let actions: Action[]; export let actions: Action[];
</script> </script>
<div class="store-grid"> <div class="store-grid">
{#each actions as action} {#each actions as action}
<ActionCard {action} /> <ActionCard {action} />
{/each} {/each}
</div> </div>
<style> <style>
.store-grid { .store-grid {
display: grid; display: grid;
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(6, 1fr);
gap: var(--gap); gap: var(--gap);
} }
</style> </style>

18
src/lib/types.ts
View file

@ -1,26 +1,26 @@
/** /**
* An action to execute. * An action to execute.
*/ */
export type ActionType = "shock"|"vibrate"; export type ActionType = 'shock' | 'vibrate';
/** /**
* A body part an action can affect. * A body part an action can affect.
*/ */
export type BodyPartKey = "throat"|"thigh"|"ankle"|"upper_arm"; export type BodyPartKey = 'throat' | 'thigh' | 'ankle' | 'upper_arm';
/** /**
* Time in seconds or burst. * Time in seconds or burst.
*/ */
export type Time = number|"burst"; export type Time = number | 'burst';
/** /**
* Entry in the coinshop. * Entry in the coinshop.
*/ */
export type Action = { export type Action = {
id: string; id: string;
subject: string; subject: string;
type: ActionType; type: ActionType;
cost: number; cost: number;
bodyPart: BodyPartKey; bodyPart: BodyPartKey;
time: Time; time: Time;
}; };

2
src/routes/+layout.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { i18n } from '$lib/i18n'; import { i18n } from '$lib/i18n';
import { ParaglideJS } from '@inlang/paraglide-sveltekit'; import { ParaglideJS } from '@inlang/paraglide-sveltekit';
import "../app.css"; import '../app.css';
import '@fontsource-variable/roboto-flex/full.css'; import '@fontsource-variable/roboto-flex/full.css';

40
src/routes/+page.svelte
View file

@ -1,25 +1,25 @@
<script lang="ts"> <script lang="ts">
import StoreGrid from "$lib/components/StoreGrid.svelte"; import StoreGrid from '$lib/components/StoreGrid.svelte';
import type { Action } from "$lib/types.js"; import type { Action } from '$lib/types.js';
const exampleEntries: Action[] = [ const exampleEntries: Action[] = [
{ {
id: "abcd", id: 'abcd',
type: "shock", type: 'shock',
bodyPart: "thigh", bodyPart: 'thigh',
cost: 12, cost: 12,
subject: "raider", subject: 'raider',
time: "burst" time: 'burst'
}, },
{ {
id: "efgh", id: 'efgh',
type: "shock", type: 'shock',
bodyPart: "ankle", bodyPart: 'ankle',
cost: 8, cost: 8,
subject: "raider", subject: 'raider',
time: "burst" time: 'burst'
} }
] ];
</script> </script>
<h1>Punish Raider</h1> <h1>Punish Raider</h1>

38
src/stories/Button.stories.svelte
View file

@ -1,24 +1,24 @@
<script module> <script module>
import { defineMeta } from '@storybook/addon-svelte-csf'; import { defineMeta } from '@storybook/addon-svelte-csf';
import Button from './Button.svelte'; import Button from './Button.svelte';
import { fn } from '@storybook/test'; import { fn } from '@storybook/test';
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
const { Story } = defineMeta({ const { Story } = defineMeta({
title: 'Example/Button', title: 'Example/Button',
component: Button, component: Button,
tags: ['autodocs'], tags: ['autodocs'],
argTypes: { argTypes: {
backgroundColor: { control: 'color' }, backgroundColor: { control: 'color' },
size: { size: {
control: { type: 'select' }, control: { type: 'select' },
options: ['small', 'medium', 'large'], options: ['small', 'medium', 'large']
}, }
}, },
args: { args: {
onClick: fn(), onClick: fn()
} }
}); });
</script> </script>
<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args --> <!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->

36
src/stories/Button.svelte
View file

@ -1,26 +1,26 @@
<script> <script>
import './button.css'; import './button.css';
/** /**
* @typedef {Object} Props * @typedef {Object} Props
* @property {boolean} [primary] Is this the principal call to action on the page? * @property {boolean} [primary] Is this the principal call to action on the page?
* @property {string} [backgroundColor] What background color to use * @property {string} [backgroundColor] What background color to use
* @property {'small' | 'medium' | 'large'} [size] How large should the button be? * @property {'small' | 'medium' | 'large'} [size] How large should the button be?
* @property {string} label Button contents * @property {string} label Button contents
* @property {() => void} [onClick] The onclick event handler * @property {() => void} [onClick] The onclick event handler
*/ */
/** @type {Props} */ /** @type {Props} */
const { primary = false, backgroundColor, size = 'medium', label, onClick } = $props(); const { primary = false, backgroundColor, size = 'medium', label, onClick } = $props();
</script> </script>
<button <button
type="button" type="button"
class={['storybook-button', `storybook-button--${size}`].join(' ')} class={['storybook-button', `storybook-button--${size}`].join(' ')}
class:storybook-button--primary={primary} class:storybook-button--primary={primary}
class:storybook-button--secondary={!primary} class:storybook-button--secondary={!primary}
style:background-color={backgroundColor} style:background-color={backgroundColor}
onclick={onClick} onclick={onClick}
> >
{label} {label}
</button> </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;
} }

38
src/stories/Header.stories.svelte
View file

@ -1,24 +1,24 @@
<script module> <script module>
import { defineMeta } from '@storybook/addon-svelte-csf'; import { defineMeta } from '@storybook/addon-svelte-csf';
import Header from './Header.svelte'; import Header from './Header.svelte';
import { fn } from '@storybook/test'; import { fn } from '@storybook/test';
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
const { Story } = defineMeta({ const { Story } = defineMeta({
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()
} }
}); });
</script> </script>
<Story name="Logged In" args={{ user: { name: 'Jane Doe' } }} /> <Story name="Logged In" args={{ user: { name: 'Jane Doe' } }} />

80
src/stories/Header.svelte
View file

@ -1,47 +1,47 @@
<script> <script>
import './header.css'; import './header.css';
import Button from './Button.svelte'; import Button from './Button.svelte';
/** /**
* @typedef {Object} Props * @typedef {Object} Props
* @property {{name: string}} [user] The user object * @property {{name: string}} [user] The user object
* @property {() => void} [onLogin] The login event handler * @property {() => void} [onLogin] The login event handler
* @property {() => void} [onLogout] The logout event handler * @property {() => void} [onLogout] The logout event handler
* @property {() => void} [onCreateAccount] The account creation event handler * @property {() => void} [onCreateAccount] The account creation event handler
*/ */
/** @type {Props} */ /** @type {Props} */
const { user, onLogin, onLogout, onCreateAccount } = $props(); const { user, onLogin, onLogout, onCreateAccount } = $props();
</script> </script>
<header> <header>
<div class="storybook-header"> <div class="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" fill-rule="evenodd"> <g fill="none" fill-rule="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" 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" fill="#555AB9"
/> />
<path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" /> <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
</g> </g>
</svg> </svg>
<h1>Acme</h1> <h1>Acme</h1>
</div> </div>
<div> <div>
{#if user} {#if user}
<span class="welcome"> <span class="welcome">
Welcome, <b>{user.name}</b>! Welcome, <b>{user.name}</b>!
</span> </span>
<Button size="small" onClick={onLogout} label="Log out" /> <Button size="small" onClick={onLogout} label="Log out" />
{:else} {:else}
<Button size="small" onClick={onLogin} label="Log in" /> <Button size="small" onClick={onLogin} label="Log in" />
<Button primary size="small" onClick={onCreateAccount} label="Sign up" /> <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
{/if} {/if}
</div> </div>
</div> </div>
</header> </header>

48
src/stories/Page.stories.svelte
View file

@ -1,30 +1,32 @@
<script module> <script module>
import { defineMeta } from '@storybook/addon-svelte-csf'; import { defineMeta } from '@storybook/addon-svelte-csf';
import { expect, userEvent, waitFor, within } from '@storybook/test'; import { expect, userEvent, waitFor, within } from '@storybook/test';
import Page from './Page.svelte'; import Page from './Page.svelte';
import { fn } from '@storybook/test'; import { fn } from '@storybook/test';
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
const { Story } = defineMeta({ const { Story } = defineMeta({
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'
}, }
}); });
</script> </script>
<Story name="Logged In" play={async ({ canvasElement }) => { <Story
const canvas = within(canvasElement); name="Logged In"
const loginButton = canvas.getByRole('button', { name: /Log in/i }); play={async ({ canvasElement }) => {
await expect(loginButton).toBeInTheDocument(); const canvas = within(canvasElement);
await userEvent.click(loginButton); const loginButton = canvas.getByRole('button', { name: /Log in/i });
await waitFor(() => expect(loginButton).not.toBeInTheDocument()); await expect(loginButton).toBeInTheDocument();
await userEvent.click(loginButton);
await waitFor(() => 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();
}} }}
/> />
<Story name="Logged Out" /> <Story name="Logged Out" />

122
src/stories/Page.svelte
View file

@ -1,70 +1,70 @@
<script> <script>
import './page.css'; import './page.css';
import Header from './Header.svelte'; import Header from './Header.svelte';
let user = $state(null); let user = $state(null);
</script> </script>
<article> <article>
<Header <Header
{user} {user}
onLogin={() => (user = { name: 'Jane Doe' })} onLogin={() => (user = { name: 'Jane Doe' })}
onLogout={() => (user = null)} onLogout={() => (user = null)}
onCreateAccount={() => (user = { name: 'Jane Doe' })} onCreateAccount={() => (user = { name: 'Jane Doe' })}
/> />
<section class="storybook-page"> <section class="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 <a
href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e" href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
target="_blank" target="_blank"
rel="noopener noreferrer" 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 navigate to them in your app. Here are some handy patterns for managing page data needing to navigate to them in your app. Here are some handy patterns for managing page data
in Storybook: in Storybook:
</p> </p>
<ul> <ul>
<li> <li>
Use a higher-level connected component. Storybook helps you compose such data from the Use a higher-level connected component. Storybook helps you compose such data from the
"args" of 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 Assemble data in the page component from your services. You can mock these services out
using 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">docs</a> <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
. .
</p> </p>
<div class="tip-wrapper"> <div class="tip-wrapper">
<span class="tip">Tip</span> <span class="tip">Tip</span>
Adjust the width of the canvas with the 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" fill-rule="evenodd"> <g fill="none" fill-rule="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 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 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" 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 {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
border: 0; border: 0;
border-radius: 3em; border-radius: 3em;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
} }
.storybook-button--primary { .storybook-button--primary {
background-color: #1ea7fd; background-color: #1ea7fd;
color: white; color: white;
} }
.storybook-button--secondary { .storybook-button--secondary {
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;
background-color: transparent; background-color: transparent;
color: #333; color: #333;
} }
.storybook-button--small { .storybook-button--small {
padding: 10px 16px; padding: 10px 16px;
font-size: 12px; font-size: 12px;
} }
.storybook-button--medium { .storybook-button--medium {
padding: 11px 20px; padding: 11px 20px;
font-size: 14px; font-size: 14px;
} }
.storybook-button--large { .storybook-button--large {
padding: 12px 24px; padding: 12px 24px;
font-size: 16px; font-size: 16px;
} }

36
src/stories/header.css
View file

@ -1,32 +1,32 @@
.storybook-header { .storybook-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
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;
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
} }
.storybook-header svg { .storybook-header svg {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
.storybook-header h1 { .storybook-header h1 {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
margin: 6px 0 6px 10px; margin: 6px 0 6px 10px;
font-weight: 700; font-weight: 700;
font-size: 20px; font-size: 20px;
line-height: 1; line-height: 1;
} }
.storybook-header button + button { .storybook-header button + button {
margin-left: 10px; margin-left: 10px;
} }
.storybook-header .welcome { .storybook-header .welcome {
margin-right: 10px; margin-right: 10px;
color: #333; color: #333;
font-size: 14px; font-size: 14px;
} }

80
src/stories/page.css
View file

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