@keycloakify/angular 0.0.1-rc.12 → 0.0.1-rc.15

package/.github/workflows/ci.yaml

@@ -0,0 +1,111 @@
+name: ci
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+
+  test_format:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+    - uses: bahmutov/npm-install@v1
+    - name: If this step fails run 'npm run format' then commit again.
+      run: npm run _format --list-different
+
+  test:
+    runs-on: ubuntu-latest
+    needs: test_format
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+    - uses: bahmutov/npm-install@v1
+    - run: npm run build
+    #- run: npm run test
+
+  check_if_version_upgraded:
+    name: Check if version upgrade
+    # When someone forks the repo and opens a PR we want to enables the tests to be run (the previous jobs)
+    # but obviously only us should be allowed to release.
+    # In the following check we make sure that we own the branch this CI workflow is running on before continuing.
+    # Without this check, trying to release would fail anyway because only us have the correct secret.NPM_TOKEN but
+    # it's cleaner to stop the execution instead of letting the CI crash.
+    if: |
+      github.event_name == 'push' || 
+      github.event.pull_request.head.repo.owner.login == github.event.pull_request.base.repo.owner.login 
+    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 }}
+      is_pre_release: ${{steps.step1.outputs.is_pre_release }}
+    steps:
+    - uses: garronej/ts-ci@v2.1.2
+      id: step1
+      with: 
+        action_name: is_package_json_version_upgraded
+
+  create_github_release:
+    runs-on: ubuntu-latest
+    # We create release only if the version in the package.json have been upgraded and this CI is running against the main branch.
+    # We allow branches with a PR open on main to publish pre-release (x.y.z-rc.u) but not actual releases.
+    if: |
+      needs.check_if_version_upgraded.outputs.is_upgraded_version == 'true' &&
+      (
+        github.event_name == 'push' ||
+        needs.check_if_version_upgraded.outputs.is_pre_release == 'true'
+      )
+    needs: 
+      - check_if_version_upgraded
+    steps:
+    - 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
+        prerelease: ${{ needs.check_if_version_upgraded.outputs.is_pre_release == 'true' }}
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 
+
+  publish_on_npm:
+    runs-on: ubuntu-latest
+    needs: 
+      - create_github_release
+      - check_if_version_upgraded
+    steps:
+    - uses: actions/checkout@v4
+      with:
+        ref: ${{ github.ref }}
+    - uses: actions/setup-node@v4
+      with:
+        registry-url: https://registry.npmjs.org/
+    - uses: bahmutov/npm-install@v1
+    - run: npm run build
+    - run: cd dist
+    - name: Publishing on NPM
+      run: |
+        if [ "$(npm show . version)" = "$VERSION" ]; then
+          echo "This version is already published"
+          exit 0
+        fi
+        if [ "$NODE_AUTH_TOKEN" = "" ]; then
+          echo "Can't publish on NPM, You must first create a secret called NPM_TOKEN that contains your NPM auth token. https://help.github.com/en/actions/automating-your-workflow-with-github-actions/creating-and-using-encrypted-secrets"
+          false
+        fi
+        EXTRA_ARGS=""
+        if [ "$IS_PRE_RELEASE" = "true" ]; then
+            EXTRA_ARGS="--tag next"
+        fi
+        npm publish $EXTRA_ARGS
+      env:
+        NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+        VERSION: ${{ needs.check_if_version_upgraded.outputs.to_version }}
+        IS_PRE_RELEASE: ${{ needs.check_if_version_upgraded.outputs.is_pre_release }}

package/.prettierignore

@@ -0,0 +1,15 @@
+node_modules/
+/dist/
+/CHANGELOG.md
+/.yarn_home/
+/src/test/apps/
+/src/tools/types/
+/build_keycloak/
+/.vscode/
+/src/login/i18n/messages_defaultSet/
+/src/account/i18n/messages_defaultSet/
+/dist_test
+/sample_react_project/
+/sample_custom_react_project/
+/keycloakify_starter_test/
+/.storybook/static/keycloak-resources/

package/.prettierrc.json

@@ -0,0 +1,26 @@
+{
+    "printWidth": 90,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "bracketSpacing": true,
+    "arrowParens": "avoid",
+    "singleAttributePerLine": true,
+    "overrides": [
+        {
+            "files": "*.component.ts",
+            "options": {
+                "printWidth": 150
+            }
+        },
+        {
+            "files": "*.html",
+            "options": {
+                "parser": "angular",
+                "printWidth": 150
+            }
+        }
+    ]
+}

package/README.md

@@ -1 +1,36 @@
-# @keycloakify/angular
+<p align="center">
+    <img src="https://github.com/user-attachments/assets/f469232b-5193-4bcd-91c4-6228d48dbe7e">  
+</p>
+<p align="center">
+    <i>🔏 Angular Component Library for Keycloakify 🔏</i>
+    <br>
+    <br>
+    <a href="https://github.com/keycloakify/keycloakify-angular/actions">
+      <img src="https://github.com/keycloakify/keycloakify/workflows/ci/badge.svg?branch=main">
+    </a>
+    <a href="https://www.npmjs.com/package/@keycloakify/angular">
+      <img src="https://img.shields.io/npm/dm/@keycloakify/angular">
+    </a>
+    <a href="https://github.com/keycloakify/keycloakify/blob/main/LICENSE">
+      <img src="https://img.shields.io/npm/l/@keycloakify/angular">
+    </a>
+    <p align="center">
+      Check out our discord server!<br/>
+      <a href="https://discord.gg/mJdYJSdcm4">
+        <img src="https://dcbadge.limes.pink/api/server/kYFZG7fQmn"/>
+      </a>
+    </p>
+    <p align="center">
+        <a href="https://www.keycloakify.dev">Home</a>
+        -
+        <a href="https://docs.keycloakify.dev">Documentation</a>
+        -
+        <a href="https://storybook.keycloakify.dev">Storybook</a>
+        -
+        <a href="https://github.com/keycloakify/keycloakify-starter-angular">Starter project</a>
+    </p>
+</p>
+
+```bash
+yarn add keycloakify @keycloakify/angular
+```

package/angular.json

@@ -0,0 +1,33 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "keycloakify-angular": {
+            "projectType": "library",
+            "root": "src",
+            "sourceRoot": "src",
+            "prefix": "kc",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:ng-packagr",
+                    "options": {
+                        "project": "src/ng-package.json"
+                    },
+                    "configurations": {
+                        "production": {
+                            "tsConfig": "src/tsconfig.lib.prod.json"
+                        },
+                        "development": {
+                            "tsConfig": "src/tsconfig.lib.json"
+                        }
+                    },
+                    "defaultConfiguration": "production"
+                }
+            }
+        }
+    },
+    "cli": {
+        "analytics": false
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@keycloakify/angular",
-    "version": "0.0.1-rc.12",
+    "version": "0.0.1-rc.15",
     "description": "Angular components for Keycloakify",
     "repository": {
         "type": "git",
@@ -21,12 +21,8 @@
             "pre-commit": "lint-staged -v"
         }
     },
-    "author": "u/garronej",
+    "author": "u/kathari00 u/luca-peruzzo u/garronej",
     "license": "MIT",
-    "files": [
-        "dist/",
-        "!dist/tsconfig.tsbuildinfo"
-    ],
     "keywords": [
         "keycloak",
         "angular",

package/scripts/build.ts

@@ -0,0 +1,179 @@
+import * as fs from 'fs';
+import {
+    join as pathJoin,
+    basename as pathBasename,
+    relative as pathRelative,
+    sep as pathSep,
+    dirname as pathDirname
+} from 'path';
+import { transformCodebase } from './tools/transformCodebase';
+import chalk from 'chalk';
+import * as child_process from 'child_process';
+import { getThisCodebaseRootDirPath } from './tools/getThisCodebaseRootDirPath';
+
+(async () => {
+    console.log(chalk.cyan('Building @keycloakify/angular...'));
+
+    const startTime = Date.now();
+
+    {
+        const command = `npx ng build`;
+
+        console.log(chalk.grey(`$ ${command}`));
+
+        child_process.execSync(command, {
+            stdio: 'inherit',
+            cwd: getThisCodebaseRootDirPath()
+        });
+    }
+
+    const distDirPath = pathJoin(getThisCodebaseRootDirPath(), 'dist');
+
+    const srcDirPath_dist = pathJoin(distDirPath, 'src');
+
+    transformCodebase({
+        srcDirPath: pathJoin(getThisCodebaseRootDirPath(), 'src'),
+        destDirPath: srcDirPath_dist,
+        transformSourceCode: ({ fileRelativePath, sourceCode }) => {
+            if (fileRelativePath.endsWith('ng-package.json')) {
+                return undefined;
+            }
+
+            if (fileRelativePath.endsWith('public-api.ts')) {
+                return undefined;
+            }
+
+            return { modifiedSourceCode: sourceCode };
+        }
+    });
+
+    const filePaths_toCreate: { filePath: string; content: Buffer }[] = [];
+
+    (function callee(dirPath: string) {
+        const basenames = fs.readdirSync(dirPath);
+
+        const basenames_dirs = basenames.filter(basename =>
+            fs.statSync(pathJoin(dirPath, basename)).isDirectory()
+        );
+
+        factorize: {
+            if (basenames_dirs.length !== 0) {
+                break factorize;
+            }
+
+            const basenames_files = basenames
+                .filter(basename => fs.statSync(pathJoin(dirPath, basename)).isFile())
+                .filter(basename => basename !== 'index.ts');
+
+            if (basenames_files.length !== 1) {
+                break factorize;
+            }
+
+            const [basename_file] = basenames_files;
+
+            if (pathBasename(dirPath) !== basename_file.replace(/\.ts$/, '')) {
+                break factorize;
+            }
+
+            filePaths_toCreate.push({
+                filePath: `${dirPath}.ts`,
+                content: fs.readFileSync(pathJoin(dirPath, basenames_files[0]))
+            });
+
+            return;
+        }
+
+        basenames_dirs.forEach(basename_dir => {
+            callee(pathJoin(dirPath, basename_dir));
+        });
+    })(distDirPath);
+
+    filePaths_toCreate.forEach(({ filePath, content }) => {
+        fs.rmSync(filePath.replace(/\.ts$/, ''), { recursive: true });
+
+        fs.writeFileSync(filePath, content);
+    });
+
+    for (const themeType of ['login', 'account']) {
+        const dirPath = pathJoin(srcDirPath_dist, themeType);
+
+        transformCodebase({
+            srcDirPath: dirPath,
+            destDirPath: dirPath,
+            transformSourceCode: ({ fileRelativePath, sourceCode }) => {
+                if (!fileRelativePath.endsWith('.ts')) {
+                    return { modifiedSourceCode: sourceCode };
+                }
+
+                let modifiedSourceCode_str = sourceCode.toString();
+
+                const getRelativeTo = (relativePath: string) =>
+                    pathRelative(pathDirname(fileRelativePath), relativePath).replaceAll(
+                        pathSep,
+                        '/'
+                    );
+
+                modifiedSourceCode_str = modifiedSourceCode_str.replaceAll(
+                    `@keycloakify/angular/${themeType}/i18n`,
+                    getRelativeTo('i18n')
+                );
+
+                modifiedSourceCode_str = modifiedSourceCode_str.replaceAll(
+                    `@keycloakify/angular/${themeType}/KcContext`,
+                    getRelativeTo('KcContext')
+                );
+
+                return {
+                    modifiedSourceCode: Buffer.from(modifiedSourceCode_str, 'utf8')
+                };
+            }
+        });
+    }
+
+    transformCodebase({
+        srcDirPath: pathJoin(getThisCodebaseRootDirPath(), 'stories'),
+        destDirPath: pathJoin(distDirPath, 'stories')
+    });
+
+    for (const basename of ['README.md', 'LICENSE']) {
+        fs.cpSync(
+            pathJoin(getThisCodebaseRootDirPath(), basename),
+            pathJoin(distDirPath, basename)
+        );
+    }
+
+    {
+        const packageJsonParsed = JSON.parse(
+            fs
+                .readFileSync(pathJoin(getThisCodebaseRootDirPath(), 'package.json'))
+                .toString('utf8')
+        );
+
+        const packageJsonFilePath_dist = pathJoin(distDirPath, 'package.json');
+
+        const packageJsonParsed_dist = JSON.parse(
+            fs.readFileSync(packageJsonFilePath_dist).toString('utf8')
+        );
+
+        for (const propertyName of [
+            'version',
+            'description',
+            'keywords',
+            'author',
+            'license',
+            'repository',
+            'homepage'
+        ]) {
+            packageJsonParsed_dist[propertyName] = packageJsonParsed[propertyName];
+        }
+
+        fs.writeFileSync(
+            packageJsonFilePath_dist,
+            JSON.stringify(packageJsonParsed_dist, null, 2)
+        );
+    }
+
+    console.log(
+        chalk.green(`✓ built in ${((Date.now() - startTime) / 1000).toFixed(2)}s`)
+    );
+})();

package/scripts/tools/SemVer.ts

@@ -0,0 +1,114 @@
+export type SemVer = {
+    major: number;
+    minor: number;
+    patch: number;
+    rc?: number;
+    parsedFrom: string;
+};
+
+export namespace SemVer {
+    const bumpTypes = ['major', 'minor', 'patch', 'rc', 'no bump'] as const;
+
+    export type BumpType = (typeof bumpTypes)[number];
+
+    export function parse(versionStr: string): SemVer {
+        const match = versionStr.match(
+            /^v?([0-9]+)\.([0-9]+)(?:\.([0-9]+))?(?:-rc.([0-9]+))?$/
+        );
+
+        if (!match) {
+            throw new Error(`${versionStr} is not a valid semantic version`);
+        }
+
+        const semVer: Omit<SemVer, 'parsedFrom'> = {
+            major: parseInt(match[1]),
+            minor: parseInt(match[2]),
+            patch: (() => {
+                const str = match[3];
+
+                return str === undefined ? 0 : parseInt(str);
+            })(),
+            ...(() => {
+                const str = match[4];
+                return str === undefined ? {} : { rc: parseInt(str) };
+            })()
+        };
+
+        const initialStr = stringify(semVer);
+
+        Object.defineProperty(semVer, 'parsedFrom', {
+            enumerable: true,
+            get: function () {
+                const currentStr = stringify(this);
+
+                if (currentStr !== initialStr) {
+                    throw new Error(
+                        `SemVer.parsedFrom can't be read anymore, the version have been modified from ${initialStr} to ${currentStr}`
+                    );
+                }
+
+                return versionStr;
+            }
+        });
+
+        return semVer as any;
+    }
+
+    export function stringify(v: Omit<SemVer, 'parsedFrom'>): string {
+        return `${v.major}.${v.minor}.${v.patch}${v.rc === undefined ? '' : `-rc.${v.rc}`}`;
+    }
+
+    /**
+     *
+     * v1  <  v2  => -1
+     * v1 === v2  => 0
+     * v1  >  v2  => 1
+     *
+     */
+    export function compare(v1: SemVer, v2: SemVer): -1 | 0 | 1 {
+        const sign = (diff: number): -1 | 0 | 1 => (diff === 0 ? 0 : diff < 0 ? -1 : 1);
+        const noUndefined = (n: number | undefined) => n ?? Infinity;
+
+        for (const level of ['major', 'minor', 'patch', 'rc'] as const) {
+            if (noUndefined(v1[level]) !== noUndefined(v2[level])) {
+                return sign(noUndefined(v1[level]) - noUndefined(v2[level]));
+            }
+        }
+
+        return 0;
+    }
+
+    /*
+    console.log(compare(parse("3.0.0-rc.3"), parse("3.0.0")) === -1 )
+    console.log(compare(parse("3.0.0-rc.3"), parse("3.0.0-rc.4")) === -1 )
+    console.log(compare(parse("3.0.0-rc.3"), parse("4.0.0")) === -1 )
+    */
+
+    export function bumpType(params: {
+        versionBehind: string | SemVer;
+        versionAhead: string | SemVer;
+    }): BumpType | 'no bump' {
+        const versionAhead =
+            typeof params.versionAhead === 'string'
+                ? parse(params.versionAhead)
+                : params.versionAhead;
+        const versionBehind =
+            typeof params.versionBehind === 'string'
+                ? parse(params.versionBehind)
+                : params.versionBehind;
+
+        if (compare(versionBehind, versionAhead) === 1) {
+            throw new Error(
+                `Version regression ${stringify(versionBehind)} -> ${stringify(versionAhead)}`
+            );
+        }
+
+        for (const level of ['major', 'minor', 'patch', 'rc'] as const) {
+            if (versionBehind[level] !== versionAhead[level]) {
+                return level;
+            }
+        }
+
+        return 'no bump';
+    }
+}

package/scripts/tools/crawl.ts

@@ -0,0 +1,35 @@
+import * as fs from 'fs';
+import { join as pathJoin, relative as pathRelative } from 'path';
+
+const crawlRec = (dirPath: string, filePaths: string[]) => {
+    for (const basename of fs.readdirSync(dirPath)) {
+        const fileOrDirPath = pathJoin(dirPath, basename);
+
+        if (fs.lstatSync(fileOrDirPath).isDirectory()) {
+            crawlRec(fileOrDirPath, filePaths);
+
+            continue;
+        }
+
+        filePaths.push(fileOrDirPath);
+    }
+};
+
+/** List all files in a given directory return paths relative to the dir_path */
+export function crawl(params: {
+    dirPath: string;
+    returnedPathsType: 'absolute' | 'relative to dirPath';
+}): string[] {
+    const { dirPath, returnedPathsType } = params;
+
+    const filePaths: string[] = [];
+
+    crawlRec(dirPath, filePaths);
+
+    switch (returnedPathsType) {
+        case 'absolute':
+            return filePaths;
+        case 'relative to dirPath':
+            return filePaths.map(filePath => pathRelative(dirPath, filePath));
+    }
+}

package/scripts/tools/fs.rmSync.ts

@@ -0,0 +1,34 @@
+import * as fs from 'fs';
+import { join as pathJoin } from 'path';
+import { SemVer } from './SemVer';
+
+/**
+ * Polyfill of fs.rmSync(dirPath, { "recursive": true })
+ * For older version of Node
+ */
+export function rmSync(dirPath: string, options: { recursive: true; force?: true }) {
+    if (SemVer.compare(SemVer.parse(process.version), SemVer.parse('14.14.0')) > 0) {
+        fs.rmSync(dirPath, options);
+        return;
+    }
+
+    const { force = true } = options;
+
+    if (force && !fs.existsSync(dirPath)) {
+        return;
+    }
+
+    const removeDir_rec = (dirPath: string) =>
+        fs.readdirSync(dirPath).forEach(basename => {
+            const fileOrDirPath = pathJoin(dirPath, basename);
+
+            if (fs.lstatSync(fileOrDirPath).isDirectory()) {
+                removeDir_rec(fileOrDirPath);
+                return;
+            } else {
+                fs.unlinkSync(fileOrDirPath);
+            }
+        });
+
+    removeDir_rec(dirPath);
+}

package/scripts/tools/getThisCodebaseRootDirPath.ts

@@ -0,0 +1,19 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+function getThisCodebaseRootDirPath_rec(dirPath: string): string {
+    if (fs.existsSync(path.join(dirPath, 'package.json'))) {
+        return dirPath;
+    }
+    return getThisCodebaseRootDirPath_rec(path.join(dirPath, '..'));
+}
+
+let result: string | undefined = undefined;
+
+export function getThisCodebaseRootDirPath(): string {
+    if (result !== undefined) {
+        return result;
+    }
+
+    return (result = getThisCodebaseRootDirPath_rec(__dirname));
+}