marsladder-ui-component v1.13.0

marsladder-ui-component

marsladder-ui-component is a UI component library based on TypeScript and React. It integrates tools such as Prettier, ESLint, and Jest, and uses styled-components for style management. It is bundled and served using Vite, and automatically published to a private NPM registry using GitHub Actions.

Table of Contents

• Installation
• Usage
• Development
• Testing
• Code Formatting and Linting
• Publishing

Installation

Ensure you have pnpm and Node.js installed (using NVM to manage versions).

pnpm install marsladder-ui-component

Usage

Import and use components from the component library in your project. For example, using the Button component:

import React from 'react';
import { Button } from 'marsladder-ui-component';

const App: React.FC = () => {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <div>
      <Button onClick={handleClick}>Click Me</Button>
    </div>
  );
};

export default App;

Development

Development and Debugging Mode

Use pnpm watch:dev to automate the local debugging workflow. This command will monitor source code changes, automatically build and update links, and start the development server.

Steps

1. Start Watching and the Development Server in the marsladder-ui-component Project

   In the root directory of the marsladder-ui-component project, run the following command:

   pnpm watch:dev

   This command will start two processes simultaneously:

   • Automatic Build and Link Watcher: Monitors changes in the src directory, automatically executes pnpm build and pnpm link --global.
   • Vite Development Server: Starts Vite's development server, allowing you to view changes to the component library in real-time.

2. Link marsladder-ui-component in the Target Project

   In the target project where you need to use marsladder-ui-component, run the following command to link the local component library:

   rm -rf node_modules/marsladder-ui-component
   pnpm link --global marsladder-ui-component

   Note: Ensure that react and react-dom are already installed in the target project, as marsladder-ui-component specifies these as peerDependencies.

3. Automatic Link Updates

   When you modify and save a component in the marsladder-ui-component project, pnpm watch:dev will automatically execute the following commands:

   pnpm build:all
   pnpm link --global

   This will automatically update the global link, ensuring that the marsladder-ui-component referenced in the target project is always up to date. There is no need to run the above commands manually.

Example Workflow

1. Start Watching and the Development Server

   cd path/to/marsladder-ui-component
   pnpm watch:dev

2. Link the Component Library in the Target Project

   cd path/to/target-project
   rm -rf node_modules/marsladder-ui-component
   pnpm link  --global marsladder-ui-component

3. During Development

   • Edit and save component code in the marsladder-ui-component project.
   • pnpm watch:dev will automatically build and update the link.
   • The target project will automatically receive the latest component changes (you may need to restart the target project's development server to reflect the changes).

Other Development-Related Commands

• Only Watch Build and Link

  If you only need to watch the build and link without starting the development server, you can run:

  pnpm watch

• Manual Build and Link

  If you need to manually perform the build and link, you can run:

  pnpm build
  pnpm link --global
  cd path/to/target-project
  rm -rf node_modules/marsladder-ui-component
  pnpm link --global marsladder-ui-component

  Note: When executing this step manually, ensure that you have correctly linked both in the marsladder-ui-component project and the target project.

Testing

Use Jest for unit testing.

Running All Tests

pnpm test

Running Tests with Watch Mode

pnpm test:watch

Code Formatting and Linting

Formatting Code

Use Prettier to format the code:

pnpm format

Checking Code Quality

Use ESLint to check the code:

pnpm lint

Automatic Formatting and Checking Before Commit

With Husky and lint-staged, formatting and code checks are automatically run before each commit.

Publishing

The publishing process is automated through GitHub Actions. When code is pushed to the main branch, it is automatically built and published to the private NPM registry.

Manual Publishing

If you need to publish manually, you can run:

pnpm build
pnpm publish --access restricted

Note: Ensure that the main, module, and types fields are correctly configured in package.json.

NPM Registry

The package is available on npm.