Adding initial version of audit log v2 html pattern library

CONTRIBUTORS.md

@@ -0,0 +1,5 @@
+# Project Contributors
+
+The following companies have helped make this project:
+
+[51Degrees](https://51degrees.com) provide real time high performance open source solutions for the open web.

paf-mvp-audit/src/model.ts

@@ -19,27 +19,27 @@ export class Model implements IModel {
   /**
    * The data fields that relate to each transmission result to be displayed.
    */
-  readonly results: FieldTransmissionResult[];
+  readonly results: FieldTransmissionResult[] = [];
 
   /**
    * All the fields that need to be bound.
    */
-  readonly allFields: IFieldBind[];
+  readonly allFields: IFieldBind[] = [];
 
   /**
    * Constructs the data model from the audit log.
    * @param audit
    */
   constructor(audit: AuditLog) {
-    this.results = [];
-    for (let i = 0; i < audit.transmissions.length; i++) {
-      this.results.push(new FieldTransmissionResult(this, audit.transmissions[i]));
-    }
-    this.allFields = this.results;
+    audit.transmissions?.forEach((t) => {
+      const field = new FieldTransmissionResult(this, t);
+      this.results.push(field);
+      this.allFields.push(field);
+    });
   }
 
   /**
-   * Calls the refresh method on all the fields in the model to connect them to the currently displayed UI.
+   * Calls the updateUI method on all the fields in the model to connect them to the currently displayed UI.
    */
   public updateUI() {
     this.allFields.forEach((f) => f.updateUI());

paf-mvp-pattern-library-audit/.babelrc.json

@@ -0,0 +1,61 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "shippedProposals": true,
+        "loose": true
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-shorthand-properties",
+    "@babel/plugin-transform-block-scoping",
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ],
+    [
+      "@babel/plugin-proposal-private-methods",
+      {
+        "loose": true
+      }
+    ],
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-syntax-dynamic-import",
+    [
+      "@babel/plugin-proposal-object-rest-spread",
+      {
+        "loose": true,
+        "useBuiltIns": true
+      }
+    ],
+    "@babel/plugin-transform-classes",
+    "@babel/plugin-transform-arrow-functions",
+    "@babel/plugin-transform-parameters",
+    "@babel/plugin-transform-destructuring",
+    "@babel/plugin-transform-spread",
+    "@babel/plugin-transform-for-of",
+    "babel-plugin-macros",
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    [
+      "babel-plugin-polyfill-corejs3",
+      {
+        "method": "usage-global",
+        "absoluteImports": "core-js",
+        "version": "3.21.0"
+      }
+    ]
+  ]
+}

paf-mvp-pattern-library-audit/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+storybook-static
+build/*
+!build/index.html

paf-mvp-pattern-library-audit/.storybook/main.js

@@ -0,0 +1,29 @@
+const path = require("path");
+
+module.exports = {
+  "stories": [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ],
+  "framework": "@storybook/html",
+  staticDirs: ["../assets"],
+  webpackFinal: async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    // Make whatever fine-grained changes you need
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'css-loader', 'sass-loader'],
+      include: path.resolve(__dirname, '../'),
+    });
+
+    // Return the altered config
+    return config;
+  },
+}

paf-mvp-pattern-library-audit/.storybook/preview.js

@@ -0,0 +1,35 @@
+import pretty from "pretty";
+import "../styles/ok-ui-audit.scss";
+import "../javascript/ok-ui.js";
+import { addDecorator } from '@storybook/html';
+
+export const parameters = {
+  layout: 'padded',
+  previewTabs: { 
+    canvas: { hidden: true } 
+  },
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  backgrounds: {
+    default: 'background',
+    values: [
+      {
+        name: 'background',
+        value: '#F7F9FC',
+      }
+    ],
+  },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  docs: {
+    transformSource: input => pretty(input, { ocd: true })
+  }
+}
+
+// this is an important piece of code that ensures every component/group is wrapped in the requisite OneKey container
+addDecorator(story => `
+  <aside class="ok-ui">${story()}</aside>
+`);

paf-mvp-pattern-library-audit/.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Storybook",
+            "type": "node-terminal",
+            "request": "launch",
+            "command": "npm run storybook",
+            "cwd": "${workspaceFolder}"
+        }
+    ]
+}

paf-mvp-pattern-library-audit/.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

paf-mvp-pattern-library-audit/.vscode/tasks.json

@@ -0,0 +1,10 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+      {
+        "type": "shell",
+        "label": "Build CSS",
+        "command": "npm run build-css",
+      }
+    ]
+  }

paf-mvp-pattern-library-audit/README.md

@@ -0,0 +1,13 @@
+# OneKey UI
+
+## Installation
+
+- `npm install` to install the dependencies
+- `npm start` to run the pattern library
+
+## Documentation
+
+The docs for using, building, and customising the pattern library are available within the pattern library itself:
+
+- http://localhost:6006/
+- Or [stories/Introduction.stories.mdx](stories/Introduction.stories.mdx)