@fluidattacks/design 1.2.6 → 1.2.8

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

@@ -1,4 +1,5 @@
 import { TModifiable } from './types';
 declare const BaseComponent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TModifiable>> & string;
 declare const BaseTextComponent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TModifiable>> & string;
-export { BaseComponent, BaseTextComponent };
+declare const BaseSpanComponent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, TModifiable>> & string;
+export { BaseComponent, BaseTextComponent, BaseSpanComponent };

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";
@@ -29,6 +30,7 @@ interface DefaultTheme {
         3: "3rem";
         3.5: "3.5rem";
         4: "4rem";
+        4.5: "4.5rem";
         5: "5rem";
         6: "6rem";
     };
@@ -80,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;
@@ -115,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;
@@ -159,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/container/index.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { IContainerProps } from './types';
+declare const config: Meta;
+declare const Default: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, import('react').PropsWithChildren<IContainerProps>>;
+declare const FlexBox: StoryFn;
+export { Default, FlexBox };
+export default config;

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

@@ -8,7 +8,7 @@ type THtmlTag = keyof ReactHTML;
  * @property {THtmlTag} [as] The react html tag to represent.
  * @property {boolean} [center] Whether to center the content.
  * @property {Function} [onHover] Function handler for hover event.
- * @property {Function} [onLeave] Function handler for hover event.
+ * @property {Function} [onLeave] Function handler for leave event.
  */
 interface IContainerProps extends TModifiable, HTMLAttributes<HTMLDivElement> {
     as?: THtmlTag;

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/index.d.ts

@@ -0,0 +1,3 @@
+import { IIconProps } from './types';
+declare const Icon: import('react').ForwardRefExoticComponent<Readonly<IIconProps> & import('react').RefAttributes<HTMLSpanElement>>;
+export { Icon };

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

@@ -0,0 +1,14 @@
+import { IIconWrapProps } from './types';
+interface IStyledIconWrapProps {
+    $clickable?: IIconWrapProps["clickable"];
+    $color?: IIconWrapProps["iconColor"];
+    $hoverColor?: IIconWrapProps["hoverColor"];
+    $disabled?: IIconWrapProps["disabled"];
+    $rotation?: IIconWrapProps["rotation"];
+    $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;
+}, IStyledIconWrapProps>> & string;
+declare const IconInGalleryWrap: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export { IconWrap, IconInGalleryWrap };

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

@@ -0,0 +1,33 @@
+import { MouseEventHandler } from 'react';
+import { IIconModifiable, IMarginModifiable } from '../@core';
+type TIconType = "fa-brands" | "fa-light" | "fa-regular" | "fa-solid";
+/**
+ * Icon Wrapper component props.
+ * @extends IMarginModifiable
+ * @property {boolean} [clickable] Defines the cursor to show on icon hover.
+ * @property {string} [color] The icon color.
+ * @property {string} [hoverColor] The icon color onn hover.
+ * @property {Function} [onClick] Function handler for click event.
+ * @property {boolean} [disabled] Show disabled icon state.
+ * @property {number} [rotation] Rotation degrees to modify icon style.
+ * @property {TSize} size The icon size.
+ */
+interface IIconWrapProps extends IIconModifiable, IMarginModifiable {
+    clickable?: boolean;
+    hoverColor?: string;
+    onClick?: MouseEventHandler<HTMLSpanElement>;
+    disabled?: boolean;
+    rotation?: number;
+}
+/**
+ * Icon component props.
+ * @extends IIconWrapProps
+ * @property {string} [iconClass] The icon class from fontawesome.
+ * @property {IconName} icon The icon name coming from fontawesome.
+ * @property {TIconType} iconType The icon type.
+ */
+interface IIconProps extends IIconWrapProps {
+    iconClass?: string;
+    iconType?: 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

@@ -2,5 +2,7 @@ export * from './components/@core';
 export * from './components/cloud-image';
 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,23 +7,38 @@
   "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": {
+    "@storybook/addon-essentials": "8.3.5",
+    "@storybook/addon-interactions": "8.3.5",
+    "@storybook/addon-links": "8.3.5",
+    "@storybook/blocks": "8.3.5",
+    "@storybook/react": "8.3.5",
+    "@storybook/react-vite": "8.3.5",
+    "@storybook/test": "8.3.5",
     "@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",
     "eslint-plugin-project-structure": "3.0.1",
     "eslint-plugin-react": "7.37.0",
     "postcss-styled-syntax": "0.6.4",
+    "remark-gfm": "4.0.0",
+    "storybook": "8.3.5",
     "stylelint": "16.9.0",
     "stylelint-config-standard": "36.0.1",
     "typescript": "5.6.2",
@@ -53,9 +68,16 @@
     "url": "git+https://gitlab.com/fluidattacks/universe.git"
   },
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build",
-    "preview": "vite preview"
+    "build-storybook": "storybook build",
+    "dev": "vite",
+    "preview": "vite preview",
+    "storybook": "storybook dev"
   },
-  "version": "1.2.6"
+  "version": "1.2.8",
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
 }