@3dr/sitescan-ui-patterns 中文文档教程

Question

Site Scan Pattern Library

通过 Github Pages 托管在 https://3drobotics.github.io/sitescan-ui-patterns/。

Development

Dependencies

安装 Node JS

安装 Yarn

安装 Rollup

Install app dependencies

yarn install

Managing Dependencies

使用 Yarn CLI 添加或删除依赖项。 （文档）

例如，yarn add [package]@[version]。

Building (Handled by Rollup)

构建由 rollup 处理，这是一个利用 ES6 模块来最大化效率的模块打包器。 要构建，请运行 yard build 命令。

构建配置存储在 rollup.config.js 文件中，捆绑输出存储在 dist 文件夹中。

Local Development Between Repositories

有了像这样的可重用模式库，在其他本地存储库中开发时能够查看实时更新是非常理想的。 为此，请使用此库目录中的 yarn link 命令。 接下来导航到您要将其链接到的目录并运行 yarn link "@3dr/sitescan-ui-patterns"。

要在进行更新时启用自动重建，请在此库的目录中运行 yarn dev 命令。 此命令由 rollup-watch 插件启用。 除了 yarn link 设置，这将允许对链接存储库中的模式组件进行实时更新。

注意：在链接此存储库之前，您必须运行yarn build。

Storybook Development

Storybook用于提供一个简单的UI开发环境。 它有助于为每个组件提供文档和交互式沙箱。 开发服务器使用故事书的默认配置与 webpack 一起运行：

yarn storybook

导航到 localhost:9001 以查看故事书界面并开发组件及其故事。

每个组件都应该在 stories 文件夹中有一个相应的 [componentName].js 文件，其中包含用于在 Storybook 中查看组件并与之交互的逻辑。

大多数故事会使用一些故事书插件，例如info和<代码>旋钮，以增强文档和灵活性。 这些插件注册在 .storybook/addons.js 文件中，可以在任何故事文件中使用。

Building and Deploying storybook

使用 故事书部署器 将故事书界面部署到 Github Pages。 要进行构建，请运行以下命令：

yarn build-storybook

这会将库包添加到 gh-pages 分支中可用的 .out 文件夹中。 要部署，请运行：

yarn deploy-storybook

您的更新现在应该可以在 https://3drobotics.github.io/sitescan-ui-patterns/ 上查看。 当更新 master 分支时，这将是更新已部署站点所必需的。

Styles

CSS-in-JS 库 glamorous 用于设置组件样式。 这个具有低配置开销的简单库默认提供作用域样式，并允许将样式属性视为普通的 React 组件道具。 glamorous 仍然提供对更高级的 CSS 技术（如媒体查询和伪选择器）的支持。

每个组件都应该有一个相应的 [componentName].styles.js 文件，该文件将组件样式存储在 JavaScript 对象中。 然后可以根据给定的输入通过迷人的 css 方法将基本样式与任何适用的修饰符合并。 任何提供的特定于实例的样式属性都可以直接通过 ...props 传递，这确保它们优先于 css 生成的类。

示例 -

/* Input.styles.js */
export default {
  base: { border: '1px solid black' }, // styles applicable to all instances
  small: { fontSize: '12px', width: '40px' },
  large: { fontSize: '16px', width: '60px' },
}

/* Input.js */
import styles from ./Input.styles.js;

<glamorous.Input
  className={css({
    ...styles.base,
    ...styles[size], // size prop can default to 'small' or 'large'
  })}
  {...props} // can contain individual style properties
/>

Style Adjustments

库元素需要灵活地构建，以便根据给定的条件调整它们的样式 用例。 在大多数情况下，这将涉及使用道具，例如 modifiers 和 size。

通常，修饰符通过背景颜色、字体颜色、边框等更多装饰性属性来改变元素的外观。Size 属性在最高级别影响元素的大小。 修饰符和大小是分开的，因为给定的元素实例不应有多个修饰符或多个大小，但可以各有一个。

某些元素可能还具有基于特定属性的样式逻辑，例如 disabled 按钮。 这些实例可以作为单独的道具传入，组件可以根据它们的值应用条件样式。

元素是使用与这些道具相对应的预定义样式构建的，这些道具应该在可能的情况下用于调整外观。 但是，如果给定的实现需要额外的样式调整，glamorous 允许将样式属性作为 props 直接传递给元素。

示例：

<Button modifiers="danger" size="large" marginLeft="40px" disabled>
  Button
</Button>

Linting

JavaScript linting 配置通过 eslint-config-sitescan 存储库与站点扫描管理器和 SS 管理员共享。

还可以通过 stylelint-processor-glamorous 对样式语法进行检查。 然而，由于样式主要存储在 JavaScript 对象中，因此它相对有限且需要手动操作。 yarn stylelint 'src/**/*.js' 命令用于检查样式模块语法的有效性，但请注意，它仅针对以 stylelint-processor-glamorous 文档。

鉴于此设置的性质和此库的样式配置，这主要在语法调试的情况下很有用。 在开发期间对样式模块进行 lint 的一种快速方法是在其左括号之前添加 @css 注释，然后运行 ​​yarn stylelint 'src/**/*.js' 命令：

const styles = // @css
  {
    notACssProperty: 'test',
  };

Releases and Versioning

sitescan-ui-patterns 在@3dr 命名空间下发布到 NPM @3dr/sitescan-ui-模式。

yarn publish --access public --[major|minor|patch]

按照语义版本控制进行版本控制。

将自动创建一个新的提交，该提交会影响 package.json 中的版本。