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

Copied to Clipboard!

How to use userOrAutoTitleFromSpecifier method in storybook-root

Best JavaScript code snippet using storybook-root

StoryIndexGenerator.ts

Source:StoryIndexGenerator.ts

...179    const entries = [] as IndexEntry[];180    try {181      const importPath = slash(normalizeStoryPath(relativePath));182      const makeTitle = (userTitle?: string) => {183        return userOrAutoTitleFromSpecifier(importPath, specifier, userTitle);184      };185      const storyIndexer = this.options.storyIndexers.find((indexer) =>186        indexer.test.exec(absolutePath)187      );188      if (!storyIndexer) {189        throw new Error(`No matching story indexer found for ${absolutePath}`);190      }191      const csf = await storyIndexer.indexer(absolutePath, { makeTitle });192      csf.stories.forEach(({ id, name, parameters }) => {193        if (!parameters?.docsOnly) {194          entries.push({ id, title: csf.meta.title, name, importPath, type: 'story' });195        }196      });197      if (this.options.docs.enabled) {198        // We always add a template for *.stories.mdx, but only if docs page is enabled for199        // regular CSF files200        if (storyIndexer.addDocsTemplate || this.options.docs.docsPage) {201          const name = this.options.docs.defaultName;202          const id = toId(csf.meta.title, name);203          entries.unshift({204            id,205            title: csf.meta.title,206            name,207            importPath,208            type: 'docs',209            storiesImports: [],210            standalone: false,211          });212        }213      }214    } catch (err) {215      if (err.name === 'NoMetaError') {216        logger.info(`ð¡ Skipping ${relativePath}: ${err}`);217      } else {218        logger.warn(`ð¨ Extraction error on ${relativePath}: ${err}`);219        throw err;220      }221    }222    return { entries, type: 'stories', dependents: [] } as StoriesCacheEntry;223  }224  async extractDocs(specifier: NormalizedStoriesSpecifier, absolutePath: Path) {225    const relativePath = path.relative(this.options.workingDir, absolutePath);226    try {227      if (!this.options.storyStoreV7) {228        throw new Error(`You cannot use \`.mdx\` files without using \`storyStoreV7\`.`);229      }230      const normalizedPath = normalizeStoryPath(relativePath);231      const importPath = slash(normalizedPath);232      // This `await require(...)` is a bit of a hack. It's necessary because233      // `docs-mdx` depends on ESM code, which must be asynchronously imported234      // to be used in CJS. Unfortunately, we cannot use `import()` here, because235      // it will be transpiled down to `require()` by Babel. So instead, we require236      // a CJS export from `@storybook/docs-mdx` that does the `async import` for us.237      // eslint-disable-next-line global-require238      const { analyze } = await require('@storybook/docs-mdx');239      const content = await fs.readFile(absolutePath, 'utf8');240      const result: {241        title?: ComponentTitle;242        of?: Path;243        name?: StoryName;244        isTemplate?: boolean;245        imports?: Path[];246      } = analyze(content);247      // Templates are not indexed248      if (result.isTemplate) return false;249      const absoluteImports = (result.imports as string[]).map((p) =>250        makeAbsolute(p, normalizedPath, this.options.workingDir)251      );252      // Go through the cache and collect all of the cache entries that this docs file depends on.253      // We'll use this to make sure this docs cache entry is invalidated when any of its dependents254      // are invalidated.255      const dependencies = this.findDependencies(absoluteImports);256      // Also, if `result.of` is set, it means that we're using the `<Meta of={XStories} />` syntax,257      // so find the `title` defined the file that `meta` points to.258      let ofTitle: string;259      if (result.of) {260        const absoluteOf = makeAbsolute(result.of, normalizedPath, this.options.workingDir);261        dependencies.forEach((dep) => {262          if (dep.entries.length > 0) {263            const first = dep.entries[0];264            if (path.resolve(this.options.workingDir, first.importPath).startsWith(absoluteOf)) {265              ofTitle = first.title;266            }267          }268        });269        if (!ofTitle)270          throw new Error(`Could not find "${result.of}" for docs file "${relativePath}".`);271      }272      // Track that we depend on this for easy invalidation later.273      dependencies.forEach((dep) => {274        dep.dependents.push(absolutePath);275      });276      const title = ofTitle || userOrAutoTitleFromSpecifier(importPath, specifier, result.title);277      const name = result.name || this.options.docs.defaultName;278      const id = toId(title, name);279      const docsEntry: DocsCacheEntry = {280        id,281        title,282        name,283        importPath,284        storiesImports: dependencies.map((dep) => dep.entries[0].importPath),285        type: 'docs',286        standalone: true,287      };288      return docsEntry;289    } catch (err) {290      logger.warn(`ð¨ Extraction error on ${relativePath}: ${err}`);...

autoTitle.test.ts

Source:autoTitle.test.ts

1import { normalizeStoriesEntry } from '@storybook/core-common';2import { expect } from '@jest/globals';3import { userOrAutoTitleFromSpecifier as userOrAuto } from './autoTitle';4expect.addSnapshotSerializer({5  print: (val: any) => val,6  test: (val) => true,7});8// Make these two the same so `normalizeStoriesEntry` doesn't change anything9const options = {10  configDir: '/path',11  workingDir: '/path',12};13const winOptions = {14  configDir: '\\path',15  workingDir: '\\path',16};17describe('userOrAutoTitleFromSpecifier', () => {18  describe('user title', () => {19    it('no match', () => {20      expect(21        userOrAuto(22          './ path / to / file.stories.js',23          normalizeStoriesEntry({ directory: './ other' }, options),24          'title'25        )26      ).toBeFalsy();27    });28    describe('no trailing slash', () => {29      it('match with no titlePrefix', () => {30        expect(31          userOrAuto(32            './path/to/file.stories.js',33            normalizeStoriesEntry({ directory: './path' }, options),34            'title'35          )36        ).toMatchInlineSnapshot(`title`);37      });38      it('match with titlePrefix', () => {39        expect(40          userOrAuto(41            './path/to/file.stories.js',42            normalizeStoriesEntry({ directory: './path', titlePrefix: 'atoms' }, options),43            'title'44          )45        ).toMatchInlineSnapshot(`atoms/title`);46      });47      it('match with hyphen path', () => {48        expect(49          userOrAuto(50            './path/to-my/file.stories.js',51            normalizeStoriesEntry({ directory: './path', titlePrefix: 'atoms' }, options),52            'title'53          )54        ).toMatchInlineSnapshot(`atoms/title`);55      });56      it('match with underscore path', () => {57        expect(58          userOrAuto(59            './path/to_my/file.stories.js',60            normalizeStoriesEntry({ directory: './path', titlePrefix: 'atoms' }, options),61            'title'62          )63        ).toMatchInlineSnapshot(`atoms/title`);64      });65      it('match with windows path', () => {66        expect(67          userOrAuto(68            './path/to_my/file.stories.js',69            normalizeStoriesEntry({ directory: '.\\path', titlePrefix: 'atoms' }, winOptions),70            'title'71          )72        ).toMatchInlineSnapshot(`atoms/title`);73      });74    });75    describe('trailing slash', () => {76      it('match with no titlePrefix', () => {77        expect(78          userOrAuto(79            './path/to/file.stories.js',80            normalizeStoriesEntry({ directory: './path/' }, options),81            'title'82          )83        ).toMatchInlineSnapshot(`title`);84      });85      it('match with titlePrefix', () => {86        expect(87          userOrAuto(88            './path/to/file.stories.js',89            normalizeStoriesEntry({ directory: './path/', titlePrefix: 'atoms' }, options),90            'title'91          )92        ).toMatchInlineSnapshot(`atoms/title`);93      });94      it('match with hyphen path', () => {95        expect(96          userOrAuto(97            './path/to-my/file.stories.js',98            normalizeStoriesEntry({ directory: './path/', titlePrefix: 'atoms' }, options),99            'title'100          )101        ).toMatchInlineSnapshot(`atoms/title`);102      });103      it('match with underscore path', () => {104        expect(105          userOrAuto(106            './path/to_my/file.stories.js',107            normalizeStoriesEntry({ directory: './path/', titlePrefix: 'atoms' }, options),108            'title'109          )110        ).toMatchInlineSnapshot(`atoms/title`);111      });112      it('match with windows path', () => {113        expect(114          userOrAuto(115            './path/to_my/file.stories.js',116            normalizeStoriesEntry({ directory: '.\\path\\', titlePrefix: 'atoms' }, winOptions),117            'title'118          )119        ).toMatchInlineSnapshot(`atoms/title`);120      });121    });122  });123  describe('auto title', () => {124    it('no match', () => {125      expect(126        userOrAuto(127          './ path / to / file.stories.js',128          normalizeStoriesEntry({ directory: './ other' }, options),129          undefined130        )131      ).toBeFalsy();132    });133    describe('no trailing slash', () => {134      it('match with no titlePrefix', () => {135        expect(136          userOrAuto(137            './path/to/file.stories.js',138            normalizeStoriesEntry({ directory: './path' }, options),139            undefined140          )141        ).toMatchInlineSnapshot(`to/file`);142      });143      it('match with titlePrefix', () => {144        expect(145          userOrAuto(146            './path/to/file.stories.js',147            normalizeStoriesEntry({ directory: './path', titlePrefix: 'atoms' }, options),148            undefined149          )150        ).toMatchInlineSnapshot(`atoms/to/file`);151      });152      it('match with trailing duplicate', () => {153        expect(154          userOrAuto(155            './path/to/button/button.stories.js',156            normalizeStoriesEntry({ directory: './path' }, options),157            undefined158          )159        ).toMatchInlineSnapshot(`to/button`);160      });161      it('match with trailing index', () => {162        expect(163          userOrAuto(164            './path/to/button/index.stories.js',165            normalizeStoriesEntry({ directory: './path' }, options),166            undefined167          )168        ).toMatchInlineSnapshot(`to/button`);169      });170      it('match with hyphen path', () => {171        expect(172          userOrAuto(173            './path/to-my/file.stories.js',174            normalizeStoriesEntry({ directory: './path' }, options),175            undefined176          )177        ).toMatchInlineSnapshot(`to-my/file`);178      });179      it('match with underscore path', () => {180        expect(181          userOrAuto(182            './path/to_my/file.stories.js',183            normalizeStoriesEntry({ directory: './path' }, options),184            undefined185          )186        ).toMatchInlineSnapshot(`to_my/file`);187      });188      it('match with windows path', () => {189        expect(190          userOrAuto(191            './path/to_my/file.stories.js',192            normalizeStoriesEntry({ directory: '.\\path' }, winOptions),193            undefined194          )195        ).toMatchInlineSnapshot(`to_my/file`);196      });197    });198    describe('trailing slash', () => {199      it('match with no titlePrefix', () => {200        expect(201          userOrAuto(202            './path/to/file.stories.js',203            normalizeStoriesEntry({ directory: './path/' }, options),204            undefined205          )206        ).toMatchInlineSnapshot(`to/file`);207      });208      it('match with titlePrefix', () => {209        expect(210          userOrAuto(211            './path/to/file.stories.js',212            normalizeStoriesEntry({ directory: './path/', titlePrefix: 'atoms' }, options),213            undefined214          )215        ).toMatchInlineSnapshot(`atoms/to/file`);216      });217      it('match with hyphen path', () => {218        expect(219          userOrAuto(220            './path/to-my/file.stories.js',221            normalizeStoriesEntry({ directory: './path/' }, options),222            undefined223          )224        ).toMatchInlineSnapshot(`to-my/file`);225      });226      it('match with underscore path', () => {227        expect(228          userOrAuto(229            './path/to_my/file.stories.js',230            normalizeStoriesEntry({ directory: './path/' }, options),231            undefined232          )233        ).toMatchInlineSnapshot(`to_my/file`);234      });235      it('match with windows path', () => {236        expect(237          userOrAuto(238            './path/to_my/file.stories.js',239            normalizeStoriesEntry({ directory: '.\\path\\' }, winOptions),240            undefined241          )242        ).toMatchInlineSnapshot(`to_my/file`);243      });244      it('camel-case file', () => {245        expect(246          userOrAuto(247            './path/to_my/MyButton.stories.js',248            normalizeStoriesEntry({ directory: './path' }, options),249            undefined250          )251        ).toMatchInlineSnapshot(`to_my/MyButton`);252      });253    });254  });...

autoTitle.ts

Source:autoTitle.ts

...81  storiesEntries: NormalizedStoriesSpecifier[],82  userTitle?: string83) => {84  for (let i = 0; i < storiesEntries.length; i += 1) {85    const title = userOrAutoTitleFromSpecifier(fileName, storiesEntries[i], userTitle);86    if (title) return title;87  }88  return userTitle || undefined;...

Using AI Code Generation

1const { userOrAutoTitleFromSpecifier } = require('storybook-root');2const { userOrAutoTitleFromSpecifier } = require('storybook-root');3const { userOrAutoTitleFromSpecifier } = require('storybook-root');4const { userOrAutoTitleFromSpecifier } = require('storybook-root');5const { userOrAutoTitleFromSpecifier } = require('storybook-root');6const { userOrAutoTitleFromSpecifier } = require('storybook-root');7const { userOrAutoTitleFromSpecifier } = require('storybook-root');8const { userOrAutoTitleFromSpecifier } = require('storybook-root');9const { userOrAutoTitleFromSpecifier } = require('storybook-root');10const { userOrAutoTitleFromSpecifier } = require('storybook-root');11const { userOrAutoTitleFromSpecifier } = require('storybook-root');12const { userOrAutoTitleFromSpecifier } = require('storybook-root');13const { userOrAutoTitleFromSpecifier } = require('storybook-root');14const { userOrAutoTitleFromSpecifier } = require('storybook-root');15const { userOrAutoTitleFromSpecifier } = require('storybook-root');

Using AI Code Generation

1import { userOrAutoTitleFromSpecifier } from 'storybook-root';2const title = userOrAutoTitleFromSpecifier(specifier);3export { userOrAutoTitleFromSpecifier } from './src/helpers';4export const userOrAutoTitleFromSpecifier = (specifier) => {5  const userTitle = specifier.title;6  return userTitle || 'Auto Title';7};8"devDependencies": {9}10const path = require('path');11module.exports = {12  webpackFinal: async (config) => {13    config.resolve.alias = {14      'storybook-root': path.resolve(__dirname, '../storybook-root'),15    };16    return config;17  },18};19import { userOrAutoTitleFromSpecifier } from 'storybook-root';20const title = userOrAutoTitleFromSpecifier(specifier);21export { userOrAutoTitleFromSpecifier } from './src/helpers';22export const userOrAutoTitleFromSpecifier = (specifier) => {23  const userTitle = specifier.title;24  return userTitle || 'Auto Title';25};

Using AI Code Generation

1import { userOrAutoTitleFromSpecifier } from 'storybook-root';2import { userOrAutoTitleFromSpecifier } from 'storybook-root';3import { userOrAutoTitleFromSpecifier } from 'storybook-root';4import { userOrAutoTitleFromSpecifier } from 'storybook-root';5import { userOrAutoTitleFromSpecifier } from 'storybook-root';6import { userOrAutoTitleFromSpecifier } from 'storybook-root';7import { userOrAutoTitleFromSpecifier } from 'storybook-root';

Using AI Code Generation

1import { userOrAutoTitleFromSpecifier } from 'storybook-root';2const title = userOrAutoTitleFromSpecifier('some-specifier');3import { autoTitleFromSpecifier } from 'storybook-root';4const title = autoTitleFromSpecifier('some-specifier');5import { userTitleFromSpecifier } from 'storybook-root';6const title = userTitleFromSpecifier('some-specifier');7import { userTitleFromSpecifier } from 'storybook-root';8const title = userTitleFromSpecifier('some-specifier');9import { userTitleFromSpecifier } from 'storybook-root';10const title = userTitleFromSpecifier('some-specifier');11import { userTitleFromSpecifier } from 'storybook-root';12const title = userTitleFromSpecifier('some-specifier');13import { userTitleFromSpecifier } from 'storybook-root';14const title = userTitleFromSpecifier('some-specifier');15import { userTitleFromSpecifier } from 'storybook-root';16const title = userTitleFromSpecifier('some-specifier');

Using AI Code Generation

1import { userOrAutoTitleFromSpecifier } from 'storybook-root-provider';2const storybookRootProvider = new StorybookRootProvider({3});4const stories = await storybookRootProvider.getStories();5const story = stories[0];6const title = userOrAutoTitleFromSpecifier(story.specifier);7const userOrAutoTitleFromSpecifier = (specifier) => {8  const match = specifier.match(/(.+)\((.+)\)/);9  if (match) {10    return match[1];11  }12  return specifier;13};14export { userOrAutoTitleFromSpecifier };15"exports": {16  ".": {17    "import": "./storybook-root-provider.js",18  },19  "./userOrAutoTitleFromSpecifier": {20    "import": "./storybook-root-provider.js",21  }22},23export { userOrAutoTitleFromSpecifier };24"exports": {25  ".": {26    "import": "./storybook-root-provider.js",27  },28  "./userOrAutoTitleFromSpecifier": {29    "import": "./storybook-root-provider.js",30  }31},32import { userOrAutoTitleFromSpecifier } from 'storybook-root-provider';33const storybookRootProvider = new StorybookRootProvider({

Using AI Code Generation

1import { userOrAutoTitleFromSpecifier } from 'storybook-root/dist/client/preview/title';2export const test = () => {3    const title = userOrAutoTitleFromSpecifier('Button');4    console.log(title);5}6import * as test from './test.js';7export default {8};9export const testStory = test;10const path = require('path');11module.exports = async ({ config, mode }) => {12    config.resolve.alias = {13        'storybook-root': path.resolve(__dirname, '../storybook-root'),14    };15    return config;16};

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.