widenarrow-ui 0.1.32 → 0.1.33

package/.storybook/main.js

@@ -28,7 +28,7 @@ module.exports = {
 		config.resolve.plugins = [
 			new TsconfigPathsPlugin({
 				configFile: path.resolve(__dirname, '../tsconfig.json')
-			}),
+			})
 		];
 
 		// Return the altered config

package/.storybook/preview.js

@@ -2,6 +2,10 @@ import './normalize.css';
 import './fonts.css';
 import './storybook.css';
 
+import 'lazysizes';
+import 'lazysizes/plugins/attrchange/ls.attrchange';
+import 'lazysizes/plugins/bgset/ls.bgset';
+
 export const parameters = {
 	actions: { argTypesRegex: '^on[A-Z].*' },
 	layout: 'centered'

package/lib/components/Box/Box.d.ts

@@ -5,13 +5,14 @@ interface Props extends MarginInterface, PaddingInterface, FlexStylingInterface
     children: React.ReactNode;
     className?: string;
     position?: string;
-    border?: string;
-    borderTop?: string;
-    borderBottom?: string;
-    borderRight?: string;
-    backgroundColor?: `${ColorTypes}`;
+    borderColor?: Partial<ColorTypes>;
+    border?: '1' | '2' | '3';
+    borderTop?: '1' | '2' | '3';
+    borderBottom?: '1' | '2' | '3';
+    borderRight?: '1' | '2' | '3';
+    borderLeft?: '1' | '2' | '3';
+    backgroundColor?: Partial<ColorTypes>;
     showOnBreakpoint?: string;
-    borderLeft?: string;
     withBorderRadius?: boolean;
     width?: string;
     minWidth?: string;

package/lib/components/Button/Button.d.ts

@@ -3,9 +3,9 @@ import { HierarchyTypes, SizeTypes, IconTypes } from 'src/constants';
 interface Props {
     text?: string;
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
-    type?: `${HierarchyTypes}`;
+    type?: Partial<HierarchyTypes>;
     size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
-    icon?: `${IconTypes}`;
+    icon?: Partial<IconTypes>;
     iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     withIconLeft?: boolean;
     disabled?: boolean;

package/lib/components/DropDownItem/DropDownItem.d.ts

@@ -10,11 +10,11 @@ interface Props {
     wrapperElement?: 'div' | 'li';
     className?: string;
     type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
-    leftIcon?: `${IconTypes}`;
-    rightIcon?: `${IconTypes}`;
+    leftIcon?: Partial<IconTypes>;
+    rightIcon?: Partial<IconTypes>;
     iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
-    iconColor?: `${ColorTypes}`;
-    textColor?: `${ColorTypes}`;
+    iconColor?: Partial<ColorTypes>;
+    textColor?: Partial<ColorTypes>;
     iconClassName?: string;
 }
 declare const DropDownItem: FC<Props>;

package/lib/components/FacetButton/FacetButton.d.ts

@@ -7,7 +7,7 @@ interface Props {
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
     disabled?: boolean;
     selected?: boolean;
-    icon?: `${IconTypes}`;
+    icon?: Partial<IconTypes>;
     children?: ReactNode;
     className?: string;
     toolTip?: string;

package/lib/components/IconButton/IconButton.d.ts

@@ -9,7 +9,7 @@ interface Props extends IconStyleInterface, SizeStyleInterface {
     type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
     iconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
-    iconColor?: `${ColorTypes}`;
+    iconColor?: Partial<ColorTypes>;
     href?: string;
     disabled?: boolean;
     toolTip?: string;

package/lib/components/Image/Image.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+import { AspectRatioTypes } from 'src/constants';
+interface Props {
+    src: string;
+    alt?: string;
+    className?: string;
+    customCellComponent?: ReactNode;
+    aspectRatio?: Partial<AspectRatioTypes>;
+    bgImage?: boolean;
+    bgImageProps?: {
+        size: 'cover' | 'contain';
+        position: 'top' | 'bottom' | 'center';
+    };
+    placeHolderColor?: string;
+}
+declare const Image: FC<Props>;
+export default Image;

package/lib/components/Image/Image.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Image from 'src/components/Image';
+declare const meta: Meta<typeof Image>;
+export default meta;
+type Story = StoryObj<typeof Image>;
+export declare const Default: Story;

package/lib/components/Image/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Image';

package/lib/components/InlineButton/InlineButton.d.ts

@@ -5,11 +5,11 @@ interface Props {
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
     className?: string;
     children?: ReactNode;
-    icon?: `${IconTypes}`;
+    icon?: Partial<IconTypes>;
     rotateIcon?: boolean;
     iconClassName?: string;
     withIconRight?: boolean;
-    type?: `${HierarchyTypes}`;
+    type?: Partial<HierarchyTypes>;
     size?: SizeTypes.SMALL | SizeTypes.MEDIUM;
     textClassName?: string;
     withEllipsis?: boolean;

package/lib/components/ListSkeleton/ListSkeleton.d.ts

@@ -7,11 +7,16 @@ interface Props {
     itemClassName?: string;
     withBorderRadius?: boolean;
     withContent?: boolean;
-    backgroundColor?: `${ColorTypes}`;
+    backgroundColor?: Partial<ColorTypes>;
     marginBottom?: string;
     padding?: string;
-    borderColor?: `${ColorTypes}`;
-    contentColor?: `${ColorTypes}`;
+    borderColor?: Partial<ColorTypes>;
+    border?: '1' | '2' | '3';
+    borderTop?: '1' | '2' | '3';
+    borderBottom?: '1' | '2' | '3';
+    borderRight?: '1' | '2' | '3';
+    borderLeft?: '1' | '2' | '3';
+    contentColor?: Partial<ColorTypes>;
 }
 declare const ListSkeleton: FC<Props>;
 export default ListSkeleton;

package/lib/components/MultiActionButton/MultiActionButton.d.ts

@@ -4,12 +4,12 @@ interface Props {
     text?: string;
     onLeftClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
     onRightClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
-    type?: `${HierarchyTypes}`;
+    type?: Partial<HierarchyTypes>;
     size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     leftIconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     rightIconSize?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
-    leftIcon?: `${IconTypes}`;
-    rightIcon?: `${IconTypes}`;
+    leftIcon?: Partial<IconTypes>;
+    rightIcon?: Partial<IconTypes>;
     rotateLeftIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
     rotateRightIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
     disabled?: boolean;

package/lib/components/Separator/Separator.d.ts

@@ -3,7 +3,7 @@ import { MarginInterface, PaddingInterface } from 'src/types/styling';
 import { SizeTypes, ColorTypes } from 'src/constants';
 interface Props extends MarginInterface, PaddingInterface {
     className?: string;
-    color?: `${ColorTypes}`;
+    color?: Partial<ColorTypes>;
     size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
 }
 interface Props {

package/lib/components/SolidSpinner/SolidSpinner.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { HierarchyTypes, SizeTypes } from 'src/constants';
 interface Props {
-    type?: `${HierarchyTypes}`;
+    type?: Partial<HierarchyTypes>;
     size?: SizeTypes.EXTRA_SMALL | SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     disabled?: boolean;
     className?: string;

package/lib/components/SortableTable/SortableTable.d.ts

@@ -0,0 +1,29 @@
+import { FC, ReactNode } from 'react';
+interface Props {
+    cells: Array<{
+        key: string;
+        title: string;
+        width: string;
+        disableSort?: boolean;
+        alignRight?: boolean;
+        alignCenter?: boolean;
+        withEllipsis?: boolean;
+        toolTip?: string;
+        customHeaderCellComponent?: (row: object, cell: object) => ReactNode;
+        customCellComponent?: (row: object, cell: object) => ReactNode;
+    }>;
+    data?: Array<object>;
+    sortBy: Array<{
+        keyName: string;
+        ascending: boolean;
+    }>;
+    className?: string;
+    headerClassName?: string;
+    fetching?: boolean;
+    skeletonRows?: number;
+    withStickyHeader?: boolean;
+    withIntersectionObserver?: boolean;
+    onSortCallback?: (keyName: string) => void;
+}
+declare const SortableTable: FC<Props>;
+export default SortableTable;

package/lib/components/SortableTable/SortableTable.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import SortableTable from 'src/components/SortableTable';
+declare const meta: Meta<typeof SortableTable>;
+export default meta;
+type Story = StoryObj<typeof SortableTable>;
+export declare const Default: Story;
+export declare const Custom: Story;

package/lib/components/SortableTable/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SortableTable';

package/lib/constants.d.ts

@@ -194,6 +194,15 @@ export declare enum HierarchyTypes {
     SECONDARY = "secondary",
     TERTIARY = "tertiary"
 }
+export declare enum AspectRatioTypes {
+    ar4_1 = "ar4_1",
+    ar3_1 = "ar3_1",
+    ar21_9 = "ar21_9",
+    ar16_9 = "ar16_9",
+    ar21_13 = "ar21_13",
+    ar4_3 = "ar4_3",
+    ar1_1 = "ar1_1"
+}
 export declare enum ColorTypes {
     WHITE = "white",
     BLUE = "blue",