SDS Nextjs Component Library

To directly view an example of how this library works, look at the existing files in the src folder.

It is desirable to abstract out components that are regularly used across sites into a separate library which you then call from a higher level. Often when using components in sites, you use default exports. When importing your component to this library, you want to use named exports. For example

const Component = ... // Code for component
... // Misc other supporting code

export default Component;

The above is instead written as

const Component = ... // Code for component
... // Misc other supporting code

export { Component };

You also don't need the index.js file instead of the component folder. In the library, the index.js file lives one folder up in the parent and exports the individual components like so:

export { Component } from './Component/Component';

All of this will be fairly clear when going over the existing components and index.js file in the src folder.

How to update library

Once you're done adding your component appropriately, run the following commands: NOTE: DO THE LOG IN ONLY THE FIRST TIME

git add . # run this on whatever particular folder/files you want to add
git commit -m 'commit message'
npm login # the username and password in Case 476, choose your own email address
npm run build
npm version patch # the npm version command can take other flags like major, minor, patch. but going with patch for now
npm publish

Using components from library in other places

The above steps are only really necessary when you're adding or modifying the library. If you simply want to use a component from the library, you don't even need to clone this repository. All you do is go inside the folder that you'd like to add a component to and run the following:

npm install @sds-stream/library

And then in your appropriate source code, do an import like:

import { Component1, Component2, ... } from '@sds-stream/library';