@fluidattacks/design 1.2.5 → 1.2.7

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

@@ -29,6 +29,7 @@ interface DefaultTheme {
         3: "3rem";
         3.5: "3.5rem";
         4: "4rem";
+        4.5: "4.5rem";
         5: "5rem";
         6: "6rem";
     };

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/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["color"];
+    $hoverColor?: IIconWrapProps["hoverColor"];
+    $disabled?: IIconWrapProps["disabled"];
+    $rotation?: IIconWrapProps["rotation"];
+    $size: IIconWrapProps["size"];
+}
+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,38 @@
+import { IconName } from '@fortawesome/free-solid-svg-icons';
+import { MouseEventHandler } from 'react';
+import { IMarginModifiable } from '../@core';
+type TSize = "xl" | "lg" | "md" | "sm" | "xs";
+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 IMarginModifiable {
+    clickable?: boolean;
+    color?: string;
+    hoverColor?: string;
+    onClick?: MouseEventHandler<HTMLSpanElement>;
+    disabled?: boolean;
+    rotation?: number;
+    size: TSize;
+}
+/**
+ * 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;
+    icon: IconName;
+    iconType?: TIconType;
+}
+export type { IIconProps, IIconWrapProps, TSize, TIconType };

package/dist/src/index.d.ts

@@ -2,4 +2,6 @@ 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/typography';

package/package.json

@@ -8,22 +8,33 @@
     "@cloudinary/react": "1.13.0",
     "@cloudinary/url-gen": "1.21.0",
     "@fortawesome/free-solid-svg-icons": "6.6.0",
+    "@fortawesome/react-fontawesome": "0.2.2",
     "react": "18.2.0",
     "react-dom": "18.2.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-config-prettier": "9.1.0",
     "eslint-plugin-functional": "7.0.2",
+    "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 +64,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.5"
+  "version": "1.2.7",
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
 }