# @codesmithllc/components

> A library of React components for use in Codesmith apps

Latest version **0.11.2** (published 2023-11-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install @codesmithllc/components
pnpm add @codesmithllc/components
yarn add @codesmithllc/components
bun add @codesmithllc/components
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.11.2 |
| Published | 2023-11-09 |
| First published | 2021-05-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 234.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Codesmith LLC |
| Maintainers | codesmith-engineering |

## Links

- npm: https://www.npmjs.com/package/@codesmithllc/components
- Repository: https://github.com/CodesmithLLC/cslib
- Homepage: https://github.com/CodesmithLLC/cslib#readme
- Issues: https://github.com/CodesmithLLC/cslib/issues
- npm.io page: https://npm.io/package/@codesmithllc/components

## Recent versions

- 0.11.2 (latest) — 2023-11-09
- 0.11.1 — 2023-08-15
- 0.11.0 — 2023-07-19
- 0.10.2 — 2023-04-21
- 0.10.1 — 2023-03-24
- 0.10.0 — 2023-03-23
- 0.9.4 — 2023-01-02
- 0.9.3 — 2022-12-23
- 0.9.2 — 2022-12-22
- 0.9.1 — 2022-12-22
- 0.9.0 — 2022-12-22
- 0.8.0 — 2022-11-29
- 0.7.2 — 2021-10-28
- 0.7.1 — 2021-10-12
- 0.7.0 — 2021-10-08
- … 38 more at https://npm.io/package/@codesmithllc/components/versions

## README

# @codesmithllc/components

[`@codesmithllc/components`](https://www.npmjs.com/package/@codesmithllc/components) is a React component library used in Codesmith applications.

## Basics

All components are built with React and styled with SCSS and CSS Modules. [Rollup](https://rollupjs.org/guide/en/) is used to bundle the library prior to production release.

## Installation

You can install `@codesmithllc/components` by running the standard NPM install command.

```bash
npm install @codesmithllc/components
```

Note that `@codesmithllc/components` has peer dependencies that must be installed in your project prior to using this package. Refer to the local `package.json` file for a list of necessary peer dependencies.

## Usage

Once you have propertly installed `@codesmithllc/components`, every component in this library can be imported as a named import:

```jsx
import { Button } from '@codesmithllc/components';

// ...
```

## Development

All React components should live in the `src/` directory. Follow the patterns in existing components in that directory to add a new component or to update existing components.

### Adding a New Component

To add a new component, such as `MyComponent`:

1. Create a new directory `src/MyComponent/` with the following contents:

   - `MyComponent.jsx`, which defines the component's React code. Use `Button.jsx` as a template.
   - `MyComponent.scss`, which defines the styles for the component. Use `Button.scss` as a template.
   - `index.js`, with the following:

     ```js
     export { default } from './MyComponent.jsx';
     ```

1. For development and documentation purposes, add a reasonably comprehensive example of `MyComponent` to `src/index.dev.js`. See [Dev Playground](#dev-playground) for details.
1. Add `MyComponent` to `src/index.prod.js` so Rollup will bundle it during production release.
1. Go through the [Local Development steps in the root README.md](../../README.md#local-development) to merge and publish `@codesmithllc/components` with the new component. You must have Codesmith GitHub access to view the linked document.

<div id="dev-playground"></div>

### Dev Playground

Run the following command to bundle the component library in development and to view them in a playground environment. The bundled code will live in the `dist/` directory.

You can view this playground at `localhost:10001`.

```bash
npm run build:dev
```

Note that hot reloading is not enabled at this time, and all changes will require a rebundle.

### Building for Production

Run the following command to bundle the component library for production. The bundled code will live in the `dist/` directory. This command is automatically invoked during the automated publishing process.

```bash
npm run build
```

## Questions?

Please reach out to [Codesmith](https://codesmith.io) for any questions about this package.

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