@codesmithllc/components

@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 is used to bundle the library prior to production release.

Installation

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

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:

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:

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

2. For development and documentation purposes, add a reasonably comprehensive example of MyComponent to src/index.dev.js. See Dev Playground for details.

3. Add MyComponent to src/index.prod.js so Rollup will bundle it during production release.

4. Go through the Local Development steps in the root README.md to merge and publish @codesmithllc/components with the new component. You must have Codesmith GitHub access to view the linked document.

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.

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.

npm run build

Questions?

Please reach out to Codesmith for any questions about this package.