# @avant-inc/tapestry

> Avant Design System

Latest version **0.5.0** (published 2023-01-03) · 0 weekly downloads

## Install

```sh
npm install @avant-inc/tapestry
pnpm add @avant-inc/tapestry
yarn add @avant-inc/tapestry
bun add @avant-inc/tapestry
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2023-01-03 |
| First published | 2022-10-25 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 8.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Avant |
| Maintainers | avant-inc |

## Links

- npm: https://www.npmjs.com/package/@avant-inc/tapestry
- npm.io page: https://npm.io/package/@avant-inc/tapestry

## Dependencies (5)

- [auto](https://npm.io/package/auto.md) ^10.37.6
- [react](https://npm.io/package/react.md) ^17.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.1
- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1

## Recent versions

- 0.5.0 (latest) — 2023-01-03
- 0.5.0--canary.39.3831665352.0 (canary) — 2023-01-03
- 0.4.1--canary.40.3807496071.0 — 2022-12-30
- 0.4.1--canary.40.3802161659.0 — 2022-12-29
- 0.4.1--canary.40.3800998711.0 — 2022-12-29
- 0.4.1--canary.40.3796263403.0 — 2022-12-28
- 0.4.1--canary.37.3789368628.0 — 2022-12-27
- 0.4.1--canary.37.3789124557.0 — 2022-12-27
- 0.4.1--canary.37.3789121620.0 — 2022-12-27
- 0.4.1--canary.37.3789116879.0 — 2022-12-27
- 0.4.1--canary.37.3753241870.0 — 2022-12-21
- 0.5.0--canary.39.3752237616.0 — 2022-12-21
- 0.5.0--canary.39.3743226017.0 — 2022-12-20
- 0.4.0 — 2022-12-20
- 0.4.0--canary.35.3739992971.0 — 2022-12-20
- … 78 more at https://npm.io/package/@avant-inc/tapestry/versions

## README

# Tapestry Design System

# Table of Contents

- [General Info](#general-info)
- [Technologies](#technologies)
- [Get Started](#get-started)
- [Installing dependencies](#install-dependencies)
- [Folder structure](#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](https://reactjs.org/)
- [npm](https://www.npmjs.com/)
- [Storybook](https://storybook.js.org/) 
- [Typescript](https://www.typescriptlang.org/)

## Get Started

### Setup

Currently Tapestry is build using node version 17.9.1.

**If you don't have node installed, then install it locally [nodejs](https://nodejs.org/en/download/) or via asdf [website](https://asdf-vm.com/guide/getting-started.html#_3-install-asdf)**

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:

```bash
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
        index.ts
    customHooks/
      useDelay/
        useDelay.test.tsx
        index.tsx
    index.ts
```

## Testing

### Writing tests

To create tests, add an `it()` block with the name of the test and its code. The `describe()` command allows you to group 
related tests, producing clear outputs. 

Jest provides a built-in `expect()` global function for making assertions. A basic test could look like this:

```javascript
import React from 'react'
import { fireEvent, screen, render } from '@testing-library/react'
import { axe } from 'jest-axe'

import { Button, ButtonProps } from './Button'

describe('Button', () => {
  const TestComponent = (props: Partial<ButtonProps>): JSX.Element => (
    <Button {...props}>
      {props.children}
    </Button>
  )

  it('should call onClick when is clicked', () => {
    const onClickMock = jest.fn()

    render(<TestComponent onClick={onClickMock}>Button</TestComponent>)

    fireEvent.click(screen.getByRole('button', { name: 'Button' }))

    expect(onClickMock).toHaveBeenCalledTimes(1)
  })

  it('should not call onClick when is disabled', () => {
    const onClickMock = jest.fn()

    render(<TestComponent onClick={onClickMock} disabled={true}>Button</TestComponent>)

    fireEvent.click(screen.getByRole('button', { name: 'Button' }))

    expect(onClickMock).toHaveBeenCalledTimes(0)
  })

  it('should not fail any accesibility tests', async () => {
    const { container } = render(<TestComponent>Button</TestComponent>)

    expect(await axe(container)).toHaveNoViolations()
  })
})
```

All `expect()` matches supported by Jest are [extensively documented here](https://facebook.github.io/jest/docs/en/expect.html#content).
You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](https://facebook.github.io/jest/docs/en/expect.html#tohavebeencalled) to create
"spies" or mock functions.

**Things to highlight:**

* It is a good idea to create a wrapper around the component you are going to test, this helps in case the component structure change in the future
* Always (if possible) include a test that make sure the component is accesible
* Include as many senarios that you can think of, and try to almost always use one assertion per test (if possible)
* Use [priority list](https://testing-library.com/docs/queries/about#priority) to get the elements as much as possible

### Debugging

Some times you don't know why a test is failing so you can use `screen.debug()` to display the HTML content that is being generated by that 
test

```javascript
import React from 'react'
import { screen, render } from '@testing-library/react'

import { Button, ButtonProps } from './Button'

describe('Button', () => {
  const TestComponent = (props: Partial<ButtonProps>): JSX.Element => (
    <Button {...props}>
      {props.children}
    </Button>
  )

  it('should call onClick when is clicked', () => {
    const onClickMock = jest.fn()

    render(<TestComponent onClick={onClickMock}>Button</TestComponent>)

    screen.debug()

    fireEvent.click(screen.getByRole('button', { name: 'Button' }))

    expect(onClickMock).toHaveBeenCalledTimes(1)
  })
})
```

---
_Source: https://npm.io/package/@avant-inc/tapestry · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._