@kvdbil/components 14.2.6 → 14.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "14.2.6",
+  "version": "14.2.8",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -24,7 +24,8 @@
     "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx,.mdx src",
     "analyze": "rollup -c rollup.config.analyze.js",
     "create-declaration": "yarn tsc --p tsconfig.production.json --emitDeclarationOnly --noEmit false --declaration true --declarationDir dist/types",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "validate-code": "yarn type-check && yarn lint && yarn test &&  echo '✅ Code is valid!'"
   },
   "peerDependencies": {
     "react": ">= 17.0.0",
@@ -108,7 +109,6 @@
     "jest-environment-jsdom": "^28.0.0",
     "jest-styled-components": "^7.0.3",
     "jest-watch-typeahead": "^0.6.1",
-    "node-sass": "^8.0.0",
     "prettier": "^1.16.4",
     "react": "^17.0.2",
     "react-collapse": "^5.0.1",

package/types/ColorCard.d.ts

@@ -1,4 +1,4 @@
-declare type Variants = Record<string, string | Record<string, string>>;
+type Variants = Record<string, string | Record<string, string>>;
 interface ColorCardProps {
     colorName: string;
     variants: Variants;

package/types/Types.d.ts

@@ -1,23 +1,23 @@
 import { SCREEN_SIZE } from './shared/media-queries';
-export declare type Color = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'error' | 'warning' | 'neutral';
-export declare type ColorShade = "main" | "darker" | "dark" | "light" | "lighter" | "lighter2";
-export declare type TextColor = 'dark' | 'light' | 'disabled';
-export declare type ColorWithNone = 'none' | Color;
-export declare type Variant = 'solid' | 'outline' | 'flat';
-export declare type Size = 'small' | 'smaller' | 'regular' | 'large';
-export declare type CheckboxSize = 'regular' | 'large';
-export declare type RadioButtonSize = 'regular' | 'large';
-export declare type Speed = 'slow' | 'default' | 'fast';
-export declare type Locale = 'en' | 'sv';
-export declare type Notification = 'info' | 'error' | 'success' | 'text';
-export declare type VerticalPosition = 'top' | 'bottom';
-export declare type HorizontalPosition = 'left' | 'right' | 'center';
-export declare type StampType = 'ecofriendly' | 'releasing' | 'carguide' | 'certified' | 'export';
-export declare type Origin = {
+export type Color = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'error' | 'warning' | 'neutral';
+export type ColorShade = "main" | "darker" | "dark" | "light" | "lighter" | "lighter2";
+export type TextColor = 'dark' | 'light' | 'disabled';
+export type ColorWithNone = 'none' | Color;
+export type Variant = 'solid' | 'outline' | 'flat';
+export type Size = 'small' | 'smaller' | 'regular' | 'large';
+export type CheckboxSize = 'regular' | 'large';
+export type RadioButtonSize = 'regular' | 'large';
+export type Speed = 'slow' | 'default' | 'fast';
+export type Locale = 'en' | 'sv';
+export type Notification = 'info' | 'error' | 'success' | 'text';
+export type VerticalPosition = 'top' | 'bottom';
+export type HorizontalPosition = 'left' | 'right' | 'center';
+export type StampType = 'ecofriendly' | 'releasing' | 'carguide' | 'certified' | 'export';
+export type Origin = {
     vertical: VerticalPosition;
     horizontal: HorizontalPosition;
 };
-export declare type MqSizes = SCREEN_SIZE;
+export type MqSizes = SCREEN_SIZE;
 /**
  * Used to prefix all keys in a type with a `$` sign. Props prefixed with `$` are called transient props.
  * Used for styled-components to prevent passing props to root element.
@@ -30,6 +30,6 @@ export declare type MqSizes = SCREEN_SIZE;
  *  $prop: string;
  * }
  */
-export declare type TransientProps<Type> = {
+export type TransientProps<Type> = {
     [Prop in keyof Type as `$${string & Prop}`]: Type[Prop];
 };

package/types/components/Button/index.d.ts

@@ -15,6 +15,6 @@ interface Props {
     minWidth?: string;
     as?: keyof JSX.IntrinsicElements;
 }
-export declare type ButtonProps = ComponentPropsWithRef<'button'> & Props;
+export type ButtonProps = ComponentPropsWithRef<'button'> & Props;
 export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "form" | "slot" | "style" | "title" | "type" | "name" | "key" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "size" | "minWidth" | "fullWidth" | "sufixIcon" | "prefixIcon" | "isLoading" | "variant" | "colorShade" | "isDisabled"> & React.RefAttributes<HTMLElement>>;
 export default Button;

package/types/components/CheckBox/index.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { CheckboxSize, Color } from '../../Types';
-declare type ComponentPropsWithoutSize = Omit<ComponentPropsWithoutRef<'input'>, 'size'>;
+type ComponentPropsWithoutSize = Omit<ComponentPropsWithoutRef<'input'>, 'size'>;
 export interface CheckBoxProps extends ComponentPropsWithoutSize {
     name?: string;
     size?: CheckboxSize;

package/types/components/Chip/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ComponentType, MouseEvent, ReactNode } from 'react';
 import { DefaultTheme } from 'styled-components';
 import { Color, Size, Variant } from '../../Types';
-export declare type ChipColor = Color | 'neutralLight';
+export type ChipColor = Color | 'neutralLight';
 export interface ChipProps {
     color?: ChipColor;
     children: ReactNode;

package/types/components/Flex/index.d.ts

@@ -10,7 +10,7 @@ import { SCREEN_SIZE } from '../../shared/media-queries';
  * direction: 'row' | 'column' | 'row-reverse' | 'column-reverse'
  * direction: { mobileS: 'column', tablet: 'row' }
  */
-declare type CSSPropertyWithResponsive<P extends keyof CSSProperties> = CSSProperties[P] | Partial<Record<Partial<SCREEN_SIZE> | 'initial', CSSProperties[P]>>;
+type CSSPropertyWithResponsive<P extends keyof CSSProperties> = CSSProperties[P] | Partial<Record<Partial<SCREEN_SIZE> | 'initial', CSSProperties[P]>>;
 export interface FlexProps {
     direction?: CSSPropertyWithResponsive<'flexDirection'>;
     justify?: CSSPropertyWithResponsive<'justifyContent'>;
@@ -22,6 +22,6 @@ export interface FlexProps {
     grow?: CSSPropertyWithResponsive<'flexGrow'>;
     shrink?: CSSPropertyWithResponsive<'flexShrink'>;
 }
-export declare type Props = FlexProps & HTMLAttributes<HTMLDivElement>;
+export type Props = FlexProps & HTMLAttributes<HTMLDivElement>;
 declare const Flex: ({ direction, justify, align, gap, rowGap, wrap, basis, grow, shrink, ...props }: Props) => JSX.Element;
 export default Flex;

package/types/components/Hero/index.d.ts

@@ -1,17 +1,17 @@
 import { ReactNode } from 'react';
 import { CSSProperties } from 'styled-components';
-declare type Justify = Exclude<CSSProperties['justifyContent'], number>;
-declare type Align = Exclude<CSSProperties['alignItems'], number>;
-declare type Direction = CSSProperties['flexDirection'];
-declare type DarkOrLight = 'dark' | 'light';
+type Justify = Exclude<CSSProperties['justifyContent'], number>;
+type Align = Exclude<CSSProperties['alignItems'], number>;
+type Direction = CSSProperties['flexDirection'];
+type DarkOrLight = 'dark' | 'light';
 export declare const colorAnimation: import("styled-components").Keyframes;
-declare type ObjectPositionX = number | 'center' | 'left' | 'right';
-declare type ObjectPositionY = number | 'center' | 'top' | 'bottom';
-declare type DynamicGutter = {
+type ObjectPositionX = number | 'center' | 'left' | 'right';
+type ObjectPositionY = number | 'center' | 'top' | 'bottom';
+type DynamicGutter = {
     tabletVw: number;
     laptopVw: number;
 };
-declare type YouTubeVideoProps = {
+type YouTubeVideoProps = {
     autoplay: 0 | 1;
     controls: 0 | 1;
     disablekb: 0 | 1;
@@ -21,12 +21,12 @@ declare type YouTubeVideoProps = {
     start: number;
     showInfo: 0 | 1;
 };
-declare type ImageProps = {
+type ImageProps = {
     src: string;
     x?: ObjectPositionX;
     y?: ObjectPositionY;
 };
-declare type VideoProps = {
+type VideoProps = {
     src: string;
     ytConfig?: Partial<YouTubeVideoProps>;
 };

package/types/components/Icon/index.d.ts

@@ -1,4 +1,4 @@
-declare type IconModule = [string, CallableFunction];
+type IconModule = [string, CallableFunction];
 export interface IconsProps {
     background: string;
     color: string;

package/types/components/MenuItem/index.d.ts

@@ -26,6 +26,6 @@ declare const fontSizes: {
         fontFamily: "'Open Sans', sans-serif";
     };
 };
-declare type Level = keyof typeof fontSizes;
+type Level = keyof typeof fontSizes;
 export declare const MenuItem: ({ preamble, title, level, component: Component, children, ...props }: MenuItemProps) => JSX.Element;
 export default MenuItem;

package/types/components/Message/index.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-declare type MessageType = 'text' | 'info' | 'success' | 'warning' | 'error';
-export declare type Props = {
+type MessageType = 'text' | 'info' | 'success' | 'warning' | 'error';
+export type Props = {
     children: ReactNode;
     type: MessageType;
     withIcon?: boolean;

package/types/components/OffCanvas/index.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
-export declare type DIRECTION = 'left' | 'right';
-declare type TransitionProps = Partial<Pick<CSSTransitionProps, 'timeout' | 'classNames' | 'addEndListener' | 'appear' | 'mountOnEnter'>>;
+export type DIRECTION = 'left' | 'right';
+type TransitionProps = Partial<Pick<CSSTransitionProps, 'timeout' | 'classNames' | 'addEndListener' | 'appear' | 'mountOnEnter'>>;
 export interface OffCanvasProps {
     animationName?: string;
     animationDuration?: number;

package/types/components/Select/index.d.ts

@@ -5,7 +5,7 @@ export interface DropdownIndicatorProps extends SelectDropdownIndicatorProps {
     isFocused: boolean;
     isDisabled: boolean;
 }
-declare type OptionType = {
+type OptionType = {
     label: string | ReactNode;
     value: string;
 };

package/types/components/Snackbar/index.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, ReactElement } from 'react';
 import { ColorWithNone, Notification, Origin } from '../../Types';
-export declare type SnackbarProps = {
+export type SnackbarProps = {
     message: string;
     color?: ColorWithNone;
     type?: Notification;

package/types/components/Stack/index.d.ts

@@ -1,5 +1,5 @@
 import { Props as FlexProps } from '../Flex';
-export declare type StackProps = Omit<FlexProps, 'gap'> & {
+export type StackProps = Omit<FlexProps, 'gap'> & {
     spacing?: FlexProps['gap'];
 };
 declare const Stack: ({ ...props }: StackProps) => JSX.Element;

package/types/components/Table/index.d.ts

@@ -1,4 +1,4 @@
-declare type Column = string;
+type Column = string;
 export interface TableProps {
     columns?: Column[];
     data?: Record<Column, string>[];

package/types/components/Tabs/Tabs.d.ts

@@ -4,7 +4,7 @@ import { ReactElement } from 'react';
 import { TabProps } from './Tab';
 import { CSSProperties } from 'styled-components';
 import theme from '../../theme';
-declare type TabElement = ReactElement<TabProps>;
+type TabElement = ReactElement<TabProps>;
 export interface TabsProps {
     activeColor?: Color;
     justify?: CSSProperties['justifyContent'];

package/types/components/TimePicker/index.d.ts

@@ -6,7 +6,7 @@ export interface TimeSlotProps {
     isDisabled?: boolean;
     isSelected?: boolean;
 }
-declare type Times = Date | Date[];
+type Times = Date | Date[];
 export interface TimePickerProps {
     timeSlots: TimeSlotProps[];
     selectedTimes?: Times;

package/types/components/Toggle/index.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Color } from '../../Types';
-declare type LeftOrRight = 'LEFT' | 'RIGHT';
+type LeftOrRight = 'LEFT' | 'RIGHT';
 export interface ToggleProps {
     color: Color;
     active?: LeftOrRight;

package/types/shared/helpers.d.ts

@@ -1,2 +1,2 @@
 export declare const generateNameHash: (prefix: string) => string;
-export declare const fadedColor: (hex: string, alpha?: number | undefined) => string;
+export declare const fadedColor: (hex: string, alpha?: number) => string;

package/types/shared/media-queries.d.ts

@@ -13,7 +13,7 @@ declare const mqNumberSizes: Record<SCREEN_SIZE, number>;
 declare const mqSizesOrder: {
     [key: string]: number;
 };
-export declare type SCREEN_SIZE = keyof typeof mqSizes;
+export type SCREEN_SIZE = keyof typeof mqSizes;
 declare const mediaQueries: {
     mobileS: (limit: string) => string;
     mobileM: (limit: string) => string;
@@ -24,5 +24,5 @@ declare const mediaQueries: {
     desktop: (limit: string) => string;
     desktopL: (limit: string) => string;
 };
-declare const mq: (from: SCREEN_SIZE | null, to?: keyof MqSizes | undefined) => string;
+declare const mq: (from: SCREEN_SIZE | null, to?: SCREEN_SIZE) => string;
 export { mq, mqSizes, mqNumberSizes, mqSizesOrder, mediaQueries };

package/types/theme.d.ts

@@ -118,5 +118,5 @@ export interface Theme {
     };
 }
 declare const theme: Theme;
-export declare type TypographyEntryType = keyof typeof theme.typography;
+export type TypographyEntryType = keyof typeof theme.typography;
 export default theme;