@stubber/ui 1.1.1 → 1.3.0

package/README.md

@@ -4,8 +4,8 @@ This is a sveltekit library project that contains standardized UI components to
 
 # Getting Started
 
-- `npm i`
-- `npm run storybook`
+- `pnpm i`
+- `pnpm run storybook`
 
 # Publishing
 

package/dist/components/ProfileMenu.svelte

@@ -29,7 +29,7 @@
       <span slot="tooltip"> Copy stubberhandle </span>
     </Tooltip>
     <a class="mt-[17px] w-full" href={manageLink}>
-      <PrimaryButton label="Manage Stubber" variant="secondary-transparent" width="full" />
+      <PrimaryButton label="Personal Settings" variant="secondary-transparent" width="full" />
     </a>
   </div>
   <a href={documentationLink}>

package/dist/components/SideNav/SideNavExample.svelte

@@ -9,7 +9,7 @@
   import SideNavTitle from "./SideNavTitle.svelte";
 </script>
 
-<div class="p-4 bg-[#F0F6FC]">
+<div class="p-4 bg-[#FFFFFF] border-r border-suface-100 h-full w-[250px]">
   <SideNavTitle title="General" />
   <SideNavItem label="Recent" href="/" icon="far fa-home" />
   <SideNavItem label="Archive" href="/" icon="far fa-archive" />

package/dist/components/SideNav/SideNavItem.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { Label } from "@stubber/ui/label";
+  import { Button } from "@stubber/ui/button";
   export let label;
   export let href;
   export let icon;
@@ -13,30 +15,33 @@
   }
 </script>
 
-<!-- If $$slots.default == true, then it means this SideNavItem is a group item, i.e it has child elements in <slots/> -->
+<!-- If $slots.default == true, then it means this SideNavItem is a group item, i.e it has child elements in <slots/> -->
 
-<button
+<Button
   on:click={handle_click}
-  class="group h-10 my-2.5 w-full flex items-center {is_selected
-    ? 'bg-white'
-    : 'bg-transparent hover:bg-white hover:bg-opacity-[0.5]'} rounded-lg hover:bg active:bg-white"
+  variant="ghost"
+  class="group h-10 my-1 w-full flex items-center {is_selected
+    ? 'bg-surface-100'
+    : 'bg-transparent hover:bg-surface-100 hover:bg-opacity-[0.5]'} active:bg-surface-100"
 >
   {#if $$slots.default}
-    <div class="h-10 pl-2 w-2.5 flex items-center justify-center">
+    <div class="h-10 w-2.5 flex items-center justify-center">
       <i class="fas fa-caret-right {is_expanded ? 'rotate down' : 'rotate'}" />
     </div>
   {/if}
-  <a class="{$$slots.default ? '' : 'pl-2.5'} w-full flex items-center" {href}>
-    <div class="text-surface-900 w-fit flex items-center">
+  <a class="{$$slots.default ? '' : ''} w-full flex items-center" {href}>
+    <div class="text-surface-900 w-fit flex items-center gap-2">
       <div class="h-10 aspect-square flex items-center justify-center">
-        <i class={icon} />
+        <div class="bg-white rounded border w-7 h-7 flex items-center justify-center">
+          <i class="{icon} text-xs" />
+        </div>
       </div>
-      <span class="text-button font-normal">
+      <Label class=" font-medium">
         {label}
-      </span>
+      </Label>
     </div>
   </a>
-</button>
+</Button>
 {#if $$slots.default && is_expanded}
   <div class={indent_children === true ? "ml-4" : ""}>
     <slot />

package/dist/components/SideNav/SideNavTitle.svelte

@@ -1,7 +1,9 @@
 <script>
+  import { Label } from "@stubber/ui/label";
+
   export let title;
 </script>
 
 <div class="h-10 w-full flex items-center">
-  <h2 class="text-small font-normal text-surface-700">{title}</h2>
+  <Label class="ml-2 text-small font-medium text-surface-500">{title}</Label>
 </div>

package/dist/components/grid-background/grid-background.svelte

@@ -0,0 +1,149 @@
+<script>export let gridSize = 40;
+export let lineWidth = 1;
+export let lineColor = "#e2e8f0";
+export let lineOpacity = 0.3;
+export let highlightedCells = 0.05;
+export let cellColor = "#f1f5f9";
+export let cellOpacity = 0.3;
+export let showGradientOverlay = false;
+export let gradientOpacity = 0.7;
+import { onMount } from "svelte";
+let width;
+let height;
+let mounted = false;
+let canvas;
+let ctx;
+let resizeTimeout = null;
+let previousPositions = [];
+let transitionProgress = 1;
+let animationFrame = null;
+let highlightedPositions = [];
+function generateCells() {
+  if (!mounted || !width || !height) return;
+  const cols = Math.ceil(width / gridSize);
+  const rows = Math.ceil(height / gridSize);
+  const totalCells = cols * rows;
+  const highlightCount = Math.floor(totalCells * highlightedCells);
+  highlightedPositions = [];
+  const indices = /* @__PURE__ */ new Set();
+  while (indices.size < highlightCount) {
+    const randomCol = Math.floor(Math.random() * cols);
+    const randomRow = Math.floor(Math.random() * rows);
+    indices.add(`${randomCol}-${randomRow}`);
+  }
+  indices.forEach((idx) => {
+    const [col, row] = idx.split("-").map(Number);
+    highlightedPositions.push({
+      x: col * gridSize,
+      y: row * gridSize
+    });
+  });
+  renderGrid();
+}
+function renderGrid() {
+  if (!ctx || !width || !height) return;
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = cellColor;
+  if (transitionProgress < 1 && previousPositions.length > 0) {
+    ctx.globalAlpha = (1 - transitionProgress) * cellOpacity;
+    previousPositions.forEach((pos) => {
+      ctx.fillRect(pos.x, pos.y, gridSize, gridSize);
+    });
+  }
+  ctx.globalAlpha = transitionProgress < 1 ? transitionProgress * cellOpacity : cellOpacity;
+  highlightedPositions.forEach((pos) => {
+    ctx.fillRect(pos.x, pos.y, gridSize, gridSize);
+  });
+  ctx.globalAlpha = lineOpacity;
+  ctx.strokeStyle = lineColor;
+  ctx.lineWidth = lineWidth;
+  const colCount = Math.ceil(width / gridSize) + 1;
+  ctx.beginPath();
+  for (let col = 0; col <= colCount; col++) {
+    const x = col * gridSize;
+    ctx.moveTo(x, 0);
+    ctx.lineTo(x, height);
+  }
+  const rowCount = Math.ceil(height / gridSize) + 1;
+  for (let row = 0; row <= rowCount; row++) {
+    const y = row * gridSize;
+    ctx.moveTo(0, y);
+    ctx.lineTo(width, y);
+  }
+  ctx.stroke();
+  if (showGradientOverlay) {
+    const gradient = ctx.createLinearGradient(0, 0, width, 0);
+    gradient.addColorStop(0, `rgba(255, 255, 255, ${gradientOpacity})`);
+    gradient.addColorStop(1, "rgba(255, 255, 255, 0.5)");
+    ctx.fillStyle = gradient;
+    ctx.globalAlpha = 1;
+    ctx.fillRect(0, 0, width, height);
+  }
+}
+function animateTransition() {
+  if (transitionProgress >= 1) {
+    transitionProgress = 1;
+    if (animationFrame !== null) {
+      cancelAnimationFrame(animationFrame);
+      animationFrame = null;
+    }
+    return;
+  }
+  transitionProgress += 0.05;
+  renderGrid();
+  animationFrame = requestAnimationFrame(animateTransition);
+}
+function handleResize() {
+  if (resizeTimeout) clearTimeout(resizeTimeout);
+  previousPositions = [...highlightedPositions];
+  resizeTimeout = setTimeout(() => {
+    if (canvas) {
+      canvas.width = width;
+      canvas.height = height;
+      transitionProgress = 0;
+      generateCells();
+      if (animationFrame !== null) {
+        cancelAnimationFrame(animationFrame);
+      }
+      animationFrame = requestAnimationFrame(animateTransition);
+    }
+  }, 250);
+}
+onMount(() => {
+  mounted = true;
+  if (canvas) {
+    ctx = canvas.getContext("2d");
+    if (ctx && width && height) {
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      ctx.scale(dpr, dpr);
+      generateCells();
+    }
+    window.addEventListener("resize", handleResize);
+  }
+  return () => {
+    if (resizeTimeout) clearTimeout(resizeTimeout);
+    if (animationFrame !== null) cancelAnimationFrame(animationFrame);
+    window.removeEventListener("resize", handleResize);
+  };
+});
+</script>
+
+<div
+  class="grid-background"
+  bind:clientWidth={width}
+  bind:clientHeight={height}
+  style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1;"
+>
+  <canvas
+    bind:this={canvas}
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+  />
+</div>
+
+<style>
+  .grid-background {
+    pointer-events: none;
+  }
+</style>

package/dist/components/grid-background/grid-background.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        gridSize?: number;
+        lineWidth?: number;
+        lineColor?: string;
+        lineOpacity?: number;
+        highlightedCells?: number;
+        cellColor?: string;
+        cellOpacity?: number;
+        showGradientOverlay?: boolean;
+        gradientOpacity?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type GridBackgroundProps = typeof __propDef.props;
+export type GridBackgroundEvents = typeof __propDef.events;
+export type GridBackgroundSlots = typeof __propDef.slots;
+export default class GridBackground extends SvelteComponent<GridBackgroundProps, GridBackgroundEvents, GridBackgroundSlots> {
+}
+export {};

package/dist/components/grid-background/index.d.ts

@@ -0,0 +1,2 @@
+import Root from "./grid-background.svelte";
+export { Root, Root as GridBackground, };

package/dist/components/grid-background/index.js

@@ -0,0 +1,4 @@
+import Root from "./grid-background.svelte";
+export { Root, 
+//
+Root as GridBackground, };

package/dist/components/range-calendar/index.d.ts

@@ -11,4 +11,5 @@ import GridHead from "./range-calendar-grid-head.svelte";
 import HeadCell from "./range-calendar-head-cell.svelte";
 import NextButton from "./range-calendar-next-button.svelte";
 import PrevButton from "./range-calendar-prev-button.svelte";
-export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, Root as RangeCalendar, };
+import Picker from "./range-calendar-picker.svelte";
+export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, Root as RangeCalendar, Picker as RangeCalendarPicker, };

package/dist/components/range-calendar/index.js

@@ -11,6 +11,7 @@ import GridHead from "./range-calendar-grid-head.svelte";
 import HeadCell from "./range-calendar-head-cell.svelte";
 import NextButton from "./range-calendar-next-button.svelte";
 import PrevButton from "./range-calendar-prev-button.svelte";
+import Picker from "./range-calendar-picker.svelte";
 export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, 
 //
-Root as RangeCalendar, };
+Root as RangeCalendar, Picker as RangeCalendarPicker, };

package/dist/components/range-calendar/range-calendar-picker.svelte

@@ -0,0 +1,132 @@
+<script>import { Button } from "../button/index";
+import { RangeCalendar } from "./index";
+import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import * as Popover from "../popover/index";
+import * as Select from "../select/index";
+import {
+  getLocalTimeZone,
+  isToday,
+  startOfMonth,
+  startOfWeek,
+  today
+} from "@internationalized/date";
+export let value = {
+  start: today(getLocalTimeZone()).subtract({ days: 7 }),
+  end: today(getLocalTimeZone())
+};
+let label = "";
+$: update_label(value);
+const update_label = (new_value) => {
+  if (!new_value || !new_value.start || !new_value.end) {
+    label = "Select a date range";
+    return;
+  }
+  const now = today(getLocalTimeZone());
+  const new_start = new_value.start;
+  const new_end = new_value.end;
+  if (!new_start || !new_end) {
+    label = "Select a date range";
+    return;
+  }
+  const ends_now = isToday(new_end, getLocalTimeZone());
+  const diffDays = new_end.compare(new_start);
+  const diffWeeks = Math.floor(diffDays / 7);
+  const diffMonths = (now.year - new_start.year) * 12 + (now.month - new_start.month);
+  if (ends_now && new_start.day === now.day && diffMonths >= 1 && new_start.day <= 28) {
+    label = diffMonths === 1 ? "1 month ago" : `${diffMonths} months ago`;
+  } else if (ends_now && diffWeeks >= 1 && diffDays % 7 === 0) {
+    label = diffWeeks === 1 ? "1 week ago" : `${diffWeeks} weeks ago`;
+  } else if (ends_now && diffDays >= 1) {
+    label = diffDays === 1 ? "1 day ago" : `${diffDays} days ago`;
+  } else {
+    label = format_range(new_start, new_end);
+  }
+};
+const format_range = (start, end) => {
+  const formatter = new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric"
+  });
+  const startStr = formatter.format(start.toDate(getLocalTimeZone()));
+  const endStr = formatter.format(end.toDate(getLocalTimeZone()));
+  return `${startStr} - ${endStr}`;
+};
+const select_options = [
+  { value: "week-to-date", label: "Week to date" },
+  { value: "month-to-date", label: "Month to date" },
+  { value: "last-7-days", label: "Last 7 days" },
+  { value: "last-14-days", label: "Last 14 days" },
+  { value: "last-30-days", label: "Last 30 days" },
+  { value: "last-6-months", label: "Last 6 months" }
+];
+const handle_select = (selected) => {
+  if (!selected) {
+    return;
+  }
+  switch (selected.value) {
+    case "week-to-date":
+      value = {
+        start: startOfWeek(today(getLocalTimeZone()), "en-GB"),
+        end: today(getLocalTimeZone())
+      };
+      break;
+    case "month-to-date":
+      value = {
+        start: startOfMonth(today(getLocalTimeZone())),
+        end: today(getLocalTimeZone())
+      };
+      break;
+    case "last-7-days":
+      value = {
+        start: today(getLocalTimeZone()).subtract({ days: 7 }),
+        end: today(getLocalTimeZone())
+      };
+      break;
+    case "last-14-days":
+      value = {
+        start: today(getLocalTimeZone()).subtract({ days: 14 }),
+        end: today(getLocalTimeZone())
+      };
+      break;
+    case "last-30-days":
+      value = {
+        start: today(getLocalTimeZone()).subtract({ days: 30 }),
+        end: today(getLocalTimeZone())
+      };
+      break;
+    case "last-6-months":
+      value = {
+        start: today(getLocalTimeZone()).subtract({ months: 6 }),
+        end: today(getLocalTimeZone())
+      };
+      break;
+    default:
+      console.warn("Unknown selection:", selected);
+  }
+};
+</script>
+
+<Popover.Root>
+  <Popover.Trigger asChild let:builder>
+    <Button builders={[builder]} variant="outline">
+      <i class="far fa-calendar" aria-hidden="true"></i>
+      {label}
+      <i class="far fa-chevron-down" aria-hidden="true"></i>
+    </Button>
+  </Popover.Trigger>
+  <Popover.Content class="w-fit">
+    <Select.Root onSelectedChange={handle_select}>
+      <Select.Trigger class="">
+        <Select.Value placeholder="Select a date range" />
+      </Select.Trigger>
+      <Select.Content>
+        {#each select_options as option}
+          <Select.Item value={option.value} label={option.label}>
+            {option.label}
+          </Select.Item>
+        {/each}
+      </Select.Content>
+    </Select.Root>
+    <RangeCalendar class="px-0" bind:value {...$$restProps} />
+  </Popover.Content>
+</Popover.Root>

package/dist/components/range-calendar/range-calendar-picker.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+declare const __propDef: {
+    props: RangeCalendarPrimitive.Props;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type RangeCalendarPickerProps = typeof __propDef.props;
+export type RangeCalendarPickerEvents = typeof __propDef.events;
+export type RangeCalendarPickerSlots = typeof __propDef.slots;
+export default class RangeCalendarPicker extends SvelteComponent<RangeCalendarPickerProps, RangeCalendarPickerEvents, RangeCalendarPickerSlots> {
+}
+export {};

package/dist/components/select/select-trigger.svelte

@@ -6,8 +6,8 @@ export { className as class };
 
 <SelectPrimitive.Trigger
   class={cn(
-    "bg-gradient-to-b from-[#2727271F] to-[#27272719] shadow-select ring-offset-background focus-visible:ring-ring aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-black flex h-7 w-full items-center justify-between rounded px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-    className
+    "border ring-offset-background focus-visible:ring-ring aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-muted-foreground flex h-7 w-full items-center justify-between rounded px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+    className,
   )}
   {...$$restProps}
   let:builder

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/ui",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && pnpm run package && node ./fix_dts_imports.js",