diff --git a/apps/app/.storybook/main.ts b/apps/app/.storybook/main.ts index b55c2e9..4ec2156 100644 --- a/apps/app/.storybook/main.ts +++ b/apps/app/.storybook/main.ts @@ -6,11 +6,15 @@ const config: StorybookConfig = { '@storybook/addon-svelte-csf', '@storybook/addon-essentials', '@chromatic-com/storybook', - '@storybook/addon-interactions' + '@storybook/addon-interactions', ], framework: { name: '@storybook/sveltekit', - options: {} - } + options: { + builder: { + viteConfigPath: '../vite.config.ts', + }, + } + }, }; export default config; diff --git a/apps/app/.storybook/preview.ts b/apps/app/.storybook/preview.ts index dbd1c7a..901a0e9 100644 --- a/apps/app/.storybook/preview.ts +++ b/apps/app/.storybook/preview.ts @@ -1,5 +1,7 @@ import type { Preview } from '@storybook/svelte'; +import '../src/app.css'; + const preview: Preview = { parameters: { controls: { diff --git a/apps/app/src/lib/Logout.stories.ts b/apps/app/src/lib/Logout.stories.ts new file mode 100644 index 0000000..5da54f6 --- /dev/null +++ b/apps/app/src/lib/Logout.stories.ts @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/svelte'; +import Logout from './Logout.svelte'; + +const meta = { + title: 'lib/Logout', + component: Logout, + tags: ['autodocs'], + argTypes: { + show: { control: { type: 'boolean' } } + } +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Visible: Story = { + args: { + show: true + } +}; + +export const Hidden: Story = { + args: { + show: false + } +}; diff --git a/apps/app/src/lib/graph/PersonMenu.stories.ts b/apps/app/src/lib/graph/PersonMenu.stories.ts new file mode 100644 index 0000000..40e570a --- /dev/null +++ b/apps/app/src/lib/graph/PersonMenu.stories.ts @@ -0,0 +1,88 @@ +import type { Meta, StoryObj } from '@storybook/svelte'; +import PersonMenu from './PersonMenu.svelte'; + +const meta = { + title: 'graph/PersonMenu', + component: PersonMenu, + tags: ['autodocs'], + argTypes: { + top: { control: { type: 'number' } }, + left: { control: { type: 'number' } }, + right: { control: { type: 'number' } }, + bottom: { control: { type: 'number' } }, + onClick: { action: 'clicked' }, + deleteNode: { action: 'deleteNode clicked' }, + createRelationshipAndNode: { action: 'createRelationshipAndNode clicked' }, + addRelationship: { action: 'addRelationship clicked' }, + addAdmin: { action: 'addAdmin clicked' }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + top: 100, + left: 100, + right: undefined, + bottom: undefined, + onClick: () => console.log('menu closed'), + deleteNode: () => console.log('delete node'), + createRelationshipAndNode: () => console.log('create relationship and node'), + addRelationship: () => console.log('add relationship'), + addAdmin: () => console.log('add admin'), + } +}; + +/** + * Simulate a click roughly in top-left of the screen. + */ +export const TopLeftPosition: Story = { + args: { + top: 150, + left: 200, + right: undefined, + bottom: undefined, + onClick: () => console.log('menu closed'), + deleteNode: () => console.log('delete node'), + createRelationshipAndNode: () => console.log('create relationship and node'), + addRelationship: () => console.log('add relationship'), + addAdmin: () => console.log('add admin'), + } +}; + +/** + * Simulate a click near the bottom-right of the screen. + */ +export const BottomRightPosition: Story = { + args: { + top: undefined, + left: undefined, + right: 100, + bottom: 120, + onClick: () => console.log('menu closed'), + deleteNode: () => console.log('delete node'), + createRelationshipAndNode: () => console.log('create relationship and node'), + addRelationship: () => console.log('add relationship'), + addAdmin: () => console.log('add admin'), + } +}; + +/** + * Simulate a click near the middle-right (right edge but middle vertically). + */ +export const MiddleRightPosition: Story = { + args: { + top: 400, + left: undefined, + right: 50, + bottom: undefined, + onClick: () => console.log('menu closed'), + deleteNode: () => console.log('delete node'), + createRelationshipAndNode: () => console.log('create relationship and node'), + addRelationship: () => console.log('add relationship'), + addAdmin: () => console.log('add admin'), + } +}; diff --git a/apps/app/src/lib/graph/PersonMenu.svelte b/apps/app/src/lib/graph/PersonMenu.svelte index 9eedcd5..fb4848f 100644 --- a/apps/app/src/lib/graph/PersonMenu.svelte +++ b/apps/app/src/lib/graph/PersonMenu.svelte @@ -1,30 +1,35 @@ @@ -34,19 +39,19 @@ tabindex="-1" bind:this={contextMenu} class="context-menu bg-primary-100 rounded-lg shadow-lg" - onclick={props.onClick} + onclick={onClick} onkeydown={(e) => { if (e.key === 'Esc' || e.key === ' ' || e.key === 'Escape') { - props.onClick(); + onClick(); } }} > - - - - + + + + diff --git a/apps/app/src/stories/Header.stories.svelte b/apps/app/src/stories/Header.stories.svelte deleted file mode 100644 index eb4bf24..0000000 --- a/apps/app/src/stories/Header.stories.svelte +++ /dev/null @@ -1,26 +0,0 @@ - - - - - diff --git a/apps/app/src/stories/Header.svelte b/apps/app/src/stories/Header.svelte deleted file mode 100644 index 3259d9f..0000000 --- a/apps/app/src/stories/Header.svelte +++ /dev/null @@ -1,45 +0,0 @@ - - -
-
-
- - - - - - - -

Acme

-
-
- {#if user} - - Welcome, {user.name}! - -
-
-
diff --git a/apps/app/src/stories/Page.stories.svelte b/apps/app/src/stories/Page.stories.svelte deleted file mode 100644 index 9e4f4ff..0000000 --- a/apps/app/src/stories/Page.stories.svelte +++ /dev/null @@ -1,32 +0,0 @@ - - - { - const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { name: /Log in/i }); - await expect(loginButton).toBeInTheDocument(); - await userEvent.click(loginButton); - await waitFor(() => expect(loginButton).not.toBeInTheDocument()); - - const logoutButton = canvas.getByRole('button', { name: /Log out/i }); - await expect(logoutButton).toBeInTheDocument(); - }} -/> - - diff --git a/apps/app/src/stories/Page.svelte b/apps/app/src/stories/Page.svelte deleted file mode 100644 index c88695c..0000000 --- a/apps/app/src/stories/Page.svelte +++ /dev/null @@ -1,70 +0,0 @@ - - -
-
(user = { name: 'Jane Doe' })} - onLogout={() => (user = undefined)} - onCreateAccount={() => (user = { name: 'Jane Doe' })} - /> - -
-

Pages in Storybook

-

- We recommend building UIs with a - - component-driven - - process starting with atomic components and ending with pages. -

-

- 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: -

-
    -
  • - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories -
  • -
  • - Assemble data in the page component from your services. You can mock these services out - using Storybook. -
  • -
-

- Get a guided tutorial on component-driven development at - - Storybook tutorials - - . Read more in the - docs - . -

-
- Tip - Adjust the width of the canvas with the - - - - - - Viewports addon in the toolbar -
-
-
diff --git a/apps/app/src/stories/assets/accessibility.png b/apps/app/src/stories/assets/accessibility.png deleted file mode 100644 index 6ffe6fe..0000000 Binary files a/apps/app/src/stories/assets/accessibility.png and /dev/null differ diff --git a/apps/app/src/stories/assets/accessibility.svg b/apps/app/src/stories/assets/accessibility.svg deleted file mode 100644 index 107e93f..0000000 --- a/apps/app/src/stories/assets/accessibility.svg +++ /dev/null @@ -1 +0,0 @@ -Accessibility \ No newline at end of file diff --git a/apps/app/src/stories/assets/addon-library.png b/apps/app/src/stories/assets/addon-library.png deleted file mode 100644 index 95deb38..0000000 Binary files a/apps/app/src/stories/assets/addon-library.png and /dev/null differ diff --git a/apps/app/src/stories/assets/assets.png b/apps/app/src/stories/assets/assets.png deleted file mode 100644 index cfba681..0000000 Binary files a/apps/app/src/stories/assets/assets.png and /dev/null differ diff --git a/apps/app/src/stories/assets/avif-test-image.avif b/apps/app/src/stories/assets/avif-test-image.avif deleted file mode 100644 index 530709b..0000000 Binary files a/apps/app/src/stories/assets/avif-test-image.avif and /dev/null differ diff --git a/apps/app/src/stories/assets/context.png b/apps/app/src/stories/assets/context.png deleted file mode 100644 index e5cd249..0000000 Binary files a/apps/app/src/stories/assets/context.png and /dev/null differ diff --git a/apps/app/src/stories/assets/discord.svg b/apps/app/src/stories/assets/discord.svg deleted file mode 100644 index d638958..0000000 --- a/apps/app/src/stories/assets/discord.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/app/src/stories/assets/docs.png b/apps/app/src/stories/assets/docs.png deleted file mode 100644 index a749629..0000000 Binary files a/apps/app/src/stories/assets/docs.png and /dev/null differ diff --git a/apps/app/src/stories/assets/figma-plugin.png b/apps/app/src/stories/assets/figma-plugin.png deleted file mode 100644 index 8f79b08..0000000 Binary files a/apps/app/src/stories/assets/figma-plugin.png and /dev/null differ diff --git a/apps/app/src/stories/assets/github.svg b/apps/app/src/stories/assets/github.svg deleted file mode 100644 index dc51352..0000000 --- a/apps/app/src/stories/assets/github.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/app/src/stories/assets/share.png b/apps/app/src/stories/assets/share.png deleted file mode 100644 index 8097a37..0000000 Binary files a/apps/app/src/stories/assets/share.png and /dev/null differ diff --git a/apps/app/src/stories/assets/styling.png b/apps/app/src/stories/assets/styling.png deleted file mode 100644 index d341e82..0000000 Binary files a/apps/app/src/stories/assets/styling.png and /dev/null differ diff --git a/apps/app/src/stories/assets/testing.png b/apps/app/src/stories/assets/testing.png deleted file mode 100644 index d4ac39a..0000000 Binary files a/apps/app/src/stories/assets/testing.png and /dev/null differ diff --git a/apps/app/src/stories/assets/theming.png b/apps/app/src/stories/assets/theming.png deleted file mode 100644 index 1535eb9..0000000 Binary files a/apps/app/src/stories/assets/theming.png and /dev/null differ diff --git a/apps/app/src/stories/assets/tutorials.svg b/apps/app/src/stories/assets/tutorials.svg deleted file mode 100644 index b492a9c..0000000 --- a/apps/app/src/stories/assets/tutorials.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/app/src/stories/assets/youtube.svg b/apps/app/src/stories/assets/youtube.svg deleted file mode 100644 index a7515d7..0000000 --- a/apps/app/src/stories/assets/youtube.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/app/src/stories/button.css b/apps/app/src/stories/button.css deleted file mode 100644 index 4fc38a2..0000000 --- a/apps/app/src/stories/button.css +++ /dev/null @@ -1,30 +0,0 @@ -.storybook-button { - display: inline-block; - cursor: pointer; - border: 0; - border-radius: 3em; - font-weight: 700; - line-height: 1; - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} -.storybook-button--primary { - background-color: #555ab9; - color: white; -} -.storybook-button--secondary { - box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; - background-color: transparent; - color: #333; -} -.storybook-button--small { - padding: 10px 16px; - font-size: 12px; -} -.storybook-button--medium { - padding: 11px 20px; - font-size: 14px; -} -.storybook-button--large { - padding: 12px 24px; - font-size: 16px; -} diff --git a/apps/app/src/stories/header.css b/apps/app/src/stories/header.css deleted file mode 100644 index d511c66..0000000 --- a/apps/app/src/stories/header.css +++ /dev/null @@ -1,32 +0,0 @@ -.storybook-header { - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - padding: 15px 20px; - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} - -.storybook-header svg { - display: inline-block; - vertical-align: top; -} - -.storybook-header h1 { - display: inline-block; - vertical-align: top; - margin: 6px 0 6px 10px; - font-weight: 700; - font-size: 20px; - line-height: 1; -} - -.storybook-header button + button { - margin-left: 10px; -} - -.storybook-header .welcome { - margin-right: 10px; - color: #333; - font-size: 14px; -} diff --git a/apps/app/src/stories/page.css b/apps/app/src/stories/page.css deleted file mode 100644 index 67f2bb2..0000000 --- a/apps/app/src/stories/page.css +++ /dev/null @@ -1,68 +0,0 @@ -.storybook-page { - margin: 0 auto; - padding: 48px 20px; - max-width: 600px; - color: #333; - font-size: 14px; - line-height: 24px; - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} - -.storybook-page h2 { - display: inline-block; - vertical-align: top; - margin: 0 0 4px; - font-weight: 700; - font-size: 32px; - line-height: 1; -} - -.storybook-page p { - margin: 1em 0; -} - -.storybook-page a { - color: inherit; -} - -.storybook-page ul { - margin: 1em 0; - padding-left: 30px; -} - -.storybook-page li { - margin-bottom: 8px; -} - -.storybook-page .tip { - display: inline-block; - vertical-align: top; - margin-right: 10px; - border-radius: 1em; - background: #e7fdd8; - padding: 4px 12px; - color: #357a14; - font-weight: 700; - font-size: 11px; - line-height: 12px; -} - -.storybook-page .tip-wrapper { - margin-top: 40px; - margin-bottom: 40px; - font-size: 13px; - line-height: 20px; -} - -.storybook-page .tip-wrapper svg { - display: inline-block; - vertical-align: top; - margin-top: 3px; - margin-right: 4px; - width: 12px; - height: 12px; -} - -.storybook-page .tip-wrapper svg path { - fill: #1ea7fd; -}