npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@pitrix/lego-ui

v0.3.2

Published

QingCloud UI Component

Downloads

21

Readme

Lego-UI

React & CSS UI Framework.

文档

安装

npm install @pitrix/lego-ui --save

使用示例

import { LocaleProvider, Button } from '@pitrix/lego-ui';
import { Locales } from './locales';

const App = () => (
  <LocaleProvider locales={locales}>
    <Button>Button</Button>
  </LocaleProvider>
);

ReactDOM.render(<App />, mountNode);

lego-ui 部分组件有使用 locale, LocaleProvider 默认会加载 lego-ui 的本地化文件,你也可以在你的项目中使用,只需要自定你的locales, 关于国际化请查看 LocaleProvider

引入样式

如果没有定制需求,可以直接引入 css 样式文件:

import '@pitrix/lego-ui/lib/scss/lego-ui.min.css';

或者引入 scss 样式文件:

import '@pitrix/lego-ui/lib/scss/index.scss';

这样可以直接使用 lego-ui 的默认主题样式。

定制主题

lego-ui 设计规范上支持一定程度的样式定制,以满足不同产品的多样化视觉需求,包括但不限于主色、圆角、边框和部分组件的视觉定制。

样式变量

定制方式

建立一个单独的 scss 文件如下,然后再引入这个文件:

// 引入默认主题
@import '~@pitrix/lego-ui/lib/scss/themes/default';

// 引入 SVG 图标组件的样式
@import '~@pitrix/lego-ui/lib/scss/base/icon';

// 在这里定义你要覆盖的变量
// $primary: blue;
// $button-color: #ccc;

// 引入核心的 Bulma 样式与组件样式
@import '~@pitrix/lego-ui/lib/scss/core.scss';
  • 注意:这种方式已经载入了所有组件的样式。

目录结构

|-- build/            _____________________ # 构建脚本
|-- config/           _____________________ # 构建环境配置
|-- dist/             _____________________ # 文档站点构建输出目录
|-- lib/              _____________________ # npm 发布代码目录
|-- mock/             _____________________ # mock 脚本
|-- site/             _____________________ # 文档站点
|   |-- assets/       _____________________ # 静态资源文件
|   |-- layout/       _____________________ # 页面布局
|   |-- pages/        _____________________ # 文档内容
|   |-- routes/       _____________________ # 站点路由
|   |-- scss/         _____________________ # 样式文件
|-- src/              _____________________ # 源码
|   |-- assets/       _____________________ # 静态资源文件
|   |-- components/   _____________________ # 组件源码
|   |-- locales/      _____________________ # 本地化文件
|   |-- scss/         _____________________ # 样式
|   `-- utils/        _____________________ # 工具类
|-- static/           _____________________ # 静态资源

脚本说明

    # 运行本地开发服务,默认端口 3000
    npm run dev

    # 构建文档站点
    npm run build

    # 代码检查
    npm run lint

    # js,jsx, markdown 文件代码检查
    npm run eslint

    # scss 文件代码检查
    npm run stylelint

    # 代码格式化
    npm run formatter

    # 构建 npm 发布需要的代码
    npm run build:lib

    # 单独构建 scss 文件
    npm run build:sass

    # 单独构建 icon
    npm run build:icon

    # 构建 版本的 badge 图标
    npm run build:badge

    # 发布新版
    npm run release

关于图标库

如需要向图标库中添加图标

  • 复制图标到对应的目录,例如 /src/assets/icons/object
  • 构建 npm run build:icon;
  • 将新图标添加到 site/pages/docs/components/icon.md

⚠️ 注意:svg 图片大小、颜色(#324558)。

git commit 提交规范

Commit Message 需要遵循以下格式:

type(scope?): subject #scope is optional

其中:

  • type: 用于定义这次提交的类型,可选值包括:feat / fix / perf / refactor / revert / build / ci / chore / style / test / docs。
  • scope: 用于定义这次提交的改动范围关键字,小写,可选。
  • subject: 用于描述这次提交的改动内容,建议统一中文。

提交的过程中会做 eslint 检查,不通过则不能提交。

编码规范

版本发布流程

标准版本:

npm run release
qnpm publish

构建发布到仓库中所需的文件,standard-version 会生成 changelog,打上 tag 并提交 commit;

你也可以指定版本

qnpm run release -- --release-as 1.1.0

预发布版本:

预发布版本不希望生成 changelog, 所以可以在 package.json 中 手动调整版本号,例如 0.1.5-xx,发布时需要指定 tag 为 next。

qnpm publish --tag=next

文档站点

http://172.16.60.3:8080/view/f2e/job/lego-ui/

关于 CHANGELOG