widenarrow-ui 0.1.10 → 0.1.12

package/.eslintrc

@@ -1,9 +1,21 @@
 {
 	"extends": ["plugin:storybook/recommended", "plugin:@typescript-eslint/recommended"],
+	"rules": {
+		"no-undef": ["warn", { "typeof": true }],
+		"no-console": "warn",
+		"spaced-comment": "warn",
+		"@typescript-eslint/no-use-before-define": "warn",
+		"@typescript-eslint/no-unused-vars": "warn",
+		"no-unused-expressions": ["error", { "allowTernary": true, "allowShortCircuit": true }]
+	},
+	"env": {
+		"jest": true,
+		"browser": true
+	},
 	"settings": {
 		"import/resolver": {
 			"node": {
-				"extensions": [".js",".jsx",".ts",".tsx"]
+				"extensions": [".js", ".jsx", ".ts", ".tsx"]
 			}
 		}
 	}

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

@@ -18,8 +18,6 @@ interface Props extends MarginInterface, PaddingInterface, FlexStylingInterface
      * Max width in percentage e.g 50 = 50%
      */
     maxWidth?: string;
-    withSeparatorRight?: boolean;
-    withSeparatorLeft?: boolean;
     style?: CSSProperties;
     onClickCallback?: () => void;
 }

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

@@ -1,27 +1,21 @@
 import { FC, ReactNode, MouseEvent, CSSProperties } from 'react';
-import { ButtonTypes } from 'src/constants';
+import { HierarchyTypes, SizeTypes, IconTypes } from 'src/constants';
 interface Props {
     text?: string;
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
-    color?: ButtonTypes.PRIMARY | ButtonTypes.SECONDARY | ButtonTypes.TERTIARY | ButtonTypes.WHITE;
-    size?: ButtonTypes.SMALL | ButtonTypes.MEDIUM | ButtonTypes.LARGE | ButtonTypes.EXTRA_LARGE;
+    type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
+    size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+    icon?: `${IconTypes}`;
+    withIconLeft?: boolean;
     disabled?: boolean;
     className?: string;
+    toolTip?: string;
     style?: CSSProperties;
-    withoutTextOnSmall?: boolean;
-    withSpaceBetween?: boolean;
-    withSeparatorRight?: boolean;
-    withSeparatorLeft?: boolean;
-    withCounterbar?: boolean;
-    withIconLeft?: boolean;
-    inverted?: boolean;
-    truncateText?: boolean;
+    withEllipsis?: boolean;
     rotateIcon?: boolean;
-    icon?: string;
     id?: string | number;
     loading?: boolean;
     autoFocus?: boolean;
-    counterbarPercent?: number;
     children?: ReactNode;
     ariaLabel?: string;
     tabIndex?: number;

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

@@ -5,7 +5,7 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 export declare const Primary: Story;
 export declare const Secondary: Story;
-export declare const Tertiary: Story;
 export declare const WithIcon: Story;
+export declare const WithChildren: Story;
 export declare const LoadingState: Story;
 export declare const Disabled: Story;

package/lib/components/Checkbox/Checkbox.d.ts

@@ -10,7 +10,6 @@ interface Props {
     checked: boolean;
     blocked?: boolean;
     indeterminate?: boolean;
-    withSeparator?: boolean;
     wordWrap?: boolean;
     disabled?: boolean;
     isFake?: boolean;

package/lib/components/Icon/Icon.d.ts

@@ -1,14 +1,12 @@
 import { FC } from 'react';
-export interface Props {
-    icon: string | null;
-    fixedIconColor?: boolean;
+import { IconStyleInterface, ColorStyleInterface, SizeStyleInterface } from 'src/types/styling';
+export interface Props extends IconStyleInterface, ColorStyleInterface, SizeStyleInterface {
     rotateIcon?: boolean;
-    rotateIconByDeg?: number;
-    color?: string;
-    size?: string;
+    rotateIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
     disabled?: boolean;
     active?: boolean;
     className?: string;
+    toolTip?: string;
 }
 declare const Icon: FC<Props>;
 export default Icon;

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

@@ -0,0 +1,19 @@
+import { MouseEvent } from 'react';
+import { SizeTypes } from 'src/constants';
+import { SizeStyleInterface, IconStyleInterface } from 'src/types/styling';
+import { HierarchyTypes } from 'src/constants';
+interface Props extends IconStyleInterface, SizeStyleInterface {
+    className?: string;
+    rotateIcon?: boolean;
+    rotateIconByDegree?: 0 | 45 | 90 | 135 | 180 | 225 | 270 | 315;
+    iconClassName?: string;
+    type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
+    onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
+    iconSize?: `${SizeTypes}`;
+    href?: string;
+    disabled?: boolean;
+    toolTip?: string;
+    ariaLabel?: string;
+}
+declare const _default: import("react").NamedExoticComponent<Props>;
+export default _default;

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { ReactNode, MouseEvent } from 'react';
+import { SizeTypes, IconTypes, HierarchyTypes } from 'src/constants';
+interface Props {
+    text: string;
+    onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+    children?: ReactNode;
+    icon?: `${IconTypes}`;
+    rotateIcon?: boolean;
+    iconClassName?: string;
+    withIconRight?: boolean;
+    type?: `${HierarchyTypes}`;
+    size?: SizeTypes.SMALL | SizeTypes.MEDIUM;
+    textClassName?: string;
+    withEllipsis?: boolean;
+    disabled?: boolean;
+    style?: object;
+    toolTip?: string;
+}
+declare const _default: import("react").NamedExoticComponent<Props>;
+export default _default;

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import InlineButton from 'src/components/InlineButton';
+declare const meta: Meta<typeof InlineButton>;
+export default meta;
+type Story = StoryObj<typeof InlineButton>;
+export declare const Default: Story;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const DisabledState: Story;
+export declare const TightContainer: Story;

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

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

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

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { MarginInterface, PaddingInterface } from 'src/types/styling';
+import { SizeTypes } from 'src/constants';
+interface Props extends MarginInterface, PaddingInterface {
+    className?: string;
+    color?: string;
+    size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
+}
+interface Props {
+    className?: string;
+}
+declare const Separator: FC<Props>;
+export default Separator;

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

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

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

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

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

@@ -1,8 +1,8 @@
 import { FC } from 'react';
-import { SpinnerTypes } from 'src/constants';
+import { HierarchyTypes, SizeTypes } from 'src/constants';
 interface Props {
-    color?: SpinnerTypes.BLUE | SpinnerTypes.WHITE;
-    size?: SpinnerTypes.SMALL | SpinnerTypes.MEDIUM | SpinnerTypes.LARGE;
+    type?: HierarchyTypes.PRIMARY | HierarchyTypes.SECONDARY;
+    size?: SizeTypes.SMALL | SizeTypes.MEDIUM | SizeTypes.LARGE;
     disabled?: boolean;
     className?: string;
     label?: string;

package/lib/components/ToolTip/ToolTip.d.ts

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from 'react';
+/**
+|--------------------------------------------------
+| This components extends the react-tooltip library.
+| Full api documentation here:
+| https://github.com/wwayne/react-tooltip
+| https://react-tooltip.netlify.com/
+|--------------------------------------------------
+*/
+interface Props {
+    text?: string;
+    children?: string | number | ReactNode | null;
+    disabled?: boolean;
+    withEllipsis?: boolean;
+    className?: string;
+    toolTipClassName?: string;
+    id?: string;
+    offset?: number;
+    variant?: 'dark' | 'light';
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+}
+declare const ToolTip: FC<Props>;
+export default ToolTip;

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

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

package/lib/components/Typography/Typography.d.ts

@@ -7,7 +7,6 @@ interface BaseProps extends MarginInterface, PaddingInterface {
     fontSize?: string;
     fontStyle?: string;
     color?: string;
-    withSeparator?: boolean | undefined;
     meta?: boolean | undefined;
     error?: boolean | undefined;
     withBorderBottom?: boolean | undefined;

package/lib/constants.d.ts

@@ -54,7 +54,7 @@ export declare enum IconTypes {
     DOTS_BACKGROUND = "iconDotsBackground",
     DOT_FILLED = "iconDotFilled",
     DOT_OUTLINED = "iconDotOutlined",
-    DOWN = "Down",
+    DOWN = "iconDown",
     DOWNLOAD = "iconDownload",
     DUPLICATE = "iconDuplicate",
     EDIT = "iconEdit",
@@ -107,14 +107,14 @@ export declare enum IconTypes {
     NAVIGATE_DOWN_LARGE = "iconNavigateDownLarge",
     NAVIGATE_LEFT_LARGE = "iconNavigateLeftLarge",
     NAVIGATE_RIGHT_LARGE = "iconNavigateRightLarge",
-    NEWS = "News",
+    NEWS = "iconNews",
     NEWSLETTER_CLOSED = "iconNewsLetterClosed",
     NEWSLETTER_OPENED = "iconNewsLetterOpened",
     NEWSLETTER_SENDER = "iconNewsLetterSender",
     NOTIFICATION = "iconNotification",
-    NO_CHANGE = "NoChange",
-    NO_DIRECTION = "NoDirection",
-    OPEN_IN_NEW = "openInNew",
+    NO_CHANGE = "iconNoChange",
+    NO_DIRECTION = "iconNoDirection",
+    OPEN_IN_NEW = "iconOpenInNew",
     PALETTE = "iconPalette",
     PAUSE = "iconPause",
     PAUSE_CIRCLE = "iconPauseCircle",
@@ -140,10 +140,10 @@ export declare enum IconTypes {
     RESET = "iconReset",
     ROBOT = "iconRobot",
     RSS = "iconRss",
-    SCHEDULE = "schedule",
+    SCHEDULE = "iconSchedule",
     SEARCH = "iconSearch",
     SEARCH_USER = "iconSearchUser",
-    SEND = "send",
+    SEND = "iconSend",
     SEND_LIST = "iconSendList",
     SETTINGS_FILLED = "iconSettingsFilled",
     SETTINGS_OFF = "iconSettingsOff",
@@ -163,7 +163,7 @@ export declare enum IconTypes {
     TRIAL = "iconTrial",
     UNFOLD_LESS = "iconUnfoldLess",
     UNFOLD_MORE = "iconUnfoldMore",
-    UP = "Up",
+    UP = "iconUp",
     UPLOAD = "iconUpload",
     USER = "iconUser",
     USERS = "iconUsers",
@@ -178,58 +178,35 @@ export declare enum IconTypes {
     ZOOM_IN = "iconZoomIn",
     ZOOM_OUT = "iconZoomOut"
 }
-export declare enum SpinnerTypes {
-    BLUE = "colorBlue",
-    LIGHT_BLUE = "colorLightBlue",
-    WHITE = "colorWhite",
-    GREY = "colorGrey",
-    SMALL = "small",
-    MEDIUM = "medium",
-    LARGE = "large"
+export declare enum HierarchyTypes {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    TERTIARY = "tertiary"
 }
-export declare enum ButtonTypes {
-    CURRENT_COLOR = "currentColor",
-    PRIMARY = "colorPrimary",
-    SECONDARY = "colorSecondary",
-    TERTIARY = "colorTertiary",
-    DARK = "colorDark",
-    WHITE = "colorWhite",
-    SMALL = "buttonSmall",
-    MEDIUM = "buttonMedium",
-    LARGE = "buttonLarge",
-    EXTRA_LARGE = "buttonExtraLarge"
+export declare enum ColorTypes {
+    WHITE = "white",
+    BLUE = "blue",
+    LIGHT_BLUE = "lightBlue",
+    GREEN = "green",
+    RED = "red",
+    ORANGE = "orange",
+    YELLOW = "yellow",
+    GREY_1 = "grey1",
+    GREY_2 = "grey2",
+    GREY_3 = "grey3",
+    GREY_4 = "grey4",
+    GREY_5 = "grey5",
+    GREY_6 = "grey6",
+    GREY_7 = "grey7",
+    BLACK = "black",
+    INHERIT = "inherit",
+    CURRENT = "current"
 }
-export declare enum ContentWrapperSizes {
+export declare enum SizeTypes {
     SMALL = "small",
     MEDIUM = "medium",
     LARGE = "large",
-    CUSTOM = "custom"
-}
-export declare enum BadgeTypes {
-    BLUE = "colorBadgeBlue",
-    ORANGE = "colorBadgeOrange",
-    DARK = "colorBadgeDark",
-    GREY = "colorBadgeGrey"
-}
-export declare enum LinkTypes {
-    PRIMARY = "colorPrimary",
-    SECONDARY = "colorSecondary",
-    WHITE = "colorWhite"
-}
-export declare enum IconSizes {
-    AUTO = "iconAuto",
-    SMALL = "iconSmall",
-    MEDIUM = "iconMedium",
-    LARGE = "iconLarge"
-}
-export declare enum OpenOriginTypes {
-    TOP_LEFT = "topLeft",
-    TOP_CENTER = "topCenter",
-    TOP_RIGHT = "topRight",
-    CENTER_CENTER = "centerCenter",
-    BOTTOM_LEFT = "bottomLeft",
-    BOTTOM_CENTER = "bottomCenter",
-    BOTTOM_RIGHT = "bottomRight"
+    AUTO = "auto"
 }
 export declare enum FontFamilyTypes {
     ASSISTANT = "",

package/lib/index.d.ts

@@ -1,7 +1,11 @@
-export { default as Button } from 'src/components/Button/Button';
-export { default as Icon } from 'src/components/Icon/Icon';
 export { default as Checkbox } from 'src/components/Checkbox/Checkbox';
 export { default as SolidSpinner } from 'src/components/SolidSpinner/SolidSpinner';
+export { default as Icon } from 'src/components/Icon/Icon';
+export { default as Button } from 'src/components/Button/Button';
+export { default as InlineButton } from 'src/components/InlineButton/InlineButton';
+export { default as IconButton } from 'src/components/IconButton/IconButton';
+export { default as Separator } from 'src/components/Separator/Separator';
 export { default as Box } from 'src/components/Box/Box';
 export { default as Grid } from 'src/components/Grid/Grid';
 export { Heading, Label, Paragraph, Span } from 'src/components/Typography/Typography';
+export { AppColors, ColorTypes, HierarchyTypes, IconTypes, SizeTypes } from 'src/constants';