@avant-inc/tapestry v0.1.3--canary.29.3576287005.0

Tapestry Design System

Table of Contents

• General Info
• Technologies
• Get Started
• Installing dependencies
• Folder structure

General Info

The purpose of this project is to build/provide custom components that can be implemented throughout all of our applications.

Technologies

• React
• npm
• Storybook

Get Started

Setup

Currently Tapestry is build using npm version 17.9.1.

If you don't have npm installed, then install it locally nodejs or via asdf website

If you are using asdef to control your node version for your projec, you need to install nodejs version 17.9.1

Install dependencies

The generated project includes React, and ReactDOM as devDependencies. You may install other dependencies (for example, React Router) with npm:

npm install --save-dev react-router

Whenever a devDependency is installed, be sure to add it as a peer dependency as well. Our intent is to keep this component library lightweight in order to improve performance and to avoid duplication of node_modules.

Folder structure

When building out your component, you should include a main folder (named appropriately) with all the related files nested inside.

• Required
  • index.tsx file that exports your custom component
  • FileName.test.tsx to include your tests for that component
  • FileName.stories.tsx to provide the UI portion of your component in storybook (not necessary for hooks/utils)
• Optional
  • FileName.styles.(ts/\x|css) to separate styles styles for that specific component.

Below is an example of how your file structure should appear when creating your component or customHook:

my-app/
  README.md
  node_modules/
  dist/
  src/
    components/
      Button/
        Button.tsx
        Button.stories.tsx
        Button.test.tsx
        Button.testIds.ts
        index.ts
    customHooks/
      useDelay/
        useDelay.test.tsx
        index.tsx
    index.ts