Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Storybook deploy #5

Merged
merged 5 commits into from
May 29, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added .deploy/.nojekyll
Empty file.
17 changes: 17 additions & 0 deletions .deploy/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<title>Hands on with design systems workshop</title>
</head>
<body>
<h2>Find deployed workspaces here:</h2>
<ul>
<li>
<a href="./design-system">Design system</a>
</li>
<li>
<a href="./product">Product</a>
</li>
</ul>
</body>
</html>
81 changes: 81 additions & 0 deletions .github/workflows/design-system-release.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
name: Design System
on:
push:
branches:
- 'main'
paths:
- 'design-system/**'

jobs:
version-check:
runs-on: ubuntu-latest
outputs:
changed: ${{ steps.version-check.outputs.changed }}
version: ${{ steps.version-check.outputs.version }}
commit: ${{ steps.version-check.outputs.commit }}
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: 12
- id: version-check
uses: EndBug/version-check@v1
with:
diff-search: true
file-name: design-system/package.json

build-and-deploy:
runs-on: ubuntu-latest

steps:
- name: Checkout
uses: actions/checkout@v2

- name: Install NodeJS
uses: actions/setup-node@v2
with:
node-version: "12.18.2"

- name: Get yarn cache directory path
id: yarn-cache-dir-path
run: echo "::set-output name=dir::$(yarn config get cacheFolder)"

- name: Cache dependencies
uses: actions/cache@v2
id: yrn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
with:
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-

- name: Install dependencies
run: |
yarn install --frozen-lockfile
if: steps.yarn-cache.outputs.cache-hit != 'true'

- name: Build design tokens
run: |
yarn tokens

- name: Build Storybook
run: |
yarn storybook:build

- name: Deploy Index file
uses: JamesIves/github-pages-deploy-action@4.1.0
with:
folder: ./.deploy
branch: gh-pages
clean: false


- name: Deploy Storybook
uses: JamesIves/github-pages-deploy-action@4.1.0
with:
folder: ./design-system/storybook-static
branch: gh-pages
target-folder: design-system
clean: true
clean-exclude: |
product
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
# This wqorkflow will be triggered every time when new version of library released
name: Product release
on:
push:
branches:
- 'main'
paths:
- 'product/**'

jobs:
version-check:
Expand Down Expand Up @@ -57,8 +58,19 @@ jobs:
run: |
yarn product:build

- name: Deploy Index file
uses: JamesIves/github-pages-deploy-action@4.1.0
with:
folder: ./.deploy
clean: false
branch: gh-pages

- name: Deploy product
uses: JamesIves/github-pages-deploy-action@4.1.0
with:
folder: ./product/build
branch: gh-pages
target-folder: product
clean: true
clean-exclude: |
design-system
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
"product": "yarn workspace product start",
"product:build": "yarn workspace product build",
"product:version": "yarn workspace product version",
"deploy": "yarn workspace product deploy"
"deploy:product": "gh-pages -d product/build && yarn deploy:storybook",
"deploy:storybook": "gh-pages -d design-system/storybook-static -e storybook"
},
"eslintIgnore": [
"product",
Expand Down Expand Up @@ -52,4 +53,4 @@
],
"parser": "babel-eslint"
}
}
}
6 changes: 3 additions & 3 deletions product/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
"version": "0.1.0",
"private": true,
"license": "MIT",
"homepage": "https://goright-io.github.io/hands-on-design-system/product",
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"design-system": "0.1.0",
"design-system": "*",
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

design-system version set to any

"gh-pages": "^3.1.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
Expand All @@ -21,8 +22,7 @@
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "yarn build",
"deploy": "gh-pages -d build"
"predeploy": "yarn build"
},
"eslintConfig": {
"extends": [
Expand Down
16 changes: 8 additions & 8 deletions product/src/pages/checkout.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@ import styled from "styled-components";
import { Button, Icon, Carousel, Select, colors } from "design-system";
import { Link } from "react-router-dom";

const card = "/images/card.svg";
const cardBlue = "/images/cardBlue.svg";
const cardPink = "/images/cardPink.svg";
const imagesPath = `${process.env.PUBLIC_URL}/images`;

const card = `${process.env.PUBLIC_URL}/images/card.svg`;
const cardBlue = `${process.env.PUBLIC_URL}/images/cardBlue.svg`;
const cardPink = `${process.env.PUBLIC_URL}/images/cardPink.svg`;

const StyledDiv1 = styled.div`
padding: 64px 40px 40px 40px;
Expand Down Expand Up @@ -69,11 +71,9 @@ const Checkout = () => {
<div>
<StyledDiv1>
<StyledDiv2>
<Link to="/cart" style={{ textDecoration: "none" }}>
<Button isIcon color="white">
<Icon name="arrowBack" />
</Button>
</Link>
<Button as={Link} isIcon to="/cart/item1" color="white">
<Icon name="arrowBack" />
</Button>
<StyledDiv3>
<h4>Card</h4>
</StyledDiv3>
Expand Down