react-gantt-flow
ๅไบบ้็บใงใฌใณใใใฃใผใใฉใคใใฉใชใไฝๆใใฆใใใๅ
ๆฅใใผใฟ็ใใชใชใผในใใพใใ๐
่ฏใใฟใคใใณใฐใงใขใฆใใใใใใใใชใใจๆใฃใฆใใใฎใงใใใใคใ่จไบใๅใใฆใพใจใใฆใใใใฐใจๆใใพใ
ใฉใใชๆฉ่ฝใใใใฎ๏ผ
็พ็ถใพใ ใพใ ๆฉ่ฝไธ่ถณใงใใใๆไฝ้ใฎๆฉ่ฝใฏ็จๆใงใใพใใ๐
่ฉณ็ดฐใฏๅ่ฟฐใฎ Storybook ใๅ็
งใใ ใใ๐
ๆฉ่ฝ | ใฒใจใใจใง |
---|---|
ใใฉใใฐ & ใชใตใคใบ | ใฟในใฏใฎ้ๅงใป็ตไบๆฅใใใฆในๆไฝใงๆดๆฐ |
้ฒๆใใผ๏ผในใฉใคใใผ๏ผ | 0 ~ 100 % ใใชใขใซใฟใคใ ็ทจ้ |
ไพๅญ็ขๅฐ | ใฟในใฏ้ใ่ชๅใง S ๅญๆฒ็ทใงๆฅ็ถ |
Today ใฉใคใณ / ่จ็ปโๅฎ็ธพๅทฎๅ | boolean ใงใชใณใปใชใๅใๆฟใ |
Type-safe API | ๅ จใใญใใใซๅณๅฏใช TS ๅใไปไธ |
ใชใใงใฌใณใใใฃใผใ๏ผ
ไปๅใฌใณใใใฃใผใใไฝๆใใ็็ฑใฏใ"ไปๅพไฝใใใใทในใใ ใฎ 1 ๆฉ่ฝใจใใฆใฌใณใใใฃใผใใฎๆฉ่ฝใๆฌฒใใใฃใใใ" ใจใใใทใณใใซใช็็ฑใงใ
ๆขๅญใฎ OSS (Frappe Gantt ใชใฉ) ใงใๆญฃ็ดใใใฃใใฎใงใใใ็งใ่ชฟในใ้ใใในใฑใธใฅใผใซใจ็พๅจ้ฒๆใจใฎไน้ขใไธ็ฎใงใใใๆฉ่ฝ๏ผใใใใ็จฒๅฆป็ท่กจ็คบๆฉ่ฝ๏ผใๆใฃใใฉใคใใฉใชใ็กใใฃใ็บใใใใใไฝใฃใฆใฟใใใใจไฝๆใๅงใใพใใ๐โโ๏ธ
ๆ่ก้ธๅฎ
ๆ่ก้ธๅฎใไปฅไธใซใพใจใใพใ
่ณใฃใฆใทใณใใซใชๆงๆใงใ
้ ็ฎ | ้ธๅฎๅ ๅฎน |
---|---|
UI | React 19 + TypeScript |
ใใฃใผใๆ็ป | SVG |
ๆฅไป่จ็ฎ | date-fns |
ใใซใ | Vite |
ใใใฑใผใธใใใผใธใฃใผ | pnpm |
ๅ่ณช | Vitest / React Testing Library / Chromatic(VRT) |
้็่งฃๆใปใใฉใผใใใฟใผ | Biome |
ใใญใฅใกใณใใผใทใงใณ | Storybook |
CI/CD | GitHub Actions |
ๅฎ่ฃ ๆน้
react-gantt-flow ใฏใใฃใผใ้จๅใฎๆ็ปใฏๅ จใฆ svg ใงไฝๆใใฆใใพใ
ใชใๅ จใฆ svg ใชใฎใ
ไปฅไธใฎใใคใณใใจๆฏ่ผ่กจใฎๅ
ๅฎนใซๅบใฅใ svg ใงใฎๅฎ่ฃ
ใ้ธใณใพใใ
ใใจใ่ชๅใง svg ใใใใซๆธใใใใจใใชใใฃใใฎใงใใใฎ้ใซๅญฆใณใใใชใจใใๅไบบ็ใชๆฐๆใกใใใใพใใ๐
ใใคใณใ | ใฉใๅนใใ |
---|---|
่งฃๅๅบฆใใชใผ/ใบใผใ ใซๅผทใ | ใปใฌใณใใฏๆ้่ปธใๆกๅคง็ธฎๅฐใใ UI ใปSVG ใฏใใฏใฟใชใฎใง 1 px ๅไฝใฎในใใใใ Hi-DPI ใงใ็ทใใซใใพใชใ ใปCanvas ใ ใจๅๆ็ปใๅฟ ้ ใDOMโdiv ใ ใจใตใใใฏใปใซ่ชคๅทฎใๆฎใ |
DOM ใใผใใๆฅตๅฐๅใงใใ | ใป<svg> ๅ
ใซใใผใปใฐใชใใใป็ขๅฐใใในใฆ <g> ใงใพใจใใใฐ โ1 ่ก โ ๆฐใใผใโใปHTML ใง <div> ใ่กๅ้
็ฝฎใใใจๅ๏ฝไธๅไฝใฎใใผใใๅขใใฌใคใขใฆใ๏ผในใฟใคใซ่จ็ฎใๆฟ้ |
1 ใฌใคใคๆ็ปใง GPU ๅๆใๅนใ | ใปใพใจใพใฃใ SVG ใฏใใฉใฆใถใง ๅไธใฎใณใณใใธใใใฌใคใค ใซใชใใ ใปๆฐดๅนณๆนๅใฎในใฏใญใผใซใ transform ใฏใฌใคใคใๅใใใ ใใงๅใใคใณใไธ่ฆใฎ็บใ60 fps ใ็ถญๆใใใใ |
ใใธใงๆฒ็ทใปใในใ ๆจๆบ่ฃ
ๅ
|
ใปไพๅญ็ขๅฐใฎ S ๅญใใใญใธใงใฏใ็ทใชใฉใPath API ใฒใจใคใง่กจ็พๅฏ่ฝ ใปCanvas ใๆใใใๆฏใใฌใผใ ๅบงๆจ่จ็ฎใจๅๆ็ปใๅฟ ่ฆใHTML ใ ใจไธๅฏ่ฝ |
svg / Canvas / Html + CSS ๆฏ่ผ่กจ
็นๆง | SVG | Canvas | HTML + CSS |
---|---|---|---|
่งฃๅๅบฆไพๅญ | ใชใ | ใใ | ใชใ (ใ ใใตใใใฏใปใซ่ชคๅทฎ) |
ใใผใๆฐ | ๅฐ | 1 ๆ | ๅคง |
ใคใณใฟใฉใฏใทใงใณ | DOM ใคใใณใ | ๆๅใใใใในใ | DOM ใคใใณใ |
ๆ็ปใณในใ | ๅๅใฎใฟ | ้ๆฌก | ใฌใคใขใฆใ๏ผใใคใณใ |
่่ถณ
SVG ใฎใใฅใผใใชใขใซใใผใธใงใ
ใใใฎๅ
ๅฎนใไธ้ใๅญฆ็ฟใใใ ใใงใใใใชใๅๅผทใซใชใใพใใ๐
ใใฉใณใๆฆ็ฅ
ไฝๆใใใฉใคใใฉใชใๅ
ฌ้ใใใซใใใใไปฅไธใฎใใฉใณใๆฆ็ฅใๆก็จใใพใใ
ไปๅๅใใฆใฉใคใใฉใช้็บใใใฆใฟใฆใ้ๅธธใฎใทในใใ ้็บใจใใฉใณใๆฆ็ฅใ็ฐใชใ้จๅใซ้ฃใใใๆใใฆใพใ๐
ใใกใใฎใขใใซใงใฏไปฅไธใฎ 3 ใคใฎ็นๅพดใๆ่ญใใฆใใพใ
- main ใงใกใธใฃใผใใผใธใงใณๅใใซ้ซ้้็บ
- ่คๆฐใฎๅฎๅฎใใฉใณใใ้ทๆไฟๅฎ
- ็ทๆฅไฟฎๆญฃใใฟใคใ ใชใผใซๆจชๅฑ้
ใกใชใใใใกใชใใใซใคใใฆใฏไปฅไธใฎ็นใๆใใใใใจๆใฃใฆใใพใ
ๆญฃ็ดใใกใชใใใฎใคใใฟใใๆใๅบใใชใใฎใงใๆฌกๅใฏใใฃใจใทใณใใซๆงๆใซๆนๅใใใใงใ
ใใ ใ่ๆ
ฎใในใ่ฆณ็นใฏไธ้ใๆๆกใงใใใฎใงใใจใฆใ่ฏใๆฉไผใงใใ๐
ใกใชใใโบ๏ธ
่ฆณ็น | ๅนๆ |
---|---|
LTS ใจๆๆฐใไธก็ซ |
release/1.x ใๆฎใใใจใงใ็พๅ ดใฏใพใ v1 ใ ใใฉใใฐใฏ็ดใใใใใๅฎ็พใ |
้ซ้ใชใใใใใฃใใฏใน | ไฟฎๆญฃใฏๆ็ญ่ท้ขใงๅฝฑ้ฟ็ใซๅฑใใใใจใใ cherry-pick ใงไป็ณป็ตฑใธๅฑ้ใงใใใใฆใณใฟใคใ ใๆๅฐๅ |
ๆ็ขบใช่ฒฌๅๅๅฒ | - main = ๆชๆฅ- release/x = ๅฎๅฎ- feature/* = ๆฐๆฉ่ฝ- fix/* = ็ทๆฅไฟฎๆญฃ |
ใฟใฐ้็จใใใใ | ใชใชใผใน็ฉใฏๅฟ
ใ release/* ใงใฟใฐไปใCI/CD ใง โใใฎใฟใฐใ ใ npm publishโ ใจใใฃใๅถๅพกใๅฎนๆ |
ใใกใชใใ๐ญ
่ชฒ้ก | ๅ ทไฝ็ใช็็น |
---|---|
Cherry-pick ๅฐ็ | ๆๅๆผใใปใณใณใใชใฏใๅฏพๅฟใณในใใ้ซใใ โ GitHub Actions ใง โfix ใใผใธๆใซ่ชๅ PR ไฝๆโ ใไป่พผใใจ่ฒ ่ทใไธใใใใ |
CI ใณในใๅข | ใใฉใณใใๅขใใใปใฉใใซใใใใชใฏในใ่จใใฟใใฏใผใฏใใญใผใๆ้ฉๅใใชใใจใฉใณใใผ่ชฒ้ใ่ทณใญใๅฏ่ฝๆงใใ |
ๅญฆ็ฟใณในใใ | โใใคใใฉใฎใใฉใณใใๅใใโ ใ้ฃ่งฃ |
CI/CD
็ถใใฆ CI/CD ใฎใฏใผใฏใใญใผใจ่จญๅฎใใกใคใซใซใคใใฆใๆ็ฒใใฆใ็ดนไปใใพใ
ใฉใคใใฉใชๅ
ฌ้ใซใใใฆใฏไปฅไธใฎ 3 ็จฎใๆดป็จใใฆใใพใ
pr-auto-labeler
PR ใไฝๆใใ้ใซใใใฉใณใใฎ prefix ใซๅฟใใฆใ่ชๅ็ใซใฉใใซใไปไธใใฆใใใ workflow ใงใ
ๅพ่ฟฐใใ release note ใซๅฟ
่ฆใฎ็บใ็จๆใใฆใใพใ
pr-auto-labeler.yml
name: PR auto Labeler
on:
pull_request:
types: [opened]
jobs:
pr-labeler:
runs-on: ubuntu-latest
steps:
- uses: TimonVS/pr-labeler-action@v3
with:
configuration-path: .github/pr-labeler-settings.yml
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
pr-labeler-settings.yml
chore: ["chore/*", "renovate/*"]
docs: "docs/*"
feature: ["feature/*", "feat/*", "topic/*", "experiment/*"]
fix: ["fix/*", "hotfix/*", "backport/*"]
refactor: "refactor/*"
release note
release note ใฎ่ชๅไฝๆใฏ package-publish ๅ ใงๅฎๆฝใใใฎใงใใใไฝ่ฃใๆดใใ็บใไปฅไธใฎ่จญๅฎใใกใคใซใ็จๆใใฆใใพใ
release.yml
changelog:
categories:
- title: New Features ๐
labels:
- feature
- title: Bug Fixes ๐
labels:
- fix
- title: Maintenance & Chores ๐ง
labels:
- chore
- title: Code Refactoring โจ
labels:
- refactor
- title: Other Changes
labels:
- "*"
package-publish
publish ็จใฎ workflow ใงใฏ็นๆฎใชใใจใฏใใฆใใชใใงใ
dispatch ใใ Semantic Versioning ใงใชใชใผในใงใใใใ่จญๅฎใ่ฟฝๅ ใใฆใพใ
Create GitHub Release (Automatic Notes)
ใฎ step ใงใrelease.yml ้ใใฎไฝ่ฃใง PR ใ่ชๅ็ใซๅ้กใใใชใชใผในใใผใใไฝๆใใใพใ๐
public-package.yml
name: Publish Packages
on:
workflow_dispatch:
inputs:
release_type:
description: "Select release type"
required: true
type: choice
default: "patch"
options:
- major
- minor
- patch
- premajor
- prerelease
prerelease_id:
description: "Select prerelease id (used only if release_type is prerelease)"
required: false
type: choice
default: "alpha"
options:
- alpha
- beta
- rc
jobs:
publish:
runs-on: ubuntu-latest
#...็็ฅ
steps:
# ใใฉใณใใ release/ ใงๅงใพใใใจใ็ขบ่ชใใrelease/ ไปฅๅคใฎๅ ดๅใฏใจใฉใผใๅบใ
- name: Verify release branch
if: ${{ !startsWith(github.ref, 'refs/heads/release/') }}
run: |
echo "This workflow can only be run on release branches."
exit 1
# ~~ ใใงใใฏใขใฆใ ใใ ใใซใ ใใ ~~
# release branch ็จใซใใผใธใงใณใๆดๆฐ
- name: Bump version for release branch
id: bump_version
run: |
if [ "${{ inputs.release_type }}" = "premajor" ] || [ "${{ inputs.release_type }}" = "prerelease" ]; then
NEW_VERSION=$(npm version ${{ inputs.release_type }} --preid "${{ inputs.prerelease_id }}" -m "chore: Bump version to %s")
else
NEW_VERSION=$(npm version ${{ inputs.release_type }} -m "chore: Bump version to %s")
fi
echo "NEW_VERSION=${NEW_VERSION}" >> "$GITHUB_OUTPUT"
# ใณใใใใจใฟใฐใใใใทใฅ
- name: Push commit and tags
run: git push --follow-tags
# ๅ
ฌ้
- name: Publish ๐
run: pnpm publish --provenance --access public --publish-branch "${GITHUB_REF#refs/heads/}" --no-git-checks
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
# ~~ main ใธใฎใใผใธใงใณๅๆ ~~
# release note ใฎไฝๆ
# release note ใฎ่จญๅฎใฏ release.yml ใๅ็
ง
- name: Create GitHub Release (Automatic Notes)
uses: actions/github-script@v7
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
script: |
const tagName = process.env.NEW_VERSION;
const response = await github.rest.repos.createRelease({
owner: context.repo.owner,
repo: context.repo.repo,
tag_name: tagName,
name: tagName,
generate_release_notes: true,
draft: false,
prerelease: (tagName.includes('-')),
});
core.info(`Created release: ${response.data.html_url}`);
core.setOutput("release_id", response.data.id);
core.setOutput("release_url", response.data.html_url);
env:
NEW_VERSION: ${{ steps.bump_version.outputs.NEW_VERSION }}
ใญใผใใใใ
ไปๅพใฏไปฅไธใฎๆฉ่ฝ่ฟฝๅ ใจๆนๅใซๅใ็ตใๆณๅฎใงใ
ๅชๅ ๅบฆ | ไบๅฎ |
---|---|
High | ใขใฏใปใทใใชใใฃๅฏพๅฟ (ใญใผใใผใๆไฝ / ARIA) |
High | ่ฆชๅญใฟในใฏ่กจ็คบ (ใฐใซใผใใณใฐ) |
Mid | TaskBar API: onClick / onContextMenu ใชใฉ |
Mid | ใใผใใซในใฟใใคใบ & ใใผใฏใขใผใ |
Low | UI ใฎๅพฎ่ชฟๆด |
ใพใจใ
react-gantt-flow ใฏใ่ปฝ้ ร ็จฒๅฆป็ท ร ๅๅฎๅ
จใใๅฃฒใใฎ OSS ใฌใณใใใฃใผใใงใ
ไปๅพใฏ A11y & ใฐใซใผใใณใฐใๅผทๅไบๅฎใจใชใใพใ๐
ใฉใคใใฉใช้็บใฏใทในใใ ้็บใจใฏ้ใฃใ้ข็ฝใใใใใจใฆใ้ญ ๅ็ใงใ
ๆฌกๅ่จไบใงใฏไธ็ช่ฆๆฆใใ dependenciesArrow ใฎๅฎ่ฃ ใซใคใใฆๆทฑๆใ or ใฉใคใใฉใชไฝๆใฎ็บใฎ Vite ่จญๅฎ ใฎใฉใกใใใงใ๏ผใๆฅฝใใฟใซ๏ผ ๐
Comments
Let's comment your feelings that are more than good