@devopness/ui-react 2.145.0

package/README.md

@@ -0,0 +1,75 @@
+# Devopness UI - React
+
+The official Devopness UI components for React
+
+<!-- TODO: enable this section once package is available in npm registry
+
+## Usage
+
+### Install/Upgrade
+
+Use your favourite package manager to install Devopness UI as a dependency of your project:
+
+```bash
+# Using npm
+npm install @devopness/ui-react
+
+# Using yarn
+yarn add @devopness/ui-react
+```
+
+ -->
+
+## Dependencies
+
+This component library uses:
+
+- ⚛️ [React](https://react.dev/) — JavaScript library for user interfaces
+- 📖 [Storybook](https://storybook.js.org/) — Frontend workshop for UI development
+- 💅 [Styled Components](https://styled-components.com/) - CSS-in-JS library for styling components
+- ⚡ [Vite](https://vite.dev/) — The build tool for the web
+- 📦 [SWC (Speedy Web Compiler)](https://swc.rs/) — Rust based compiler used to speed up Vite dev server
+- 🧪 [Vitest](https://vitest.dev/) — Vite-native testing framework
+- 🐙 [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) - A light-weight solution for testing React components
+
+As well as a few others tools configured:
+
+- [TypeScript](https://www.typescriptlang.org/) for static type checking
+- [ESLint](https://eslint.org/) for code linting
+- [Prettier](https://prettier.io) for code formatting
+
+## Development & Testing
+
+Installing on `Linux` or `macOS` systems.
+
+#### 1. Navigate to the project directory
+
+```shell
+cd packages/ui/react/
+```
+
+#### 2. Install missing dependencies
+
+This command will install all modules listed as dependencies in [package.json](package.json).
+
+```
+npm install
+```
+
+#### 3. Build UI package
+
+```
+npm run build
+```
+
+#### 4. Run tests
+
+```
+npm run test
+```
+
+#### 5. Run storybook
+
+```
+npm run storybook
+```

package/dist/colors/getColor.d.ts

@@ -0,0 +1,127 @@
+import { Flatten } from './types';
+declare const colors: {
+    readonly amber: {
+        readonly 800: "#a39015";
+        readonly 500: "#fab01c";
+        readonly 400: "#fdb762";
+        readonly 300: "#fdd88e";
+        readonly 200: "#fee2c0";
+        readonly 150: "#feebc6";
+        readonly 100: "#fff1e0";
+        readonly 50: "#fff6ef";
+        readonly 10: "#fffcf5";
+    };
+    readonly black: "#000000";
+    readonly blue: {
+        readonly 950: "#2e374e";
+        readonly 800: "#2e364e";
+        readonly 750: "#37436b";
+        readonly 700: "#0064a5";
+        readonly 600: "#016ee9";
+        readonly 500: "#0496f5";
+        readonly 400: "#96c7fe";
+        readonly 300: "#b9daff";
+        readonly 100: "#dcecff";
+        readonly 50: "#e8f6ff";
+        readonly 25: "#eef2ff";
+    };
+    readonly brown: {
+        readonly 400: "#b5a7a2";
+        readonly 50: "#faf8f1";
+    };
+    readonly cyan: {
+        readonly 800: "#537e8c";
+        readonly 400: "#00d7d7";
+        readonly 300: "#02e0d1";
+        readonly 200: "#e0f7fa";
+        readonly 100: "#ebfafb";
+        readonly 50: "#f6fffe";
+    };
+    readonly fuchsia: {
+        readonly 600: "#d000ff";
+        readonly 10: "#fdf5ff";
+    };
+    readonly gray: {
+        readonly 900: "#42495a";
+        readonly 800: "#828795";
+        readonly 615: "#9198a5";
+        readonly 600: "#9196a4";
+        readonly 500: "#b0b3bc";
+        readonly 400: "#afb8c9";
+        readonly 300: "#bdc4d3";
+        readonly 200: "#f3f7fe";
+    };
+    readonly green: {
+        readonly 800: "#57b261";
+        readonly 600: "#0cd356";
+        readonly 300: "#9eedbb";
+        readonly 200: "#b6f2cc";
+        readonly 150: "#cef6dd";
+        readonly 125: "#effff1";
+        readonly 100: "#edf9ee";
+    };
+    readonly indigo: {
+        readonly 100: "#f5f6ff";
+        readonly 50: "#f6f8ff";
+        readonly 10: "#f8faff";
+    };
+    readonly orange: {
+        readonly 700: "#f89532";
+        readonly 600: "#ff8700";
+        readonly 500: "#f8bf4d";
+        readonly 400: "#fdba62";
+        readonly 100: "#f6f4e7";
+        readonly 50: "#fff6f0";
+        readonly 10: "#fff9f0";
+    };
+    readonly purple: {
+        readonly 800: "#786efd";
+        readonly 400: "#cac7fc";
+        readonly 300: "#dfe4fd";
+        readonly 275: "#dfe6ff";
+        readonly 250: "#e6ecff";
+        readonly 100: "#f2f1ff";
+        readonly 50: "#f2f2fa";
+    };
+    readonly red: {
+        readonly 500: "#fd595c";
+        readonly 450: "#ff6666";
+        readonly 400: "#f67771";
+        readonly 300: "#febdbe";
+        readonly 200: "#fecdce";
+        readonly 150: "#ffdede";
+        readonly 100: "#ffe8e8";
+        readonly 50: "#fff3f3";
+    };
+    readonly slate: {
+        readonly 600: "#4a526a";
+        readonly 450: "#72798f";
+        readonly 400: "#abb4c5";
+        readonly 300: "#e3e8f9";
+    };
+    readonly stone: {
+        readonly 100: "#f6f6f6";
+        readonly 50: "#edf2f3";
+    };
+    readonly transparent: "transparent";
+    readonly white: "#ffffff";
+    readonly yellow: {
+        readonly 300: "#fff793";
+    };
+};
+/**
+ * Maps Color paths on format <color>.<shade> to its value in hex, based on colors object
+ */
+type ColorToHexMapper = Flatten<typeof colors>;
+/**
+ * Lists all valid color codes, following format <color>.<shade>
+ */
+type Color = keyof ColorToHexMapper;
+/**
+ * Gets the color' hex value
+ *
+ * @param name Color name on format <color>.<shade>
+ */
+declare const getColor: <TColor extends Color>(name: TColor) => ColorToHexMapper[TColor];
+export type { Color };
+export { getColor };

package/dist/colors/index.d.ts

@@ -0,0 +1,2 @@
+export * from './getColor';
+export * from './types';

package/dist/colors/types.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Flatten an object while retaining types for all paths
+ *
+ * The mapped type keys are useful to work with loadash.get
+ *
+ * Examples:
+ *
+ * Flatten<{ red: 'red', green: { 50: 'light-green' }}>
+ * // ^? { red: 'red', 'green.50': 'light-green' }
+ *
+ * @see {@link https://docs-lodash.com/v4/get/}
+ *
+ * Code obtained from StackOverflow: https://stackoverflow.com/a/66620803
+ * Source code from jcalz @ https://stackoverflow.com/users/2887218/jcalz
+ */
+type Flatten<T extends object> = object extends T ? object : {
+    [K in keyof T]-?: (x: NonNullable<T[K]> extends infer V ? V extends object ? V extends readonly unknown[] ? Pick<T, K> : Flatten<V> extends infer FV ? {
+        [P in keyof FV as `${Extract<K, string | number>}.${Extract<P, string | number>}`]: FV[P];
+    } : never : Pick<T, K> : never) => void;
+} extends Record<keyof T, (y: infer O) => void> ? O extends infer _ ? {
+    [K in keyof O]: O[K];
+} : never : never;
+export type { Flatten };

package/dist/components/Buttons/Button/Button.d.ts

@@ -0,0 +1,64 @@
+import { ButtonHTMLAttributes } from 'react';
+import { getColor } from 'src/colors';
+import { Icon } from 'src/icons';
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * By default the button component is 34px high, the "typeSize" property contains
+     * the "medium" variation that changes to 27px
+     */
+    typeSize?: 'default' | 'medium' | 'auto';
+    /** Icon name */
+    icon?: Icon;
+    /** Enable button loading animation */
+    loading?: boolean;
+    /**
+     * With the property "revertOrientation" it is possible to change the positioning of
+     * the elements inside the button as "icon" or "loading"
+     */
+    revertOrientation?: boolean;
+    /** Predefined style variations for the button */
+    buttonType?: 'borderless' | 'outlinedSecondary' | 'outlinedAuxiliary' | 'Default';
+    /** `Warning`: This property overrides the style defined by the `buttonType` property!
+     *
+     * Customize elements color
+     */
+    color?: string;
+    /** `Warning`: This property overrides the style defined by the `buttonType` property!
+     *
+     * Customize background color
+     */
+    backgroundColor?: string;
+    /** `Warning`: This property overrides the style defined by the `buttonType` property!
+     *
+     * Customize border color
+     */
+    borderColor?: string;
+    /**
+     * The button component has a 15px margin on its sides, to remove activate the "noMargin" property
+     */
+    noMargin?: boolean;
+    /**
+     * The button component has a 10px margin on its sides, to remove activate the "noIconMargin" property
+     */
+    noIconMargin?: boolean;
+    /**
+     * The button component has a 15px padding on its sides, to remove activate the "noPadding" property
+     */
+    noPadding?: boolean;
+    /**
+     * It should be true if the button is wrapped in a tooltip
+     */
+    noPointerEvents?: boolean;
+    /**
+     * By default the icon component is 16px high, use this prop to customize "iconSize"
+     */
+    iconSize?: number;
+    /**
+     * By default the icon color is primary, use this prop to customize "iconColor"
+     */
+    iconColor?: ReturnType<typeof getColor>;
+};
+/** Primary UI component for user interaction */
+declare const Button: ({ type, typeSize, buttonType, color, backgroundColor, borderColor, disabled, onClick, tabIndex, loading: isLoading, icon, children, revertOrientation, noMargin, noIconMargin, noPointerEvents, iconSize, iconColor, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export type { ButtonProps };
+export { Button };

package/dist/components/Buttons/Button/Button.styled.d.ts

@@ -0,0 +1,26 @@
+import { ButtonProps } from '.';
+type CustomButton = {
+    backgroundColor?: string;
+    color?: string;
+    borderColor?: string;
+};
+type StyledProps = {
+    noMargin?: boolean;
+    noPadding?: boolean;
+    size: NonNullable<ButtonProps['typeSize']>;
+    variant?: string;
+    custom?: CustomButton;
+    icon?: boolean;
+    alignEnd?: boolean;
+    reversed: boolean;
+    noPointerEvents?: boolean;
+};
+declare const ContentIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<ButtonProps, "noIconMargin"> & {
+    reversed: ButtonProps["revertOrientation"];
+    size: Required<ButtonProps["iconSize"]>;
+}>> & string;
+declare const Label: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+declare const WrapperButtons: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
+declare const BaseButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledProps>> & string;
+declare const SmallWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
+export { ContentIcon, Label, WrapperButtons, BaseButton, SmallWrapper };

package/dist/components/Buttons/Button/index.d.ts

@@ -0,0 +1 @@
+export * from './Button';

package/dist/components/Buttons/index.d.ts

@@ -0,0 +1 @@
+export * from './Button';

package/dist/components/Primitives/Tooltip/Tooltip.d.ts

@@ -0,0 +1,41 @@
+import { TooltipProps } from '@mui/material/Tooltip';
+type Nullable<T extends object> = {
+    [K in keyof T]: T[K] | null | undefined;
+};
+type TooltipComponentProps = {
+    /**
+     * Tooltip reference element.
+     */
+    children: React.ReactNode;
+    /**
+     * Define component styles
+     */
+    styles?: {
+        /**
+         * Tooltip background color.
+         * (Does not work with JSX children)
+         */
+        backgroundColor?: string;
+        /**
+         * font color
+         */
+        color?: string;
+    };
+    /**
+     * If `true`, hover in the tooltip is disabled.
+     */
+    disableHover?: boolean;
+    /**
+     * If `true`, hover in the tooltip is disabled and enabled only when the
+     * element reaches the limit of the width of the contained element.
+     */
+    enableOnlyWithEllipsisPoints?: boolean;
+    /**
+     * It should be defined when the component is going to be used
+     * in the controlled way
+     */
+    open?: boolean;
+} & Omit<TooltipProps, 'title' | 'children'> & Nullable<Pick<TooltipProps, 'title'>>;
+/** Display informative text when users hover over a child element */
+declare const Tooltip: ({ disableHover, enableOnlyWithEllipsisPoints, title, children, ...props }: TooltipComponentProps) => import("react/jsx-runtime").JSX.Element;
+export { Tooltip };

package/dist/components/Primitives/Tooltip/Tooltip.styled.d.ts

@@ -0,0 +1,2 @@
+declare const ContentChildren: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export { ContentChildren };

package/dist/components/Primitives/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './Tooltip';

package/dist/components/Primitives/index.d.ts

@@ -0,0 +1 @@
+export * from './Tooltip';

package/dist/components/Templates/Tabs/Tabs.d.ts

@@ -0,0 +1,20 @@
+type TabsProps = {
+    /**
+     * Tabs to be rendered
+     *
+     * - When data has only one tab, Tabs selector becomes hidden
+     * - When data is empty, this component returns null
+     */
+    data: {
+        label: string;
+        component: React.ReactNode;
+    }[];
+    currentTabIndex: number;
+    onTabClick?: (event: {
+        index: number;
+        label: string;
+    }) => void;
+};
+/** Switch between different views on the same page */
+declare const Tabs: ({ data: tabsData, currentTabIndex, onTabClick, }: TabsProps) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import('react').ReactNode> | null | undefined;
+export { Tabs };

package/dist/components/Templates/Tabs/Tabs.styled.d.ts

@@ -0,0 +1,7 @@
+declare const StyledTabs: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('@mui/material').TabsOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+}, "value" | "className" | "style" | "aria-label" | "aria-labelledby" | "children" | "onChange" | "variant" | "action" | "orientation" | "classes" | "slotProps" | "slots" | "sx" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar">, never>> & string & Omit<import('@mui/material/OverridableComponent').OverridableComponent<import('@mui/material').TabsTypeMap<{}, "div">>, keyof import('react').Component<any, {}, any>>;
+declare const StyledTab: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('@mui/material').TabOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+}, "disabled" | "value" | "className" | "style" | "tabIndex" | "children" | "icon" | "label" | "action" | "classes" | "sx" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "iconPosition" | "wrapped">, never>> & string & Omit<import('@mui/material').ExtendButtonBase<import('@mui/material').TabTypeMap<{}, "div">>, keyof import('react').Component<any, {}, any>>;
+export { StyledTabs, StyledTab };

package/dist/components/Templates/Tabs/index.d.ts

@@ -0,0 +1 @@
+export * from './Tabs';

package/dist/components/Templates/index.d.ts

@@ -0,0 +1 @@
+export * from './Tabs';

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Buttons';
+export * from './Primitives';
+export * from './Templates';

package/dist/fonts/getFont.d.ts

@@ -0,0 +1,15 @@
+declare const fonts: {
+    readonly roboto: "Roboto";
+    readonly montserrat: "Montserrat";
+    readonly mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
+};
+/**
+ * Lists all valid font codes
+ */
+type Font = keyof typeof fonts;
+/**
+ * Gets the font' CSS Font Family list
+ */
+declare const getFont: <TFont extends Font>(name: TFont) => (typeof fonts)[TFont];
+export type { Font };
+export { getFont };

package/dist/fonts/index.d.ts

@@ -0,0 +1 @@
+export * from './getFont';

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useWindowSize';

package/dist/hooks/useWindowSize.d.ts

@@ -0,0 +1,2 @@
+declare const useWindowSize: () => number[];
+export { useWindowSize };

package/dist/icons/CircleBubble.d.ts

@@ -0,0 +1,5 @@
+declare const CircleBubble: ({ color, size }: {
+    color: string;
+    size: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export { CircleBubble };

package/dist/icons/getImageAssetUrl.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Get URL for the given image asset on Devopness' CDN.
+ *
+ * @param imageAssetPath - Image asset path relative to CDN /images/ path.
+ */
+declare function getImageAssetUrl(imageAssetPath: string): string;
+export { getImageAssetUrl };