Keycloakify 10

.devcontainer/devcontainer.json

@@ -1,23 +1,23 @@
 {
-  "name": "Keycloakify Starter Devcontainer",
-  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bookworm",
-  "features": {
-    "ghcr.io/devcontainers/features/docker-in-docker:2": {
-      "moby": true,
-      "installDockerBuildx": true,
-      "version": "latest",
-      "dockerDashComposeVersion": "none"
+    "name": "Keycloakify Starter Devcontainer",
+    "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bookworm",
+    "features": {
+        "ghcr.io/devcontainers/features/docker-in-docker:2": {
+            "moby": true,
+            "installDockerBuildx": true,
+            "version": "latest",
+            "dockerDashComposeVersion": "none"
+        },
+        "ghcr.io/devcontainers-contrib/features/maven-sdkman:2": {
+            "version": "latest",
+            "jdkVersion": "latest",
+            "jdkDistro": "ms"
+        }
     },
-    "ghcr.io/devcontainers-contrib/features/maven-sdkman:2": {
-      "version": "latest",
-      "jdkVersion": "latest",
-      "jdkDistro": "ms"
+    "postCreateCommand": "yarn install",
+    "customizations": {
+        "vscode": {
+            "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+        }
     }
-  },
-  "postCreateCommand": "yarn install",
-  "customizations": {
-    "vscode": {
-      "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
-    }
-  }
 }

.eslintrc.cjs

@@ -1,25 +1,27 @@
 module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react-hooks/recommended",
+        "plugin:storybook/recommended"
     ],
-    'react-hooks/exhaustive-deps': 'off',
-    '@typescript-eslint/no-redeclare': 'off',
-    'no-labels': 'off',
-  },
-  overrides: [
-    {
-      files: ['**/*.stories.*'],
-      rules: {
-        'import/no-anonymous-default-export': 'off',
-      },
+    ignorePatterns: ["dist", ".eslintrc.cjs"],
+    parser: "@typescript-eslint/parser",
+    plugins: ["react-refresh"],
+    rules: {
+        "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+        "react-hooks/exhaustive-deps": "off",
+        "@typescript-eslint/no-redeclare": "off",
+        "no-labels": "off"
     },
-  ],
-}
+    overrides: [
+        {
+            files: ["**/*.stories.*"],
+            rules: {
+                "import/no-anonymous-default-export": "off"
+            }
+        }
+    ]
+};

.github/workflows/ci.yaml

@@ -1,109 +1,53 @@
 name: ci
 on:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
+    push:
+        branches:
+            - main
+    pull_request:
+        branches:
+            - main
 
 jobs:
+    test:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+            - uses: bahmutov/npm-install@v1
+            - run: npm run build-keycloak-theme
 
-  test:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v2
-    - uses: bahmutov/npm-install@v1
-    - run: yarn build
-    - run: npx keycloakify
+    check_if_version_upgraded:
+        name: Check if version upgrade
+        if: github.event_name == 'push'
+        runs-on: ubuntu-latest
+        needs: test
+        outputs:
+            from_version: ${{ steps.step1.outputs.from_version }}
+            to_version: ${{ steps.step1.outputs.to_version }}
+            is_upgraded_version: ${{ steps.step1.outputs.is_upgraded_version }}
+        steps:
+            - uses: garronej/[email protected]
+              id: step1
+              with:
+                  action_name: is_package_json_version_upgraded
+                  branch: ${{ github.head_ref || github.ref }}
 
-  check_if_version_upgraded:
-    name: Check if version upgrade
-    if: github.event_name == 'push'
-    runs-on: ubuntu-latest
-    needs: test
-    outputs:
-      from_version: ${{ steps.step1.outputs.from_version }}
-      to_version: ${{ steps.step1.outputs.to_version }}
-      is_upgraded_version: ${{ steps.step1.outputs.is_upgraded_version }}
-    steps:
-    - uses: garronej/[email protected]
-      id: step1
-      with: 
-        action_name: is_package_json_version_upgraded
-        branch: ${{ github.head_ref || github.ref }}
-
-  create_github_release:
-    runs-on: ubuntu-latest
-    needs: check_if_version_upgraded
-    # We create a release only if the version have been upgraded and we are on a default branch
-    if: needs.check_if_version_upgraded.outputs.is_upgraded_version == 'true' && github.event_name == 'push'
-    steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v2
-    - uses: bahmutov/npm-install@v1
-    - run: yarn build
-    - run: npx keycloakify
-    - run: mv dist_keycloak/target/retrocompat-*.jar retrocompat-keycloak-theme.jar
-    - run: mv dist_keycloak/target/*.jar keycloak-theme.jar
-    - uses: softprops/action-gh-release@v1
-      with:
-        name: Release v${{ needs.check_if_version_upgraded.outputs.to_version }}
-        tag_name: v${{ needs.check_if_version_upgraded.outputs.to_version }}
-        target_commitish: ${{ github.head_ref || github.ref }}
-        generate_release_notes: true
-        draft: false
-        files: |
-          retrocompat-keycloak-theme.jar
-          keycloak-theme.jar
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-  docker:
-    runs-on: ubuntu-latest
-    needs: 
-      - check_if_version_upgraded
-      - create_github_release
-    steps:
-      - uses: actions/checkout@v2
-      - uses: docker/setup-qemu-action@v1
-      - uses: docker/setup-buildx-action@v1
-      - uses: docker/login-action@v1
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - name: Computing Docker image tags
-        id: step1
-        env: 
-          IS_UPGRADED_VERSION: ${{ needs.check_if_version_upgraded.outputs.is_upgraded_version }}
-          TO_VERSION: ${{ needs.check_if_version_upgraded.outputs.to_version }}
-        run: |
-          OUT=$GITHUB_REPOSITORY:$TO_VERSION,$GITHUB_REPOSITORY:latest
-          OUT=$(echo "$OUT" | awk '{print tolower($0)}') 
-          echo ::set-output name=docker_tags::$OUT
-      - uses: docker/build-push-action@v2
-        with:
-          push: true
-          context: .
-          tags: ${{ steps.step1.outputs.docker_tags }}
-
-  github_pages:
-    runs-on: ubuntu-latest
-    needs: 
-      - create_github_release
-    steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v2
-    - uses: bahmutov/npm-install@v1
-    - run: yarn build
-    # We tell GitHub pages that our package.json["homepage"] field is our domain name.  
-    # If you wish to use the default GitHub pages domain name, like https://<username>.github.io/<repo>,
-    # you'll have to use base: "/repo/" in your vite.config.ts.
-    - run: echo $(node -e 'console.log(require("url").parse(require("./package.json").homepage).host)') > dist/CNAME
-    - run: git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${{github.repository}}.git
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-    - uses: actions/[email protected]
-    - run: npx -y -p [email protected] gh-pages -u "github-actions-bot <[email protected]>" -d dist 
-
+    create_github_release:
+        runs-on: ubuntu-latest
+        needs: check_if_version_upgraded
+        if: needs.check_if_version_upgraded.outputs.is_upgraded_version == 'true'
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+            - uses: bahmutov/npm-install@v1
+            - run: npm run build-keycloak-theme
+            - uses: softprops/action-gh-release@v2
+              with:
+                  name: Release v${{ needs.check_if_version_upgraded.outputs.to_version }}
+                  tag_name: v${{ needs.check_if_version_upgraded.outputs.to_version }}
+                  target_commitish: ${{ github.head_ref || github.ref }}
+                  generate_release_notes: true
+                  draft: false
+                  files: dist_keycloak/keycloak-theme-*.jar
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.prettierignore

@@ -0,0 +1,6 @@
+node_modules/
+/dist/
+/dist_keycloak/
+/public/keycloak-resources/
+/.vscode/
+/.yarn_home/

.prettierrc.json

@@ -0,0 +1,25 @@
+{
+    "printWidth": 90,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": false,
+    "trailingComma": "none",
+    "bracketSpacing": true,
+    "arrowParens": "avoid",
+    "overrides": [
+        {
+            "files": [
+                "**/login/pages/*.tsx",
+                "**/account/pages/*.tsx",
+                "**/login/Template.tsx",
+                "**/account/Template.tsx",
+                "**/login/UserProfileFormFields.tsx",
+                "KcApp.tsx"
+            ],
+            "options": {
+                "printWidth": 150
+            }
+        }
+    ]
+}

.storybook/main.ts

@@ -1,20 +1,12 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
-  ],
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  },
-  docs: {
-    autodocs: "tag",
-  },
-  staticDirs: ["../public"]
+    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [],
+    framework: {
+        name: "@storybook/react-vite",
+        options: {}
+    },
+    staticDirs: ["../public"]
 };
 export default config;

.storybook/preview-head.html

@@ -0,0 +1,25 @@
+<style>
+    body.sb-show-main.sb-main-padded {
+        padding: 0;
+    }
+
+    /* Following styles are just meant to avoid white flash when switching from one story to another */
+    @keyframes fadeToTransparent {
+        from {
+            background-color: #393939;
+        }
+
+        to {
+            background-color: transparent;
+        }
+    }
+    html {
+        animation: fadeToTransparent 500ms forwards ease-in;
+    }
+    body > .sb-preparing-docs {
+        visibility: hidden;
+    }
+    body > .sb-preparing-story {
+        visibility: hidden;
+    }
+</style>

.storybook/preview.ts

@@ -1,14 +1,14 @@
 import type { Preview } from "@storybook/react";
 
 const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i
+            }
+        }
+    }
 };
 
 export default preview;