Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use findSiblingStoryId method in storybook-root

Best JavaScript code snippet using storybook-root

stories.test.ts

Source:stories.test.ts

...690        state,691      } = initStories({ store, navigate, storyId, viewMode: 'story', provider } as any);692      store.setState(state);693      setStories(setStoriesData);694      const result = findSiblingStoryId(storyId, store.getState().storiesHash, 1, false);695      expect(result).toBe('a--2');696    });697    it('works forward toSiblingGroup', () => {698      const navigate = jest.fn();699      const store = createMockStore();700      const storyId = 'a--1';701      const {702        api: { setStories, findSiblingStoryId },703        state,704      } = initStories({ store, navigate, storyId, viewMode: 'story', provider } as any);705      store.setState(state);706      setStories(setStoriesData);707      const result = findSiblingStoryId(storyId, store.getState().storiesHash, 1, true);708      expect(result).toBe('b-c--1');709    });710  });711  describe('jumpToComponent', () => {712    it('works forward', () => {713      const navigate = jest.fn();714      const store = createMockStore();715      const {716        api: { setStories, jumpToComponent },717        state,718      } = initStories({ store, navigate, storyId: 'a--1', viewMode: 'story', provider } as any);719      store.setState(state);720      setStories(setStoriesData);721      jumpToComponent(1);...

stories.ts

Source:stories.ts

...72  updateStoryArgs(story: StoryEntry, newArgs: Args): void;73  resetStoryArgs: (story: StoryEntry, argNames?: string[]) => void;74  findLeafEntry(StoriesHash: StoriesHash, storyId: StoryId): LeafEntry;75  findLeafStoryId(StoriesHash: StoriesHash, storyId: StoryId): StoryId;76  findSiblingStoryId(77    storyId: StoryId,78    hash: StoriesHash,79    direction: Direction,80    toSiblingGroup: boolean // when true, skip over leafs within the same group81  ): StoryId;82  fetchStoryList: () => Promise<void>;83  setStoryList: (storyList: StoryIndex) => Promise<void>;84  updateStory: (storyId: StoryId, update: StoryUpdate, ref?: ComposedRef) => Promise<void>;85}86const deprecatedOptionsParameterWarnings: Record<string, () => void> = [87  'enableShortcuts',88  'theme',89  'showRoots',90].reduce((acc, option: string) => {91  acc[option] = deprecate(92    () => {},93    `parameters.options.${option} is deprecated and will be removed in Storybook 7.0.94To change this setting, use \`addons.setConfig\`. See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-immutable-options-parameters95  `96  );97  return acc;98}, {} as Record<string, () => void>);99function checkDeprecatedOptionParameters(options?: Record<string, any>) {100  if (!options) {101    return;102  }103  Object.keys(options).forEach((option: string) => {104    if (deprecatedOptionsParameterWarnings[option]) {105      deprecatedOptionsParameterWarnings[option]();106    }107  });108}109export const init: ModuleFn<SubAPI, SubState, true> = ({110  fullAPI,111  store,112  navigate,113  provider,114  storyId: initialStoryId,115  viewMode: initialViewMode,116  docsOptions = {},117}) => {118  const api: SubAPI = {119    storyId: toId,120    getData: (storyId, refId) => {121      const result = api.resolveStory(storyId, refId);122      if (result?.type === 'story' || result?.type === 'docs') {123        return result;124      }125      return undefined;126    },127    isPrepared: (storyId, refId) => {128      const data = api.getData(storyId, refId);129      return data.type === 'story' ? data.prepared : true;130    },131    resolveStory: (storyId, refId) => {132      const { refs, storiesHash } = store.getState();133      if (refId) {134        return refs[refId].stories ? refs[refId].stories[storyId] : undefined;135      }136      return storiesHash ? storiesHash[storyId] : undefined;137    },138    getCurrentStoryData: () => {139      const { storyId, refId } = store.getState();140      return api.getData(storyId, refId);141    },142    getParameters: (storyIdOrCombo, parameterName) => {143      const { storyId, refId } =144        typeof storyIdOrCombo === 'string'145          ? { storyId: storyIdOrCombo, refId: undefined }146          : storyIdOrCombo;147      const data = api.getData(storyId, refId);148      if (data?.type === 'story') {149        const { parameters } = data;150        if (parameters) {151          return parameterName ? parameters[parameterName] : parameters;152        }153      }154      return null;155    },156    getCurrentParameter: (parameterName) => {157      const { storyId, refId } = store.getState();158      const parameters = api.getParameters({ storyId, refId }, parameterName);159      // FIXME Returning falsey parameters breaks a bunch of toolbars code,160      // so this strange logic needs to be here until various client code is updated.161      return parameters || undefined;162    },163    jumpToComponent: (direction) => {164      const { storiesHash, storyId, refs, refId } = store.getState();165      const story = api.getData(storyId, refId);166      // cannot navigate when there's no current selection167      if (!story) {168        return;169      }170      const hash = refId ? refs[refId].stories || {} : storiesHash;171      const result = api.findSiblingStoryId(storyId, hash, direction, true);172      if (result) {173        api.selectStory(result, undefined, { ref: refId });174      }175    },176    jumpToStory: (direction) => {177      const { storiesHash, storyId, refs, refId } = store.getState();178      const story = api.getData(storyId, refId);179      // cannot navigate when there's no current selection180      if (!story) {181        return;182      }183      const hash = story.refId ? refs[story.refId].stories : storiesHash;184      const result = api.findSiblingStoryId(storyId, hash, direction, false);185      if (result) {186        api.selectStory(result, undefined, { ref: refId });187      }188    },189    setStories: async (input, error) => {190      // Now create storiesHash by reordering the above by group191      const hash = transformSetStoriesStoryDataToStoriesHash(input, {192        provider,193        docsOptions,194      });195      await store.setState({196        storiesHash: hash,197        storiesConfigured: true,198        storiesFailed: error,199      });200    },201    selectFirstStory: () => {202      const { storiesHash } = store.getState();203      const firstStory = Object.keys(storiesHash).find((id) => storiesHash[id].type === 'story');204      if (firstStory) {205        api.selectStory(firstStory);206        return;207      }208      navigate('/');209    },210    selectStory: (titleOrId = undefined, name = undefined, options = {}) => {211      const { ref } = options;212      const { storyId, storiesHash, refs } = store.getState();213      const hash = ref ? refs[ref].stories : storiesHash;214      const kindSlug = storyId?.split('--', 2)[0];215      if (!name) {216        // Find the entry (group, component or story) that is referred to217        const entry = titleOrId ? hash[titleOrId] || hash[sanitize(titleOrId)] : hash[kindSlug];218        if (!entry) throw new Error(`Unknown id or title: '${titleOrId}'`);219        // We want to navigate to the first ancestor entry that is a leaf220        const leafEntry = api.findLeafEntry(hash, entry.id);221        const fullId = leafEntry.refId ? `${leafEntry.refId}_${leafEntry.id}` : leafEntry.id;222        navigate(`/${leafEntry.type}/${fullId}`);223      } else if (!titleOrId) {224        // This is a slugified version of the kind, but that's OK, our toId function is idempotent225        const id = toId(kindSlug, name);226        api.selectStory(id, undefined, options);227      } else {228        const id = ref ? `${ref}_${toId(titleOrId, name)}` : toId(titleOrId, name);229        if (hash[id]) {230          api.selectStory(id, undefined, options);231        } else {232          // Support legacy API with component permalinks, where kind is `x/y` but permalink is 'z'233          const entry = hash[sanitize(titleOrId)];234          if (entry?.type === 'component') {235            const foundId = entry.children.find((childId) => hash[childId].name === name);236            if (foundId) {237              api.selectStory(foundId, undefined, options);238            }239          }240        }241      }242    },243    findLeafEntry(storiesHash, storyId) {244      const entry = storiesHash[storyId];245      if (entry.type === 'docs' || entry.type === 'story') {246        return entry;247      }248      const childStoryId = entry.children[0];249      return api.findLeafEntry(storiesHash, childStoryId);250    },251    findLeafStoryId(storiesHash, storyId) {252      return api.findLeafEntry(storiesHash, storyId)?.id;253    },254    findSiblingStoryId(storyId, hash, direction, toSiblingGroup) {255      if (toSiblingGroup) {256        const lookupList = getComponentLookupList(hash);257        const index = lookupList.findIndex((i) => i.includes(storyId));258        // cannot navigate beyond fist or last259        if (index === lookupList.length - 1 && direction > 0) {260          return;261        }262        if (index === 0 && direction < 0) {263          return;264        }265        if (lookupList[index + direction]) {266          // eslint-disable-next-line consistent-return267          return lookupList[index + direction][0];268        }269        return;270      }271      const lookupList = getStoriesLookupList(hash);272      const index = lookupList.indexOf(storyId);273      // cannot navigate beyond fist or last274      if (index === lookupList.length - 1 && direction > 0) {275        return;276      }277      if (index === 0 && direction < 0) {278        return;279      }280      // eslint-disable-next-line consistent-return281      return lookupList[index + direction];282    },283    updateStoryArgs: (story, updatedArgs) => {284      const { id: storyId, refId } = story;285      fullAPI.emit(UPDATE_STORY_ARGS, {286        storyId,287        updatedArgs,288        options: { target: refId },289      });290    },291    resetStoryArgs: (story, argNames?: [string]) => {292      const { id: storyId, refId } = story;293      fullAPI.emit(RESET_STORY_ARGS, {294        storyId,295        argNames,296        options: { target: refId },297      });298    },299    fetchStoryList: async () => {300      try {301        const result = await fetch(STORY_INDEX_PATH);302        if (result.status !== 200) throw new Error(await result.text());303        const storyIndex = (await result.json()) as StoryIndex;304        // We can only do this if the stories.json is a proper storyIndex305        if (storyIndex.v < 3) {306          logger.warn(`Skipping story index with version v${storyIndex.v}, awaiting SET_STORIES.`);307          return;308        }309        await fullAPI.setStoryList(storyIndex);310      } catch (err) {311        store.setState({312          storiesConfigured: true,313          storiesFailed: err,314        });315      }316    },317    setStoryList: async (storyIndex: StoryIndex) => {318      const newHash = transformStoryIndexToStoriesHash(storyIndex, {319        provider,320        docsOptions,321      });322      // Now we need to patch in the existing prepared stories323      const oldHash = store.getState().storiesHash;324      await store.setState({325        storiesHash: addPreparedStories(newHash, oldHash),326        storiesConfigured: true,327        storiesFailed: null,328      });329    },330    updateStory: async (331      storyId: StoryId,332      update: StoryUpdate,333      ref?: ComposedRef334    ): Promise<void> => {335      if (!ref) {336        const { storiesHash } = store.getState();337        storiesHash[storyId] = {338          ...storiesHash[storyId],339          ...update,340        } as StoryEntry;341        await store.setState({ storiesHash });342      } else {343        const { id: refId, stories } = ref;344        stories[storyId] = {345          ...stories[storyId],346          ...update,347        } as StoryEntry;348        await fullAPI.updateRef(refId, { stories });349      }350    },351  };352  const initModule = async () => {353    // On initial load, the local iframe will select the first story (or other "selection specifier")354    // and emit STORY_SPECIFIED with the id. We need to ensure we respond to this change.355    fullAPI.on(356      STORY_SPECIFIED,357      function handler({358        storyId,359        viewMode,360      }: {361        storyId: string;362        viewMode: ViewMode;363        [k: string]: any;364      }) {365        const { sourceType } = getEventMetadata(this, fullAPI);366        if (fullAPI.isSettingsScreenActive()) return;367        if (sourceType === 'local') {368          // Special case -- if we are already at the story being specified (i.e. the user started at a given story),369          // we don't need to change URL. See https://github.com/storybookjs/storybook/issues/11677370          const state = store.getState();371          if (state.storyId !== storyId || state.viewMode !== viewMode) {372            navigate(`/${viewMode}/${storyId}`);373          }374        }375      }376    );377    fullAPI.on(STORY_CHANGED, function handler() {378      const { sourceType } = getEventMetadata(this, fullAPI);379      if (sourceType === 'local') {380        const options = fullAPI.getCurrentParameter('options');381        if (options) {382          checkDeprecatedOptionParameters(options);383          fullAPI.setOptions(options);384        }385      }386    });387    fullAPI.on(STORY_PREPARED, function handler({ id, ...update }) {388      const { ref, sourceType } = getEventMetadata(this, fullAPI);389      fullAPI.updateStory(id, { ...update, prepared: true }, ref);390      if (!ref) {391        if (!store.getState().hasCalledSetOptions) {392          const { options } = update.parameters;393          checkDeprecatedOptionParameters(options);394          fullAPI.setOptions(options);395          store.setState({ hasCalledSetOptions: true });396        }397      } else {398        fullAPI.updateRef(ref.id, { ready: true });399      }400      if (sourceType === 'local') {401        const { storyId, storiesHash, refId } = store.getState();402        // create a list of related stories to be preloaded403        const toBePreloaded = Array.from(404          new Set([405            api.findSiblingStoryId(storyId, storiesHash, 1, true),406            api.findSiblingStoryId(storyId, storiesHash, -1, true),407          ])408        ).filter(Boolean);409        fullAPI.emit(PRELOAD_ENTRIES, {410          ids: toBePreloaded,411          options: { target: refId },412        });413      }414    });415    fullAPI.on(SET_STORIES, function handler(data: SetStoriesPayload) {416      const { ref } = getEventMetadata(this, fullAPI);417      const setStoriesData = data.v ? denormalizeStoryParameters(data) : data.stories;418      if (!ref) {419        if (!data.v) {420          throw new Error('Unexpected legacy SET_STORIES event from local source');...

Using AI Code Generation

1import { findSiblingStoryId } from '@storybook/addon-storyshots';2import { findSiblingStoryId } from '@storybook/react/dist/client/preview';3import { findSiblingStoryId } from '@storybook/vue/dist/client/preview';4import { findSiblingStoryId } from '@storybook/angular/dist/client/preview';5import { findSiblingStoryId } from '@storybook/html/dist/client/preview';6import { findSiblingStoryId } from '@storybook/svelte/dist/client/preview';7import { findSiblingStoryId } from '@storybook/ember/dist/client/preview';8import { findSiblingStoryId } from '@storybook/preact/dist/client/preview';9import { findSiblingStoryId } from '@storybook/web-components/dist/client/preview';10import { findSiblingStoryId } from '@storybook/aurelia/dist/client/preview';11import { findSiblingStoryId } from '@storybook/marko/dist/client/preview';12import { findSiblingStoryId } from '@storybook/riot/dist/client/preview';13import { findSiblingStoryId } from '@storybook/rax/dist/client/preview';14import { findSiblingStoryId } from '@storybook/mithril/dist/client/preview';15import { findSiblingStoryId } from '@storybook/riot/dist/client/preview';16import { findSiblingStoryId } from '@storybook/rax/dist/client/preview';

Using AI Code Generation

1const findSiblingStoryId = require('storybook-root').findSiblingStoryId;2const siblingStoryId = findSiblingStoryId('test-story');3const findSiblingStoryId = require('storybook-root').findSiblingStoryId;4const siblingStoryId = findSiblingStoryId('test-story');5const findSiblingStoryId = require('storybook-root').findSiblingStoryId;6const siblingStoryId = findSiblingStoryId('test-story');7const findSiblingStoryId = require('storybook-root').findSiblingStoryId;8const siblingStoryId = findSiblingStoryId('test-story');9const findSiblingStoryId = require('storybook-root').findSiblingStoryId;10const siblingStoryId = findSiblingStoryId('test-story');11const findSiblingStoryId = require('storybook-root').findSiblingStoryId;12const siblingStoryId = findSiblingStoryId('test-story');13const findSiblingStoryId = require('storybook-root').findSiblingStoryId;14const siblingStoryId = findSiblingStoryId('test-story');15const findSiblingStoryId = require('storybook-root').findSiblingStoryId;16const siblingStoryId = findSiblingStoryId('test-story');17const findSiblingStoryId = require('storybook-root').findSiblingStoryId;18const siblingStoryId = findSiblingStoryId('test-story');19const findSiblingStoryId = require('storybook-root').findSiblingStoryId;20const siblingStoryId = findSiblingStoryId('test-story');21const findSiblingStoryId = require('storybook-root').findSiblingStoryId;22const siblingStoryId = findSiblingStoryId('test-story');23const findSiblingStoryId = require('storybook-root').findSiblingStoryId;24const siblingStoryId = findSiblingStoryId('

Using AI Code Generation

1import { findSiblingStoryId } from "storybook-root";2export const getSiblingStoryId = (storyId, direction) => {3  return findSiblingStoryId(storyId, direction);4};5export const findSiblingStoryId = (storyId, direction) => {6  const storyIndex = storyStore.storyIndex.storyIdToStoryIndex[storyId];7  const story = storyStore.storyIndex.stories[storyIndex];8  const storyKind = story.kind;9  const storyName = story.name;10  ].indexOf(storyId);11        ];12  return siblingStoryId;13};14import { getSiblingStoryId } from "test";15document.addEventListener("keydown", (event) => {16  if (event.key === "ArrowRight") {17    const siblingStoryId = getSiblingStoryId(storyId, "next");18    navigate(siblingStoryId);19  }20  if (event.key === "ArrowLeft") {21    const siblingStoryId = getSiblingStoryId(storyId, "previous");22    navigate(siblingStoryId);23  }24});25import "storybook-root";26module.exports = {27};28module.exports = {29};30import "storybook-root";31module.exports = {32};33import "storybook-root";34module.exports = {

Using AI Code Generation

1import { findSiblingStoryId } from 'storybook-root'2const siblingStoryId = findSiblingStoryId({ storyId, direction: 'next' })3const siblingStoryId = findSiblingStoryId({ storyId, direction: 'previous' })4const siblingStoryId = findSiblingStoryId({ storyId, direction: 'first' })5const siblingStoryId = findSiblingStoryId({ storyId, direction: 'last' })6const siblingStoryId = findSiblingStoryId({ storyId, direction: 'next' })7const siblingStoryId = findSiblingStoryId({ storyId, direction: 'previous' })8const siblingStoryId = findSiblingStoryId({ storyId, direction: 'first' })9const siblingStoryId = findSiblingStoryId({ storyId, direction: 'last' })

Using AI Code Generation

1const findSiblingStoryId = require('storybook-root').findSiblingStoryId;2const storyId = findSiblingStoryId('test.js');3console.log(storyId);4const findSiblingStoryIds = require('storybook-root').findSiblingStoryIds;5const storyIds = findSiblingStoryIds('test.js');6console.log(storyIds);7const findStorybookRoot = require('storybook-root').findStorybookRoot;8const storybookRoot = findStorybookRoot('test.js');9console.log(storybookRoot);10const findStorybookConfig = require('storybook-root').findStorybookConfig;11const storybookConfig = findStorybookConfig('test.js');12console.log(storybookConfig);13const findStorybookConfigDir = require('storybook-root').findStorybookConfigDir;14const storybookConfigDir = findStorybookConfigDir('test.js');15console.log(storybookConfigDir);16const findStorybookConfigFile = require('storybook-root').findStorybookConfigFile;17const storybookConfigFile = findStorybookConfigFile('test.js');18console.log(storybookConfigFile);19const findStorybookConfigDirRelativeToStorybookRoot = require('storybook-root').findStorybookConfigDirRelativeToStorybookRoot;20const storybookConfigDirRelativeToStorybookRoot = findStorybookConfigDirRelativeToStorybookRoot('test.js');21console.log(storybookConfigDirRelativeToStorybookRoot);

Using AI Code Generation

1import { findSiblingStoryId } from 'storybook-root';2const storyId = findSiblingStoryId('some-story-id', 1);3import { findSiblingStoryId } from 'storybook-root';4const storyId = findSiblingStoryId('some-story-id', -1);5import { findSiblingStoryId } from 'storybook-root';6const storyId = findSiblingStoryId('some-story-id', 2);7import { findSiblingStoryId } from 'storybook-root';8const storyId = findSiblingStoryId('some-story-id', -2);9import { findSiblingStoryId } from 'storybook-root';10const storyId = findSiblingStoryId('some-story-id', 3);11import { findSiblingStoryId } from 'storybook-root';12const storyId = findSiblingStoryId('some-story-id', -3);13import { findSiblingStoryId } from 'storybook-root';14const storyId = findSiblingStoryId('some-story-id', 4);15import { findSiblingStoryId } from 'storybook-root';16const storyId = findSiblingStoryId('some-story-id', -4);

Using AI Code Generation

1import { findSiblingStoryId } from 'storybook-root';2const storyId = findSiblingStoryId('button', 'primary');3console.log(storyId);4import { findSiblingStoryId } from 'storybook-root';5const storyId = findSiblingStoryId('button', 'primary');6console.log(storyId);

Using AI Code Generation

1import { findSiblingStoryId } from 'storybook-root';2const storyId = findSiblingStoryId('Button', 'Primary');3console.log(storyId);4import { findSiblingStoryId } from 'storybook-root';5const storyId = findSiblingStoryId('Button', 'Primary');6console.log(storyId);7import { findSiblingStoryId } from 'storybook-root';8const storyId = findSiblingStoryId('Button', 'Primary');9console.log(storyId);10import { findSiblingStoryId } from 'storybook-root';11const storyId = findSiblingStoryId('Button', 'Primary');12console.log(storyId);13import { findSiblingStoryId } from 'storybook-root';14const storyId = findSiblingStoryId('Button', 'Primary');15console.log(storyId);16import { findSiblingStoryId } from 'storybook-root';17const storyId = findSiblingStoryId('Button', 'Primary');18console.log(storyId);19const { findSiblingStoryId } = require('storybook-root');20const storyId = findSiblingStoryId('Button', 'Primary');21console.log(storyId);22const { findSiblingStoryId } = require('storybook-root');23const storyId = findSiblingStoryId('Button', 'Primary');24console.log(storyId);

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.