北星-原型设计系统

NorthStar是一个开源设计系统,具有可再使用的React组件,用于快速原型直观,有意义和方便的用户体验. 它简化了您的工作,并确保您的客户在规模上有连贯,可预测的用户体验. 以"北星"(NorthStar)为主线,可以专注于创新,用更少的资源做更多.

无论是开发者还是设计者,NorthStar都会帮助您从创建到原型的客户取悦.

北星 v2 通过杠杆作用改进了上一个版本 云景设计系统 并更新具有新特点的现有组成部分,使发展经验更加丰富.

在你开始之前

在开始使用"北星"进行项目之前,请注意:

• NorthStar目前只支持反应框架. 它支持最新的React版本,从18起.

• NorthStar支持现代浏览器最新稳定的发布——Chrome,Firefox和Safari.

• 北星号被运走 Apache 2.0 许可证。 。 。 .

安装

在反应工程中使用

// with npm
npm install @aws-northstar/ui
npm install @cloudscape-design/components

// with yarn
yarn add @aws-northstar/ui
yarn add @cloudscape-design/components

设置

在您的应用程序的顶端, 导入 NorthStar Theme Provider 组件, 并生成 NorthStar Theme Provider 组件 .

import NorthStarThemeProvider from '@aws-northstar/v2/components/NorthStarThemeProvider';

export default () => (
    <NorthStarThemeProvider>
        ...redux provider, Apollo client provider, react router...
    </NorthStarThemeProvider>
);

使用量

以下是一个简单的例子, 能让您开始在您的应用程序中添加一个输入字段的窗体 :

import React, { FC } from 'react';
import FormRenderer, { componentTypes, validatorTypes } from '@aws-northstar/ui/components/FormRenderer';

const MyComponent: FC = () => (
    <FormRenderer 
        onSubmit={console.log} 
        onCancel={console.log}
        schema={
            header: 'Submission Form',
            fields: [
                {
                    component: componentTypes.TEXT_FIELD,
                    name: 'email',
                    label: 'Email',
                    description: 'Email Address',
                    helperText: 'Enter a valid email address',
                    isRequired: true,
                    validate: [
                        {
                            type: validatorTypes.REQUIRED,
                        },
                        {
                            type: validatorTypes.PATTERN,
                            message: 'Invalid email address',
                            pattern: /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/i,
                        },
                    ],
                },
            ],
        }
    />
);

export default MyComponent; 

这个 文档网站 拥有如何使用每个组件的详细实例.

学回放,看看 反应文档。 。 。 .

支助

我们用 GitHub 问题 作为错误追踪器。 如果你认为你找到一个虫子,请跟着 提交错误 节次 贡献指南 并开放一个问题,详细介绍这一问题.

源代码

如果你对我们的源代码感兴趣 我们的回波在 https://github.com/aws/aws-northstar 页面存档备份,存于互联网档案馆。 。 。 .

更改日志

看看这个 更改日志