Release candidate

.github/workflows/ci.yaml

@@ -16,8 +16,8 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
     - uses: bahmutov/npm-install@v1
-    - name: If this step fails run 'yarn format' then commit again.
-      run: yarn format:check
+    - name: If this step fails run 'npm run format' then commit again.
+      run: npm run format:check
   test:
     runs-on: ${{ matrix.os }}
     needs: test_lint
@@ -32,13 +32,12 @@ jobs:
       with:
         node-version: ${{ matrix.node }}
     - uses: bahmutov/npm-install@v1
-    - run: yarn build
-    - run: yarn test
-    #- run: yarn test:keycloakify-starter
+    - run: npm run build
+    - run: npm run test
 
   storybook:
     runs-on: ubuntu-latest
-    if: github.event_name == 'push'
+    #if: github.event_name == 'push'
     needs: test
     steps:
     - uses: actions/checkout@v4
@@ -46,11 +45,11 @@ jobs:
       with:
         node-version: '18'
     - uses: bahmutov/npm-install@v1
-    - run: yarn build-storybook -o ./build_storybook
+    - run: npm run build-storybook
     - run: git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${{github.repository}}.git
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-    - run: npx -y -p gh-pages@3.1.0 gh-pages -d ./build_storybook -u "github-actions-bot <actions@github.com>" 
+    - run: npx -y -p gh-pages@3.1.0 gh-pages -d ./storybook-static -u "github-actions-bot <actions@github.com>" 
 
   check_if_version_upgraded:
     name: Check if version upgrade
@@ -112,7 +111,7 @@ jobs:
       with:
         registry-url: https://registry.npmjs.org/
     - uses: bahmutov/npm-install@v1
-    - run: yarn build
+    - run: npm run build
     - run: npx -y -p denoify@1.6.12 enable_short_npm_import_path
       env:
         DRY_RUN: "0"

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "10.0.0-rc.68",
+    "version": "10.0.0-rc.73",
     "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",
@@ -41,6 +41,8 @@
         "!dist/bin/",
         "dist/bin/main.js",
         "dist/bin/*.index.js",
+        "!dist/bin/shared/*.js",
+        "dist/bin/shared/constants.js",
         "dist/bin/shared/*.d.ts",
         "dist/bin/shared/*.js.map",
         "!dist/vite-plugin/",

src/bin/shared/buildContext.ts

@@ -53,6 +53,7 @@ export type BuildContext = {
 
 export type BuildOptions = {
     themeName?: string | string[];
+    themeVersion?: string;
     environmentVariables?: { name: string; default: string }[];
     extraThemeProperties?: string[];
     artifactId?: string;
@@ -137,7 +138,8 @@ export function getBuildContext(params: {
     const parsedPackageJson = (() => {
         type BuildOptions_packageJson = BuildOptions & {
             projectBuildDirPath?: string;
-            staticDirPathInBuildDirPath?: string;
+            staticDirPathInProjectBuildDirPath?: string;
+            publicDirPath?: string;
         };
 
         type ParsedPackageJson = {
@@ -170,7 +172,9 @@ export function getBuildContext(params: {
                             )
                             .optional(),
                         themeName: z.union([z.string(), z.array(z.string())]).optional(),
-                        staticDirPathInBuildDirPath: z.string().optional(),
+                        themeVersion: z.string().optional(),
+                        staticDirPathInProjectBuildDirPath: z.string().optional(),
+                        publicDirPath: z.string().optional(),
                         keycloakVersionTargets: id<
                             z.ZodType<BuildOptions.KeycloakVersionTargets>
                         >(
@@ -333,8 +337,7 @@ export function getBuildContext(params: {
 
     return {
         bundler,
-        themeVersion:
-            process.env.KEYCLOAKIFY_THEME_VERSION ?? parsedPackageJson.version ?? "0.0.0",
+        themeVersion: buildOptions.themeVersion ?? parsedPackageJson.version ?? "0.0.0",
         themeNames,
         extraThemeProperties: buildOptions.extraThemeProperties,
         groupId: (() => {
@@ -376,14 +379,21 @@ export function getBuildContext(params: {
             );
         })(),
         publicDirPath: (() => {
+            if (process.env.PUBLIC_DIR_PATH !== undefined) {
+                return getAbsoluteAndInOsFormatPath({
+                    pathIsh: process.env.PUBLIC_DIR_PATH,
+                    cwd: projectDirPath
+                });
+            }
+
             webpack: {
                 if (resolvedViteConfig !== undefined) {
                     break webpack;
                 }
 
-                if (process.env.PUBLIC_DIR_PATH !== undefined) {
+                if (buildOptions.publicDirPath !== undefined) {
                     return getAbsoluteAndInOsFormatPath({
-                        pathIsh: process.env.PUBLIC_DIR_PATH,
+                        pathIsh: buildOptions.publicDirPath,
                         cwd: projectDirPath
                     });
                 }
@@ -440,9 +450,9 @@ export function getBuildContext(params: {
                     break webpack;
                 }
 
-                if (buildOptions.staticDirPathInBuildDirPath !== undefined) {
+                if (buildOptions.staticDirPathInProjectBuildDirPath !== undefined) {
                     getAbsoluteAndInOsFormatPath({
-                        pathIsh: buildOptions.staticDirPathInBuildDirPath,
+                        pathIsh: buildOptions.staticDirPathInProjectBuildDirPath,
                         cwd: projectBuildDirPath
                     });
                 }

src/bin/shared/constants.ts

@@ -3,7 +3,7 @@ export const nameOfTheLocalizationRealmOverridesUserProfileProperty =
 export const keycloak_resources = "keycloak-resources";
 export const resources_common = "resources-common";
 export const lastKeycloakVersionWithAccountV1 = "21.1.2";
-export const basenameOfTheKeycloakifyResourcesDir = "build";
+export const basenameOfTheKeycloakifyResourcesDir = "dist";
 
 export const themeTypes = ["login", "account"] as const;
 export const accountV1ThemeName = "account-v1";

src/bin/shared/downloadKeycloakDefaultTheme.ts

@@ -112,6 +112,18 @@ export async function downloadKeycloakDefaultTheme(params: {
                                 "dist",
                                 "fonts",
                                 "OpenSans-Semibold-webfont.woff2"
+                            ),
+                            pathJoin(
+                                "patternfly",
+                                "dist",
+                                "fonts",
+                                "PatternFlyIcons-webfont.ttf"
+                            ),
+                            pathJoin(
+                                "patternfly",
+                                "dist",
+                                "fonts",
+                                "PatternFlyIcons-webfont.woff"
                             )
                         ];
                     }
@@ -183,12 +195,42 @@ export async function downloadKeycloakDefaultTheme(params: {
                                 "fonts",
                                 "OpenSans-Light-webfont.woff2"
                             ),
+                            pathJoin(
+                                "patternfly",
+                                "dist",
+                                "fonts",
+                                "OpenSans-Bold-webfont.woff2"
+                            ),
+                            pathJoin(
+                                "patternfly",
+                                "dist",
+                                "fonts",
+                                "OpenSans-Bold-webfont.woff"
+                            ),
+                            pathJoin(
+                                "patternfly",
+                                "dist",
+                                "fonts",
+                                "OpenSans-Bold-webfont.ttf"
+                            ),
                             pathJoin(
                                 "patternfly",
                                 "dist",
                                 "fonts",
                                 "fontawesome-webfont.woff2"
                             ),
+                            pathJoin(
+                                "patternfly",
+                                "dist",
+                                "fonts",
+                                "PatternFlyIcons-webfont.ttf"
+                            ),
+                            pathJoin(
+                                "patternfly",
+                                "dist",
+                                "fonts",
+                                "PatternFlyIcons-webfont.woff"
+                            ),
                             pathJoin("jquery", "dist", "jquery.min.js")
                         ];
                     }

test/bin/replacers.spec.ts

@@ -272,13 +272,13 @@ describe("js replacer - webpack", () => {
 
         const fixedJsCodeExpected = `
             function f() {
-                return window.kcContext.url.resourcesPath + "/build/static/js/" + ({}[e] || e) + "." + {
+                return window.kcContext.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/static/js/" + ({}[e] || e) + "." + {
                     3: "0664cdc0"
                 }[e] + ".chunk.js"
             }
 
             function sameAsF() {
-                return window.kcContext.url.resourcesPath + "/build/static/js/" + ({}[e] || e) + "." + {
+                return window.kcContext.url.resourcesPath + "/${basenameOfTheKeycloakifyResourcesDir}/static/js/" + ({}[e] || e) + "." + {
                     3: "0664cdc0"
                 }[e] + ".chunk.js"
             }
@@ -293,7 +293,7 @@ describe("js replacer - webpack", () => {
                 }
                 return "u";
             })()] = function(e) {
-                return "/build/static/js/" + e + "." + {
+                return "/${basenameOfTheKeycloakifyResourcesDir}/static/js/" + e + "." + {
                     147: "6c5cee76",
                     787: "8da10fcf",
                     922: "be170a73"
@@ -310,7 +310,7 @@ describe("js replacer - webpack", () => {
                 }
                 return "miniCssF";
             })()] = function(e) {
-                return "/build/static/css/" + e + "." + {
+                return "/${basenameOfTheKeycloakifyResourcesDir}/static/css/" + e + "." + {
                     164:"dcfd7749",
                     908:"67c9ed2c"
                 } [e] + ".chunk.css"
@@ -325,7 +325,7 @@ describe("js replacer - webpack", () => {
                     });
                 }
                 return "u";
-            })()] = e => "/build/static/js/"+e+"."+{69:"4f205f87",128:"49264537",453:"b2fed72e",482:"f0106901"}[e]+".chunk.js"
+            })()] = e => "/${basenameOfTheKeycloakifyResourcesDir}/static/js/"+e+"."+{69:"4f205f87",128:"49264537",453:"b2fed72e",482:"f0106901"}[e]+".chunk.js"
         
             t[(function(){
                 var pd = Object.getOwnPropertyDescriptor(t, "p");
@@ -336,7 +336,7 @@ describe("js replacer - webpack", () => {
                     });
                 }
                 return "miniCssF";
-            })()] = e => "/build/static/css/"+e+"."+{164:"dcfd7749",908:"67c9ed2c"}[e]+".chunk.css"
+            })()] = e => "/${basenameOfTheKeycloakifyResourcesDir}/static/css/"+e+"."+{164:"dcfd7749",908:"67c9ed2c"}[e]+".chunk.css"
         `;
 
         expect(isSameCode(fixedJsCode, fixedJsCodeExpected)).toBe(true);
@@ -434,8 +434,8 @@ describe("css replacer", () => {
 
         const cssCodeToPrependInHeadExpected = `
             :root {
-                --urla882a969fd39473: url(\${url.resourcesPath}/build/logo192.png);
-                --urldd75cab58377c19: url(\${url.resourcesPath}/build/static/media/something.svg);
+                --urla882a969fd39473: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/logo192.png);
+                --urldd75cab58377c19: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/static/media/something.svg);
             }
         `;
 
@@ -492,8 +492,8 @@ describe("css replacer", () => {
 
         const cssCodeToPrependInHeadExpected = `
             :root {
-                --url749a3139386b2c8: url(\${url.resourcesPath}/build/logo192.png);
-                --url8bdc0887b97ac9a: url(\${url.resourcesPath}/build/static/media/something.svg);
+                --url749a3139386b2c8: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/logo192.png);
+                --url8bdc0887b97ac9a: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/static/media/something.svg);
             }
         `;
 
@@ -549,7 +549,7 @@ describe("inline css replacer", () => {
               font-style: normal;
               font-weight: 400;
               font-display: swap;
-              src: url(\${url.resourcesPath}/build/fonts/WorkSans/worksans-regular-webfont.woff2)
+              src: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/fonts/WorkSans/worksans-regular-webfont.woff2)
                 format("woff2");
             }
             @font-face {
@@ -557,7 +557,7 @@ describe("inline css replacer", () => {
               font-style: normal;
               font-weight: 500;
               font-display: swap;
-              src: url(\${url.resourcesPath}/build/fonts/WorkSans/worksans-medium-webfont.woff2)
+              src: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/fonts/WorkSans/worksans-medium-webfont.woff2)
                 format("woff2");
             }
             @font-face {
@@ -565,7 +565,7 @@ describe("inline css replacer", () => {
               font-style: normal;
               font-weight: 600;
               font-display: swap;
-              src: url(\${url.resourcesPath}/build/fonts/WorkSans/worksans-semibold-webfont.woff2)
+              src: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/fonts/WorkSans/worksans-semibold-webfont.woff2)
                 format("woff2");
             }
             @font-face {
@@ -573,7 +573,7 @@ describe("inline css replacer", () => {
               font-style: normal;
               font-weight: 700;
               font-display: swap;
-              src: url(\${url.resourcesPath}/build/fonts/WorkSans/worksans-bold-webfont.woff2)
+              src: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/fonts/WorkSans/worksans-bold-webfont.woff2)
                 format("woff2");
             }
         `;
@@ -627,7 +627,7 @@ describe("inline css replacer", () => {
                   font-style: normal;
                   font-weight: 400;
                   font-display: swap;
-                  src: url(\${url.resourcesPath}/build/fonts/WorkSans/worksans-regular-webfont.woff2)
+                  src: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/fonts/WorkSans/worksans-regular-webfont.woff2)
                     format("woff2");
                 }
                 @font-face {
@@ -635,7 +635,7 @@ describe("inline css replacer", () => {
                   font-style: normal;
                   font-weight: 500;
                   font-display: swap;
-                  src: url(\${url.resourcesPath}/build/fonts/WorkSans/worksans-medium-webfont.woff2)
+                  src: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/fonts/WorkSans/worksans-medium-webfont.woff2)
                     format("woff2");
                 }
                 @font-face {
@@ -643,7 +643,7 @@ describe("inline css replacer", () => {
                   font-style: normal;
                   font-weight: 600;
                   font-display: swap;
-                  src: url(\${url.resourcesPath}/build/fonts/WorkSans/worksans-semibold-webfont.woff2)
+                  src: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/fonts/WorkSans/worksans-semibold-webfont.woff2)
                     format("woff2");
                 }
                 @font-face {
@@ -651,7 +651,7 @@ describe("inline css replacer", () => {
                   font-style: normal;
                   font-weight: 700;
                   font-display: swap;
-                  src: url(\${url.resourcesPath}/build/fonts/WorkSans/worksans-bold-webfont.woff2)
+                  src: url(\${url.resourcesPath}/${basenameOfTheKeycloakifyResourcesDir}/fonts/WorkSans/worksans-bold-webfont.woff2)
                     format("woff2");
                 }
             `;