mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2025-01-03 15:06:01 +03:00
replace storybook with histoire
This commit is contained in:
Nikita Galaiko
parent
42b3ec371e
commit
eef6c6374e
@ -17,5 +17,4 @@ yarn.lock
|
||||
/.vscode
|
||||
/src-tauri
|
||||
|
||||
#storybbok
|
||||
!.storybook
|
||||
/.histoire
|
||||
|
||||
4
.gitignore
vendored
4
.gitignore
vendored
@ -34,7 +34,5 @@ vite.config.ts.timestamp-*
|
||||
.git/gb-*
|
||||
src-tauri/data.txt
|
||||
|
||||
# storybook
|
||||
storybook-static
|
||||
|
||||
|
||||
/.histoire
|
||||
|
||||
@ -16,3 +16,5 @@ yarn.lock
|
||||
/.github
|
||||
/.vscode
|
||||
/src-tauri
|
||||
|
||||
/.histoire
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
import type { StorybookConfig } from '@storybook/sveltekit';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ['../src/**/*.stories.svelte'],
|
||||
addons: [
|
||||
'@storybook/addon-svelte-csf',
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-interactions'
|
||||
],
|
||||
framework: {
|
||||
name: '@storybook/sveltekit',
|
||||
options: {}
|
||||
},
|
||||
docs: {
|
||||
autodocs: true
|
||||
}
|
||||
};
|
||||
export default config;
|
||||
@ -1,3 +0,0 @@
|
||||
<script>
|
||||
window.global = window;
|
||||
</script>
|
||||
@ -1,25 +0,0 @@
|
||||
import type { Preview } from '@storybook/svelte';
|
||||
|
||||
import '../src/app.postcss';
|
||||
const preview: Preview = {
|
||||
parameters: {
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/
|
||||
}
|
||||
},
|
||||
backgrounds: {
|
||||
default: 'GitButler_1',
|
||||
values: [
|
||||
{
|
||||
name: 'GitButler_1',
|
||||
value: '#27272A'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default preview;
|
||||
@ -21,12 +21,12 @@ Now you should be able to run the app in development mode:
|
||||
$ pnpm tauri dev
|
||||
```
|
||||
|
||||
### Running Storybook
|
||||
### Running Stories
|
||||
|
||||
Storybook is our easy way to view our app components. Running the following command will launch Storybook in your default browser.
|
||||
Stories is our easy way to view our app components. Running the following command will launch in your default browser.
|
||||
|
||||
```bash
|
||||
$ pnpm storybook dev
|
||||
$ pnpm story:dev
|
||||
```
|
||||
|
||||
### Linting
|
||||
|
||||
7
histoire.config.ts
Normal file
7
histoire.config.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'histoire';
|
||||
import { HstSvelte } from '@histoire/plugin-svelte';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [HstSvelte()],
|
||||
setupFile: 'histoire.setup.ts'
|
||||
});
|
||||
1
histoire.setup.ts
Normal file
1
histoire.setup.ts
Normal file
@ -0,0 +1 @@
|
||||
import './src/app.postcss';
|
||||
17
package.json
17
package.json
@ -11,8 +11,9 @@
|
||||
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
||||
"format": "prettier --plugin-search-dir . --write .",
|
||||
"tauri": "tauri",
|
||||
"storybook": "storybook",
|
||||
"storybook:build": "storybook build"
|
||||
"story:dev": "histoire dev --open",
|
||||
"story:build": "histoire build",
|
||||
"story:preview": "histoire preview --open"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@codemirror/autocomplete": "^6.4.2",
|
||||
@ -32,6 +33,7 @@
|
||||
"@codemirror/language": "^6.6.0",
|
||||
"@codemirror/state": "^6.2.0",
|
||||
"@codemirror/view": "^6.9.2",
|
||||
"@histoire/plugin-svelte": "^0.16.1",
|
||||
"@lezer/common": "^1.0.2",
|
||||
"@lezer/highlight": "^1.1.3",
|
||||
"@lezer/javascript": "^1.4.1",
|
||||
@ -39,15 +41,6 @@
|
||||
"@replit/codemirror-lang-svelte": "^6.0.0",
|
||||
"@sentry/sveltekit": "^7.49.0",
|
||||
"@square/svelte-store": "^1.0.14",
|
||||
"@storybook/addon-essentials": "^7.0.7",
|
||||
"@storybook/addon-interactions": "^7.0.7",
|
||||
"@storybook/addon-links": "^7.0.7",
|
||||
"@storybook/addon-svelte-csf": "^3.0.2",
|
||||
"@storybook/blocks": "^7.0.7",
|
||||
"@storybook/svelte": "^7.0.7",
|
||||
"@storybook/sveltekit": "^7.0.7",
|
||||
"@storybook/testing-library": "^0.1.0",
|
||||
"@storybook/theming": "^7.0.7",
|
||||
"@sveltejs/adapter-static": "^2.0.0",
|
||||
"@sveltejs/kit": "^1.15.0",
|
||||
"@tauri-apps/api": "^1.2.0",
|
||||
@ -62,6 +55,7 @@
|
||||
"eslint": "^8.28.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"histoire": "^0.16.1",
|
||||
"inter-ui": "^3.19.3",
|
||||
"nanoevents": "^7.0.1",
|
||||
"nanoid": "^4.0.1",
|
||||
@ -73,7 +67,6 @@
|
||||
"prettier-plugin-tailwindcss": "^0.2.4",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"storybook": "next",
|
||||
"svelte": "^3.55.1",
|
||||
"svelte-check": "^3.0.1",
|
||||
"svelte-floating-ui": "^1.5.2",
|
||||
|
||||
6108
pnpm-lock.yaml
6108
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -1,199 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Meta, Story } from '@storybook/addon-svelte-csf';
|
||||
import { IconHome } from '../icons';
|
||||
|
||||
import Button from './Button.svelte';
|
||||
|
||||
const heights = ['basic', 'small'] as const;
|
||||
const kinds = ['filled', 'outlined', 'plain'] as const;
|
||||
</script>
|
||||
|
||||
<Meta title="GitButler/Button" component={Button} />
|
||||
|
||||
<Story name="Basic Button">
|
||||
<div class="flex flex-col gap-4">
|
||||
{#each heights as height}
|
||||
<div class="flex flex-col gap-2">
|
||||
{#each kinds as kind}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as loading}
|
||||
{#each [false, true] as disabled}
|
||||
<Button
|
||||
color="basic"
|
||||
{disabled}
|
||||
{kind}
|
||||
{height}
|
||||
{loading}
|
||||
on:click={() => alert('Clicked!')}
|
||||
>
|
||||
Button
|
||||
</Button>
|
||||
<Button
|
||||
color="basic"
|
||||
{disabled}
|
||||
{kind}
|
||||
{height}
|
||||
{loading}
|
||||
icon={IconHome}
|
||||
on:click={() => alert('Clicked!')}
|
||||
>
|
||||
Button with icon
|
||||
</Button>
|
||||
<Button
|
||||
color="basic"
|
||||
{disabled}
|
||||
{kind}
|
||||
{height}
|
||||
{loading}
|
||||
icon={IconHome}
|
||||
on:click={() => alert('Clicked!')}
|
||||
/>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="Primary Button">
|
||||
<div class="flex flex-col gap-4">
|
||||
{#each heights as height}
|
||||
<div class="flex flex-col gap-2">
|
||||
{#each kinds as kind}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as loading}
|
||||
{#each [false, true] as disabled}
|
||||
<Button
|
||||
color="primary"
|
||||
{disabled}
|
||||
{kind}
|
||||
{height}
|
||||
{loading}
|
||||
on:click={() => alert('Clicked!')}
|
||||
>
|
||||
Button
|
||||
</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
{disabled}
|
||||
{kind}
|
||||
{height}
|
||||
{loading}
|
||||
icon={IconHome}
|
||||
on:click={() => alert('Clicked!')}
|
||||
>
|
||||
Button with icon
|
||||
</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
{disabled}
|
||||
{kind}
|
||||
{height}
|
||||
{loading}
|
||||
icon={IconHome}
|
||||
on:click={() => alert('Clicked!')}
|
||||
/>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="Destructive Button">
|
||||
<div class="flex flex-col gap-4">
|
||||
{#each heights as height}
|
||||
<div class="flex flex-col gap-2">
|
||||
{#each kinds as kind}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as loading}
|
||||
{#each [false, true] as disabled}
|
||||
<Button
|
||||
color="destructive"
|
||||
{disabled}
|
||||
{kind}
|
||||
{height}
|
||||
{loading}
|
||||
on:click={() => alert('Clicked!')}
|
||||
>
|
||||
Button
|
||||
</Button>
|
||||
<Button
|
||||
color="destructive"
|
||||
{disabled}
|
||||
{kind}
|
||||
{height}
|
||||
{loading}
|
||||
icon={IconHome}
|
||||
on:click={() => alert('Clicked!')}
|
||||
>
|
||||
Button with icon
|
||||
</Button>
|
||||
<Button
|
||||
color="destructive"
|
||||
{disabled}
|
||||
{kind}
|
||||
{height}
|
||||
{loading}
|
||||
icon={IconHome}
|
||||
on:click={() => alert('Clicked!')}
|
||||
/>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="Purple Button">
|
||||
<div class="flex flex-col gap-4">
|
||||
{#each heights as height}
|
||||
<div class="flex flex-col gap-2">
|
||||
{#each kinds as kind}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as loading}
|
||||
{#each [false, true] as disabled}
|
||||
<Button
|
||||
color="purple"
|
||||
{disabled}
|
||||
{kind}
|
||||
{height}
|
||||
{loading}
|
||||
on:click={() => alert('Clicked!')}
|
||||
>
|
||||
Button
|
||||
</Button>
|
||||
<Button
|
||||
color="purple"
|
||||
{disabled}
|
||||
{kind}
|
||||
{height}
|
||||
{loading}
|
||||
icon={IconHome}
|
||||
on:click={() => alert('Clicked!')}
|
||||
>
|
||||
Button with icon
|
||||
</Button>
|
||||
<Button
|
||||
color="purple"
|
||||
{disabled}
|
||||
{kind}
|
||||
{height}
|
||||
{loading}
|
||||
icon={IconHome}
|
||||
on:click={() => alert('Clicked!')}
|
||||
/>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Story>
|
||||
64
src/lib/components/Button/Button.story.svelte
Normal file
64
src/lib/components/Button/Button.story.svelte
Normal file
@ -0,0 +1,64 @@
|
||||
<script lang="ts">
|
||||
import { IconHome } from '../icons';
|
||||
|
||||
import Button from './Button.svelte';
|
||||
|
||||
export let Hst: import('@histoire/plugin-svelte').Hst;
|
||||
|
||||
let colors = [
|
||||
{ label: 'basic', value: 'basic' as const },
|
||||
{ label: 'primary', value: 'primary' as const },
|
||||
{ label: 'destructive', value: 'destructive' as const },
|
||||
{ label: 'purple', value: 'purple' as const }
|
||||
];
|
||||
let kinds = [
|
||||
{ label: 'filled', value: 'filled' as const },
|
||||
{ label: 'outlined', value: 'outlined' as const },
|
||||
{ label: 'plain', value: 'plain' as const }
|
||||
];
|
||||
let widths = [
|
||||
{ label: 'basic', value: 'basic' as const },
|
||||
{ label: 'full-width', value: 'full-width' as const }
|
||||
];
|
||||
let heights = [
|
||||
{ label: 'basic', value: 'basic' as const },
|
||||
{ label: 'small', value: 'small' as const }
|
||||
];
|
||||
|
||||
let label = 'Button';
|
||||
let height = heights[0].value;
|
||||
let withIcon = false;
|
||||
let loading = false;
|
||||
let disabled = false;
|
||||
let color = colors[0].value;
|
||||
let kind = kinds[0].value;
|
||||
let width = widths[0].value;
|
||||
</script>
|
||||
|
||||
<Hst.Story title="Button">
|
||||
<Button
|
||||
{color}
|
||||
{kind}
|
||||
icon={withIcon ? IconHome : undefined}
|
||||
{loading}
|
||||
{width}
|
||||
{disabled}
|
||||
{height}
|
||||
on:click={() => alert('clicked')}
|
||||
>
|
||||
{#if label}
|
||||
{label}
|
||||
{/if}
|
||||
</Button>
|
||||
|
||||
<svelte:fragment slot="controls">
|
||||
<Hst.Text bind:value={label} title="label" />
|
||||
<Hst.Checkbox bind:value={withIcon} title="with icon" />
|
||||
<Hst.Checkbox bind:value={disabled} title="disabled" />
|
||||
<Hst.Checkbox bind:value={loading} title="loading" />
|
||||
<Hst.Radio options={heights} bind:value={height} title="height" />
|
||||
<Hst.Radio options={colors} bind:value={color} title="color" />
|
||||
<Hst.Radio options={kinds} bind:value={kind} title="kind" />
|
||||
<Hst.Radio options={widths} bind:value={width} title="width" />
|
||||
</svelte:fragment>
|
||||
</Hst.Story>
|
||||
@ -11,13 +11,13 @@
|
||||
export let icon: ComponentType | undefined = undefined;
|
||||
export let loading = false;
|
||||
|
||||
let filled = kind === 'filled';
|
||||
let outlined = kind === 'outlined';
|
||||
$: filled = kind === 'filled';
|
||||
$: outlined = kind === 'outlined';
|
||||
|
||||
let element: HTMLAnchorElement | HTMLButtonElement;
|
||||
|
||||
onMount(() => {
|
||||
element.ariaLabel = element.innerText.trim();
|
||||
element.ariaLabel = element.innerText?.trim();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,44 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Meta, Story } from '@storybook/addon-svelte-csf';
|
||||
|
||||
import ButtonGroup from './ButtonGroup.svelte';
|
||||
|
||||
const noop = () => {};
|
||||
</script>
|
||||
|
||||
<Meta title="GitButler/ButtonGroup" component={ButtonGroup} />
|
||||
|
||||
<Story name="Two buttons">
|
||||
<ButtonGroup leftLabel="Cancel" rightLabel="Submit" leftAction={noop} rightAction={noop} />
|
||||
</Story>
|
||||
|
||||
<Story name="Two buttons wide">
|
||||
<ButtonGroup
|
||||
leftLabel="Cancel"
|
||||
rightLabel="Submit"
|
||||
width="full-width"
|
||||
leftAction={noop}
|
||||
rightAction={noop}
|
||||
/>
|
||||
</Story>
|
||||
|
||||
<Story name="Three buttons">
|
||||
<ButtonGroup
|
||||
leftLabel="Cancel"
|
||||
rightLabel="Submit"
|
||||
middleLabel="Middle"
|
||||
leftAction={noop}
|
||||
rightAction={noop}
|
||||
/>
|
||||
</Story>
|
||||
|
||||
<Story name="Three buttons wide">
|
||||
<ButtonGroup
|
||||
leftLabel="Cancel"
|
||||
rightLabel="Submit"
|
||||
middleLabel="Middle"
|
||||
width="full-width"
|
||||
leftAction={noop}
|
||||
rightAction={noop}
|
||||
/>
|
||||
</Story>
|
||||
41
src/lib/components/ButtonGroup/ButtonGroup.story.svelte
Normal file
41
src/lib/components/ButtonGroup/ButtonGroup.story.svelte
Normal file
@ -0,0 +1,41 @@
|
||||
<script lang="ts">
|
||||
import ButtonGroup from './ButtonGroup.svelte';
|
||||
|
||||
export let Hst: import('@histoire/plugin-svelte').Hst;
|
||||
|
||||
const noop = () => {};
|
||||
|
||||
let widths = [
|
||||
{ label: 'basic', value: 'basic' as const },
|
||||
{ label: 'full-width', value: 'full-width' as const }
|
||||
];
|
||||
|
||||
let width = widths[0].value;
|
||||
</script>
|
||||
|
||||
<Hst.Story title="Button Group">
|
||||
<svelte:fragment slot="controls">
|
||||
<Hst.Radio options={widths} bind:value={width} title="width" />
|
||||
</svelte:fragment>
|
||||
|
||||
<Hst.Variant title="Two buttons">
|
||||
<ButtonGroup
|
||||
{width}
|
||||
leftLabel="Cancel"
|
||||
rightLabel="Submit"
|
||||
leftAction={noop}
|
||||
rightAction={noop}
|
||||
/>
|
||||
</Hst.Variant>
|
||||
|
||||
<Hst.Variant title="Three buttons">
|
||||
<ButtonGroup
|
||||
{width}
|
||||
leftLabel="Cancel"
|
||||
rightLabel="Submit"
|
||||
middleLabel="Middle"
|
||||
leftAction={noop}
|
||||
rightAction={noop}
|
||||
/>
|
||||
</Hst.Variant>
|
||||
</Hst.Story>
|
||||
@ -1,25 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Meta, Story } from '@storybook/addon-svelte-csf';
|
||||
|
||||
import Dialog from './Dialog.svelte';
|
||||
import Button from '../Button/Button.svelte';
|
||||
|
||||
let dialog: Dialog;
|
||||
</script>
|
||||
|
||||
<Meta title="GitButler/Dialog" component={Dialog} />
|
||||
|
||||
<Story name="Dialog with title only">
|
||||
<Button on:click={dialog.show}>Open Dialog</Button>
|
||||
<Dialog bind:this={dialog} />
|
||||
</Story>
|
||||
|
||||
<Story name="Dialog with content">
|
||||
<Button on:click={dialog.show}>Open Dialog</Button>
|
||||
<Dialog bind:this={dialog}>
|
||||
<p class="w-[346px]">
|
||||
GitButler offers support for generating Git commits automatically. To use this feature, you
|
||||
will need to sync with GitButler cloud.
|
||||
</p>
|
||||
</Dialog>
|
||||
</Story>
|
||||
31
src/lib/components/Dialog/Dialog.story.svelte
Normal file
31
src/lib/components/Dialog/Dialog.story.svelte
Normal file
@ -0,0 +1,31 @@
|
||||
<script lang="ts">
|
||||
import Dialog from './Dialog.svelte';
|
||||
import Button from '../Button/Button.svelte';
|
||||
|
||||
export let Hst: import('@histoire/plugin-svelte').Hst;
|
||||
|
||||
let dialog: Dialog;
|
||||
|
||||
let title = 'Title';
|
||||
</script>
|
||||
|
||||
<Hst.Story title="Dialog">
|
||||
<Button on:click={dialog.show}>Open Dialog</Button>
|
||||
|
||||
<Hst.Variant title="No content">
|
||||
<Dialog bind:this={dialog}>
|
||||
<svelte:fragment slot="title">
|
||||
{title}
|
||||
</svelte:fragment>
|
||||
</Dialog>
|
||||
</Hst.Variant>
|
||||
|
||||
<Hst.Variant title="With content">
|
||||
<Dialog bind:this={dialog}>
|
||||
<svelte:fragment slot="title">
|
||||
{title}
|
||||
</svelte:fragment>
|
||||
<p>Some content</p>
|
||||
</Dialog>
|
||||
</Hst.Variant>
|
||||
</Hst.Story>
|
||||
@ -1,60 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Meta, Story } from '@storybook/addon-svelte-csf';
|
||||
|
||||
import Link from './Link.svelte';
|
||||
|
||||
const content = [
|
||||
['https://gitbutler.com', 'External link'],
|
||||
['#', 'Internal link']
|
||||
] as [string, string][];
|
||||
</script>
|
||||
|
||||
<Meta title="GitButler/Link" component={Link} />
|
||||
|
||||
<Story name="Basic Link">
|
||||
<div class="flex gap-2">
|
||||
<div class="flex flex-col gap-2">
|
||||
{#each content as [href, label]}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Link {href} target="_blank" role="basic" {disabled}>
|
||||
{label}
|
||||
</Link>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="Primary Link">
|
||||
<div class="flex gap-2">
|
||||
<div class="flex flex-col gap-2">
|
||||
{#each content as [href, label]}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Link {href} target="_blank" role="primary" {disabled}>
|
||||
{label}
|
||||
</Link>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
|
||||
<Story name="Destructive Link">
|
||||
<div class="flex gap-2">
|
||||
<div class="flex flex-col gap-2">
|
||||
{#each content as [href, label]}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Link {href} target="_blank" role="destructive" {disabled}>
|
||||
{label}
|
||||
</Link>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</Story>
|
||||
32
src/lib/components/Link/Link.story.svelte
Normal file
32
src/lib/components/Link/Link.story.svelte
Normal file
@ -0,0 +1,32 @@
|
||||
<script lang="ts">
|
||||
import Link from './Link.svelte';
|
||||
|
||||
export let Hst: import('@histoire/plugin-svelte').Hst;
|
||||
|
||||
const roles = [
|
||||
{ label: 'basic', value: 'basic' as const },
|
||||
{ label: 'primary', value: 'primary' as const },
|
||||
{ label: 'destructive', value: 'destructive' as const }
|
||||
];
|
||||
let targets = ['_blank', '_self', '_parent', '_top'] as const;
|
||||
|
||||
let role = roles[0].value;
|
||||
let text = 'Link';
|
||||
let href = 'https://gitbutler.com';
|
||||
let disabled = false;
|
||||
let target = targets[0];
|
||||
</script>
|
||||
|
||||
<Hst.Story title="Link">
|
||||
<svelte:fragment slot="controls">
|
||||
<Hst.Checkbox bind:value={disabled} title="disabled" />
|
||||
<Hst.Text bind:value={text} title="text" />
|
||||
<Hst.Radio options={roles} bind:value={role} title="role" />
|
||||
<Hst.Text bind:value={href} title="href" />
|
||||
<Hst.Select options={targets} bind:value={target} title="target" />
|
||||
</svelte:fragment>
|
||||
|
||||
<Link {role} {href} {disabled}>
|
||||
{text}
|
||||
</Link>
|
||||
</Hst.Story>
|
||||
@ -11,10 +11,10 @@
|
||||
let element: HTMLAnchorElement | HTMLButtonElement;
|
||||
|
||||
onMount(() => {
|
||||
element.ariaLabel = element.innerText.trim();
|
||||
element.ariaLabel = element.innerText?.trim();
|
||||
});
|
||||
|
||||
const isExternal = href?.startsWith('http');
|
||||
$: isExternal = href?.startsWith('http');
|
||||
</script>
|
||||
|
||||
<a {href} {target} {rel} class={role} bind:this={element} class:disabled on:click>
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Meta, Story } from '@storybook/addon-svelte-csf';
|
||||
|
||||
import Tooltip from './Tooltip.svelte';
|
||||
</script>
|
||||
|
||||
<Meta title="GitButler/Tooltip" component={Tooltip} />
|
||||
|
||||
<Story name="text with tooltip">
|
||||
<Tooltip label="This is a tooltip">
|
||||
<span class="text-zinc-50">Hover me!</span>
|
||||
</Tooltip>
|
||||
</Story>
|
||||
17
src/lib/components/Tooltip/Tooltip.story.svelte
Normal file
17
src/lib/components/Tooltip/Tooltip.story.svelte
Normal file
@ -0,0 +1,17 @@
|
||||
<script lang="ts">
|
||||
import Tooltip from './Tooltip.svelte';
|
||||
|
||||
export let Hst: import('@histoire/plugin-svelte').Hst;
|
||||
|
||||
let label = 'This is a tooltip';
|
||||
</script>
|
||||
|
||||
<Hst.Story title="Tooltip">
|
||||
<Tooltip {label}>
|
||||
<span class="text-zinc-50">Hover me!</span>
|
||||
</Tooltip>
|
||||
|
||||
<svelte:fragment slot="controls">
|
||||
<Hst.Text bind:value={label} title="label" />
|
||||
</svelte:fragment>
|
||||
</Hst.Story>
|
||||
Loading…
Reference in New Issue
Block a user