@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
:
-
Create a new directory
src/MyComponent/
with the following contents:-
MyComponent.jsx
, which defines the component's React code. UseButton.jsx
as a template. -
MyComponent.scss
, which defines the styles for the component. UseButton.scss
as a template. -
index.js
, with the following:export { default } from './MyComponent.jsx';
-
-
For development and documentation purposes, add a reasonably comprehensive example of
MyComponent
tosrc/index.dev.js
. See Dev Playground for details. -
Add
MyComponent
tosrc/index.prod.js
so Rollup will bundle it during production release. -
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.