precise ui
2.1.17
一个完整的自我反应组件库，其依赖性最小的依赖性由Zeiss提供动力。
UI组件库既包含非常低级的设计元素，也包含组合的高级设计元素。通常，图书馆的目的是通过揭示满足设计规格并提供易于编程的组件来简化开发。因此，可重复的UI设计应仅需几分钟而不是数小时。
有关我们的厨房水槽，请参见https://precise-ui.io（即演示页面，说明了所有组件，包括其文档）。
基本上，在明确的语句提供灵活性的同时，常见用法应是隐含的。因此，我们的目标是（自以为是）简单，同时能够尽可能自定义。尽管标准设计几乎是我们自己的主要目标设定的，但我们仍希望在该领域实现完全的自由。因此，我们正在不断改进我们的主题以及如何揭示组件以实现可能需要的任何自定义。
精确的UI可以通过使用NPM或纱线轻松地集成到您的前端项目中。要开始使用它，请按照以下说明进行操作：
npm i precise-ui或者，使用纱线
yarn add precise-uinpm i react styled-components一切准备就绪，现在您可以开始导入精确的UI组合。
import { TextField } from 'precise-ui' ;
< TextField label = "Label" />您可以在我们的网站上查看所有可用组件的列表。
欢迎每个人都为精确的UI做出任何贡献。但是，在开始之前，请确保您阅读我们的贡献说明。
如果您不确定是否应该做出贡献，我们的行为准则可以为您提供帮助。
如果您有任何用法和一般性问题，欢迎您使用标签precise-ui在堆栈溢出上提出问题，您将尽快获得帮助。
另外，在此处创建新问题时，请使用其中一个提供的模板：
以下部分指导您完成开发精确UI的过程。
为了开发，您将需要NPM和Node.js 8+。克隆存储库后通过
npm install这是一个让您入门的快速示例。您需要运行的只是：
npm start结果，这将启动运行厨房水槽（我们的演示应用程序）的开发服务器，该服务器可以在本地运行，可以通过Localhost：6060到达。注意：可以更改此端口。可用的页面包含所有包含的组件和一些有用的文档。
也可以通过npm进行增量版本。
npm version这将显示当前版本并要求新版本。结果，软件包中的信息已更新。此外，使用信息创建一个git标签（使用“ V”自动前缀）。该过程也可以通过直接指定新版本来自动化。因此，例如，如果我们的新版本为“ 1.2.3”，我们只使用以下命令：
npm version --new-version 1.2.3我们不使用默认导出。相反，每个导出都应正确命名。对于组件，导出的名称等于其文件或文件夹的名称。
文件夹
每个裸露的主组件都必须放在其自己的文件夹下方的components下方。位于*.part.tsx文件中的组件被认为是仅用于提供某些（必要的）内部结构的内部组件。
每个裸露的设计辅助组件都必须放在quarks文件夹中的文件中。设计助手的确从Styled前缀开始，就像普通样式的组件一样。
任何高阶组件（HOC）都应位于hoc文件夹中。命名惯例是with前缀曝光a。
与上下文相关的组件位于contexts文件夹中。
普通功能实用程序必须放置在utils文件夹中。即使为方便起见，所有util的内容均已导出，也应直接从任何组件中引用它们的模块。公用事业必须是自我维持的，即禁止引用后退组件。
命名
虽然应将无状态组件作为const创建，但应将状态成分作为class创建。在前一种情况下，只能创建带有组件名称Props的界面（以声明道具的打字）。在后一种情况下，也应该创建与组件名称后缀和State的附加接口。该接口包含组件内部状态的类型信息。
输入字段组件应始终用Field后缀。他们的道具应扩展InputProps接口。
事件道具应与on进行前缀，并且应只有一个参数。该参数必须是一个遵循接口的对象，该界面具有适当的事件名称，通常由组件的名称，事件类型组成，并与Event （例如，例如，对于TextField的onChange ，我们都有TextFieldChangeEvent 。
我们有各种不同的组件类。我们应该能够通过查看组件的后缀来轻松区分不同类别的组件。我们有：
*Control ，状态功能组件*Panel ，要使用的布局*Field ，输入字段该惯例的例外可能是由于各种原因（历史，美学，...），但应始终正确地进行推理和讨论。
没有太多要写的。我们使用更漂亮的，我们的构建检查是否适当地修饰了代码。只是跑
npm run prettier如果您怀疑您的代码更改适合我们所需的格式。
任何更改都需要进行各自的单位测试。为了运行测试，我们使用以下命令：
npm run test这也将运行衬里。独立的单元测试可通过test:unit 。同样，我们也可以轻松地报告代码覆盖范围：
npm run test:unit --coverage对于单位测试，我们使用开玩笑。我们建议使用快照测试（通过酶和一些JSON快照序列化器完成）。
视觉快照位于/integration/__image_snapshots__中。
当测试运行时，它会从[componentName]/Example.md呈现组件，使屏幕截图并将它们与以前的版本屏幕截图进行比较。
要运行测试本地码头机。
npm run test:visual更改，添加或删除组件后，应更新快照。更新快照：
npm run test:visual -- -u在某些情况下（即动画组件），需要跳过测试。可以以更新的方式完成：更新示例.md文件：
```js { "props": { "data-skip": true } }
<Component />
在某些情况下，需要告诉视觉测试在进行快照之前等待。可以以更新的方式完成：更新示例.md文件：
```js { "props": { "data-wait": 500 } }
<Component />
所有导入图标的列表在/tools/icongen.config中。修改列表后，您应该运行npm run icongen ，否则将在Prepush上运行。
所有可发布的代码均在develop分支中汇总。要制作版本，只需创建一个github版本（通常通过CHANGELOG.md文件的当前条目复制）。
因此，标准工作流程看起来像：
developdevelop中汇总的功能使GITHUB释放develop下一个更改，请确保更改 /递增版本号要了解当前发布的版本，您有两个选项。您要么转到NPM页面，要么使用GitHub版本。两者也链接在readme.md之上。
精确的UI使用MIT许可证发布。有关更多信息，请参见许可证文件。
我们使用的是来自材料UI图标的一些图标。它们的代码和设计由材料UI（MIT）的各自许可涵盖。
