@lobb-js/studio 0.1.31

package/src/stories/examples/Page.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import './page.css';
+  import Header from './Header.svelte';
+
+  let user = $state<{ name: string }>();
+</script>
+
+<article>
+  <Header
+    {user}
+    onLogin={() => (user = { name: 'Jane Doe' })}
+    onLogout={() => (user = undefined)}
+    onCreateAccount={() => (user = { name: 'Jane Doe' })}
+  />
+
+  <section class="storybook-page">
+    <h2>Pages in Storybook</h2>
+    <p>
+      We recommend building UIs with a
+      <a
+        href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <strong>component-driven</strong>
+      </a>
+      process starting with atomic components and ending with pages.
+    </p>
+    <p>
+      Render pages with mock data. This makes it easy to build and review page states without
+      needing to navigate to them in your app. Here are some handy patterns for managing page data
+      in Storybook:
+    </p>
+    <ul>
+      <li>
+        Use a higher-level connected component. Storybook helps you compose such data from the
+        "args" of child component stories
+      </li>
+      <li>
+        Assemble data in the page component from your services. You can mock these services out
+        using Storybook.
+      </li>
+    </ul>
+    <p>
+      Get a guided tutorial on component-driven development at
+      <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+        Storybook tutorials
+      </a>
+      . Read more in the
+      <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
+      .
+    </p>
+    <div class="tip-wrapper">
+      <span class="tip">Tip</span>
+      Adjust the width of the canvas with the
+      <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0
+            01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0
+            010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+            id="a"
+            fill="#999"
+          />
+        </g>
+      </svg>
+      Viewports addon in the toolbar
+    </div>
+  </section>
+</article>

package/src/stories/examples/button.css

@@ -0,0 +1,30 @@
+.storybook-button {
+  display: inline-block;
+  cursor: pointer;
+  border: 0;
+  border-radius: 3em;
+  font-weight: 700;
+  line-height: 1;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+.storybook-button--primary {
+  background-color: #555ab9;
+  color: white;
+}
+.storybook-button--secondary {
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+  background-color: transparent;
+  color: #333;
+}
+.storybook-button--small {
+  padding: 10px 16px;
+  font-size: 12px;
+}
+.storybook-button--medium {
+  padding: 11px 20px;
+  font-size: 14px;
+}
+.storybook-button--large {
+  padding: 12px 24px;
+  font-size: 16px;
+}

package/src/stories/examples/header.css

@@ -0,0 +1,32 @@
+.storybook-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-header svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header h1 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 6px 0 6px 10px;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.storybook-header button + button {
+  margin-left: 10px;
+}
+
+.storybook-header .welcome {
+  margin-right: 10px;
+  color: #333;
+  font-size: 14px;
+}

package/src/stories/examples/page.css

@@ -0,0 +1,68 @@
+.storybook-page {
+  margin: 0 auto;
+  padding: 48px 20px;
+  max-width: 600px;
+  color: #333;
+  font-size: 14px;
+  line-height: 24px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.storybook-page h2 {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 0 4px;
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  color: inherit;
+}
+
+.storybook-page ul {
+  margin: 1em 0;
+  padding-left: 30px;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 10px;
+  border-radius: 1em;
+  background: #e7fdd8;
+  padding: 4px 12px;
+  color: #357a14;
+  font-weight: 700;
+  font-size: 11px;
+  line-height: 12px;
+}
+
+.storybook-page .tip-wrapper {
+  margin-top: 40px;
+  margin-bottom: 40px;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 3px;
+  margin-right: 4px;
+  width: 12px;
+  height: 12px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}

package/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

package/svelte.config.js

@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}

package/todo.md

@@ -0,0 +1,24 @@
+# THE GOAL
+
+- instead of passing lobb components to the exntesions one by one and specifying it there .. you can just dynamically specify everything in a directory automatically. without adding each new or old component you forgot gradually
+- make the ui of lobb look a bit like the UI of zed text editor
+
+# high priority
+
+- when the screen gets smaller the sidebar in the collections page collapses and the main unselected part shows. thats not a good ui/ux. its better to do like the whatsup app. where it instead shows the sidebar as the main app and then you can click on pages and its going to slide from right to left
+- the mass delete doesnt show a notification when the operation isnt successfull
+- instead of removing the hash of generated js files that will be used by the imported extension views. its better to not remove it (because its a good way to not cache the js files when there is change to them). and just track those library files with their hashes in the build process and save them in a variable and update the import map you will add in the index.html accordangly. this way you dont need deal with the rist of using an outdated cached version of the `index-client.js` file for example
+- I think the best thing to do regarding the datatable compoenent is to unmount it and re-mounted again when a user navigates to another table. its the safest and a better thing todo for consistancies
+- try to make the extender vite extension work in dev mode too
+- you removed the hash part of the svelte libraries in order to be able to use them on the build version. check if you can use `?v=21212` instead to keep the ability of removing the cache. we need this to be mainly added for other components that use those svelte library internally whithin the app. the compiled extension components can add that easily by themselves
+- prepare the auth extension views in here to be properly ordered and organized for dynamic views and extensions that will be added dynamically from extensions
+- create e2e tests for the sort and the filters and the dataTable component because its not stable
+- make the row height in the tableData component smaller
+
+
+- added the ability to resize width of the columns and add specific width size based on the field type
+- make the cell hight smaller
+- sorting the id field doesnt work. check why
+- in order to have date and datetime field just add an addiotional property for the ui to treat them like that. you dont need to add another
+- think of the proper fonts
+- I need to show a meaningfull error message if the dashboard couldnt connect to the lobb server

package/tsconfig.app.json

@@ -0,0 +1,25 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "baseUrl": ".",
+    "paths": {
+      "$lib": ["./src/lib"],
+      "$lib/*": ["./src/lib/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "$lib": ["./src/lib"],
+      "$lib/*": ["./src/lib/*"]
+    }
+  }
+}

package/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite-plugin-contextual-lib.js

@@ -0,0 +1,66 @@
+import path from "path";
+import fs from "fs";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/**
+ * Vite plugin that resolves $lib imports contextually based on the importing file location.
+ *
+ * - Files inside the consuming project -> resolve to local ./src/lib
+ * - Files outside the project (e.g., Studio package) -> resolve to Studio's src/lib
+ *
+ * This allows shadcn components to work in both the Studio package and consuming projects
+ * without conflicts.
+ *
+ * @param {Object} options - Plugin options
+ * @param {string} [options.studioLibPath] - The path to the studio's src/lib directory (used for external imports)
+ * @returns {import('vite').Plugin}
+ */
+export function contextualLibAlias(options = {}) {
+  let projectRoot;
+  let localLibPath;
+  let studioLibPath;
+
+  return {
+    name: "contextual-lib-alias",
+    enforce: "pre",
+
+    configResolved(config) {
+      projectRoot = config.root;
+      localLibPath = path.resolve(projectRoot, "./src/lib");
+
+      // Use provided studioLibPath or default to this package's src/lib
+      studioLibPath = options.studioLibPath || path.resolve(__dirname, "./src/lib");
+    },
+
+    async resolveId(source, importer, options) {
+      if (!source.startsWith("$lib")) return null;
+      if (!importer) return null;
+
+      // Determine if the importing file is inside this project or external (e.g., Studio package)
+      const isLocalImport = importer.startsWith(projectRoot);
+
+      let targetPath;
+
+      if (isLocalImport && fs.existsSync(localLibPath)) {
+        // Local file importing $lib -> resolve to local src/lib
+        targetPath = localLibPath;
+      } else if (fs.existsSync(studioLibPath)) {
+        // External file (e.g., Studio) importing $lib -> resolve to Studio's src/lib
+        targetPath = studioLibPath;
+      } else {
+        // Neither path exists, let default resolution handle it
+        return null;
+      }
+
+      // Extract the import path after $lib (e.g., "$lib/store.svelte" -> "/store.svelte")
+      const importPath = source.slice(4); // Remove "$lib"
+      const resolvedPath = path.join(targetPath, importPath);
+
+      // Let Vite resolve the actual file (handles .js, .ts, .svelte extensions)
+      return this.resolve(resolvedPath, importer, { skipSelf: true, ...options });
+    }
+  };
+}

package/vite.build.svelte.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite'
+import { getSvelteExportedLibraries } from './vite_utils';
+
+const exports = await getSvelteExportedLibraries();
+
+// https://vite.dev/config/
+export default defineConfig({
+  build: {
+    outDir: 'dist/svelte',
+    lib: {
+      formats: ['es'],
+      entry: exports,
+    },
+    rollupOptions: {
+      treeshake: false,
+    },
+  },
+})

package/vite.config.ts

@@ -0,0 +1,84 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { getSvelteExportedLibraries, getSvelteVersion } from './vite_utils';
+import tailwindcss from '@tailwindcss/vite'
+
+const importMap: any = {
+  imports: {}
+};
+
+const svelteVersion = await getSvelteVersion()
+const svelteExports = await getSvelteExportedLibraries();
+const svelteExternals = Object.keys(svelteExports).map((item) => item.replaceAll("_", "/"));
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '')
+  return {
+    build: {
+      minify: true,
+      emptyOutDir: false,
+      rollupOptions: {
+        external: svelteExternals,
+      },
+    },
+    resolve: {
+      alias: {
+        $lib: path.resolve("./src/lib"),
+      },
+    },
+    plugins: [
+      tailwindcss(),
+      svelte(),
+      {
+        name: 'insert-import-map',
+        apply: 'serve',
+        async transformIndexHtml(html) {
+          for (let index = 0; index < svelteExternals.length; index++) {
+            const svelteLibName = svelteExternals[index];
+            const importValue = `/node_modules/.vite/deps/${svelteLibName.replaceAll("/", "_")}.js?v=${svelteVersion}`
+            importMap.imports[svelteLibName] = importValue;
+          }
+
+          const importMapScript = `<script type="importmap">${JSON.stringify(importMap)}</script>`;
+          return html.replace(
+            /<\/head>/,
+            `${importMapScript}</head>`
+          );
+        }
+      },
+      {
+        name: 'create-svelte-import-map',
+        apply: 'build',
+        async configResolved(config) {
+          for (let index = 0; index < svelteExternals.length; index++) {
+            const svelteLibName = svelteExternals[index];
+            const importValue = `/svelte/${svelteLibName.replaceAll("/", "_")}.js?v=${svelteVersion}`
+            importMap.imports[svelteLibName] = importValue;
+          }
+        }
+      },
+      {
+        name: 'insert-import-map',
+        apply: 'build',
+        transformIndexHtml(html) {
+          const importMapScript = `<script type="importmap">${JSON.stringify(importMap)}</script>`;
+          return html.replace(
+            /<\/head>/,
+            `${importMapScript}</head>`
+          );
+        }
+      },
+      {
+        name: 'insert-APP_ENV',
+        async transformIndexHtml(html) {
+          const importMapScript = `<script>window.APP_ENV = {LOBB_URL: "${mode === 'development' ? env.LOBB_URL ?? "" : "%LOBB_URL%"}"}</script>`;
+          return html.replace(
+            /<\/head>/,
+            `${importMapScript}</head>`
+          );
+        }
+      },
+    ],
+  }
+})

package/vite.extension.config.ts

@@ -0,0 +1,81 @@
+import path from "path";
+import fs from "fs";
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { getSvelteExportedLibraries } from "./vite_utils";
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
+
+const exports = await getSvelteExportedLibraries();
+const externals = Object.keys(exports).map((item) => item.replaceAll("_", "/"));
+
+const availableExtensions = fs.readdirSync("src/extensions").filter((name) => {
+  const fullPath = path.join("src/extensions", name);
+  return fs.statSync(fullPath).isDirectory();
+});
+
+if (availableExtensions.length > 1) {
+  throw new Error(
+    "The extensions directory should have only one extension when executing the npm `build_extension`",
+  );
+}
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      $lib: path.resolve("./src/lib"),
+    },
+  },
+  build: {
+    minify: true,
+    lib: {
+      entry: `src/extensions/${availableExtensions[0]}/index.ts`,
+      fileName: availableExtensions[0],
+      formats: ["es"],
+    },
+    rollupOptions: {
+      external: externals,
+      output: {
+        inlineDynamicImports: true,
+      },
+    },
+  },
+  plugins: [
+    svelte(),
+    cssInjectedByJsPlugin(),
+    {
+      name: "vite-plugin-generate-dashboard-json",
+      apply: "build",
+      closeBundle() {
+        const distDir = path.resolve(__dirname, "dist");
+        const extensionFilePath = path.join(
+          distDir,
+          `${availableExtensions[0]}.js`,
+        );
+        const outputJsonPath = path.join(__dirname, "../dashboard.json");
+
+        if (!fs.existsSync(extensionFilePath)) {
+          console.warn(
+            `⚠️ ${availableExtensions[0]}.js not found in dist directory.`,
+          );
+          return;
+        }
+
+        if (!fs.existsSync(outputJsonPath)) {
+          console.warn(
+            `Couldn't find the dashboard.json file in the upper directory (it indicates that this lobb studio project is not inside an extension).`,
+          );
+          return;
+        }
+
+        const jsContent = fs.readFileSync(extensionFilePath, "utf-8");
+        const json = {
+          extension: jsContent,
+        };
+        fs.writeFileSync(outputJsonPath, JSON.stringify(json, null, 2));
+        console.log(
+          `✅ the dashboard.json of the (${availableExtensions[0]}) extension was overwritten successfully`,
+        );
+      },
+    },
+  ],
+});

package/vite_utils.ts

@@ -0,0 +1,28 @@
+import fs from 'fs/promises';
+import path from 'path';
+
+export async function getSvelteExportedLibraries() {
+    const svelteLocation = 'node_modules/svelte';
+    const sveltePackage = await fs.readFile(`${svelteLocation}/package.json`, 'utf-8');
+    const metadata = JSON.parse(sveltePackage);
+    
+    const svelteExports: any = {};
+    for (const [key, value] of Object.entries(metadata.exports)) {
+      const svelteLibName = key.replace(".", 'svelte');
+      const editedSvelteLibName = svelteLibName.replaceAll("/", '_');
+      if (value.browser) {
+        svelteExports[editedSvelteLibName] = path.resolve(svelteLocation, value.browser);
+      } else if (value.default) {
+        svelteExports[editedSvelteLibName] = path.resolve(svelteLocation, value.default);
+      }
+    }
+
+    return svelteExports;
+}
+
+export async function getSvelteVersion() {
+    const svelteLocation = 'node_modules/svelte';
+    const sveltePackage = await fs.readFile(`${svelteLocation}/package.json`, 'utf-8');
+    const metadata = JSON.parse(sveltePackage);
+    return metadata.version;
+}

package/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser-playwright" />