ci: update rebrand mercury workflow for deployments

Kajabi · Aug 1, 2024 · b8de3f9 · b8de3f9
1 parent bb39589
commit b8de3f9
Show file tree

Hide file tree

Showing 24 changed files with 4,349 additions and 738 deletions.
diff --git a/.github/workflows/rebrand-mercury-rising.yml b/.github/workflows/rebrand-mercury-rising.yml
@@ -56,18 +56,109 @@ jobs:
       - name: Lerna Boostrap
         run: yarn lerna bootstrap --ci
 
-      - name: Set PreId
-        id: set_preid
-        run: echo "preid='rc'" >> $GITHUB_OUTPUT
+      - name: Build all
+        run: NODE_OPTIONS=--openssl-legacy-provider yarn build
 
       - name: Lerna Version Develop
-        run: NODE_OPTIONS=--openssl-legacy-provider yarn lerna publish --canary --yes --preid mercury --pre-dist-tag next
+        run: NODE_OPTIONS=--openssl-legacy-provider yarn lerna publish --canary --yes --preid mercury --registry github --yes
         env:
           NODE_AUTH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
 
+      - name: Determine git sha to checkout
+        uses: haya14busa/action-cond@v1
+        id: gitsha
+        with:
+          cond: ${{ github.event_name == 'pull_request' }}
+          if_true: ${{ github.event.pull_request.head.sha }}
+          if_false: ${{ github.sha }}
+
+      # Envs based on the current branch
+      - name: Branch Env
+        id: branch_env
+        shell: bash
+        run: |
+          echo "Running on branch "
+          if [[ "${{ github.ref }}" == *"refs/tags"* ]]; then
+            echo "postfix=production" >> $GITHUB_ENV
+          else
+            echo "postfix=staging" >> $GITHUB_ENV
+          fi
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.SAGE_ECR_AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.SAGE_ECR_AWS_SECRET_ACCESS_KEY }}
+          aws-region: us-east-1
+          role-to-assume: ${{ secrets.AWS_ROLE_TO_ASSUME }}
+          role-duration-seconds: 1200
+          role-session-name: SageECRPushSession
+
+
+      - name: Set branch name if not PR
+        if: github.event_name != 'pull_request'
+        run: echo "BRANCH_NAME=$(echo ${GITHUB_REF#refs/heads/})" >> $GITHUB_ENV
+
+      - name: Set branch name if PR
+        if: github.event_name == 'pull_request'
+        run: echo "BRANCH_NAME=$(echo ${GITHUB_HEAD_REF})" >> $GITHUB_ENV
+
+      - name: Set valid docker tag branch name
+        run: echo "DOCKER_BRANCH_NAME=$(echo $BRANCH_NAME | sed "s/[^[:alnum:]\-\.\_]/-/g")-$GITHUB_RUN_NUMBER" >> $GITHUB_ENV
+
+      - name: Login to Amazon ECR
+        id: login-ecr
+        uses: aws-actions/amazon-ecr-login@v2
+        with:
+          mask-password: true
 
-  deploy:
-    needs: publish
-    if: github.ref == 'refs/heads/mercury-rising'
-    uses: ./.github/workflows/release-deploy.yml
-    secrets: inherit
+      # Docs Site
+      - name: Build and push docs site
+        uses: docker/build-push-action@v2
+        env:
+          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
+          ECR_REPOSITORY: ${{ secrets.ECR_REPOSITORY_SAGE_DOCS }}
+          IMAGE_SHA_TAG: ${{ steps.gitsha.outputs.value }}
+          POSTFIX: ${{ env.postfix }}
+        with:
+          file: ./docs/Dockerfile
+          build-args: |
+            GITHUB_TOKEN=${{ secrets.ACCESS_TOKEN }}
+          context: ./docs
+          push: true
+          tags: |
+            ${{ env.ECR_REGISTRY }}/${{ env.ECR_REPOSITORY }}:${{ env.IMAGE_SHA_TAG }}-release-${{ env.POSTFIX }}
+
+      # Storybook Site
+      - name: Build and push storybook
+        uses: docker/build-push-action@v2
+        env:
+          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
+          ECR_REPOSITORY: ${{ secrets.ECR_REPOSITORY_SAGE_STORYBOOK }}
+          IMAGE_SHA_TAG: ${{ steps.gitsha.outputs.value }}
+          POSTFIX: ${{ env.postfix }}
+        with:
+          file: ./packages/sage-react/Dockerfile
+          build-args: |
+            GITHUB_TOKEN=${{ secrets.ACCESS_TOKEN }}
+          context: ./packages/sage-react/
+          push: true
+          tags: |
+            ${{ env.ECR_REGISTRY }}/${{ env.ECR_REPOSITORY }}:${{ env.IMAGE_SHA_TAG }}-release-${{ env.POSTFIX }}
+
+      # Sassdocs Site
+      - name: Build and push sassdocs
+        uses: docker/build-push-action@v2
+        env:
+          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
+          ECR_REPOSITORY: ${{ secrets.ECR_REPOSITORY_SAGE_SASSDOCS }}
+          IMAGE_SHA_TAG: ${{ steps.gitsha.outputs.value }}
+          POSTFIX: ${{ env.postfix }}
+        with:
+          file: ./packages/sage-assets/Dockerfile
+          build-args: |
+            GITHUB_TOKEN=${{ secrets.ACCESS_TOKEN }}
+          context: ./packages/sage-assets/
+          push: true
+          tags: |
+            ${{ env.ECR_REGISTRY }}/${{ env.ECR_REPOSITORY }}:${{ env.IMAGE_SHA_TAG }}-release-${{ env.POSTFIX }}
diff --git a/docs/app/views/pages/_color_values.html.erb b/docs/app/views/pages/_color_values.html.erb
@@ -1,192 +1,11 @@
 <div class="colors">
-  <div class="colors__block color-<%= color %>-100">
-    <div class="colors__tokens">
-      <div class="colors__classname-token <%= "#{SageClassnames::SPACERS::SM_BOTTOM}" %>">
-        <h3 class="colors__tokens-heading">Classname Token</h3>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageClassnames::TYPE_COLORS::#{color.upcase}_100"
-          } %>
-        </div>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageClassnames.TYPE_COLORS.#{color.upcase}_100"
-          } %>
-        </div>
-      </div>
-      <div class="colors__hex-token">
-        <h3 class="colors__tokens-heading">Hex Token</h3>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_100]"
-          } %>
-        </div>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageTokens.COLOR_PALETTE.#{color.upcase}_100"
-          } %>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="colors__block color-<%= color %>-200">
-    <div class="colors__tokens">
-      <div class="colors__classname-token <%= "#{SageClassnames::SPACERS::SM_BOTTOM}" %>">
-        <h3 class="colors__tokens-heading">Classname Token</h3>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageClassnames::TYPE_COLORS::#{color.upcase}_200"
-          } %>
-        </div>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageClassnames.TYPE_COLORS.#{color.upcase}_200"
-          } %>
-        </div>
-      </div>
-      <div class="colors__hex-token">
-        <h3 class="colors__tokens-heading">Hex Token</h3>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_200]"
-          } %>
-        </div>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageTokens.COLOR_PALETTE.#{color.upcase}_200"
-          } %>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="colors__block color-<%= color %>-300">
-    <div class="colors__tokens">
-      <div class="colors__classname-token <%= "#{SageClassnames::SPACERS::SM_BOTTOM}" %>">
-        <h3 class="colors__tokens-heading">Classname Token</h3>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageClassnames::TYPE_COLORS::#{color.upcase}_300"
-          } %>
-        </div>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageClassnames.TYPE_COLORS.#{color.upcase}_300"
-          } %>
-        </div>
-      </div>
-      <div class="colors__hex-token">
-        <h3 class="colors__tokens-heading">Hex Token</h3>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_300]"
-          } %>
-        </div>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageTokens.COLOR_PALETTE.#{color.upcase}_300"
-          } %>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="colors__block color-<%= color %>-400">
-    <div class="colors__tokens">
-      <div class="colors__classname-token <%= "#{SageClassnames::SPACERS::SM_BOTTOM}" %>">
-        <h3 class="colors__tokens-heading">Classname Token</h3>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageClassnames::TYPE_COLORS::#{color.upcase}_400"
-          } %>
-        </div>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageClassnames.TYPE_COLORS.#{color.upcase}_400"
-          } %>
-        </div>
-      </div>
-      <div class="colors__hex-token">
-        <h3 class="colors__tokens-heading">Hex Token</h3>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_400]"
-          } %>
-        </div>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageTokens.COLOR_PALETTE.#{color.upcase}_400"
-          } %>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="colors__block color-<%= color %>-500">
-    <div class="colors__tokens">
-      <div class="colors__classname-token <%= "#{SageClassnames::SPACERS::SM_BOTTOM}" %>">
-        <h3 class="colors__tokens-heading">Classname Token</h3>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageClassnames::TYPE_COLORS::#{color.upcase}_500"
-          } %>
-        </div>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageClassnames.TYPE_COLORS.#{color.upcase}_500"
-          } %>
-        </div>
-      </div>
-      <div class="colors__hex-token">
-        <h3 class="colors__tokens-heading">Hex Token</h3>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_500]"
-          } %>
-        </div>
-        <div>
-          <%= sage_component SageCopyButton, {
-            borderless: true,
-            css_classes: "colors__copy-btn",
-            value: "SageTokens.COLOR_PALETTE.#{color.upcase}_500"
-          } %>
-        </div>
-      </div>
-    </div>
-  </div>
+  <% if color == "primary" || color == "sage" || color == "orange" %>
+    <% [100, 200, 300, 400, 500].each do |value| %>
+      <%= render "color_values_body", color: color, value: value %>
+    <% end %>
+  <% else %>
+    <% [5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 95].each do |value| %>
+      <%= render "color_values_body", color: color, value: value %>
+    <% end %>
+  <% end %>
 </div>
diff --git a/docs/app/views/pages/_color_values_body.html.erb b/docs/app/views/pages/_color_values_body.html.erb
@@ -0,0 +1,38 @@
+<div class="colors__block color-<%= color %>-<%= value %>">
+  <div class="colors__tokens">
+    <div class="colors__classname-token <%= "#{SageClassnames::SPACERS::SM_BOTTOM}" %>">
+      <h3 class="colors__tokens-heading">Classname Token</h3>
+      <div>
+        <%= sage_component SageCopyButton, {
+          borderless: true,
+          css_classes: "colors__copy-btn",
+          value: "SageClassnames::TYPE_COLORS::#{color.upcase}_#{value}"
+        } %>
+      </div>
+      <div>
+        <%= sage_component SageCopyButton, {
+          borderless: true,
+          css_classes: "colors__copy-btn",
+          value: "SageClassnames.TYPE_COLORS.#{color.upcase}_#{value}"
+        } %>
+      </div>
+    </div>
+    <div class="colors__hex-token">
+      <h3 class="colors__tokens-heading">Hex Token</h3>
+      <div>
+        <%= sage_component SageCopyButton, {
+          borderless: true,
+          css_classes: "colors__copy-btn",
+          value: "SageTokens::COLOR_PALETTE[:#{color.upcase}_#{value}]"
+        } %>
+      </div>
+      <div>
+        <%= sage_component SageCopyButton, {
+          borderless: true,
+          css_classes: "colors__copy-btn",
+          value: "SageTokens.COLOR_PALETTE.#{color.upcase}_#{value}"
+        } %>
+      </div>
+    </div>
+  </div>
+</div>