@storybook/react#addParameters JavaScript Examples

addParameters({
  // configure storybook-design-token
  designToken: {
    files: {
      css: cssTokenFiles,
    }
  },
  docs: {
    // configure @storybook/theming
    theme: virtuosoTheme,
  },
  options: {
    // storySort: {
    //   method: 'alphabetical',
    //   order: ['Introduction', 'Basics'],
    //   locales: 'en-US',
    // },
    /**
     * id to select an addon panel
     * @type {String}
     */
    selectedPanel: 'storybook/a11y/panel',
  }
});

// Parameters
addParameters({
  options: {
    theme,
    showPanel: false,
    isFullscreen: false,
    storySort: undefined,
    isToolshown: true,
  },
  i18n: {
    provider: ({ children }) => <React.Fragment>{children}</React.Fragment>,
    supportedLocales: ['LTR', 'RTL'],
    providerLocaleKey: 'locale',
    getDirection: locale => locale.toLowerCase(),
  },
});

// Parameters
addParameters({
  options: {
    theme,
    showPanel: false,
    isToolshown: true,
  },
  i18n: {
    provider: ({ children }) => <React.Fragment>{children}</React.Fragment>,
    supportedLocales: ['LTR', 'RTL'],
    providerLocaleKey: 'locale',
    getDirection: locale => locale.toLowerCase(),
  },
});

addParameters({
  options: {
    /**
     * display the top-level grouping as a "root" in the sidebar
     * @type {Boolean}
     */
    showRoots: true,
  }
});

addParameters({
	options: {
		storySort: {
			method: sortStories({
				Introduction: ['Welcome', 'Theming', 'Localisation'],
			}),
			order: [
				'Introduction',
				['Welcome', 'Theming', 'Localisation'],
				'Form',
				'Modals',
				'Others',
			],
		},
		showRoots: true,
	},
});

addParameters({
  options: {
    showRoots: true,
  },
  repository: {
    baseUrl: 'https://github.com/DAN-AKL/storybook-documentation-primitives',
    branch: 'master',
  },
});

addParameters({
  options: {
    storySort: (a, b) => {
      if (a[0].includes('docs-')) {
        if (a[0].includes('intro-')) {
          return -1;
        }

        return 0;
      }

      return 1;
    }
  },
  docs: {
    container: DocsContainer,
    page: DocsPage,
  },
});

addParameters({
  options: {
    /**
     * show story component as full screen
     * @type {Boolean}
     */
    isFullscreen: false,
    /**
     * display panel that shows a list of stories
     * @type {Boolean}
     */
    showNav: true,
    /**
     * display panel that shows addon configurations
     * @type {Boolean}
     */
    showPanel: true,
    /**
     * where to show the addon panel
     * @type {('bottom'|'right')}
     */
    panelPosition: 'right',
    /**
     * regex for finding the hierarchy separator
     * @example:
     *   null - turn off hierarchy
     *   /\// - split by `/`
     *   /\./ - split by `.`
     *   /\/|\./ - split by `/` or `.`
     * @type {Regex}
     */
    hierarchySeparator: /\/|\./,
    /**
     * regex for finding the hierarchy root separator
     * @example:
     *   null - turn off multiple hierarchy roots
     *   /\|/ - split by `|`
     * @type {Regex}
     */
    hierarchyRootSeparator: /\|/,
    /**
     * sidebar tree animations
     * @type {Boolean}
     */
    sidebarAnimations: true,
    /**
     * enable/disable shortcuts
     * @type {Boolean}
     */
    enableShortcuts: true,
    /**
     * show/hide tool bar
     * @type {Boolean}
     */
    isToolshown: true,
    /**
     * theme storybook, see link below
     */
    theme: undefined,
    /**
     * function to sort stories in the tree view
     * common use is alphabetical `(a, b) => a[1].id.localeCompare(b[1].id)`
     * if left undefined, then the order in which the stories are imported will
     * be the order they display
     * @type {Function}
     */
    storySort: undefined,
  },
});

addParameters({
  viewport: {
    viewports: {
      ...INITIAL_VIEWPORTS,
    },
  },
})

addParameters({
  info: {
    inline: true,
  },
})

addParameters({
  viewport: {
    viewports: {
      ...INITIAL_VIEWPORTS,
    },
  },
})

addParameters({
  info: {
    inline: true,
  },
})

addParameters({
  info: {
    header: false,
    inline: true,
    source: true
  }
});

addParameters({
  controls: {
    expanded: true,
    sort: "requiredFirst"
  },
  docs: {
    inlineStories: true,
    container: ({ children, context }) => (
      <DocsContainer context={context}>
        {children}
        {<DocFooter />}
      </DocsContainer>
    ),
    page: DocsPage,
    components: {
      h1: ComponentName,
      h2: SectionName,
      h3: Title,
      li: AnchorListItem,
      a: LinkComponent,
      p: Paragraph,
      Tip,
      ComponentRules,
      UsageGuidelines,
      FunctionArguments,
      FunctionArgument,
      RelatedComponents
    }
  },
  viewMode: "docs",
  previewTabs: {
    "storybook/docs/panel": {
      index: -1
    },
    canvas: { title: "Sandbox" }
  },
  themes: {
    default: "Light",
    list: [
      { name: "Light", class: "light-app-them", color: "#ffffff" },
      { name: "Dark", class: "dark-app-theme", color: "#1C1F3B" },
      { name: "Black", class: "black-app-theme", color: "#111111" },
      { name: "Hacker", class: "hacker_theme-app-theme", color: "#282a36" }
    ]
  },
  options: {
    storySort: {
      order: [
        "Welcome",
        "Foundations",
        "Buttons",
        "Inputs",
        "Data display",
        "Media",
        "Popover",
        "Pickers",
        "*",
        "Accessibility",
        "Hooks"
      ]
    }
  }
});

addParameters({
  options: {
    theme: {
      brandTitle: `ibm-messaging/kafka-java-vertx-starter UI storybook`,
      brandUrl: 'https://github.com/ibm-messaging/kafka-java-vertx-starter',
    },
  },
});

addParameters({
  viewport: {
    viewports: INITIAL_VIEWPORTS,
  },
});

addParameters({
  viewport: {}
});