@citizenplane/pimp 8.26.0 → 8.27.0

package/src/components/toggles/CpSwitch.vue

@@ -22,76 +22,60 @@
   </label>
 </template>
 
-<script>
-import { capitalizeFirstLetter, randomString } from '@/helpers'
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
 import { ToggleColors } from '@/constants'
+import { capitalizeFirstLetter, randomString } from '@/helpers'
 
-export default {
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: null,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    groupName: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    color: {
-      type: String,
-      required: false,
-      default: ToggleColors.BLUE,
-      validator: (value) => Object.values(ToggleColors).includes(value),
-    },
-    reverseLabel: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    autofocus: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      switchUniqueId: '',
-    }
-  },
-  computed: {
-    capitalizedColor() {
-      return capitalizeFirstLetter(this.color)
-    },
-    computedClasses() {
-      return [
-        {
-          'cpSwitch--hasLabel': this.label,
-          'cpSwitch--isActive': this.modelValue,
-          'cpSwitch--isDisabled': this.disabled,
-          'cpSwitch--isReversed': this.reverseLabel,
-        },
-        `cpSwitch--is${this.capitalizedColor}`,
-      ]
-    },
-  },
-  mounted() {
-    this.switchUniqueId = randomString()
-  },
-  methods: {
-    handleClick(value) {
-      this.$emit('update:modelValue', !value)
+interface Props {
+  autofocus?: boolean
+  color?: string
+  disabled?: boolean
+  groupName?: string
+  label?: string
+  modelValue?: boolean
+  reverseLabel?: boolean
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: boolean): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  label: '',
+  disabled: false,
+  groupName: '',
+  color: ToggleColors.BLUE,
+  reverseLabel: false,
+  autofocus: false,
+})
+
+const emit = defineEmits<Emits>()
+
+const switchUniqueId = ref('')
+
+switchUniqueId.value = randomString()
+
+const capitalizedColor = computed(() => {
+  return capitalizeFirstLetter(props.color)
+})
+
+const computedClasses = computed(() => {
+  return [
+    {
+      'cpSwitch--hasLabel': props.label,
+      'cpSwitch--isActive': props.modelValue,
+      'cpSwitch--isDisabled': props.disabled,
+      'cpSwitch--isReversed': props.reverseLabel,
     },
-  },
+    `cpSwitch--is${capitalizedColor.value}`,
+  ]
+})
+
+const handleClick = (value: boolean): void => {
+  emit('update:modelValue', !value)
 }
 </script>
 

package/src/components/typography/CpHeading.vue

@@ -4,42 +4,24 @@
   </component>
 </template>
 
-<script>
-const headingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+<script setup lang="ts">
+import { HeadingLevels } from '@/constants'
 
-const sizes = [100, 200, 300, 400, 500, 600, 700, 800, 900]
+type HeadingSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
 
-export default {
-  props: {
-    headingLevel: {
-      type: String,
-      default: headingLevels[0],
-      validator: (value) => {
-        return headingLevels.includes(value)
-      },
-      required: false,
-    },
-    size: {
-      type: Number,
-      default: sizes[4],
-      validator: (value) => {
-        return sizes.includes(value)
-      },
-      required: false,
-    },
-  },
-  data() {
-    return {
-      headingLevels,
-    }
-  },
+interface Props {
+  headingLevel?: HeadingLevels
+  size?: HeadingSize
 }
+
+withDefaults(defineProps<Props>(), {
+  headingLevel: HeadingLevels.H1,
+  size: 500,
+})
 </script>
 
 <style lang="scss">
 .cpHeading {
-  color: colors.$neutral-dark;
-
   &:first-letter {
     text-transform: capitalize;
   }
@@ -49,14 +31,12 @@ export default {
     font-weight: 400;
     line-height: fn.px-to-rem(16);
     letter-spacing: fn.px-to-em(0.6);
-    color: colors.$neutral-dark-1;
   }
 
   &--200 {
     font-size: fn.px-to-rem(12);
     font-weight: 600;
     line-height: fn.px-to-rem(16);
-    color: colors.$neutral-dark-1;
   }
 
   &--300 {

package/src/components/visual/CpIcon.vue

@@ -5,8 +5,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import * as feather from 'feather-icons'
+import { computed } from 'vue'
+
 import { CustomCpIcons } from '@/constants'
 
 interface Props {

package/src/constants/{src/CpCustomIcons.ts → CpCustomIcons.ts}

@@ -1,6 +1,6 @@
 import { defineAsyncComponent } from 'vue'
 
-export default {
+export const CustomCpIcons = {
   'accompanied-minor-each': defineAsyncComponent(() => import('@/components/icons/IconAccompaniedMinorEach.vue')),
   'accompanied-minor-none': defineAsyncComponent(() => import('@/components/icons/IconAccompaniedMinorNone.vue')),
   'accompanied-minor-one': defineAsyncComponent(() => import('@/components/icons/IconAccompaniedMinorOne.vue')),

package/src/constants/CpTableConfig.ts

@@ -0,0 +1,12 @@
+export const VISIBLE_ROWS_MAX = 100
+
+export enum RESERVED_KEYS {
+  GROUP_BY = 'groupBy',
+  FULL_WIDTH = 'fullWidth',
+  IS_SELECTED = 'isSelected',
+}
+
+export enum PAGINATION_FORMATS {
+  RESULTS = 'results',
+  PAGES = 'pages',
+}

package/src/constants/Heading.ts

@@ -0,0 +1,8 @@
+export enum HeadingLevels {
+  H1 = 'h1',
+  H2 = 'h2',
+  H3 = 'h3',
+  H4 = 'h4',
+  H5 = 'h5',
+  H6 = 'h6',
+}

package/src/{utils/constants/src/Intent.js → constants/Intent.ts}

@@ -1,4 +1,4 @@
-export default {
+export const Intent = {
   SUCCESS: {
     value: 'success',
     icon: 'check-circle',

package/src/constants/PartnerTypes.ts

@@ -0,0 +1,6 @@
+export enum PartnerTypes {
+  OTA = 'ota',
+  AIRLINE = 'airline',
+  SUPPLIER = 'supplier',
+  THIRDPARTY = 'thirdParty',
+}

package/src/constants/Position.ts

@@ -0,0 +1,10 @@
+export enum Position {
+  TOP = 'top',
+  TOP_LEFT = 'top-left',
+  TOP_RIGHT = 'top-right',
+  BOTTOM = 'bottom',
+  BOTTOM_LEFT = 'bottom-left',
+  BOTTOM_RIGHT = 'bottom-right',
+  LEFT = 'left',
+  RIGHT = 'right',
+}

package/src/constants/Sizes.ts

@@ -0,0 +1,5 @@
+export enum Sizes {
+  XS = 'xs',
+  SM = 'sm',
+  MD = 'md',
+}

package/src/constants/colors/Colors.ts

@@ -0,0 +1,10 @@
+export enum Colors {
+  BLUE = 'blue',
+  GRAY = 'gray',
+  GREEN = 'green',
+  ORANGE = 'orange',
+  PINK = 'pink',
+  PURPLE = 'purple',
+  RED = 'red',
+  YELLOW = 'yellow',
+}

package/src/constants/colors/ToggleColors.ts

@@ -0,0 +1,6 @@
+import { Colors } from './Colors'
+
+export enum ToggleColors {
+  BLUE = Colors.BLUE,
+  PURPLE = Colors.PURPLE,
+}

package/src/constants/index.ts

@@ -1,5 +1,10 @@
-export { default as Colors } from './src/colors/Colors'
-export { default as ToggleColors } from './src/colors/ToggleColors'
-export { default as Position } from './src/Position'
-export { default as CpTableConfig } from './src/CpTableConfig'
-export { default as CustomCpIcons } from './src/CpCustomIcons'
+export { Colors } from './colors/Colors'
+export { Position } from './Position'
+export { ToggleColors } from './colors/ToggleColors'
+export { HeadingLevels } from './Heading'
+export { PAGINATION_FORMATS, RESERVED_KEYS, VISIBLE_ROWS_MAX } from './CpTableConfig'
+export { Sizes } from './Sizes'
+export { PartnerTypes } from './PartnerTypes'
+
+export { CustomCpIcons } from './CpCustomIcons'
+export { Intent } from './Intent'

package/src/directives/ClickOutside.ts

@@ -0,0 +1,17 @@
+type ClickOutsideBinding = {
+  value: (event: MouseEvent, el: HTMLElement) => void
+}
+
+export default {
+  beforeMount(el: HTMLElement & { clickOutsideEvent?: (e: MouseEvent) => void }, binding: ClickOutsideBinding) {
+    el.clickOutsideEvent = function (event: MouseEvent) {
+      if (!(el === event.target || el.contains(event.target as Node))) {
+        binding.value(event, el)
+      }
+    }
+    document.body.addEventListener('click', el.clickOutsideEvent)
+  },
+  unmounted(el: HTMLElement & { clickOutsideEvent?: (e: MouseEvent) => void }) {
+    document.body.removeEventListener('click', el.clickOutsideEvent as (e: MouseEvent) => void)
+  },
+}

package/src/directives/{ResizeSelect.js → ResizeSelect.ts}

@@ -3,13 +3,13 @@ export default {
   inserted: resizeSelect,
 }
 
-function resizeSelect(el) {
+function resizeSelect(el: HTMLSelectElement) {
   const select = document.createElement('select')
   select.className = el.className
   const option = document.createElement('option')
   option.textContent = el.value
   select.appendChild(option)
-  el.parentNode.appendChild(select)
+  el.parentNode?.appendChild(select)
   el.style.width = select.offsetWidth + 'px'
-  select.parentNode.removeChild(select)
+  select.parentNode?.removeChild(select)
 }

package/src/helpers/{dom.js → dom.ts}

@@ -1,9 +1,11 @@
-export const getKeyboardFocusableElements = (DOMElement = document) => {
-  if (DOMElement === null) return []
+export const getKeyboardFocusableElements = (DOMElement: Document | HTMLElement | null = document) => {
+  if (DOMElement === null) return [] as (HTMLElement | SVGElement)[]
 
-  const focusableElements = [
-    ...DOMElement.querySelectorAll('a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'),
-  ]
+  const focusableElements = Array.from(
+    (DOMElement as Document | HTMLElement).querySelectorAll<HTMLElement | SVGElement>(
+      'a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])',
+    ),
+  )
 
   if (!focusableElements.length) {
     return DOMElement instanceof HTMLElement ? [DOMElement] : []
@@ -11,7 +13,7 @@ export const getKeyboardFocusableElements = (DOMElement = document) => {
 
   return focusableElements.filter((element) => {
     const isElementDisabled = element.hasAttribute('disabled')
-    const isElementVisible = element.offsetHeight !== 0 && element.offsetWidth !== 0
+    const isElementVisible = (element as HTMLElement).offsetHeight !== 0 && (element as HTMLElement).offsetWidth !== 0
 
     const isInputElement = element instanceof HTMLInputElement
     const isElementRadioNotChecked = isInputElement && element.type === 'radio' && element.checked === false
@@ -20,7 +22,9 @@ export const getKeyboardFocusableElements = (DOMElement = document) => {
   })
 }
 
-export const handleTrapFocus = (event, DOMElement) => {
+export const handleTrapFocus = (event: KeyboardEvent, DOMElement?: HTMLElement) => {
+  if (!DOMElement) return
+
   const childFocusableElements = getKeyboardFocusableElements(DOMElement)
   const firstElement = childFocusableElements[0]
   const lastElement = childFocusableElements[childFocusableElements.length - 1]
@@ -32,10 +36,10 @@ export const handleTrapFocus = (event, DOMElement) => {
     // only TAB is pressed, not SHIFT simultaneously
     // Prevent default behavior of keydown on TAB (i.e. focus next element)
     event.preventDefault()
-    firstElement.focus()
+    firstElement?.focus()
   } else if (tabBackwards) {
     // TAB and SHIFT are pressed simultaneously
     event.preventDefault()
-    lastElement.focus()
+    lastElement?.focus()
   }
 }

package/src/helpers/{index.js → index.ts}

@@ -1,10 +1,20 @@
 import { DateTime } from 'luxon'
 
-export const randomString = () => {
+export const randomString = (): string => {
   return `_${Math.random().toString(36).substr(2, 9)}`
 }
 
-export const formatDates = function formatDates({ dateOne, dateTwo, format, locale }) {
+export const formatDates = ({
+  dateOne,
+  dateTwo,
+  format,
+  locale,
+}: {
+  dateOne?: string
+  dateTwo?: string
+  format: string
+  locale?: string
+}): string => {
   let formattedDates = ''
 
   if (dateOne) {
@@ -17,7 +27,7 @@ export const formatDates = function formatDates({ dateOne, dateTwo, format, loca
   return formattedDates
 }
 
-export const capitalizeFirstLetter = (rawString) => {
+export const capitalizeFirstLetter = (rawString: unknown): string => {
   if (typeof rawString !== 'string') return ''
   return rawString.charAt(0).toUpperCase() + rawString.slice(1)
 }

package/src/helpers/object.ts

@@ -0,0 +1,9 @@
+export const isObject = (value: unknown): value is Record<string, unknown> => {
+  return value !== null && typeof value === 'object'
+}
+
+export const isEmpty = (obj: unknown): boolean => {
+  if (!isObject(obj)) return true
+
+  return Reflect.ownKeys(obj).length === 0 && (obj as { constructor: unknown }).constructor === Object
+}

package/src/helpers/string/src/camelize.ts

@@ -0,0 +1,6 @@
+export default function camelize(input: string): string {
+  return input.replace(/^[\w]|[A-Z]|\b\w|\s+/g, (match, index: number) => {
+    if (+match === 0) return ''
+    return index === 0 ? match.toLowerCase() : match.toUpperCase()
+  })
+}

package/src/helpers/string/src/{decamelize.js → decamelize.ts}

@@ -1,4 +1,4 @@
-export default function decamelize(camelCasedString, separator = ' ') {
+export default function decamelize(camelCasedString: string, separator = ' '): string {
   return camelCasedString
     .replace(/([a-z\d])([A-Z])/g, `$1${separator}$2`)
     .replace(/([A-Z]+)([A-Z][a-z\d]+)/g, `$1${separator}$2`)

package/src/libs/CoreDatepicker.vue

@@ -126,14 +126,14 @@
   </transition>
 </template>
 
-<script>
+<script lang="ts">
 import { DateTime, Info } from 'luxon'
 
-import { randomString } from '@/helpers'
-import ResizeSelect from '@/directives/ResizeSelect'
-
 import CpIcon from '@/components/visual/CpIcon.vue'
 
+import ResizeSelect from '@/directives/ResizeSelect'
+import { randomString } from '@/helpers'
+
 export default {
   name: 'CoreDatepicker',
   components: {

package/src/plugins/toaster.ts

@@ -0,0 +1,71 @@
+import { App, h, render, VNode } from 'vue'
+
+import CpToaster from '@/components/feedback-indicators/CpToaster.vue'
+
+import { Intent } from '@/constants'
+
+type MountOptions = {
+  app?: App | null
+  children?: unknown
+  element?: HTMLElement | null
+  props?: Record<string, unknown>
+}
+
+const createElement = () => (typeof document !== 'undefined' ? document.createElement('div') : null)
+
+const mount = (component: unknown, { props, children, element, app }: MountOptions = {}) => {
+  let el: HTMLElement | null = element ? element : createElement()
+
+  // @ts-expect-error <comment on type error>
+  let vNode: VNode = h(component, props, children)
+  if (app && app._context) {
+    vNode.appContext = app._context
+  }
+
+  render(vNode, el as HTMLElement)
+
+  const destroy = () => {
+    if (el) {
+      render(null, el)
+    }
+    el = null
+    // @ts-expect-error explicit nulling for GC
+    vNode = null
+  }
+
+  return { vNode, destroy, el }
+}
+
+const createToaster = (globalOptions: Record<string, unknown> = {}) => {
+  return {
+    show(options: Record<string, unknown> = {}) {
+      const localOptions = { ...options }
+
+      mount(CpToaster, {
+        props: { ...globalOptions, ...localOptions },
+      })
+    },
+    unique(options: Record<string, unknown> = {}) {
+      options.isUnique = true
+      return this.show(options)
+    },
+    success(options: Record<string, unknown> = {}) {
+      options.type = Intent.SUCCESS.value
+      return this.show(options)
+    },
+    critical(options: Record<string, unknown> = {}) {
+      options.type = Intent.CRITICAL.value
+      return this.show(options)
+    },
+    info(options: Record<string, unknown> = {}) {
+      options.type = Intent.INFO.value
+      return this.show(options)
+    },
+    warning(options: Record<string, unknown> = {}) {
+      options.type = Intent.WARNING.value
+      return this.show(options)
+    },
+  }
+}
+
+export default createToaster

package/src/stories/BaseInputLabel.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+
 import BaseInputLabel from '@/components/core/BaseInputLabel.vue'
 
 const meta = {

package/src/stories/CpAlert.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+
 import CpAlert from '@/components/feedback-indicators/CpAlert.vue'
 
 const meta = {

package/src/stories/CpBadge.stories.ts

@@ -20,6 +20,10 @@ const meta = {
       control: 'boolean',
       description: 'Whether the badge has a stroked border',
     },
+    isSquare: {
+      control: 'boolean',
+      description: 'Whether the badge has a square border',
+    },
     leadingIcon: {
       control: 'select',
       options: ['check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down'],
@@ -46,6 +50,7 @@ export const Default: Story = {
     color: 'gray',
     size: 'md',
     isStroked: false,
+    isSquare: false,
     leadingIcon: '',
     trailingIcon: '',
     label: 'Badge',
@@ -115,6 +120,19 @@ export const WithIcons: Story = {
   }),
 }
 
+export const IsSquare: Story = {
+  render: () => ({
+    components: { CpBadge },
+    template: `
+      <div style="display: flex; gap: 8px; align-items: center;">
+        <CpBadge color="blue" isSquare label="Square" />
+        <CpBadge color="green" isSquare label="Square" />
+        <CpBadge color="red" isSquare label="Square" />
+      </div>
+    `,
+  }),
+}
+
 export const IsClearable: Story = {
   render: () => ({
     components: { CpBadge },

package/src/stories/CpCheckbox.stories.ts

@@ -1,5 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
 import { ref } from 'vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
 import CpCheckbox from '@/components/toggles/CpCheckbox.vue'
 
 const meta = {

package/src/stories/CpDate.stories.ts

@@ -1,5 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
 import { ref } from 'vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
 import CpDate from '@/components/date-pickers/CpDate.vue'
 
 const meta = {

package/src/stories/CpDatepicker.stories.ts

@@ -1,5 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
 import { ref } from 'vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
 import CpDatepicker from '@/components/date-pickers/CpDatepicker.vue'
 
 const meta = {

package/src/stories/CpDialog.stories.ts

@@ -1,6 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
 import { ref } from 'vue'
 
+import type { Meta, StoryObj } from '@storybook/vue3'
+
 import CpDialog from '@/components/atomic-elements/CpDialog.vue'
 
 const meta = {

package/src/stories/CpHeading.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+
 import CpHeading from '@/components/typography/CpHeading.vue'
 
 const meta = {

package/src/stories/CpIcon.stories.ts

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+
 import CpIcon from '@/components/visual/CpIcon.vue'
+
 import { CustomCpIcons } from '@/constants'
 
 const iconsOptions = [

package/src/stories/CpInput.stories.ts

@@ -1,5 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
 import { ref } from 'vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
 import CpInput from '@/components/inputs/CpInput.vue'
 
 const meta = {