@devtron-labs/devtron-fe-common-lib 0.1.7 → 0.1.8-beta-2

package/dist/Common/Helper.d.ts

@@ -1,4 +1,5 @@
 import { default as React, SyntheticEvent } from 'react';
+import { JSONPathOptions } from 'jsonpath-plus';
 import { AsyncOptions, UseSearchString } from './Types';
 import { scrollableInterface } from '../Shared';
 
@@ -94,6 +95,8 @@ export declare const getRegexMatchPositions: (string: string, regex: RegExp) =>
  * @returns set of substrings
  */
 export declare const powerSetOfSubstringsFromStart: (strings: string[], regex: RegExp) => string[];
+export declare const convertJSONPointerToJSONPath: (pointer: string) => string;
+export declare const flatMapOfJSONPaths: (paths: string[], json: object, resultType?: JSONPathOptions['resultType']) => string[];
 /**
  * Returns a debounced variant of the function
  */

package/dist/Common/RJSF/templates/ArrayFieldItemTemplate.d.ts

@@ -1,3 +1,3 @@
 import { ArrayFieldTemplateItemType } from '@rjsf/utils';
 
-export declare const ArrayFieldItemTemplate: ({ children, className, disabled, hasToolbar, hasRemove, index, onDropIndexClick, readonly, registry, uiSchema, }: ArrayFieldTemplateItemType) => JSX.Element;
+export declare const ArrayFieldItemTemplate: ({ children, disabled, hasToolbar, hasRemove, index, onDropIndexClick, readonly, registry, uiSchema, }: ArrayFieldTemplateItemType) => JSX.Element;

package/dist/Common/RJSF/templates/ObjectFieldTemplate.d.ts

@@ -1,3 +1,4 @@
 import { ObjectFieldTemplateProps } from '@rjsf/utils';
+import { RJSFFormSchema } from '../types';
 
-export declare const ObjectFieldTemplate: (props: ObjectFieldTemplateProps) => JSX.Element;
+export declare const ObjectFieldTemplate: (props: ObjectFieldTemplateProps<any, RJSFFormSchema, any>) => JSX.Element;

package/dist/Common/RJSF/types.d.ts

@@ -1,4 +1,16 @@
 import { ComponentProps } from 'react';
 import { default as RJSFForm } from '@rjsf/core';
+import { StrictRJSFSchema } from '@rjsf/utils';
 
 export type FormProps = Omit<ComponentProps<typeof RJSFForm>, 'validator'>;
+interface Hidden {
+    condition: boolean;
+    match: string;
+}
+export interface RJSFFormSchema extends StrictRJSFSchema {
+    properties: {
+        [key: string]: RJSFFormSchema;
+    };
+    hidden: Hidden;
+}
+export {};

package/dist/Common/RJSF/utils.d.ts

@@ -1,5 +1,5 @@
 import { TranslatableString } from '@rjsf/utils';
-import { default as Tippy } from '@tippyjs/react';
+import { default as Tippy } from '../Tippy';
 
 /**
  * Override for the TranslatableString from RJSF
@@ -25,4 +25,4 @@ export declare const getRedirectionProps: (url: string) => import('react').Ancho
  * Infers the type for json schema from value type
  */
 export declare const getInferredTypeFromValueType: (value: any) => "string" | "number" | "boolean" | "object" | "array" | "null";
-export declare const getTippyWrapperWithContent: (content: any, placement?: React.ComponentProps<typeof Tippy>['placement']) => (children: any) => JSX.Element;
+export declare const getTippyWrapperWithContent: (content: any, placement?: React.ComponentProps<typeof Tippy>['placement'], truncateWidth?: number) => (children: any) => JSX.Element;

package/dist/Common/Tippy.d.ts

@@ -0,0 +1,4 @@
+import { TippyProps as TippyJSProps } from '@tippyjs/react';
+
+declare const Tippy: ({ truncateWidth, children, ...rest }: TippyJSProps & Record<'truncateWidth', number>) => JSX.Element;
+export default Tippy;

package/dist/Common/index.d.ts

@@ -54,3 +54,4 @@ export * from './GenericDescription';
 export * from './SegmentedBarChart';
 export * from './CodeEditor';
 export * from './AppStatus';
+export { default as Tippy } from './Tippy';

package/dist/Shared/Components/SelectPicker/SelectPicker.component.d.ts

@@ -0,0 +1,85 @@
+import { SelectPickerProps } from './type';
+
+/**
+ * Generic component for select picker
+ *
+ * @example With icon in control
+ * ```tsx
+ * <SelectPicker ... icon={<CustomIcon />} />
+ * ```
+ *
+ * @example Medium menu list width
+ * ```tsx
+ * <SelectPicker ... menuSize={ComponentSizeType.medium} />
+ * ```
+ *
+ * @example Large menu list width
+ * ```tsx
+ * <SelectPicker ... menuSize={ComponentSizeType.large} />
+ * ```
+ *
+ * @example Required label
+ * ```tsx
+ * <SelectPicker ... required label="Label" />
+ * ```
+ *
+ * @example Custom label
+ * ```tsx
+ * <SelectPicker ... label={<div>Label</div>} />
+ * ```
+ *
+ * @example Error state
+ * ```tsx
+ * <SelectPicker ... error="Something went wrong" />
+ * ```
+ *
+ * @example Helper text
+ * ```tsx
+ * <SelectPicker ... helperText="Help information" />
+ * ```
+ *
+ * @example Menu list footer
+ * The footer is sticky by default
+ * ```tsx
+ * <SelectPicker
+ *      ...
+ *      renderMenuListFooter={() => (
+ *          <div className="px-8 py-6 dc__border-top bcn-50 cn-6">
+ *              <div>Foot note</div>
+ *          </div>
+ *      )}
+ * />
+ * ```
+ *
+ * @example Loading state
+ * ```tsx
+ * <SelectPicker ... isLoading />
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <SelectPicker ... isDisabled />
+ * ```
+ *
+ * @example Loading & disabled state
+ * ```tsx
+ * <SelectPicker ... isLoading isDisabled />
+ * ```
+ *
+ * @example Hide selected option icon in control
+ * ```tsx
+ * <SelectPicker ... showSelectedOptionIcon={false} />
+ * ```
+ *
+ * @example Selected option clearable
+ * ```tsx
+ * <SelectPicker ... isClearable />
+ * ```
+ *
+ * @example Selected option clearable
+ * ```tsx
+ * <SelectPicker ... showSelectedOptionsCount />
+ * ```
+ */
+declare const SelectPicker: ({ error, icon, renderMenuListFooter, helperText, placeholder, label, showSelectedOptionIcon, size, disabledTippyContent, showSelectedOptionsCount, menuSize, ...props }: SelectPickerProps) => JSX.Element;
+export default SelectPicker;

package/dist/Shared/Components/SelectPicker/common.d.ts

@@ -0,0 +1,10 @@
+import { DropdownIndicatorProps, ControlProps, OptionProps, ClearIndicatorProps, ValueContainerProps, MenuListProps } from 'react-select';
+import { SelectPickerOptionType, SelectPickerProps } from './type';
+
+export declare const SelectPickerDropdownIndicator: (props: DropdownIndicatorProps<SelectPickerOptionType>) => JSX.Element;
+export declare const SelectPickerClearIndicator: (props: ClearIndicatorProps<SelectPickerOptionType>) => JSX.Element;
+export declare const SelectPickerControl: ({ icon, showSelectedOptionIcon, ...props }: ControlProps<SelectPickerOptionType> & Pick<SelectPickerProps, 'icon' | 'showSelectedOptionIcon'>) => JSX.Element;
+export declare const SelectPickerValueContainer: ({ showSelectedOptionsCount, ...props }: ValueContainerProps<SelectPickerOptionType> & Pick<SelectPickerProps, 'showSelectedOptionsCount'>) => JSX.Element;
+export declare const SelectPickerLoadingIndicator: () => JSX.Element;
+export declare const SelectPickerOption: (props: OptionProps<SelectPickerOptionType>) => JSX.Element;
+export declare const SelectPickerMenuList: ({ renderMenuListFooter, ...props }: MenuListProps<SelectPickerOptionType> & Pick<SelectPickerProps, 'renderMenuListFooter'>) => JSX.Element;

package/dist/Shared/Components/SelectPicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SelectPicker } from './SelectPicker.component';
+export * from './type';

package/dist/Shared/Components/SelectPicker/type.d.ts

@@ -0,0 +1,74 @@
+import { OptionType } from '../../../Common/Types';
+import { ComponentSizeType } from '../../constants';
+import { ReactElement, ReactNode } from 'react';
+import { Props as ReactSelectProps } from 'react-select';
+
+export interface SelectPickerOptionType extends OptionType<number | string, ReactNode> {
+    /**
+     * Description to be displayed for the option
+     */
+    description?: string;
+    /**
+     * Icon at the start of the option
+     */
+    startIcon?: ReactElement;
+    /**
+     * Icon at the end of the option
+     */
+    endIcon?: ReactElement;
+}
+type SelectProps = ReactSelectProps<SelectPickerOptionType>;
+export interface SelectPickerProps extends Pick<SelectProps, 'options' | 'value' | 'onChange' | 'isSearchable' | 'isClearable' | 'isLoading' | 'hideSelectedOptions' | 'controlShouldRenderValue' | 'closeMenuOnSelect' | 'isDisabled' | 'isLoading' | 'required' | 'isOptionDisabled' | 'placeholder'>, Required<Pick<SelectProps, 'classNamePrefix' | 'inputId' | 'name'>> {
+    /**
+     * Icon to be rendered in the control
+     */
+    icon?: ReactElement;
+    /**
+     * Error message for the select
+     */
+    error?: ReactNode;
+    /**
+     * Render function for the footer at the bottom of menu list. It is sticky by default
+     */
+    renderMenuListFooter?: () => ReactNode;
+    /**
+     * Info text for the select, if any
+     */
+    helperText?: ReactNode;
+    /**
+     * Label for the select. if required is added, the corresponding * is also added
+     */
+    label?: ReactNode;
+    /**
+     * If true, the selected option icon is shown in the container.
+     * startIcon has higher priority than endIcon.
+     *
+     * @default 'true'
+     */
+    showSelectedOptionIcon?: boolean;
+    /**
+     * Height of the dropdown
+     *
+     * @default 'ComponentSizeType.medium'
+     */
+    size?: Extract<ComponentSizeType, ComponentSizeType.medium | ComponentSizeType.large>;
+    /**
+     * Content to be shown in a tippy when disabled
+     */
+    disabledTippyContent?: ReactNode;
+    /**
+     * If true, the selected options count is shown in a chip inside ValueContainer
+     *
+     * @default 'false'
+     */
+    showSelectedOptionsCount?: boolean;
+    /**
+     * Width of the menu list
+     *
+     * Note: the overflow needs to be handled explicitly for non-small variants
+     *
+     * @default 'ComponentSizeType.small'
+     */
+    menuSize?: ComponentSizeType;
+}
+export {};

package/dist/Shared/Components/SelectPicker/utils.d.ts

@@ -0,0 +1,4 @@
+import { StylesConfig } from 'react-select';
+import { SelectPickerOptionType, SelectPickerProps } from './type';
+
+export declare const getCommonSelectStyle: ({ error, size, menuSize, }: Pick<SelectPickerProps, 'error' | 'size' | 'menuSize'>) => StylesConfig<SelectPickerOptionType>;

package/dist/Shared/Components/index.d.ts

@@ -31,3 +31,4 @@ export * from './ArtifactInfoModal';
 export * from './MaterialHistory';
 export * from './IframeContainer';
 export * from './KeyValueTable';
+export * from './SelectPicker';

package/dist/Shared/constants.d.ts

@@ -353,3 +353,11 @@ export declare enum K8sResourcePayloadAppType {
     HELM_APP = 1,
     EXTERNAL_ARGO_APP = 2
 }
+/**
+ * Size variants for components
+ */
+export declare enum ComponentSizeType {
+    small = "small",
+    medium = "medium",
+    large = "large"
+}