Skip to content

Commit d1774ae

Browse files
Mutex0x40Mutex0x40
committed
chore: v1.0.0 release - design-system-kit
1 parent 7295a89 commit d1774ae

File tree

12 files changed

+631
-51
lines changed

12 files changed

+631
-51
lines changed

‎.github/workflows/deploy-storybook.yml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,10 @@ jobs:
3333
- name: Install dependencies
3434
run: npm ci
3535

36-
- name: Build Storybook
37-
run: npm run build-storybook
36+
- name: Build Storybook with base path
37+
run: npm run build-storybook:gh-pages
38+
env:
39+
STORYBOOK_BASE_HREF: /design-system-kit/
3840

3941
- name: Add .nojekyll to prevent Jekyll processing
4042
run: touch storybook-static/.nojekyll

‎.github/workflows/npm-publish.yml‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
name: Publish to npm
2+
3+
on:
4+
release:
5+
types: [created]
6+
workflow_dispatch:
7+
inputs:
8+
version:
9+
description: 'Version to publish (leave empty to use package.json version)'
10+
required: false
11+
type: string
12+
13+
jobs:
14+
publish:
15+
runs-on: ubuntu-latest
16+
permissions:
17+
contents: read
18+
id-token: write
19+
20+
steps:
21+
- name: Checkout
22+
uses: actions/checkout@v4
23+
24+
- name: Setup Node.js
25+
uses: actions/setup-node@v4
26+
with:
27+
node-version: 20
28+
registry-url: 'https://registry.npmjs.org'
29+
cache: npm
30+
31+
- name: Install dependencies
32+
run: npm ci
33+
34+
- name: Run tests
35+
run: npm test
36+
continue-on-error: true
37+
38+
- name: Build package
39+
run: npm run build
40+
41+
- name: Verify build output
42+
run: |
43+
echo "Checking dist/ directory..."
44+
ls -lh dist/
45+
echo "✅ Build output verified"
46+
47+
- name: Check package contents
48+
run: |
49+
echo "Package contents:"
50+
npm pack --dry-run
51+
52+
- name: Publish to npm
53+
run: npm publish --access public --provenance
54+
env:
55+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
56+
57+
- name: Get package version
58+
id: package-version
59+
run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
60+
61+
- name: Create summary
62+
run: |
63+
echo "## 🎉 Package Published Successfully!" >> $GITHUB_STEP_SUMMARY
64+
echo "" >> $GITHUB_STEP_SUMMARY
65+
echo "**Package**: @flowscape-ui/design-system-kit" >> $GITHUB_STEP_SUMMARY
66+
echo "**Version**: ${{ steps.package-version.outputs.version }}" >> $GITHUB_STEP_SUMMARY
67+
echo "**npm URL**: https://www.npmjs.com/package/@flowscape-ui/design-system-kit" >> $GITHUB_STEP_SUMMARY
68+
echo "" >> $GITHUB_STEP_SUMMARY
69+
echo "### Installation" >> $GITHUB_STEP_SUMMARY
70+
echo '```bash' >> $GITHUB_STEP_SUMMARY
71+
echo "npm install @flowscape-ui/design-system-kit@${{ steps.package-version.outputs.version }}" >> $GITHUB_STEP_SUMMARY
72+
echo '```' >> $GITHUB_STEP_SUMMARY

‎CHANGELOG.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8+
## [1.0.0] - 2025-10-06
9+
10+
### Changed
11+
- **Project Renamed**: `@flowscape-ui/color-picker` → `@flowscape-ui/design-system-kit`
12+
- Updated package name to reflect expanded scope as a comprehensive design system
13+
- Enhanced keywords for better discoverability (design-system, design-system-kit, ui-components, component-library, input-range, ui-kit)
14+
- Updated all documentation and references to new package name
15+
- Prepared for future expansion with additional UI components beyond color picker
16+
17+
### Note
18+
This is the initial release under the new name. The library now serves as a foundation for a complete design system kit, with plans to include input range components and other essential UI elements.
19+
820
## [1.1.0] - 2024-12-19
921

1022
### Added

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2025 Flowscape UI
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# @flowscape-ui/color-picker
1+
# @flowscape-ui/design-system-kit
22

3-
A powerful, customizable React color picker component designed for whiteboard systems and modern web applications. Built with TypeScript and optimized for performance.
3+
A comprehensive React design system kit with color picker, input range, and other essential UI components. Built with TypeScript and optimized for modern web applications.
44

55
## Features
66

@@ -17,14 +17,14 @@ A powerful, customizable React color picker component designed for whiteboard sy
1717
## Installation
1818

1919
```bash
20-
npm install @flowscape-ui/color-picker
20+
npm install @flowscape-ui/design-system-kit
2121
```
2222

2323
## Quick Start
2424

2525
```tsx
2626
import React, { useState } from 'react'
27-
import { ColorPicker } from '@flowscape-ui/color-picker'
27+
import { ColorPicker } from '@flowscape-ui/design-system-kit'
2828

2929
function App() {
3030
const [color, setColor] = useState('rgba(175, 51, 242, 1)')
@@ -43,7 +43,7 @@ function App() {
4343
### Simple Color Picker
4444

4545
```tsx
46-
import { ColorPicker } from '@flowscape-ui/color-picker'
46+
import { ColorPicker } from '@flowscape-ui/design-system-kit'
4747

4848
<ColorPicker
4949
value="#ff0000"
@@ -173,7 +173,7 @@ const config = {
173173
For more control, you can use the `useColorPicker` hook directly:
174174

175175
```tsx
176-
import { useColorPicker } from '@flowscape-ui/color-picker'
176+
import { useColorPicker } from '@flowscape-ui/design-system-kit'
177177

178178
function CustomColorPicker() {
179179
const [color, setColor] = useState('rgba(175, 51, 242, 1)')

‎RELEASE_VIA_CI.md‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
# 🚀 Публикация на npm через GitHub Actions
2+
3+
## ✅ Что уже сделано:
4+
- ✅ npm токен добавлен в GitHub Secrets
5+
- ✅ Workflow `.github/workflows/npm-publish.yml` создан
6+
- ✅ Библиотека собрана и готова
7+
8+
---
9+
10+
## 📋 Шаги для публикации:
11+
12+
### 1️⃣ Закоммитить и запушить изменения
13+
14+
```bash
15+
# Добавить все изменения
16+
git add .
17+
18+
# Создать коммит
19+
git commit -m "chore: prepare v1.0.0 release - rename to design-system-kit"
20+
21+
# Запушить в main
22+
git push origin main
23+
```
24+
25+
---
26+
27+
### 2️⃣ Создать git tag
28+
29+
```bash
30+
# Создать тег v1.0.0
31+
git tag -a v1.0.0 -m "Release v1.0.0 - Initial release as design-system-kit"
32+
33+
# Запушить тег
34+
git push origin v1.0.0
35+
```
36+
37+
---
38+
39+
### 3️⃣ Создать GitHub Release
40+
41+
**Вариант A: Через веб-интерфейс (рекомендуется)**
42+
43+
1. Открыть: https://github.com/flowscape-ui/design-system-kit/releases/new
44+
45+
2. Заполнить форму:
46+
- **Tag**: `v1.0.0` (выбрать из списка)
47+
- **Release title**: `v1.0.0 - Initial Release`
48+
- **Description**: Скопировать из CHANGELOG.md
49+
50+
3. Нажать **"Publish release"**
51+
52+
4. GitHub Actions автоматически запустит публикацию! 🎉
53+
54+
**Вариант B: Через GitHub CLI**
55+
56+
```bash
57+
gh release create v1.0.0 \
58+
--title "v1.0.0 - Initial Release" \
59+
--notes-file CHANGELOG.md
60+
```
61+
62+
---
63+
64+
### 4️⃣ Проверить выполнение workflow
65+
66+
1. Перейти в **Actions** tab: https://github.com/flowscape-ui/design-system-kit/actions
67+
68+
2. Найти workflow **"Publish to npm"**
69+
70+
3. Дождаться завершения (обычно 2-3 минуты)
71+
72+
4. Проверить что все шаги зелёные ✅
73+
74+
**Что делает workflow:**
75+
- ✅ Устанавливает зависимости
76+
- ✅ Запускает тесты
77+
- ✅ Собирает библиотеку
78+
- ✅ Проверяет содержимое пакета
79+
- ✅ Публикует на npm
80+
- ✅ Создаёт summary с информацией
81+
82+
---
83+
84+
### 5️⃣ Проверить публикацию на npm
85+
86+
**В браузере:**
87+
https://www.npmjs.com/package/@flowscape-ui/design-system-kit
88+
89+
**В терминале:**
90+
```bash
91+
npm view @flowscape-ui/design-system-kit
92+
```
93+
94+
**Протестировать установку:**
95+
```bash
96+
mkdir /tmp/test-install && cd /tmp/test-install
97+
npm init -y
98+
npm install @flowscape-ui/design-system-kit
99+
```
100+
101+
---
102+
103+
## 🎉 Готово!
104+
105+
После успешной публикации:
106+
107+
1. ✅ Пакет доступен на npm
108+
2. ✅ Можно установить: `npm install @flowscape-ui/design-system-kit`
109+
3. ✅ GitHub Release создан
110+
4. ✅ Storybook задеплоится автоматически
111+
112+
---
113+
114+
## 🔄 Для будущих релизов:
115+
116+
```bash
117+
# 1. Обновить версию
118+
npm version patch # 1.0.0 → 1.0.1
119+
# или
120+
npm version minor # 1.0.0 → 1.1.0
121+
122+
# 2. Обновить CHANGELOG.md
123+
nano CHANGELOG.md
124+
125+
# 3. Закоммитить
126+
git add .
127+
git commit -m "chore: bump version to $(node -p "require('./package.json').version")"
128+
git push origin main
129+
130+
# 4. Запушить тег (создаётся автоматически при npm version)
131+
git push origin --tags
132+
133+
# 5. Создать GitHub Release
134+
# Workflow автоматически опубликует на npm
135+
```
136+
137+
---
138+
139+
## 🆘 Если что-то пошло не так:
140+
141+
### Workflow упал с ошибкой
142+
143+
1. Проверить логи в Actions tab
144+
2. Проверить что NPM_TOKEN в Secrets корректный
145+
3. Проверить что организация @flowscape-ui существует на npm
146+
4. Можно запустить workflow вручную: Actions → Publish to npm → Run workflow
147+
148+
### Версия уже существует на npm
149+
150+
```bash
151+
# Увеличить версию
152+
npm version patch
153+
git push origin main --tags
154+
155+
# Создать новый релиз
156+
```
157+
158+
### Нет прав на организацию @flowscape-ui
159+
160+
Вариант 1: Создать организацию на npm
161+
Вариант 2: Изменить scope в package.json на свой username
162+
163+
---
164+
165+
## 📞 Полезные ссылки:
166+
167+
- **npm package**: https://www.npmjs.com/package/@flowscape-ui/design-system-kit
168+
- **GitHub Releases**: https://github.com/flowscape-ui/design-system-kit/releases
169+
- **GitHub Actions**: https://github.com/flowscape-ui/design-system-kit/actions
170+
- **Storybook**: https://flowscape-ui.github.io/design-system-kit

0 commit comments

Comments
 (0)