odp-shared-components-poc

A collection of reusable React components.

Project Structure

/odp-shared-components
├── /dist                # Compiled output
├── /src                 # Source code
│   ├── /components      # Individual components
│   │   ├── ProductName  # Example component
│   │   │   ├── index.js
│   │   │   ├── styles.module.css
│   │   ├── ...          # Other components
│   ├── index.js         # Main export file
├── .babelrc
├── .eslintrc
├── package.json
├── rollup.config.js

Installation

To install in your project:

npm install odp-shared-components-poc --legacy-peer-deps

Usage

import React from "react";
import ProductName from "odp-components";

const App = () => {
    return <ProductName name="Example Product" className="custom-class" />;
};

export default App;

Adding a New Component

To add a new component:

1. Create a new folder inside src/components/.
2. Implement the component in index.js.
3. If necessary, create a styles.module.css for scoped styles.
4. Export the new component in src/index.js.

Running Locally with npm link

To work on this package and test it in another project:

1. Inside the odp-shared-components-poc directory, run:

   npm link

2. Inside the consuming project, run:

   npm link odp-shared-components-poc

3. Restart the consuming project's development server if needed.

Publishing to NPM

To publish a new version:

1. Ensure all changes are committed.
2. Update the version in package.json (e.g., 1.0.1 → 1.0.2).
3. Run:

   npm publish --access public