@invopop/popui 0.0.1

package/README.md

@@ -0,0 +1,146 @@
+# Invopop UI Kit
+
+Set of reusable components to be used inside Console UI and other Invopop Microfrontends.
+
+Everything inside `src/lib` is part of the library, everything else will be omitted on the NPM package.
+
+## Runing Storybook
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development storybook server:
+
+```bash
+npm run storybook
+```
+
+> For using a different `accent` color for some components you can set the `--workspace-accent-color:` CSS variable placed in `.storybook/variables.css` file.
+
+## Compiling Web Components
+
+The following command will compile a file called `dist/invopop-web-components.js` that can be imported on any external project.
+
+```bash
+npm run build-web-components
+```
+
+A test HTML file using this script can be found at `src/wbc-preview/index.html`
+
+## Building the Svelte Library
+
+To build the Svelte library:
+
+```bash
+npm run package
+```
+
+To create a production version of the showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy the app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+
+## Publishing the Svelte Library
+
+To publish the library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```
+
+## Building the Web Components Library
+
+To build the Web Components library:
+
+```bash
+npm run build-web-components
+```
+
+This will generate a `/dist/index.js` file that you can include on any HTML to test. There is a ready-to-use HTML file with an example of any of the components located in `/src/wbc-preview/index.html`
+
+## Publishing the Web Components Library
+
+To publish the Web Components library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish-wbc
+```
+
+## Using the Web Components Library in your module
+
+Include the CDN script in your HTML file
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@invopop/web-components@0.0.1/index.js" defer></script>
+```
+
+Use any of the components available
+
+```html
+<ui-button>Default Button</ui-button>
+```
+
+You can pass props and listen to events
+
+```html
+<ui-button onClick="alert('button click')" type="primary">Primary Button</ui-button>
+```
+
+## Available Web Components
+
+> NOTE: Due to web component limitations booleans need to be passed as strings ie: "true", other structures like objects or arrays need to be passed as JSON.stringify()
+
+| Component          | Events Emitted | Props Accepted                                                                     |
+| ------------------ | -------------- | ---------------------------------------------------------------------------------- |
+| `ui-button`        | `@click`       | `type`: 'default', 'primary', 'secondary', 'danger', 'dark'` (default: 'default')  |
+|                    |                | `disabled`: boolean (default: false)                                               |
+|                    |                | `small`: boolean (default: false)                                                  |
+|                    |                | `icon`: Cog6Tooth (Heroicons library name) (default: undefined)                    |
+|                    |                | `iconPosition`: 'right', 'left' (default: left)                                    |
+|                    |                |                                                                                    |
+| `ui-button-file`   | `@click`       | `type`: 'default', 'primary', 'secondary', 'danger', 'dark'` (default: 'default')  |
+|                    |                | `disabled`: boolean (default: false)                                               |
+|                    |                | `name`: string (default: '')                                                       |
+|                    |                | `fullwidth`: boolean (default: false)                                              |
+|                    |                |                                                                                    |
+| `ui-checkbox`      | `@change`      | `checked`: boolean (default: false)                                                |
+|                    |                |                                                                                    |
+| `ui-input-search`  | `@input`       | `placeholder`: string (default: '')                                                |
+|                    |                | `shortcut`: string (default: '')                                                   |
+|                    |                |                                                                                    |
+| `ui-input-text`    | `@input`       | `id`: string (default: '')                                                         |
+|                    |                | `label`: string (default: '')                                                      |
+|                    |                | `placeholder`: string (default: '')                                                |
+|                    |                | `errorText`: string (default: '')                                                  |
+|                    |                | `disabled`: boolean (default: 'false')                                             |
+|                    |                |                                                                                    |
+| `ui-list-item`     | `@input`       | `value`: string (default: '')                                                      |
+|                    |                | `label`: string (default: '')                                                      |
+|                    |                |                                                                                    |
+| `ui-radio`         | `@change`      | `checked`: boolean (default: false)                                                |
+|                    |                |                                                                                    |
+| `ui-section`       |                | `title`: string (default: '')                                                      |
+|                    |                |                                                                                    |
+| `ui-select`        | `@change`      | `id`: string (default: '')                                                         |
+|                    |                | `name`: string (default: '')                                                       |
+|                    |                | `label`: string (default: '')                                                      |
+|                    |                | `placeholder`: string (default: '')                                                |
+|                    |                | `value`: string (default: '')                                                      |
+|                    |                | `icon`: Cog6Tooth (Heroicons library name) (default: undefined)                    |
+|                    |                | `disabled`: boolean (default: 'false')                                             |
+|                    |                | `disablePlaceholder`: boolean (default: 'false')                                   |
+|                    |                | `options`: string (default: '[]')                                                  |
+|                    |                |                                                                                    |
+| `ui-tag-search`    | `@clear`       | `label`: string (default: '')                                                      |
+|                    |                | `icon`: Cog6Tooth (Heroicons library name) (default: undefined)                    |
+|                    |                |                                                                                    |
+| `ui-tag-status`    |                | `label`: string (default: '')                                                      |
+|                    |                | `status`: 'default', 'success', 'warning', 'danger', 'orange' (default: 'default') |
+|                    |                |                                                                                    |
+| `ui-title-main`    |                | `title`: string (default: '')                                                      |
+|                    |                |                                                                                    |
+| `ui-title-section` |                | `title`: string (default: '')                                                      |
+|                    |                |                                                                                    |
+| `ui-toggle`        | `@change`      | `checked`: boolean (default: false)                                                |

package/dist/BaseButton.svelte

@@ -0,0 +1,107 @@
+<script>import clsx from "clsx";
+import { Icon } from "@steeze-ui/svelte-icon";
+import { createEventDispatcher } from "svelte";
+import { dispatchWcEvent } from "./wcdispatch.js";
+import { resolveIcon } from "./helpers.js";
+import ShortcutWrapper from "./ShortcutWrapper.svelte";
+const dispatch = createEventDispatcher();
+export let icon = void 0;
+export let iconTheme = "default";
+export let iconPosition = "left";
+export let type = "button";
+export let variant = "default";
+export let disabled = false;
+export let small = false;
+export let big = false;
+export let dangerIcon = false;
+export let shortcut = false;
+export let fullwidth = false;
+let resolvedIcon;
+$: {
+  resolveIcon(icon).then((icon2) => {
+    resolvedIcon = icon2;
+  });
+}
+$:
+  buttonStyles = clsx(
+    { "w-full": fullwidth },
+    { "opacity-30 pointer-events-none": disabled },
+    { "flex-row-reverse space-x-reverse": iconPosition === "right" },
+    { "bg-white": variant === "default" },
+    { "bg-workspace-accent": variant === "primary" },
+    { "bg-neutral-100 hover:bg-neutral-200 focus:bg-neutral-300": variant === "secondary" },
+    { "bg-danger-500": variant === "danger" },
+    { "text-sm rounded": small },
+    { "text-base rounded-md": !small },
+    { "p-1": small && !$$slots.default },
+    { "p-1.5": !small && !big && !$$slots.default },
+    { "p-2": big && !$$slots.default },
+    { "px-3": big && $$slots.default && !icon },
+    { "px-2": !big && $$slots.default && !icon },
+    { "pl-2 pr-2.5": big && $$slots.default && icon && iconPosition === "left" },
+    { "pl-1.5 pr-2": big && $$slots.default && icon && iconPosition === "right" },
+    { "pl-1.5 pr-2": !small && !big && $$slots.default && icon && iconPosition === "left" },
+    { "pl-2 pr-1.5": !small && !big && $$slots.default && icon && iconPosition === "right" },
+    { "py-1.5": big && $$slots.default },
+    { "py-1": !big && $$slots.default },
+    { "text-white": ["primary", "danger", "dark"].includes(variant) },
+    { "text-neutral-800": ["default", "secondary"].includes(variant) },
+    { "border border-white-10 hover:border-white-20 focus:border-white-40": variant === "dark" },
+    {
+      "border border-neutral-200 hover:bg-neutral-100 focus:border-neutral-300 focus:bg-neutral-200": variant === "default"
+    },
+    { "gap-1": icon && $$slots.default }
+  );
+$:
+  iconStyles = clsx(
+    {
+      "text-neutral-500": ["default", "secondary"].includes(variant) && $$slots.default && !dangerIcon
+    },
+    {
+      "text-neutral-800": ["default", "secondary"].includes(variant) && !$$slots.default && !dangerIcon
+    },
+    {
+      "text-white-70": !["default", "secondary"].includes(variant) && $$slots.default && !dangerIcon
+    },
+    {
+      "text-white": !["default", "secondary"].includes(variant) && !$$slots.default && !dangerIcon
+    },
+    { "text-danger-500": dangerIcon }
+  );
+$:
+  overlayClasses = clsx({
+    "rounded-md": !small,
+    rounded: small,
+    "group-hover:bg-black/[.16] group-active:bg-black/[.32]": ["primary", "danger"].includes(
+      variant
+    )
+  });
+function handleClick(event) {
+  if (event instanceof CustomEvent)
+    return;
+  dispatch("click");
+  dispatchWcEvent(event.target, "click");
+}
+</script>
+
+<button
+  {type}
+  {disabled}
+  class="{buttonStyles} flex items-center justify-center font-medium font-sans relative group tracking-tight"
+  {...$$restProps}
+  on:click|stopPropagation={handleClick}
+>
+  <span class="{overlayClasses} absolute inset-0" />
+  {#if resolvedIcon}
+    {#if shortcut}
+      <ShortcutWrapper>
+        <Icon src={resolvedIcon} theme={iconTheme} class="{iconStyles} h-4 w-4 z-10" />
+      </ShortcutWrapper>
+    {:else}
+      <Icon src={resolvedIcon} theme={iconTheme} class="{iconStyles} h-4 w-4 z-10" />
+    {/if}
+  {/if}
+  {#if $$slots.default}
+    <span class="z-10"><slot /></span>
+  {/if}
+</button>

package/dist/BaseButton.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import type { ButtonVariant, IconPosition, IconTheme } from './types.ts';
+import { type IconSource } from '@steeze-ui/svelte-icon';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        icon?: IconSource | string | undefined;
+        iconTheme?: IconTheme | undefined;
+        iconPosition?: IconPosition | undefined;
+        type?: 'button' | 'submit' | 'reset' | null | undefined;
+        variant?: ButtonVariant | undefined;
+        disabled?: boolean | undefined;
+        small?: boolean | undefined;
+        big?: boolean | undefined;
+        dangerIcon?: boolean | undefined;
+        shortcut?: boolean | undefined;
+        fullwidth?: boolean | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BaseButtonProps = typeof __propDef.props;
+export type BaseButtonEvents = typeof __propDef.events;
+export type BaseButtonSlots = typeof __propDef.slots;
+export default class BaseButton extends SvelteComponent<BaseButtonProps, BaseButtonEvents, BaseButtonSlots> {
+}
+export {};

package/dist/BaseCard.svelte

@@ -0,0 +1,50 @@
+<script>import TagBeta from "./TagBeta.svelte";
+export let imageUrl = "";
+export let imageAlt = "";
+export let title = "";
+export let description = "";
+export let type = "default";
+export let enabled = false;
+</script>
+
+<button
+  class="rounded-lg bg-white hover:bg-neutral-100 focus:bg-neutral-200 disabled:bg-neutral-50 disabled:pointer-events-none border border-neutral-100 p-3 flex flex-col min-w-[298px] min-h-[126px] text-left"
+  disabled={type === 'soon'}
+  on:click
+>
+  <div class="flex flex-col items-start justify-center space-y-2 w-full">
+    <div class="flex items-center justify-between w-full">
+      <div class="rounded-md bg-white border border-neutral-100 p-1.5">
+        <img class="h-5 w-5 flex-shrink-0" src={imageUrl} alt={imageAlt} />
+      </div>
+      <div class="flex items-center space-x-2">
+        {#if enabled}
+          <div
+            class="flex items-center space-x-1 rounded bg-neutral-50 border border-neutral-100 py-0.5 pl-1.5 pr-[5px] text-sm text-neutral-500 font-medium"
+          >
+            <div class="bg-positive-500 h-2 w-2 rounded-full" />
+            <span>Enabled</span>
+          </div>
+        {/if}
+        {#if type === 'beta'}
+          <TagBeta />
+        {:else if type === 'soon'}
+          <div
+            class="flex items-center space-x-1 rounded bg-neutral-50 border border-neutral-200 py-0.5 pl-1.5 pr-[5px] text-sm text-neutral-400 font-medium"
+          >
+            <span>Soon</span>
+          </div>
+        {/if}
+      </div>
+    </div>
+    <h3 class="truncate text-base font-medium text-neutral-800 tracking-tight">{title}</h3>
+  </div>
+  <p class="flex mt-0.5 text-base text-neutral-500 tracking-normal flex-1">
+    {description}
+  </p>
+  {#if $$slots.footer}
+    <div class="mt-5">
+      <slot name="footer" />
+    </div>
+  {/if}
+</button>

package/dist/BaseCard.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        imageUrl?: string | undefined;
+        imageAlt?: string | undefined;
+        title?: string | undefined;
+        description?: string | undefined;
+        type?: "default" | "soon" | "beta" | undefined;
+        enabled?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        footer: {};
+    };
+};
+export type BaseCardProps = typeof __propDef.props;
+export type BaseCardEvents = typeof __propDef.events;
+export type BaseCardSlots = typeof __propDef.slots;
+export default class BaseCard extends SvelteComponent<BaseCardProps, BaseCardEvents, BaseCardSlots> {
+}
+export {};

package/dist/BaseCounter.svelte

@@ -0,0 +1,16 @@
+<script>import clsx from "clsx";
+export let content;
+export let variant = "default";
+$:
+  styles = clsx(
+    { "bg-neutral-100": variant === "light" },
+    { "bg-neutral-200": variant === "default" },
+    { "bg-neutral-300": variant === "dark" }
+  );
+</script>
+
+<div
+  class="{styles} inline-flex items-center justify-center rounded p-[3px] text-neutral-500 text-sm font-medium h-4 min-w-[16px] tracking-wide tabular-nums slashed-zero lining-nums"
+>
+  {content}
+</div>

package/dist/BaseCounter.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        content: number;
+        variant?: "default" | "dark" | "light" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BaseCounterProps = typeof __propDef.props;
+export type BaseCounterEvents = typeof __propDef.events;
+export type BaseCounterSlots = typeof __propDef.slots;
+export default class BaseCounter extends SvelteComponent<BaseCounterProps, BaseCounterEvents, BaseCounterSlots> {
+}
+export {};

package/dist/BaseDropdown.svelte

@@ -0,0 +1,46 @@
+<script>import { offset, flip, shift } from "svelte-floating-ui/dom";
+import { createFloatingActions } from "svelte-floating-ui";
+import { clickOutside } from "./clickOutside.js";
+export let isOpen = false;
+export let fullWidth = false;
+export let placement = "bottom-end";
+const [floatingRef, floatingContent] = createFloatingActions({
+  strategy: "absolute",
+  placement,
+  middleware: [offset(6), flip(), shift()]
+});
+let closedFromClickOutside = false;
+export const toggle = () => {
+  isOpen = !isOpen;
+};
+</script>
+
+<div class="inline-flex" class:w-full={fullWidth}>
+  <button
+    class="text-left"
+    use:floatingRef
+    on:click|stopPropagation={async () => {
+      if (closedFromClickOutside) return
+      isOpen = !isOpen
+    }}
+    class:w-full={fullWidth}
+  >
+    <slot name="trigger" />
+  </button>
+  {#if isOpen}
+    <div
+      class="max-h-40 absolute z-40"
+      use:floatingContent
+      use:clickOutside
+      on:click_outside={() => {
+        closedFromClickOutside = true
+        setTimeout(() => {
+          closedFromClickOutside = false
+        }, 100)
+        isOpen = false
+      }}
+    >
+      <slot />
+    </div>
+  {/if}
+</div>

package/dist/BaseDropdown.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import { type Placement } from 'svelte-floating-ui/dom';
+declare const __propDef: {
+    props: {
+        isOpen?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+        placement?: Placement | undefined;
+        toggle?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        trigger: {};
+        default: {};
+    };
+};
+export type BaseDropdownProps = typeof __propDef.props;
+export type BaseDropdownEvents = typeof __propDef.events;
+export type BaseDropdownSlots = typeof __propDef.slots;
+export default class BaseDropdown extends SvelteComponent<BaseDropdownProps, BaseDropdownEvents, BaseDropdownSlots> {
+    get toggle(): () => void;
+}
+export {};

package/dist/BaseFlag.svelte

@@ -0,0 +1,14 @@
+<script>import { World } from "@invopop/ui-icons";
+import { Icon } from "@steeze-ui/svelte-icon";
+export let country = "";
+export let width = 12;
+$:
+  iso = country.toLowerCase();
+</script>
+
+{#if country === 'global'}
+  <Icon src={World} style={`width: ${width}px;`} />
+{:else}
+  <!-- https://github.com/HatScripts/circle-flags -->
+  <img src={`https://hatscripts.github.io/circle-flags/flags/${iso}.svg`} alt={country} {width} />
+{/if}

package/dist/BaseFlag.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        country?: string | undefined;
+        width?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BaseFlagProps = typeof __propDef.props;
+export type BaseFlagEvents = typeof __propDef.events;
+export type BaseFlagSlots = typeof __propDef.slots;
+export default class BaseFlag extends SvelteComponent<BaseFlagProps, BaseFlagEvents, BaseFlagSlots> {
+}
+export {};

package/dist/BaseTable.svelte

@@ -0,0 +1,148 @@
+<script>import { intersect } from "svelte-intersection-observer-action";
+import BaseTableHeader from "./BaseTableHeader.svelte";
+import { createEventDispatcher } from "svelte";
+import BaseCounter from "./BaseCounter.svelte";
+import BaseTableRow from "./BaseTableRow.svelte";
+import BaseTableCell from "./BaseTableCell.svelte";
+const dispatch = createEventDispatcher();
+const callback = (entry) => {
+  if (entry.intersectionRatio && entry.isIntersecting) {
+    dispatch("tableEndReached");
+  }
+};
+const intersectOptions = { callback };
+let metaKeyPressed = false;
+export let sortBy = "";
+export let sortDirection = "";
+export let fields = [];
+export let data = [];
+export let getActions = void 0;
+export let groupLabel = void 0;
+export let disableRowClick = false;
+export let hideCounter = false;
+export let freeWrap = false;
+$:
+  groupedData = groupData(data);
+$:
+  addExtraCell = getActions instanceof Function;
+function groupData(rows) {
+  if (rows.length === 0)
+    return [];
+  const groups = [];
+  rows.forEach((row) => {
+    const rowLabel = groupLabel instanceof Function ? groupLabel(row) : "";
+    const groupExist = groups.find((g) => g.label === rowLabel);
+    if (groupExist) {
+      groupExist.rows.push(row);
+    } else {
+      groups.push({ label: rowLabel, rows: [row] });
+    }
+  });
+  return groups;
+}
+</script>
+
+<svelte:window
+  on:keydown={(event) => {
+    metaKeyPressed = event.metaKey
+  }}
+  on:keyup={() => {
+    metaKeyPressed = false
+  }}
+/>
+
+<div class="w-full rounded-md md:border border-neutral-100 font-sans">
+  <table class="hidden md:table w-full rounded-md">
+    <thead>
+      <tr class="border-b border-neutral-100 relative">
+        {#each fields as field, i (i)}
+          <BaseTableHeader
+            isFirst={i === 0}
+            isLast={!addExtraCell && i === fields.length - 1}
+            {sortBy}
+            {sortDirection}
+            {field}
+            on:orderBy
+          />
+        {/each}
+        {#if addExtraCell}
+          <!-- if table has actions cell we need to add an extra header -->
+          <th scope="col" class="bg-white sticky top-0 z-10 rounded-tr-md" />
+        {/if}
+      </tr>
+    </thead>
+    <tbody>
+      {#each groupedData as group}
+        {#if group.label}
+          <tr>
+            <th
+              scope="colgroup"
+              colspan={fields.length + 1}
+              class="bg-neutral-50 px-3 py-1.5 text-left text-sm font-medium text-neutral-500 sticky top-11 tracking-normal border-t border-b border-neutral-100 h-8"
+            >
+              <span>{group.label}</span>
+              {#if !hideCounter}
+                <BaseCounter content={group.rows.length} />
+              {/if}
+            </th>
+          </tr>
+        {/if}
+        {#each group.rows as row}
+          <BaseTableRow
+            {row}
+            {fields}
+            {getActions}
+            {disableRowClick}
+            {freeWrap}
+            on:click={() => {
+              if (disableRowClick) return
+
+              if (metaKeyPressed) {
+                dispatch('rowNewTabClick', row)
+              } else {
+                dispatch('rowClick', row)
+              }
+            }}
+            on:contextmenu={() => {
+              dispatch('rowRightClick', row)
+            }}
+            on:action
+            on:copied
+          />
+        {/each}
+      {/each}
+    </tbody>
+  </table>
+  <div class="md:hidden space-y-3">
+    {#each groupedData as group}
+      {#each group.rows as row}
+        <button
+          class:cursor-default={disableRowClick}
+          class="w-full text-left border border-neutral-200 rounded"
+          on:click={() => {
+            if (disableRowClick) return
+
+            if (metaKeyPressed) {
+              dispatch('rowNewTabClick', row)
+            } else {
+              dispatch('rowClick', row)
+            }
+          }}
+        >
+          {#each fields as field, i (i)}
+            <BaseTableCell
+              tag="div"
+              currentIndex={i}
+              {field}
+              badge={field.helperBadge ? field.helperBadge(row) : null}
+              status={field.helperStatus ? field.helperStatus(row) : null}
+              data={field.formatter ? field.formatter(row) : row[field.slug] || ''}
+              on:copied
+            />
+          {/each}
+        </button>
+      {/each}
+    {/each}
+  </div>
+  <div use:intersect={intersectOptions} />
+</div>