Skip to content

Latest commit

 

History

History
118 lines (82 loc) · 3.18 KB

code-base-overview.md

File metadata and controls

118 lines (82 loc) · 3.18 KB

Codebase Overview

Proceed if you are interested in contributing to AdaptUI React component's codebase

Let's get a basic overview of our codebase and how our code is stuctured.

Our codebase consists of few important folders,

/src

This is where we keep all our components in respective subfolders.

/src/[component]/__tests__

Tests for the specific components

/src/[component]/stories

Storybook examples

/docs-templates

Template for docs which is used for automatically generated content

Generated Content.

We have code and docs generation scripts in our workflow which you should be aware of for reducing any confusion.

We generate:

  • javascript examples from Typescript examples to provide both examples in storybook and docs

    Command: yarn preview

  • proptypes, composition, csb links and addings examples in the docs using scripts.

    Command: yarn docs

Docs generation guide

For our component API documentation, we auto generate them by parsing the typescript code and extracting information from them.

We have docs-templates which holds the templates for the docs.

See example for accordion

Props

  • ADD_PROPS syntax will inject the prop types in its place
  • Usage: <!-- ADD_PROPS src/accordion --> as markdown comment.

Composition

  • ADD_COMPOSITION will inject the composition in the specified component
  • Usage: <!-- ADD_COMPOSITION src/accordion --> as markdown comment.

Examples

  • ADD_EXAMPLE will inject the examples from the components as code.
  • Usage: <!-- ADD_EXAMPLE src/accordion/stories/templates/AccordionBasicJsx.ts --> as markdown comment.

Sandbox links

And finally Sandbox links are also dynamically generated! We can just add this yaml as markdown comment and it will replace the comment with dynamic sandbox link

  • CODESANDBOX with the links to the files will generate the csb links.
  • Usage: 
    <!-- CODESANDBOX
link_title: Calendar
js: src/calendar/stories/templates/CalendarBasicJsx.ts
css: src/calendar/stories/templates/CalendarBasicCss.ts
files: [src/calendar/stories/templates/UtilsJsx.ts]
-->

NPM Scripts

  • storybook - opens storybook
  • storybook-build - builds storybook
  • build - bundles the library
  • test - runs tests
  • docs - generates docs for components
  • preview - transpiles ts examples to both js & ts string
  • commit - to commit with gacp
  • lint - to lint the src with ESLint
  • format - to format the src with Prettier

Component Docs