From 854bc84c38c97ce6cc2e9b857a0b05ea230162ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=84=9D=EC=A7=84?= Date: Fri, 15 Dec 2023 11:52:42 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20storybook=20=EB=B0=B0=ED=8F=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + package.json | 4 +++- pnpm-lock.yaml | 8 ++++++++ scripts/chromatic_publish.sh | 2 ++ src/components/common/BottomSheet/BottomSheet.stories.tsx | 1 + 5 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 scripts/chromatic_publish.sh diff --git a/.gitignore b/.gitignore index b826c45..6ae3479 100644 --- a/.gitignore +++ b/.gitignore @@ -31,6 +31,7 @@ yarn-error.log* # local env files .env*.local +.env # vercel .vercel diff --git a/package.json b/package.json index e2a508e..c6bac1b 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "test:coverage": "vitest --coverage", "prepare": "husky install", "storybook": "storybook dev -p 6006", - "build-storybook": "storybook build" + "build-storybook": "storybook build", + "chromatic": "bash scripts/chromatic_publish.sh" }, "dependencies": { "@emotion/react": "^11.11.1", @@ -48,6 +49,7 @@ "@vitest/browser": "^1.0.1", "@vitest/coverage-istanbul": "^1.0.1", "@vitest/coverage-v8": "^1.0.1", + "chromatic": "^10.1.0", "eslint": "^8", "eslint-config-next": "^14.0.3", "eslint-config-prettier": "^9.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e2c4a98..497e34f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -100,6 +100,9 @@ devDependencies: '@vitest/coverage-v8': specifier: ^1.0.1 version: 1.0.1(vitest@1.0.1) + chromatic: + specifier: ^10.1.0 + version: 10.1.0 eslint: specifier: ^8 version: 8.55.0 @@ -6019,6 +6022,11 @@ packages: engines: {node: '>=10'} dev: true + /chromatic@10.1.0: + resolution: {integrity: sha512-S+ztO8f1k/LckuzJKCqaTs6AfUQ0eLNT9kEoyCUwX7gkJnveQo5JStCfY55v30zogjRkHJpwqzEfSXl6AwO2tQ==} + hasBin: true + dev: true + /chrome-trace-event@1.0.3: resolution: {integrity: sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==} engines: {node: '>=6.0'} diff --git a/scripts/chromatic_publish.sh b/scripts/chromatic_publish.sh new file mode 100644 index 0000000..7864274 --- /dev/null +++ b/scripts/chromatic_publish.sh @@ -0,0 +1,2 @@ +CHROMATIC_TOKEN=$(grep CHROMATIC_TOKEN .env | cut -d "=" -f2) +npx chromatic --project-token=$CHROMATIC_TOKEN \ No newline at end of file diff --git a/src/components/common/BottomSheet/BottomSheet.stories.tsx b/src/components/common/BottomSheet/BottomSheet.stories.tsx index a86cb51..84cb852 100644 --- a/src/components/common/BottomSheet/BottomSheet.stories.tsx +++ b/src/components/common/BottomSheet/BottomSheet.stories.tsx @@ -32,6 +32,7 @@ export const Default: StoryObj = { onClick={() => { setIsShowing(true); }} + style={{ color: 'white' }} > Open! From e358dfc8320b39673694347de86fa06cfe94642e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=84=9D=EC=A7=84?= Date: Fri, 15 Dec 2023 11:58:37 +0900 Subject: [PATCH 2/3] =?UTF-8?q?ci:=20storybook=20ci=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/chromatic.yml | 57 +++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 .github/workflows/chromatic.yml diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml new file mode 100644 index 0000000..96e2140 --- /dev/null +++ b/.github/workflows/chromatic.yml @@ -0,0 +1,57 @@ +name: 'Chromatic Deployment' + +on: + pull_request: + branches: [main] + +jobs: + chromatic-deploy: + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@v3 + with: + fetch-depth: 0 + + - name: Setup Node.js + uses: actions/setup-node@v3 + with: + node-version: '18' + + - name: Install pnpm + uses: pnpm/action-setup@v2 + id: pnpm-install + with: + version: 8 + run_install: false + + - name: Get pnpm store directory + id: pnpm-cache + shell: bash + run: | + echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT + + - name: Setup pnpm cache + uses: actions/cache@v3 + with: + path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} + key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-pnpm-store- + + - name: Install Dependency + run: pnpm install -no-frozen-lockfile + + - name: Publish Chromatic + id: chromatic + uses: chromaui/action@v1 + with: + projectToken: ${{ secrets.CHROMATIC_TOKEN }} + token: ${{ secrets.GITHUB_TOKEN }} + + - name: Create comment PR + uses: thollander/actions-comment-pull-request@v1 + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + message: '🚀storybook: ${{ steps.chromatic.outputs.storybookUrl }}' From b78e6d89600949e846fe2dcd8b958c9960ee08af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=84=9D=EC=A7=84?= Date: Fri, 15 Dec 2023 12:19:37 +0900 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20.env.example=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.example | 1 + 1 file changed, 1 insertion(+) create mode 100644 .env.example diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..eeab583 --- /dev/null +++ b/.env.example @@ -0,0 +1 @@ +CHROMATIC_TOKEN=string \ No newline at end of file