@fluidattacks/design 1.2.7 → 1.2.8

package/dist/src/components/@core/types.d.ts

@@ -1,3 +1,4 @@
+import { IconName } from '@fortawesome/free-solid-svg-icons';
 import { Property } from 'csstype';
 type ColorGradient = "01" | "02";
 type ColorPalette = "25" | "50" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
@@ -81,6 +82,7 @@ interface DefaultTheme {
 }
 type TSpacing = keyof DefaultTheme["spacing"];
 type TShadows = keyof DefaultTheme["shadows"];
+type TIconSize = "xl" | "lg" | "md" | "sm" | "xs";
 interface IPaddingModifiable {
     padding?: [TSpacing, TSpacing, TSpacing, TSpacing];
     px?: TSpacing;
@@ -116,6 +118,11 @@ interface IBorderModifiable {
     borderColor?: string;
     borderRadius?: string;
 }
+interface IIconModifiable {
+    icon: IconName;
+    iconColor?: string;
+    iconSize: TIconSize;
+}
 interface IDisplayModifiable {
     scroll?: "none" | "x" | "xy" | "y";
     visibility?: Property.Visibility;
@@ -160,4 +167,4 @@ interface IInteractionModifiable {
     shadowHover?: TShadows;
 }
 type TModifiable = IBorderModifiable & IDisplayModifiable & IInteractionModifiable & IMarginModifiable & IPaddingModifiable & IPositionModifiable & ITextModifiable;
-export type { DefaultTheme as ThemeType, TSpacing, IPaddingModifiable, IMarginModifiable, IDisplayModifiable, ITextModifiable, IInteractionModifiable, IPositionModifiable, IBorderModifiable, TModifiable, };
+export type { DefaultTheme as ThemeType, TSpacing, IPaddingModifiable, IMarginModifiable, IDisplayModifiable, IIconModifiable, ITextModifiable, IInteractionModifiable, IPositionModifiable, IBorderModifiable, TIconSize, TModifiable, };

package/dist/src/components/grid-layout/index.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+declare const config: Meta;
+declare const Layout: () => JSX.Element;
+export { Layout };
+export default config;

package/dist/src/components/grid-layout/styles.d.ts

@@ -0,0 +1,5 @@
+declare const Grid: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const GridSidebar: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const GridContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const DebugContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export { Grid, GridSidebar, GridContent, DebugContainer };

package/dist/src/components/icon/styles.d.ts

@@ -1,11 +1,11 @@
 import { IIconWrapProps } from './types';
 interface IStyledIconWrapProps {
     $clickable?: IIconWrapProps["clickable"];
-    $color?: IIconWrapProps["color"];
+    $color?: IIconWrapProps["iconColor"];
     $hoverColor?: IIconWrapProps["hoverColor"];
     $disabled?: IIconWrapProps["disabled"];
     $rotation?: IIconWrapProps["rotation"];
-    $size: IIconWrapProps["size"];
+    $size: IIconWrapProps["iconSize"];
 }
 declare const IconWrap: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('../@core').IPaddingModifiable | keyof import('../@core').IMarginModifiable | keyof import('../@core').IPositionModifiable | keyof import('../@core').IBorderModifiable | keyof import('../@core').IDisplayModifiable | keyof import('../@core').ITextModifiable | keyof import('../@core').IInteractionModifiable> & import('../@core').IBorderModifiable & import('../@core').IDisplayModifiable & import('../@core').IInteractionModifiable & import('../@core').IMarginModifiable & import('../@core').IPaddingModifiable & import('../@core').IPositionModifiable & import('../@core').ITextModifiable, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import('react').RefObject<HTMLSpanElement> | null | undefined;

package/dist/src/components/icon/types.d.ts

@@ -1,7 +1,5 @@
-import { IconName } from '@fortawesome/free-solid-svg-icons';
 import { MouseEventHandler } from 'react';
-import { IMarginModifiable } from '../@core';
-type TSize = "xl" | "lg" | "md" | "sm" | "xs";
+import { IIconModifiable, IMarginModifiable } from '../@core';
 type TIconType = "fa-brands" | "fa-light" | "fa-regular" | "fa-solid";
 /**
  * Icon Wrapper component props.
@@ -14,14 +12,12 @@ type TIconType = "fa-brands" | "fa-light" | "fa-regular" | "fa-solid";
  * @property {number} [rotation] Rotation degrees to modify icon style.
  * @property {TSize} size The icon size.
  */
-interface IIconWrapProps extends IMarginModifiable {
+interface IIconWrapProps extends IIconModifiable, IMarginModifiable {
     clickable?: boolean;
-    color?: string;
     hoverColor?: string;
     onClick?: MouseEventHandler<HTMLSpanElement>;
     disabled?: boolean;
     rotation?: number;
-    size: TSize;
 }
 /**
  * Icon component props.
@@ -32,7 +28,6 @@ interface IIconWrapProps extends IMarginModifiable {
  */
 interface IIconProps extends IIconWrapProps {
     iconClass?: string;
-    icon: IconName;
     iconType?: TIconType;
 }
-export type { IIconProps, IIconWrapProps, TSize, TIconType };
+export type { IIconProps, IIconWrapProps, TIconType };

package/dist/src/components/tooltip/index.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+import { ITooltipProps } from './types';
+declare const Tooltip: import('react').ForwardRefExoticComponent<Readonly<PropsWithChildren<ITooltipProps>> & import('react').RefAttributes<HTMLDivElement>>;
+export { Tooltip };

package/dist/src/components/tooltip/index.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/react';
+import { ITooltipProps } from './types';
+declare const config: Meta;
+declare const Default: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ITooltipProps>;
+declare const TitleTooltip: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ITooltipProps>;
+declare const IconTooltip: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ITooltipProps>;
+export { Default, TitleTooltip, IconTooltip };
+export default config;

package/dist/src/components/tooltip/styles.d.ts

@@ -0,0 +1,7 @@
+declare const TooltipBox: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('../@core').IPaddingModifiable | keyof import('../@core').IMarginModifiable | keyof import('../@core').IPositionModifiable | keyof import('../@core').IBorderModifiable | keyof import('../@core').IDisplayModifiable | keyof import('../@core').ITextModifiable | keyof import('../@core').IInteractionModifiable> & import('../@core').IBorderModifiable & import('../@core').IDisplayModifiable & import('../@core').IInteractionModifiable & import('../@core').IMarginModifiable & import('../@core').IPaddingModifiable & import('../@core').IPositionModifiable & import('../@core').ITextModifiable, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import('react').RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+declare const StyledTooltip: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $maxWidth?: string;
+}>> & string;
+export { TooltipBox, StyledTooltip };

package/dist/src/components/tooltip/types.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { IDisplayModifiable, IIconModifiable } from '../@core';
+type TPlace = "bottom" | "left" | "right" | "top";
+type TEffect = "float" | "solid";
+/**
+ * Tooltip component props
+ * @extends IIconModifiable
+ * @extends IDisplayModifiable
+ * @property {boolean} [disabled] If the tooltip icon is disabled.
+ * @property {TEffect} [effect] Tooltip visual effect.
+ * @property {boolean} [hide] If the tooltip has a hideout event.
+ * @property {string} [id] The tooltip id, required for it to work.
+ * @property {ReactNode} [nodeTip] The tooltip content when is not plain text.
+ * @property {TPlace} [place] Where to locate the tooltip from parent node.
+ * @property {string} [tip] The tooltip content, only as string.
+ * @property {title} [title] The tooltip title.
+ */
+interface ITooltipProps extends IIconModifiable, Pick<IDisplayModifiable, "display" | "height" | "maxWidth" | "width"> {
+    disabled?: boolean;
+    effect?: TEffect;
+    hide?: boolean;
+    id?: string;
+    nodeTip?: ReactNode;
+    place?: TPlace;
+    tip?: string;
+    title?: string;
+}
+export type { ITooltipProps, TPlace };

package/dist/src/components/typography/types.d.ts

@@ -1,6 +1,6 @@
 import { Property } from 'csstype';
-import { IMarginModifiable, IPaddingModifiable, ITextModifiable } from '../@core';
 import { DefaultTheme } from 'styled-components';
+import { IMarginModifiable, IPaddingModifiable, ITextModifiable } from '../@core';
 type TSize = keyof DefaultTheme["typography"]["heading"];
 /**
  * Typography component props.

package/dist/src/index.d.ts

@@ -4,4 +4,5 @@ export * from './components/colors';
 export * from './components/container';
 export * from './components/icon';
 export * from './components/logo';
+export * from './components/tooltip';
 export * from './components/typography';

package/package.json

@@ -7,10 +7,12 @@
   "dependencies": {
     "@cloudinary/react": "1.13.0",
     "@cloudinary/url-gen": "1.21.0",
+    "@floating-ui/react-dom": "2.1.2",
     "@fortawesome/free-solid-svg-icons": "6.6.0",
     "@fortawesome/react-fontawesome": "0.2.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-tooltip": "5.28.0",
     "styled-components": "6.1.13"
   },
   "devDependencies": {
@@ -24,9 +26,11 @@
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",
     "@vitejs/plugin-react-swc": "3.7.1",
-    "eslint": "9.11.1",
+    "eslint": "9.12.0",
     "eslint-config-prettier": "9.1.0",
+    "eslint-import-resolver-typescript": "3.6.3",
     "eslint-plugin-functional": "7.0.2",
+    "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jsdoc": "50.3.1",
     "eslint-plugin-jsx-a11y": "6.10.0",
     "eslint-plugin-prettier": "5.2.1",
@@ -70,7 +74,7 @@
     "preview": "vite preview",
     "storybook": "storybook dev"
   },
-  "version": "1.2.7",
+  "version": "1.2.8",
   "eslintConfig": {
     "extends": [
       "plugin:storybook/recommended"