Merge dev into the main

.github/workflows/lwa-github-ci-workflow.yml

@@ -33,16 +33,16 @@ jobs:
         run: npm ci
 
       - name: SDK — Check Formatting
-        run: npm run prettier-check -w src/haapi-react-sdk
+        run: npm run prettier-check -w @curity/haapi-react-sdk
 
       - name: SDK — Lint
-        run: npm run lint -w src/haapi-react-sdk
+        run: npm run lint -w @curity/haapi-react-sdk
 
       - name: SDK — Typecheck
-        run: npm run typecheck -w src/haapi-react-sdk
+        run: npm run typecheck -w @curity/haapi-react-sdk
 
       - name: SDK — Run Tests
-        run: npm run test -w src/haapi-react-sdk -- run
+        run: npm run test -w @curity/haapi-react-sdk -- run
 
       - name: App — Check Formatting
         run: npm run prettier-check -w src/haapi-react-app
@@ -55,56 +55,3 @@ jobs:
 
       - name: App — Run Tests
         run: npm run test -w src/haapi-react-app -- run
-
-  notify-slack:
-    name: Notify Slack
-    needs: build-and-test
-    runs-on: ubuntu-latest
-    if: ${{ always() && github.event_name == 'pull_request' && github.event.pull_request.draft != true }}
-    strategy:
-      matrix:
-        webhook_secret: [LWA_SLACK_WEBHOOK_URL]
-    steps:
-      - name: Extract Jira ticket from branch name
-        id: jira
-        run: |
-          TICKET=$(echo "${{ github.head_ref }}" | grep -oE '[A-Z]+-[0-9]+' | head -1)
-          if [ -n "$TICKET" ]; then
-            echo "link=*Jira:* <https://curity.atlassian.net/browse/$TICKET|$TICKET>" >> $GITHUB_OUTPUT
-          else
-            echo "link=" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Notify new pull request
-        if: ${{ (github.event.action == 'opened' && github.event.pull_request.draft == false) || github.event.action == 'ready_for_review' }}
-        uses: slackapi/slack-github-action@v1.26.0
-        with:
-          payload: |
-            {
-              "text": ":rocket: PR ready for review in `${{ github.repository }}`",
-              "attachments": [
-                {
-                  "color": "${{ needs.build-and-test.result == 'success' && '#2EB67D' || '#E01E5A' }}",
-                  "blocks": [
-                    {
-                      "type": "section",
-                      "text": {
-                        "type": "mrkdwn",
-                        "text": "*Title:* ${{ github.event.pull_request.title }}\n*Author:* ${{ github.actor }}\n*Status:* ${{ needs.build-and-test.result == 'success' && ':white_check_mark: Passed' || ':x: Failed' }}\n*PR:* <${{ github.event.pull_request.html_url }}|View Pull Request> | <${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}|Workflow Logs>${{ steps.jira.outputs.link && format('\n{0}', steps.jira.outputs.link) || '' }}"
-                      }
-                    },
-                    {
-                      "type": "section",
-                      "text": {
-                        "type": "mrkdwn",
-                        "text": ${{ toJSON(format('*Description:*{0}{1}', fromJSON('"\n"'), github.event.pull_request.body || 'No description provided.')) }}
-                      }
-                    }
-                  ]
-                }
-              ]
-            }
-        env:
-          SLACK_WEBHOOK_URL: ${{ secrets[matrix.webhook_secret] }}
-          SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
-

.nvmrc

@@ -1 +1 @@
-22.22.0
+24.19.0

README.md

@@ -4,16 +4,14 @@
 
 **Customize the look and feel of your applications**
 
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="src/common/assets/images/ui-kit-start-dark.svg">
-  <img alt="Curity UI Kit" src="src/common/assets/images/ui-kit-start.svg" width="800">
-</picture>
+<img alt="Curity UI Kit" src="src/common/assets/images/ui-kit.svg" width="600">
 
 
 This monorepo contains:
 
 - Identity Server Templates
 - Self Service Portal
+- HAAPI React App
 - CSS Library
 - UI Icons React Library
 - React Component Library
@@ -66,11 +64,13 @@ Then you can access the projects at:
 
 - Curity Identity Server Templates: [http://localhost:3000](http://localhost:3000)
 - Self Service Portal: [http://localhost:5173/previewer](http://localhost:5173/previewer)
+- HAAPI React App: [http://localhost:5174](http://localhost:5174)
 
 To start projects individually, run:
 
-- `npm start:identity-server` - to start the Curity Identity Server Templates
-- `npm start:ssp` to start the Self Service Portal
+- `npm run start:identity-server` to start the Curity Identity Server Templates
+- `npm run start:ssp` to start the Self Service Portal
+- `npm run start:haapi-react-app` to start the HAAPI React App
 
 ## Build
 
@@ -84,6 +84,7 @@ To build projects individually, run:
 
 - `npm run build:identity-server` to build the Identity Server Templates
 - `npm run build:ssp` to build the Self Service Portal
+- `npm run build:haapi-react-app` to build the HAAPI React App
 - `npm run build:css` to build Curity CSS library
 - `npm run build:icons` to build Curity UI Icons React library
 
@@ -103,7 +104,7 @@ To deploy build artifacts (assets, templates, and messages) to a production envi
    ```shell
    npm run build
    ```
-   
+
    Or build specific projects with `npm run build:<project>` to deploy only those, e.g.:
    ```shell
    npm run build:ssp

index.html

@@ -9,6 +9,31 @@
         <style>
             :root {
                 --header-height: 50px;
+                --surface-dark: #201a32;
+            }
+
+            @font-face {
+                font-family: "GoogleSans-Regular";
+                src: url("./src/common/assets/fonts/GoogleSans-Regular.woff2") format("woff2");
+                font-weight: normal;
+                font-style: normal;
+                font-display: swap;
+            }
+
+            @font-face {
+                font-family: "GoogleSans-Medium";
+                src: url("./src/common/assets/fonts/GoogleSans-Medium.woff2") format("woff2");
+                font-weight: 500;
+                font-style: normal;
+                font-display: swap;
+            }
+
+            @font-face {
+                font-family: "GoogleSans-Bold";
+                src: url("./src/common/assets/fonts/GoogleSans-Bold.woff2") format("woff2");
+                font-weight: 700;
+                font-style: normal;
+                font-display: swap;
             }
 
             @font-face {
@@ -47,9 +72,8 @@
                 height: 50px;
                 backdrop-filter: blur(8px);
                 z-index: 2;
-                background-color: var(--color-primary-dark);
-                display: flex;
-                gap: 1rem;
+                background-color: var(--surface-dark);
+                border-bottom: 1px solid var(--surface-dark);
                 display: flex;
                 gap: 1rem;
                 align-items: center;
@@ -61,14 +85,7 @@
                     color: white;
                     display: inline-flex;
                     align-items: center;
-                    gap: 0.5rem;
-                }
-
-                > div:first-child {
-                    color: var(--color-yellow);
-                    display: inline-flex;
                     gap: 1rem;
-                    align-items: center;
                 }
 
                 > div:last-child {
@@ -100,15 +117,35 @@
                 }
             }
 
+            .header-presentation {
+                align-items: center;
+                border: 1px solid color-mix(in srgb, white 18%, transparent);
+                border-radius: 2rem;
+                color: rgb(255 255 255 / 75%);
+                display: none;
+                font-family: var(--type-sans-medium);
+                font-size: 0.7rem;
+                -webkit-font-smoothing: antialiased;
+                letter-spacing: 0.04em;
+                padding: 0.2rem 0.6rem;
+                text-transform: uppercase;
+                white-space: nowrap;
+            }
+
+            @media (min-width: 52em) {
+                .header-presentation {
+                    display: inline-flex;
+                }
+            }
+
             h1,
             h2,
             h3,
             h4,
             h5 {
                 text-wrap: balance;
-                font-family: var(--type-bold);
+                font-family: var(--type-sans-bold);
                 line-height: 1.2;
-                font-weight: 700;
             }
 
             h1 {
@@ -142,7 +179,8 @@
             }
 
             body {
-                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+                font-family: var(--type-sans);
+                line-height: var(--type-line-height);
                 padding-bottom: var(--space-4);
             }
 
@@ -166,13 +204,13 @@
                 padding: 2rem;
 
                 img {
-                    max-width: 600px;
+                    max-width: min(60%, 360px);
                 }
             }
 
             main {
                 a {
-                    color: #d859a1;
+                    color: var(--color-link);
                 }
             }
 
@@ -201,7 +239,7 @@
             @media (max-width: 768px) {
                 .card-container {
                     flex-direction: column;
-                    align-items: center;
+                    align-items: stretch;
                 }
 
                 .card {
@@ -245,10 +283,9 @@
                 border-radius: var(--button-border-radius);
                 cursor: pointer;
                 display: inline-flex;
-                font-family: var(--type-sans-bold);
+                font-family: var(--type-sans-medium);
                 font-size: var(--button-font-size);
                 -webkit-font-smoothing: antialiased;
-                font-weight: var(--type-weight-bold);
                 gap: var(--space-1);
                 justify-content: center;
 
@@ -271,6 +308,14 @@
                 text-decoration: none;
             }
 
+            .w100 {
+                width: 100%;
+            }
+
+            .mt2 {
+                margin-top: var(--space-2);
+            }
+
             .button-primary-outline {
                 background-color: transparent;
                 border: 1px solid var(--button-border-color);
@@ -284,7 +329,7 @@
             }
 
             .button-medium {
-                font-size: calc(var(--button-font-size) * var(--y-medium));
+                font-size: var(--button-font-size);
                 min-height: 44px;
                 padding-block-start: calc(var(--button-padding-y) * var(--y-medium));
                 padding-block-end: calc(var(--button-padding-y) * var(--y-medium));
@@ -324,6 +369,14 @@
                 width: fit-content;
             }
 
+            .documentation {
+                margin-top: 1.5rem;
+                width: 100%;
+                text-align: center;
+                border-top: 1px solid #eee;
+                padding-top: 1rem;
+            }
+
             .status {
                 margin-top: auto;
                 padding-top: 1rem;
@@ -422,8 +475,8 @@
         </div>
         <header>
             <div>
-                <img src=" src/identity-server/images/curity-logo-white.svg" alt="Curity Logo" />
-                <span>Curity UI Kit</span>
+                <img src="./src/identity-server/images/curity-logo-white.svg" alt="Curity Logo" />
+                <span class="header-presentation">UI Kit</span>
             </div>
             <div>
                 <a href="https://github.com/curityio/ui-kit" target="_blank">
@@ -450,7 +503,7 @@
 
         <div class="container">
             <div class="intro">
-                <img src="./src/common/assets/images/ui-kit-start.svg" alt="Curity Logo" />
+                <img src="./src/common/assets/images/ui-kit.svg" alt="" />
                 <h1>Welcome to Curity UI Kit</h1>
                 <p>Customize the look and feel of your applications.</p>
             </div>
@@ -469,6 +522,14 @@ <h2>Identity Server Templates</h2>
                         >
                             <span>Open previewer</span>
                         </a>
+                        <a
+                            href="https://curity.io/docs/identity-server/developer-guide/front-end-development/ui-kit/"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="button button-primary-outline button-medium w100 mt2"
+                        >
+                            <span>Read Docs</span>
+                        </a>
                         <small class="card-url">http://localhost:3000/listing</small>
                         <div class="commands">
                             <h3>Useful Commands</h3>
@@ -495,6 +556,14 @@ <h2>Self Service Portal</h2>
                         >
                             <span>Open previewer</span>
                         </a>
+                        <a
+                            href="https://curity.io/docs/identity-server/profiles/application-profile/applications/user-self-service-application/"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="button button-primary-outline button-medium w100 mt2"
+                        >
+                            <span>Read Docs</span>
+                        </a>
                         <small class="card-url">http://localhost:5173/previewer</small>
                         <div class="commands">
                             <h3>Useful Commands</h3>
@@ -524,13 +593,22 @@ <h2>HAAPI React App</h2>
                         >
                             <span>Open previewer</span>
                         </a>
+                        <a
+                            href="https://curity.io/docs/identity-server/developer-guide/haapi-sdks/web-sdk/"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="button button-primary-outline button-medium w100 mt2"
+                        >
+                            <span>Read Docs</span>
+                        </a>
                         <small class="card-url">http://localhost:5174/</small>
                         <div class="commands">
                             <h3>Useful Commands</h3>
                             <code>npm install</code>
                             <code>npm run start:haapi-react-app</code>
                             <code>npm run build:haapi-react-app</code>
                         </div>
+
                         <div
                             class="status"
                             data-tooltip="Note: It may take a few seconds for the preview server to be ready"