diff --git a/styleguide.config.js b/styleguide.config.js index 01cfa6a..5fc80d1 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -1,29 +1,63 @@ +/** + * React-Styleguideist Configuration Settings + * @author Justin Campbell + * @see https://react-styleguidist.js.org/docs/configuration + */ const path = require('path') + module.exports = { + /** + * The title that appears at the top of the navigation bar. + * @type {string} + * @example webqueue2 Style Guide + * @default + Style Guide + */ title: "webqueue2 Frontend Docs", + + /** + * Style guide version, displayed under the title in the sidebar. + * @type {number} + */ version: "0.0.1", - // How the example source code is shown. - // [ "collapse", "expand", "hide" ] - // Default: collapse + /** + * Defines the initial state of the example code tab. + * @type {string} "collapse" | "hide" | "expand" + * @default "collapse" + */ exampleMode: "collapse", - // How methods and props are shown. - // [ "collapse", "expand", "hide" ] - // Default: collapse + /** + * Defines the initial state of the methods/props tab. + * @type {string} "collapse" | "hide" | "expand" + * @default "collapse" + */ usageMode: "collapse", - // Creates separate pages for top level nav items. - // Default: "false" + /** + * Render one section or component per page. + * @type {boolean} + * @default false + */ pagePerSection: true, - // Styleguide Includes + /** + * Modules that are required for your style guide. + * @type {string[]} + */ require: [ // Material UI Resources path.join(__dirname, "docs/Styleguidist/material-icon.css"), path.join(__dirname, "docs/Styleguidist/roboto-font.css"), ], + /** + * Allows components to be grouped into sections with a title and overview content. + * Sections can also be content only, with no associated components (for example, a textual introduction). + * Sections can be nested. + * @type {Array} + * @see https://react-styleguidist.js.org/docs/configuration#sections + */ sections: [ { name: "Getting Started", @@ -35,10 +69,27 @@ module.exports = { } ], + /** + * Change HTML for the style guide app. + * An object with options to add a favicon, meta tags, inline JavaScript or CSS, etc. + * @type {Object | Function} + */ template: { favicon: "public/favicon.ico", }, + /** + * Customize styles of any Styleguidist’s component using + * an object, a function returning said object or a file path + * to a file exporting said styles. + * @type {Object | String | Function} + */ styles: "styleguide.style.js", + + /** + * Customize style guide UI fonts, colors, etc. + * using a theme object or the path to a file exporting such object. + * @type {Object | String} + */ theme: "styleguide.theme.js" } \ No newline at end of file diff --git a/styleguide.style.js b/styleguide.style.js index 6d3ec97..f3852b9 100644 --- a/styleguide.style.js +++ b/styleguide.style.js @@ -1,3 +1,9 @@ +/** + * React-Styleguideist Style Settings + * @author Justin Campbell + * @see https://github.com/styleguidist/react-styleguidist/tree/master/examples/themed + */ + module.exports = { // Render Area for Componenet Examples diff --git a/styleguide.theme.js b/styleguide.theme.js index a6723fb..5ae5611 100644 --- a/styleguide.theme.js +++ b/styleguide.theme.js @@ -1,4 +1,8 @@ -// See https://github.com/styleguidist/react-styleguidist/blob/master/src/client/styles/theme.ts +/** + * React-Styleguideist Theme Settings + * @author Justin Campbell + * @see https://github.com/styleguidist/react-styleguidist/tree/master/examples/themed + */ module.exports = { maxWidth: "1400px", } \ No newline at end of file