katalyst-koi 4.0.0

data/app/assets/javascripts/koi/controllers/webauthn_authentication_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus";
+
+import {
+  get,
+  parseRequestOptionsFromJSON,
+} from "@github/webauthn-json/browser-ponyfill";
+
+export default class WebauthnAuthenticationController extends Controller {
+  static targets = ["response"];
+  static values = { options: Object };
+
+  authenticate() {
+    get(this.options).then((response) => {
+      this.responseTarget.value = JSON.stringify(response);
+
+      this.element.requestSubmit();
+    });
+  }
+
+  get options() {
+    return parseRequestOptionsFromJSON(this.optionsValue);
+  }
+}

data/app/assets/javascripts/koi/controllers/webauthn_registration_controller.js

@@ -0,0 +1,30 @@
+import { Controller } from "@hotwired/stimulus";
+
+import {
+  create,
+  parseCreationOptionsFromJSON,
+} from "@github/webauthn-json/browser-ponyfill";
+
+export default class WebauthnRegistrationController extends Controller {
+  static values = { options: Object };
+  static targets = ["response"];
+
+  submit(e) {
+    if (this.responseTarget.value === "") {
+      e.preventDefault();
+      this.createCredential();
+    }
+  }
+
+  createCredential() {
+    create(this.options).then((response) => {
+      this.responseTarget.value = JSON.stringify(response);
+
+      this.element.requestSubmit();
+    });
+  }
+
+  get options() {
+    return parseCreationOptionsFromJSON(this.optionsValue);
+  }
+}

data/app/assets/javascripts/koi/utils/transition.js

@@ -0,0 +1,220 @@
+const DEFAULT_DELAY = 250;
+
+/**
+ * A utility class for managing CSS transition animations.
+ *
+ * Transition uses Javascript timers to track state instead of relying on
+ * CSS transition events, which is a more complicated API. Please call `cancel`
+ * when the node being animated is detached from the DOM to avoid unexpected
+ * errors or animation glitches.
+ *
+ * Transition assumes that CSS already specifies styles to achieve the expected
+ * start and end states. Transition adds temporary overrides and then animates
+ * between those values using CSS transitions. For example, to use the collapse
+ * transition:
+ *
+ * @example
+ *   // CSS:
+ *   target {
+ *     max-height: unset;
+ *     overflow: 0;
+ *   }
+ *   target.hidden {
+ *     max-height: 0;
+ *   }
+ *
+ * @example
+ *   // Javascript
+ *   target.addClass("hidden");
+ *   new Transition(target).collapse().start();
+ */
+class Transition {
+  constructor(target, options) {
+    const { delay } = this._setDefaults(options);
+
+    this.target = target;
+    this.runner = new Runner(this, delay);
+    this.properties = [];
+
+    this.startingCallbacks = [];
+    this.startedCallbacks = [];
+    this.completeCallbacks = [];
+  }
+
+  add(property) {
+    this.properties.push(property);
+    return this;
+  }
+
+  /** Adds callback for transition events */
+  addCallback(type, callback) {
+    switch (type) {
+      case "starting":
+        this.startingCallbacks.push(callback);
+        break;
+      case "started":
+        this.startedCallbacks.push(callback);
+        break;
+      case "complete":
+        this.completeCallbacks.push(callback);
+        break;
+    }
+    return this;
+  }
+
+  /** Collapse an element in place, assumes overflow is set appropriately, margin is not collapsed */
+  collapse() {
+    return this.add(
+      new PropertyTransition(
+        "max-height",
+        `${this.target.scrollHeight}px`,
+        "0px",
+      ),
+    );
+  }
+
+  /** Restore a collapsed element */
+  expand() {
+    return this.add(
+      new PropertyTransition(
+        "max-height",
+        "0px",
+        `${this.target.scrollHeight}px`,
+      ),
+    );
+  }
+
+  /** Slide an element left or right by its scroll width, assumes position relative */
+  slideOut(direction) {
+    return this.add(
+      new PropertyTransition(direction, "0px", `-${this.target.scrollWidth}px`),
+    );
+  }
+
+  /** Restore an element that has been slid */
+  slideIn(direction) {
+    return this.add(
+      new PropertyTransition(direction, `-${this.target.scrollWidth}px`, "0px"),
+    );
+  }
+
+  /** Cause an element to become transparent by transforming opacity */
+  fadeOut() {
+    return this.add(new PropertyTransition("opacity", "100%", "0%"));
+  }
+
+  /** Cause a transparent element to become visible again */
+  fadeIn() {
+    return this.add(new PropertyTransition("opacity", "0%", "100%"));
+  }
+
+  start(callback = null) {
+    // start the runner on next tick so that any side-effects of the current execution can occur first
+    requestAnimationFrame(() => {
+      this.runner.start(this.target);
+      if (callback) callback();
+    });
+    return this;
+  }
+
+  cancel() {
+    this.runner.stop(this.target);
+    return this;
+  }
+
+  _starting() {
+    const event = new Event("transition:starting");
+    this.startingCallbacks.forEach((cb) => cb(event));
+    this.target.dispatchEvent(event);
+  }
+
+  _started() {
+    const event = new Event("transition:started");
+    this.startedCallbacks.forEach((cb) => cb(event));
+    this.target.dispatchEvent(event);
+  }
+
+  _complete() {
+    const event = new Event("transition:complete");
+    this.completeCallbacks.forEach((cb) => cb(event));
+    this.target.dispatchEvent(event);
+  }
+
+  _setDefaults(options) {
+    return Object.assign({ delay: DEFAULT_DELAY }, options);
+  }
+}
+
+/**
+ * Encapsulates internal execution and timing functionality for `Transition`
+ */
+class Runner {
+  constructor(transition, delay) {
+    this.transition = transition;
+    this.running = null;
+    this.delay = delay;
+  }
+
+  start(target) {
+    // 1. Set the initial state(s)
+    this.transition.properties.forEach((t) => t.onStarting(target));
+
+    // 2. On next update, set transition and final state(s)
+    requestAnimationFrame(() => this.onStarted(target));
+
+    // 3. After transition has finished, clean up
+    this.running = setTimeout(() => this.stop(target, true), this.delay);
+
+    this.transition._starting();
+  }
+
+  onStarted(target) {
+    target.style.transitionProperty = this.transition.properties
+      .map((t) => t.property)
+      .join(",");
+    target.style.transitionDuration = `${this.delay}ms`;
+    this.transition.properties.forEach((t) => t.onStarted(target));
+
+    this.transition._started();
+  }
+
+  stop(target, timeout = false) {
+    if (!this.running) return;
+    if (!timeout) clearTimeout(this.running);
+
+    this.running = null;
+
+    target.style.removeProperty("transition-property");
+    target.style.removeProperty("transition-duration");
+    this.transition.properties.forEach((t) => t.onComplete(target));
+
+    this.transition._complete();
+  }
+}
+
+/**
+ * Represents animation of a single CSS property. Currently only CSS animations
+ * are supported, but this could be a natural extension point for Javascript
+ * animations in the future.
+ */
+class PropertyTransition {
+  constructor(property, from, to) {
+    this.property = property;
+    this.from = from;
+    this.to = to;
+  }
+
+  onStarting(target) {
+    target.style.setProperty(this.property, this.from);
+  }
+
+  onStarted(target) {
+    target.style.setProperty(this.property, this.to);
+  }
+
+  onComplete(target) {
+    target.style.removeProperty(this.property);
+  }
+}
+
+export { Transition };

data/app/assets/stylesheets/koi/admin.scss

@@ -0,0 +1,27 @@
+// DEPENDENCIES
+
+@use "base";
+@use "components";
+@use "layouts";
+@use "pages";
+@use "themes";
+@use "utils";
+
+:root {
+  /* Color styles */
+  --site-primary-light: #5a87c9;
+  --site-primary: #266dd3;
+  --site-primary-dark: #344055;
+  --site-on-primary: #ffffff;
+  --site-secondary-light: #5a87c9;
+  --site-secondary: #266dd3;
+  --site-secondary-dark: #344055;
+  --site-on-secondary: #ffffff;
+  --site-text-color: #000000;
+  --site-success: #129d7f;
+  --site-warning: #ffc759;
+  --site-alert: #ea3946;
+  --site-notice: rgb(37, 99, 235);
+  --site-disabled: #9ca3af;
+  --site-link: #266dd3;
+}

data/app/assets/stylesheets/koi/base/_button.scss

@@ -0,0 +1,122 @@
+%button-base {
+  display: inline-block;
+  position: relative;
+  padding: 5px 1rem;
+  cursor: pointer;
+  height: 2.5rem;
+
+  border: none;
+  outline: none;
+  transition:
+    color 0.2s ease,
+    background 0.2s ease,
+    border-color 0.2s ease;
+  text-decoration: none;
+
+  font-weight: 500;
+}
+
+@mixin button-filled {
+  @extend %button-base;
+  background: var(--site-primary);
+  border: 2px solid var(--site-primary);
+  color: var(--site-on-primary);
+
+  &:hover,
+  &:focus {
+    background: var(--site-primary-dark);
+    border-color: var(--site-primary-dark);
+    text-decoration: none;
+  }
+
+  &:active {
+    background: var(--site-primary-dark);
+    border-color: var(--site-primary-dark);
+    text-decoration: none;
+  }
+
+  &[disabled] {
+    background: var(--site-primary-light);
+    border-color: var(--site-primary-light);
+    opacity: 0.45;
+
+    &:hover,
+    &:focus {
+      background: var(--site-primary-light);
+      border-color: var(--site-primary-light);
+    }
+
+    &:active {
+      background: var(--site-primary-light);
+      border-color: var(--site-primary-light);
+    }
+  }
+}
+
+@mixin button-outline {
+  @extend %button-base;
+
+  color: var(--site-secondary);
+  border: 2px solid var(--site-secondary);
+  background: transparent;
+
+  &:hover,
+  &:focus {
+    border-color: var(--site-secondary);
+    background: var(--site-secondary);
+    color: var(--site-on-secondary);
+    text-decoration: none;
+  }
+
+  &:active {
+    border-color: var(--site-secondary);
+    background: var(--site-secondary);
+    color: var(--site-on-secondary);
+    text-decoration: none;
+  }
+
+  &[disabled] {
+    background: none;
+    &:hover,
+    &:focus {
+      background: none;
+    }
+
+    &:active {
+      background: none;
+    }
+  }
+}
+
+@mixin button-text {
+  @extend %button-base;
+
+  color: var(--site-primary);
+  background: none;
+
+  &:hover,
+  &:focus {
+    background: none;
+    color: var(--site-text-color);
+  }
+
+  &:active {
+    background: none;
+    color: var(--site-text-color);
+  }
+
+  &[disabled] {
+    background: none;
+
+    &:hover,
+    &:focus {
+      color: var(--site-primary-light);
+      background: none;
+    }
+
+    &:active {
+      color: var(--site-primary-light);
+      background: none;
+    }
+  }
+}

data/app/assets/stylesheets/koi/base/_icon.scss

@@ -0,0 +1,29 @@
+.icon {
+  width: 1.5em;
+  height: 1.5em;
+  display: inline-block;
+}
+
+.icon-large {
+  width: 2em;
+  height: 2em;
+  display: inline-block;
+}
+
+.icon-small {
+  width: 0.75em;
+  height: 0.75em;
+  display: inline-block;
+}
+
+.icon-medium {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+}
+
+.leading-icon {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+}

data/app/assets/stylesheets/koi/base/_index.scss

@@ -0,0 +1,18 @@
+@use "button";
+@use "icon";
+@use "input";
+@use "link";
+@use "list";
+@use "typography";
+
+.button--primary {
+  @include button.button-filled;
+}
+
+.button--secondary {
+  @include button.button-outline;
+}
+
+.button--text {
+  @include button.button-text;
+}

data/app/assets/stylesheets/koi/base/_input.scss

@@ -0,0 +1,13 @@
+input,
+select {
+  border: 2px solid var(--site-text-color);
+  height: 2.5rem;
+  line-height: 1;
+  padding: 5px;
+
+  &:focus {
+    outline: 3px solid #fd0;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 2px;
+  }
+}

data/app/assets/stylesheets/koi/base/_link.scss

@@ -0,0 +1,26 @@
+a[href]:not(.button) {
+  color: var(--site-link);
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    color: var(--site-link);
+    text-decoration: underline;
+    outline: none;
+  }
+
+  &.no-hover-link {
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
+  }
+
+  &[disabled] {
+    color: var(--site-disabled);
+    pointer-events: none;
+    opacity: 0.45;
+  }
+}

data/app/assets/stylesheets/koi/base/_list.scss

@@ -0,0 +1,11 @@
+ol,
+ul {
+  margin: 0;
+  padding-left: 3ch;
+}
+
+ul.no-bullet {
+  padding-left: 0;
+  list-style-type: none;
+  max-width: none;
+}

data/app/assets/stylesheets/koi/base/_typography.scss

@@ -0,0 +1,160 @@
+$font-sizes: (
+  h1: 3.3125rem,
+  h2: 2rem,
+  h3: 1.5rem,
+  h4: 1.125rem,
+  h5: 1.125rem,
+  h6: 1rem,
+  paragraph: 1rem,
+  small: 0.875rem,
+) !default;
+
+$line-heights: (
+  h1: 1.03em,
+  h2: 1.09em,
+  h3: 1.04em,
+  h4: 1.11em,
+  h5: 1.11em,
+  // used for labels
+  h6: 1.5em,
+  paragraph: 1.14em,
+  small: 1.25em,
+) !default;
+
+@use "../utils/breakpoints";
+@use "../utils/typography" as * with (
+  $-font-sizes: $font-sizes,
+  $-line-heights: $line-heights
+);
+
+:root {
+  font-family: "Inter", sans-serif;
+  font-size: 100%; // defaults to 16px
+  color: var(--site-text-color);
+
+  /* Text-size styles */
+  /* base size: paragraph (16px) */
+  --heading--h1: #{font-size(h1)};
+  --heading--h2: #{font-size(h2)};
+  --heading--h3: #{font-size(h3)};
+  --heading--h4: #{font-size(h4)};
+  --heading--h5: #{font-size(h5)};
+  --heading--h6: #{font-size(h6)};
+  --paragraph: #{font-size(paragraph)};
+  --paragraph--strong: #{font-size(paragraph)};
+  --paragraph--em: #{font-size(paragraph)};
+  --paragraph--small: #{font-size(small)};
+  --text-width: 70ch;
+}
+
+@supports (font-variation-settings: normal) {
+  :root {
+    font-family: "Inter var", sans-serif;
+  }
+}
+
+h1,
+.heading-one {
+  font-size: var(--heading--h1);
+  font-weight: 400;
+  line-height: line-height(h1);
+  margin-bottom: 0.25em;
+  letter-spacing: -0.015em;
+  color: var(--site-text-color);
+}
+
+h2,
+.heading-two {
+  font-size: var(--heading--h2);
+  font-weight: 400;
+  line-height: line-height(h2);
+  margin-bottom: 0.25em;
+  letter-spacing: -0.015em;
+  color: var(--site-text-color);
+}
+
+h3,
+.heading-three {
+  font-size: var(--heading--h3);
+  font-weight: 400;
+  line-height: line-height(h3);
+  margin: 0 0 0.25em;
+  letter-spacing: -0.015em;
+  color: var(--site-text-color);
+}
+
+h4,
+.heading-four {
+  font-size: var(--heading--h4);
+  font-weight: 400;
+  line-height: line-height(h4);
+  margin: 0 0 0.25em;
+  letter-spacing: -0.015em;
+  color: var(--site-text-color);
+}
+
+h5,
+.heading-five {
+  font-size: var(--heading--h5);
+  font-weight: 400;
+  line-height: line-height(h5);
+  margin: 0 0 0.25em;
+  letter-spacing: -0.015em;
+  color: var(--site-text-color);
+}
+
+h6,
+.heading-six {
+  font-size: var(--heading--h6);
+  font-weight: 400; // Bold
+  line-height: line-height(h6);
+  margin: 0 0 0.25em;
+  letter-spacing: -0.015em;
+  color: var(--site-text-color);
+}
+
+label {
+  font-size: var(--heading-h6);
+  font-weight: 500; // Bold
+  line-height: line-height(h6);
+  margin-bottom: 0.125rem;
+  letter-spacing: 0.01em;
+  color: var(--site-text-color);
+}
+
+p,
+.body-one {
+  font-size: var(--paragraph);
+  line-height: line-height(paragraph);
+  letter-spacing: 0.01em;
+  color: var(--site-text-color);
+}
+
+small,
+em {
+  font-size: var(--paragraph--em);
+  line-height: line-height(paragraph);
+  letter-spacing: 0.01em;
+  font-weight: 300;
+  color: var(--site-text-color);
+}
+
+strong {
+  font-size: var(--paragraph--strong);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: var(--site-text-color);
+}
+
+h1,
+h2,
+h3,
+h4,
+p,
+small,
+legend,
+label,
+input,
+textarea {
+  max-width: var(--text-width);
+}

data/app/assets/stylesheets/koi/components/_actions-group.scss

@@ -0,0 +1,7 @@
+.actions-group,
+.actions {
+  display: flex;
+  align-items: stretch;
+  flex-direction: row;
+  column-gap: 0.5rem;
+}