@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/docs/contributing/story-recipes/story-with-custom-docs.mdx

@@ -1,130 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import { parameters } from '../../utils/docsPage.js';
-
-import SourceCodeImg from './source-code.png';
-
-import '../../docStyles.scss';
-
-<Meta
-  title="Contributing/Recipes: Story with custom docs"
-  parameters={{ ...parameters }}
-/>
-
-# Recipes: Story with custom docs
-
-You can add custom markdown to your story page by importing and using markdown files.
-
-First, create a markdown file in a `stories` directory in your component folder like this:
-
-```
-YourComponent/
-  YourComponent.svelte
-  YourComponent.stories.svelte
-  stories/
-    docs/
-      component.md
-      someStory.md
-```
-
-Now, import your markdown file in your story page component and attach it to either the `Meta` (for the top docs that introduce your component) or any individual `Story` using one of our handy docs utils.
-
-```svelte
-<!-- YourComponent.stories.svelte -->
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  import YourComponent from './YourComponent.svelte';
-
-  // Import markdown files.
-  // Note: the "?raw" in the imports below is important!!
-  import componentDocs from './stories/docs/component.md?raw';
-  import someStoryDocs from './stories/docs/someStory.md?raw';
-
-  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams';
-
-  const meta = {
-    ...withComponentDocs(componentDocs),
-  };
-</script>
-
-<Meta title="Components/YourComponent" component="{YourComponent}" {...meta} />
-
-<template let:args>
-  <YourComponent {...args} />
-</template>
-
-<!-- The first story will use the component docs in Meta... -->
-<Story name="Basic" args="{{ width: 'normal' }}" />
-
-<!-- Additional stories can use other docs now. -->
-<Story
-  name="Another story"
-  args="{{ width: 'normal' }}"
-  {...withStoryDocs(someStoryDocs)}
-/>
-```
-
-## Customising copyable source code
-
-If you need to, you can customise the "Copy" source code available below a component story's iframe window.
-
-<img className="feature" src={SourceCodeImg} width="80%" />
-
-First, add a snippet file in a `stories` directory in your component folder like this:
-
-```
-YourComponent/
-  YourComponent.svelte
-  YourComponent.stories.svelte
-  stories/
-    snippets/
-      default.svelte
-```
-
-Now, import your snippet file in your story page component and attach it to any individual `Story` using our docs utils.
-
-```svelte
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  import YourComponent from './YourComponent.svelte';
-
-  // Import snippet file.
-  // Note: the "?raw" in the import below is important!!
-  import defaultSource from './stories/snippets/default.svelte?raw';
-
-  import { withSource } from '$docs/utils/withParams';
-
-  const meta = {
-    title: 'Components/YourComponent',
-    component: YourComponent,
-  };
-</script>
-
-<meta {...meta} />
-
-<template let:args>
-  <YourComponent {...args} />
-</template>
-
-<!-- Pass source in inside an object keyed by your snippet's language, e.g., svelte, scss, etc. -->
-<Story
-  name="Basic"
-  args="{{ width: 'normal' }}"
-  {...withSource({ svelte: defaultSnippet })}
-/>
-```
-
-> **Pro tip:** If you pass your source code in directly, the code won't change prop values when users play with Storybook's built-in [controls panel](https://storybook.js.org/docs/svelte/essentials/controls), so it's best to start with a default example using the generated source code.
-
-If you're adding source code AND custom docs to a story, you can chain `withSource` and `withComponentDocs` like this:
-
-```svelte
-<!-- ... -->
-
-<Story
-  name="Extra wide"
-  args="{{ width: 'wider' }}"
-  {...withComponentDocs(componentDocs, withSource({ svelte: defaultSnippet }))}
-/>
-```

package/dist/docs/contributing/story-recipes/story-with-media.mdx

@@ -1,50 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import { parameters } from '../../utils/docsPage.js';
-
-<Meta
-  title="Contributing/Recipes: Story with media"
-  parameters={{ ...parameters }}
-/>
-
-# Recipes: Story with media
-
-To use media files in your stories, import them directly.
-
-First, add a media file in a `stories` directory in your component folder like this:
-
-```
-YourComponent/
-  YourComponent.svelte
-  YourComponent.stories.svelte
-  stories/
-    imgs/
-      myImage.jpg
-```
-
-Now, import your media file directly in your code, which will resolve to the URL of the file.
-
-```svelte
-<!-- YourComponent.stories.svelte -->
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  import YourComponent from './YourComponent.svelte';
-
-  // 🖼️ Import media you need in stories directly in code!
-  import myImageSrc from './stories/imgs/myImage.jpg';
-</script>
-
-<Meta title="Components/YourComponent" component="{YourComponent}" />
-
-<template let:args>
-  <YourComponent {...args} />
-</template>
-
-<Story
-  name="Basic"
-  args="{{
-    src: myImageSrc,
-    altText: 'My image in the component',
-  }}"
-/>
-```

package/dist/docs/contributing/writing-docs-stories.mdx

@@ -1,35 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import { parameters } from '../utils/docsPage.js';
-
-<Meta title="Contributing/Writing docs pages" parameters={{ ...parameters }} />
-
-# Writing docs-only pages
-
-You can write docs-only pages in simple markdown using MDX format.
-
-> MDX is _technically_ a mixture of markdown and React. Unforuntately, there isn't a native Svelte option for markdown pages in Storybook yet. Good news, though, you won't _really_ need to know React to use it. Just write in markdown and follow the template below for the React bits you'll need.
-
-### Quickstart
-
-Make a new `.stories.mdx` file for your docs page in the `src/docs/` directory.
-
-```
-src/
-  docs/
-    my-docs.stories.mdx
-```
-
-Add the following at the top of the file and customise the `title` property in the `Meta` component for where you want the page to live in the Storybook nav.
-
-```markdown
-import { Meta } from '@storybook/addon-docs';
-import { parameters } from '$docs/utils/docsPage.js';
-
-<Meta title="SCSS/Special rules" parameters={{ ...parameters }} />
-
-# My docs page
-
-Your docs TK...
-```
-
-From there, write whatever you need in markdown.

package/dist/docs/utils/withParams.d.ts

@@ -1,15 +0,0 @@
-export function withSource(source: object, otherOptions?: object): {
-    parameters: {
-        docs: any;
-    };
-};
-export function withStoryDocs(storyDocs: string, otherOptions?: object): {
-    parameters: {
-        docs: any;
-    };
-};
-export function withComponentDocs(componentDocs: string, otherOptions?: object): {
-    parameters: {
-        docs: any;
-    };
-};

package/dist/docs/utils/withParams.js

@@ -1,46 +0,0 @@
-/**
- * Use custom source code in the "Show code" pull down.
- * @param {object} source Source code object, where key is the language of the source code and value is the code string.
- * @param {object} otherOptions Other props object options, allowing chaining with other methods like withStoryDocs
- * @returns props object including parameters
- */
-export const withSource = (source, otherOptions = {}) => {
-  const language = Object.keys(source)[0];
-  const code = source[language];
-  const docs = {
-    ...otherOptions?.parameters?.docs,
-    source: { code, language },
-  };
-  const parameters = { docs };
-  return { parameters };
-};
-
-/**
- * Add custom documentation to a story.
- * @param {string} storyDocs Markdown string of docs
- * @param {object} otherOptions Other props object options, allowing chaining with other methods like withSource
- * @returns props object including parameters
- */
-export const withStoryDocs = (storyDocs, otherOptions = {}) => {
-  const docs = {
-    ...otherOptions?.parameters?.docs,
-    description: { story: storyDocs },
-  };
-  const parameters = { docs };
-  return { parameters };
-};
-
-/**
- * Add custom documentation to the top of the component docs page.
- * @param {string} componentDocs Markdown string of docs
- * @param {object} otherOptions Other props object options, allowing chaining with other methods like withSource
- * @returns props object including parameters
- */
-export const withComponentDocs = (componentDocs, otherOptions = {}) => {
-  const docs = {
-    ...otherOptions?.parameters?.docs,
-    description: { component: componentDocs },
-  };
-  const parameters = { docs };
-  return { parameters };
-};