diff --git a/src/lib/components/base/Button.stories.ts b/src/lib/components/base/Button.stories.ts new file mode 100644 index 0000000..35018ee --- /dev/null +++ b/src/lib/components/base/Button.stories.ts @@ -0,0 +1,48 @@ +import type { Meta, StoryObj } from '@storybook/svelte'; + +import Button from './Button.svelte'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories +const meta = { + title: 'Base/Button', + component: Button, + tags: ['autodocs'], + argTypes: { + backgroundColor: { control: 'color' }, + size: { + control: { type: 'select' }, + options: ['small', 'medium', 'large'] + } + } +} satisfies Meta + + diff --git a/src/lib/components/display/Code.stories.svelte b/src/lib/components/display/Code.stories.svelte new file mode 100644 index 0000000..0f61a84 --- /dev/null +++ b/src/lib/components/display/Code.stories.svelte @@ -0,0 +1,31 @@ + + + + + + diff --git a/src/lib/components/display/Code.svelte b/src/lib/components/display/Code.svelte new file mode 100644 index 0000000..98db3a0 --- /dev/null +++ b/src/lib/components/display/Code.svelte @@ -0,0 +1,14 @@ + + +
{@html displayCode}
+ + diff --git a/src/lib/components/display/Doc.stories.ts b/src/lib/components/display/Doc.stories.ts new file mode 100644 index 0000000..4711d58 --- /dev/null +++ b/src/lib/components/display/Doc.stories.ts @@ -0,0 +1,46 @@ +import type { Meta, StoryObj } from '@storybook/svelte'; +import Doc from './Doc.svelte'; + +const meta = { + title: 'Display/Doc', + component: Doc, + tags: ['autodocs'] +} satisfies Meta; + +const minimalDoc = { + description: '-- n/a --', + doc: null +}; + +const docWithMarkdown = { + description: 'The description field of a Doc, summarising what the item does.', + doc: 'The Doc field of a doc, which can contain markdown.\n\nThe markdown should be rendered to inlude\n[links](https://github.com/DHARPA-project/kiara) and other **formatting things**. ' +}; + +export default meta; +type Story = StoryObj; + +/** + * You'll probably want to wrap this component in `
` to make it look good + */ +export const Default: Story = { + args: { + doc: docWithMarkdown + } +}; + +export const JustSummary: Story = { + args: { + doc: docWithMarkdown, + verbose: false + } +}; + +/** + * items with description = '-- n/a --' are just not rendered, because this information isn't useful to show to end users + */ +export const Minimal: Story = { + args: { + doc: minimalDoc + } +}; diff --git a/src/lib/display/Doc.svelte b/src/lib/components/display/Doc.svelte similarity index 79% rename from src/lib/display/Doc.svelte rename to src/lib/components/display/Doc.svelte index 9eaef77..2b30ee7 100644 --- a/src/lib/display/Doc.svelte +++ b/src/lib/components/display/Doc.svelte @@ -3,6 +3,9 @@ import sanitizeHtml from 'sanitize-html'; import { marked } from 'marked'; + /** + * The Documentation from a kiara item, an object with keys description (summarising the item) and doc (detailed documentation in markdown) + */ export let doc: Documentation; /** * Whether to show the full markdown documentation of the item, or just the summary diff --git a/src/lib/components/display/Foldable.stories.svelte b/src/lib/components/display/Foldable.stories.svelte new file mode 100644 index 0000000..d295a93 --- /dev/null +++ b/src/lib/components/display/Foldable.stories.svelte @@ -0,0 +1,37 @@ + + + + + + + { + const canvas = within(canvasElement); + // Content hidden by default + await expect(canvas.queryByText(content)).not.toBeVisible(); + await userEvent.click(canvas.getByRole('button')); + // click button, content visible + await expect(canvas.getByText(content)).toBeVisible(); + await userEvent.click(canvas.getByRole('button')); + // click button again, content hidden + await expect(canvas.getByText(content)).not.toBeVisible(); + }} +/> diff --git a/src/lib/components/display/Foldable.svelte b/src/lib/components/display/Foldable.svelte new file mode 100644 index 0000000..a6c142b --- /dev/null +++ b/src/lib/components/display/Foldable.svelte @@ -0,0 +1,49 @@ + + +
+
+ + +
+
+ + diff --git a/src/lib/components/display/GitHubLink.stories.svelte b/src/lib/components/display/GitHubLink.stories.svelte new file mode 100644 index 0000000..7e98830 --- /dev/null +++ b/src/lib/components/display/GitHubLink.stories.svelte @@ -0,0 +1,52 @@ + + + + + + { + const canvas = within(canvasElement); + await userEvent.hover(canvas.getByRole('link')); + }} +/> + + diff --git a/src/lib/components/display/GitHubLink.svelte b/src/lib/components/display/GitHubLink.svelte new file mode 100644 index 0000000..faaf70e --- /dev/null +++ b/src/lib/components/display/GitHubLink.svelte @@ -0,0 +1,28 @@ + + + + + View code on GitHub + + + diff --git a/src/lib/display/doc.test.ts b/src/lib/components/display/doc.test.ts similarity index 98% rename from src/lib/display/doc.test.ts rename to src/lib/components/display/doc.test.ts index 3ed61f5..cc6ee7c 100644 --- a/src/lib/display/doc.test.ts +++ b/src/lib/components/display/doc.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from 'vitest'; -import { Doc } from '../index.js'; +import { Doc } from '../../index.js'; import { render, screen } from '@testing-library/svelte'; describe('Doc', () => { diff --git a/src/lib/index.ts b/src/lib/index.ts index 45be618..109ef3d 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -1 +1,4 @@ -export { default as Doc } from './display/Doc.svelte'; +export { default as Doc } from './components/display/Doc.svelte'; +export { default as GitHubLink } from './components/display/GitHubLink.svelte'; +export { default as Button } from './components/base/Button.svelte'; +export { default as Code } from './components/display/Code.svelte'; diff --git a/src/lib/syntax-highlight.ts b/src/lib/syntax-highlight.ts new file mode 100644 index 0000000..794c173 --- /dev/null +++ b/src/lib/syntax-highlight.ts @@ -0,0 +1,12 @@ +import { getHighlighter } from 'shikiji'; + +const language = 'python'; +const theme = 'nord'; +const highlighter = await getHighlighter({ + themes: [theme], + langs: [language] +}); + +export function highlightPythonCode(code: string) { + return highlighter.codeToHtml(code.trim(), { lang: language, theme }); +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte new file mode 100644 index 0000000..2e511e0 --- /dev/null +++ b/src/routes/+layout.svelte @@ -0,0 +1,5 @@ + + + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 0a45b69..fb5fa7b 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,3 +1,20 @@ + +

Welcome to your library project

Create your package using @sveltejs/package and preview/showcase your work with SvelteKit

Visit kit.svelte.dev to read the documentation

+ + + +
+ +
+ + diff --git a/vite.config.ts b/vite.config.ts index 2c25ae3..3150812 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -12,5 +12,8 @@ export default defineConfig({ reporter: ['text', 'html'], include: ['src/lib/**'] } + }, + build: { + target: 'esnext' } });