@47nordmedia/k2-systems-ui-library 中文文档教程

Question

K2 Systems library

Description

这个库在整个 K2 Systems 的数字服务中用作 UI 元素的单一来源。

Setup

Prerequisites

• Tailwind.css >= 3

Add package

npm install --save @47nordmedia/k2-systems-ui-library

或

yarn add @47nordmedia/k2-systems-ui-library

tailwind.config.js

将 ui-library 的配置文件添加到您的 tailwind.config.js

module.exports = {
  presets: [require('@47nordmedia/k2-systems-ui-library/dist/tailwind.config.js')],
  // config specific to this project would go here
  // ...
};

HTML / PHP

将自定义类添加到您现有的 css 文件。

@import "tailwindcss/base";
@import "@47nordmedia/k2-systems-ui-library/dist/customBase.css";

@import "tailwindcss/components";
@import "@47nordmedia/k2-systems-ui-library/dist/customComponents.css";
@import '@47nordmedia/k2-systems-ui-library/dist/main.css';

@import "tailwindcss/utilities";
@import "@47nordmedia/k2-systems-ui-library/dist/customUtilities.css";

Usage

Styleguide

使用 npx serve dist -l 8081 在浏览器中查看样式指南。

Icon Library

ICON LIBRARY

Example (HTML, PHP)

<div class="button ...">Hello World!</div>

JS Framework

todo …

Example (react.js)

import uiClasses from '@47nordmedia/k2-systems-ui-library';

export default function Button() {
  return <div className={`${uiClasses.button} ...`}>Hello World!</div>;
}

Workflow for adding new components

• Open new issue via 'new ui component' template.
• Set the issue to 'approved' once its tested and reviewed.
• Open new pull request and link the created issue.
• Merge pull request to main.
• Check build workflow for potential errors.
• Update ui library in you project to latest version.

Multiple issues for nested components

• to do…

Examples

为了构造嵌套的相关组件，我们使用改编的 BEM 命名约定。 CSS 部分将是标准的 BEM 约定。

然而，JS 部分将替换 dash-case 命名约定，并将其替换为 camelCase 命名约定。

所有 CSS 类都将从 JavaScript 文件中生成。 您可以在下面看到类名是如何转换的。

navMenu (js) --> nav-menu (css)
navMenu__item (js) --> nav-menu__item (css)

<nav class="nav-menu">
  <li class="nav-menu__item"></li>
  <li class="nav-menu__item"></li>
  <li class="nav-menu__item active"></li>
</nav>

// navMenu.ts
export default 'flex align-center justify-between';

// navMenu__item.ts
export default 'p-2 bg-gray-100 rounded-xl hover:bg-gray-200';

// index.ts
import navMenu from './classes/navMenu';
import navMenu__item from './classes/navMenu__item';

export default {
  navMenu: navMenu,
  navMenu__item: navMenu__item,
};

CLI Interface & CI/CD usage

CLI

要将新类添加到 classes 列表，只需运行：

yarn run build:js -c '<new-class-name>' -l '<tailwind classes>'

例如

yarn run build:js -c 'button' -l 'bg-gray-100 rounded-xl hover:bg-gray-200'

，要生成相应的 CSS 文件，请运行：

yarn run build:css

CI/CD

完全自动化的过程即将推出……

• Creation of a new branch based on the component name.
• Fetching of the ui-component issue content.
• Execution of the CLI with the content of the issue.
• Creation of an pull request.
• Publishing the updated code to a private NPM package.