@propelinc/citrus-ui 0.6.0 → 1.0.0

package/src/services/animation.ts

@@ -0,0 +1,101 @@
+import type { ElementAnimation } from '@shoelace-style/shoelace/dist/utilities/animation-registry.js';
+
+export interface AnimationOptions {
+  /** The starting progress through the animation from 0 to 1 */
+  start?: number;
+  /** The duration of the animation in milliseconds */
+  duration?: number;
+  /** The easing function to use for the animation */
+  easing?: string;
+  /** The endimum distance to slide */
+  end?: number;
+}
+
+const DEFAULT_DURATION = 300;
+const DEFAULT_EASING = 'ease';
+
+export function fadeIn({
+  start = 0,
+  duration = DEFAULT_DURATION,
+  easing = DEFAULT_EASING,
+}: AnimationOptions = {}): ElementAnimation {
+  return {
+    keyframes: [
+      { opacity: start, offset: 0 },
+      { opacity: 1, offset: 1 },
+    ],
+    options: { duration, easing },
+  };
+}
+
+export function fadeOut({
+  start = 0,
+  duration = DEFAULT_DURATION,
+  easing = DEFAULT_EASING,
+}: AnimationOptions = {}): ElementAnimation {
+  return {
+    keyframes: [
+      { opacity: 1 - start, offset: 0 },
+      { opacity: 0, offset: 1 },
+    ],
+    options: { duration, easing },
+  };
+}
+
+export function slideUp({
+  start = 0,
+  duration = DEFAULT_DURATION,
+  easing = DEFAULT_EASING,
+}: AnimationOptions = {}): ElementAnimation {
+  return {
+    keyframes: [
+      { translate: `0 ${(1 - start) * 100}%`, offset: 0 },
+      { translate: '0 0', offset: 1 },
+    ],
+    options: { duration, easing },
+  };
+}
+
+export function slideDown({
+  start = 0,
+  duration = DEFAULT_DURATION,
+  easing = DEFAULT_EASING,
+}: AnimationOptions = {}): ElementAnimation {
+  return {
+    keyframes: [
+      { translate: `0 ${start * 100}%`, offset: 0 },
+      { translate: '0 100%', offset: 1 },
+    ],
+    options: { duration, easing },
+  };
+}
+
+export function slideRight({
+  start = 0,
+  duration = DEFAULT_DURATION,
+  easing = DEFAULT_EASING,
+  end = 1,
+}: AnimationOptions = {}): ElementAnimation {
+  return {
+    keyframes: [
+      { translate: `${start * 100}% 0`, offset: 0 },
+      { translate: `${end * 100}% 0`, offset: 1 },
+    ],
+    options: { duration, easing },
+  };
+}
+
+export function slideLeft({
+  start = 0,
+  duration = DEFAULT_DURATION,
+  easing = DEFAULT_EASING,
+  end = 1,
+}: AnimationOptions = {}): ElementAnimation {
+  return {
+    keyframes: [
+      { translate: `${-start * 100}% 0`, offset: 0 },
+      { translate: `${-end * 100}% 0`, offset: 1 },
+    ],
+    options: { duration, easing },
+  };
+}

package/src/services/directives/index.ts

@@ -0,0 +1,2 @@
+export { scrollIntoView } from './scroll-into-view';
+export { tapAnimation } from './tap-animation';

package/src/services/directives/scroll-into-view.ts

@@ -0,0 +1,86 @@
+import type { DebouncedFunc } from 'lodash';
+import { debounce } from 'lodash';
+import type { Directive } from 'vue';
+
+interface ScrollIntoViewElement extends HTMLElement {
+  scrollDirective?: {
+    focusable: HTMLInputElement | HTMLTextAreaElement;
+    scrollIfNeeded: DebouncedFunc<() => void>;
+    focusListener: () => void;
+    blurListener: () => void;
+  };
+}
+
+// NOTE(mohan): This is to support browsers without visualViewport.
+const getViewport = (): Window | VisualViewport => window.visualViewport ?? window;
+
+const scrollToElement = (element: Element): void => {
+  const rect = element.getBoundingClientRect();
+  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+
+  // Check if element is obscured by header or footer
+  const appHeight = document.getElementById('app')?.clientHeight;
+  const estimatedHeaderHeight =
+    document.getElementsByClassName('app-bar c-app-bar')[0]?.clientHeight || 64;
+  const estimatedFooterHeight =
+    document.getElementsByClassName('c-fixed-page-footer')[0]?.clientHeight ||
+    document.getElementsByClassName('scrollable-footer')[0]?.clientHeight ||
+    0;
+  const contentStartY = appHeight
+    ? windowHeight - (appHeight - estimatedHeaderHeight)
+    : estimatedHeaderHeight;
+  const contentEndY = windowHeight - estimatedFooterHeight;
+
+  const isObscuredByHeader = rect.top < contentStartY;
+  const isObscuredByFooter = rect.bottom > contentEndY;
+
+  if (isObscuredByHeader || isObscuredByFooter) {
+    element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }
+};
+
+/**
+ * This directive scrolls the element into view when the input inside it is focused.
+ *
+ * It also listens for viewport size changes, so it can scroll again if the keyboard pops up.
+ */
+export const scrollIntoView: Directive = {
+  beforeMount(el: ScrollIntoViewElement): void {
+    const inputEl = el.querySelector('input,textarea');
+    if (!inputEl) {
+      return;
+    }
+
+    el.scrollDirective = {
+      focusable: inputEl as HTMLInputElement | HTMLTextAreaElement,
+      scrollIfNeeded: debounce((): void => {
+        scrollToElement(el);
+      }, 300),
+      focusListener: (): void => {
+        if (el.scrollDirective) {
+          el.scrollDirective.scrollIfNeeded();
+          // When focused, we track the viewport size, so we can scroll again if the keyboard pops up.
+          getViewport().addEventListener('resize', el.scrollDirective.scrollIfNeeded);
+        }
+      },
+      blurListener: (): void => {
+        if (el.scrollDirective) {
+          el.scrollDirective.scrollIfNeeded.cancel();
+          getViewport().removeEventListener('resize', el.scrollDirective.scrollIfNeeded);
+        }
+      },
+    };
+
+    inputEl.addEventListener('focus', el.scrollDirective!.focusListener);
+    inputEl.addEventListener('blur', el.scrollDirective!.blurListener);
+  },
+
+  unmounted(el: ScrollIntoViewElement): void {
+    if (el.scrollDirective) {
+      el.scrollDirective.scrollIfNeeded.cancel();
+      el.scrollDirective.focusable.removeEventListener('focus', el.scrollDirective.focusListener);
+      el.scrollDirective.focusable.removeEventListener('blur', el.scrollDirective.blurListener);
+      getViewport().removeEventListener('resize', el.scrollDirective.scrollIfNeeded);
+    }
+  },
+};

package/src/services/directives/tap-animation.ts

@@ -0,0 +1,71 @@
+import { ref } from 'vue';
+import type { Directive, DirectiveBinding } from 'vue';
+
+import { useTapAnimation } from '../../composables/animation';
+
+interface TapAnimationValue {
+  bounceAmount?: number;
+}
+
+interface TapAnimationElement extends HTMLElement {
+  __tapAnimationCleanup?: () => void;
+}
+
+const DEFAULT_BOUNCE_AMOUNT = 0.94;
+
+function setupTapAnimation(el: HTMLElement, bounceAmount: number): void {
+  const animationListeners = useTapAnimation({
+    el: ref(el),
+    keyframes: {
+      default: { transform: 'scale(1)' },
+      pressed: { transform: `scale(${bounceAmount})` },
+    },
+  });
+
+  // Add event listeners
+  Object.entries(animationListeners).forEach(([event, handler]) => {
+    el.addEventListener(event, handler);
+  });
+
+  // The cleanup function is essential here to ensure that all event listeners added by the directive are removed
+  // when the directive is unbound. Without this cleanup, the event listeners would remain attached to the element,
+  // potentially causing memory leaks and unexpected behavior. This function is called in the 'unbind' hook to properly
+  // clean up the element.
+  (el as TapAnimationElement).__tapAnimationCleanup = (): void => {
+    Object.entries(animationListeners).forEach(([event, handler]) => {
+      el.removeEventListener(event, handler);
+    });
+  };
+}
+
+export const tapAnimation: Directive<HTMLElement, TapAnimationValue> = {
+  beforeMount(el: HTMLElement, binding: DirectiveBinding<TapAnimationValue>): void {
+    // Check for reduced motion preference
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (prefersReducedMotion) {
+      return;
+    }
+
+    const bounceAmount = binding.value?.bounceAmount ?? DEFAULT_BOUNCE_AMOUNT;
+    setupTapAnimation(el, bounceAmount);
+  },
+
+  updated(el: HTMLElement, binding: DirectiveBinding<TapAnimationValue>): void {
+    // Check for reduced motion preference
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (prefersReducedMotion) {
+      return;
+    }
+
+    // If bounce amount changes, we need to re-mount the directive
+    if (binding.value?.bounceAmount !== binding.oldValue?.bounceAmount) {
+      (el as TapAnimationElement).__tapAnimationCleanup?.();
+      const bounceAmount = binding.value?.bounceAmount ?? DEFAULT_BOUNCE_AMOUNT;
+      setupTapAnimation(el, bounceAmount);
+    }
+  },
+
+  unmounted(el: HTMLElement): void {
+    (el as TapAnimationElement).__tapAnimationCleanup?.();
+  },
+};

package/src/services/id.ts

@@ -0,0 +1,31 @@
+/**
+ * Generates unique IDs for components. Useful for linking labels to inputs.
+ */
+export class ID {
+  private counters: Record<string, number> = {};
+
+  /**
+   * Generates a unique ID for a component.
+   *
+   * @example
+   * ```ts
+   * // From within a component
+   * id.getID(this.$options.name);
+   * ```
+   */
+  getID(componentName: string): string {
+    const counter = this.counters[componentName] || 0;
+    this.counters[componentName] = counter + 1;
+    const kebabCaseName = componentName.replace(/([a-zA-Z])([A-Z])/g, '$1-$2').toLowerCase();
+    return `${kebabCaseName}-${counter}`;
+  }
+
+  reset(): void {
+    this.counters = {};
+  }
+}
+
+/**
+ * @deprecated Use the `useId` composable instead.
+ */
+export default new ID();

package/src/services/injections/accordions.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey, Ref } from 'vue';
+
+export const FLUID = Symbol('fluid') as InjectionKey<Ref<boolean>>;
+export const ON_TOGGLE = Symbol('on-toggle') as InjectionKey<() => void>;

package/src/services/injections/animations.ts

@@ -0,0 +1,3 @@
+import type { InjectionKey, Ref } from 'vue';
+
+export const ANIMATIONS_DISABLED = Symbol('animations-disabled') as InjectionKey<Ref<boolean>>;

package/src/services/injections/buttons.ts

@@ -0,0 +1,5 @@
+import type { InjectionKey, Ref } from 'vue';
+
+export const BLOCK = Symbol('block') as InjectionKey<Ref<boolean>>;
+export const LARGE = Symbol('large') as InjectionKey<Ref<boolean>>;
+export const BOUNCE_AMOUNT = Symbol('bounce-amount') as InjectionKey<number>;

package/src/services/injections/forms.ts

@@ -0,0 +1,8 @@
+import type { InjectionKey } from 'vue';
+
+import type { ValidationState } from '@propelinc/citrus-ui/src/types/CForm';
+
+export const VALIDATIONS = Symbol('validations') as InjectionKey<{
+  register: (input: ValidationState) => void;
+  unregister: (id: string) => void;
+}>;

package/src/services/injections/icon-buttons.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey, Ref } from 'vue';
+
+export const TERTIARY = Symbol('tertiary') as InjectionKey<Ref<boolean>>;
+export const INHERIT_COLOR = Symbol('inherit-color') as InjectionKey<Ref<boolean>>;

package/src/services/injections/pills.ts

@@ -0,0 +1,7 @@
+import type { InjectionKey, Ref } from 'vue';
+
+export const SELECTED_VALUE = Symbol('selected-value') as InjectionKey<Ref<string>>;
+export const TOGGLE_VALUE = Symbol('toggle-value') as InjectionKey<
+  (value: string | undefined) => void
+>;
+export const ROLE = Symbol('role') as InjectionKey<Ref<string>>;

package/src/services/injections/radio.ts

@@ -0,0 +1,12 @@
+import type { InjectionKey, Ref } from 'vue';
+
+export interface RadioState {
+  value: unknown;
+  invalid: boolean;
+  name: string;
+  update: (value: unknown) => void;
+  register: (value: unknown) => void;
+  unregister: (value: unknown) => void;
+}
+
+export const RADIO_STATE = Symbol('radio-state') as InjectionKey<Ref<RadioState>>;

package/src/shims-vue.d.ts

@@ -1,4 +1,7 @@
-declare module '*.vue' {
-  import Vue from 'vue';
-  export default Vue;
+declare module 'vue' {
+  export interface ComponentCustomProperties {
+    $t: (key: string, interpolations?: Record<string, string | number>) => string;
+  }
 }
+
+export {};

package/src/styles/_animation.scss

@@ -0,0 +1,19 @@
+@keyframes skeleton-loader-animation {
+  0% {
+    background-position: 150%;
+  }
+
+  100% {
+    background-position: -50%;
+  }
+}
+
+@keyframes loader-spin-fast-slow {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(1080deg);
+  }
+}

package/src/styles/_button.scss

@@ -0,0 +1,61 @@
+@mixin button-theme($color, $border-color, $background-color) {
+  background-color: $background-color;
+  border-color: $border-color;
+  color: $color;
+}
+
+@mixin button-theme-primary() {
+  @include button-theme($color-white, $color-black, $color-black);
+
+  &:hover {
+    @include button-theme($color-white, $color-black, $color-black);
+  }
+}
+
+@mixin button-theme-secondary() {
+  @include button-theme($color-black, $color-black, transparent);
+
+  &:hover {
+    @include button-theme($color-black, $color-black, transparent);
+  }
+}
+
+@mixin button-theme-tertiary() {
+  @include button-theme($color-black, transparent, transparent);
+
+  &:hover {
+    @include button-theme($color-black, transparent, transparent);
+  }
+}
+
+@mixin button-theme-primary-danger() {
+  @include button-theme($color-white, $color-status-error, $color-status-error);
+
+  &:hover {
+    @include button-theme($color-white, $color-status-error, $color-status-error);
+  }
+}
+
+@mixin button-theme-secondary-danger() {
+  @include button-theme($color-status-error, $color-status-error, $color-white);
+
+  &:hover {
+    @include button-theme($color-status-error, $color-status-error, $color-white);
+  }
+}
+
+@mixin button-theme-tertiary-danger() {
+  @include button-theme($color-status-error, transparent, transparent);
+
+  &:hover {
+    @include button-theme($color-status-error, transparent, transparent);
+  }
+}
+
+@mixin button-theme-close() {
+  @include button-theme($color-black, $color-white, $color-white);
+
+  &:hover {
+    @include button-theme($color-black, $color-white, $color-white);
+  }
+}

package/src/styles/_colors.scss

@@ -1,4 +1,6 @@
-@import '~@/styles/core.scss';
+@import '@propelinc/citrus-ui/src/styles/core';
+
+// NOTE(slanden): Be sure to update the colors.ts file when updating this file.
 
 :export {
   ACCENT_BLUE: $color-accent-blue;
@@ -7,25 +9,70 @@
   ACCENT_GREEN: $color-accent-green;
   ACCENT_GREEN_SHADE_1: $color-accent-green-shade-1;
   ACCENT_GREEN_SHADE_2: $color-accent-green-shade-2;
+  ACCENT_ORANGE: $color-accent-orange;
+  ACCENT_ORANGE_SHADE_1: $color-accent-orange-shade-1;
+  ACCENT_ORANGE_SHADE_2: $color-accent-orange-shade-2;
+  ACCENT_PINK: $color-accent-pink;
+  ACCENT_PINK_SHADE_1: $color-accent-pink-shade-1;
+  ACCENT_PINK_SHADE_2: $color-accent-pink-shade-2;
+  ACCENT_RED_SHADE_1: $color-accent-red-shade-1;
+  ACCENT_RED_SHADE_2: $color-accent-red-shade-2;
   ALERT_RED: $color-alert-red;
-  LEMON: $color-lemon;
-  NAVY: $color-navy;
-  NAVY_TINT_1: $color-navy-tint-1;
-  NAVY_TINT_2: $color-navy-tint-2;
-  NAVY_TINT_3: $color-navy-tint-3;
-  NAVY_TINT_4: $color-navy-tint-4;
-  NEUTRAL: $color-neutral;
-  NEUTRAL_SHADE: $color-neutral-shade;
+  BACKGROUND: $color-background;
+  BLACK: $color-black;
+  BLUE_100: $color-blue-100;
+  BLUE_200: $color-blue-200;
+  BLUE_300: $color-blue-300;
+  BLUE_400: $color-blue-400;
+  BLUE_500: $color-blue-500;
+  BORDER: $color-border;
+  BUTTON_BACKGROUND: $color-button-background;
+  GOLD_100: $color-gold-100;
+  GOLD_200: $color-gold-200;
+  GOLD_300: $color-gold-300;
+  GOLD_400: $color-gold-400;
+  GOLD_500: $color-gold-500;
+  GRAY_100: $color-gray-100;
+  GRAY_200: $color-gray-200;
+  GRAY_300: $color-gray-300;
+  GRAY_400: $color-gray-400;
+  GRAY_500: $color-gray-500;
+  GREEN_100: $color-green-100;
+  GREEN_200: $color-green-200;
+  GREEN_300: $color-green-300;
+  GREEN_400: $color-green-400;
+  GREEN_500: $color-green-500;
   ORANGE: $color-orange;
-  PEACH: $color-peach;
+  ORANGE_TINT_1: $color-orange-tint-1;
+  ORANGE_TINT_2: $color-orange-tint-2;
   PINK: $color-pink;
+  PINK_TINT_1: $color-pink-tint-1;
+  PINK_TINT_2: $color-pink-tint-2;
   PROVIDERS_BLUE: $color-providers-blue;
   PROVIDERS_BLUE_TINT_1: $color-providers-blue-tint-1;
   PROVIDERS_BLUE_TINT_2: $color-providers-blue-tint-2;
   PROVIDERS_GREEN: $color-providers-green;
   PROVIDERS_GREEN_TINT_1: $color-providers-green-tint-1;
   PROVIDERS_GREEN_TINT_2: $color-providers-green-tint-2;
-  PURPLE: $color-purple;
+  PURPLE_100: $color-purple-100;
+  PURPLE_200: $color-purple-200;
+  PURPLE_300: $color-purple-300;
+  PURPLE_400: $color-purple-400;
+  PURPLE_500: $color-purple-500;
+  RED_100: $color-red-100;
+  RED_200: $color-red-200;
+  RED_300: $color-red-300;
+  RED_400: $color-red-400;
+  RED_500: $color-red-500;
+  STATUS_ERROR: $color-status-error;
+  STATUS_SUCCESS: $color-status-success;
+  STATUS_WARNING: $color-status-warning;
+  TEXT_DISABLED: $color-text-disabled;
+  TEXT_PLACEHOLDER: $color-text-placeholder;
+  TEXT_PRIMARY: $color-text-primary;
+  TEXT_SECONDARY: $color-text-secondary;
   WHITE: $color-white;
   YELLOW: $color-yellow;
+  YELLOW_TINT_1: $color-yellow-tint-1;
+  YELLOW_TINT_2: $color-yellow-tint-2;
 }