Merge remote-tracking branch 'origin/next' into nested-addons

.circleci/config.yml

@@ -80,7 +80,16 @@ commands:
               echo "🏁 The PR isn't labelled with '<< parameters.label >>' so this job will end at the current step."
               circleci-agent step halt
             fi
-
+  cancel-workflow-on-failure:
+    description: 'Cancels the entire workflow in case the previous step has failed'
+    steps:
+      - run:
+          name: Cancel current workflow
+          when: on_fail
+          command: |
+            echo "Canceling workflow as previous step resulted in failure."
+            echo "To execute all checks locally, please run yarn ci-tests"
+            curl -X POST --header "Content-Type: application/json" "https://circleci.com/api/v2/workflow/${CIRCLE_WORKFLOW_ID}/cancel?circle-token=${WORKFLOW_CANCELER}"
 jobs:
   build:
     executor:
@@ -98,6 +107,11 @@ jobs:
           command: |
             yarn task --task compile --start-from=auto --no-link --debug
             git diff --exit-code
+      - run:
+          name: Publish to Verdaccio
+          command: |
+            cd code
+            yarn local-registry --publish
       - save_cache:
           name: Save Yarn cache
           key: build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
@@ -116,23 +130,6 @@ jobs:
             - code/ui
             - code/renderers
             - code/presets
-  publish:
-    executor:
-      class: small
-      name: sb_node_16_classic
-    steps:
-      - git-shallow-clone/checkout_advanced:
-          clone_options: '--depth 1 --verbose'
-      - attach_workspace:
-          at: .
-      - run:
-          name: running local registry
-          command: |
-            cd code
-            yarn local-registry --publish
-      - persist_to_workspace:
-          root: .
-          paths:
             - .verdaccio-cache
   cra-bench:
     executor:
@@ -228,6 +225,7 @@ jobs:
           command: |
             cd code
             yarn lint
+      - cancel-workflow-on-failure
   check:
     executor:
       class: xlarge
@@ -242,6 +240,7 @@ jobs:
           command: |
             yarn task --task check --start-from=auto --no-link --debug
             git diff --exit-code
+      - cancel-workflow-on-failure
   script-unit-tests:
     executor: sb_node_16_browsers
     steps:
@@ -256,6 +255,7 @@ jobs:
             yarn test --coverage --ci
       - store_test_results:
           path: scripts/junit.xml
+      - cancel-workflow-on-failure
   unit-tests:
     executor:
       class: xlarge
@@ -276,6 +276,7 @@ jobs:
           root: .
           paths:
             - code/coverage
+      - cancel-workflow-on-failure
   coverage:
     executor:
       class: small
@@ -463,14 +464,11 @@ workflows:
       equal: [ daily-tests, << pipeline.parameters.workflow >> ]
     jobs:
       - build
-      - publish:
-          requires:
-            - build
       - create-sandboxes:
           parallelism: 24
           cadence: "daily"
           requires:
-            - publish
+            - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
@@ -517,19 +515,16 @@ workflows:
       - coverage:
           requires:
             - unit-tests
-      - publish:
-          requires:
-            - build
       - cra-bench:
           requires:
-            - publish
+            - build
       - react-vite-bench:
           requires:
-            - publish
+            - build
       ## new workflow
       - create-sandboxes:
           requires:
-            - publish
+            - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes

MIGRATION.md

@@ -39,6 +39,7 @@
     - [MDX2 upgrade](#mdx2-upgrade)
     - [Dropped source loader / storiesOf static snippets](#dropped-source-loader--storiesof-static-snippets)
     - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
+    - [Autoplay in docs](#autoplay-in-docs)
   - [7.0 Deprecations](#70-deprecations)
     - [`Story` type deprecated](#story-type-deprecated)
     - [`ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated)
@@ -780,6 +781,12 @@ module.exports = {
 
 Storybook Docs 5.x shipped with instructions for how to manually configure webpack and storybook without the use of Storybook's "presets" feature. Over time, these docs went out of sync. Now in Storybook 7 we have removed support for manual configuration entirely.
 
+#### Autoplay in docs
+
+Running play functions in docs is generally tricky, as they can steal focus and cause the window to scroll. Consequently, we've disabled play functions in docs by default.
+
+If your story depends on a play function to render correctly, _and_ you are confident the function autoplaying won't mess up your docs, you can set `parameters.docs.autoplay = true` to have it auto play.
+
 ### 7.0 Deprecations
 
 #### `Story` type deprecated

code/addons/docs/template/stories/docspage/autoplay.stories.ts

@@ -0,0 +1,33 @@
+import globalThis from 'global';
+import { expect } from '@storybook/jest';
+import { within } from '@storybook/testing-library';
+
+export default {
+  component: globalThis.Components.Pre,
+  tags: ['docsPage'],
+  args: { text: 'Play has not run' },
+  parameters: { chromatic: { disable: true } },
+};
+
+// Should not autoplay
+export const NoAutoplay = {
+  play: async ({ viewMode, canvasElement }) => {
+    const pre = await within(canvasElement).findByText('Play has not run');
+    if (viewMode === 'docs') {
+      pre.innerText = 'Play should not have run!';
+      // Sort of pointless
+      expect(viewMode).not.toBe('docs');
+    } else {
+      pre.innerText = 'Play has run';
+    }
+  },
+};
+
+// Should autoplay
+export const Autoplay = {
+  parameters: { docs: { autoplay: true } },
+  play: async ({ canvasElement }) => {
+    const pre = await within(canvasElement).findByText('Play has not run');
+    pre.innerText = 'Play has run';
+  },
+};

code/e2e-tests/addon-docs.spec.ts

@@ -40,4 +40,16 @@ test.describe('addon-docs', () => {
       await expect(text).not.toMatch(/^\(args\) => /);
     }
   });
+
+  test('should not run autoplay stories without parameter', async ({ page }) => {
+    const sbPage = new SbPage(page);
+    await sbPage.navigateToStory('addons/docs/docspage/autoplay', 'docs');
+
+    const root = sbPage.previewRoot();
+    const autoplayPre = root.locator('#story--addons-docs-docspage-autoplay--autoplay pre');
+    await expect(autoplayPre).toHaveText('Play has run');
+
+    const noAutoplayPre = root.locator('#story--addons-docs-docspage-autoplay--no-autoplay pre');
+    await expect(noAutoplayPre).toHaveText('Play has not run');
+  });
 });

code/frameworks/angular/src/client/angular-beta/StorybookModule.ts

@@ -7,6 +7,7 @@ import { storyPropsProvider } from './StorybookProvider';
 import { isComponentAlreadyDeclaredInModules } from './utils/NgModulesAnalyzer';
 import { isDeclarable, isStandaloneComponent } from './utils/NgComponentAnalyzer';
 import { createStorybookWrapperComponent } from './StorybookWrapperComponent';
+import { computesTemplateFromComponent } from './ComputesTemplateFromComponent';
 
 export const getStorybookModuleMetadata = (
   {
@@ -21,7 +22,12 @@ export const getStorybookModuleMetadata = (
   storyProps$: Subject<ICollection>
 ): NgModule => {
   const { props, styles, moduleMetadata = {} } = storyFnAngular;
-  const { template } = storyFnAngular;
+  let { template } = storyFnAngular;
+
+  const hasTemplate = !hasNoTemplate(template);
+  if (!hasTemplate && component) {
+    template = computesTemplateFromComponent(component, props, '');
+  }
 
   /**
    * Create a component that wraps generated template and gives it props
@@ -68,3 +74,7 @@ export const createStorybookModule = (ngModule: NgModule): Type<unknown> => {
   class StorybookModule {}
   return StorybookModule;
 };
+
+function hasNoTemplate(template: string | null | undefined): template is undefined {
+  return template === null || template === undefined;
+}

code/lib/preview-web/src/Preview.tsx

@@ -31,6 +31,7 @@ import type {
 } from '@storybook/types';
 import { StoryStore } from '@storybook/store';
 
+import type { StoryRenderOptions } from './render/StoryRender';
 import { StoryRender } from './render/StoryRender';
 import type { TemplateDocsRender } from './render/TemplateDocsRender';
 import type { StandaloneDocsRender } from './render/StandaloneDocsRender';
@@ -304,7 +305,11 @@ export class Preview<TFramework extends AnyFramework> {
   // main to be consistent with the previous behaviour. In the future,
   // we will change it to go ahead and load the story, which will end up being
   // "instant", although async.
-  renderStoryToElement(story: Store_Story<TFramework>, element: HTMLElement) {
+  renderStoryToElement(
+    story: Store_Story<TFramework>,
+    element: HTMLElement,
+    options: StoryRenderOptions
+  ) {
     if (!this.renderToDOM)
       throw new Error(`Cannot call renderStoryToElement before initialization`);
 
@@ -315,6 +320,7 @@ export class Preview<TFramework extends AnyFramework> {
       this.inlineStoryCallbacks(story.id),
       story.id,
       'docs',
+      options,
       story
     );
     render.renderToElement(element);

code/lib/preview-web/src/docs-context/DocsContextProps.ts

@@ -8,6 +8,7 @@ import type {
   StoryName,
 } from '@storybook/types';
 import type { Channel } from '@storybook/channels';
+import type { StoryRenderOptions } from '../render/StoryRender';
 
 export interface DocsContextProps<TFramework extends AnyFramework = AnyFramework> {
   /**
@@ -54,7 +55,8 @@ export interface DocsContextProps<TFramework extends AnyFramework = AnyFramework
    */
   renderStoryToElement: (
     story: Store_Story<TFramework>,
-    element: HTMLElement
+    element: HTMLElement,
+    options: StoryRenderOptions
   ) => () => Promise<void>;
 
   /**

code/lib/preview-web/src/render/Render.ts

@@ -1,4 +1,5 @@
 import type { StoryId, AnyFramework } from '@storybook/types';
+import type { StoryRenderOptions } from './StoryRender';
 
 export type RenderType = 'story' | 'docs';
 
@@ -17,7 +18,11 @@ export interface Render<TFramework extends AnyFramework> {
   disableKeyListeners: boolean;
   teardown?: (options: { viewModeChanged: boolean }) => Promise<void>;
   torndown: boolean;
-  renderToElement: (canvasElement: HTMLElement, renderStoryToElement?: any) => Promise<void>;
+  renderToElement: (
+    canvasElement: HTMLElement,
+    renderStoryToElement?: any,
+    options?: StoryRenderOptions
+  ) => Promise<void>;
 }
 
 export const PREPARE_ABORTED = new Error('prepareAborted');

code/lib/preview-web/src/render/StoryRender.test.ts

@@ -50,4 +50,56 @@ describe('StoryRender', () => {
 
     await expect(preparePromise).rejects.toThrowError(PREPARE_ABORTED);
   });
+
+  it('does run play function if passed autoplay=true', async () => {
+    const story = {
+      id: 'id',
+      title: 'title',
+      name: 'name',
+      tags: [],
+      applyLoaders: jest.fn(),
+      unboundStoryFn: jest.fn(),
+      playFunction: jest.fn(),
+    };
+
+    const render = new StoryRender(
+      new Channel(),
+      { getStoryContext: () => ({}) } as any,
+      jest.fn() as any,
+      {} as any,
+      entry.id,
+      'story',
+      { autoplay: true },
+      story as any
+    );
+
+    await render.renderToElement({} as any);
+    expect(story.playFunction).toHaveBeenCalled();
+  });
+
+  it('does not run play function if passed autoplay=false', async () => {
+    const story = {
+      id: 'id',
+      title: 'title',
+      name: 'name',
+      tags: [],
+      applyLoaders: jest.fn(),
+      unboundStoryFn: jest.fn(),
+      playFunction: jest.fn(),
+    };
+
+    const render = new StoryRender(
+      new Channel(),
+      { getStoryContext: () => ({}) } as any,
+      jest.fn() as any,
+      {} as any,
+      entry.id,
+      'story',
+      { autoplay: false },
+      story as any
+    );
+
+    await render.renderToElement({} as any);
+    expect(story.playFunction).not.toHaveBeenCalled();
+  });
 });

code/lib/preview-web/src/render/StoryRender.ts

@@ -47,6 +47,10 @@ export type RenderContextCallbacks<TFramework extends AnyFramework> = Pick<
   'showMain' | 'showError' | 'showException'
 >;
 
+export type StoryRenderOptions = {
+  autoplay?: boolean;
+};
+
 export class StoryRender<TFramework extends AnyFramework> implements Render<TFramework> {
   public type: RenderType = 'story';
 
@@ -73,6 +77,7 @@ export class StoryRender<TFramework extends AnyFramework> implements Render<TFra
     private callbacks: RenderContextCallbacks<TFramework>,
     public id: StoryId,
     public viewMode: ViewMode,
+    public renderOptions: StoryRenderOptions = { autoplay: true },
     story?: Store_Story<TFramework>
   ) {
     this.abortController = new AbortController();
@@ -220,7 +225,7 @@ export class StoryRender<TFramework extends AnyFramework> implements Render<TFra
       if (abortSignal.aborted) return;
 
       // The phase should be 'rendering' but it might be set to 'aborted' by another render cycle
-      if (forceRemount && playFunction && this.phase !== 'errored') {
+      if (this.renderOptions.autoplay && forceRemount && playFunction && this.phase !== 'errored') {
         this.disableKeyListeners = true;
         try {
           await this.runPhase(abortSignal, 'playing', async () => {

code/lib/store/template/stories/rendering.stories.ts

@@ -31,13 +31,9 @@ export const ChangeArgs = {
     await expect(button).toHaveFocus();
 
     // Vue3: https://github.com/storybookjs/storybook/issues/13913
-    // Svelte: https://github.com/storybookjs/storybook/issues/19205
     // Web-components: https://github.com/storybookjs/storybook/issues/19415
     // Preact: https://github.com/storybookjs/storybook/issues/19504
-    if (
-      ['vue3', 'svelte', 'web-components', 'html', 'preact'].includes(globalThis.storybookRenderer)
-    )
-      return;
+    if (['vue3', 'web-components', 'html', 'preact'].includes(globalThis.storybookRenderer)) return;
 
     // When we change the args to the button, it should not rerender
     await channel.emit('updateStoryArgs', { storyId: id, updatedArgs: { label: 'New Text' } });

code/renderers/svelte/src/render.ts

@@ -1,5 +1,3 @@
-import global from 'global';
-
 import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
 import type { SvelteComponentTyped } from 'svelte';
 // eslint-disable-next-line import/no-extraneous-dependencies
@@ -7,40 +5,66 @@ import PreviewRender from '@storybook/svelte/templates/PreviewRender.svelte';
 
 import type { SvelteFramework } from './types';
 
-const { document } = global;
+const componentsByDomElement = new Map<Element, SvelteComponentTyped>();
 
-let previousComponent: SvelteComponentTyped | null = null;
-
-function cleanUpPreviousStory() {
-  if (!previousComponent) {
+function teardown(domElement: Element) {
+  if (!componentsByDomElement.has(domElement)) {
     return;
   }
-  previousComponent.$destroy();
-  previousComponent = null;
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we know it exists because we just checked
+  componentsByDomElement.get(domElement)!.$destroy();
+
+  // eslint-disable-next-line no-param-reassign -- this is on purpose
+  domElement.innerHTML = '';
+  componentsByDomElement.delete(domElement);
 }
 
 export function renderToDOM(
-  { storyFn, kind, name, showMain, showError, storyContext }: Store_RenderContext<SvelteFramework>,
+  {
+    storyFn,
+    kind,
+    name,
+    showMain,
+    showError,
+    storyContext,
+    forceRemount,
+  }: Store_RenderContext<SvelteFramework>,
   domElement: Element
 ) {
-  cleanUpPreviousStory();
+  const existingComponent = componentsByDomElement.get(domElement);
 
-  const target = domElement || document.getElementById('storybook-root');
+  if (forceRemount) {
+    teardown(domElement);
+  }
 
-  target.innerHTML = '';
-
-  previousComponent = new PreviewRender({
-    target,
-    props: {
+  if (!existingComponent || forceRemount) {
+    const createdComponent = new PreviewRender({
+      target: domElement,
+      props: {
+        storyFn,
+        storyContext,
+        name,
+        kind,
+        showError,
+      },
+    }) as SvelteComponentTyped;
+    componentsByDomElement.set(domElement, createdComponent);
+  } else {
+    existingComponent.$set({
       storyFn,
       storyContext,
       name,
       kind,
       showError,
-    },
-  });
+    });
+  }
 
   showMain();
+
+  // teardown the component when the story changes
+  return () => {
+    teardown(domElement);
+  };
 }
 
 export const render: ArgsStoryFn<SvelteFramework> = (args, context) => {

code/renderers/svelte/template/cli/Button.svelte

@@ -9,7 +9,7 @@
   /**
    * What background color to use
    */
-  export let backgroundColor;
+  export let backgroundColor = undefined;
   /**
    * How large should the button be?
    */
@@ -19,9 +19,9 @@
    */
   export let label = '';
 
-  let mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
 
-  let style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+  $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
 
   const dispatch = createEventDispatcher();
 

code/renderers/svelte/template/components/Button.svelte

@@ -21,9 +21,9 @@
    */
   export let label = '';
 
-  let mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
 
-  let style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+  $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
 
   const dispatch = createEventDispatcher();
 

code/renderers/svelte/templates/PreviewRender.svelte

@@ -8,7 +8,7 @@
   export let showError;
   export let storyContext;
 
-  const {
+  let {
     /** @type {SvelteComponent} */
     Component,
     /** @type {any} */
@@ -19,11 +19,16 @@
     WrapperData = {},
   } = storyFn();
 
-   const eventsFromArgTypes = Object.fromEntries(Object.entries(storyContext.argTypes)
-      .filter(([k, v]) => v.action && props[k] != null)
-      .map(([k, v]) => [v.action, props[k]]));
+  // reactive, re-render on storyFn change
+  $: ({ Component, props = {}, on, Wrapper, WrapperData = {} } = storyFn());
 
-  const events = {...eventsFromArgTypes, ...on};
+  const eventsFromArgTypes = Object.fromEntries(
+    Object.entries(storyContext.argTypes)
+      .filter(([k, v]) => v.action && props[k] != null)
+      .map(([k, v]) => [v.action, props[k]])
+  );
+
+  const events = { ...eventsFromArgTypes, ...on };
 
   if (!Component) {
     showError({
@@ -36,9 +41,11 @@
     });
   }
 </script>
+
 <SlotDecorator
   decorator={Wrapper}
   decoratorProps={WrapperData}
   component={Component}
-  props={props}
-  on={events}/>
+  {props}
+  on={events}
+/>

code/renderers/svelte/templates/SlotDecorator.svelte

@@ -21,10 +21,11 @@
     });
   }
 </script>
+
 {#if decorator}
   <svelte:component this={decorator} {...decoratorProps} bind:this={decoratorInstance}>
-    <svelte:component this={component} {...props} bind:this={instance}/>
+    <svelte:component this={component} {...props} bind:this={instance} />
   </svelte:component>
 {:else}
-  <svelte:component this={component} {...props} bind:this={instance}/>
+  <svelte:component this={component} {...props} bind:this={instance} />
 {/if}

code/ui/.storybook/main.ts

@@ -17,7 +17,7 @@ const allStories = [
     titlePrefix: '@storybook-blocks',
   },
 ];
-const blocksOnlyStories = ['../blocks/src/**/*.stories.@(js|jsx|ts|tsx|mdx)'];
+const blocksOnlyStories = ['../blocks/src/@(blocks|controls)/**/*.@(mdx|stories.@(tsx|ts|jsx|js))'];
 
 const config: StorybookConfig = {
   stories: isBlocksOnly ? blocksOnlyStories : allStories,
@@ -36,6 +36,7 @@ const config: StorybookConfig = {
   viteFinal: (vite) => ({
     ...vite,
     plugins: [...(vite.plugins || []), csfPlugin({})],
+    optimizeDeps: { ...vite.optimizeDeps, force: true },
   }),
 };
 

code/ui/.storybook/preview.tsx

@@ -10,7 +10,14 @@ import {
   styled,
   useTheme,
 } from '@storybook/theming';
+import { useArgs } from '@storybook/addons';
 import { Symbols } from '@storybook/components';
+import type { PreviewWeb } from '@storybook/preview-web';
+import { DocsContext } from '@storybook/preview-web';
+import type { ReactFramework } from '@storybook/react';
+import type { Channel } from '@storybook/channels';
+
+import { DocsContainer } from '../blocks/src/blocks/DocsContainer';
 
 const { document } = global;
 
@@ -86,7 +93,49 @@ const ThemedSetRoot = () => {
   return null;
 };
 
+// eslint-disable-next-line no-underscore-dangle
+const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactFramework>;
+const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel;
+export const loaders = [
+  async () => ({ globalValue: 1 }),
+
+  async ({ parameters: { relativeCsfPaths } }) => {
+    if (!relativeCsfPaths) return {};
+
+    const csfFiles = await Promise.all(
+      (relativeCsfPaths as string[]).map(async (relativePath) => {
+        const webpackPath = `./ui/blocks/src/${relativePath.replace(/^..\//, '')}.tsx`;
+        const entry = preview.storyStore.storyIndex!.importPathToEntry(webpackPath);
+
+        if (!entry) {
+          throw new Error(`Couldn't find story file at ${webpackPath} (passed as ${relativePath})`);
+        }
+
+        return preview.storyStore.loadCSFFileByStoryId(entry.id);
+      })
+    );
+
+    return {
+      docsContext: new DocsContext(
+        channel,
+        preview.storyStore,
+        preview.renderStoryToElement.bind(preview),
+        csfFiles,
+        false
+      ),
+    };
+  },
+];
+
 export const decorators = [
+  (Story, { loaded: { docsContext } }) =>
+    docsContext ? (
+      <DocsContainer context={docsContext}>
+        <Story />
+      </DocsContainer>
+    ) : (
+      <Story />
+    ),
   (StoryFn, { globals, parameters, playFunction }) => {
     const defaultTheme = isChromatic() && !playFunction ? 'stacked' : 'light';
     const theme = globals.theme || parameters.theme || defaultTheme;
@@ -150,6 +199,37 @@ export const decorators = [
       }
     }
   },
+  /**
+   * This decorator shows the current state of the arg named in the
+   * parameters.withRawArg property, by updating the arg in the onChange function
+   * this also means that the arg will sync with the control panel
+   *
+   * If parameters.withRawArg is not set, this decorator will do nothing
+   */
+  (StoryFn, { parameters, args, hooks }) => {
+    const [, updateArgs] = useArgs();
+    if (!parameters.withRawArg) {
+      return <StoryFn />;
+    }
+
+    return (
+      <>
+        <StoryFn
+          args={{
+            ...args,
+            onChange: (newValue) => {
+              updateArgs({ [parameters.withRawArg]: newValue });
+              args.onChange?.(newValue);
+            },
+          }}
+        />
+        <div style={{ marginTop: '1rem' }}>
+          Current <code>{parameters.withRawArg}</code>:{' '}
+          <pre>{JSON.stringify(args[parameters.withRawArg], null, 2) || 'undefined'}</pre>
+        </div>
+      </>
+    );
+  },
 ];
 
 export const parameters = {
@@ -242,7 +322,5 @@ export const globalTypes = {
   },
 };
 
-export const loaders = [async () => ({ globalValue: 1 })];
-
 export const argTypes = { color: { control: 'color' } };
 export const args = { color: 'red' };

code/ui/blocks/src/blocks/Anchor.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Anchor } from './Anchor';
+
+const meta = {
+  component: Anchor,
+} as Meta<typeof Anchor>;
+
+export default meta;
+
+export const Default: StoryObj<typeof Anchor> = {
+  args: {
+    children: 'This is an anchor for storyId: "default"',
+    storyId: 'default',
+  },
+};

code/ui/blocks/src/blocks/Story.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Story as StoryComponent } from './Story';
+import * as BooleanStories from '../controls/Boolean.stories';
+
+const meta: Meta<typeof StoryComponent> = {
+  component: StoryComponent,
+  parameters: {
+    relativeCsfPaths: ['../controls/Boolean.stories'],
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const BasicOf: Story = {
+  args: {
+    of: BooleanStories.Undefined,
+  },
+};

code/ui/blocks/src/blocks/Story.tsx

@@ -90,11 +90,12 @@ const Story: FC<StoryProps> = (props) => {
     let cleanup: () => void;
     if (story && storyRef.current) {
       const element = storyRef.current as HTMLElement;
-      cleanup = context.renderStoryToElement(story, element);
+      const { autoplay } = story.parameters.docs || {};
+      cleanup = context.renderStoryToElement(story, element, { autoplay });
       setShowLoader(false);
     }
     return () => cleanup && cleanup();
-  }, [story]);
+  }, [context, story]);
 
   if (!story) {
     return <StorySkeleton />;

code/ui/blocks/src/controls/Boolean.stories.tsx

@@ -1,27 +1,28 @@
-import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { BooleanControl } from './Boolean';
 
-export default {
-  title: 'Controls/Boolean',
+const meta = {
   component: BooleanControl,
   tags: ['docsPage'],
+  parameters: { withRawArg: 'value', controls: { include: ['value'] } },
+  args: { name: 'boolean' },
+} as Meta<typeof BooleanControl>;
+
+export default meta;
+
+export const True: StoryObj<typeof BooleanControl> = {
+  args: {
+    value: true,
+  },
+};
+export const False: StoryObj<typeof BooleanControl> = {
+  args: {
+    value: false,
+  },
 };
 
-const Template = (initialValue?: boolean) => {
-  const [value, setValue] = useState(initialValue);
-  return (
-    <>
-      <BooleanControl name="boolean" value={value} onChange={(newVal) => setValue(newVal)} />
-      <pre>{JSON.stringify(value) || 'undefined'}</pre>
-    </>
-  );
+export const Undefined: StoryObj<typeof BooleanControl> = {
+  args: {
+    value: undefined,
+  },
 };
-
-export const True = () => Template(true);
-
-export const False = () => Template(false);
-
-/**
- * When no value is set on the control
- */
-export const Undefined = () => Template(undefined);

code/ui/blocks/src/controls/Color.stories.tsx

@@ -1,57 +1,65 @@
-import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { ColorControl } from './Color';
 
 export default {
-  title: 'Controls/Color',
   component: ColorControl,
+  parameters: { withRawArg: 'value', controls: { include: ['value', 'startOpen'] } },
+  tags: ['docsPage'],
+  argTypes: {
+    value: {
+      control: {
+        type: 'color',
+      },
+    },
+  },
+  args: { name: 'color' },
+} as Meta<typeof ColorControl>;
+
+export const Basic: StoryObj<typeof ColorControl> = {
+  args: {
+    value: '#ff00ff',
+  },
 };
 
-const Template = (
-  initialValue?: string,
-  presetColors?: Array<string | { color: string; title?: string }>
-) => {
-  const [value, setValue] = useState(initialValue);
-  return (
-    <>
-      <ColorControl
-        name="Color"
-        value={value}
-        onChange={(newVal) => setValue(newVal)}
-        presetColors={presetColors}
-        startOpen
-      />
-      <pre>{JSON.stringify(value) || 'undefined'}</pre>
-    </>
-  );
+export const Undefined: StoryObj<typeof ColorControl> = {
+  args: {
+    value: undefined,
+  },
 };
 
-export const Basic = () => Template('#ff0');
+export const WithPresetColors: StoryObj<typeof ColorControl> = {
+  args: {
+    value: '#00ffff',
+    presetColors: [
+      { color: '#ff4785', title: 'Coral' },
+      { color: '#1EA7FD', title: 'Ocean' },
+      { color: 'rgb(252, 82, 31)', title: 'Orange' },
+      { color: 'RGBA(255, 174, 0, 0.5)', title: 'Gold' },
+      { color: 'hsl(101, 52%, 49%)', title: 'Green' },
+      { color: 'HSLA(179,65%,53%,0.5)', title: 'Seafoam' },
+      { color: '#6F2CAC', title: 'Purple' },
+      { color: '#2A0481', title: 'Ultraviolet' },
+      { color: 'black' },
+      { color: '#333', title: 'Darkest' },
+      { color: '#444', title: 'Darker' },
+      { color: '#666', title: 'Dark' },
+      { color: '#999', title: 'Mediumdark' },
+      { color: '#ddd', title: 'Medium' },
+      { color: '#EEE', title: 'Mediumlight' },
+      { color: '#F3F3F3', title: 'Light' },
+      { color: '#F8F8F8', title: 'Lighter' },
+      { color: '#FFFFFF', title: 'Lightest' },
+      '#fe4a49',
+      '#FED766',
+      'rgba(0, 159, 183, 1)',
+      'HSLA(240,11%,91%,0.5)',
+      'slategray',
+    ],
+  },
+};
 
-export const Undefined = () => Template(undefined);
-
-export const WithPresetColors = () =>
-  Template('tan', [
-    { color: '#ff4785', title: 'Coral' },
-    { color: '#1EA7FD', title: 'Ocean' },
-    { color: 'rgb(252, 82, 31)', title: 'Orange' },
-    { color: 'RGBA(255, 174, 0, 0.5)', title: 'Gold' },
-    { color: 'hsl(101, 52%, 49%)', title: 'Green' },
-    { color: 'HSLA(179,65%,53%,0.5)', title: 'Seafoam' },
-    { color: '#6F2CAC', title: 'Purple' },
-    { color: '#2A0481', title: 'Ultraviolet' },
-    { color: 'black' },
-    { color: '#333', title: 'Darkest' },
-    { color: '#444', title: 'Darker' },
-    { color: '#666', title: 'Dark' },
-    { color: '#999', title: 'Mediumdark' },
-    { color: '#ddd', title: 'Medium' },
-    { color: '#EEE', title: 'Mediumlight' },
-    { color: '#F3F3F3', title: 'Light' },
-    { color: '#F8F8F8', title: 'Lighter' },
-    { color: '#FFFFFF', title: 'Lightest' },
-    '#fe4a49',
-    '#FED766',
-    'rgba(0, 159, 183, 1)',
-    'HSLA(240,11%,91%,0.5)',
-    'slategray',
-  ]);
+export const StartOpen: StoryObj<typeof ColorControl> = {
+  args: {
+    startOpen: true,
+  },
+};

code/ui/blocks/src/controls/Color.tsx

@@ -306,7 +306,7 @@ export const ColorControl: FC<ColorControlProps> = ({
   onFocus,
   onBlur,
   presetColors,
-  startOpen,
+  startOpen = false,
 }) => {
   const throttledOnChange = useCallback(throttle(onChange, 200), [onChange]);
   const { value, realValue, updateValue, color, colorSpace, cycleColorSpace } = useColorInput(

code/ui/blocks/src/controls/Date.stories.tsx

@@ -1,21 +1,22 @@
-import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { DateControl } from './Date';
 
 export default {
-  title: 'Controls/Date',
   component: DateControl,
+  tags: ['docsPage'],
+  parameters: { withRawArg: 'value', controls: { include: ['value'] } },
+  argTypes: {
+    value: {
+      description: 'The date',
+      control: { type: 'date' },
+    },
+  },
+  args: { name: 'date' },
+} as Meta<typeof DateControl>;
+
+export const Basic: StoryObj<typeof DateControl> = {
+  args: { value: new Date('2020-10-20T09:30:02') },
 };
-
-const Template = (initialValue) => {
-  const [value, setValue] = useState(initialValue);
-  return (
-    <>
-      <DateControl name="date" value={value} onChange={(newVal) => setValue(newVal)} />
-      <pre>{JSON.stringify(value) || 'undefined'}</pre>
-    </>
-  );
+export const Undefined: StoryObj<typeof DateControl> = {
+  args: { value: undefined },
 };
-
-export const Basic = () => Template(new Date(2020, 4, 20));
-
-export const Undefined = () => Template(undefined);

code/ui/blocks/src/controls/Files.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FilesControl } from './Files';
+
+export default {
+  component: FilesControl,
+  tags: ['docsPage'],
+  parameters: { withRawArg: 'value', controls: { include: ['value', 'accept'] } },
+  argTypes: {
+    value: {
+      description: 'Selected file',
+      control: { type: 'file' },
+    },
+  },
+  args: { name: 'files' },
+} as Meta<typeof FilesControl>;
+
+export const Undefined: StoryObj<typeof FilesControl> = {
+  args: { value: undefined },
+};
+// for security reasons a file input field cannot have an initial value, so it doesn't make sense to have stories for it
+
+export const AcceptAnything: StoryObj<typeof FilesControl> = {
+  args: { accept: '*/*' },
+};
+
+export const AcceptPDFs: StoryObj<typeof FilesControl> = {
+  name: 'Accept PDFs',
+  args: { accept: '.pdf' },
+};

code/ui/blocks/src/controls/Files.tsx

@@ -7,6 +7,17 @@ import type { ControlProps } from './types';
 import { getControlId } from './helpers';
 
 export interface FilesControlProps extends ControlProps<string[]> {
+  /**
+   * The accept attribute value is a string that defines the file types the file input should accept. This string is a comma-separated list of unique file type specifiers.
+   * @example
+   * *\/*
+   * @example
+   * .webm,video/webm
+   * @example
+   * .doc,.docx,application/msword
+   * @defaultValue `image/*`
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
+   */
   accept?: string;
 }
 

code/ui/blocks/src/controls/Number.stories.tsx

@@ -1,23 +1,41 @@
-import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { NumberControl } from './Number';
 
 export default {
-  title: 'Controls/Number',
   component: NumberControl,
+  tags: ['docsPage'],
+  parameters: { withRawArg: 'value', controls: { include: ['value', 'min', 'max', 'step'] } },
+  args: { name: 'number' },
+} as Meta<typeof NumberControl>;
+
+export const Undefined: StoryObj<typeof NumberControl> = {
+  args: { value: undefined },
+};
+// for security reasons a file input field cannot have an initial value, so it doesn't make sense to have stories for it
+
+export const Ten: StoryObj<typeof NumberControl> = {
+  args: { value: 10 },
+};
+export const Zero: StoryObj<typeof NumberControl> = {
+  args: { value: 0 },
 };
 
-const Template = (initialValue) => {
-  const [value, setValue] = useState(initialValue);
-  return (
-    <>
-      <NumberControl name="number" value={value} onChange={(newVal) => setValue(newVal)} />
-      <pre>{JSON.stringify(value) || 'undefined'}</pre>
-    </>
-  );
+export const WithMin: StoryObj<typeof NumberControl> = {
+  args: { min: 1, value: 3 },
+};
+export const WithMax: StoryObj<typeof NumberControl> = {
+  args: { max: 7, value: 3 },
+};
+export const WithMinAndMax: StoryObj<typeof NumberControl> = {
+  args: { min: -2, max: 5, value: 3 },
+};
+export const LessThanMin: StoryObj<typeof NumberControl> = {
+  args: { min: 3, value: 1 },
+};
+export const MoreThanMax: StoryObj<typeof NumberControl> = {
+  args: { max: 3, value: 6 },
 };
 
-export const Basic = () => Template(10);
-
-export const Zero = () => Template(0);
-
-export const Undefined = () => Template(undefined);
+export const WithStep: StoryObj<typeof NumberControl> = {
+  args: { step: 5, value: 3 },
+};

code/ui/blocks/src/controls/Object.stories.tsx

@@ -1,40 +1,55 @@
-import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { ObjectControl } from './Object';
 
 export default {
-  title: 'Controls/Object',
   component: ObjectControl,
+  tags: ['docsPage'],
+  parameters: { withRawArg: 'value', controls: { include: ['value'] } },
+  args: { name: 'object' },
+} as Meta<typeof ObjectControl>;
+
+export const Object: StoryObj<typeof ObjectControl> = {
+  args: {
+    value: {
+      name: 'Michael',
+      someDate: new Date('2022-10-30T12:31:11'),
+      nested: { someBool: true, someNumber: 22 },
+    },
+  },
 };
 
-const Template = (initialValue: any) => {
-  const [value, setValue] = useState(initialValue);
-  return (
-    <>
-      <ObjectControl name="object" value={value} onChange={(newVal) => setValue(newVal)} />
-      <pre>{JSON.stringify(value) || 'undefined'}</pre>
-    </>
-  );
+export const Array: StoryObj<typeof ObjectControl> = {
+  args: {
+    value: [
+      'someString',
+      22,
+      true,
+      new Date('2022-10-30T12:31:11'),
+      { someBool: true, someNumber: 22 },
+    ],
+  },
 };
 
-export const Basic = () => Template({ name: 'Michael', nested: { something: true } });
-
-export const Empty = () => Template({});
-
-export const Null = () => Template(null);
-
-export const Undefined = () => Template(undefined);
-
-export const ValidatedAsArray = () => {
-  const [value, setValue] = useState([]);
-  return (
-    <>
-      <ObjectControl
-        name="object"
-        argType={{ type: { name: 'array' } }}
-        value={value}
-        onChange={(newVal) => setValue(newVal)}
-      />
-      <p>{value && JSON.stringify(value)}</p>
-    </>
-  );
+export const EmptyObject: StoryObj<typeof ObjectControl> = {
+  args: {
+    value: {},
+  },
+};
+
+export const EmptyArray: StoryObj<typeof ObjectControl> = {
+  args: {
+    value: {},
+  },
+};
+
+export const Null: StoryObj<typeof ObjectControl> = {
+  args: {
+    value: null,
+  },
+};
+
+export const Undefined: StoryObj<typeof ObjectControl> = {
+  args: {
+    value: undefined,
+  },
 };

code/ui/blocks/src/controls/Range.stories.tsx

@@ -1,43 +1,81 @@
-import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { RangeControl } from './Range';
 
 export default {
-  title: 'Controls/Range',
   component: RangeControl,
+  tags: ['docsPage'],
+  parameters: { withRawArg: 'value', controls: { include: ['value', 'min', 'max', 'step'] } },
+  args: { name: 'range' },
+} as Meta<typeof RangeControl>;
+
+export const Undefined: StoryObj<typeof RangeControl> = {
+  args: {
+    value: undefined,
+  },
 };
 
-const Template = ({
-  initialValue,
-  step,
-  max,
-}: {
-  initialValue?: number;
-  step?: number;
-  max?: number;
-}) => {
-  const [value, setValue] = useState(initialValue);
-  return (
-    <>
-      <RangeControl
-        name="range"
-        value={value}
-        onChange={(newVal) => setValue(newVal)}
-        min={0}
-        max={max}
-        step={step}
-      />
-      <pre>{JSON.stringify(value) || 'undefined'}</pre>
-    </>
-  );
+export const Zero: StoryObj<typeof RangeControl> = {
+  args: {
+    value: 0,
+  },
+};
+export const WithMin: StoryObj<typeof RangeControl> = {
+  args: {
+    min: 5,
+    value: 20,
+  },
+};
+export const WithMax: StoryObj<typeof RangeControl> = {
+  args: {
+    max: 50,
+    value: 20,
+  },
+};
+export const WithBigMax: StoryObj<typeof RangeControl> = {
+  args: {
+    max: 10000000000,
+    value: 20,
+  },
+};
+export const WithMinAndMax: StoryObj<typeof RangeControl> = {
+  args: {
+    min: 10,
+    max: 50,
+    value: 20,
+  },
 };
 
-export const Basic = () => Template({ initialValue: 10, max: 20, step: 2 });
+export const LessThanMin: StoryObj<typeof RangeControl> = {
+  args: {
+    min: 10,
+    value: 5,
+  },
+};
 
-export const Zero = () => Template({ initialValue: 0, max: 20, step: 2 });
+export const MoreThanMax: StoryObj<typeof RangeControl> = {
+  args: {
+    max: 20,
+    value: 50,
+  },
+};
 
-export const Decimals = () =>
-  Template({ step: 0.000000000002, initialValue: 1989.123123123123, max: 2000 });
+export const WithSteps: StoryObj<typeof RangeControl> = {
+  args: {
+    step: 5,
+    value: 50,
+  },
+};
 
-export const BigMaxValue = () => Template({ step: 1000, initialValue: 15, max: 10000000000 });
-
-export const Undefined = () => Template({});
+export const Decimals: StoryObj<typeof RangeControl> = {
+  args: {
+    step: 0.000000000002,
+    value: 989.123123123123,
+    max: 2000,
+  },
+};
+export const WithInfiniteMax: StoryObj<typeof RangeControl> = {
+  args: {
+    max: Infinity,
+    value: 50,
+  },
+};

code/ui/blocks/src/controls/Text.stories.tsx

@@ -1,23 +1,34 @@
-import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { TextControl } from './Text';
 
 export default {
-  title: 'Controls/Text',
   component: TextControl,
+  tags: ['docsPage'],
+  parameters: { withRawArg: 'value', controls: { include: ['value', 'maxLength'] } },
+  args: { name: 'text' },
+} as Meta<typeof TextControl>;
+
+export const Basic: StoryObj<typeof TextControl> = {
+  args: {
+    value: 'Storybook says hi. 👋',
+  },
 };
 
-const Template = (initialValue?: string) => {
-  const [value, setValue] = useState(initialValue);
-  return (
-    <>
-      <TextControl name="Text" value={value} onChange={(newVal) => setValue(newVal)} />
-      <pre>{JSON.stringify(value) || 'undefined'}</pre>
-    </>
-  );
+export const Empty: StoryObj<typeof TextControl> = {
+  args: {
+    value: '',
+  },
 };
 
-export const Basic = () => Template('Hello text');
+export const Undefined: StoryObj<typeof TextControl> = {
+  args: {
+    value: undefined,
+  },
+};
 
-export const Empty = () => Template('');
-
-export const Undefined = () => Template(undefined);
+export const WithMaxLength: StoryObj<typeof TextControl> = {
+  args: {
+    value: "You can't finish this sente",
+    maxLength: 28,
+  },
+};

code/ui/blocks/src/controls/options/CheckOptions.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { OptionsControl } from './Options';
+
+const arrayOptions = ['Bat', 'Cat', 'Rat'];
+const labels = {
+  Bat: 'Batwoman',
+  Cat: 'Catwoman',
+  Rat: 'Ratwoman',
+};
+const objectOptions = {
+  A: { id: 'Aardvark' },
+  B: { id: 'Bat' },
+  C: { id: 'Cat' },
+};
+
+const meta = {
+  title: 'Controls/Options/Check',
+  component: OptionsControl,
+  tags: ['docsPage'],
+  parameters: {
+    withRawArg: 'value',
+    controls: { include: ['argType', 'type', 'value', 'labels'] },
+  },
+  args: {
+    name: 'check',
+    type: 'check',
+    argType: { options: arrayOptions },
+  },
+  argTypes: {
+    value: {
+      control: { type: 'check' },
+      options: arrayOptions,
+    },
+  },
+} as Meta<typeof OptionsControl>;
+
+export default meta;
+
+export const Array: StoryObj<typeof OptionsControl> = {
+  args: {
+    value: [arrayOptions[0]],
+  },
+};
+
+export const ArrayInline: StoryObj<typeof OptionsControl> = {
+  args: {
+    type: 'inline-check',
+    value: [arrayOptions[1], arrayOptions[2]],
+  },
+};
+
+export const ArrayLabels: StoryObj<typeof OptionsControl> = {
+  args: {
+    value: [arrayOptions[0]],
+    labels,
+  },
+};
+
+export const ArrayInlineLabels: StoryObj<typeof OptionsControl> = {
+  args: {
+    type: 'inline-check',
+    value: [arrayOptions[1], arrayOptions[2]],
+    labels,
+  },
+};
+
+export const ArrayUndefined: StoryObj<typeof OptionsControl> = {
+  args: {
+    value: undefined,
+  },
+};
+
+export const Object: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object',
+  args: {
+    value: [objectOptions.B],
+    argType: { options: objectOptions },
+  },
+  argTypes: { value: { control: { type: 'object' } } },
+};
+
+export const ObjectInline: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object Inline',
+  args: {
+    type: 'inline-check',
+    value: [objectOptions.A, objectOptions.C],
+    argType: { options: objectOptions },
+  },
+  argTypes: { value: { control: { type: 'object' } } },
+};
+
+export const ObjectUndefined: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object Undefined',
+  args: {
+    value: undefined,
+    argType: { options: objectOptions },
+  },
+  argTypes: { value: { control: { type: 'object' } } },
+};

code/ui/blocks/src/controls/options/Options.stories.tsx

@@ -1,66 +0,0 @@
-import React, { useState } from 'react';
-import { OptionsControl } from './Options';
-
-export default {
-  title: 'Controls/Options',
-  component: OptionsControl,
-};
-
-const arrayOptions = ['Bat', 'Cat', 'Rat'];
-const objectOptions = {
-  A: { id: 'Aardvark' },
-  B: { id: 'Bat' },
-  C: { id: 'Cat' },
-};
-
-const rawOptionsHelper = (options, type, isMulti, initial) => {
-  const [value, setValue] = useState(isMulti ? [initial] : initial);
-  return (
-    <>
-      <OptionsControl
-        name="options"
-        labels={{}}
-        argType={{ options }}
-        value={value}
-        type={type}
-        onChange={(newVal) => setValue(newVal)}
-      />
-      <pre>{JSON.stringify(value) || 'undefined'}</pre>
-    </>
-  );
-};
-
-const optionsHelper = (options, type, isMulti) =>
-  rawOptionsHelper(options, type, isMulti, Array.isArray(options) ? options[1] : options.B);
-
-// Check
-export const ArrayCheck = () => optionsHelper(arrayOptions, 'check', true);
-export const ArrayInlineCheck = () => optionsHelper(arrayOptions, 'inline-check', true);
-export const ObjectCheck = () => optionsHelper(objectOptions, 'check', true);
-export const ObjectInlineCheck = () => optionsHelper(objectOptions, 'inline-check', true);
-export const ArrayCheckUndefined = () => rawOptionsHelper(arrayOptions, 'check', false, undefined);
-export const ObjectCheckUndefined = () =>
-  rawOptionsHelper(objectOptions, 'check', false, undefined);
-
-// Radio
-export const ArrayRadio = () => optionsHelper(arrayOptions, 'radio', false);
-export const ArrayInlineRadio = () => optionsHelper(arrayOptions, 'inline-radio', false);
-export const ObjectRadio = () => optionsHelper(objectOptions, 'radio', false);
-export const ObjectInlineRadio = () => optionsHelper(objectOptions, 'inline-radio', false);
-export const ArrayRadioUndefined = () => rawOptionsHelper(arrayOptions, 'radio', false, undefined);
-export const ObjectRadioUndefined = () =>
-  rawOptionsHelper(objectOptions, 'radio', false, undefined);
-
-// Select
-export const ArraySelect = () => optionsHelper(arrayOptions, 'select', false);
-export const ArrayMultiSelect = () => optionsHelper(arrayOptions, 'multi-select', true);
-export const ObjectSelect = () => optionsHelper(objectOptions, 'select', false);
-export const ObjectMultiSelect = () => optionsHelper(objectOptions, 'multi-select', true);
-export const ArraySelectUndefined = () =>
-  rawOptionsHelper(arrayOptions, 'select', false, undefined);
-export const ObjectSelectUndefined = () =>
-  rawOptionsHelper(objectOptions, 'select', false, undefined);
-export const ArrayMultiSelectUndefined = () =>
-  rawOptionsHelper(arrayOptions, 'multi-select', false, undefined);
-export const ObjectMultiSelectUndefined = () =>
-  rawOptionsHelper(objectOptions, 'multi-select', false, undefined);

code/ui/blocks/src/controls/options/RadioOptions.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { OptionsControl } from './Options';
+
+const arrayOptions = ['Bat', 'Cat', 'Rat'];
+const labels = {
+  Bat: 'Batwoman',
+  Cat: 'Catwoman',
+  Rat: 'Ratwoman',
+};
+const objectOptions = {
+  A: { id: 'Aardvark' },
+  B: { id: 'Bat' },
+  C: { id: 'Cat' },
+};
+
+const meta = {
+  title: 'Controls/Options/Radio',
+  component: OptionsControl,
+  tags: ['docsPage'],
+  parameters: {
+    withRawArg: 'value',
+    controls: { include: ['argType', 'type', 'value', 'labels'] },
+  },
+  args: {
+    name: 'radio',
+    type: 'radio',
+    argType: { options: arrayOptions },
+  },
+  argTypes: {
+    value: {
+      control: { type: 'radio' },
+      options: arrayOptions,
+    },
+  },
+} as Meta<typeof OptionsControl>;
+
+export default meta;
+
+export const Array: StoryObj<typeof OptionsControl> = {
+  args: {
+    value: arrayOptions[0],
+  },
+};
+
+export const ArrayInline: StoryObj<typeof OptionsControl> = {
+  args: {
+    type: 'inline-radio',
+    value: arrayOptions[1],
+  },
+};
+
+export const ArrayLabels: StoryObj<typeof OptionsControl> = {
+  args: {
+    value: arrayOptions[0],
+    labels,
+  },
+};
+
+export const ArrayInlineLabels: StoryObj<typeof OptionsControl> = {
+  args: {
+    type: 'inline-radio',
+    value: arrayOptions[1],
+    labels,
+  },
+};
+
+export const ArrayUndefined: StoryObj<typeof OptionsControl> = {
+  args: {
+    value: undefined,
+  },
+};
+
+export const Object: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object',
+  args: {
+    value: objectOptions.B,
+    argType: { options: objectOptions },
+  },
+  argTypes: { value: { control: { type: 'object' } } },
+};
+
+export const ObjectInline: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object Inline',
+  args: {
+    type: 'inline-radio',
+    value: objectOptions.A,
+    argType: { options: objectOptions },
+  },
+  argTypes: { value: { control: { type: 'object' } } },
+};
+
+export const ObjectUndefined: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object Undefined',
+  args: {
+    value: undefined,
+    argType: { options: objectOptions },
+  },
+  argTypes: { value: { control: { type: 'object' } } },
+};

code/ui/blocks/src/controls/options/SelectOptions.stories.tsx

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { OptionsControl } from './Options';
+
+const arrayOptions = ['Bat', 'Cat', 'Rat'];
+const objectOptions = {
+  A: { id: 'Aardvark' },
+  B: { id: 'Bat' },
+  C: { id: 'Cat' },
+};
+const labels = {
+  Bat: 'Batwoman',
+  Cat: 'Catwoman',
+  Rat: 'Ratwoman',
+};
+const argTypeMultiSelect = {
+  argTypes: {
+    value: {
+      control: { type: 'multi-select' },
+      options: arrayOptions,
+    },
+  },
+};
+
+const meta = {
+  title: 'Controls/Options/Select',
+  component: OptionsControl,
+  tags: ['docsPage'],
+  parameters: {
+    withRawArg: 'value',
+    controls: { include: ['argType', 'type', 'value', 'labels'] },
+  },
+  args: {
+    name: 'select',
+    type: 'select',
+    argType: { options: arrayOptions },
+  },
+  argTypes: {
+    value: {
+      control: { type: 'select' },
+      options: arrayOptions,
+    },
+  },
+} as Meta<typeof OptionsControl>;
+
+export default meta;
+
+export const Array: StoryObj<typeof OptionsControl> = {
+  args: {
+    value: arrayOptions[0],
+  },
+};
+
+export const ArrayMulti: StoryObj<typeof OptionsControl> = {
+  args: {
+    type: 'multi-select',
+    value: [arrayOptions[1], arrayOptions[2]],
+  },
+  ...argTypeMultiSelect,
+};
+
+export const ArrayUndefined: StoryObj<typeof OptionsControl> = {
+  args: {
+    value: undefined,
+  },
+};
+
+export const ArrayMultiUndefined: StoryObj<typeof OptionsControl> = {
+  args: {
+    type: 'multi-select',
+    value: undefined,
+  },
+  ...argTypeMultiSelect,
+};
+
+export const ArrayLabels: StoryObj<typeof OptionsControl> = {
+  args: {
+    value: arrayOptions[0],
+    labels,
+  },
+};
+
+export const ArrayMultiLabels: StoryObj<typeof OptionsControl> = {
+  args: {
+    type: 'multi-select',
+    value: [arrayOptions[1], arrayOptions[2]],
+    labels,
+  },
+  ...argTypeMultiSelect,
+};
+
+export const Object: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object',
+  args: {
+    value: objectOptions.B,
+    argType: { options: objectOptions },
+  },
+  argTypes: { value: { control: { type: 'object' } } },
+};
+
+export const ObjectMulti: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object Multi',
+  args: {
+    type: 'multi-select',
+    value: [objectOptions.A, objectOptions.B],
+    argType: { options: objectOptions },
+  },
+  argTypes: { value: { control: { type: 'object' } } },
+};
+
+export const ObjectUndefined: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object Undefined',
+  args: {
+    value: undefined,
+    argType: { options: objectOptions },
+  },
+  argTypes: { value: { control: { type: 'object' } } },
+};
+
+export const ObjectMultiUndefined: StoryObj<typeof OptionsControl> = {
+  name: 'DEPRECATED: Object Multi Undefined',
+  args: {
+    type: 'multi-select',
+    value: undefined,
+    argType: { options: objectOptions },
+  },
+  argTypes: { value: { control: { type: 'object' } } },
+};

code/ui/blocks/src/controls/types.ts

@@ -19,6 +19,10 @@ export type ColorValue = string;
 export type PresetColor = ColorValue | { color: ColorValue; title?: string };
 export interface ColorConfig {
   presetColors?: PresetColor[];
+  /**
+   * Whether the color picker should be open by default when rendered.
+   * @default false
+   */
   startOpen?: boolean;
 }
 

code/ui/components/src/tooltip/WithTooltip.tsx

@@ -124,8 +124,8 @@ const WithToolTipState: FC<
   WithTooltipPureProps & {
     startOpen?: boolean;
   }
-> = ({ startOpen, onVisibilityChange: onChange, ...rest }) => {
-  const [tooltipShown, setTooltipShown] = useState(startOpen || false);
+> = ({ startOpen = false, onVisibilityChange: onChange, ...rest }) => {
+  const [tooltipShown, setTooltipShown] = useState(startOpen);
   const onVisibilityChange: (visibility: boolean) => void = useCallback(
     (visibility) => {
       if (onChange && onChange(visibility) === false) return;

code/workspace.json

@@ -181,11 +181,6 @@
       "root": "lib/core-server",
       "type": "library"
     },
-    "@storybook/core-vite": {
-      "implicitDependencies": [],
-      "root": "lib/core-vite",
-      "type": "library"
-    },
     "@storybook/core-webpack": {
       "implicitDependencies": [],
       "root": "lib/core-webpack",

docs/snippets/svelte/button-implementation.js.mdx

@@ -11,7 +11,7 @@
   /**
    * What background color to use
    */
-  export let backgroundColor;
+  export let backgroundColor = undefined;
   /**
    * How large should the button be?
    */