buner 0.0.2 → 1.0.0

package/public/staticwebapp.config.json

@@ -0,0 +1,138 @@
+{
+  "routes": [
+    {
+      "route": "/.auth/login/aad",
+      "statusCode": 404,
+      "allowedRoles": [
+        "anonymous"
+      ],
+      "headers": {
+        "X-Robots-Tag": "noindex, nofollow"
+      }
+    },
+    {
+      "route": "/.auth/login/twitter",
+      "statusCode": 404,
+      "allowedRoles": [
+        "anonymous"
+      ],
+      "headers": {
+        "X-Robots-Tag": "noindex, nofollow"
+      }
+    },
+    {
+      "route": "/logout",
+      "redirect": "/.auth/logout",
+      "allowedRoles": [
+        "anonymous"
+      ],
+      "headers": {
+        "X-Robots-Tag": "noindex, nofollow"
+      }
+    },
+    {
+      "route": "/api/avatar",
+      "rewrite": "/json/avatar.json",
+      "allowedRoles": [
+        "anonymous"
+      ],
+      "headers": {
+        "X-Robots-Tag": "noindex, nofollow",
+        "Content-Type": "application/json"
+      }
+    },
+    {
+      "route": "/api",
+      "allowedRoles": [
+        "anonymous"
+      ],
+      "headers": {
+        "X-Robots-Tag": "noindex, nofollow"
+      }
+    },
+    {
+      "route": "/favicon.*",
+      "allowedRoles": [
+        "anonymous"
+      ],
+      "headers": {
+        "X-Robots-Tag": "noindex, nofollow"
+      }
+    },
+    {
+      "route": "/40{0,1,2,3,4}.html",
+      "allowedRoles": [
+        "anonymous"
+      ],
+      "headers": {
+        "X-Robots-Tag": "noindex, nofollow"
+      }
+    },
+    {
+      "route": "/*.{png,jpg,jpeg,gif,woff2,otf,ttf,pdf,doc,docx,ppt,pptx,xls,xlsx,csv,rtf,zip,rar,7z,webp}",
+      "headers": {
+        "Cache-Control": "public, max-age=604800, immutable",
+        "X-Robots-Tag": "noindex, nofollow"
+      },
+      "allowedRoles": [
+        "anonymous"
+      ]
+    },
+    {
+      "route": "/*.{js,css,svg}",
+      "headers": {
+        "Cache-Control": "public, max-age=3600, immutable",
+        "X-Robots-Tag": "noindex, nofollow"
+      },
+      "allowedRoles": [
+        "anonymous"
+      ]
+    },
+    {
+      "route": "/*.{pdf,doc,docx,ppt,pptx,xls,xlsx,csv,rtf,zip,rar,7z}",
+      "headers": {
+        "Content-Disposition": "attachment",
+        "Content-Type": "application/octet-stream",
+        "Content-Transfer-Encoding": "binary",
+        "X-Robots-Tag": "noindex, nofollow"
+      },
+      "allowedRoles": [
+        "anonymous"
+      ]
+    },
+    {
+      "route": "/*.{html,json}",
+      "allowedRoles": [
+        "anonymous"
+      ],
+      "headers": {
+        "X-Robots-Tag": "noindex, nofollow"
+      }
+    }
+  ],
+  "responseOverrides": {
+    "400": {
+      "rewrite": "/400.html"
+    },
+    "401": {
+      "rewrite": "/401.html"
+    },
+    "403": {
+      "rewrite": "/403.html"
+    },
+    "404": {
+      "rewrite": "/404.html"
+    }
+  },
+  "globalHeaders": {
+    "content-security-policy": "default-src *  data: blob: filesystem: about: ws: wss: 'unsafe-inline' 'unsafe-eval'; script-src * data: blob: 'unsafe-inline' 'unsafe-eval'; connect-src * data: blob: 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src * data: blob:; style-src * data: blob: 'unsafe-inline'; font-src * data: blob: 'unsafe-inline'; frame-ancestors * data: blob:; object-src * data: blob:; media-src * data: blob:; worker-src * data: blob:;",
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Methods": "*"
+  },
+  "mimeTypes": {
+    ".json": "text/json"
+  },
+  "platform": {
+    "apiRuntime": "node:18"
+  }
+}

package/scripts.ts

@@ -0,0 +1,56 @@
+/* eslint-disable no-console */
+import fs from 'fs';
+import path from 'path';
+
+import chokidar from 'chokidar';
+import { glob } from 'glob';
+import slash from 'slash';
+import { transformWithEsbuild } from 'vite';
+
+const log = console.log.bind(console);
+
+const scriptCompile = async (inputPath: string) => {
+  console.log('compile:', slash(inputPath));
+
+  const code = fs.readFileSync(inputPath, 'utf8');
+
+  return transformWithEsbuild(code, inputPath, {
+    minify: true,
+    format: 'esm',
+    sourcemap: path.basename(inputPath).includes('critical') ? false : 'external',
+  })
+    .then((result) => {
+      const savePath = path.resolve('public/assets/js/' + path.parse(inputPath).name + '.js');
+      const saveDir = path.dirname(savePath);
+
+      if (!fs.existsSync(saveDir)) {
+        fs.mkdirSync(saveDir);
+      }
+
+      fs.writeFileSync(savePath, result.code);
+    })
+    .catch((error) => {
+      log(error);
+    });
+};
+
+const run = async () => {
+  if (process.argv.includes('--watch')) {
+    const watcher = chokidar.watch('src/assets/scripts/**/*.{js,jsx,ts,tsx}');
+
+    watcher
+      .on('add', scriptCompile)
+      .on('change', scriptCompile)
+      .on('unlink', (path) => log(`File ${path} has been removed`));
+  } else {
+    const pool: Promise<any>[] = [];
+
+    glob.sync('src/assets/scripts/**/*.{js,jsx,ts,tsx}').forEach((p) => pool.push(scriptCompile(p)));
+
+    await Promise.all(pool);
+  }
+};
+
+await run();
+
+export {};

package/server.ts

@@ -0,0 +1,29 @@
+/* eslint-disable no-console */
+import path from 'path';
+
+import { loadEnv } from 'vite';
+
+import { startServer } from './xpack/create-server.js';
+
+console.log('[INIT] server');
+
+const argvModeIndex = process.argv.indexOf('--mode');
+const mode =
+  argvModeIndex >= 0 && argvModeIndex < process.argv.length - 1 && !process.argv[argvModeIndex + 1].startsWith('-')
+    ? process.argv[argvModeIndex + 1]
+    : 'production';
+const root = process.cwd();
+const xpackEnv = loadEnv(mode, root);
+const isTest = !!xpackEnv.VITE_TEST_BUILD || process.env.NODE_ENV === 'test';
+const port = xpackEnv.VITE_PORT ? parseInt(xpackEnv.VITE_PORT) : 5000;
+
+if (!isTest) {
+  console.log(root);
+  startServer({
+    root,
+    isTest,
+    port,
+    hmrPort: port + 1,
+    baseUrl: xpackEnv.VITE_BASE_URL,
+  });
+}

package/states.ts

@@ -0,0 +1,63 @@
+/* eslint-disable no-console */
+import fs from 'fs';
+
+import chokidar from 'chokidar';
+import debounce from 'debounce';
+import { glob } from 'glob';
+
+const isWatch = process.argv.includes('--watch');
+const log = console.log.bind(console);
+
+const states: { [path: string]: string } = {};
+
+const buildStates = debounce(() => {
+  const output: any[] = [];
+
+  const keys = Object.keys(states);
+
+  [].forEach.call(keys, (key) => {
+    const state = states[key];
+
+    if (!state) {
+      return;
+    }
+
+    try {
+      output.push(JSON.parse(state));
+    } catch (error: any) {
+      console.log(error);
+    }
+  });
+
+  const json = JSON.stringify(output, null, '  ');
+
+  fs.writeFileSync('public/pl-states.json', json);
+}, 500);
+
+const setStates = (statePath: string) => {
+  const state = fs.readFileSync(statePath, 'utf-8');
+
+  states[statePath] = state;
+  buildStates();
+};
+
+const removeStates = (statePath: string) => {
+  delete states[statePath];
+  buildStates();
+};
+
+if (isWatch) {
+  const watcher = chokidar.watch('src/**/*.states.json');
+
+  watcher
+    .on('ready', () => {
+      log('States are ready!');
+    })
+    .on('add', (path) => setStates(path))
+    .on('change', (path) => setStates(path))
+    .on('unlink', (path) => removeStates(path));
+} else {
+  glob.sync('src/**/*.states.json').forEach((path) => setStates(path));
+}
+
+export {};

package/styles.ts

@@ -0,0 +1,232 @@
+/* eslint-disable no-console */
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath, pathToFileURL } from 'url';
+
+import { watch } from 'chokidar';
+import * as sass from 'sass';
+import slash from 'slash';
+import debounce from 'debounce';
+import { glob } from 'glob';
+import postcss, { ProcessOptions } from 'postcss';
+import autoprefixer from 'autoprefixer';
+import cssnano from 'cssnano';
+
+const isWatch = process.argv.includes('--watch');
+const outDir = './public/assets/css';
+
+if (!isWatch && fs.existsSync(outDir)) {
+  fs.rmSync(outDir, { force: true, recursive: true });
+}
+
+if (!fs.existsSync(outDir)) {
+  fs.mkdirSync(outDir, { recursive: true });
+}
+
+// Something to use when events are received.
+const log = console.log.bind(console);
+
+const prepareCssFileContent = ({
+  srcFile,
+  includeMixins = true,
+  includeAbstracts = true,
+}: {
+  srcFile: string;
+  includeMixins?: boolean;
+  includeAbstracts?: boolean;
+}) => {
+  return [
+    includeAbstracts
+      ? slash(`@use '${path.relative(path.dirname(srcFile), path.resolve('src/assets/styles/00-abstracts/abstracts'))}' as *;\n`)
+      : undefined,
+    includeMixins ? slash(`@use '${path.relative(path.dirname(srcFile), path.resolve('src/assets/styles/01-mixins/mixins'))}' as *;\n`) : undefined,
+    fs.readFileSync(srcFile, 'utf-8'),
+  ].filter(Boolean);
+};
+
+const stringOptions = (srcFile: string): sass.StringOptions<'sync' | 'async'> => {
+  const options: sass.StringOptions<'sync' | 'async'> = {
+    sourceMap: true,
+    sourceMapIncludeSources: true,
+    syntax: 'scss',
+    style: 'compressed',
+    url: pathToFileURL(path.resolve(srcFile)),
+    importer: {
+      canonicalize(url) {
+        return new URL(url);
+      },
+      load(canonicalUrl: URL) {
+        let filePath = fileURLToPath(canonicalUrl);
+
+        if (!filePath.endsWith('.scss')) {
+          const parentDir = path.dirname(filePath);
+          const fileName = path.basename(filePath);
+
+          filePath = path.join(parentDir, fileName + '.scss');
+
+          if (!fs.existsSync(filePath)) {
+            filePath = path.join(parentDir, '_' + fileName + '.scss');
+          }
+        }
+
+        if (!fs.existsSync(filePath)) return null;
+
+        if (filePath.includes('abstracts') || filePath.includes('_mixins') || filePath.includes('_base') || filePath.includes('xpack'))
+          return {
+            contents: fs.readFileSync(filePath, 'utf-8'),
+            syntax: 'scss',
+          };
+
+        let content = prepareCssFileContent({ srcFile: filePath });
+
+        if (filePath.includes('mixins')) {
+          content = prepareCssFileContent({ srcFile: filePath, includeMixins: false });
+        }
+
+        return {
+          contents: content.join(''),
+          syntax: 'scss',
+        };
+      },
+    },
+  };
+
+  return options;
+};
+
+const compile = (srcFile: string, options: { prefix?: string; isReady: boolean }) => {
+  if (options.isReady) {
+    log('compile:', slash(srcFile));
+  }
+
+  if (path.basename(srcFile).startsWith('_')) {
+    return;
+  }
+
+  const name =
+    path.basename(srcFile) === 'index.scss' ? path.basename(path.dirname(srcFile)) + '.css' : path.basename(srcFile).replace(/\.scss$/gi, '.css');
+
+  const outFile = (options.prefix ?? '') + name;
+
+  const cssStrings = srcFile.includes('xpack') ? [fs.readFileSync(srcFile, 'utf-8')] : prepareCssFileContent({ srcFile });
+
+  if (srcFile.includes('style-base') || srcFile.includes('style-all')) {
+    glob.sync('./src/atoms/**/*.scss').forEach((atomPath) => {
+      if (!path.basename(atomPath).startsWith('_')) {
+        cssStrings.push(sass.compileString(prepareCssFileContent({ srcFile: atomPath }).join(''), stringOptions(atomPath)).css);
+      }
+    });
+
+    glob.sync('./src/molecules/**/*.scss').forEach((molPath) => {
+      if (!path.basename(molPath).startsWith('_')) {
+        cssStrings.push(sass.compileString(prepareCssFileContent({ srcFile: molPath }).join(''), stringOptions(molPath)).css);
+      }
+    });
+  }
+
+  sass
+    .compileStringAsync(cssStrings.join(''), stringOptions(srcFile))
+    .then((result) => postcssProcess(result, srcFile, outFile))
+    .catch((error) => {
+      log(error);
+    });
+};
+
+const postcssProcess = (result: sass.CompileResult, from: string, to: string) => {
+  const postcssOptions: ProcessOptions = { from: pathToFileURL(from).href, to, map: { prev: result.sourceMap, absolute: false } };
+
+  postcss([autoprefixer({ grid: true }), cssnano])
+    .process(result.css, postcssOptions)
+    .then((result) => {
+      fs.writeFileSync(path.join(outDir, to), result.css + (result.map ? `\n/*# sourceMappingURL=${to}.map */` : ''));
+
+      if (result.map) {
+        fs.writeFileSync(path.join(outDir, to + '.map'), result.map.toString());
+      }
+    });
+};
+
+const styleOrganisms = debounce((isReady: boolean) => {
+  const paths = glob.sync('src/organisms/**/*.scss', { nodir: true });
+
+  [].forEach.call(paths, (p: string) => styleOrganism(p, isReady));
+}, 200);
+
+const styleTemplates = debounce((isReady: boolean) => {
+  const paths = glob.sync('src/templates/**/*.scss', { nodir: true });
+
+  [].forEach.call(paths, (p: string) => styleTemplate(p, isReady));
+}, 200);
+
+const styleBase = debounce((isReady: boolean) => compile('src/assets/styles/style-base.scss', { isReady }), 200);
+const stylePlState = debounce((isReady: boolean) => compile('xpack/styles/pl-states.scss', { isReady }), 200);
+const styleRoot = debounce((isReady: boolean) => compile('xpack/styles/root.scss', { isReady }), 200);
+const styleOrganism = (srcFile: string, isReady: boolean) => compile(srcFile, { prefix: 'b-', isReady });
+const styleTemplate = (srcFile: string, isReady: boolean) => compile(srcFile, { prefix: 'p-', isReady });
+
+const sassCompile = (inputPath: string, isReady: boolean) => {
+  const p = slash(inputPath);
+
+  if (p.startsWith('src/assets/styles/00-abstracts/') || p.startsWith('src/assets/styles/01-mixins/')) {
+    styleBase(isReady);
+    styleOrganisms(isReady);
+    styleTemplates(isReady);
+    stylePlState(isReady);
+  }
+
+  if (p.startsWith('src/atoms') || p.startsWith('src/molecules') || p.startsWith('src/assets/styles/02-base')) {
+    styleBase(isReady);
+  }
+
+  if (p.startsWith('src/organisms')) {
+    if (path.basename(p).startsWith('_')) {
+      glob
+        .sync(path.dirname(p) + '/*.scss', { nodir: true })
+        .filter((p) => !path.basename(p).startsWith('_'))
+        .forEach((p) => styleOrganism(p, isReady));
+    } else {
+      styleOrganism(p, isReady);
+    }
+  }
+
+  if (p.startsWith('src/templates')) {
+    if (path.basename(p).startsWith('_')) {
+      glob
+        .sync(path.dirname(p) + '/*.scss', { nodir: true })
+        .filter((p) => !path.basename(p).startsWith('_'))
+        .forEach((p) => styleTemplate(p, isReady));
+    } else {
+      styleTemplate(p, isReady);
+    }
+  }
+
+  if (p.startsWith('xpack/styles/pl-states')) {
+    stylePlState(isReady);
+  } else if (p.startsWith('xpack/styles')) {
+    styleRoot(isReady);
+  }
+};
+
+if (isWatch) {
+  const watcher = watch(['src', 'xpack/styles'], { ignored: (path, stats) => !!stats?.isFile() && !path.endsWith('.scss') });
+  let isReady = false;
+
+  watcher
+    .on('ready', () => {
+      log('SCSS ready!');
+      isReady = true;
+    })
+    .on('add', (path) => sassCompile(path, isReady))
+    .on('change', (path) => sassCompile(path, isReady))
+    .on('unlink', (path) => log(`File ${path} has been removed`));
+} else {
+  styleBase(true);
+  stylePlState(true);
+
+  glob
+    .sync(['src/{organisms,templates}/**/*.scss', 'xpack/styles/**/*.scss'])
+    .filter((p) => !path.basename(p).startsWith('_'))
+    .forEach((path) => sassCompile(path, true));
+}
+
+export {};

package/tsconfig.json

@@ -1,29 +1,75 @@
 {
   "compilerOptions": {
-    // Environment setup & latest features
-    "lib": ["ESNext"],
     "target": "ESNext",
-    "module": "Preserve",
-    "moduleDetection": "force",
-    "jsx": "react-jsx",
-    "allowJs": true,
-
-    // Bundler mode
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "noEmit": true,
-
-    // Best practices
-    "strict": true,
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "composite": true,
+    "allowJs": false,
     "skipLibCheck": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedIndexedAccess": true,
-    "noImplicitOverride": true,
-
-    // Some stricter flags (disabled by default)
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "noPropertyAccessFromIndexSignature": false
-  }
-}
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "sourceMap": true,
+    "paths": {
+      "@_types/*": [
+        "./src/_types/*"
+      ],
+      "@helpers/*": [
+        "./src/_helpers/*"
+      ],
+      "@assets/*": [
+        "./src/assets/*"
+      ],
+      "@data/*": [
+        "./src/_data/*"
+      ],
+      "@atoms/*": [
+        "./src/atoms/*"
+      ],
+      "@molecules/*": [
+        "./src/molecules/*"
+      ],
+      "@organisms/*": [
+        "./src/organisms/*"
+      ],
+      "@templates/*": [
+        "./src/templates/*"
+      ],
+      "@pages/*": [
+        "./src/pages/*"
+      ],
+      "@_http/*": [
+        "./src/_http/*"
+      ],
+      "@_api/*": [
+        "./src/_api/*"
+      ],
+      "@mocks/*": [
+        "./src/mocks/*"
+      ],
+      "@xpack/*": [
+        "./xpack/*"
+      ],
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.json"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/types.d.ts

@@ -0,0 +1,54 @@
+declare module '*.svg?raw' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.htm?raw' {
+  const value: string;
+  export default value;
+}
+
+declare const CONTENT: {
+  forgotpassword_link: string;
+  createaccount_intro: string;
+  button_signin: string;
+  social_intro: string;
+  remember_me: string;
+  unknown_error: string;
+  divider_title: string;
+  local_intro_email: string;
+  logonIdentifier_email: string;
+  requiredField_email: string;
+  invalid_email: string;
+  email_pattern: string;
+  local_intro_username: string;
+  logonIdentifier_username: string;
+  requiredField_username: string;
+  password: string;
+  requiredField_password: string;
+  createaccount_link: string;
+  cancel_message: string;
+  invalid_password: string;
+  createaccount_one_link: string;
+  createaccount_two_links: string;
+  createaccount_three_links: string;
+  local_intro_generic: string;
+  requiredField_generic: string;
+  invalid_generic: string;
+  heading: string;
+};
+
+declare module '*.htm?raw' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.cshtml?raw' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.svg?raw' {
+  const value: string;
+  export default value;
+}

package/vite.config.ts

@@ -0,0 +1,3 @@
+import config from './xpack/config';
+
+export default config;