WeDeliver Shared Components

A shared UI component library for WeDeliver projects.

Table of Contents

• Installation
• Development
• Building
• Publishing
• Usage
• Contributing

Installation

To install the package in a project, run:

npm install wedeliver-shared-components

Development

To develop the shared components library locally and link it to another project, follow these steps:

1. Clone the repository:

   git clone https://github.com/WeDeliverGitHub/sharedUI.git
   cd sharedUI

2. Install dependencies:

   npm install

3. Build the library:

   npm run build

4. Link the package:

   npm link

5. Link the package in your consumer project:

   In your consumer project's directory, run:

   npm link wedeliver-shared-components

6. Start the development server:

   npm run dev

Any changes made to the shared components library will be reflected in the consumer project after rebuilding the library and restarting the development server.

Building

To build the package for production, run:

npm run build

The built files will be in the dist directory.

Publishing

To publish the package to npm, ensure you are logged in to npm and have the correct permissions. Then run:

npm publish --access public

Ensure the version in package.json is updated according to semantic versioning before publishing.

Usage

After installing the package, you can use the shared components in your project:

import React from "react";
import { PrimeButton } from "wedeliver-shared-components";

function App() {
  return (
    <div>
      <PrimeButton label="Click me" onClick={() => alert("Button clicked!")} />
    </div>
  );
}

export default App;

Contributing

Contributions are welcome! Please follow these steps to contribute:

1. Fork the repository.
2. Create a new branch for your feature or bugfix.
3. Make your changes.
4. Commit your changes with a descriptive commit message.
5. Push your changes to your fork.
6. Create a pull request.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: ["./tsconfig.json", "./tsconfig.node.json"],
    tsconfigRootDir: __dirname,
  },
};

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list