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

smartdev-iot-com

v0.0.5

Published

在线预览:[戳我 😘](https://coding.jd.com/smarthome_fe/iot-ui.git)

Downloads

3

Readme

IOT UI 组件库

在线预览:戳我 😘

Q&A

1.添加了新的组件,路径也配置好了,为什么打开页面的时候展示404

      a:重启项目试试

运行项目

  • 提交代码

    yarn commit

    使用 yarn commit 替代 git commit生成规范的 Commit Message,当然为了效率你可以选择手写,但是要符合规范

本地预览:

git clone https://coding.jd.com/smarthome_fe/iot-ui/
cd iot-ui
yarn
yarn start

按顺序执行完命令后,即可在 localhost:3000 端口看到以下内容:

preview.png

开发项目

一、项目结构

  • Components 自定义组件

    • Blocks.ts 导出组件的block 定义.如果不希望拖拽可以不导出

    • Types.ts 导出组件的Type 定义.必须导出。如果不再使用,可在这里移除

    • index.ts 正常导出组件。做为普通组件使用

    • Bool 盛放bool 类型组件

      • switch

        • Demo 开发时用于调试的demo目录

        • style 样式

        • build.tsx 打包定义文件

        • GrapesjsConfig.tsx

          这里配置组件平台的组件及block

          Type: 相当于标签

          block: 拖拽元素,用于形成左侧组件列表

          类型为:GrapesjsConfig,根据想要的按结构书写即可

        • Index.mdx docz 库使用文件,用于形成组件调试预览网站

          • 组件介绍

            CodeBox 代码展示

            Props 组件属性说明

            MyTheme 组件主题设置

            ---
            name: 电源开关
            route: /IOTPower
            menu: 组件
            ---
            import { CodeBox } from '../../doc-comps/code-box';
            import MyTheme from '../../doc-comps/theme';
            import { Playground, Props } from 'docz'
            import IOTPower from './IOTPower';
                      
            import BasicDemo from './demo/1-demo-basic';
            import BasicDemoCode from '!raw-loader!./demo/1-demo-basic.tsx';
            import style from '!raw-loader!./style/index.less';
            import theme from '!raw-loader!../../base/theme.css';
                      
            #电源开关
                      
            控制设备开关。
                      
            ## 代码演示
                      
            ### 基本用法
                      
            <CodeBox code={BasicDemoCode} title="基本用法" desc="使用kind控制Alert类型">
              <BasicDemo />
            </CodeBox>
            ## API
            <Props of={IOTPower}/>
                      
            ## 主题设置
            <MyTheme style={style} oldTheme={theme}/>
        • index.ts

        • Interface.ts 定义类型

        • IOTSwitch 组件定义文件

  • scripts 脚本目录

  • Static 静态资源

    • font 字体图标

二、开发

  1. 根据bool/switch 书写组件,执行yarn start 可在网站实时查看组件样式

  2. 写完组件后,配置grapesjsconfig.tsx 。拖拽工程根据这里的定义生成Type 和Block

  3. 判断该组件是否为拖拽元素(在Block.ts中导出),判断拖拽平台是否注册为基础组件(在types.ts 中导出)

  4. 发布组件

    yarn release
  5. 登录服务器,停掉服务

    ssh -p 22 [email protected]
    ps -ef | grep node 找到 node线程
    //删除除了grep --color=auto **node** 以外的进程
    Kill -9 进程号
  6. 升级组件库

    //目录/export/servers/project/device-control-project
    npm update @jd/iot-ui

    scp -P 22 -r /Users/fengyanwei/Desktop/图标库 [email protected]:/export/servers/project/device-control-project/public/fonts

  7. 启动服务

     nohup npm run start &
     //回车两次
  8. 如果增加了字体图标如果将字体图标文件cp到服务器特定目录下

    cd /export/servers/project/device-control-project/public
       
    拷贝文件:scp -P 22 /Users/fengyanwei/Desktop/iot-ui-fonts.css [email protected]:/export/servers/project/device-control-project/public
       
    scp -P 22 /Users/fengyanwei/Downloads/Git/iot-ui/static/font/fonts/iconfont.svg [email protected]:/export/servers/project/device-control-project/public/fonts
       
    scp -P 22 /Users/fengyanwei/Downloads/Git/iot-ui/static/font/fonts/iconfont.ttf [email protected]:/export/servers/project/device-control-project/public/fonts
       
    scp -P 22 /Users/fengyanwei/Downloads/Git/iot-ui/static/font/fonts/iconfont.woff [email protected]:/export/servers/project/device-control-project/public/fonts

三、 关键类

1、ITraits

export interface ITraits {
  type: string;//属性类型
  name: string;//在attributes 中的名称
  value: any;//默认值
  label?: string;//左侧展示名称
  placeHold?:string;//当是文本类型时文本框的placehold
  optionValue?:string;//可选类型时使用
  optionName?:string;
}

type 支持的类型有:Text、Number、Checkbox、Select、Color、Button以及自定义的类型option-text

  • Text、Number、Checkbox、Select、Color、Button配置方式

  • option-text 配置方式:

{
  type: 'option-text',
  name: 'showSubtitle',
  value: true,
  optionName: 'subTitle',
  optionValue: '副标题',
  placeHold: '可选副标题',
 }

2、TypeConfig

export interface TypeConfig {
  tagName: string; //标签名称
  render: (attributes: any) => JSX.Element; //渲染逻辑
  traits: (opt: any) => Array<ITraits>; //修改属性
}

render 的参数是你配置的traits 中的{name:value};取值注意。

结语

仓库地址