hackplan / uui

Universal Utility-first UI Library

UUI

Universal Utility-first React UI Library

UUI is still heavily under development. Specifications and Usage might change in the future and, as of now, no backwards compatibility is guaranteed!

English | 简体中文

Features

• A set of useful components out of the box.
• TypeScript based full type safety.
• Highly customizable.
• WAI-ARIA 1.2 compliance

Installation

⚠️⚠️⚠️ UUI requires TypeScript 3.8 or higher. ⚠️⚠️⚠️

npm install @hackplan/uui --save

yarn add @hackplan/uui

Usage

import '@hackplan/uui/lib/index.css';
import { Button } from '@hackplan/uui';

function App() {
  return (
    <div>
      <Button>Click me!</Button>
    </div>
  )
}

Links

• Documentation
• Introduction
• Using Customize
• Principle & Implementation
• Contributing
• Deployment
• Changelog

Development

For the development of this project, Yarn is preferred over npm. However, any Yarn command can be replaced by the npm equivalent.

git clone https://github.com/HackPlan/UUI.git
cd uui
nvm use
yarn
yarn storybook

Open your browser and visit http://localhost:6006 .

Contributing

We welcome all contributions. Please read CONTRIBUTING.md first.

Products built with UUI

图压	多少记账	昼间日历

Licenses

All files on the UUI GitHub repository are subject to the MIT license. Please read the License file at the root of the project.

uui's Issues

Drawer、Dialog 同时使用的时候，无法 focus 在 dialog 的 input 上

出现在 Drawer、Dialog 同时使用的时候

Dialog 在 Drawer 外面 被 Drawer 的 onDismiss 捕获，
导致我没有办法 鼠标 click focus on 到 input 上

把 onDismiss 干掉之后 就没有这个问题了。

支持 data-* 属性

在一些使用场景中，使用 UUI 组件的开发者可能需要对某些 elements 添加额外的 data 属性，
用于开发更多的功能或者做前端测试的时候找到 element。

JSX

<UUIComponent
  customize={{
    Root: {
      dataAttributes: {                       // <------
        id: 'saogfyaudsf',                    // <------
        message: 'testing data attributes'    // <------
      }
    }
  }}
/>

Output

<div
  class="UUI-Component-Root"
  data-id="saogfyaudsf"                       // <------
  data-message="testing data attributes">     // <------
</div>

核心工具单元测试 Core Util Unit Test

用于创建 UUI 组件的工具函数放置于项目 src/core 文件夹。

由于所有的 UUI 组件都是通过这些工具函数实现功能的，所以每当这些核心的工具函数出了一些 bug 或者 performance issue，几乎会影响到所有的组件。

给这些工具函数写单元测试是非常有必要的。

进度条 ProgressBar

进度条组件，展示一项操作当前的进度。

• UI 上大致分为直线型和圆环型（组件内部申明不同的 Node）
• 功能上分为连续进度型和离散进度型
• 样式上不需要实现多种色彩方案，提供更多的可自定义空间

文档打不开，检查控制台后有跨域问题

文档打不开，检查控制台后有跨域问题

组件加载状态 Component Loading

目前 UUI 的大部分组件都缺乏加载状态的显示。目前只有 按钮 Button 和 开关 Switch 组件有 props.loading?: boolean 属性。

大部分组件都是可能会是异步操作的（比如分页组件和表格组件，当用户点击下一页按钮或者选择跳转到某一页时，会触发网络请求新的表格数据，这个等待的过程，分页和表格组件应该显示加载状态并且不能操作），所以这些组件加上加载状态显示是一个很有必要的需求。

考虑到有很多的组件都需要加载状态显示，可能需要有一种通用的实现方式来为这些组件实现功能。

test ci action run failed if pull request from forked repo

Check payload: {"owner":"HackPlan","repo":"UUI","head_sha":"c55ac3bfd36c9f5aa6299bc7b97296a1285b3557","name":"jest-github-action","status":"completed","conclusion":"success","output":{"title":"Jest tests passed","summary":"10 tests passing in 1 suite.","annotations":[]}}
RequestError [HttpError]: Resource not accessible by integration
##[error]Resource not accessible by integration
    at /home/runner/work/_actions/mattallty/jest-github-action/v1.0.3/dist/index.js:1:153339
    at processTicksAndRejections (internal/process/task_queues.js:93:5) {
  name: 'HttpError',
  status: 403,
  headers: {
    'access-control-allow-origin': '*',
    'access-control-expose-headers': 'ETag, Link, Location, Retry-After, X-GitHub-OTP, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Reset, X-OAuth-Scopes, X-Accepted-OAuth-Scopes, X-Poll-Interval, X-GitHub-Media-Type, Deprecation, Sunset',
    connection: 'close',
    'content-encoding': 'gzip',
    'content-security-policy': "default-src 'none'",
    'content-type': 'application/json; charset=utf-8',
    date: 'Wed, 19 Aug 2020 18:58:41 GMT',
    'referrer-policy': 'origin-when-cross-origin, strict-origin-when-cross-origin',
    server: 'GitHub.com',
    status: '403 Forbidden',
    'strict-transport-security': 'max-age=31536000; includeSubdomains; preload',
    'transfer-encoding': 'chunked',
    vary: 'Accept-Encoding, Accept, X-Requested-With',
    'x-content-type-options': 'nosniff',
    'x-frame-options': 'deny',
    'x-github-media-type': 'github.antiope-preview; format=json',
    'x-github-request-id': '0780:493A:C45096:F2E822:5F3D7660',
    'x-ratelimit-limit': '1000',
    'x-ratelimit-remaining': '991',
    'x-ratelimit-reset': '1597865669',
    'x-xss-protection': '1; mode=block'
  },
  request: {
    method: 'POST',
    url: 'https://api.github.com/repos/HackPlan/UUI/check-runs',
    headers: {
      accept: 'application/vnd.github.antiope-preview+json',
      'user-agent': 'octokit.js/16.43.1 Node.js/12.13.1 (Linux 5.3; x64)',
      authorization: 'token [REDACTED]',
      'content-type': 'application/json; charset=utf-8'
    },
    body: '{"head_sha":"c55ac3bfd36c9f5aa6299bc7b97296a1285b3557","name":"jest-github-action","status":"completed","conclusion":"success","output":{"title":"Jest tests passed","summary":"10 tests passing in 1 suite.","annotations":[]}}',
    request: { hook: [Function: bound bound register], validate: [Object] }
  },
  documentation_url: 'https://docs.github.com/rest/reference/checks#create-a-check-run'
}

Some component nodes have duplicate classnames

UUI-Cascader-Dropdown

Cascader new feature - search to select & change on select

• changeOnFinalSelect Allow only select final level options.
• enableSearch Cascader can input text to search options.
• custom search function

标签页 Tabs

标签页组件，同级视图切换选项卡

• 水平方向和垂直方向放置选项卡

Toast: Unexpected error: ReferenceError: _a is not defined

  // ...
  static create(props: ToasterFeatureProps, container = ReactHelper.document?.body) { // <----- optional chaining in function default parameter
    const containerElement = ReactHelper.document?.createElement("div");
  // ...

reference: microsoft/TypeScript#36295

使用键盘控制组件

考虑给一些组件加上键盘按键控制的功能，比如：

• 标签页 Tabs 使用 ← → 切换页面
• 使用 w s a d 切换组件之间的 focus 状态
• 使用 ← → ↑ ↓ 切换 Select 和 Cascader 选项

UUI Components displayed as Anonymous in React Dev Tools

UUI components are all displayed as Anonymous when viewed with React Dev Tools.

the nodes inside these components should be given names, which is more convenient for development and debugging.

Build failure when use typescript in Next.JS: Type error: Declaration or statement expected.

yarn run v1.22.5
$ next build
Failed to compile.

./node_modules/@hackplan/uui/lib/index.d.ts:37:1
Type error: Declaration or statement expected.

  35 |  */
  36 | export { UUI } from './core/uui';
> 37 | export type { UUIClassComponentProps, UUIFunctionComponentProps, UUIComponentCustomizeProps } from './core/uui';
     | ^
  38 | /**
  39 |  * Styles
  40 |  */
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[BUG]处理图片分辨率出现错误

过程
我在软件设置好图片的高度宽度和压缩强度后，将图片批量(经过几次实验后,与单次和批量没有关联)放入软件进行处理，压缩强度处理完成，但是图片的高度和宽度并没有完全处理完毕。
图片分辨率为(4535x6307),目标分辨率为(2646x3679)，图片被第一次压缩后，再次把文件拖入软件进行处理后(不是点软件上的再次压缩，而是把压缩过的文件重新拽入软件中进行处理)，图片分辨率才能压缩成功。
系统：windows10家庭版
软件版本：https://tuya.xinxiao.tech/ 直接下载的

是否有全局配置组件自定义样式的实现？

Is your feature request related to a problem? Please describe.

组件有customize的属性来实现各个组件的样式自定义，不过没有从文档看到是否有全局配置组件自定义样式的方式

Describe the solution you'd like

依靠React Context组件来注入自定义的配置

const config = {
  Stepper: {
    // ... Stepper customize
  },
  Switch: {
    // ...
  },
  Button: {
    // ...
  }
}

<ComponentCustomizeProvider config={config}>
  {children}
</ComponentCustomizeProvider>

我觉得这样能统一管理所有组件的样式自定义

支持 WAI-ARIA 属性

• 组件根据自身的功能添加一下 WAI-ARIA 属性
• customize 支持传入 ariaAttributes

JSX

<UUIComponent
  customize={{
    Root: {
      dataAttributes: {           // <------
        valuenow: '4',            // <------
        valuemin: '0',            // <------
        valuemax: '10',           // <------
      }
    }
  }}
/>

Output

<div
  class="UUI-Component-Root"
  aria-valuenow="4"                 // <------
  aria-valuemin="0"                 // <------
  aria-valuemax="10"                // <------
</div>

Dynamic content on a web page can be particularly problematic for users who, for whatever reason, are unable to view the screen. Stock tickers, live twitter feed updates, progress indicators, and similar content modify the DOM in ways that an assistive technology (AT) may not be aware of. That's where ARIA comes in.

The ARIA specification is split up into three different types of attributes: roles, states, and properties. Roles describe widgets that aren't otherwise available in HTML 4, such as sliders, menu bars, tabs, and dialogs. Properties describe characteristics of these widgets, such as if they are draggable, have a required element, or have a popup associated with them. States describe the current interaction state of an element, informing the assistive technology if it is busy, disabled, selected, or hidden.

reference

https://developer.mozilla.org/en-US/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets

https://www.w3.org/TR/wai-aria/

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques

UUI Component Util - node type declaration props support class component

class InnerComponent extends UUI.ClassComponent({
  prefix: 'UUI',
  name: 'InnerComponent',
  nodes: {
    Root: 'div',
  },
})<any, any> {
  render() { /*  */ }
}


export const MainComponent = UUI.FunctionComponent({
  name: 'MainComponent',
  nodes: {
    Root: 'div',
    Inner: InnerComponent, // <---------- this node type declaration
  },
}, (props: any, nodes) => {
  /*  */
}

Warning: Expected server HTML to contain a matching...

When I use Dialog components in Next.js (SSR), I got a Warning on the screenshot in the browser console.

Server render with client render are inconsistent. After all, it is a warning, hope it can be resolved. :-)