How to use react-styleguidist - 10 common examples

const allModulesCode = allModules.reduce((requires, requireRequest) => {
		// if we are looking at a remote example
		// resolve the requires from there

		if (requireRequest.importPath) {
			if (!requires[requireRequest.importPath]) {
				requires[requireRequest.importPath] = {}
			}
			const relativePath = /^\./.test(requireRequest.path)
				? path.join(requireRequest.importPath, requireRequest.path)
				: requireRequest.path
			requires[requireRequest.importPath][requireRequest.path] = requireIt(relativePath)
		} else {
			requires[requireRequest] = requireIt(requireRequest)
		}
		return requires
	}, {})

const allModulesCode = allModules.reduce((requires, requireRequest) => {
		// if we are looking at a remote example
		// resolve the requires from there

		if (requireRequest.importPath) {
			if (!requires[requireRequest.importPath]) {
				requires[requireRequest.importPath] = {}
			}
			const relativePath = /^\./.test(requireRequest.path)
				? path.join(requireRequest.importPath, requireRequest.path)
				: requireRequest.path
			requires[requireRequest.importPath][requireRequest.path] = requireIt(relativePath)
		} else {
			requires[requireRequest] = requireIt(requireRequest)
		}
		return requires
	}, {})

map(fullContext, (requireRequest, name) => [
				// const name$0 = require(path);
				b.variableDeclaration('const', [
					b.variableDeclarator(
						b.identifier(`${name}$${++marker}`),
						requireIt(requireRequest).toAST()
					)
				]),
				// const name = name$0.default || name$0;
				b.variableDeclaration('const', [
					b.variableDeclarator(
						b.identifier(name),
						b.logicalExpression(
							'||',
							b.identifier(`${name}$${marker}.default`),
							b.identifier(`${name}$${marker}`)
						)
					)
				])
			])
		)

export function processSection(
	section: Section,
	config: StyleguidistConfig,
	parentDepth?: number
): ProcessedSection {
	const contentRelativePath = section.content

	// Try to load section content file
	let content
	if (contentRelativePath) {
		const contentAbsolutePath = path.resolve(config.configDir, contentRelativePath)
		if (!fs.existsSync(contentAbsolutePath)) {
			throw new Error(`Styleguidist: Section content file not found: ${contentAbsolutePath}`)
		}
		content = requireIt(`!!${examplesLoader}?customLangs=vue|js|jsx!${contentAbsolutePath}`)
	}

	let sectionDepth

	if (parentDepth === undefined) {
		sectionDepth = section.sectionDepth !== undefined ? section.sectionDepth : 0
	} else {
		sectionDepth = parentDepth === 0 ? 0 : parentDepth - 1
	}

	return {
		name: section.name || '',
		exampleMode: section.exampleMode || config.exampleMode,
		usageMode: section.usageMode || config.usageMode,
		sectionDepth,
		description: section.description,

renderSections() {
    const { searchTerm } = this.state;
    const { sections, useRouterLinks } = this.props;
    // If there is only one section, we treat it as a root section
    // In this case the name of the section won't be rendered and it won't get left padding
    const firstLevel = sections.length === 1 ? sections[0].components : sections;
    const filtered = filterSectionsByName(firstLevel, searchTerm);
    return this.renderLevel(filtered, useRouterLinks);
  }

const scrollToOrigin = () => {
	const hash = window.location.hash
	if (hasInHash(hash, '#/') || hasInHash(hash, '#!/')) {
		// Extracts the id param of hash
		const idHashParam = getParameterByName(hash, 'id')

		// For default scroll scrollTop is the page top
		let scrollTop = 0

		if (idHashParam) {
			// Searches the node with the same id, takes his offsetTop
			// And with offsetTop, tries to scroll to node
			const idElement = document.getElementById(idHashParam)
			if (idElement && idElement.offsetTop) {
				scrollTop = idElement.offsetTop
			}
		}
		window.scrollTo(0, scrollTop)
	}

const defaultValueBlacklist = ['null', 'undefined']

        // Workaround for issue https://github.com/reactjs/react-docgen/issues/221
        // If prop has defaultValue it can not be required
        if (prop.defaultValue) {
            if (prop.type || prop.flowType) {
                const propName = prop.type ? prop.type.name : prop.flowType.type
    
                if (defaultValueBlacklist.indexOf(prop.defaultValue.value) > -1) {
                    return <code>{showSpaces(unquote(prop.defaultValue.value))}</code>
                } else if (propName === 'func' || propName === 'function') {
                    return 
                } else if (propName === 'shape' || propName === 'object') {
                    try {
                        // We eval source code to be able to format the defaultProp here. This
                        // can be considered safe, as it is the source code that is evaled,
                        // which is from a known source and safe by default
                        // eslint-disable-next-line no-eval
                        const object = eval(`(${prop.defaultValue.value})`)

                        return (
                            
                        )
                    } catch (e) {

export function updateConfig(config: ProcessedStyleGuidistConfigObject) {
	// Set verbose mode from config option or command line switch
	config.verbose = config.verbose || !!process.env.VUESG_VERBOSE

	// Setup logger *before* config validation (because validations may use logger to print warnings)
	setupLogger(config.logger, config.verbose)

	return config
}

export default function getConfig(
	configParam: string | StyleguidistConfig | { serverPort?: string | number },
	update?: (conf: StyleguidistConfig | {}) => StyleguidistConfig
): StyleguidistConfig {
	let configFilepath
	let config: StyleguidistConfig | { serverPort?: string | number }
	if (isString(configParam)) {
		// Load config from a given file
		configFilepath = path.resolve(process.cwd(), configParam)
		if (!fs.existsSync(configFilepath)) {
			throw new StyleguidistError('Styleguidist config not found: ' + configFilepath + '.')
		}
		config = {}
	} else if (!isPlainObject(configParam)) {
		// Try to read config options from a file
		configFilepath = findConfigFile()
		config = {}
	} else {
		config = configParam
	}

	if (typeof configFilepath === 'string') {
		config = require(configFilepath)
	}

	if (update) {
		config = update(config)

)}
    
  );
}

StyleGuideRenderer.propTypes = {
  classes: PropTypes.object.isRequired,
  title: PropTypes.string.isRequired,
  homepageUrl: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired,
  toc: PropTypes.node.isRequired,
  hasSidebar: PropTypes.bool
};

export default Styled(styles)(StyleGuideRenderer);