@startinblox/components-ds4go 1.0.0

package/src/mocks/user.mock.ts

@@ -0,0 +1,67 @@
+import { dataBuilder } from "@helpers/datas/dataBuilder";
+import { lorem } from "@helpers/ui/lipsum";
+import type { User } from "@src/component";
+
+export const user: User = {
+  "@id": "_:b1",
+  first_name: "John",
+  last_name: "Doe",
+  username: "johndoe42",
+  email: "john@doe.com",
+  account: {
+    "@id": "_:b2",
+    picture: "https://placehold.co/30x30",
+    user: {
+      "@id": "_b:1",
+      "@type": "foaf:user",
+      "@context": { get_full_name: "rdfs:label" },
+    },
+  },
+  name: "John Doe",
+  inbox: { "@id": "_:b3" },
+  "@type": "foaf:user",
+  "@context": [
+    "https://cdn.startinblox.com/owl/context.jsonld",
+    { get_full_name: "rdfs:label" },
+  ],
+  permissions: ["view", "add", "control", "delete", "change"],
+};
+
+export const userWithoutPicture = dataBuilder(user, ["account.picture"]);
+
+export const userWithoutEmail = dataBuilder(user, ["email"]);
+
+export const minimalUser = dataBuilder(user, [
+  "first_name",
+  "last_name",
+  "email",
+  "account.picture",
+  "name",
+]);
+
+export const get_random_user = (): User => {
+  const removables: string[] = [];
+  const replacements: User = {
+    "@id": `store://local.sample-object/${Math.floor(Math.random() * 1000)}/`,
+    first_name: lorem.generateWords(1),
+    last_name: lorem.generateWords(1),
+    username: lorem.generateWords(1).toLocaleLowerCase(),
+    email: `${lorem.generateWords(1).toLocaleLowerCase()}@example.com`,
+    name: "",
+  };
+  replacements.name = `${replacements.first_name} ${replacements.last_name}`;
+  const removableGenerator = (key: string) => {
+    // Between 0 and 25% chance
+    if (Math.random() < Math.random() * 0.25) {
+      removables.push(key);
+    }
+  };
+  removableGenerator("account");
+  removableGenerator("first_name");
+  removableGenerator("last_name");
+  removableGenerator("name");
+  removableGenerator("email");
+  removableGenerator("username");
+
+  return dataBuilder(user, removables, replacements, true) as User;
+};

package/src/styles/_helpers/flex.scss

@@ -0,0 +1,39 @@
+// Global flex utility classes
+.flex {
+  display: flex;
+  &.flex-row {
+    flex-direction: row;
+  }
+  &.flex-column {
+    flex-direction: column;
+  }
+  &.wrap {
+    flex-wrap: wrap;
+  }
+  &.flex-1 {
+    flex: 1;
+  }
+  &.half {
+    flex-basis: 50%;
+  }
+  .half {
+    flex-basis: 50%;
+  }
+  &.justify-content-center{
+    justify-content: center;
+  }
+  &.justify-content-space-between{
+    justify-content: space-between;
+  }
+  &.align-items-center{
+    align-items: center;
+  }
+  &.align-items-flex-start{
+    align-items: flex-start;
+  }
+  
+}
+
+.full-width {
+  width: 100%;
+}

package/src/styles/index.scss

@@ -0,0 +1,14 @@
+@charset "UTF-8";
+@use "sass:meta";
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+
+:root {
+  --font-family: "Inter", sans-serif;
+  --color-text: #181d27;
+  --color-primary: #001aff;
+  --color-secondary: #001aff;
+  --color-third: #e4f0ff;
+  --color-heading: #181d27;
+  font-family: var(--font-family);
+}

package/src/styles/modal/ds4go-fact-bundle-modal.scss

@@ -0,0 +1,89 @@
+@use "sass:meta";
+
+@include meta.load-css("../_helpers/flex");
+
+.modal {
+  width: 90vw;
+  height: 90vh;
+  border-radius: var(--border-radius-lg);
+  background-color: var(--color-surface-primary);
+  border: var(--border-width-sm) solid var(--color-border-primary);
+  display: flex;
+  flex-direction: column;
+  gap: var(--scale-600);
+  padding: var(--scale-600) var(--scale-900);
+
+  color: var(--color-text-body);
+  font-family: var(--font-family-body);
+  font-size: var(--typography-size-body-md);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-body-md);
+  letter-spacing: var(--font-letter-spacing-default);
+
+  .topbar {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: var(--scale-400);
+
+    tems-button:nth-child(2) {
+      margin-left: auto;
+    }
+  }
+
+  .modal-content-wrapper {
+    overflow: hidden;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .modal-box {
+      flex: 1;
+      display: flex;
+      overflow-y: scroll;
+      overflow-x: hidden;
+    }
+
+    .modal-content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--scale-400);
+      height: fit-content;
+      width: 100%;
+    }
+
+    tems-division {
+      width: fit-content;
+      div {
+        display: block;
+        height: auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .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;
+    }
+  }
+}
+
+@media screen and (min-width: 1100px) {
+  div.modal {
+    width: 80vw;
+    height: 80vh;
+  }
+}

package/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["./src/components/*"],
+      "@cypress/*": ["./cypress/*"],
+      "@helpers/*": ["./src/helpers/*"],
+      "@helpers": ["./src/helpers/index.ts"],
+      "@mocks/*": ["./src/mocks/*"],
+      "@stories/*": ["./stories/*"],
+      "@styles/*": ["./src/styles/*"],
+      "@src/*": ["./src/*"]
+    },
+    "target": "ES2020",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "types": ["cypress", "node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "cypress/**/*.ts", "stories/**/*.ts", "*.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,48 @@
+import { resolve } from "node:path";
+import Icons from "unplugin-icons/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  css: {
+    preprocessorOptions: {
+      scss: {
+        quietDeps: true,
+      },
+    },
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      name: JSON.stringify(process.env.npm_package_name),
+      fileName: () => "index.js",
+      formats: ["es"],
+    },
+    target: "esnext",
+  },
+  plugins: [
+    Icons({
+      compiler: "web-components",
+      webComponents: {
+        autoDefine: true,
+      },
+      autoInstall: true,
+      scale: 1,
+    }),
+  ],
+  resolve: {
+    alias: {
+      "@components": "/src/components",
+      "@cypress": "/cypress",
+      "@helpers": "/src/helpers",
+      "@mocks": "/src/mocks",
+      "@stories": "/stories",
+      "@styles": "/src/styles",
+      "@src": "/src",
+      "@startinblox/core":
+        "https://cdn.jsdelivr.net/npm/@startinblox/core@beta/dist/index.js",
+      // Node.js polyfills for sib-core
+      stream: "stream-browserify",
+      buffer: "buffer",
+    },
+  },
+});