npm - @startinblox/boilerplate - Versions diffs - 3.0.0 - Mend

@startinblox/boilerplate 3.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 (54) hide show

package/.gitlab-ci.yml +57 -0
package/.storybook/main.ts +15 -0
package/.storybook/preview-head.html +8 -0
package/.storybook/preview.ts +22 -0
package/LICENSE +21 -0
package/README.md +85 -0
package/biome.json +39 -0
package/cypress/component/solid-boilerplate.cy.ts +9 -0
package/cypress/cypress.d.ts +1 -0
package/cypress/support/component-index.html +12 -0
package/cypress/support/component.ts +17 -0
package/cypress.config.ts +11 -0
package/dist/boilerplate.css +1 -0
package/dist/index.js +1213 -0
package/lit-localize.json +15 -0
package/locales/en.xlf +13 -0
package/package.json +92 -0
package/postcss.config.js +8 -0
package/src/component.d.ts +161 -0
package/src/components/solid-boilerplate.ts +79 -0
package/src/components/ui/sample-object.ts +37 -0
package/src/components/ui/sample-objects.ts +40 -0
package/src/context.json +1 -0
package/src/helpers/components/componentObjectHandler.ts +100 -0
package/src/helpers/components/componentObjectsHandler.ts +44 -0
package/src/helpers/components/orbitComponent.ts +241 -0
package/src/helpers/components/setupCacheInvalidation.ts +37 -0
package/src/helpers/components/setupCacheOnResourceReady.ts +32 -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 +41 -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 +7 -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/component-sample.scss +4 -0
package/src/styles/index.scss +16 -0
package/stories/sample-objects.stories.ts +47 -0
package/tsconfig.json +36 -0
package/vite.config.ts +44 -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,13 @@
+<?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="se975788b1544119d">
+  <source>Here are all of our objects:</source>
+</trans-unit>
+<trans-unit id="s9cb0b52fd65ea225">
+  <source>Sample object named: <x id="0" equiv-text="${this.object.name}"/></source>
+</trans-unit>
+</body>
+</file>
+</xliff>

package/package.json ADDED Viewed

@@ -0,0 +1,92 @@
+{
+  "name": "@startinblox/boilerplate",
+  "version": "3.0.0",
+  "description": "Startin'blox Boilerplate",
+  "main": "dist/index.js",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://git.startinblox.com/components/solid-boilerplate.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.2",
+    "autoprefixer": "^10.4.21",
+    "cssnano": "^7.0.6",
+    "lit": "^3.2.1",
+    "postcss": "^8.5.3",
+    "postcss-preset-env": "^9.6.0",
+    "postcss-scss": "^4.0.9",
+    "sass": "^1.86.0",
+    "unplugin-icons": "^0.19.3",
+    "vite": "^6.2.2"
+  },
+  "devDependencies": {
+    "@lit/localize-tools": "^0.8.0",
+    "@storybook/addon-essentials": "^8.6.7",
+    "@storybook/blocks": "^8.5.8",
+    "@storybook/web-components": "^8.5.8",
+    "@storybook/web-components-vite": "^8.6.7",
+    "cypress": "^14.2.0",
+    "cypress-ct-lit": "^1.0.0",
+    "lorem-ipsum": "^2.0.8",
+    "storybook": "^8.6.7"
+  }
+}

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,161 @@
+/// <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;
+}
+type Context = Record<string, string | { "@id": string }>;
+type Permission = "add" | "delete" | "change" | "control" | "view" | string;
+type DateTime = string;
+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>;
+}
+interface Resource extends LimitedResource {
+  [key: string]: any;
+}
+interface UnknownResource {
+  [key: string]: any;
+}
+interface Container<T> extends Resource {
+  "ldp:contains": T[];
+}
+type ProxyValue<T> = T extends Array<infer U> ? U[] : Resource & T;
+interface User extends Resource {
+  account?: Account;
+  first_name?: string;
+  last_name?: string;
+  name?: string;
+  username?: string;
+  email?: string;
+}
+interface Account extends Resource {
+  picture?: string | null;
+}
+interface PropertiesPicker {
+  key: string;
+  value: string;
+  cast?: function;
+  expand?: boolean;
+}
+type TemplateResultOrSymbol = TemplateResult | symbol;
+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/solid-boilerplate.ts ADDED Viewed

@@ -0,0 +1,79 @@
+import { css, html, nothing } from "lit";
+import { customElement } from "lit/decorators.js";
+import { Task } from "@lit/task";
+import type { PropertiesPicker } from "@src/component";
+import "@src/initializer";
+import * as utils from "@helpers";
+@customElement("solid-boilerplate")
+export class SolidBoilerplate extends utils.OrbitComponent {
+  async _afterAttach() {
+    // Eg. https://api.server/some-keyword/1/ should trigger an update:
+    utils.setupCacheInvalidation(this, {
+      keywords: ["some-keyword", "for-invalidating", "cache"],
+    });
+    return Promise.resolve();
+  }
+  static styles = css`
+    div {
+      background-color: red;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  `;
+  cherryPickedProperties: PropertiesPicker[] = [
+    { key: "name", value: "name" },
+  ];
+  _getResource = new Task(this, {
+    task: async ([dataSrc]) => {
+      if (
+        !dataSrc ||
+        !this.orbit ||
+        (!this.noRouter &&
+          this.route &&
+          this.currentRoute &&
+          !this.route.startsWith(this.currentRoute))
+      )
+        return;
+      if (!this.hasCachedDatas || this.oldDataSrc !== dataSrc) {
+        if (!dataSrc) return;
+        this.datas = await this._getProxyValue(dataSrc);
+        this.hasCachedDatas = true;
+      }
+      if (this.oldDataSrc !== dataSrc) {
+        this.oldDataSrc = dataSrc;
+      }
+      return utils.sort(this.datas, "name", "asc");
+    },
+    args: () => [this.dataSrc, this.caching, this.currentRoute],
+  });
+  render() {
+    return (
+      this.gatekeeper() ||
+      this._getResource.render({
+        pending: () => html`<solid-loader></solid-loader>`,
+        complete: (datas) => {
+          if (!datas) {
+            return nothing;
+          }
+          return html`<div>
+            <sample-objects .objects=${datas}></sample-objects>
+          </div>`;
+        },
+      })
+    );
+  }
+}

package/src/components/ui/sample-object.ts ADDED Viewed

@@ -0,0 +1,37 @@
+import { localized, msg, str } from "@lit/localize";
+import { css, html, nothing, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "@src/initializer";
+import { ComponentObjectHandler } from "@helpers";
+import type { LimitedResource } from "@src/component";
+import ComponentStyle from "@styles/component-sample.scss?inline";
+export type ComponentProps = LimitedResource & {
+  name?: string;
+};
+@customElement("sample-object")
+@localized()
+export class SampleObject extends ComponentObjectHandler {
+  static styles = css`
+    ${unsafeCSS(ComponentStyle)}
+  `;
+  @property({ attribute: false, type: Object })
+  object: ComponentProps = { "@id": "" };
+  render() {
+    // Eg. reject object if its type is "some:Type"
+    if (this.isType("some:Type")) {
+      return nothing;
+    }
+    // Eg. use localization to display object's name
+    return html`<li>
+      ${msg(str`Sample object named: ${this.object.name}`)}
+    </li>`;
+  }
+}

package/src/components/ui/sample-objects.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import { localized, msg } from "@lit/localize";
+import { css, html, nothing, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "@src/initializer";
+import { ComponentObjectsHandler } from "@helpers";
+import type { LimitedResource } from "@src/component";
+import ComponentStyle from "@styles/component-sample.scss?inline";
+export type ComponentProps = LimitedResource & {
+  name?: string;
+};
+@customElement("sample-objects")
+@localized()
+export class SampleObjects extends ComponentObjectsHandler {
+  static styles = css`
+    ${unsafeCSS(ComponentStyle)}
+  `;
+  @property({ attribute: false, type: Object })
+  objects: ComponentProps[] = [];
+  render() {
+    // Eg. reject if any object has a type "some:Type"
+    if (this.hasType("some:Type")) {
+      return nothing;
+    }
+    // Eg. display a sample-object for each object
+    return html`${msg("Here are all of our objects:")}<br />
+      <ul>
+        ${this.objects.map(
+          (obj) => html`<sample-object .object=${obj}></sample-object>`
+        )}
+      </ul>`;
+  }
+}

package/src/context.json ADDED Viewed

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

package/src/helpers/components/componentObjectHandler.ts ADDED Viewed

@@ -0,0 +1,100 @@
+import type {
+  LimitedResource,
+  Resource,
+  TemplateResultOrSymbol,
+} from "@src/component";
+import { LitElement, nothing } from "lit";
+import * as rdf from "@src/initializer";
+const rdfs = Object.values(rdf);
+export class ComponentObjectHandler extends LitElement {
+  object?: LimitedResource = {
+    "@id": ""
+  };
+  isType = (type: string, obj: Resource = (this.object as Resource)) => {
+    const typeValue = obj["@type"];
+    if (Array.isArray(typeValue)) {
+      return typeValue.includes(type);
+    }
+    if (typeof typeValue === "string") {
+      return typeValue === type;
+    }
+    return false;
+  };
+  private getNestedProperty(path: string, obj: Resource = (this.object as Resource)): any {
+    return path.split(".").reduce((subObj: any, key) => {
+      if (subObj === undefined) {
+        return undefined;
+      }
+      const arrayMatch = key.match(/(.*)\[(.*)\]/);
+      if (arrayMatch) {
+        const baseKey = arrayMatch[1];
+        const index = arrayMatch[2];
+        const array = subObj[baseKey];
+        if (!Array.isArray(array)) {
+          return undefined;
+        }
+        if (index === "") {
+          if (array.length > 0) {
+            return array;
+          }
+          return undefined;
+        }
+        const numericIndex = Number.parseInt(index, 10);
+        if (
+          Number.isNaN(numericIndex) ||
+          numericIndex < 0 ||
+          numericIndex >= array.length
+        ) {
+          return undefined;
+        }
+        return subObj[baseKey][numericIndex];
+      }
+      return subObj && subObj[key] !== "undefined" ? subObj[key] : undefined;
+    }, obj);
+  }
+  renderTemplateWhenWith(
+    requiredProperties: (string | string[])[],
+    template: () => TemplateResultOrSymbol,
+    obj: Resource = (this.object as Resource)
+  ): TemplateResultOrSymbol {
+    const tester = (
+      property: string | string[],
+      cb: (some: string) => boolean
+    ) =>
+      Array.isArray(property)
+        ? property.some((subProp) => cb(subProp))
+        : cb(property);
+    const typeProperties = requiredProperties.filter((property) =>
+      tester(property, (p) => rdfs.includes(p))
+    );
+    const keyProperties = requiredProperties.filter((property) =>
+      tester(property, (p) => !rdfs.includes(p))
+    );
+    if (
+      keyProperties.every((property) =>
+        tester(property, (p) => this.getNestedProperty(p, obj))
+      ) &&
+      typeProperties.every((property) =>
+        tester(property, (p) => this.isType(p, obj))
+      )
+    ) {
+      return template.call(this);
+    }
+    return nothing;
+  }
+}

package/src/helpers/components/componentObjectsHandler.ts ADDED Viewed

@@ -0,0 +1,44 @@
+import type { Resource, TemplateResultOrSymbol } from "@src/component";
+import { LitElement, nothing } from "lit";
+import * as rdf from "@src/initializer";
+import { property } from "lit/decorators.js";
+const rdfs = Object.values(rdf);
+export class ComponentObjectsHandler extends LitElement {
+  @property({ attribute: false })
+  objects?: Resource[] = [];
+  hasType = (type: string, objs: Resource[] = this.objects as Resource[]) => {
+    const typeValue = new Set(objs.flatMap((o) => o["@type"]));
+    return typeValue.has(type);
+  };
+  renderTemplateWhenWith(
+    requiredProperties: (string | string[])[],
+    template: () => TemplateResultOrSymbol,
+    objs: Resource[] = this.objects as Resource[]
+  ): TemplateResultOrSymbol {
+    const tester = (
+      property: string | string[],
+      cb: (some: string) => boolean
+    ) =>
+      Array.isArray(property)
+        ? property.some((subProp) => cb(subProp))
+        : cb(property);
+    const typeProperties = requiredProperties.filter((property) =>
+      tester(property, (p) => rdfs.includes(p))
+    );
+    if (
+      typeProperties.every((property) =>
+        tester(property, (p) => this.hasType(p, objs))
+      )
+    ) {
+      return template.call(this);
+    }
+    return nothing;
+  }
+}