react-styleguidist
- Version 13.1.3
- Published
- 420 kB
- 64 dependencies
- MIT license
Install
npm i react-styleguidist
yarn add react-styleguidist
pnpm add react-styleguidist
Overview
React components style guide generator
Index
Interfaces
Type Aliases
Namespaces
Interfaces
interface BaseComponent
interface BaseComponent {}
property description
description?: string;
property exampleMode
exampleMode?: ExpandMode;
property filepath
filepath?: string;
property hasExamples
hasExamples?: boolean;
property href
href?: string;
property name
name?: string;
property pathLine
pathLine?: string;
property slug
slug?: string;
property usageMode
usageMode?: ExpandMode;
interface BaseSection
interface BaseSection {}
property description
description?: string;
property exampleMode
exampleMode?: ExpandMode;
property expand
expand?: boolean;
property external
external?: boolean;
property href
href?: string;
property ignore
ignore?: string | string[];
property name
name?: string;
property sectionDepth
sectionDepth?: number;
property slug
slug?: string;
property usageMode
usageMode?: ExpandMode;
interface CodeExample
interface CodeExample {}
interface Component
interface Component extends BaseComponent {}
property metadata
metadata?: { tags?: string[];};
property module
module?: number;
property props
props?: { displayName?: string; visibleName?: string; description?: string; methods?: MethodDescriptor[]; props?: PropDescriptor[]; tags?: TagProps; example?: Example[]; examples?: Example[];};
property visibleName
visibleName?: string;
interface ConfigSection
interface ConfigSection extends BaseSection {}
Used in the config file and at the early stages of processing in
schema/config.ts
this is the type that is used
property components
components?: string | string[] | (() => string[]);
property content
content?: string;
property sections
sections?: ConfigSection[];
interface LoaderComponent
interface LoaderComponent extends BaseComponent {}
interface LoaderSection
interface LoaderSection extends BaseSection {}
Type returned when sections are transformed to their webpack loadable equivalents
property components
components: LoaderComponent[];
property content
content?: RequireItResult | MarkdownExample;
property sections
sections: LoaderSection[];
property slug
slug?: string;
interface MarkdownExample
interface MarkdownExample {}
interface MethodWithDocblock
interface MethodWithDocblock extends MethodDescriptor {}
property docblock
docblock: string;
interface ProcessedSection
interface ProcessedSection extends BaseSection {}
property externalLink
externalLink?: boolean;
property filepath
filepath?: string;
property href
href?: string;
property visibleName
visibleName?: string;
interface ProcessedStyleguidistConfig
interface ProcessedStyleguidistConfig extends BaseStyleguidistConfig {}
interface PropsObject
interface PropsObject extends Omit<TempPropsObject, 'props'> {}
interface RequireItResult
interface RequireItResult {}
interface RuntimeCodeExample
interface RuntimeCodeExample extends CodeExample {}
method evalInContext
evalInContext: (a: string) => () => any;
interface SanitizedStyleguidistConfig
interface SanitizedStyleguidistConfig extends BaseStyleguidistConfig {}
property sections
sections: ConfigSection[];
interface Section
interface Section extends ProcessedSection {}
Section used on the client in javascript It is the output of the function
client/utils/processSection
property components
components?: Component[];
property content
content?: Example[] | string;
property sections
sections?: Section[];
interface StyleguidistConfig
interface StyleguidistConfig extends RecursivePartial<Omit<SanitizedStyleguidistConfig, 'defaultExample'>> {}
definition of the config object where everything is optional note that teh default example can be both a string and a boolean but ends up only being a string after sanitizing
property defaultExample
defaultExample?: string | boolean;
interface StyleguidistLoaderContext
interface StyleguidistLoaderContext extends LoaderContext<OptionsType> {}
interface TempPropsObject
interface TempPropsObject extends DocumentationObject {}
property displayName
displayName: string;
property doclets
doclets: Record<string, any>;
property example
example?: RequireItResult | null;
property methods
methods?: MethodWithDocblock[];
property visibleName
visibleName?: string;
interface Theme
interface Theme {}
When the theme is to be used in a component, it will have all it's values set. None of those declarations should be optional
property borderRadius
borderRadius: number;
property buttonTextTransform
buttonTextTransform: string;
property color
color: { base: string; light: string; lightest: string; link: string; linkHover: string; focus: string; border: string; name: string; type: string; error: string; baseBackground: string; codeBackground: string; sidebarBackground: string; ribbonBackground: string; ribbonText: string; codeBase: string; codeComment: string; codePunctuation: string; codeProperty: string; codeDeleted: string; codeString: string; codeInserted: string; codeOperator: string; codeKeyword: string; codeFunction: string; codeVariable: string;};
property fontFamily
fontFamily: { base: string[]; monospace: string[];};
property fontSize
fontSize: { base: number; text: number; small: number; h1: number; h2: number; h3: number; h4: number; h5: number; h6: number;};
property maxWidth
maxWidth: number;
property mq
mq: { small: string;};
property sidebarWidth
sidebarWidth: number;
property space
space: number[];
property spaceFactor
spaceFactor: number;
interface TOCItem
interface TOCItem extends ProcessedSection {}
Item of the Table Of Contents used in ComponentsList TableOfContent filterSectionByName
property components
components?: TOCItem[];
property content
content?: React.ReactNode;
property forcedOpen
forcedOpen?: boolean;
property heading
heading?: boolean;
property initialOpen
initialOpen?: boolean;
property sections
sections?: TOCItem[];
property selected
selected?: boolean;
property shouldOpenInNewTab
shouldOpenInNewTab?: boolean;
Type Aliases
type Example
type Example = RuntimeCodeExample | MarkdownExample;
type ExpandMode
type ExpandMode = 'expand' | 'collapse' | 'hide';
type ProcessedStyleguidistCSSConfig
type ProcessedStyleguidistCSSConfig = Pick<ProcessedStyleguidistConfig, 'theme'> & Pick<ProcessedStyleguidistConfig, 'styles'>;
Namespaces
namespace @vxna/mini-html-webpack-template
module '@vxna/mini-html-webpack-template' {}
function template
template: (...args: any[]) => string;
namespace common-dir
module 'common-dir' {}
function commonDir
commonDir: (list: string[]) => string;
namespace deabsdeep
module 'deabsdeep' {}
function deabsdeep
deabsdeep: <T>(objectToFreze: T, opt?: Options) => T;
namespace deepfreeze
module 'deepfreeze' {}
function deepfreeze
deepfreeze: <T>(objectToFreze: T) => T;
namespace findup
module 'findup' {}
variable findup
const findup: { sync(cwd: string, path: string): string };
namespace github-slugger
module 'github-slugger' {}
namespace listify
module 'listify' {}
function listify
listify: (list: any[], opt?: ListifyOptions) => string;
namespace react-docgen
module 'react-docgen' {}
variable defaultHandlers
const defaultHandlers: Handler[];
variable resolver
const resolver: { findAllComponentDefinitions(ast: ASTNode): NodePath[]; findAllExportedComponentDefinitions( ast: ASTNode, recast: { visit: ( path: NodePath, handlers: { [handlerName: string]: () => boolean | undefined } ) => void; } ): NodePath[]; findExportedComponentDefinition(ast: ASTNode): NodePath | undefined;};
variable utils
const utils: { docblock: { getDoclets: (str?: string) => Record<string, any> } };
function parse
parse: ( source: string | Buffer, resolver?: ( ast: ASTNode, parser: { parse: (code: string) => ASTNode } ) => NodePath<any, any> | NodePath[], handlers?: Handler[], options?: Options) => DocumentationObject | DocumentationObject[];
Parse the components at filePath and return props, public methods, events and slots
Parameter filePath
absolute path of the parsed file
Parameter opts
interface Documentation
interface Documentation {}
method addComposes
addComposes: (moduleName: string) => void;
method get
get: (key: string) => any;
method getChildContextDescriptor
getChildContextDescriptor: (propName: string) => PropDescriptor;
method getContextDescriptor
getContextDescriptor: (propName: string) => PropDescriptor;
method getPropDescriptor
getPropDescriptor: (propName: string) => PropDescriptor;
method set
set: (key: string, value: any) => void;
method toObject
toObject: () => DocumentationObject;
interface DocumentationObject
interface DocumentationObject {}
property childContext
childContext?: { [chilCOntextName: string]: PropDescriptor;};
property composes
composes?: string[];
property context
context?: { [constextName: string]: PropDescriptor;};
property description
description?: string;
property displayName
displayName?: string;
property methods
methods?: MethodDescriptor[];
property props
props?: { [propName: string]: PropDescriptor;};
property tags
tags?: TagProps;
interface MethodDescriptor
interface MethodDescriptor {}
interface Options
interface Options {}
property babelrc
babelrc?: string;
property babelrcRoots
babelrcRoots?: boolean | string | string[];
property configFile
configFile?: string;
property cwd
cwd?: string;
property envName
envName?: string;
property filename
filename?: string;
property root
root?: string;
property rootMode
rootMode?: 'root' | 'upward' | 'upward-optional';
interface PropDescriptor
interface PropDescriptor {}
property defaultValue
defaultValue?: any;
property description
description?: string;
property name
name: string;
property required
required?: boolean;
property tags
tags?: TagProps;
property type
type?: PropTypeDescriptor;
interface PropTypeDescriptor
interface PropTypeDescriptor {}
property computed
computed?: boolean;
property description
description?: string;
property name
name: | 'arrayOf' | 'custom' | 'enum' | 'array' | 'bool' | 'func' | 'number' | 'object' | 'string' | 'any' | 'element' | 'node' | 'symbol' | 'objectOf' | 'shape' | 'exact' | 'instanceOf' | 'elementType';
property raw
raw?: string;
property required
required?: boolean;
property value
value?: any;
interface TagObject
interface TagObject extends Omit<Tag, 'description'> {}
property description
description?: string;
interface TagParamObject
interface TagParamObject extends TagObject {}
interface TagProps
interface TagProps {}
property arg
arg?: TagParamObject[];
property argument
argument?: TagParamObject[];
property author
author?: TagObject[];
property deprecated
deprecated?: TagObject[];
property link
link?: TagObject[];
property param
param?: TagParamObject[];
property return
return?: TagParamObject[];
property returns
returns?: TagParamObject[];
property see
see?: TagObject[];
property since
since?: TagObject[];
property version
version?: TagObject[];
index signature
[title: string]: TagObject[] | undefined;
type Handler
type Handler = (documentation: Documentation, path: NodePath) => void;
namespace react-docgen-annotation-resolver
module 'react-docgen-annotation-resolver' {}
function annotationResolver
annotationResolver: ( ast: AnnoASTNode, recast: { visit: ( node: AnnoNodePath, handlers: { [handlerName: string]: () => boolean | undefined } ) => void; }) => AnnoNodePath[];
namespace react-docgen-displayname-handler
module 'react-docgen-displayname-handler' {}
function createDisplayNameHandler
createDisplayNameHandler: (componentPath: string) => Handler;
type Handler
type Handler = ( documentation: Documentation, path: DisplaNameHandlerNodePath) => void;
namespace strip-html-comments
module 'strip-html-comments' {}
function stripHtmlComments
stripHtmlComments: (text: string) => string;
namespace strip-shebang
module 'strip-shebang' {}
function stripShebang
stripShebang: (input: string) => string;
namespace webpack-merge
module 'webpack-merge' {}
variable webpackMerge
const webpackMerge: { (options: WebpackMergeOptions): mergeFunction; (...configs: MetaConfig[]): Configuration; unique( key: string, uniques: string[], getter?: (plugin: WebpackPluginInstance) => string | undefined | false ): customizeArrayFuntion;};
Package Files (23)
- lib/scripts/index.d.ts
- lib/typings/RsgComponent.d.ts
- lib/typings/RsgExample.d.ts
- lib/typings/RsgPropsObject.d.ts
- lib/typings/RsgRequireItResult.d.ts
- lib/typings/RsgSection.d.ts
- lib/typings/RsgStyleguidistConfig.d.ts
- lib/typings/RsgTheme.d.ts
- lib/typings/dependencies/acorn-jsx.d.ts
- lib/typings/dependencies/common-dir.d.ts
- lib/typings/dependencies/deabsdeep.d.ts
- lib/typings/dependencies/deepfreeze.d.ts
- lib/typings/dependencies/findup.d.ts
- lib/typings/dependencies/github-slugger.d.ts
- lib/typings/dependencies/glogg.d.ts
- lib/typings/dependencies/listify.d.ts
- lib/typings/dependencies/mini-html-webpack-template.d.ts
- lib/typings/dependencies/q-i.d.ts
- lib/typings/dependencies/react-docgen.d.ts
- lib/typings/dependencies/strip-shebang.d.ts
- lib/typings/dependencies/stripHtmlComments.d.ts
- lib/typings/dependencies/to-ast.d.ts
- lib/typings/dependencies/webpack-merge.d.ts
Dependencies (64)
- @tippyjs/react
- @types/react-test-renderer
- @vxna/mini-html-webpack-template
- acorn
- acorn-jsx
- assert
- ast-types
- buble
- clean-webpack-plugin
- clipboard-copy
- clsx
- common-dir
- copy-webpack-plugin
- core-js
- doctrine
- es6-object-assign
- es6-promise
- escape-string-regexp
- escodegen
- estree-walker
- fastest-levenshtein
- findup
- function.name-polyfill
- github-slugger
- glob
- glogg
- hash-sum
- is-plain-obj
- javascript-stringify
- jss
- jss-plugin-camel-case
- jss-plugin-compose
- jss-plugin-default-unit
- jss-plugin-global
- jss-plugin-isolate
- jss-plugin-nested
- kleur
- listify
- lodash
- lowercase-keys
- markdown-to-jsx
- mini-html-webpack-plugin
- mri
- ora
- prismjs
- prop-types
- q-i
- qss
- react-dev-utils
- react-docgen
- react-docgen-annotation-resolver
- react-docgen-displayname-handler
- react-group
- react-icons
- react-simple-code-editor
- recast
- remark
- strip-html-comments
- terser-webpack-plugin
- to-ast
- type-detect
- unist-util-visit
- webpack-dev-server
- webpack-merge
Dev Dependencies (64)
- @babel/cli
- @babel/core
- @babel/plugin-proposal-class-properties
- @babel/preset-env
- @babel/preset-flow
- @babel/preset-react
- @babel/preset-typescript
- @testing-library/jest-dom
- @testing-library/react
- @types/buble
- @types/copy-webpack-plugin
- @types/doctrine
- @types/escodegen
- @types/estree
- @types/hash-sum
- @types/jest
- @types/keymirror
- @types/lodash
- @types/markdown-to-jsx
- @types/node
- @types/prismjs
- @types/react
- @types/react-dom
- @types/terser-webpack-plugin
- @types/type-detect
- @types/webpack
- @types/webpack-dev-server
- @types/webpack-env
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- babel-core
- babel-eslint
- babel-jest
- babel-loader
- css-loader
- danger
- deabsdeep
- deepfreeze
- dog-names
- eslint
- eslint-config-tamia
- eslint-import-resolver-typescript
- eslint-plugin-compat
- eslint-plugin-import
- eslint-plugin-jsx-a11y
- eslint-plugin-react
- file-loader
- fs-extra
- husky
- jest
- keymirror
- lint-staged
- memfs
- prettier
- raf
- react
- react-dom
- react-test-renderer
- strip-shebang
- style-loader
- typescript
- url-loader
- webpack
- webpack-cli
Peer Dependencies (2)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-styleguidist
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-styleguidist)
- HTML<a href="https://www.jsdocs.io/package/react-styleguidist"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 4327 ms. - Missing or incorrect documentation? Open an issue for this package.