@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/TextInput/TextInput.svelte

@@ -0,0 +1,249 @@
+<script>
+  /**
+   * @event {null | number | string} change
+   * @event {null | number | string} input
+   */
+
+  /**
+   * Set the size of the input
+   * @type {"sm" | "xl"}
+   */
+  export let size = undefined;
+
+  /**
+   * Specify the input value.
+   *
+   * `value` will be set to `null` if type="number"
+   * and the value is empty.
+   * @type {null | number | string}
+   */
+  export let value = "";
+
+  /** Specify the placeholder text */
+  export let placeholder = "";
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Set to `true` to disable the input */
+  export let disabled = false;
+
+  /** Specify the helper text */
+  export let helperText = "";
+
+  /** Set an id for the input element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the input
+   * @type {string}
+   */
+  export let name = undefined;
+
+  /** Specify the label text */
+  export let labelText = "";
+
+  /** Set to `true` to visually hide the label text */
+  export let hideLabel = false;
+
+  /** Set to `true` to indicate an invalid state */
+  export let invalid = false;
+
+  /** Specify the invalid state text */
+  export let invalidText = "";
+
+  /** Set to `true` to indicate an warning state */
+  export let warn = false;
+
+  /** Specify the warning state text */
+  export let warnText = "";
+
+  /** Obtain a reference to the input HTML element */
+  export let ref = null;
+
+  /** Set to `true` to mark the field as required */
+  export let required = false;
+
+  /** Set to `true` to use the inline variant */
+  export let inline = false;
+
+  /** Set to `true` to use the read-only variant */
+  export let readonly = false;
+
+  import { createEventDispatcher, getContext } from "svelte";
+  import WarningFilled from "../icons/WarningFilled.svelte";
+  import WarningAltFilled from "../icons/WarningAltFilled.svelte";
+  import EditOff from "../icons/EditOff.svelte";
+
+  const ctx = getContext("Form");
+  const dispatch = createEventDispatcher();
+
+  function parse(raw) {
+    if ($$restProps.type !== "number") return raw;
+    return raw != "" ? Number(raw) : null;
+  }
+
+  /** @type {(e: Event) => void} */
+  const onInput = (e) => {
+    value = parse(e.target.value);
+    dispatch("input", value);
+  };
+
+  /** @type {(e: Event) => void} */
+  const onChange = (e) => {
+    dispatch("change", parse(e.target.value));
+  };
+
+  const isFluid = !!ctx && ctx.isFluid;
+  $: error = invalid && !readonly;
+  $: helperId = `helper-${id}`;
+  $: errorId = `error-${id}`;
+  $: warnId = `warn-${id}`;
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class:bx--form-item={true}
+  class:bx--text-input-wrapper={true}
+  class:bx--text-input-wrapper--inline={inline}
+  class:bx--text-input-wrapper--light={light}
+  class:bx--text-input-wrapper--readonly={readonly}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  {#if inline}
+    <div class:bx--text-input__label-helper-wrapper={true}>
+      {#if labelText}
+        <label
+          for={id}
+          class:bx--label={true}
+          class:bx--visually-hidden={hideLabel}
+          class:bx--label--disabled={disabled}
+          class:bx--label--inline={inline}
+          class:bx--label--inline--sm={size === "sm"}
+          class:bx--label--inline--xl={size === "xl"}
+        >
+          <slot name="labelText">
+            {labelText}
+          </slot>
+        </label>
+      {/if}
+      {#if !isFluid && helperText}
+        <div
+          class:bx--form__helper-text={true}
+          class:bx--form__helper-text--disabled={disabled}
+          class:bx--form__helper-text--inline={inline}
+        >
+          {helperText}
+        </div>
+      {/if}
+    </div>
+  {/if}
+  {#if !inline && (labelText || $$slots.labelText)}
+    <label
+      for={id}
+      class:bx--label={true}
+      class:bx--visually-hidden={hideLabel}
+      class:bx--label--disabled={disabled}
+      class:bx--label--inline={inline}
+      class:bx--label--inline-sm={inline && size === "sm"}
+      class:bx--label--inline-xl={inline && size === "xl"}
+    >
+      <slot name="labelText">
+        {labelText}
+      </slot>
+    </label>
+  {/if}
+  <div
+    class:bx--text-input__field-outer-wrapper={true}
+    class:bx--text-input__field-outer-wrapper--inline={inline}
+  >
+    <div
+      data-invalid={error || undefined}
+      data-warn={warn || undefined}
+      class:bx--text-input__field-wrapper={true}
+      class:bx--text-input__field-wrapper--warning={!invalid && warn}
+    >
+      {#if readonly}
+        <EditOff class="bx--text-input__readonly-icon" />
+      {:else}
+        {#if invalid}
+          <WarningFilled class="bx--text-input__invalid-icon" />
+        {/if}
+        {#if !invalid && warn}
+          <WarningAltFilled
+            class="bx--text-input__invalid-icon
+            bx--text-input__invalid-icon--warning"
+          />
+        {/if}
+      {/if}
+      <input
+        bind:this={ref}
+        data-invalid={error || undefined}
+        aria-invalid={error || undefined}
+        data-warn={warn || undefined}
+        aria-describedby={error
+          ? errorId
+          : warn
+            ? warnId
+            : helperText
+              ? helperId
+              : undefined}
+        {disabled}
+        {id}
+        {name}
+        {placeholder}
+        bind:value
+        {required}
+        {readonly}
+        class:bx--text-input={true}
+        class:bx--text-input--light={light}
+        class:bx--text-input--invalid={error}
+        class:bx--text-input--warning={warn}
+        class:bx--text-input--sm={size === "sm"}
+        class:bx--text-input--xl={size === "xl"}
+        {...$$restProps}
+        on:change={onChange}
+        on:input={onInput}
+        on:keydown
+        on:keyup
+        on:focus
+        on:blur
+        on:paste
+      />
+      {#if isFluid}
+        <hr class:bx--text-input__divider={true} />
+      {/if}
+      {#if isFluid && !inline && invalid}
+        <div class:bx--form-requirement={true} id={errorId}>
+          {invalidText}
+        </div>
+      {/if}
+      {#if isFluid && !inline && warn}
+        <div class:bx--form-requirement={true} id={warnId}>{warnText}</div>
+      {/if}
+    </div>
+    {#if !invalid && !warn && !isFluid && !inline && helperText}
+      <div
+        id={helperId}
+        class:bx--form__helper-text={true}
+        class:bx--form__helper-text--disabled={disabled}
+        class:bx--form__helper-text--inline={inline}
+      >
+        {helperText}
+      </div>
+    {/if}
+    {#if !isFluid && invalid}
+      <div class:bx--form-requirement={true} id={errorId}>
+        {invalidText}
+      </div>
+    {/if}
+    {#if !isFluid && !invalid && warn}
+      <div class:bx--form-requirement={true} id={warnId}>{warnText}</div>
+    {/if}
+  </div>
+</div>

package/src/TextInput/TextInputSkeleton.svelte

@@ -0,0 +1,20 @@
+<script>
+  /** Set to `true` to hide the label text */
+  export let hideLabel = false;
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class:bx--form-item={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  {#if !hideLabel}
+    <span class:bx--label={true} class:bx--skeleton={true}></span>
+  {/if}
+  <div class:bx--skeleton={true} class:bx--text-input={true}></div>
+</div>

package/src/TextInput/index.js

@@ -0,0 +1,3 @@
+export { default as TextInput } from "./TextInput.svelte";
+export { default as TextInputSkeleton } from "./TextInputSkeleton.svelte";
+export { default as PasswordInput } from "./PasswordInput.svelte";

package/src/Theme/Theme.svelte

@@ -0,0 +1,120 @@
+<script>
+  /**
+   * Dynamic, client-side theming using CSS variables
+   * Only works with `carbon-components-svelte/css/all.css`
+   */
+
+  /**
+   * @typedef {"white" | "g10" | "g80" | "g90" | "g100"} CarbonTheme
+   * @event {{ theme: CarbonTheme; }} update
+   * @slot {{ theme: CarbonTheme; }}
+   */
+
+  /**
+   * Set the current Carbon theme
+   * @type {CarbonTheme}
+   */
+  export let theme = "white";
+
+  /**
+   * Customize a theme with your own tokens
+   * @see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme
+   * @type {{ [token: string]: any; }}
+   */
+  export let tokens = {};
+
+  /** Set to `true` to persist the theme using window.localStorage */
+  export let persist = false;
+
+  /** Specify the local storage key */
+  export let persistKey = "theme";
+
+  /**
+   * Render a toggle or select dropdown to control the theme
+   * @type {"toggle" | "select"}
+   */
+  export let render = undefined;
+
+  /**
+   * Override the default toggle props
+   * @type {import("../Toggle/Toggle.svelte").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }}
+   */
+  export let toggle = {
+    themes: ["white", "g100"],
+    labelA: "",
+    labelB: "",
+    labelText: "Dark mode",
+    hideLabel: false,
+  };
+
+  /** @type {Record<CarbonTheme, string>} */
+  const themes = {
+    white: "White",
+    g10: "Gray 10",
+    g80: "Gray 80",
+    g90: "Gray 90",
+    g100: "Gray 100",
+  };
+
+  /** @type {CarbonTheme} */
+  const themeKeys = Object.keys(themes);
+
+  /**
+   * Override the default select props
+   * @type {import("../Select/Select.svelte").SelectProps & { themes?: CarbonTheme[]; }}
+   */
+  export let select = {
+    themes: themeKeys,
+    labelText: "Themes",
+    hideLabel: false,
+  };
+
+  import { createEventDispatcher } from "svelte";
+  import Toggle from "../Toggle/Toggle.svelte";
+  import Select from "../Select/Select.svelte";
+  import SelectItem from "../Select/SelectItem.svelte";
+  import LocalStorage from "../LocalStorage/LocalStorage.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  $: if (typeof window !== "undefined") {
+    Object.entries(tokens).forEach(([token, value]) => {
+      document.documentElement.style.setProperty(`--cds-${token}`, value);
+    });
+
+    if (theme in themes) {
+      document.documentElement.setAttribute("theme", theme);
+      dispatch("update", { theme });
+    } else {
+      console.warn(
+        `[Theme.svelte] invalid theme "${theme}". Value must be one of: ${JSON.stringify(
+          Object.keys(themes),
+        )}`,
+      );
+    }
+  }
+</script>
+
+{#if persist}
+  <LocalStorage bind:value={theme} key={persistKey} />
+{/if}
+
+{#if render === "toggle"}
+  {@const { themes: toggleThemes, ...toggleProps } = toggle}
+  <Toggle
+    {...toggleProps}
+    toggled={theme === toggleThemes[1]}
+    on:toggle={({ detail }) => {
+      theme = detail.toggled ? toggleThemes[1] : toggleThemes[0];
+    }}
+  />
+{:else if render === "select"}
+  {@const { themes: selectThemes, ...selectProps } = select}
+  <Select {...selectProps} bind:selected={theme}>
+    {#each selectThemes as theme (theme)}
+      <SelectItem value={theme} text={themes[theme]} />
+    {/each}
+  </Select>
+{/if}
+
+<slot {theme} />

package/src/Theme/index.js

@@ -0,0 +1 @@
+export { default as Theme } from "./Theme.svelte";

package/src/Tile/ClickableTile.svelte

@@ -0,0 +1,43 @@
+<script>
+  /** @restProps {a | p} */
+
+  /** Set to `true` to click the tile */
+  export let clicked = false;
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Set to `true` to disable the tile */
+  export let disabled = false;
+
+  /**
+   * Set the `href`
+   * @type {string}
+   */
+  export let href = undefined;
+
+  import Link from "../Link/Link.svelte";
+</script>
+
+<Link
+  {...$$restProps}
+  {disabled}
+  class="bx--tile bx--tile--clickable {clicked &&
+    'bx--tile--is-clicked'} {light && 'bx--tile--light'} {$$restProps.class}"
+  {href}
+  on:click
+  on:click={() => {
+    clicked = !clicked;
+  }}
+  on:keydown
+  on:keydown={({ key }) => {
+    if (key === " " || key === "Enter") {
+      clicked = !clicked;
+    }
+  }}
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <slot />
+</Link>

package/src/Tile/ExpandableTile.svelte

@@ -0,0 +1,104 @@
+<script>
+  /** Set to `true` to expand the tile */
+  export let expanded = false;
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Specify the max height of the tile  (number of pixels) */
+  export let tileMaxHeight = 0;
+
+  /** Specify the padding of the tile (number of pixels) */
+  export let tilePadding = 0;
+
+  /** Specify the icon text of the collapsed tile */
+  export let tileCollapsedIconText = "Interact to expand Tile";
+
+  /** Specify the icon text of the expanded tile */
+  export let tileExpandedIconText = "Interact to collapse Tile";
+
+  /** Specify the icon label of the expanded tile */
+  export let tileExpandedLabel = "";
+
+  /** Specify the icon label of the collapsed tile */
+  export let tileCollapsedLabel = "";
+
+  /** Specify the tabindex */
+  export let tabindex = "0";
+
+  /** Set an id for the top-level div element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /** Obtain a reference to the top-level element */
+  export let ref = null;
+
+  import { afterUpdate, onMount } from "svelte";
+  import ChevronDown from "../icons/ChevronDown.svelte";
+
+  let refAbove = null;
+
+  onMount(() => {
+    const resizeObserver = new ResizeObserver(([elem]) => {
+      tileMaxHeight = elem.contentRect.height;
+    });
+
+    resizeObserver.observe(refAbove);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  });
+
+  afterUpdate(() => {
+    if (tileMaxHeight === 0) {
+      tileMaxHeight = refAbove.getBoundingClientRect().height;
+    }
+
+    const style = getComputedStyle(ref);
+
+    tilePadding =
+      parseInt(style.getPropertyValue("padding-top"), 10) +
+      parseInt(style.getPropertyValue("padding-bottom"), 10);
+  });
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<button
+  bind:this={ref}
+  type="button"
+  {id}
+  aria-expanded={expanded}
+  {tabindex}
+  title={expanded ? tileExpandedIconText : tileCollapsedIconText}
+  class:bx--tile={true}
+  class:bx--tile--expandable={true}
+  class:bx--tile--is-expanded={expanded}
+  class:bx--tile--light={light}
+  style:max-height={expanded ? "none" : `${tileMaxHeight + tilePadding}px`}
+  {...$$restProps}
+  on:click
+  on:click={() => {
+    expanded = !expanded;
+  }}
+  on:keypress
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <div>
+    <div bind:this={refAbove} class:bx--tile-content={true}>
+      <span class:bx--tile-content__above-the-fold={true}>
+        <slot name="above" />
+      </span>
+    </div>
+    <div class:bx--tile__chevron={true}>
+      <span>{expanded ? tileExpandedLabel : tileCollapsedLabel}</span>
+      <ChevronDown />
+    </div>
+    <div class:bx--tile-content={true}>
+      <span class:bx--tile-content__below-the-fold={true}>
+        <slot name="below" />
+      </span>
+    </div>
+  </div>
+</button>

package/src/Tile/RadioTile.svelte

@@ -0,0 +1,95 @@
+<script>
+  /** Set to `true` to check the tile */
+  export let checked = false;
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Set to `true` to disable the tile */
+  export let disabled = false;
+
+  /** Set to `true` to mark the field as required */
+  export let required = false;
+
+  /** Specify the value of the radio input */
+  export let value = "";
+
+  /** Specify the tabindex */
+  export let tabindex = "0";
+
+  /** Specify the ARIA label for the radio tile checkmark icon */
+  export let iconDescription = "Tile checkmark";
+
+  /** Set an id for the input element */
+  export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify a name attribute for the radio tile input
+   * @type {string}
+   */
+  export let name = undefined;
+
+  import { getContext } from "svelte";
+  import { readable } from "svelte/store";
+  import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
+
+  const { add, update, selectedValue, groupName, groupRequired } = getContext(
+    "TileGroup",
+  ) ?? {
+    add: () => {},
+    groupName: readable(undefined),
+    groupRequired: readable(undefined),
+    selectedValue: readable(checked ? value : undefined),
+  };
+
+  add({ value, checked });
+
+  $: checked = value === $selectedValue;
+</script>
+
+<input
+  type="radio"
+  {id}
+  name={$groupName ?? name}
+  {value}
+  {checked}
+  tabindex={disabled ? undefined : tabindex}
+  {disabled}
+  required={$groupRequired ?? required}
+  class:bx--tile-input={true}
+  on:change
+  on:change={() => {
+    if (disabled) return;
+    update(value);
+  }}
+  on:keydown
+  on:keydown={(e) => {
+    if (disabled) return;
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      update(value);
+    }
+  }}
+/>
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<label
+  for={id}
+  class:bx--tile={true}
+  class:bx--tile--selectable={true}
+  class:bx--tile--is-selected={checked}
+  class:bx--tile--light={light}
+  class:bx--tile--disabled={disabled}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <span class:bx--tile__checkmark={true}>
+    <CheckmarkFilled aria-label={iconDescription} title={iconDescription} />
+  </span>
+  <span class:bx--tile-content={true}>
+    <slot />
+  </span>
+</label>