wix-storybook-utils/src/StoryPage/hooks/useStorybokBuilderApi/transformStoryStructure.ts

Utilities for automated component documentation within Storybook

import { StoryExamples } from '../../../typings/story';
import type { StoryData } from './useStorybookBuilderApi';

export const transformData = (data: StoryData) => {
  const demo = data.demo;
  const content = {
    title: data.title,
    description: data.description,
    do: data.do,
    dont: data.dont,
    featureExamples:
      data.featureExamples &&
      data.featureExamples.map(({ title, description, wide, figmaLink }) => ({
        title,
        description,
        example: title,
        wide,
        figmaLink,
      })),
    developerExamples: data.developerExamples && data.developerExamples.map(
      ({ title, description, wide, figmaLink }) => ({
        title,
        description,
        example: title,
        wide,
        figmaLink
      })),
    accessibilityExamples: data.accessibilityExamples && data.accessibilityExamples.map(
      ({ title, description, wide, figmaLink }) => ({
        title,
        description,
        example: title,
        wide,
        figmaLink
      })),
    commonUseCaseExamples:
      data.commonUseCaseExamples &&
      data.commonUseCaseExamples.map(({ title, description, wide, figmaLink }) => ({
        title,
        description,
        example: title,
        wide,
        figmaLink
      })),
  };
  const featureExamples =
    data.featureExamples &&
    data.featureExamples.reduce<StoryExamples>((acc, { title, example }) => {
      acc[title] = example;
      return acc;
    }, {});

  const developerExamples = 
    data.developerExamples &&
    data.developerExamples.reduce<StoryExamples>((acc, { title, example }) => {
      acc[title] = example;
      return acc;
    }, {});

  const accessibilityExamples = 
    data.accessibilityExamples &&
    data.accessibilityExamples.reduce<StoryExamples>((acc, { title, example }) => {
      acc[title] = example;
      return acc;
    }, {});

  const commonUseCaseExamples =
    data.commonUseCaseExamples &&
    data.commonUseCaseExamples.reduce<StoryExamples>((acc, { title, example }) => {
      acc[title] = example;
      return acc;
    }, {});

  const examples = { ...featureExamples, ...developerExamples, ...accessibilityExamples, ...commonUseCaseExamples };

  return { demo, content, examples };
};