open-index/open-npm huggingface dataset:
npm package: @mwxltd/babel-preset-react-app
Description: Babel preset used in MWX Ltd projects
Latest version: 0.1.5

# @mwxltd/babel-preset-react-app

This package includes the Babel preset used in [MWX Ltd projects](https://github.com/mwx-limited/js-build-tools).<br>

## Usage

First, [install Babel](https://babeljs.io/docs/setup/).

Then install babel-preset-react-app.

```sh
npm install @mwxltd/babel-preset-react-app --save-dev
```

Then add the following to the `package.json` of the project:

```json
  "babel": {
    "presets": [
      "@mwxltd/react-app"
    ]
  },
```
npm package: @mx-bernhard/babel-plugin-react-higher-order-component-name
Description: Infers name from outer variable declaration and changes arrow function to named function
Author: Bernhard Jahn
Latest version: 0.1.0

# babel-plugin-react-higher-order-component-name

Infers name from outer variable declaration and changes arrow function to named function.


A simple transform to give functional React components that are supplied to a higher order function a name making debugging easier.

## Example

Transforms
```js
const higherOrderFunction = (WrappedComponent) => { 
  const wrapper = () => <div>{WrappedComponent}</div>;
  return wrapper.displayName = `higherOrderFunction(${WrappedComponent.displayName ?? WrappedComponent.name})`;
}

const Component = higherOrderFunction(() => <span>hello</span>);
```

to
```js
const higherOrderFunction = (WrappedComponent) => <div>{WrappedComponent}</div>;

const Component = higherOrderFunction(function Component() { return <span>hello</span> });
```

Looking at the component tree in React dev tools, the two components will look like this:

```
higherOrderFunction(Component)
  Component
```
npm package: @mx-cartographer/categories
Description: Package containing category selector
Author: MX
Latest version: 6.0.1

# Category Selector Library

This library contains the Category Selector control

## Getting started

### Installation

- npm install @mx-cartographer/categories

### Usage
`CategorySelector` must be wrapped by `CategoryDataProvider` in order for it to have access to the `CategoryStore` 

```
import { ApiEndpoints, CategoryApi, CategoryStore } from '@mx-cartographer/common'
import { CategoryDataProvider, CategorySelector } from '@mx-cartographer/categories'

export const Example = () => {
  const store = new CategoryStore()
  store.initialize(new CategoryApi('/', ''))
  
  const handleSelected = (guid: string) => {
    // Some action when category is selected
  }
  
  return (
    <CategoryDataProvider onEvent={handleEvent} onSelected={handleSelected} store={store}>
      <CategorySelector />
    </CategoryDataProvider>
  )
}
```

### Optional Props
- `initialSelected: string` Set an initially selected category
- `showSelected: boolean` Whether or not a checkmark should display on selected categories
- `unselectable: string[]` An array of category guids that should not be selectable
- `unselectableText: string` Specify what text to show on the tag displayed on unselectable rows (Default is 'Unselectable')
npm package: @mx-cartographer/common
Description: Common components used within Cartographer
Author: MX
Latest version: 9.0.0

## Cartographer Common
Include common controls, types, constants, etc for Cartographer libraries

### Running (Launches Storybook)
- Run `npm run dev`

### Publishing
- Update version and changelog
- Run `npm run build`
- Run `npm publish`

## QA 

 #### Cartographer No Harm

Performing general no-harm testing on Cartographer is done by completing the following routines in their appropriate development environment. Testing these routines will provide insight into the health of Cartographer as it functions as widget UI for Serenity.

**Load Storybook**
- From the appropriate environment, via a feature branch (QA) or Master (Prod) load the story and ensure the component loads on the page and there are no errors

**Interact with the component’s UI**
- Clicking buttons, opening drawers, etc 

**Storybook Controls**

 Storybook Controls gives you a graphical UI to interact with a component's arguments dynamically without needing to code

- Interact with the component’s Controls as much as possible. Using these controls will update the component's UI to test different scenarios. Keep in mind that each story will have its own unique controls. 
- Set booleans for different states such as Onboarding and ZeroStates 
- Edit key values 

**Accessibility**

Test component compliance with web accessibility standards
- Ensure there are no Accessibility violations in the Accessibility tab of Control. Frequently check this tab each time you update the component’s UI
- Ensure using a screen reader the content is accessible and has context 

**Storybook toolbar** 

- Dark Mode. This toolbar item lets you change the theme and toggle between light and dark mode 
  - Ensure the components can be loaded in dark mode 
  - Ensure the components can be loaded in light mode

- View Port.  The Viewport toolbar item allows you to adjust the dimensions of the iframe 
  - Ensure the component is responsive and can be loaded in Small Mobile View 
  - Ensure the component is responsive and can be loaded in Large Mobile View
  - Ensure the component is responsive and can be loaded in Tablet View

**Devtools**

- Check for console errors 
- Check for expected console messages. Console messages serve as analytic events when buttons are clicked. 
NOTE: There is no need to check network requests as the UI is not connected to any MX databases. Any network request you see is being made by Storybook not the component.
npm package: @mx-cartographer/insights-micro-widget
Description: Package of Insights Micro widget and components
Author: MX
Latest version: 6.0.3

## Publishing alpha versions
1. Bump the version in package.json using the format `major.minor.patch-alpha.<yourinitials><n>` See [the version history](https://www.npmjs.com/package/@mx-cartographer/experiences?activeTab=versions) for examples.
1. Run `npm publish --tag alpha`.

## Merging and Publishing
1. Bump the version in package.json using the standard major.minor.patch. If there are breaking changes, we bump the major, new feature we bump minor and bug fixes or minor changes, we bump patch.
1. Update CHANGELOG.md.
1. After MR is approved, type `shipit` in the comments. Wait for shipit to merge your branch.
1. After your changes have been merged to master, switch to the master branch and pull down the new changes.
1. Run `npm publish --dry-run`.
1. If the dry run works, go ahead and run `npm publish`. Look for something like '@mx-cartographer/experiences@4.10.0' in the terminal output. Copy it and paste it to the end of `git tag` ex: `git tag @mx-cartographer/insights-micro-widget@4.10.0`in the terminal. After that, run `git push origin --tags` and you're done.
npm package: @mx-cartographer/storybook-addon
Description: Storybook addons for Cartographer
Author: MX
Latest version: 3.0.0

## Storybook addon for Cartographer

### Features

- Common config
- Common blocks
- Static files
- useDesignToken

### Note: This library use yarn instead of npm

### Running
- Run `yarn start`

### Publishing
- Run `yarn build`
- update version in package.json
- Run `npm publish`
npm package: @mx-cartographer/transactions
Description: Package containing transaction controls
Author: MX
Latest version: 6.0.0

# Transaction control library

This library contains Transaction controls

## Getting started

### Installation

- npm install @mx-cartographer/transactions

### Usage
All components must be wrapped by `TransactionDataProvider` in order for it to have access to the `TransactionStore`

#### TransactionsList control
```
import { TransactionStore } from '@mx-cartographer/common'
import { TransactionsList } from '@mx-cartographer/transactions'

export const Example = ({ store: TransactionStore }) => {

 return (
   <TransactionDataProvider onEvent={handleEvent} store={store}>
     <TransactionsList />
   </TransactionDataProvider>
 )
}
```
npm package: @mx-design/hooks
Description: mx-design react hooks lib
Latest version: 0.1.2

## 语言
[English](./README.md) | [中文](./README.zh.md)

## 简介
mx-design 中的 React hooks库


## 文档

### [useMergeProps](./src/useMergeProps.ts)

这样的设计参考了arco.design

把我们的组件库对于props的处理分为三层：

举个例子, 如下的Empty组件：

```javascript
const defaultProps = {};
function Empty(baseProps: EmptyProps, ref) {
  const { getPrefixCls, componentConfig } = useContext(ConfigContext);
  const props = useMergeProps<EmptyProps>(baseProps, defaultProps, componentConfig?.Empty);

  return (
    <div ref={ref} className={containerCls} style={style}>

    </div>
  );
}
```
- 其中componentConfig是从ConfigProvider上传下来的组件全局配置，可以配置所有组件的参数，但它的优先级是高于defaultProps，也就是componentConfig?.Empty的属性如果有和defaultProps同名的，componentConfig?.Empty会覆盖defaultProps
- baseProps是直接传给Empty组件的props，优先级最高
- 最低优先级的是defaultProps



参数:

- componentProps: PropsType，必填，传入的组件props。
- defaultProps: Partial<PropsType>，必填，组件的默认props。
- globalComponentConfig: Partial<PropsType> | undefined，可选，全局组件配置。

#### 返回值

合并后的最终props


### [useMergeValue](./src/useMergeValue.ts)

参考了arco.design的设计。

组件有时分为受控组件和非受控组件，如果可以统一处理受控和非受控的逻辑，我们希望当你传入value的时候自动识别为受控状态，当没有传入value或者传入了defaultValue，我们认为是非受控的状态。

对外暴露的都是最终的值和改变值的方法。

#### 参数
useMergeValue 接受两个参数：

- defaultStateValue（必需）- 组件初始状态的默认值。
- props（可选）- 一个包含 defaultValue 和 value 两个属性的对象，用于控制组件状态。
  - defaultValue - 组件默认状态的值。
  - value - 控制组件状态的值。

#### 返回值
- mergedValue - 组件状态的合并值。
- setStateValue - 用于更新组件状态的函数。
- stateValue - 组件当前状态的值。

#### 案例
如下，这是一个checkbox组件
```javascript
import React, { useContext, useCallback, useRef, useEffect } from 'react';
import useMergeValue from 'xx';

function Checkbox<T extends React.ReactText>(baseProps: CheckboxProps<T>, ref) {
  const [checked, setChecked] = useMergeValue(false, {
    value: props.checked,
    defaultValue: props.defaultChecked,
  });

  // ...
}

Checkbox.displayName = 'Checkbox';
```

假如外部传入了props.checked，那么这个checkbox是一个受控组件，只有props.checked变化的时候，checkbox的状态才会变化。

如果没有传props.checked，而是传入了props.defaultChecked，那么这个checkbox是一个非受控组件，比如你点击checkbox这个组件的时候，会根据你点击的情况自动切换是否是check状态

#### 源码解析

如下，首先先检测value，也就是受控的属性value是否有值，有的话，说明是受控状态，所以返回给外部的就是受控的值value
```javascript
  const mergedValue = isUndefined(value) ? stateValue : value;
  return [mergedValue, ...]
```
如果是非受控状态，如下：
```javascript
  const [stateValue, setStateValue] = useState<T>(
    // eslint-disable-next-line no-nested-ternary
    !isUndefined(value) ? value : !isUndefined(defaultValue) ? defaultValue : defaultStateValue
  );
```
此时stateValue就是非受控状态了，`const mergedValue = isUndefined(value) ? stateValue : value;`这里就会返回非受控状态的值。

最后，我们以防万一，有可能刚开始是有value的，也就是处于受控状态，然后将value属性删除，变为了非受控状态：

```javascript
  useEffect(() => {
    if (firstRenderRef.current) {
      firstRenderRef.current = false;
      return;
    }

    if (value === undefined) {
      setStateValue(value);
    }
  }, [value]);
```

当然，这个函数并不是完美的，比如我初始化受控状态的值就是undefined，也就是value就是undefined的时候就会出问题，但是这个hook是供我们组件库内部使用，所以我们自己知道不会出现这种状况。
npm package: @mx-design/icon
Description: react icon lib
Latest version: 0.7.0


[中文](./README.zh.md)
## Introduction

The icon warehouse of mx-design has the following features:

## Feature 1: icon-font icon to Icon component script

Script path:
```
./src/generateIcons.js
```
It also contains a use case. If you download icons from icon-font, this repository contains a script that can read the symbol-mode js file you pulled from icon-font, and then extract the <path> tag content of all elements in it. Then they are packaged as Icon files that react can use directly.

## Feature 2: Support direct use of plop templates to generate a single Icon component

```
npm run plop
```
The template configuration file is in
```
./plopfile.js
```
The template files are in
```
plop-templates/icon.hbs
```
npm package: @mx-design/web
Description: mxDesign Component for React
Latest version: 0.1.9

<div align="center">
    <img alt="Mx Design Logo" width="300" src="../../assets/logo.png"/>
</div>
<div align="center" style="margin-top: 0px">
  <h1>Mx Design</h1>
</div>

<div align="center">

mx-design want to create the best tutorial project on github about how to build a react component library.

</div>

<div align="center">

[English](./README.md) | [中文](./README.zh.md)

</div>
## 代码架构设计

一个组件大致分为以下几个层次（对于简单组件没有分层，因为代码量太少了，没有必要）,我们拿tree组件举例：

### 逻辑层

把tree组价的数据结构放在useReducer中，然后更改数据结构的方法放入useStore中，这样就组成了tree组件的主要操作逻辑，所有的逻辑修改都聚合到这一层。

如下：

```
const useStore = (props) => {
  const [data, setData] = useReducer(...);
  const handleClick = () => { ... }
  // ...
  return {
    data,
    handleClick,
    ...
  }
}
```


### 样式层

使用useClass hook和useStyle hook，把所有的样式都聚合到这一层。

```javascript
const { wrapperClass, nodeClass } = useClass(...)

const { wrapperStyle, nodeStyle } = useStyle(...);
```


### 渲染层

因为在逻辑层已经拿到数据和例如click事件的注册方法，渲染层只要把数据和方法放到jsx元素上即可

样式也是如此，所以react的充当了一个渲染层（类似数据变化的逻辑都不在这里处理），就避免大量的useState去处理组件逻辑，让组件发可维护性大大降低。