# @theorchard/suite-components

Shared components for Orchard suite applications. This is meant to gradually replace [FRC](https://github.com/theorchard/frontend-react-components).

General components like `Button` are re-exported from
[react-bootstrap v4](https://react-bootstrap-v4.netlify.app/components/alerts).

## Usage

To include the css for the components you need to import it in your `index.scss` file.
Import everything in one go:

```scss
@import '~@theorchard/suite-components/styles';
```

Or cherrypick components:

```scss
@import '~@theorchard/suite-components/scss/loadingIndicator';
@import '~@theorchard/suite-components/scss/errorMessage';
```

Then import components to use:

```tsx
import { LoadingIndicator } from '@theorchard/suite-components';

const MyLoadingUiComponent = () => <LoadingIndicator />;
```

## Generating documentation into frontend-solfege

To generate documentation in frontend-solfege what we must do is to add a JSDoc before exporting the component as the example below:

```tsx
/**
 * MyComponent does this use case.
 */
export const MyComponent: FC<MyComponentProps> = ({props}) => {
```

We can indicate more properties such as type, status, tags... in the following way:

```tsx
/**
 * MyComponent does this use case.
 *
 * @type atom
 * @status live
 * @tags visuals
 */
export const MyComponent: FC<MyComponentProps> = ({props}) => {
```

We must make sure that a build is done or we will not see the changes in frontend-solfege.

## Figma Code Connect

To run Figma commands, `FIGMA_ACCESS_TOKEN` in `.env` must be populated with a Figma PAT. The token requires `library_content:read`, `file_content:read` and`file_code_connect:write`.

-   `figma:publish`: Publishes code connect definitions.