@citizenplane/pimp 16.0.3 → 16.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "16.0.3",
+  "version": "16.2.0",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",
@@ -11,6 +11,7 @@
     "lint:style:write": "stylelint \"**/*.{css,scss,vue}\" --fix",
     "format": "prettier . --write",
     "test": "jest tests",
+    "types": "vue-tsc --noEmit",
     "commitlint": "commitlint --edit",
     "prepare": "husky"
   },
@@ -48,11 +49,11 @@
     "@commitlint/cli": "20.4.2",
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.39.2",
-    "@storybook/addon-onboarding": "^9.1.17",
-    "@storybook/addon-vitest": "^9.0.18",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-onboarding": "^10.3.5",
+    "@storybook/addon-vitest": "^10.3.5",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/vue3": "^9.1.17",
-    "@storybook/vue3-vite": "^9.1.17",
+    "@storybook/vue3-vite": "^10.3.5",
     "@stylistic/eslint-plugin": "^5.7.1",
     "@types/feather-icons": "^4.29.4",
     "@types/vue-tel-input": "^2.1.7",
@@ -70,7 +71,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-perfectionist": "^5.4.0",
     "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-storybook": "^9.1.17",
+    "eslint-plugin-storybook": "^10.3.5",
     "eslint-plugin-vue": "^10.7.0",
     "globals": "^17.2.0",
     "husky": "^9.1.7",
@@ -81,11 +82,12 @@
     "prettier": "^3.6.2",
     "sass": "~1.97.3",
     "sass-loader": "^16.0.6",
-    "storybook": "^9.1.17",
+    "storybook": "^10.3.5",
     "ts-jest": "^29.4.6",
     "typescript-eslint": "^8.54.0",
     "vite": "^7.3.1",
-    "vitest": "^4.0.18"
+    "vitest": "^4.0.18",
+    "vue-tsc": "3.2.5"
   },
   "eslintConfig": {
     "extends": [

package/src/components/CpDate.vue

@@ -246,7 +246,9 @@ const selectDynamicClass = computed(() => {
 })
 
 const autocompleteFields = computed(() => {
-  if (!props.autocompleteBirthday) return 'off'
+  if (!props.autocompleteBirthday) {
+    return { day: 'off', month: 'off', year: 'off' }
+  }
 
   return {
     day: 'bday-day',

package/src/components/CpHeading.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="$props.headingLevel" v-bind="$attrs" :class="`cpHeading--${size}`" class="cpHeading">
+  <component :is="$props.headingLevel" class="cpHeading" :class="`cpHeading--${size}`" v-bind="$attrs">
     <slot />
   </component>
 </template>
@@ -7,12 +7,11 @@
 <script setup lang="ts">
 import { HeadingLevels } from '@/constants'
 
-/**
- * @deprecated This component is deprecated. Please use directly CSS variables instead.
- */
-
 type HeadingSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
 
+/**
+ * @deprecated `CpHeading` is deprecated. Use CpText instead.
+ */
 interface Props {
   headingLevel?: HeadingLevels
   size?: HeadingSize

package/src/components/CpMultiselect.vue

@@ -166,11 +166,8 @@ const selectModel = computed({
   get() {
     return props.modelValue
   },
-  set(value: string | object | string[] | null) {
-    if (typeof value === 'string') {
-      return
-    }
-
+  set(value) {
+    if (typeof value === 'string') return
     emit('update:modelValue', value)
   },
 })

package/src/components/CpTable.vue

@@ -126,6 +126,8 @@
 <script setup lang="ts">
 import { ref, computed, useId, watch } from 'vue'
 
+import type { MenuItemCommandEvent } from 'primevue/menuitem'
+
 import { CpTableColumnObject } from '@/constants/CpTableColumn'
 
 import CpContextualMenu from '@/components/CpContextualMenu.vue'
@@ -154,7 +156,7 @@ interface Pagination {
 }
 
 interface RowOptions {
-  action: (rowData: Record<string, unknown>, $event: MouseEvent) => void
+  action: (rowData: Record<string, unknown>, $event: Event) => void
   icon: string
   id: string
   isAsync?: boolean
@@ -228,7 +230,7 @@ const currentRowData = ref<Record<string, unknown>>({})
 const contextualMenuItems = computed(() => {
   return props.rowOptions.map((option) => ({
     ...option,
-    command: ({ originalEvent }: { originalEvent: MouseEvent }) => option.action(currentRowData.value, originalEvent),
+    command: (event: MenuItemCommandEvent) => option.action(currentRowData.value, event.originalEvent),
   }))
 })
 

package/src/components/CpTelInput.vue

@@ -41,7 +41,9 @@
 </template>
 
 <script setup lang="ts">
-import { useAttrs, ref, useId, computed, nextTick } from 'vue'
+import { computed, nextTick, ref, useAttrs, useId, useTemplateRef } from 'vue'
+
+import type { ComponentPublicInstance } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 
@@ -97,7 +99,13 @@ interface Emits {
 }
 
 const inputModel = defineModel<string>()
-const telInputRef = ref<HTMLInputElement | null>(null)
+
+type VueTelInputInstance = ComponentPublicInstance & {
+  $el: HTMLElement
+  focus: VoidFunction
+}
+
+const telInputRefElement = useTemplateRef<VueTelInputInstance>('telInputRef')
 
 const helpMessageId = useId()
 const errorMessageId = useId()
@@ -139,27 +147,25 @@ const displayErrorMessage = computed(() => props.isInvalid && props.errorMessage
 const displayHelp = computed(() => props.help?.length && !displayErrorMessage.value)
 
 const focusOnInput = async () => {
-  if (!telInputRef.value) return
-  setTimeout(() => telInputRef.value?.focus(), 1)
+  if (!telInputRefElement.value) return
+  setTimeout(() => telInputRefElement.value?.focus(), 1)
 }
 
 const handleDropdownOpen = async () => {
-  if (!telInputRef.value) return
+  if (!telInputRefElement.value) return
+
   await nextTick()
 
-  const searchBox = telInputRef.value?.$el?.querySelector('input.vti__search_box')
+  const searchBox = telInputRefElement.value?.$el?.querySelector('input.vti__search_box')
+
   if (!searchBox) return
 
   setTimeout(() => searchBox.focus(), 1)
 }
 
-const handleCountryChanged = (country: { iso2: string }) => {
-  emit('countryChanged', country?.iso2 || '')
-}
+const handleCountryChanged = (country: { iso2: string }) => emit('countryChanged', country?.iso2 || '')
 
-const handleOnValidate = (phoneObject: PhoneObject) => {
-  emit('validate', phoneObject)
-}
+const handleOnValidate = (phoneObject: PhoneObject) => emit('validate', phoneObject)
 </script>
 
 <style lang="scss">

package/src/components/CpText.vue

@@ -0,0 +1,141 @@
+<template>
+  <component :is="tag" class="cpText" :class="dynamicClasses" v-bind="$attrs">
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { capitalizeFirstLetter } from '@/helpers'
+
+export type CpTextSize =
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | '4xl'
+  | '5xl'
+  | '6xl'
+  | '7xl'
+  | '8xl'
+  | '9xl'
+
+export type CpTextWeight = 400 | 500 | 600 | 700
+
+interface Props {
+  size?: CpTextSize
+  tag?: string
+  weight?: CpTextWeight
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  tag: 'p',
+  weight: 400,
+})
+
+const weightList = {
+  400: 'normal',
+  500: 'medium',
+  600: 'semibold',
+  700: 'bold',
+}
+
+const dynamicClasses = computed(() => [
+  `cpText--${props.size}`,
+  `cpText--is${capitalizeFirstLetter(weightList[props.weight])}`,
+])
+
+defineOptions({
+  inheritAttrs: false,
+})
+</script>
+
+<style lang="scss">
+.cpText {
+  &--xs {
+    font-size: var(--cp-text-size-xs);
+    line-height: var(--cp-line-height-xs);
+  }
+
+  &--sm {
+    font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-sm);
+  }
+
+  &--md {
+    font-size: var(--cp-text-size-md);
+    line-height: var(--cp-line-height-md);
+  }
+
+  &--lg {
+    font-size: var(--cp-text-size-lg);
+    line-height: var(--cp-line-height-lg);
+  }
+
+  &--xl {
+    font-size: var(--cp-text-size-xl);
+    line-height: var(--cp-line-height-xl);
+  }
+
+  &--2xl {
+    font-size: var(--cp-text-size-2xl);
+    line-height: var(--cp-line-height-2xl);
+  }
+
+  &--3xl {
+    font-size: var(--cp-text-size-3xl);
+    line-height: var(--cp-line-height-3xl);
+  }
+
+  &--4xl {
+    font-size: var(--cp-text-size-4xl);
+    line-height: var(--cp-line-height-4xl);
+  }
+
+  &--5xl {
+    font-size: var(--cp-text-size-5xl);
+    line-height: var(--cp-line-height-5xl);
+  }
+
+  &--6xl {
+    font-size: var(--cp-text-size-6xl);
+    line-height: var(--cp-line-height-6xl);
+  }
+
+  &--7xl {
+    font-size: var(--cp-text-size-7xl);
+    line-height: var(--cp-line-height-7xl);
+  }
+
+  &--8xl {
+    font-size: var(--cp-text-size-8xl);
+    line-height: var(--cp-line-height-8xl);
+  }
+
+  &--9xl {
+    font-size: var(--cp-text-size-9xl);
+    line-height: var(--cp-line-height-9xl);
+  }
+
+  &--isNormal {
+    font-weight: 400;
+  }
+
+  &--isMedium {
+    font-weight: 500;
+  }
+
+  &--isSemibold {
+    font-weight: 600;
+  }
+
+  &--isBold {
+    font-weight: 700;
+  }
+}
+</style>

package/src/components/CpToast.vue

@@ -92,7 +92,7 @@ interface Message {
   summary: string
 }
 
-onMounted(() => ToastEventBus.on('add', handleToastAdded))
+onMounted(() => ToastEventBus.on('add', (payload: unknown) => handleToastAdded(payload as Message)))
 
 const displayTimer = (message: Message) => message.showTimer && message.life !== undefined
 

package/src/components/CpTransitionExpand.vue

@@ -1,47 +1,50 @@
 <template>
-  <transition name="expand" @enter="enter" @after-enter="afterEnter" @leave="leave">
+  <transition name="expand" @after-enter="afterEnter" @enter="enter" @leave="leave">
     <slot />
   </transition>
 </template>
 
 <script setup lang="ts">
-const afterEnter = (element: HTMLElement): void => {
-  element.style.height = `auto`
+const afterEnter = (element: Element) => {
+  const el = element as HTMLElement
+  el.style.height = `auto`
 }
 
-const enter = (element: HTMLElement): void => {
-  const { width } = getComputedStyle(element)
+const enter = (element: Element) => {
+  const el = element as HTMLElement
+  const { width } = getComputedStyle(el)
 
-  element.style.width = width
-  element.style.position = `absolute`
-  element.style.visibility = `hidden`
-  element.style.height = `auto`
+  el.style.width = width
+  el.style.position = `absolute`
+  el.style.visibility = `hidden`
+  el.style.height = `auto`
 
-  const { height } = getComputedStyle(element)
+  const { height } = getComputedStyle(el)
 
-  element.style.width = ''
-  element.style.position = ''
-  element.style.visibility = ''
-  element.style.height = '0'
+  el.style.width = ''
+  el.style.position = ''
+  el.style.visibility = ''
+  el.style.height = '0'
 
   // Force repaint to make sure the
   // animation is triggered correctly.
 
   // @typescript-eslint/no-unused-expressions
-  void getComputedStyle(element).height
+  void getComputedStyle(el).height
 
-  requestAnimationFrame(() => (element.style.height = height))
+  requestAnimationFrame(() => (el.style.height = height))
 }
 
-const leave = (element: HTMLElement): void => {
-  const { height } = getComputedStyle(element)
+const leave = (element: Element): void => {
+  const el = element as HTMLElement
+  const { height } = getComputedStyle(el)
 
-  element.style.height = height
+  el.style.height = height
 
   // Force repaint to make sure the
   // animation is triggered correctly.
   requestAnimationFrame(() => {
-    element.style.height = '0'
+    el.style.height = '0'
   })
 }
 </script>

package/src/components/index.ts

@@ -46,6 +46,7 @@ import CpTable from './CpTable.vue'
 import CpTableColumnEditor from './CpTableColumnEditor.vue'
 import CpTabs from './CpTabs.vue'
 import CpTelInput from './CpTelInput.vue'
+import CpText from './CpText.vue'
 import CpTextarea from './CpTextarea.vue'
 import CpToast from './CpToast.vue'
 import CpTooltip from './CpTooltip.vue'
@@ -87,6 +88,7 @@ const Components = {
   CpAlert,
   CpLoader,
   CpInput,
+  CpText,
   CpTextarea,
   CpSelect,
   CpSelectMenu,

package/src/libs/CoreDatepicker.vue

@@ -127,6 +127,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck — legacy Options API bundle; excluded from strict type-checking until a typed rewrite.
 import { DateTime, Info } from 'luxon'
 import { useId } from 'vue'
 

package/src/stories/BaseInputLabel.stories.ts

@@ -1,9 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 
+import { docCellStyle, docLabelStyle, docRowWrapStyle } from '@/stories/documentationStyles'
+
 const meta = {
-  title: 'Form/BaseInputLabel',
+  title: 'Atoms/BaseInputLabel',
   component: BaseInputLabel,
   argTypes: {
     isInvalid: {
@@ -16,20 +18,45 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+/**
+ * Default label used above form controls. Use the controls to experiment
+ * with each prop in isolation.
+ */
 export const Default: Story = {
-  args: {
-    isInvalid: false,
-  },
-  render: (args) => ({
+  args: { isInvalid: false },
+  render: (args: Args) => ({
     components: { BaseInputLabel },
     setup() {
       return { args }
     },
     template: `
       <div class="baseInputLabel-story">
-        <BaseInputLabel v-bind="args">
-          Default Label
-        </BaseInputLabel>
+        <BaseInputLabel v-bind="args">Default Label</BaseInputLabel>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Default and invalid states side by side.
+ */
+export const States: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { BaseInputLabel },
+    setup() {
+      return { docCellStyle, docLabelStyle, docRowWrapStyle }
+    },
+    template: `
+      <div :style="docRowWrapStyle">
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Default</span>
+          <BaseInputLabel>Default Label</BaseInputLabel>
+        </div>
+        <div :style="docCellStyle">
+          <span :style="docLabelStyle">Invalid</span>
+          <BaseInputLabel :is-invalid="true">Invalid Label</BaseInputLabel>
+        </div>
       </div>
     `,
   }),

package/src/stories/Colors.mdx

@@ -0,0 +1,9 @@
+import { Meta, Title, Description, Stories } from '@storybook/addon-docs/blocks'
+
+import * as ColorsStories from './Colors.stories'
+
+<Meta of={ColorsStories} />
+
+<Title />
+<Description />
+<Stories />