How to use findSiblingStoryId method in storybook-root

Best JavaScript code snippet using storybook-root

stories.test.ts

Source:stories.test.ts Github

copy

Full Screen

...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);...

Full Screen

Full Screen

stories.ts

Source:stories.ts Github

copy

Full Screen

...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');...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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';

Full Screen

Using AI Code Generation

copy

Full Screen

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('

Full Screen

Using AI Code Generation

copy

Full Screen

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 = {

Full Screen

Using AI Code Generation

copy

Full Screen

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' })

Full Screen

Using AI Code Generation

copy

Full Screen

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);

Full Screen

Using AI Code Generation

copy

Full Screen

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);

Full Screen

Using AI Code Generation

copy

Full Screen

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);

Full Screen

Using AI Code Generation

copy

Full Screen

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);

Full Screen

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.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run storybook-root automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful