Skip to content

Commit 54822fb

Browse files
samsharasamshara
authored
Merge pull request #692 from IFRCGo/project/storybook
Storybook for IFRC Go UI components library
2 parents 5569a0e + a8405b1 commit 54822fb

File tree

149 files changed

+8039
-2246
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

149 files changed

+8039
-2246
lines changed

‎.changeset/chilled-schools-cough.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
"go-ui-storybook": major
3+
---
4+
5+
Initial Release v1.0.0
6+
7+
Integrated storybook for IFRC Go UI components library. The storybook is
8+
deployed to chromatic via Github Actions CI.
9+
10+
Wrote stories for following components
11+
12+
- Alert
13+
- BarChart
14+
- Blockloading
15+
- BooleanInput
16+
- BooleanOutput
17+
- Breadcrumbs
18+
- CheckBox
19+
- Checklist
20+
- ConfirmButton
21+
- Container
22+
- DateInput
23+
- DateRangeOutput
24+
- DropdownMenu
25+
- Footer
26+
- Grid
27+
- Header
28+
- HtmlOutput
29+
- IconButton
30+
- Image
31+
- InfoPopup
32+
- InputContainer
33+
- KeyFigure
34+
- LegendItem
35+
- List
36+
- Message
37+
- Modal
38+
- MultiSelectInput
39+
- NavigationTabList
40+
- NumberInput
41+
- NumberOutput
42+
- PageContainer
43+
- PageHeader
44+
- Pager
45+
- PasswordInput
46+
- PieChart
47+
- Popup
48+
- RadioInput
49+
- RawFileInput
50+
- RawList
51+
- ReducedListDisplay
52+
- SearchMultiSelectInput
53+
- SearchSelectInput
54+
- SegmentInput
55+
- SelectInput
56+
- Spinner
57+
- StackedProgressBar
58+
- Switch
59+
- Table
60+
- Tabs
61+
- TextArea
62+
- TextInput
63+
- TimeSeriesChart

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
name: 'Chromatic Publish'
2+
3+
on:
4+
push:
5+
branches:
6+
- develop
7+
- project/storybook
8+
9+
concurrency:
10+
group: ${{ github.workflow }}-${{ github.ref }}
11+
cancel-in-progress: true
12+
13+
permissions:
14+
actions: write
15+
contents: read
16+
pages: write
17+
id-token: write
18+
19+
jobs:
20+
changed-files:
21+
runs-on: ubuntu-latest
22+
name: Check for changed files
23+
outputs:
24+
all_changed_files: ${{ steps.changed-files.outputs.all_changed_files }}
25+
any_changed: ${{ steps.changed-files.outputs.any_changed }}
26+
steps:
27+
- uses: actions/checkout@v4
28+
with:
29+
fetch-depth: 0
30+
- name: Get changed files
31+
id: changed-files
32+
uses: tj-actions/changed-files@v44
33+
with:
34+
files: |
35+
packages/ui/**
36+
packages/go-ui-storybook/**
37+
chromatic:
38+
name: Build & Deploy
39+
needs: [changed-files]
40+
if: ${{ needs.changed-files.outputs.any_changed == 'true' }}
41+
uses: ./.github/workflows/chromatic.yml
42+
secrets: inherit

‎.github/workflows/chromatic.yml‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
name: 'Chromatic'
2+
3+
on: workflow_call
4+
5+
concurrency:
6+
group: ${{ github.workflow }}-${{ github.ref }}-chromatic
7+
cancel-in-progress: true
8+
9+
permissions:
10+
actions: write
11+
contents: read
12+
pages: write
13+
id-token: write
14+
15+
jobs:
16+
ui:
17+
name: Build UI Library
18+
environment: 'test'
19+
runs-on: ubuntu-latest
20+
defaults:
21+
run:
22+
working-directory: packages/ui
23+
steps:
24+
- uses: actions/checkout@v4
25+
- uses: actions/setup-node@v4
26+
with:
27+
node-version: 20
28+
cache: 'yarn'
29+
- name: Install dependencies on UI library
30+
run: yarn install --frozen-lockfile
31+
- name: Typecheck
32+
run: yarn typecheck
33+
- name: Lint CSS
34+
run: yarn lint:css
35+
- name: Lint JS
36+
run: yarn lint:js
37+
- name: build UI library
38+
run: yarn build
39+
- uses: actions/upload-artifact@v4
40+
with:
41+
name: ui-build
42+
path: packages/ui/dist
43+
chromatic:
44+
name: Chromatic Deploy
45+
runs-on: ubuntu-latest
46+
needs: [ui]
47+
steps:
48+
- uses: actions/checkout@v4
49+
with:
50+
fetch-depth: 0
51+
- uses: actions/setup-node@v4
52+
with:
53+
node-version: 20
54+
cache: 'yarn'
55+
- uses: actions/download-artifact@v4
56+
with:
57+
name: ui-build
58+
path: packages/ui/dist
59+
- name: Install dependencies
60+
run: yarn install --frozen-lockfile
61+
- name: Run Chromatic
62+
uses: chromaui/action@v1
63+
with:
64+
exitZeroOnChanges: true
65+
exitOnceUploaded: true
66+
onlyChanged: true
67+
skip: "@(renovate/**|dependabot/**)"
68+
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
69+
token: ${{ secrets.GITHUB_TOKEN }}
70+
workingDir: packages/go-ui-storybook
71+
github-pages:
72+
name: Deploy to Github Pages
73+
runs-on: ubuntu-latest
74+
needs: [ui]
75+
steps:
76+
- uses: actions/checkout@v4
77+
with:
78+
fetch-depth: 0
79+
- uses: actions/setup-node@v4
80+
with:
81+
node-version: 20
82+
- uses: actions/download-artifact@v4
83+
with:
84+
name: ui-build
85+
path: packages/ui/dist
86+
- uses: bitovi/[email protected]
87+
with:
88+
install_command: yarn install
89+
build_command: yarn build-storybook
90+
path: packages/go-ui-storybook/storybook-static
91+
checkout: false

‎.github/workflows/ci.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ env:
2323

2424
jobs:
2525
ui:
26-
name: UI library
26+
name: Build UI Library
2727
environment: 'test'
2828
runs-on: ubuntu-latest
2929
defaults:
@@ -194,7 +194,7 @@ jobs:
194194
# - name: Typecheck
195195
# run: yarn typecheck
196196
build:
197-
name: Build
197+
name: Build Go Web App
198198
environment: 'test'
199199
needs: [lint, lint-css, test, ui]
200200
runs-on: ubuntu-latest

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ build-ssr
2626
*.sw?
2727

2828
.env*
29+
!.env.example
2930
.eslintcache
3031
tsconfig.tsbuildinfo
3132

@@ -34,3 +35,6 @@ tsconfig.tsbuildinfo
3435
stats.html
3536
generated/
3637
coverage/
38+
39+
# storybook build
40+
storybook-static/

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ Have a look through existing [Issues](https://github.com/IFRCGo/go-web-app/issue
6161

6262
The repository hosts multiple packages under `packages` directory.
6363
1. [IFRC GO UI](https://github.com/IFRCGo/go-web-app/tree/develop/packages/ui) is a React UI components library tailored to meet the specific requirements of the IFRC GO community and its associated projects.
64-
2. [IFRC GO UI Storybook](https://github.com/IFRCGo/go-web-app/tree/develop/packages/go-ui-storybook) serves as the comprehensive showcase for the components library.
64+
2. [IFRC GO UI Storybook](https://github.com/IFRCGo/go-web-app/tree/develop/packages/go-ui-storybook) serves as the comprehensive showcase for the components library.It is hosted on [chromatic](https://66557be6b68dacbf0a96db23-zctxglhsnk.chromatic.com/).
6565

6666
## IFRC GO backend
6767

‎app/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
"@vitest/coverage-v8": "^1.2.2",
7575
"autoprefixer": "^10.4.14",
7676
"cross-var": "^1.1.0",
77-
"dotenv-cli": "^7.2.1",
77+
"dotenv-cli": "^7.4.2",
7878
"eslint": "^8.40.0",
7979
"eslint-config-airbnb": "^19.0.4",
8080
"eslint-import-resolver-typescript": "^3.5.5",

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,10 @@
1010
"start:ui": "yarn workspace @ifrc-go/ui start",
1111
"start:app": "yarn build:ui && yarn workspace go-web-app start",
1212
"generate:type": "yarn workspace go-web-app generate:type",
13+
"preview": "yarn workspace go-web-app preview",
1314
"storybook": "yarn workspace go-ui-storybook storybook",
14-
"preview": "yarn workspace go-web-app preview"
15+
"build-storybook": "yarn workspace go-ui-storybook build-storybook",
16+
"chromatic": "yarn workspace go-ui-storybook chromatic"
1517
},
1618
"devDependencies": {
1719
"patch-package": "^8.0.0",

‎packages/go-ui-storybook/.env.example‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
CHROMATIC_PROJECT_TOKEN=

‎packages/go-ui-storybook/.storybook/ifrcGoTheme.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { create } from '@storybook/theming/create';
33
export default create({
44
base: 'light',
55
brandTitle: 'IFRC-GO',
6-
brandUrl: 'https://go.ifrc.org/',
7-
brandImage: '/go-logo.svg',
6+
brandUrl: '/',
7+
brandImage: './go-logo.svg',
88
brandTarget: 'IFRC_GO',
99
});

0 commit comments

Comments
 (0)