How to use the @storybook/csf.toId function in @storybook/csf

if (addons === '0') {
    addition.showPanel = false;
  }
  if (panelRight === '1') {
    addition.panelPosition = 'right';
  }
  if (stories === '0') {
    addition.showNav = false;
  }

  if (addonPanel) {
    selectedPanel = addonPanel;
  }

  if (selectedKind && selectedStory) {
    const id = toId(selectedKind, selectedStory);
    setTimeout(() => navigate(`/${viewMode}/${id}`, { replace: true }), 1);
  } else if (selectedKind) {
    // Create a "storyId" of the form `kind-sanitized--*`
    const standInId = toId(selectedKind, 'star').replace(/star$/, '*');
    setTimeout(() => navigate(`/${viewMode}/${standInId}`, { replace: true }), 1);
  } else if (!queryPath || queryPath === '/') {
    setTimeout(() => navigate(`/${viewMode}/*`, { replace: true }), 1);
  } else if (Object.keys(query).length > 1) {
    // remove other queries
    setTimeout(() => navigate(`${queryPath}`, { replace: true }), 1);
  }

  return { viewMode, layout: addition, selectedPanel, location, path, customQueryParams, storyId };
};

}

  const framework = tmp.callee && tmp.callee.name && storiesOfIdentifiers[tmp.callee.name];

  const storyName = addArgs[0];
  const body = addArgs[1];
  const lastArg = addArgs[addArgs.length - 1];

  if (storyName.type !== 'Literal' && storyName.type !== 'StringLiteral') {
    // if story name is not literal, it's much harder to extract it
    return {};
  }

  const kind = findRelatedKind(node.object) || '';
  if (kind && storyName.value) {
    const key = toId(kind, storyName.value);
    let idToFramework;
    if (key && framework) {
      idToFramework = { [key]: framework };
    }

    return {
      toAdd: {
        [key]: {
          // Debug: code: source.slice(storyName.start, lastArg.end),
          startLoc: {
            col: storyName.loc.start.column,
            line: storyName.loc.start.line,
          },
          endLoc: {
            col: lastArg.loc.end.column,
            line: lastArg.loc.end.line,

addition.panelPosition = 'right';
  }
  if (stories === '0') {
    addition.showNav = false;
  }

  if (addonPanel) {
    selectedPanel = addonPanel;
  }

  if (selectedKind && selectedStory) {
    const id = toId(selectedKind, selectedStory);
    setTimeout(() => navigate(`/${viewMode}/${id}`, { replace: true }), 1);
  } else if (selectedKind) {
    // Create a "storyId" of the form `kind-sanitized--*`
    const standInId = toId(selectedKind, 'star').replace(/star$/, '*');
    setTimeout(() => navigate(`/${viewMode}/${standInId}`, { replace: true }), 1);
  } else if (!queryPath || queryPath === '/') {
    setTimeout(() => navigate(`/${viewMode}/*`, { replace: true }), 1);
  } else if (Object.keys(query).length > 1) {
    // remove other queries
    setTimeout(() => navigate(`${queryPath}`, { replace: true }), 1);
  }

  return { viewMode, layout: addition, selectedPanel, location, path, customQueryParams, storyId };
};

export const getIdFromLegacyQuery = ({ path, selectedKind, selectedStory }) =>
  (path && pathToId(path)) || (selectedKind && selectedStory && toId(selectedKind, selectedStory));

return new Promise(resolve => {
    const { storyId } = storyStore.getSelection();
    const current = storyStore.fromId(storyId);
    resolve(generateUrl(toId(kind || current.kind, name)));
  });
};

export function handleExportedName(kind, storyName, node) {
  const startLoc = {
    col: node.loc.start.column,
    line: node.loc.start.line,
  };
  const endLoc = {
    col: node.loc.end.column,
    line: node.loc.end.line,
  };
  return {
    [toId(kind, storyName)]: {
      startLoc,
      endLoc,
      startBody: startLoc,
      endBody: endLoc,
    },
  };
}