From bf59a912ea54e0b53985b7c57508172b3873b249 Mon Sep 17 00:00:00 2001 From: oleg_saidov Date: Fri, 26 Jan 2024 12:50:59 +0500 Subject: [PATCH 01/94] Set up Firebase hosting for Staging env. Deployment is triggered on pull request and merge. Preview of build will be available in the comment section of created PR. --- .firebaserc | 7 +++++-- .../workflows/firebase-hosting-merge-prod.yml | 2 +- .../firebase-hosting-merge-staging.yml | 20 +++++++++++++++++++ .../firebase-hosting-pull-request-prod.yml | 2 +- .../firebase-hosting-pull-request-staging.yml | 19 ++++++++++++++++++ package.json | 1 + 6 files changed, 47 insertions(+), 4 deletions(-) create mode 100644 .github/workflows/firebase-hosting-merge-staging.yml create mode 100644 .github/workflows/firebase-hosting-pull-request-staging.yml diff --git a/.firebaserc b/.firebaserc index 235f248..2a91026 100644 --- a/.firebaserc +++ b/.firebaserc @@ -1,5 +1,8 @@ { "projects": { - "default": "cdkz-ui-prod" - } + "default": "cdkz-ui-prod", + "staging": "cdkz-ui-staging" + }, + "targets": {}, + "etags": {} } diff --git a/.github/workflows/firebase-hosting-merge-prod.yml b/.github/workflows/firebase-hosting-merge-prod.yml index 67a6e5f..9d724f1 100644 --- a/.github/workflows/firebase-hosting-merge-prod.yml +++ b/.github/workflows/firebase-hosting-merge-prod.yml @@ -1,7 +1,7 @@ # This file was auto-generated by the Firebase CLI # https://github.com/firebase/firebase-tools -name: Deploy to Firebase Hosting on merge +name: Deploy to PROD on merge 'on': push: branches: diff --git a/.github/workflows/firebase-hosting-merge-staging.yml b/.github/workflows/firebase-hosting-merge-staging.yml new file mode 100644 index 0000000..b69027a --- /dev/null +++ b/.github/workflows/firebase-hosting-merge-staging.yml @@ -0,0 +1,20 @@ +# This file was auto-generated by the Firebase CLI +# https://github.com/firebase/firebase-tools + +name: Deploy to Firebase Hosting on merge +'on': + push: + branches: + - development +jobs: + build_and_deploy: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - run: npm ci && npm run build + - uses: FirebaseExtended/action-hosting-deploy@v0 + with: + repoToken: '${{ secrets.GITHUB_TOKEN }}' + firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_CDKZ_UI_STAGING }}' + channelId: live + projectId: cdkz-ui-staging diff --git a/.github/workflows/firebase-hosting-pull-request-prod.yml b/.github/workflows/firebase-hosting-pull-request-prod.yml index b234d11..f950a95 100644 --- a/.github/workflows/firebase-hosting-pull-request-prod.yml +++ b/.github/workflows/firebase-hosting-pull-request-prod.yml @@ -1,7 +1,7 @@ # This file was auto-generated by the Firebase CLI # https://github.com/firebase/firebase-tools -name: Deploy to Firebase Hosting on PR +name: Deploy to PROD on PR 'on': pull_request jobs: build_and_preview: diff --git a/.github/workflows/firebase-hosting-pull-request-staging.yml b/.github/workflows/firebase-hosting-pull-request-staging.yml new file mode 100644 index 0000000..6e886f9 --- /dev/null +++ b/.github/workflows/firebase-hosting-pull-request-staging.yml @@ -0,0 +1,19 @@ +# This file was auto-generated by the Firebase CLI +# https://github.com/firebase/firebase-tools + +name: Deploy to Staging on PR +'on': pull_request +jobs: + build_and_preview: + if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - run: npm ci && npm run build + - uses: FirebaseExtended/action-hosting-deploy@v0 + with: + repoToken: '${{ secrets.GITHUB_TOKEN }}' + firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_CDKZ_UI_STAGING }}' + projectId: cdkz-ui-staging + env: + FIREBASE_CLI_EXPERIMENTS: webframeworks diff --git a/package.json b/package.json index 40a1634..312b0a1 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "scripts": { "dev": "vite", "build": "vite build", + "build:staging": "vite build --mode staging", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, From b810489f66385d78eaef963c7d9ba4d4d128a039 Mon Sep 17 00:00:00 2001 From: oleg_saidov Date: Fri, 26 Jan 2024 12:55:48 +0500 Subject: [PATCH 02/94] Check development branch deploy on staging env --- .github/workflows/firebase-hosting-merge-staging.yml | 2 +- .github/workflows/firebase-hosting-pull-request-staging.yml | 2 +- src/App.jsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/firebase-hosting-merge-staging.yml b/.github/workflows/firebase-hosting-merge-staging.yml index b69027a..cb8cf0e 100644 --- a/.github/workflows/firebase-hosting-merge-staging.yml +++ b/.github/workflows/firebase-hosting-merge-staging.yml @@ -11,7 +11,7 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - - run: npm ci && npm run build + - run: npm install && npm run build:staging - uses: FirebaseExtended/action-hosting-deploy@v0 with: repoToken: '${{ secrets.GITHUB_TOKEN }}' diff --git a/.github/workflows/firebase-hosting-pull-request-staging.yml b/.github/workflows/firebase-hosting-pull-request-staging.yml index 6e886f9..4c50eca 100644 --- a/.github/workflows/firebase-hosting-pull-request-staging.yml +++ b/.github/workflows/firebase-hosting-pull-request-staging.yml @@ -9,7 +9,7 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - - run: npm ci && npm run build + - run: npm install && npm run build:staging - uses: FirebaseExtended/action-hosting-deploy@v0 with: repoToken: '${{ secrets.GITHUB_TOKEN }}' diff --git a/src/App.jsx b/src/App.jsx index b8b8473..c1f42d8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -16,7 +16,7 @@ function App() { React logo -

Vite + React

+

Vite + React + Staging

+ + + + +

Edit src/App.jsx and save to test HMR

diff --git a/src/app.styles.css b/src/app.styles.css index b9d355d..eab5a06 100644 --- a/src/app.styles.css +++ b/src/app.styles.css @@ -1,42 +1,4 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - .card { padding: 2em; -} - -.read-the-docs { - color: #888; + background-color: wheat; } diff --git a/src/components/button/button.css b/src/components/button/button.css new file mode 100644 index 0000000..9ea1ac8 --- /dev/null +++ b/src/components/button/button.css @@ -0,0 +1,90 @@ +.button { + --_horizontal-padding: var(--horizontal-padding, 16px); + --_vertical-padding: var(--vertical-padding, 16px); + --_font-size: var(--font-size, 1rem); + --_font-weight: var(--font-weight, 500); + --_background-color: var(--background-color, transparent); + --_border-color: var(--border-color, var(--_background-color)); + --_color: var(--color, var(--white)); + + font-family: Lato, sans-serif; + font-weight: var(--_font-weight); + font-size: var(--_font-size); + line-height: 24px; + border-radius: 8px; + border: 2px solid var(--_border-color); + padding: var(--_vertical-padding) var(--_horizontal-padding); + color: var(--_color); + background-color: var(--_background-color); + text-align: center; + transition: border-color ease-out 0.3s, background-color ease-out 0.3s, color ease-out 0.3s; +} + +.button:focus, +.button:focus-visible { + outline: 2px solid -webkit-focus-ring-color; +} + +.primary { + --border-color: var(--white); +} + +.primary:hover, +.primary:focus { + --color: var(--button-text); + --background-color: var(--white); + cursor: pointer; +} + +.secondary { + --background-color: var(--primary); +} + +.secondary:hover, +.secondary:focus { + --background-color: color-mix(in srgb, var(--primary) 100%, var(--black) 25%); + cursor: pointer; +} + +.pale { + --color: var(--primary); + --background-color: var(--white); +} +.pale:hover, +.pale:focus { + --border-color: color-mix(in srgb, var(--white) 100%, var(--primary) 10%); + --background-color: color-mix(in srgb, var(--white) 100%, var(--primary) 10%); + cursor: pointer; +} + +.nav { + --font-size: 20px; + --font-weight: 600; + --background-color: var(--primary); + --horizontal-padding: 24px; + --vertical-padding: 18px; +} + +.nav:hover, +.nav:focus { + --background-color: color-mix(in srgb, var(--primary) 100%, var(--black) 25%); + cursor: pointer; +} + +.outline { + --background-color: var(--white); + --border-color: var(--primary); + --color: var(--primary); +} + +.outline:hover, +.outline:focus { + --background-color: color-mix(in srgb, var(--white) 100%, var(--primary) 25%); + cursor: pointer; +} + +@media (prefers-reduced-motion: reduce) { + .button { + transition: none; + } +} diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx new file mode 100644 index 0000000..72ebb10 --- /dev/null +++ b/src/components/button/button.tsx @@ -0,0 +1,28 @@ +import { ButtonHTMLAttributes, forwardRef } from "react"; +import "./button.css"; + +export type ButtonVariant = + | "primary" + | "secondary" + | "outline" + | "nav" + | "pale"; + +export interface ButtonProps extends ButtonHTMLAttributes { + variant?: ButtonVariant; +} + +export const Button = forwardRef( + ({ type, variant = "primary", className, ...delegatedProps }, ref) => { + const styleBase = `button ${variant}`; // TODO: change after css approach is defined (clsx) + + return ( + - - - @@ -31,7 +32,8 @@ export const App = () => {

Edit src/App.jsx and save to test HMR

-
- + +