@nectary/components 4.8.1 → 4.9.0

package/tooltip/types.d.ts

@@ -1,32 +1,8 @@
-import type { TRect, TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
 export type TSinchTooltipOrientation = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export type TSinchTooltipTextAlign = 'center' | 'right' | 'left';
 export type TSinchTooltipType = 'slow' | 'fast';
-export type TSinchTooltipElement = HTMLElement & {
-    /** Text */
-    text: string;
-    /** Orientation, where it *points to* from origin */
-    orientation: TSinchTooltipOrientation;
-    /** Type */
-    type: TSinchTooltipType;
-    /** Text Align */
-    'text-align': TSinchTooltipTextAlign;
-    readonly footprintRect: TRect;
-    readonly tooltipRect: TRect;
-    /** Show event */
-    addEventListener(type: '-show', listener: (e: CustomEvent<void>) => void): void;
-    /** Hide event */
-    addEventListener(type: '-hide', listener: (e: CustomEvent<void>) => void): void;
-    /** Text */
-    setAttribute(name: 'text', value: string): void;
-    /** Orientation, where it *points to* from origin */
-    setAttribute(name: 'orientation', value: TSinchTooltipOrientation): void;
-    /** Type */
-    setAttribute(name: 'type', value: TSinchTooltipType): void;
-    /** Text Align */
-    setAttribute(name: 'text-align', value: TSinchTooltipTextAlign): void;
-};
-export type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
+export type TSinchTooltipProps = {
     /** Text */
     text: string;
     /** Orientation, where it *points to* from origin */
@@ -35,19 +11,29 @@ export type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
     type?: TSinchTooltipType;
     /** Text Align */
     'text-align'?: TSinchTooltipTextAlign;
+    readonly footprintRect?: TRect;
+    readonly tooltipRect?: TRect;
+};
+export type TSinchTooltipEvents = {
     /** Show event handler */
-    'on-show'?: (e: CustomEvent<void>) => void;
+    '-show'?: (e: CustomEvent<void>) => void;
     /** Hide event handler */
-    'on-hide'?: (e: CustomEvent<void>) => void;
-} & {
-    style?: {
-        '--sinch-comp-tooltip-shadow'?: string;
-        '--sinch-comp-tooltip-shape-radius'?: string;
-        '--sinch-comp-tooltip-color-background'?: string;
-        '--sinch-comp-tooltip-color-text'?: string;
-        '--sinch-local-color-background'?: string;
-        '--sinch-comp-tooltip-font-body'?: string;
-        '--sinch-comp-text-align'?: string;
-        '--sinch-global-color-text'?: string;
-    };
+    '-hide'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchTooltipStyle = {
+    '--sinch-comp-tooltip-shadow'?: string;
+    '--sinch-comp-tooltip-shape-radius'?: string;
+    '--sinch-comp-tooltip-color-background'?: string;
+    '--sinch-comp-tooltip-color-text'?: string;
+    '--sinch-local-color-background'?: string;
+    '--sinch-comp-tooltip-font-body'?: string;
+    '--sinch-comp-text-align'?: string;
+    '--sinch-global-color-text'?: string;
+};
+export type TSinchTooltip = {
+    props: TSinchTooltipProps;
+    events: TSinchTooltipEvents;
+    style: TSinchTooltipStyle;
 };
+export type TSinchTooltipElement = NectaryComponentVanillaByType<TSinchTooltip>;
+export type TSinchTooltipReact = NectaryComponentReactByType<TSinchTooltip>;

package/types.d.ts

@@ -1,10 +1,5 @@
 import type { ClassAttributes, DOMAttributes, HTMLAttributes } from 'react'
-
-export type TSinchElementReact<TElement> =
-  Pick<HTMLAttributes<HTMLElement>, 'id' | 'className' | 'style' | 'slot' | 'children'> &
-  ClassAttributes<TElement> &
-  Pick<DOMAttributes<TElement>, 'onClick' | 'onDoubleClick' | 'onMouseDown' | 'onMouseUp' | 'onMouseMove' | 'onMouseOver' | 'onMouseOut' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'onKeyPress'> &
-  { class?: string }
+import type { ReactifyEvents, ReactifyElement, SafeSelect, CamelCaseify, RemoveReadonly, SetAttributes, ExtendEventListeners } from './utils/adapters'
 
 export type TRect = {
   x: number,
@@ -12,3 +7,22 @@ export type TRect = {
   width: number,
   height: number,
 }
+
+export type NectaryComponentVanillaByType<T extends object> =
+  Omit<HTMLElement, 'addEventListener' | 'removeEventListener'> &
+  ExtendEventListeners<Required<SafeSelect<T, 'events'>>> &
+  SetAttributes<Required<RemoveReadonly<SafeSelect<T, 'props'>>>> &
+  Required<CamelCaseify<SafeSelect<T, 'props'>>> &
+  Required<SafeSelect<T, 'methods'>>
+
+export type NectaryComponentReactByType<T extends object> =
+  ReactifyElement<HTMLElement> &
+  ReactifyEvents<SafeSelect<T, 'events'>> &
+  RemoveReadonly<SafeSelect<T, 'props'>> &
+  { style?: SafeSelect<T, 'style'> }
+
+export type NectaryComponentVanilla<K extends keyof NectaryComponentMap> =
+  NectaryComponentVanillaByType<NectaryComponentMap[K]>
+
+export type NectaryComponentReact<K extends keyof NectaryComponentMap> =
+  NectaryComponentReactByType<NectaryComponentMap[K]>

package/utils/adapters.d.ts

@@ -0,0 +1,30 @@
+import type { ClassAttributes, DOMAttributes, HTMLAttributes } from 'react';
+export type SafeSelect<T extends object, K extends string | number | symbol> = K extends keyof T ? T[K] extends object ? T[K] : {} : {};
+type CamelCaseString<S extends string> = S extends `${infer P1}-${infer P2}${infer P3}` ? `${Lowercase<P1>}${Uppercase<P2>}${CamelCaseString<P3>}` : S;
+export type CamelCaseify<T> = T extends object ? {
+    [K in keyof T as K extends string ? CamelCaseString<K> : K]: T[K];
+} : T;
+export type RemoveReadonly<T> = {
+    [P in keyof T as T[P] extends {
+        readonly [K: string]: any;
+    } ? never : P]: T[P];
+};
+type ExtractEventTypes<T> = {
+    [K in keyof T]: T[K] extends (e: infer E) => void ? E : T[K];
+};
+export type ExtendEventListeners<Events> = {
+    addEventListener<K extends keyof (ExtractEventTypes<Events> & HTMLElementEventMap)>(type: K, listener: (this: HTMLElement, ev: (ExtractEventTypes<Events> & HTMLElementEventMap)[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof (ExtractEventTypes<Events> & HTMLElementEventMap)>(type: K, listener: (this: HTMLElement, ev: (ExtractEventTypes<Events> & HTMLElementEventMap)[K]) => any, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+};
+export type SetAttributes<Props> = {
+    setAttribute<K extends keyof Props>(attr: K, value: Props[K] extends boolean ? '' : Props[K]): void;
+};
+export type ReactifyElement<TElement> = Pick<HTMLAttributes<HTMLElement>, 'id' | 'className' | 'style' | 'slot' | 'children'> & ClassAttributes<TElement> & Pick<DOMAttributes<TElement>, 'onClick' | 'onDoubleClick' | 'onMouseDown' | 'onMouseUp' | 'onMouseMove' | 'onMouseOver' | 'onMouseOut' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'onKeyPress'> & {
+    class?: string;
+};
+export type ReactifyEvents<T> = {
+    [K in keyof T as K extends string ? `on${K}` : never]: T[K];
+};
+export {};

package/utils/adapters.js

@@ -0,0 +1 @@
+export {};

package/vertical-stepper/index.d.ts

@@ -1,18 +1,22 @@
-import type { TSinchVerticalStepperElement, TSinchVerticalStepperReact } from './types';
+import type { TSinchVerticalStepper } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-vertical-stepper': TSinchVerticalStepper;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-vertical-stepper': TSinchVerticalStepperElement;
+        'sinch-vertical-stepper': NectaryComponentVanilla<'sinch-vertical-stepper'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-vertical-stepper': TSinchVerticalStepperReact;
+            'sinch-vertical-stepper': NectaryComponentReact<'sinch-vertical-stepper'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-vertical-stepper': TSinchVerticalStepperReact;
+            'sinch-vertical-stepper': NectaryComponentReact<'sinch-vertical-stepper'>;
         }
     }
 }

package/vertical-stepper/types.d.ts

@@ -1,35 +1,34 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchVerticalStepperElement = HTMLElement & {
-    /** Current item index, starting from 1 */
-    index: string;
-    /** Current item index, starting from 1 */
-    setAttribute(name: 'index', value: string): void;
-};
-export type TSinchVerticalStepperReact = TSinchElementReact<TSinchVerticalStepperElement> & {
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchVerticalStepperProps = {
     /** Current item index, starting from 1 */
     index: string;
     /** Label that is used for a11y */
     'aria-label': string;
-} & {
-    style?: {
-        '--sinch-comp-vertical-stepper-color-background-default'?: string;
-        '--sinch-comp-vertical-stepper-color-background-visited-skip'?: string;
-        '--sinch-comp-vertical-stepper-color-background-active'?: string;
-        '--sinch-comp-vertical-stepper-color-background-visited'?: string;
-        '--sinch-comp-vertical-stepper-color-background-visited-error'?: string;
-        '--sinch-comp-vertical-stepper-color-border-default'?: string;
-        '--sinch-comp-vertical-stepper-color-border-visited-skip'?: string;
-        '--sinch-comp-vertical-stepper-color-border-active'?: string;
-        '--sinch-comp-vertical-stepper-color-border-visited'?: string;
-        '--sinch-comp-vertical-stepper-color-border-visited-error'?: string;
-        '--sinch-comp-vertical-stepper-color-icon-default'?: string;
-        '--sinch-comp-vertical-stepper-color-icon-visited-skip'?: string;
-        '--sinch-comp-vertical-stepper-color-icon-active'?: string;
-        '--sinch-comp-vertical-stepper-color-icon-visited'?: string;
-        '--sinch-comp-vertical-stepper-color-icon-visited-error'?: string;
-        '--sinch-comp-vertical-stepper-color-label'?: string;
-        '--sinch-comp-vertical-stepper-color-description'?: string;
-        '--sinch-comp-vertical-stepper-color-progress'?: string;
-        '--sinch-comp-vertical-stepper-color-progress-visited'?: string;
-    };
 };
+export type TSinchVerticalStepperStyle = {
+    '--sinch-comp-vertical-stepper-color-background-default'?: string;
+    '--sinch-comp-vertical-stepper-color-background-visited-skip'?: string;
+    '--sinch-comp-vertical-stepper-color-background-active'?: string;
+    '--sinch-comp-vertical-stepper-color-background-visited'?: string;
+    '--sinch-comp-vertical-stepper-color-background-visited-error'?: string;
+    '--sinch-comp-vertical-stepper-color-border-default'?: string;
+    '--sinch-comp-vertical-stepper-color-border-visited-skip'?: string;
+    '--sinch-comp-vertical-stepper-color-border-active'?: string;
+    '--sinch-comp-vertical-stepper-color-border-visited'?: string;
+    '--sinch-comp-vertical-stepper-color-border-visited-error'?: string;
+    '--sinch-comp-vertical-stepper-color-icon-default'?: string;
+    '--sinch-comp-vertical-stepper-color-icon-visited-skip'?: string;
+    '--sinch-comp-vertical-stepper-color-icon-active'?: string;
+    '--sinch-comp-vertical-stepper-color-icon-visited'?: string;
+    '--sinch-comp-vertical-stepper-color-icon-visited-error'?: string;
+    '--sinch-comp-vertical-stepper-color-label'?: string;
+    '--sinch-comp-vertical-stepper-color-description'?: string;
+    '--sinch-comp-vertical-stepper-color-progress'?: string;
+    '--sinch-comp-vertical-stepper-color-progress-visited'?: string;
+};
+export type TSinchVerticalStepper = {
+    props: TSinchVerticalStepperProps;
+    style: TSinchVerticalStepperStyle;
+};
+export type TSinchVerticalStepperElement = NectaryComponentVanillaByType<TSinchVerticalStepper>;
+export type TSinchVerticalStepperReact = NectaryComponentReactByType<TSinchVerticalStepper>;

package/vertical-stepper-item/index.d.ts

@@ -1,21 +1,25 @@
 import '../icon';
 import '../title';
 import '../text';
-import type { TSinchVerticalStepperItemElement, TSinchVerticalStepperItemReact } from './types';
+import type { TSinchVerticalStepperItem } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 declare global {
+    interface NectaryComponentMap {
+        'sinch-vertical-stepper-item': TSinchVerticalStepperItem;
+    }
     interface HTMLElementTagNameMap {
-        'sinch-vertical-stepper-item': TSinchVerticalStepperItemElement;
+        'sinch-vertical-stepper-item': NectaryComponentVanilla<'sinch-vertical-stepper-item'>;
     }
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-vertical-stepper-item': TSinchVerticalStepperItemReact;
+            'sinch-vertical-stepper-item': NectaryComponentReact<'sinch-vertical-stepper-item'>;
         }
     }
 }
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-vertical-stepper-item': TSinchVerticalStepperItemReact;
+            'sinch-vertical-stepper-item': NectaryComponentReact<'sinch-vertical-stepper-item'>;
         }
     }
 }

package/vertical-stepper-item/types.d.ts

@@ -1,51 +1,42 @@
-import type { TSinchElementReact } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchVerticalStepperStatusType = 'error' | 'skip';
-export type TSinchVerticalStepperItemElement = HTMLElement & {
-    /** Label */
-    label: string;
-    /** Description */
-    description: string | null;
-    /** Status */
-    status: TSinchVerticalStepperStatusType | null;
-    /** Label */
-    setAttribute(name: 'label', value: string): void;
-    /** Description */
-    setAttribute(name: 'description', value: string): void;
-    /** Status */
-    setAttribute(name: 'status', value: TSinchVerticalStepperStatusType): void;
-};
-export type TSinchVerticalStepperItemReact = TSinchElementReact<TSinchVerticalStepperItemElement> & {
+export type TSinchVerticalStepperItemProps = {
     /** Label */
     label: string;
     /** Description */
     description?: string;
     /** Status */
     status?: TSinchVerticalStepperStatusType;
-} & {
-    style?: {
-        '--sinch-comp-vertical-stepper-color-background-default'?: string;
-        '--sinch-comp-vertical-stepper-color-background-active'?: string;
-        '--sinch-comp-vertical-stepper-color-background-visited'?: string;
-        '--sinch-comp-vertical-stepper-color-background-visited-error'?: string;
-        '--sinch-comp-vertical-stepper-color-background-visited-skip'?: string;
-        '--sinch-comp-vertical-stepper-color-border-default'?: string;
-        '--sinch-comp-vertical-stepper-color-border-active'?: string;
-        '--sinch-comp-vertical-stepper-color-border-visited'?: string;
-        '--sinch-comp-vertical-stepper-color-border-visited-error'?: string;
-        '--sinch-comp-vertical-stepper-color-border-visited-skip'?: string;
-        '--sinch-comp-vertical-stepper-color-icon-default'?: string;
-        '--sinch-comp-vertical-stepper-color-icon-active'?: string;
-        '--sinch-comp-vertical-stepper-color-icon-visited'?: string;
-        '--sinch-comp-vertical-stepper-color-icon-visited-error'?: string;
-        '--sinch-comp-vertical-stepper-color-icon-visited-skip'?: string;
-        '--sinch-comp-vertical-stepper-color-label'?: string;
-        '--sinch-comp-vertical-stepper-color-description'?: string;
-        '--sinch-comp-vertical-stepper-color-progress'?: string;
-        '--sinch-comp-vertical-stepper-color-progress-visited'?: string;
-        '--sinch-local-color-background'?: string;
-        '--sinch-local-color-border'?: string;
-        '--sinch-local-color-text'?: string;
-        '--sinch-local-color-icon'?: string;
-        '--sinch-global-size-icon'?: string;
-    };
 };
+export type TSinchVerticalStepperItemStyle = {
+    '--sinch-comp-vertical-stepper-color-background-default'?: string;
+    '--sinch-comp-vertical-stepper-color-background-active'?: string;
+    '--sinch-comp-vertical-stepper-color-background-visited'?: string;
+    '--sinch-comp-vertical-stepper-color-background-visited-error'?: string;
+    '--sinch-comp-vertical-stepper-color-background-visited-skip'?: string;
+    '--sinch-comp-vertical-stepper-color-border-default'?: string;
+    '--sinch-comp-vertical-stepper-color-border-active'?: string;
+    '--sinch-comp-vertical-stepper-color-border-visited'?: string;
+    '--sinch-comp-vertical-stepper-color-border-visited-error'?: string;
+    '--sinch-comp-vertical-stepper-color-border-visited-skip'?: string;
+    '--sinch-comp-vertical-stepper-color-icon-default'?: string;
+    '--sinch-comp-vertical-stepper-color-icon-active'?: string;
+    '--sinch-comp-vertical-stepper-color-icon-visited'?: string;
+    '--sinch-comp-vertical-stepper-color-icon-visited-error'?: string;
+    '--sinch-comp-vertical-stepper-color-icon-visited-skip'?: string;
+    '--sinch-comp-vertical-stepper-color-label'?: string;
+    '--sinch-comp-vertical-stepper-color-description'?: string;
+    '--sinch-comp-vertical-stepper-color-progress'?: string;
+    '--sinch-comp-vertical-stepper-color-progress-visited'?: string;
+    '--sinch-local-color-background'?: string;
+    '--sinch-local-color-border'?: string;
+    '--sinch-local-color-text'?: string;
+    '--sinch-local-color-icon'?: string;
+    '--sinch-global-size-icon'?: string;
+};
+export type TSinchVerticalStepperItem = {
+    props: TSinchVerticalStepperItemProps;
+    style: TSinchVerticalStepperItemStyle;
+};
+export type TSinchVerticalStepperItemElement = NectaryComponentVanillaByType<TSinchVerticalStepperItem>;
+export type TSinchVerticalStepperItemReact = NectaryComponentReactByType<TSinchVerticalStepperItem>;