npm - @startinblox/components-ds4go - Versions diffs - 1.0.0 - Mend

@startinblox/components-ds4go 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/.gitlab-ci.yml +57 -0
package/.storybook/main.ts +17 -0
package/.storybook/preview-head.html +8 -0
package/.storybook/preview.ts +22 -0
package/LICENSE +21 -0
package/README.md +129 -0
package/biome.json +50 -0
package/cypress/component/solid-boilerplate.cy.ts +9 -0
package/cypress/support/component-index.html +12 -0
package/cypress/support/component.ts +17 -0
package/cypress.config.ts +11 -0
package/dist/components-ds4go.css +1 -0
package/dist/index.js +1634 -0
package/lit-localize.json +15 -0
package/locales/en.xlf +28 -0
package/package.json +93 -0
package/postcss.config.js +8 -0
package/src/component.d.ts +167 -0
package/src/components/catalog/ds4go-fact-bundle-holder.ts +162 -0
package/src/components/modal/ds4go-fact-bundle-modal.ts +82 -0
package/src/components/solid-fact-bundle.ts +225 -0
package/src/context.json +1 -0
package/src/helpers/components/ResourceMapper.ts +450 -0
package/src/helpers/components/componentObjectHandler.ts +22 -0
package/src/helpers/components/componentObjectsHandler.ts +14 -0
package/src/helpers/components/dspComponent.ts +243 -0
package/src/helpers/components/orbitComponent.ts +273 -0
package/src/helpers/components/setupCacheInvalidation.ts +44 -0
package/src/helpers/components/setupCacheOnResourceReady.ts +39 -0
package/src/helpers/components/setupComponentSubscriptions.ts +73 -0
package/src/helpers/components/setupOnSaveReset.ts +20 -0
package/src/helpers/datas/dataBuilder.ts +43 -0
package/src/helpers/datas/filterGenerator.ts +29 -0
package/src/helpers/datas/filterObjectByDateAfter.ts +80 -0
package/src/helpers/datas/filterObjectById.ts +54 -0
package/src/helpers/datas/filterObjectByInterval.ts +133 -0
package/src/helpers/datas/filterObjectByNamedValue.ts +103 -0
package/src/helpers/datas/filterObjectByType.ts +30 -0
package/src/helpers/datas/filterObjectByValue.ts +81 -0
package/src/helpers/datas/sort.ts +40 -0
package/src/helpers/i18n/configureLocalization.ts +17 -0
package/src/helpers/index.ts +43 -0
package/src/helpers/mappings/dsp-mapping-config.ts +545 -0
package/src/helpers/ui/formatDate.ts +18 -0
package/src/helpers/ui/lipsum.ts +12 -0
package/src/helpers/utils/requestNavigation.ts +12 -0
package/src/helpers/utils/uniq.ts +6 -0
package/src/index.ts +14 -0
package/src/initializer.ts +11 -0
package/src/mocks/orbit.mock.ts +33 -0
package/src/mocks/user.mock.ts +67 -0
package/src/styles/_helpers/flex.scss +39 -0
package/src/styles/index.scss +14 -0
package/src/styles/modal/ds4go-fact-bundle-modal.scss +89 -0
package/tsconfig.json +36 -0
package/vite.config.ts +48 -0

package/lit-localize.json ADDED Viewed

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://raw.githubusercontent.com/lit/lit/main/packages/localize-tools/config.schema.json",
+  "sourceLocale": "en",
+  "targetLocales": ["en"],
+  "tsConfig": "./tsconfig.json",
+  "output": {
+    "mode": "runtime",
+    "outputDir": "./src/generated/locales",
+    "localeCodesModule": "./src/generated/locale-codes.ts"
+  },
+  "interchange": {
+    "format": "xliff",
+    "xliffDir": "./locales/"
+  }
+}

package/locales/en.xlf ADDED Viewed

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<file target-language="en" source-language="en" original="lit-localize-inputs" datatype="plaintext">
+<body>
+<trans-unit id="sf5509a9f253b9836">
+  <source>Create a bundle</source>
+</trans-unit>
+<trans-unit id="sefa717c1620c4ae4">
+  <source>facts</source>
+</trans-unit>
+<trans-unit id="sef234a791696afff">
+  <source>fact</source>
+</trans-unit>
+<trans-unit id="s4979bd417e7c8052">
+  <source>All facts in this bundle</source>
+</trans-unit>
+<trans-unit id="s0d1be7a2c400c080">
+  <source>more</source>
+</trans-unit>
+<trans-unit id="s57a40de45f324b96">
+  <source>Bundle created on</source>
+</trans-unit>
+<trans-unit id="sd3682395cf86f913">
+  <source>Bundle updated on</source>
+</trans-unit>
+</body>
+</file>
+</xliff>

package/package.json ADDED Viewed

@@ -0,0 +1,93 @@
+{
+  "name": "@startinblox/components-ds4go",
+  "version": "1.0.0",
+  "description": "Startin'blox DS4GO",
+  "main": "dist/index.js",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://git.startinblox.com/components/solid-ds4go.git"
+  },
+  "author": "startinblox",
+  "license": "MIT",
+  "release": {
+    "branches": [
+      "master",
+      {
+        "name": "beta",
+        "prerelease": true
+      },
+      {
+        "name": "alpha",
+        "prerelease": true
+      }
+    ],
+    "plugins": [
+      [
+        "@semantic-release/commit-analyzer",
+        {
+          "preset": "angular",
+          "releaseRules": [
+            {
+              "type": "major",
+              "release": "major"
+            },
+            {
+              "type": "minor",
+              "release": "minor"
+            },
+            {
+              "type": "*",
+              "release": "patch"
+            }
+          ]
+        }
+      ],
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/gitlab",
+      "@semantic-release/npm"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "watch": "lit-localize build && vite",
+    "build": "lit-localize build && vite build",
+    "serve": "vite preview",
+    "cy:open": "cypress open --component",
+    "cy:run": "lit-localize build && cypress run --component",
+    "storybook": "lit-localize build && storybook dev -p 6006",
+    "build-storybook": "lit-localize build && storybook build",
+    "locale:extract": "lit-localize extract",
+    "locale:build": "lit-localize build"
+  },
+  "browserslist": [
+    "last 2 Chrome versions"
+  ],
+  "dependencies": {
+    "@lit/localize": "^0.12.2",
+    "@lit/task": "^1.0.3",
+    "autoprefixer": "^10.4.21",
+    "cssnano": "^7.1.1",
+    "lit": "^3.3.1",
+    "postcss": "^8.5.6",
+    "postcss-preset-env": "^10.4.0",
+    "postcss-scss": "^4.0.9",
+    "sass": "^1.93.2",
+    "unplugin-icons": "^22.5.0",
+    "vite": "^7.1.12"
+  },
+  "devDependencies": {
+    "@lit/localize-tools": "^0.8.0",
+    "@storybook/addon-docs": "^9.1.13",
+    "@storybook/web-components-vite": "^9.1.13",
+    "baseline-browser-mapping": "^2.9.19",
+    "buffer": "^6.0.3",
+    "cypress": "^15.5.0",
+    "cypress-ct-lit": "^1.0.0",
+    "lorem-ipsum": "^2.0.8",
+    "storybook": "^9.1.13",
+    "stream-browserify": "^3.0.0"
+  }
+}

package/postcss.config.js ADDED Viewed

@@ -0,0 +1,8 @@
+import autoprefixer from "autoprefixer";
+import cssnano from "cssnano";
+import postcssPresetEnv from "postcss-preset-env";
+export default {
+  syntax: "postcss-scss",
+  plugins: [autoprefixer, cssnano, postcssPresetEnv],
+};

package/src/component.d.ts ADDED Viewed

@@ -0,0 +1,167 @@
+/// <reference types="vite/client" />
+/// <reference types="unplugin-icons/types/raw" />
+/// <reference types="unplugin-icons/types/web-components" />
+import type { TemplateResult } from "lit";
+interface PWAIcons {
+  src: string;
+  sizes: string;
+  type: string;
+  purpose: string;
+}
+interface PWA {
+  dir: string;
+  icons: PWAIcons[];
+  start_url: string;
+  display: string;
+  orientation: string;
+  background_color: string;
+  theme_color: string;
+}
+interface I18n {
+  lang: string;
+  force: boolean;
+}
+interface ComponentParameters {
+  replacement?: string;
+  bindResources?: string;
+  bindUser?: string;
+  dataSrc?: string;
+  nestedField?: string;
+  authority?: string;
+  authorityName?: string;
+  noRender?: string;
+}
+interface OrbitComponent {
+  type?: string;
+  parameters: ComponentParameters;
+  route: string | false;
+  integration?: string[];
+  uniq?: string;
+  experimental?: string[];
+  routeAttributes?: {
+    "rdf-type": string;
+    "use-id": string;
+  };
+  defaultRoute?: boolean;
+  extensions?: OrbitComponent[];
+  attributes?: Record<string, any>;
+  instance?: Element;
+}
+interface OrbitClient {
+  name: string;
+  logo: string;
+  server?: string;
+  css?: string[] | string | false;
+  description?: string;
+  favicon?: string;
+  defaultAvatar?: string;
+  i18n?: I18n;
+  pwa?: PWA;
+}
+interface NpmPackage {
+  package: string;
+  version: string;
+  path: string;
+}
+export interface Orbit {
+  client: OrbitClient;
+  components: OrbitComponent[];
+  npm?: NpmPackage[];
+}
+export interface LiveOrbit extends Orbit {
+  componentSet: Set<string>;
+  federations: Record<string, any>;
+  getDefaultRoute: () => string;
+  getComponent: (type: string) => OrbitComponent | undefined;
+  getComponentFromRoute: (route: string) => OrbitComponent | undefined;
+  getRoute: (
+    type: string,
+    returnFirst?: boolean,
+    ignoreError?: boolean
+  ) => string | false;
+  Swal: any;
+  defaultRoute: string;
+}
+export type Context = Record<string, string | { "@id": string }>;
+export type Permission = "add" | "delete" | "change" | "control" | "view" | string;
+export type DateTime = string;
+export interface LimitedResource {
+  "@id": string;
+  "@type"?: string | string[] | Promise<string | string[]>;
+  _originalResource?: Resource;
+  properties?: string[] | Promise<string[]>;
+  permissions?: Permission[];
+  clientContext?: Context | Promise<Context>;
+  serverContext?: Context | Promise<Context>;
+}
+export interface Resource extends LimitedResource {
+  [key: string]: any;
+}
+export interface UnknownResource {
+  [key: string]: any;
+}
+interface Container<T> extends Resource {
+  "ldp:contains": T[];
+}
+type ProxyValue<T> = T extends Array<infer U> ? U[] : Resource & T;
+export interface User extends Resource {
+  account?: Account;
+  first_name?: string;
+  last_name?: string;
+  name?: string;
+  username?: string;
+  email?: string;
+}
+export interface Account extends Resource {
+  picture?: string | null;
+}
+export interface PropertiesPicker {
+  key: string;
+  value: string;
+  cast?: function;
+  expand?: boolean;
+}
+export type TemplateResultOrSymbol = TemplateResult | symbol;
+export interface SearchObject {
+  name: string;
+  value: string;
+  type?: string;
+}
+export declare global {
+  interface Window {
+    orbit: LiveOrbit;
+    sibStore: { getData: ProxyValue<Resource | Container>; [key: string]: any };
+    sibRouter: { [key: string]: any };
+  }
+  interface Element {
+    currentRouteName: string;
+  }
+  interface Event {
+    [key: string]: any;
+  }
+  interface EventTarget {
+    [key: string]: any;
+  }
+}

package/src/components/catalog/ds4go-fact-bundle-holder.ts ADDED Viewed

@@ -0,0 +1,162 @@
+import {
+  ComponentObjectsHandler,
+  filterObjectByDateAfter,
+  filterObjectById,
+  filterObjectByInterval,
+  filterObjectByNamedValue,
+  filterObjectByType,
+  filterObjectByValue,
+} from "@helpers";
+import { msg } from "@lit/localize";
+import type { Resource, SearchObject } from "@src/component";
+import { css, html, nothing, type PropertyValues } from "lit";
+import { customElement, state } from "lit/decorators.js";
+@customElement("ds4go-fact-bundle-holder")
+export class Ds4goFactBundleHolder extends ComponentObjectsHandler {
+  static styles = css`
+    .card-grid {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 20px;
+    }
+    .card-grid-vertical {
+      justify-content: stretch;
+    }
+    .card-grid-vertical tems-card-catalog {
+      width: 354px;
+      height: auto;
+    }
+    tems-card-catalog {
+      cursor: pointer;
+    }
+  `;
+  @state()
+  search: SearchObject[] = [];
+  @state()
+  protected _displayObjects: Resource[] = [];
+  protected filter(objects: Resource[], filters: SearchObject[] = []) {
+    if (!filters || filters.length === 0 || !objects || objects.length === 0) {
+      return objects;
+    }
+    const groupedFilters = new Map<string, SearchObject[]>();
+    for (const filter of filters) {
+      const groupKey = filter.name;
+      const group = groupedFilters.get(groupKey) || [];
+      group.push(filter);
+      groupedFilters.set(groupKey, group);
+    }
+    let currentFilteredObjects = [...objects];
+    for (const filterGroup of groupedFilters.values()) {
+      if (currentFilteredObjects.length === 0) {
+        break;
+      }
+      const tempResults = [];
+      for (const filter of filterGroup) {
+        switch (filter.type) {
+          case "interval":
+            tempResults.push(
+              filterObjectByInterval(
+                currentFilteredObjects,
+                filter.name,
+                filter.value,
+              ),
+            );
+            break;
+          case "dateAfter":
+            tempResults.push(
+              filterObjectByDateAfter(
+                currentFilteredObjects,
+                filter.name,
+                filter.value,
+              ),
+            );
+            break;
+          case "matchId":
+            tempResults.push(
+              filterObjectById(
+                currentFilteredObjects,
+                filter.name,
+                filter.value,
+              ),
+            );
+            break;
+          case "matchType":
+            tempResults.push(
+              filterObjectByType(currentFilteredObjects, filter.value),
+            );
+            break;
+          case "exact":
+            tempResults.push(
+              filterObjectByNamedValue(
+                currentFilteredObjects,
+                filter.name,
+                filter.value,
+              ),
+            );
+            break;
+          default:
+            tempResults.push(
+              filterObjectByValue(currentFilteredObjects, filter.value),
+            );
+        }
+      }
+      currentFilteredObjects = [...tempResults.flat()];
+    }
+    return currentFilteredObjects;
+  }
+  protected _handleClickEvent(originalObj: Resource) {
+    this.dispatchEvent(new CustomEvent("clicked", { detail: originalObj }));
+  }
+  willUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has("objects") || changedProperties.has("search")) {
+      if (this.objects) {
+        this._displayObjects = this.filter(this.objects, this.search);
+      } else {
+        this._displayObjects = [];
+      }
+      this.dispatchEvent(
+        new CustomEvent("result-count", {
+          detail: this._displayObjects.length,
+        }),
+      );
+    }
+  }
+  render() {
+    if (!this._displayObjects || this._displayObjects.length === 0) {
+      return nothing;
+    }
+    return html`<div class="card-grid card-grid-vertical">
+      ${this._displayObjects.map((displayObj) => {
+        const tags = [
+          {
+            name: `${displayObj.facts.length} ${displayObj.facts.length > 1 ? msg("facts") : msg("fact")}`,
+            type: "information",
+          },
+        ];
+        return html`<tems-card-catalog
+          .object=${import.meta.env.DEV ? displayObj : nothing}
+          type=${"bill-image"}
+          .tags=${tags}
+          .header=${displayObj.name || nothing}
+          .content=${displayObj.description || nothing}
+          date=${displayObj.updated_at || nothing}
+          @click=${() => this._handleClickEvent(displayObj)}
+        ></tems-card-catalog>`;
+      })}
+    </div>`;
+  }
+}

package/src/components/modal/ds4go-fact-bundle-modal.ts ADDED Viewed

@@ -0,0 +1,82 @@
+import { ComponentObjectHandler } from "@helpers";
+import { localized, msg } from "@lit/localize";
+import type { Resource } from "@src/component";
+import ModalStyle from "@styles/modal/ds4go-fact-bundle-modal.scss?inline";
+import { css, html, nothing, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+@customElement("ds4go-fact-bundle-modal")
+@localized()
+export class Ds4goFactBundleModal extends ComponentObjectHandler {
+  static styles = css`
+    ${unsafeCSS(ModalStyle)}
+  `;
+  @property({ attribute: false, type: Object })
+  object: Resource = { "@id": "" };
+  _closeModal() {
+    this.dispatchEvent(new CustomEvent("close"));
+  }
+  render() {
+    return html`<div class="modal">
+      <div class="topbar">
+        <tems-button
+          @click=${this._closeModal}
+          type="outline-gray"
+          .iconLeft=${html`<icon-material-symbols-close-rounded></icon-material-symbols-close-rounded>`}
+        ></tems-button>
+      </div>
+      <div class="modal-content-wrapper">
+        <div class="modal-box">
+          <div class="modal-content">
+            <tems-division type="h3"
+              ><div>${String(this.object.name)}</div></tems-division
+            >
+            <tems-division type="body-m"
+              ><div>${String(this.object.description)}</div></tems-division
+            >
+            <tems-division type="h4"
+              ><div>${msg("All facts in this bundle")}</div></tems-division
+            >
+            <div class="card-grid card-grid-vertical">
+              ${this.object.facts.map((fact: Resource) => {
+                const tags = fact.categories.map((c: Resource) => ({
+                  name: c.name,
+                  type: "information",
+                }));
+                if (tags.length > 3) {
+                  const overflowTags = tags.length - 3;
+                  tags.splice(3, overflowTags);
+                  tags.push({
+                    name: `+${overflowTags} ${msg("more")}`,
+                    type: "information",
+                  });
+                }
+                return html`<tems-card-catalog
+                  .object=${import.meta.env.DEV ? fact : nothing}
+                  .tags=${tags}
+                  .header=${fact.name || nothing}
+                  .content=${fact.description || nothing}
+                  date=${fact.updated_at || nothing}
+                ></tems-card-catalog>`;
+              })}
+            </div>
+            <tems-division type="body-sm"
+              ><div>
+                <div>
+                  ${msg("Bundle created on")} ${String(this.object.created_at)}
+                </div>
+                <div>
+                  ${msg("Bundle updated on")} ${String(this.object.updated_at)}
+                </div>
+              </div></tems-division
+            >
+          </div>
+        </div>
+      </div>
+    </div>`;
+  }
+}