dev: (re) add storybook
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
cd008c10e2
commit
8dda83fbd7
15 changed files with 7168 additions and 117 deletions
5
package.json
Normal file
5
package.json
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"devDependencies": {
|
||||||
|
"concurrently": "^8.2.2"
|
||||||
|
}
|
||||||
|
}
|
204
pnpm-lock.yaml
Normal file
204
pnpm-lock.yaml
Normal file
|
@ -0,0 +1,204 @@
|
||||||
|
lockfileVersion: '6.0'
|
||||||
|
|
||||||
|
settings:
|
||||||
|
autoInstallPeers: true
|
||||||
|
excludeLinksFromLockfile: false
|
||||||
|
|
||||||
|
devDependencies:
|
||||||
|
concurrently:
|
||||||
|
specifier: ^8.2.2
|
||||||
|
version: 8.2.2
|
||||||
|
|
||||||
|
packages:
|
||||||
|
|
||||||
|
/@babel/runtime@7.23.9:
|
||||||
|
resolution: {integrity: sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==}
|
||||||
|
engines: {node: '>=6.9.0'}
|
||||||
|
dependencies:
|
||||||
|
regenerator-runtime: 0.14.1
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/ansi-regex@5.0.1:
|
||||||
|
resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
|
||||||
|
engines: {node: '>=8'}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/ansi-styles@4.3.0:
|
||||||
|
resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
|
||||||
|
engines: {node: '>=8'}
|
||||||
|
dependencies:
|
||||||
|
color-convert: 2.0.1
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/chalk@4.1.2:
|
||||||
|
resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
|
||||||
|
engines: {node: '>=10'}
|
||||||
|
dependencies:
|
||||||
|
ansi-styles: 4.3.0
|
||||||
|
supports-color: 7.2.0
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/cliui@8.0.1:
|
||||||
|
resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
dependencies:
|
||||||
|
string-width: 4.2.3
|
||||||
|
strip-ansi: 6.0.1
|
||||||
|
wrap-ansi: 7.0.0
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/color-convert@2.0.1:
|
||||||
|
resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
|
||||||
|
engines: {node: '>=7.0.0'}
|
||||||
|
dependencies:
|
||||||
|
color-name: 1.1.4
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/color-name@1.1.4:
|
||||||
|
resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/concurrently@8.2.2:
|
||||||
|
resolution: {integrity: sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==}
|
||||||
|
engines: {node: ^14.13.0 || >=16.0.0}
|
||||||
|
hasBin: true
|
||||||
|
dependencies:
|
||||||
|
chalk: 4.1.2
|
||||||
|
date-fns: 2.30.0
|
||||||
|
lodash: 4.17.21
|
||||||
|
rxjs: 7.8.1
|
||||||
|
shell-quote: 1.8.1
|
||||||
|
spawn-command: 0.0.2
|
||||||
|
supports-color: 8.1.1
|
||||||
|
tree-kill: 1.2.2
|
||||||
|
yargs: 17.7.2
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/date-fns@2.30.0:
|
||||||
|
resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
|
||||||
|
engines: {node: '>=0.11'}
|
||||||
|
dependencies:
|
||||||
|
'@babel/runtime': 7.23.9
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/emoji-regex@8.0.0:
|
||||||
|
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/escalade@3.1.2:
|
||||||
|
resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
|
||||||
|
engines: {node: '>=6'}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/get-caller-file@2.0.5:
|
||||||
|
resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
|
||||||
|
engines: {node: 6.* || 8.* || >= 10.*}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/has-flag@4.0.0:
|
||||||
|
resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
|
||||||
|
engines: {node: '>=8'}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/is-fullwidth-code-point@3.0.0:
|
||||||
|
resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
|
||||||
|
engines: {node: '>=8'}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/lodash@4.17.21:
|
||||||
|
resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/regenerator-runtime@0.14.1:
|
||||||
|
resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/require-directory@2.1.1:
|
||||||
|
resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
|
||||||
|
engines: {node: '>=0.10.0'}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/rxjs@7.8.1:
|
||||||
|
resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
|
||||||
|
dependencies:
|
||||||
|
tslib: 2.6.2
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/shell-quote@1.8.1:
|
||||||
|
resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/spawn-command@0.0.2:
|
||||||
|
resolution: {integrity: sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/string-width@4.2.3:
|
||||||
|
resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
|
||||||
|
engines: {node: '>=8'}
|
||||||
|
dependencies:
|
||||||
|
emoji-regex: 8.0.0
|
||||||
|
is-fullwidth-code-point: 3.0.0
|
||||||
|
strip-ansi: 6.0.1
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/strip-ansi@6.0.1:
|
||||||
|
resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
|
||||||
|
engines: {node: '>=8'}
|
||||||
|
dependencies:
|
||||||
|
ansi-regex: 5.0.1
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/supports-color@7.2.0:
|
||||||
|
resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
|
||||||
|
engines: {node: '>=8'}
|
||||||
|
dependencies:
|
||||||
|
has-flag: 4.0.0
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/supports-color@8.1.1:
|
||||||
|
resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
|
||||||
|
engines: {node: '>=10'}
|
||||||
|
dependencies:
|
||||||
|
has-flag: 4.0.0
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/tree-kill@1.2.2:
|
||||||
|
resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
|
||||||
|
hasBin: true
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/tslib@2.6.2:
|
||||||
|
resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/wrap-ansi@7.0.0:
|
||||||
|
resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
|
||||||
|
engines: {node: '>=10'}
|
||||||
|
dependencies:
|
||||||
|
ansi-styles: 4.3.0
|
||||||
|
string-width: 4.2.3
|
||||||
|
strip-ansi: 6.0.1
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/y18n@5.0.8:
|
||||||
|
resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
|
||||||
|
engines: {node: '>=10'}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/yargs-parser@21.1.1:
|
||||||
|
resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/yargs@17.7.2:
|
||||||
|
resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
|
||||||
|
engines: {node: '>=12'}
|
||||||
|
dependencies:
|
||||||
|
cliui: 8.0.1
|
||||||
|
escalade: 3.1.2
|
||||||
|
get-caller-file: 2.0.5
|
||||||
|
require-directory: 2.1.1
|
||||||
|
string-width: 4.2.3
|
||||||
|
y18n: 5.0.8
|
||||||
|
yargs-parser: 21.1.1
|
||||||
|
dev: true
|
|
@ -2,11 +2,12 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
root: true,
|
root: true,
|
||||||
extends: [
|
extends: [
|
||||||
'eslint:recommended',
|
"eslint:recommended",
|
||||||
'plugin:@typescript-eslint/recommended',
|
"plugin:@typescript-eslint/recommended",
|
||||||
'plugin:svelte/recommended',
|
"plugin:svelte/recommended",
|
||||||
'prettier'
|
"prettier",
|
||||||
],
|
"plugin:storybook/recommended"
|
||||||
|
],
|
||||||
parser: '@typescript-eslint/parser',
|
parser: '@typescript-eslint/parser',
|
||||||
plugins: ['@typescript-eslint'],
|
plugins: ['@typescript-eslint'],
|
||||||
parserOptions: {
|
parserOptions: {
|
||||||
|
|
26
webui/.storybook/main.ts
Normal file
26
webui/.storybook/main.ts
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
import type { StorybookConfig } from '@storybook/sveltekit';
|
||||||
|
|
||||||
|
const config: StorybookConfig = {
|
||||||
|
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
|
||||||
|
addons: [
|
||||||
|
'@storybook/addon-links',
|
||||||
|
'@storybook/addon-essentials',
|
||||||
|
'@storybook/addon-interactions'
|
||||||
|
],
|
||||||
|
framework: {
|
||||||
|
name: '@storybook/sveltekit',
|
||||||
|
options: {}
|
||||||
|
},
|
||||||
|
docs: {
|
||||||
|
autodocs: 'tag'
|
||||||
|
},
|
||||||
|
viteFinal: (config) => {
|
||||||
|
config.server!.proxy = {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://localhost:8099/'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return config;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
export default config;
|
16
webui/.storybook/preview.ts
Normal file
16
webui/.storybook/preview.ts
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
import type { Preview } from '@storybook/svelte';
|
||||||
|
import '../src/lib/styles/main.scss';
|
||||||
|
|
||||||
|
const preview: Preview = {
|
||||||
|
parameters: {
|
||||||
|
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||||
|
controls: {
|
||||||
|
matchers: {
|
||||||
|
color: /(background|color)$/i,
|
||||||
|
date: /Date$/i
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default preview;
|
|
@ -10,9 +10,19 @@
|
||||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||||
"lint": "prettier --check . && eslint .",
|
"lint": "prettier --check . && eslint .",
|
||||||
"format": "prettier --write ."
|
"format": "prettier --write .",
|
||||||
|
"storybook": "concurrently \"npm run storybook:serve\" \"cargo run -- serve ../example_vault --clean --no-browser --reinitialize --rescan-mode mirror --bind 127.0.0.1:8099\"",
|
||||||
|
"storybook:serve": "storybook dev -p 6006",
|
||||||
|
"build-storybook": "storybook build"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@storybook/addon-essentials": "^7.6.16",
|
||||||
|
"@storybook/addon-interactions": "^7.6.16",
|
||||||
|
"@storybook/addon-links": "^7.6.16",
|
||||||
|
"@storybook/blocks": "^7.6.16",
|
||||||
|
"@storybook/svelte": "^7.6.16",
|
||||||
|
"@storybook/sveltekit": "^7.6.16",
|
||||||
|
"@storybook/test": "^7.6.16",
|
||||||
"@sveltejs/adapter-auto": "^3.0.0",
|
"@sveltejs/adapter-auto": "^3.0.0",
|
||||||
"@sveltejs/kit": "^2.0.0",
|
"@sveltejs/kit": "^2.0.0",
|
||||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||||
|
@ -21,9 +31,13 @@
|
||||||
"@typescript-eslint/parser": "^6.0.0",
|
"@typescript-eslint/parser": "^6.0.0",
|
||||||
"eslint": "^8.56.0",
|
"eslint": "^8.56.0",
|
||||||
"eslint-config-prettier": "^9.1.0",
|
"eslint-config-prettier": "^9.1.0",
|
||||||
|
"eslint-plugin-storybook": "^0.8.0",
|
||||||
"eslint-plugin-svelte": "^2.35.1",
|
"eslint-plugin-svelte": "^2.35.1",
|
||||||
"prettier": "^3.1.1",
|
"prettier": "^3.1.1",
|
||||||
"prettier-plugin-svelte": "^3.1.2",
|
"prettier-plugin-svelte": "^3.1.2",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"storybook": "^7.6.16",
|
||||||
"svelte": "^4.2.7",
|
"svelte": "^4.2.7",
|
||||||
"svelte-check": "^3.6.0",
|
"svelte-check": "^3.6.0",
|
||||||
"tslib": "^2.4.1",
|
"tslib": "^2.4.1",
|
||||||
|
|
6678
webui/pnpm-lock.yaml
6678
webui/pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
48
webui/src/stories/BlobPreview.stories.ts
Normal file
48
webui/src/stories/BlobPreview.stories.ts
Normal file
|
@ -0,0 +1,48 @@
|
||||||
|
import type { Meta, StoryObj } from '@storybook/svelte';
|
||||||
|
import BlobPreview from '../lib/components/display/BlobPreview.svelte';
|
||||||
|
import {
|
||||||
|
audioAddress,
|
||||||
|
imageAddress,
|
||||||
|
imageVerticalAddress,
|
||||||
|
stlAddress,
|
||||||
|
videoAddress,
|
||||||
|
videoVerticalAddress
|
||||||
|
} from './common';
|
||||||
|
|
||||||
|
const meta: Meta<BlobPreview> = {
|
||||||
|
title: 'Blobs/BlobPreview',
|
||||||
|
component: BlobPreview,
|
||||||
|
tags: ['autodocs'],
|
||||||
|
argTypes: {
|
||||||
|
onLoaded: {
|
||||||
|
action: 'loaded'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<BlobPreview>;
|
||||||
|
|
||||||
|
export const Image: Story = {
|
||||||
|
args: { address: imageAddress }
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ImageVertical: Story = {
|
||||||
|
args: { address: imageVerticalAddress }
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Audio: Story = {
|
||||||
|
args: { address: audioAddress }
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Video: Story = {
|
||||||
|
args: { address: videoAddress }
|
||||||
|
};
|
||||||
|
|
||||||
|
export const VideoVertical: Story = {
|
||||||
|
args: { address: videoVerticalAddress }
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Model3d: Story = {
|
||||||
|
args: { address: stlAddress }
|
||||||
|
};
|
50
webui/src/stories/BlobViewer.stories.ts
Normal file
50
webui/src/stories/BlobViewer.stories.ts
Normal file
|
@ -0,0 +1,50 @@
|
||||||
|
import type { Meta, StoryObj } from '@storybook/svelte';
|
||||||
|
import BlobViewer from '../lib/components/display/BlobViewer.svelte';
|
||||||
|
import {
|
||||||
|
audioAddress,
|
||||||
|
imageAddress,
|
||||||
|
imageVerticalAddress,
|
||||||
|
stlAddress,
|
||||||
|
videoAddress,
|
||||||
|
videoVerticalAddress
|
||||||
|
} from './common';
|
||||||
|
|
||||||
|
const meta: Meta<BlobViewer> = {
|
||||||
|
title: 'Blobs/BlobViewer',
|
||||||
|
component: BlobViewer,
|
||||||
|
tags: ['autodocs'],
|
||||||
|
argTypes: {
|
||||||
|
detail: {
|
||||||
|
control: {
|
||||||
|
type: 'boolean'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<BlobViewer>;
|
||||||
|
|
||||||
|
export const Image: Story = {
|
||||||
|
args: { address: imageAddress }
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ImageVertical: Story = {
|
||||||
|
args: { address: imageVerticalAddress }
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Audio: Story = {
|
||||||
|
args: { address: audioAddress }
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Video: Story = {
|
||||||
|
args: { address: videoAddress }
|
||||||
|
};
|
||||||
|
|
||||||
|
export const VideoVertical: Story = {
|
||||||
|
args: { address: videoVerticalAddress }
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Model3d: Story = {
|
||||||
|
args: { address: stlAddress }
|
||||||
|
};
|
27
webui/src/stories/EntityList.stories.ts
Normal file
27
webui/src/stories/EntityList.stories.ts
Normal file
|
@ -0,0 +1,27 @@
|
||||||
|
import type { Meta, StoryObj } from '@storybook/svelte';
|
||||||
|
import EntityList from '../lib/components/widgets/EntityList.svelte';
|
||||||
|
import { imageAddress, imageVerticalAddress, videoAddress, videoVerticalAddress } from './common';
|
||||||
|
|
||||||
|
const meta: Meta<EntityList> = {
|
||||||
|
title: 'Widgets/EntityList',
|
||||||
|
component: EntityList,
|
||||||
|
tags: ['autodocs'],
|
||||||
|
args: {
|
||||||
|
entities: [imageAddress, imageVerticalAddress, videoAddress, videoVerticalAddress]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<EntityList>;
|
||||||
|
|
||||||
|
export const Thumbnails: Story = {
|
||||||
|
args: {
|
||||||
|
thumbnails: true
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Plain: Story = {
|
||||||
|
args: {
|
||||||
|
thumbnails: false
|
||||||
|
}
|
||||||
|
};
|
11
webui/src/stories/FullscreenDecorator.svelte
Normal file
11
webui/src/stories/FullscreenDecorator.svelte
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
<slot />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:global(body.sb-main-fullscreen) {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(#storybook-root) {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
</style>
|
82
webui/src/stories/Selector.stories.ts
Normal file
82
webui/src/stories/Selector.stories.ts
Normal file
|
@ -0,0 +1,82 @@
|
||||||
|
import type { Meta, StoryObj } from '@storybook/svelte';
|
||||||
|
import Selector from '../lib/components/utils/Selector.svelte';
|
||||||
|
|
||||||
|
const meta: Meta<Selector> = {
|
||||||
|
title: 'Widgets/Selector',
|
||||||
|
component: Selector,
|
||||||
|
tags: ['autodocs'],
|
||||||
|
argTypes: {
|
||||||
|
onInput: {
|
||||||
|
action: 'input'
|
||||||
|
},
|
||||||
|
onFocus: {
|
||||||
|
action: 'focus'
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
} as any
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<Selector>;
|
||||||
|
|
||||||
|
export const Attribute: Story = {
|
||||||
|
args: {
|
||||||
|
types: ['Attribute', 'NewAttribute']
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AttributeInitial: Story = {
|
||||||
|
args: {
|
||||||
|
types: ['Attribute'],
|
||||||
|
initial: {
|
||||||
|
t: 'Attribute',
|
||||||
|
name: 'INITIAL_ATTR'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AllValues: Story = {
|
||||||
|
args: {
|
||||||
|
types: ['Attribute', 'NewAttribute', 'Address', 'NewAddress', 'String', 'Number']
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Entities: Story = {
|
||||||
|
args: {
|
||||||
|
types: ['Address', 'NewAddress']
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ExistingEntities: Story = {
|
||||||
|
args: {
|
||||||
|
types: ['Address']
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Strings: Story = {
|
||||||
|
args: {
|
||||||
|
types: ['String']
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const StringInitial: Story = {
|
||||||
|
args: {
|
||||||
|
types: ['String'],
|
||||||
|
initial: {
|
||||||
|
t: 'String',
|
||||||
|
c: 'An Initial String.'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Numbers: Story = {
|
||||||
|
args: {
|
||||||
|
types: ['Number']
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const MultipleValues: Story = {
|
||||||
|
args: {
|
||||||
|
types: ['String', 'Number']
|
||||||
|
}
|
||||||
|
};
|
56
webui/src/stories/UpObject.stories.ts
Normal file
56
webui/src/stories/UpObject.stories.ts
Normal file
|
@ -0,0 +1,56 @@
|
||||||
|
import type { Meta, StoryObj } from '@storybook/svelte';
|
||||||
|
import UpObject from '../lib/components/display/UpObject.svelte';
|
||||||
|
import { videoAddress } from './common';
|
||||||
|
|
||||||
|
const address = videoAddress;
|
||||||
|
|
||||||
|
const meta: Meta<UpObject> = {
|
||||||
|
title: 'Display/UpObject',
|
||||||
|
component: UpObject,
|
||||||
|
tags: ['autodocs'],
|
||||||
|
args: {
|
||||||
|
address
|
||||||
|
},
|
||||||
|
argTypes: {
|
||||||
|
address: {
|
||||||
|
defaultValue: address,
|
||||||
|
name: 'Address',
|
||||||
|
type: 'string'
|
||||||
|
},
|
||||||
|
onResolved: {
|
||||||
|
action: 'resolved'
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
} as any
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<UpObject>;
|
||||||
|
|
||||||
|
// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
|
||||||
|
export const Default: Story = {};
|
||||||
|
|
||||||
|
export const WithLabels: Story = {
|
||||||
|
args: {
|
||||||
|
labels: ['Label 1', 'Label B', 'Label III']
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Link: Story = {
|
||||||
|
args: {
|
||||||
|
link: true
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Banner: Story = {
|
||||||
|
args: {
|
||||||
|
banner: true
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const BannerWithLabels: Story = {
|
||||||
|
args: {
|
||||||
|
banner: true,
|
||||||
|
labels: ['Label 1', 'Label B', 'Label III']
|
||||||
|
}
|
||||||
|
};
|
44
webui/src/stories/UpObjectCard.stories.ts
Normal file
44
webui/src/stories/UpObjectCard.stories.ts
Normal file
|
@ -0,0 +1,44 @@
|
||||||
|
import type { Meta, StoryObj } from '@storybook/svelte';
|
||||||
|
import UpObjectCard from '../lib/components/display/UpObjectCard.svelte';
|
||||||
|
import { imageAddress } from './common';
|
||||||
|
|
||||||
|
const address = imageAddress;
|
||||||
|
|
||||||
|
const meta: Meta<UpObjectCard> = {
|
||||||
|
title: 'Display/UpObjectCard',
|
||||||
|
component: UpObjectCard,
|
||||||
|
tags: ['autodocs'],
|
||||||
|
args: {
|
||||||
|
address
|
||||||
|
},
|
||||||
|
argTypes: {
|
||||||
|
address: {
|
||||||
|
defaultValue: address,
|
||||||
|
name: 'Address',
|
||||||
|
type: 'string'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<UpObjectCard>;
|
||||||
|
|
||||||
|
export const Default: Story = {};
|
||||||
|
|
||||||
|
export const WithLabels: Story = {
|
||||||
|
args: {
|
||||||
|
labels: ['Label 1', 'Label B', 'Label III']
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const WithoutThumbnail: Story = {
|
||||||
|
args: {
|
||||||
|
thumbnail: false
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Small: Story = {
|
||||||
|
args: {
|
||||||
|
banner: false
|
||||||
|
}
|
||||||
|
};
|
11
webui/src/stories/common.ts
Normal file
11
webui/src/stories/common.ts
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
export const imageAddress = "zb2rhYSdmX5kD5vkUErWkmTpyhGugBX8WqBuLLQdgox8ztwwx";
|
||||||
|
export const imageVerticalAddress =
|
||||||
|
"zb2rhmTC5cXbcQ3kgXkcksWWBbR4VrzU5L3S9kbyMPCicVy9L";
|
||||||
|
|
||||||
|
export const audioAddress = "zb2rhj3LpjUDtka3WuygZJGcEbgmrEyjBY6Y6ya9PVVEkbkke";
|
||||||
|
|
||||||
|
export const videoAddress = "zb2rhnhv2Me2ZWohSYp7kyf1KAQbZ1zsLficHsaWTgoex67iJ";
|
||||||
|
export const videoVerticalAddress =
|
||||||
|
"zb2rhocWjf4rc39Wi7TDv6KaVxs2iTQqN6CVYR6m7M8AYgp9c";
|
||||||
|
|
||||||
|
export const stlAddress = "zb2rhbprcQL38kifW8aMW8cvgWymtaBEe6fK9n3nzDum25Paf";
|
Loading…
Reference in a new issue