@fluidattacks/design 1.2.0 → 1.2.2

package/dist/dist/design.d.mts

@@ -0,0 +1,9 @@
+import { default as Yr } from 'react';
+export { bu as CloudImage };
+declare const bu: Yr.MemoExoticComponent<({ alt: t, height: e, publicId: r, width: n, plugins: s }: {
+    alt: any;
+    height: any;
+    publicId: any;
+    width: any;
+    plugins?: (((r?: any, n?: any, s?: any, c?: any) => false | Promise<any>) | ((e?: any, r?: any, n?: any, s?: any, c?: any) => true | Promise<any> | undefined))[] | undefined;
+}) => any>;

package/dist/dist/design.d.ts

@@ -0,0 +1,9 @@
+export { ou as CloudImage };
+declare const ou: Gt.MemoExoticComponent<({ alt: t, height: e, publicId: r, width: n, plugins: s }: {
+    alt: any;
+    height: any;
+    publicId: any;
+    width: any;
+    plugins?: (((r?: any, n?: any, s?: any, c?: any) => false | Promise<any>) | ((e?: any, r?: any, n?: any, s?: any, c?: any) => true | Promise<any> | undefined))[] | undefined;
+}) => any>;
+import Gt = require("react");

package/dist/eslint.config.d.mts

@@ -0,0 +1,2 @@
+declare const _default: any[];
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const hiddenProps: string[];
+export { hiddenProps };

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

@@ -0,0 +1,3 @@
+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;
+export { BaseComponent };

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

@@ -0,0 +1,80 @@
+import { Property } from 'csstype';
+import { DefaultTheme } from 'styled-components';
+type TSpacing = keyof DefaultTheme["spacing"];
+type TShadows = keyof DefaultTheme["shadows"];
+interface IPaddingModifiable {
+    padding?: [TSpacing, TSpacing, TSpacing, TSpacing];
+    px?: TSpacing;
+    py?: TSpacing;
+    pl?: TSpacing;
+    pr?: TSpacing;
+    pt?: TSpacing;
+    pb?: TSpacing;
+}
+interface IMarginModifiable {
+    margin?: [TSpacing, TSpacing, TSpacing, TSpacing];
+    mx?: TSpacing;
+    my?: TSpacing;
+    ml?: TSpacing;
+    mr?: TSpacing;
+    mt?: TSpacing;
+    mb?: TSpacing;
+}
+interface IPositionModifiable {
+    zIndex?: number;
+    position?: Property.Position;
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+}
+interface IBorderModifiable {
+    border?: string;
+    borderTop?: string;
+    borderRight?: string;
+    borderBottom?: string;
+    borderLeft?: string;
+    borderColor?: string;
+    borderRadius?: string;
+}
+interface IDisplayModifiable {
+    scroll?: "none" | "x" | "xy" | "y";
+    visibility?: Property.Visibility;
+    display?: Property.Display;
+    height?: string;
+    width?: string;
+    maxHeight?: string;
+    maxWidth?: string;
+    minHeight?: string;
+    minWidth?: string;
+    shadow?: TShadows;
+    bgColor?: string;
+    bgGradient?: string;
+    gap?: TSpacing;
+    flexDirection?: Property.FlexDirection;
+    flexGrow?: Property.FlexGrow;
+    justify?: Property.JustifyContent;
+    justifySelf?: Property.JustifyContent;
+    alignItems?: Property.AlignItems;
+    alignSelf?: Property.AlignItems;
+    wrap?: Property.FlexWrap;
+}
+interface ITextModifiable {
+    color?: string;
+    fontSize?: Property.FontSize<number | string>;
+    fontWeight?: Property.FontWeight;
+    lineSpacing?: Property.LineHeight<number | string>;
+    textAlign?: Property.TextAlign;
+    textOverflow?: Property.Overflow;
+    whiteSpace?: Property.WhiteSpace;
+    wordBreak?: Property.WordBreak;
+}
+interface IInteractionModifiable {
+    cursor?: Property.Cursor;
+    transition?: string;
+    borderColorHover?: string;
+    bgColorHover?: string;
+    shadowHover?: TShadows;
+}
+type TModifiable = IBorderModifiable & IDisplayModifiable & IInteractionModifiable & IMarginModifiable & IPaddingModifiable & IPositionModifiable & ITextModifiable;
+export type { TSpacing, IPaddingModifiable, IMarginModifiable, IDisplayModifiable, ITextModifiable, IInteractionModifiable, IPositionModifiable, IBorderModifiable, TModifiable, };

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

@@ -0,0 +1,11 @@
+import { StyledOptions } from 'styled-components';
+import { IBorderModifiable, IDisplayModifiable, IInteractionModifiable, IMarginModifiable, IPaddingModifiable, IPositionModifiable, ITextModifiable } from './types';
+declare const setPadding: (props: Readonly<IPaddingModifiable>) => string;
+declare const setMargin: (props: Readonly<IMarginModifiable>) => string;
+declare const setPosition: (props: Readonly<IPositionModifiable>) => string;
+declare const setBorder: (props: Readonly<IBorderModifiable>) => string;
+declare const setDisplay: (props: Readonly<IDisplayModifiable>) => string;
+declare const setText: (props: Readonly<ITextModifiable>) => string;
+declare const setInteraction: (props: Readonly<IInteractionModifiable>) => string;
+declare const getStyledConfig: () => StyledOptions<"web", object>;
+export { setPadding, setText, setMargin, setInteraction, setPosition, setDisplay, setBorder, getStyledConfig, };

package/dist/src/components/@core/variants/utils.d.ts

@@ -0,0 +1,60 @@
+import { IconPrefix } from '@fortawesome/free-solid-svg-icons';
+import { DefaultTheme, Interpolation } from 'styled-components';
+type TCssString = Interpolation<object>[];
+/**
+ * Object with the icons to be printed on Iconography section.
+ * The key is the name of the icon and the value is an array of icon prefixes.
+ *
+ * Possible prefixes are:
+ * - `fas`: for solid icons
+ * - `far`: for regular icons
+ *
+ * Example:
+ * ```ts
+ * const icons: IconsList = {
+ *   "user": ["far", "fas"],
+ *   "search": ["fas"],
+ *   ...
+ * };
+ * ```
+ */
+type TIconsList = Record<string, [IconPrefix, IconPrefix] | [IconPrefix]>;
+interface IComponentVariant<T extends string> {
+    /**
+     * Get the variant css string. It can be added to `styled` template string.
+     *
+     * @param theme Theme to use
+     * @param variant Variant to get
+     * @returns Css string for the variant
+     */
+    getVariant: (theme: Readonly<DefaultTheme>, variant: T) => TCssString;
+}
+/**
+ * Builder function to create a function for getting component variants
+ * injecting the theme.
+ *
+ * Example:
+ * ```ts
+ * const { getVariant } = variantBuilder((theme) => ({
+ *  primary: css`
+ *    background: ${theme.colors.primary};
+ *    border: 2px solid ${theme.colors.primary};
+ *    color: ${theme.colors.white};
+ *  `,
+ *  secondary: css`
+ *    background: ${theme.colors.secondary};
+ *    border: 2px solid ${theme.colors.secondary};
+ *    color: ${theme.colors.white};
+ *  `,
+ * }));
+ *
+ * getVariant(theme, "primary"); // returns the primary variant
+ * ```
+ *
+ * @param variants A function that returns the variants of a component as
+ * an object with variants as keys and values as css strings.
+ * @returns An object with a function to get the variant.
+ */
+declare const variantBuilder: <T extends string>(variants: (theme: Readonly<DefaultTheme>) => Record<T, TCssString>) => IComponentVariant<T>;
+export type { TCssString, IComponentVariant, TIconsList };
+export { variantBuilder };

package/dist/src/components/cloud-image/index.d.ts

@@ -0,0 +1,12 @@
+import { Plugins } from '@cloudinary/html';
+import { default as React } from 'react';
+interface IImageProps {
+    alt?: string;
+    height?: number | string;
+    publicId: string;
+    width?: number | string;
+    plugins?: Plugins;
+}
+declare const MemoizedImage: React.MemoExoticComponent<({ alt, height, publicId, width, plugins, }: Readonly<IImageProps>) => JSX.Element>;
+export type { IImageProps };
+export default MemoizedImage;

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

@@ -0,0 +1,10 @@
+import { IconName, IconPrefix } from '@fortawesome/free-solid-svg-icons';
+import { default as React } from 'react';
+import { DefaultTheme } from 'styled-components';
+declare const icons: IconName[];
+declare const uniqueIcons: [IconPrefix, IconName][];
+declare const theme: DefaultTheme;
+declare const CustomThemeProvider: ({ children, }: Readonly<{
+    children: React.ReactNode;
+}>) => JSX.Element;
+export { CustomThemeProvider, theme, icons, uniqueIcons };

package/dist/src/hooks/index.d.ts

@@ -0,0 +1,2 @@
+import { useCloudinaryImage } from './use-cloudinary-image';
+export { useCloudinaryImage };

package/dist/src/hooks/use-cloudinary-image.d.ts

@@ -0,0 +1,7 @@
+import { CloudinaryImage } from '@cloudinary/url-gen';
+interface IUseCloudinaryImageProps {
+    readonly publicId: string;
+    readonly format?: string;
+}
+export declare const useCloudinaryImage: ({ publicId, format, }: IUseCloudinaryImageProps) => CloudinaryImage;
+export {};

package/dist/src/index.d.ts

@@ -0,0 +1 @@
+export { default as CloudImage } from './components/cloud-image';

package/dist/vite.config.d.ts

@@ -0,0 +1,3 @@
+import { UserConfigExport } from 'vite';
+declare const viteConfig: UserConfigExport;
+export default viteConfig;

package/package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "@cloudinary/react": "1.13.0",
     "@cloudinary/url-gen": "1.21.0",
+    "@fortawesome/free-solid-svg-icons": "6.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "styled-components": "6.1.13"
@@ -15,17 +16,23 @@
     "@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-jsx-a11y": "6.10.0",
+    "eslint-plugin-prettier": "5.2.1",
+    "eslint-plugin-react": "7.37.0",
+    "postcss-styled-syntax": "0.6.4",
+    "stylelint": "16.9.0",
+    "stylelint-config-standard": "36.0.1",
     "typescript": "5.6.2",
-    "vite-plugin-dts": "4.2.3",
-    "vite": "5.4.8"
+    "typescript-eslint": "8.8.0",
+    "vite": "5.4.8",
+    "vite-plugin-dts": "4.2.3"
   },
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    }
-  },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "homepage": "https://gitlab.com/fluidattacks/universe#readme",
   "keywords": [
     "components",
@@ -33,8 +40,9 @@
     "fluidattacks"
   ],
   "license": "MPL-2.0",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "main": "dist/design.js",
+  "module": "dist/design.mjs",
+  "types": "dist/src/index.d.ts",
   "name": "@fluidattacks/design",
   "publishConfig": {
     "access": "public"
@@ -48,5 +56,5 @@
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
-  "version": "1.2.0"
+  "version": "1.2.2"
 }