Tarmac: 舰队设计系统
Tarmac是车队.co的设计系统.
它基于创建-反应-图书馆,风格-组件.
构成部分清单
- 莫达尔 ({莫达尔})
- 确认 Modal : 是或否模式 ({确认 Modal})
- 提醒 : 提醒消息, 主要用于模式 ({ Alert})
- 切换/ 切换 ({ 切换})
- 标签 ({标签})
- 行: 分出项的灰色行 ({行})
- 标题 ({ title})
正在进行的开发:按钮 ({按钮}), 输入
安装
npm install @fleet.co/tarmac
在您的工程中使用本地版本
首先, 制作此 repo 的本地副本, 用您的 IDE 访问文件夹 .
运行命令
npm build
这将创建一个 dist 文件夹 。 用您的 IDE 到达并运行命令
npm link
现在联系您的工程文件夹并运行
npm link @fleet.co/tarmac
在您的工程文件夹中, 导航到您的节点模块/ 反应文件夹
npm link
回到设计系统文件夹
npm link react
这将创建 2 个符号链接, 在您的本地项目中使用您的本地 DS . 现在启动你的设计系统和项目
npm run start
使用实例
为方便新组件的创建,您会在设计系统内部找到一个实例项目.
要启动它, 请导航到您的 DS 文件夹/ 示例并写入
npm run start
在示例文件夹中的 App.js 文件中,请按"Usage" 一节所述调用您新建的组件 .
发布新版本
要发布您 DS 到 npm 的新版本, 请运行
npm run publish-package
这将创建一个新的构建, 补丁当前版本, 发布到 npm并推动更改到主机 .
如果一切顺利,您将在您的 IDE 中看到以下消息 : “ 设计系统成功更新到 X. X. X ”
等待新版本在 npm 上发布, 然后返回您的项目文件夹并安装
npm i @fleet.co/tarmac
使用量
import React from 'react'
import { MyComponent } from '@fleet.co/tarmac'
const myPage = () => {
return <MyComponent />
}
解决问题
如果你在本地安装DS时面临问题,请确保您的项目和DS目前没有运行任何进程. 如果是的话,就把他们全部杀死,再尝试"在当地使用"的程序.
您可能还需要在您的工程和DS中删除您的节点模块文件夹 。 然后在两个文件夹中重新安装所有软件包并再次尝试"在当地使用"的程序.
如果您在启动您的项目后得到了一个与 React Hooks 相关的错误,这可能与您在您的项目和DS中有两个不同的 React 运行实例(即您的同音链接没有起作用)有关. 杀死所有进程, 重做反应共通并重新开始 .
许可证
麻省理工学院 @fleet.co (英语)