@touche-lts/panel-ui

A React package consisting of custom UI components for React projects. This library provides pre-built, reusable components to streamline UI development.

Features

• Built using React and Material-UI.
• Includes support for MobX for state management.
• Provides custom date range pickers, drag-and-drop functionality, and more.
• Pre-configured TypeScript for type safety.
• Optimized for modern browsers.

Installation

Install the package using npm:

npm install @touche-lts/panel-ui

Or with Yarn:

yarn add @touche-lts/panel-ui

Usage

Here’s a basic example of using a component from the package:

import React from 'react';
import { MyCustomComponent } from '@touche-lts/panel-ui';

const App = () => {
  return (
    <div>
      <MyCustomComponent />
    </div>
  );
};

export default App;

Scripts

Development

Run the development server:

npm start

Build

Build the package for production:

npm run build

File Structure

• src/: Source files of the package.
• dist/: Compiled and ready-to-publish files.
• tsconfig.json: TypeScript configuration file.
• package.json: Contains dependencies, scripts, and metadata for the package.

Publishing the Package Privately

Follow these steps to publish the package privately to the npm registry:

1. Scope the package:
   Ensure your package name in package.json is scoped. Scoped names start with @ and are followed by the scope name (e.g., @your-org/panel-ui). Example:

   "name": "@your-org/panel-ui",

   Version requirement:
   Make sure your version field follows semantic versioning. Update the version number in package.json as needed before each publish (e.g., "version": "1.0.0").

2. Build the package:
   Ensure your package is compiled and ready for distribution:

   npm run build

3. Publish the package to a private registry: Please ensure that a .npmrc file is added in root folder and contains valid authentication tokens beforehand. Use the following command to publish it as a private package:

   npm publish --access=restricted

   Ensure your package.json includes the publishConfig key, like this:

   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   }

4. Verify the private package:
   Install the package in another project to confirm it works:

   npm install @your-org/panel-ui