A library to reuse components and functions across the entire ets_frame project

Using in other projects

To install into a (consumer) project: npm install @max-pr/ets-frame-lib

Notice that we are not using the --save option, meaning the package will not be installed when running the generic npm install command. So this will have to be ran every time there is an update to the library or node_modules is removed.

Then to use, you can import something like: import NotesData from '@max-pr/ets-frame-lib/dist/components/notes/notes-data'; Be sure to import from the dist/ directory.

Making edits / Developer practices

Be sure to edit the files under src/. The dist/ holds the compiled code and will be consumed by the projects.

To write library code more efficiently, it is recommended to update the consumers' package.json to list the library as a local dependency. This will allow for incrementally developing and testing new features without flooding the registry with publications. In the consumer, list the library as a dependency with "@max-pr/ets-frame-lib": "file:../lib". Any updates will have to be compiled by running npm run publish:npm within lib/ and re-installed for the consumer with rm -rf node_modules && npm install. Once the feature is complete, the library can be published by npm publish (within lib/).

Storybook

Storybook is used to document existence and behavior of components, and can be used to develop and view changes in real time.

Once the storybook package is installed, you can run npm run storybook and a new window will open showing all components with accopmanying .stories.jsx files. These files should exist next to the component src file NOTE THAT THE BOTH THE SRC AND STORY FILES MUST BE OF TYPE JSX

Conventions

• All CSS classes should be prefixed with "ets-frame-lib-"

Maintaining / Publishing

After making updates to the library, make sure to update the version number in package.json accordingly:

• X.0.0 - Major release - changes that break backwards compatibility
• 0.X.0 - Minor release - New features, backwards compatible
• 0.X.0 - Patch release - Bug fixes, backwards compatible

You can not re-publish under the same version number so you will always have to update the version when publishing updates.

Then, within lib/ run npm run publish:npm to build, then npm publish to publish the changes to npm. You will need to reinstall the package in the consumer projects for the changes to be reflected (i.e. npm install @max-pr/ets-frame-lib).

You will need to login to npm to publish. As of 2024-07-26, Max's account is the only account tied to the library.

Note on CSS

After many hours failing to bundle the css with the library components, the solution became to ship the css separately, with the expectation that the projects will include the css within the corresponding view script header. This means CSS associated with the library should be edited within scss/ets-frame-lib.css

To make managing this a little less cumbersome, the publish:npm build script has been configured to copy over the css file into /static/css/ upon execution. This makes it so the consumers will always have the latest css delivered, so long as they are importing it in the corresponding view. This also means any changes that only involve CSS do not need to be published to take effect (though, probably should be eventually).