Add CI workflow for npm package publishing (#144)

* Rename @yorkie-ui/components to @yorkie-ui/core

* Add CI workflow for npm package publishing

.github/workflows/npm-publish.yml

@@ -0,0 +1,33 @@
+name: npm-publish
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+      - name: Setup Node 🔧
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install Dependencies
+        run: |
+          npm install -g pnpm
+          pnpm i
+
+      - name: Build 🔧
+        run: |
+          pnpm run build
+
+      - name: Deploy 🚀
+        run: pnpm publish --access public --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -13,21 +13,21 @@ UI components are written in React. It requires react: ^18.
 Install Yorkie UI to your project.
 
 ```
-npm install --save yorkie-ui
+npm install --save @yorkie-ui/core
 ```
 
 Add styles imports to the root of your project.
 
 ```
-import 'yorkie-ui/styles.css';
+import '@yorkie-ui/core/dist/styles.css';
 ```
 
 ### **Use**
 
 Import components you want into your UI
 
 ```jsx
-import { Button } from 'yorkie-ui';
+import { Button } from '@yorkie-ui/core';
 ```
 
 and use them like so

apps/storybook/.storybook/preview.ts

@@ -1,7 +1,7 @@
 import type { Preview } from '@storybook/react';
 import { withThemeByClassName } from '@storybook/addon-themes';
 
-import '@yorkie-ui/components/dist/styles.css';
+import '@yorkie-ui/core/dist/styles.css';
 import './preview.css';
 
 const preview: Preview = {

apps/storybook/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@yorkie-ui/storybook",
   "private": true,
-  "version": "0.5.33",
+  "version": "0.5.33-rc",
   "type": "module",
   "scripts": {
-    "prebuild": "pnpm --filter @yorkie-ui/components build",
+    "prebuild": "pnpm --filter @yorkie-ui/core build",
     "build": "storybook build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "dev": "pnpm prebuild && storybook dev -p 6006"
@@ -28,7 +28,7 @@
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "@yorkie-ui/components": "workspace:^",
+    "@yorkie-ui/core": "workspace:^",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",

apps/storybook/src/stories/Introduction.mdx

@@ -13,13 +13,13 @@ UI components are written in React. It requires react: ^18.
 Install Yorkie UI to your project.
 
 ```
-npm install --save yorkie-ui
+npm install --save @yorkie-ui/core
 ```
 
 Add styles imports to the root of your project.
 
 ```
-import 'yorkie-ui/styles.css';
+import '@yorkie-ui/core/dist/styles.css';
 
 ```
 
@@ -28,7 +28,7 @@ import 'yorkie-ui/styles.css';
 Import components you want into your UI
 
 ```jsx
-import { Button } from 'yorkie-ui';
+import { Button } from '@yorkie-ui/core';
 ```
 
 and use them like so

apps/storybook/src/stories/button/Button.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button } from '@yorkie-ui/components';
+import { Button } from '@yorkie-ui/core';
 const meta = {
   title: 'COMPONENTS / Button',
   component: Button,

apps/web/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@yorkie-ui/web",
-  "version": "0.5.33",
+  "version": "0.5.33-rc",
   "private": true,
   "scripts": {
-    "prebuild": "pnpm --filter @yorkie-ui/components build",
+    "prebuild": "pnpm --filter @yorkie-ui/core build",
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
@@ -15,7 +15,7 @@
     "next": "14.2.5"
   },
   "devDependencies": {
-    "@yorkie-ui/components": "workspace:^",
+    "@yorkie-ui/core": "workspace:^",
     "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",

apps/web/src/app/layout.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
-import '@yorkie-ui/components/dist/styles.css';
+import '@yorkie-ui/core/dist/styles.css';
 
 const inter = Inter({ subsets: ['latin'] });
 

apps/web/src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Button } from '@yorkie-ui/components';
+import { Button } from '@yorkie-ui/core';
 
 export default function Home() {
   return (

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yorkie-ui",
-  "version": "0.5.33",
+  "version": "0.5.33-rc",
   "description": "",
   "packageManager": "[email protected]",
   "scripts": {

packages/components/package.json → packages/core/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@yorkie-ui/components",
-  "version": "0.5.33",
+  "name": "@yorkie-ui/core",
+  "version": "0.5.33-rc",
   "type": "module",
   "main": "./src/index.ts",
   "publishConfig": {