gypcrete

iCHEF web components library, built with React.

Demo

ichef.github.io/gypcrete

Installation

yarn add @ichef/gypcrete

Usage

Here is a quick example to get you started:

./App.js

import React from 'react';
import { createRoot } from 'react-dom/client';

import CustomComponent from './CustomComponent';

import '@ichef/gypcrete/dist/gypcrete.css';

const App = () => (
  <div>
    <CustomComponent />
  </div>
);

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App />);

./CustomComponent.js

import React from 'react';
import { Button } from '@ichef/gypcrete';

const CustomComponent = () => <Button basic="Hello World!" />;

export default CustomComponent;

Develop

Gypcrete is a multi-package mono-repo built on Lerna. All sub-pacakges are placed inside packages/ folder. It uses Yarn Workspaces to hoist all dependencies to root level.

To install dependencies and link packages, simply run yarn install. To run the Storybook locally, use the yarn start script.

Linters and test runners are configured at repository level. They should check all source files across every package in the packages/ folder.

Gypcrete does not publish develop builds to the dist branch anymore. It now publishes to NPM instead:

• When pushed to develop branch --> publish a canary build
• When pushed to master branch --> publish a relase build

Release

1. 從 develop 開出新的 release branch，release branch 的格式必須符合 release/x.y.z，例如 release/1.2.3。x.y.z 的部分為欲發佈的版號，必須符合 semantic versioning。
2. 以這支新的 release branch 開出新的 PR，base branch 設為 master。
3. 當 PR 被 merge 時，會觸發 github action 的 Release workflow，此 workflow 會在 master branch 做下列動作：
   • 更新 package.json 的 version 並 commit
   • 執行 yarn changelog 更新 CHANGELOG.md
   • 打 git tag 並將 tag push 上 github
   • 發佈新版本到 npm
   • 開出 backport 到 develop branch 的 PR
4. merge backport PR。至此完成 release 流程。

LICENSE

This project is licensed under the terms of the Apache License 2.0