Commands

Timvir comes with a command line tool that eases creation of new React components, pages, and other general maintenance of the files used by the timvir integration.

  • component – Generate a new React component
  • toc – Update the table of contents file
  • link – Link the component documentation files into src/pages/docs
  • capid – Generate component API documentation

Run the commands with npx @timvir/cli <command>.

component

This command will ask you a few questions about what component you want to create, and will then generate a few files inside the src/components/ folder. It will also update the table of contents such that the new component appears in the navigation tree.

$ npx @timvir/cli component
✔ What's the name of your component? … TextField
✔ What is the underlying DOM element (eg. div, span, input etc) … div

  Writing files…

  - src/components/TextField/index.ts ..................................... write
  - src/components/TextField/TextField.tsx ................................ write
  - src/components/TextField/docs/index.mdx ............................... write
  - src/components/TextField/samples/basic.tsx ............................ write
  - src/pages/docs/components/toc.timvir .................................. update

  Writing files…

  - src/timvir/toc.ts ..................................................... update

toc

Use this command after you manually edit the toc.timvir files to regenerate the table of contents JavaScript module (src/timvir/toc.ts).

$ npx @timvir/cli toc

  Writing files…

  - src/timvir/toc.ts ..................................................... update

link

This command creates symlinks in src/pages/docs/components which point to the component documentation and sample files.

$ npx @timvir/cli toc

  Linking component documentation…

  - src/pages/docs/components/Code/samples/basic.tsx ...................... link
  - src/pages/docs/components/ColorBar/samples/basic.tsx .................. link
  - src/pages/docs/components/ColorBook/samples/basic.tsx ................. link
  - src/pages/docs/components/Exhibit/samples/basic.tsx ................... link

capid

This commands generates an MDX file which describes the component API for each of your components. The file is written into src/components/*/docs/api.mdx.

$ npx @timvir/cli capid

Generating Component API Documentation…

  - src/components/Code/docs/api.mdx ...................................... update
  - src/components/ColorBar/docs/api.mdx .................................. update
  - src/components/Swatch/docs/api.mdx .................................... update
Documentation
Search
/
Modules