Aac-components NPM

Installation

git clone git@github.com:American-Addiction-Centers/component-library.git
cd component-library
npm install
npm run storybook - to pull up story book in your browser
npm run build - to compile the actual library

Adding a component

Create a new folder under src/components
Put an index.js in that folder with your new component
Import your component into src/index.js so it gets exported with the library
Add a story for your component under stories/index.stories.js to see it in your local storybook

Usage

npm install aac-components
import {Simple} from 'aac-components'; - replace Simple with whatever component you want to import

Local Development with this Library in OTHER projects

We can use npm link to have a better local workflow when contributing to this library.

Here's a great article exlaining npm link: https://medium.com/@alexishevia/the-magic-behind-npm-link-d94dcb3a81af

Note: running npm install will kill your symlinks created using npm link, so you'll have to do this process again after an install

Symlink aac-component library to your project

cd aac-components && npm link - create symlink from global node modules to local module
cd myproject && npm link aac-components - create symlink from project node module to global node module
verify symlink with within myproject cd node_modules && ls -la *aac-components

Symlink react to aac-component library from your project.

Due to this issue: https://github.com/facebook/react/issues/13991

cd aac-components && npm link ../myproject/node_modules/react - create symlink between aac-components react node module and project react node module
cd node_modules && ls -la *react to verify symlink and grab path to global module
cd <what-ever-path-from-perious-step> ls -la *react to check local npm points to correct project. Path should looks something like /Users/phillipbarera/.nvm/versions/node/v10.16.3/lib/node_modules/react

Now run npm run dev in the aac-component library and npm run dev in your project and changes to the component library should be reflected in your project

Unlink things when done with dev

running npm install on your project root will remove the symlink to aac-components
cd aac-components/node_modules/react && npm unlink to unlink react from global npm symlinks
Check your global symlinks to verify ls -al $(npm root -g)