@component-controls/render NPM

Overview

Logging utilities. Uses the chalk package for logging utput

Installation

This package is usually installed as part of the @component-controls package, but you can also install it standalone:

$ npm install @component-controls/logger --save-dev

API

renderers

type

defined in @component-controls/render/core/render/src/index.ts

properties

Name Type

react* function (props*story*name*: stringstoryName: stringid: stringrawId: stringdoc: stringstoryFn: function (controlValues[string]: anycontext: any) => Promise | anydescription: stringarguments: StoryArgument[]locstart*line*: column*: end*line*: column*: source: stringsubtitle: stringdynamic: booleandynamicId: stringcomponent: string | Record<string, unknown> | ElementType<Props>subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)>controls[string]: ComponentControlText | ComponentControlBoolean | ComponentControlColor | ComponentControlDate | ComponentControlObject<P> | ComponentControlButton | ComponentControlOptions | ComponentControlNumber | ComponentControlArray | ComponentControlFilessmartControlssmart: booleaninclude: string[] | IncludeFnexclude: string[] | IncludeFndecorators: StoryRenderFn[]plugins: anycategory: stringdoctitle*: stringtype: "story" | "blog" | "page" | "tags" | "author" | stringroute: stringdate: stringdateModified: stringstatus: "draft" | "published"tags: string[]keywords: string[]description: string | JSX.Elementimage: stringauthor: stringorder: numbermenu: stringtemplatebind*: function (props: Story<Props>) => Example<>bind*: function (props*: ) => Example<Props>source: stringstoryName: stringid: stringrawId: stringdoc: stringstoryFn: StoryRenderFndescription: stringloc: CodeLocationsubtitle: stringdynamic: booleandynamicId: stringcomponentat*: subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)>smartControls: SmartControlsdecorators: StoryRenderFn[]plugins: anycategory: stringcontrols*: source: stringstoryName: stringid: stringrawId: stringdoc: stringstoryFn: StoryRenderFndescription: stringloc: CodeLocationsubtitle: stringdynamic: booleandynamicId: stringcomponent: string | Record<string, unknown> | ElementType<Props>subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)>smartControls: SmartControlsdecorators: StoryRenderFn[]plugins: anycategory: stringcontrols: ExampleControlsstories: string[]source: stringfileName: stringpackage: stringtestFiles: string[]testCoverage: string[]testData: stringrenderFn: FrameworkRenderFndata[string]: componentsLookup[string]: stringMDXPage: anyisMDXComponent: booleanparameters: anycomponent: string | Record<string, unknown> | ElementType<Props>subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)>controls[string]: ComponentControlText | ComponentControlBoolean | ComponentControlColor | ComponentControlDate | ComponentControlObject<P> | ComponentControlButton | ComponentControlOptions | ComponentControlNumber | ComponentControlArray | ComponentControlFilessmartControlssmart: booleaninclude: string[] | IncludeFnexclude: string[] | IncludeFndecorators: StoryRenderFn[]plugins: anycategory: stringnavSidebar: booleancontextSidebar: booleanfullPage: booleanvalues[string]: ComponentControl | anyoptions: any) => any

json* function (props*story*name*: stringstoryName: stringid: stringrawId: stringdoc: stringstoryFn: function (controlValues[string]: anycontext: any) => Promise | anydescription: stringarguments: StoryArgument[]locstart*line*: column*: end*line*: column*: source: stringsubtitle: stringdynamic: booleandynamicId: stringcomponent: string | Record<string, unknown> | ElementType<Props>subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)>controls[string]: ComponentControlText | ComponentControlBoolean | ComponentControlColor | ComponentControlDate | ComponentControlObject<P> | ComponentControlButton | ComponentControlOptions | ComponentControlNumber | ComponentControlArray | ComponentControlFilessmartControlssmart: booleaninclude: string[] | IncludeFnexclude: string[] | IncludeFndecorators: StoryRenderFn[]plugins: anycategory: stringdoctitle*: stringtype: "story" | "blog" | "page" | "tags" | "author" | stringroute: stringdate: stringdateModified: stringstatus: "draft" | "published"tags: string[]keywords: string[]description: string | JSX.Elementimage: stringauthor: stringorder: numbermenu: stringtemplatebind*: function (props*: ) => Example<Props>source: stringstoryName: stringid: stringrawId: stringdoc: stringstoryFn: StoryRenderFndescription: stringloc: CodeLocationsubtitle: stringdynamic: booleandynamicId: stringcomponentat*: subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)>smartControls: SmartControlsdecorators: StoryRenderFn[]plugins: anycategory: stringcontrols*: stories: string[]source: stringfileName: stringpackage: stringtestFiles: string[]testCoverage: string[]testData: stringrenderFn: FrameworkRenderFndata[string]: componentsLookup[string]: stringMDXPage: anyisMDXComponent: booleanparameters: anycomponent: string | Record<string, unknown> | ElementType<Props>subcomponents: Record<string, (string, Record<string, unknown>, ElementType<Props>)>controls[string]: ComponentControlText | ComponentControlBoolean | ComponentControlColor | ComponentControlDate | ComponentControlObject<P> | ComponentControlButton | ComponentControlOptions | ComponentControlNumber | ComponentControlArray | ComponentControlFilessmartControlssmart: booleaninclude: string[] | IncludeFnexclude: string[] | IncludeFndecorators: StoryRenderFn[]plugins: anycategory: stringnavSidebar: booleancontextSidebar: booleanfullPage: booleanvalues[string]: ComponentControl | anyoptions: any) => any

Name	Type
`react*`	function (`props``story``name`: `stringstoryName`: `stringid`: `stringrawId`: `stringdoc`: `stringstoryFn`: function* (`controlValues`[`string`]: `anycontext`: `any`) => `Promise` \| `anydescription`: `stringarguments`: `StoryArgument`[]`locstart``line`: `column`: `end``line`: `column`: `source`: `stringsubtitle`: `stringdynamic`: `booleandynamicId`: `stringcomponent`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`>`subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`controls`[`string`]: `ComponentControlText` \| `ComponentControlBoolean` \| `ComponentControlColor` \| `ComponentControlDate` \| `ComponentControlObject`<`P`> \| `ComponentControlButton` \| `ComponentControlOptions` \| `ComponentControlNumber` \| `ComponentControlArray` \| `ComponentControlFilessmartControlssmart`: `booleaninclude`: `string`[] \| `IncludeFnexclude`: `string`[] \| `IncludeFndecorators`: `StoryRenderFn`[]`plugins`: `anycategory`: `stringdoctitle`: `stringtype`: `"story"` \| `"blog"` \| `"page"` \| `"tags"` \| `"author"` \| `stringroute`: `stringdate`: `stringdateModified`: `stringstatus`: `"draft"` \| `"published"tags`: `string`[]`keywords`: `string`[]`description`: `string` \| `JSX.Elementimage`: `stringauthor`: `stringorder`: `numbermenu`: `stringtemplatebind`: function (`props`: `Story`<`Props`>) => `Example`<>`bind`: function* (`props`: ) => `Example`<`Props`>`source`: `stringstoryName`: `stringid`: `stringrawId`: `stringdoc`: `stringstoryFn`: StoryRenderFn`description`: `stringloc`: CodeLocation`subtitle`: `stringdynamic`: `booleandynamicId`: `stringcomponentat`: `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`smartControls`: SmartControls`decorators`: `StoryRenderFn`[]`plugins`: `anycategory`: `stringcontrols`*: `source`: `stringstoryName`: `stringid`: `stringrawId`: `stringdoc`: `stringstoryFn`: StoryRenderFn`description`: `stringloc`: CodeLocation`subtitle`: `stringdynamic`: `booleandynamicId`: `stringcomponent`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`>`subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`smartControls`: SmartControls`decorators`: `StoryRenderFn`[]`plugins`: `anycategory`: `stringcontrols`: ExampleControls`stories`: `string`[]`source`: `stringfileName`: `stringpackage`: `stringtestFiles`: `string`[]`testCoverage`: `string`[]`testData`: `stringrenderFn`: FrameworkRenderFn`data`[`string`]: `componentsLookup`[`string`]: `stringMDXPage`: `anyisMDXComponent`: `booleanparameters`: `anycomponent`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`>`subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`controls`[`string`]: `ComponentControlText` \| `ComponentControlBoolean` \| `ComponentControlColor` \| `ComponentControlDate` \| `ComponentControlObject`<`P`> \| `ComponentControlButton` \| `ComponentControlOptions` \| `ComponentControlNumber` \| `ComponentControlArray` \| `ComponentControlFilessmartControlssmart`: `booleaninclude`: `string`[] \| `IncludeFnexclude`: `string`[] \| `IncludeFndecorators`: `StoryRenderFn`[]`plugins`: `anycategory`: `stringnavSidebar`: `booleancontextSidebar`: `booleanfullPage`: `booleanvalues`[`string`]: `ComponentControl` \| `anyoptions`: `any`) => `any`
`json*`	function (`props``story``name`: `stringstoryName`: `stringid`: `stringrawId`: `stringdoc`: `stringstoryFn`: function* (`controlValues`[`string`]: `anycontext`: `any`) => `Promise` \| `anydescription`: `stringarguments`: `StoryArgument`[]`locstart``line`: `column`: `end``line`: `column`: `source`: `stringsubtitle`: `stringdynamic`: `booleandynamicId`: `stringcomponent`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`>`subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`controls`[`string`]: `ComponentControlText` \| `ComponentControlBoolean` \| `ComponentControlColor` \| `ComponentControlDate` \| `ComponentControlObject`<`P`> \| `ComponentControlButton` \| `ComponentControlOptions` \| `ComponentControlNumber` \| `ComponentControlArray` \| `ComponentControlFilessmartControlssmart`: `booleaninclude`: `string`[] \| `IncludeFnexclude`: `string`[] \| `IncludeFndecorators`: `StoryRenderFn`[]`plugins`: `anycategory`: `stringdoctitle`: `stringtype`: `"story"` \| `"blog"` \| `"page"` \| `"tags"` \| `"author"` \| `stringroute`: `stringdate`: `stringdateModified`: `stringstatus`: `"draft"` \| `"published"tags`: `string`[]`keywords`: `string`[]`description`: `string` \| `JSX.Elementimage`: `stringauthor`: `stringorder`: `numbermenu`: `stringtemplatebind`: function (`props`: ) => `Example`<`Props`>`source`: `stringstoryName`: `stringid`: `stringrawId`: `stringdoc`: `stringstoryFn`: StoryRenderFn`description`: `stringloc`: CodeLocation`subtitle`: `stringdynamic`: `booleandynamicId`: `stringcomponentat`: `subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`smartControls`: SmartControls`decorators`: `StoryRenderFn`[]`plugins`: `anycategory`: `stringcontrols`*: `stories`: `string`[]`source`: `stringfileName`: `stringpackage`: `stringtestFiles`: `string`[]`testCoverage`: `string`[]`testData`: `stringrenderFn`: FrameworkRenderFn`data`[`string`]: `componentsLookup`[`string`]: `stringMDXPage`: `anyisMDXComponent`: `booleanparameters`: `anycomponent`: `string` \| `Record`<`string`, `unknown`> \| `ElementType`<`Props`>`subcomponents`: `Record`<`string`, (`string`, `Record`<`string`, `unknown`>, `ElementType`<`Props`>)>`controls`[`string`]: `ComponentControlText` \| `ComponentControlBoolean` \| `ComponentControlColor` \| `ComponentControlDate` \| `ComponentControlObject`<`P`> \| `ComponentControlButton` \| `ComponentControlOptions` \| `ComponentControlNumber` \| `ComponentControlArray` \| `ComponentControlFilessmartControlssmart`: `booleaninclude`: `string`[] \| `IncludeFnexclude`: `string`[] \| `IncludeFndecorators`: `StoryRenderFn`[]`plugins`: `anycategory`: `stringnavSidebar`: `booleancontextSidebar`: `booleanfullPage`: `booleanvalues`[`string`]: `ComponentControl` \| `anyoptions`: `any`) => `any`