open-index/open-npm huggingface dataset:
npm package: @fidesui/components
Description: FidesUI custom components
Latest version: 0.7.2

# FidesUI Components

## Adding a new component

1. Match the structure of `src/example-component`
    - `index.ts` - Should re-export names that are part of the public interface of the component.
    - `Component.tsx` - And any other files required for the new functionality.
    - `Component.stories.tsx` - Stories that demonstrate the new functionality.
2. Export the new component's interface from `src/index.ts`.

## Publishing an update
Merging a pull request with component changes should automatically:
- Bump the package version
- Create a git tag
- Update the changelog
- And publish to NPM

By default this will create a "chore" update: bump the patch version and generate the changelog.

To create a more robust changelog, you can use [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary)
syntax when closing your PR with a squash message.

## Importing an update
Once CI has finished, the updated version should appear on NPM. Bump the dependency version in your other
app's `package.json`, run `npm install`, and see the updates appear.
npm package: @fidesui/config
Description: Base config files for Fides projects
Latest version: 0.0.4

# FidesUI Config

This package exports config files for the tools that are commonly used in Fides projects. Extends those files be adding this package as a devDependency following the examples listed below.

## Prettier

**package.json**
```json
{
  "prettier": "@fidesui/config/prettier"
}
```

## TypeScript

**tsconfig.json**
```json
{
  "extends": "@fidesui/config/tsconfig",
  "compilerOptions": {
    // Project-specific configuration
    // ...
    // Some options like support for absolute paths can't be inherited.
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "src/*"
      ]
    }
  }
}
```

## ESLint
Historically, ESLint is opinionated about the package names of shared configuration files:
[eslint#14034](https://github.com/eslint/eslint/issues/14034#issuecomment-766542136)

The workaround is to `require.resolve()` the module, or reference the packaged file directly:

**.eslintrc.js**
```js
module.exports = {
  extends: [
    require.resolve('@fidesui/config/eslint'),
  ],
};
```

**.eslintrc.json**
```json
{
  "extends": [
    "./node_modules/@fidesui/config/.eslintrc.js"
  ]
}
```
npm package: @fidesui/react
Description: Fides wrapper around Chakra UI components
Latest version: 0.0.23

# @fidesui/react

Bundles all of the FidesUI components into one package for easier consumption.

## Installation

```bash
yarn add @fidesui/react
```

## Usage

Wrap your app in a `<FidesProvider />` component:

```tsx
import { ThemeProvider as FidesProvider } from "@fidesui/react";

export const App: React.FC = ({ children }) => {
  return <FidesProvider>{children}</FidesProvider>;
};
```

To use a component, import it from the package and use as desired:

```tsx
import { Button as FidesButton } from "@fidesui/react";

export const Button = () => {
  return <FidesButton colorScheme="blue">Hello World</FidesButton>;
};
```

Note: you can import components individually as well if you don't want to include the entire bundle.