@carto/ps-react-ui 1.3.0 → 2.0.0

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

@@ -1,23 +1,4 @@
-export { ButtonWarning } from './button-warning/button-warning.component';
-export { IconButtonWarning } from './button-warning/icon-button-warning';
-export * from './button-warning/types';
-export { GroupedChips } from './grouped-chips/grouped-chips.component';
-export * from './grouped-chips/types';
-export { InputFile } from './input-file/input-file.component';
-export * from './input-file/types';
-export { List } from './list/list.component';
-export * from './list/types';
-export { SectionContainer } from './section-container/section-container.component';
-export * from './section-container/types';
-export { SimpleSelect } from './selects/simple-select/simple-select.component';
-export { AutocompleteSelect } from './selects/autocomplete/autocomplete-select/autocomplete-select.component';
-export { AutocompleteSelectSimple } from './selects/autocomplete/autocomplete-select-simple/autocomplete-select-simple.component';
-export { createOptionsFromArray } from './selects/simple-select/create-options-from-array.utils';
-export * from './selects/types';
-export { Table } from './table/table.component';
-export { TableHeader } from './table/components/table-header.component';
-export { TableBody } from './table/components/table-body.component';
-export { TableCell } from './table/components/table-cell.component';
-export * from './table/types';
-export { TabsToAnchor } from './tabs-to-anchor/tabs-to-anchor.component';
-export * from './tabs-to-anchor/types';
+export * from './list-data';
+export * from './section-container';
+export * from './tabs-to-anchor';
+export * from './scroll-to-anchor';

package/dist/types/components/list-data/index.d.ts

@@ -0,0 +1,2 @@
+export * from './list-data.component';
+export * from './types';

package/dist/types/components/{list/list.component.d.ts → list-data/list-data.component.d.ts}

@@ -1,8 +1,9 @@
-import { ListProps } from './types';
+/// <reference types="react" />
+import { ListDataProps } from './types';
 /**
- * List component with two columns and collapse mode.
+ * ListData component with two columns and collapse mode.
  *
- * @param {ListProps} props - Material UI List props
+ * @param {ListDataProps} props -  UI List props
  *
  * @defaultValues
  *
@@ -13,12 +14,12 @@ import { ListProps } from './types';
  * | dense | `false` |
  *
  * @remarks
- * The List component is a wrapper around the Material UI List component. More information about the props can be found here: https://v4.mui.com/api/list/
+ * The ListData component is a wrapper around the  UI List component. More information about the props can be found here: https://v4.mui.com/api/list/
  *
  * @example
  *
  * ```jsx
- *  <List
+ *  <ListData
  *    items={[
  *      { id: '1', label: 'Option 1', value: 1 },
  *      { id: '2', label: 'Option 2', value: 2 },
@@ -33,4 +34,4 @@ import { ListProps } from './types';
  *  />;
  * ```
  */
-export declare function List({ items, label, unit, itemsToShow, texts: { showMore, showLess }, formatter, onRowClick, ListProps, }: ListProps): JSX.Element;
+export declare function ListData({ items, itemsToShow, label, ListProps, texts: { showMore, showLess }, unit, formatter, onRowClick, }: ListDataProps): JSX.Element;

package/dist/types/components/list-data/list-data.stories.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+import { ListData } from './list-data.component';
+import { ListDataItem } from './types';
+declare const meta: {
+    title: string;
+    component: typeof ListData;
+    parameters: {
+        layout: string;
+        docs: {
+            page: null;
+            description: {
+                component: string;
+            };
+        };
+        actions: {
+            argTypesRegex: string;
+        };
+    };
+    argTypes: {
+        onRowClick: {
+            action: string;
+        };
+    };
+    args: {
+        items: ListDataItem[];
+        itemsToShow: number;
+        label: string;
+        ListProps: {
+            dense: false;
+        };
+        unit: string;
+        formatter: typeof numberFormatter;
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+        items: ListDataItem[];
+        itemsToShow?: number | undefined;
+        label?: string | undefined;
+        ListProps?: import("@mui/material").ListProps | undefined;
+        texts?: {
+            showMore?: string | undefined;
+            showLess?: string | undefined;
+        } | undefined;
+        unit?: string | undefined;
+        formatter?: ((value: string | number) => string) | undefined;
+        onRowClick?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>, item: ListDataItem) => void) | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+declare function numberFormatter(value: number | string): string;
+export declare const Default: Story;
+export declare const LessData: Story;

package/dist/types/components/list-data/list-data.styles.d.ts

@@ -0,0 +1,6 @@
+import { Theme } from '@mui/material';
+export declare const styles: {
+    box: {
+        marginLeft: ({ spacing }: Theme) => string;
+    };
+};

package/dist/types/components/{list → list-data}/types.d.ts

@@ -1,20 +1,20 @@
 import type { MouseEvent } from 'react';
-import type { ListProps as MateriaListProps } from '@material-ui/core';
-export interface ListItem {
+import type { ListProps } from '@mui/material';
+export interface ListDataItem {
     id: string | number;
     name: string;
     value: string | number;
 }
-export interface ListProps {
-    items: ListItem[];
-    label?: string;
+export interface ListDataProps {
+    items: ListDataItem[];
     itemsToShow?: number;
+    label?: string;
+    ListProps?: ListProps;
     texts?: {
         showMore?: string;
         showLess?: string;
     };
     unit?: string;
     formatter?: (value: string | number) => string;
-    onRowClick?: (event: MouseEvent<HTMLDivElement>, item: ListItem) => void;
-    ListProps?: MateriaListProps;
+    onRowClick?: (event: MouseEvent<HTMLDivElement>, item: ListDataItem) => void;
 }

package/dist/types/components/map/components/deckgl-map/deckgl-maps.component.d.ts

@@ -0,0 +1,2 @@
+import { DeckGLMapsProps } from '../../types';
+export declare function DeckGLMapsComponent({ basemap, instanceRef, layers, overlayRef, viewState, height, id, style, width, getCursor, getTooltip, onClick, onDrag, onDragEnd, onDragStart, onHover, onResize, onViewStateChange, }: DeckGLMapsProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/map/components/deckgl-map/deckgl-maps.stories.d.ts

@@ -0,0 +1,83 @@
+/// <reference types="google.maps" />
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+import { CartoBasemapsNames } from '../../types';
+import { DeckGLMapsComponent } from './deckgl-maps.component';
+declare const meta: {
+    title: string;
+    component: typeof DeckGLMapsComponent;
+    parameters: {
+        layout: string;
+        docs: {
+            page: null;
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        instanceRef: {
+            control: {
+                disable: boolean;
+            };
+        };
+        overlayRef: {
+            control: {
+                disable: boolean;
+            };
+        };
+        style: {
+            control: {
+                disable: boolean;
+            };
+        };
+        height: {
+            control: string;
+        };
+        basemap: {
+            control: {
+                type: string;
+                default: CartoBasemapsNames;
+                options: CartoBasemapsNames[];
+            };
+        };
+    };
+    args: {
+        layers: never[];
+        basemap: CartoBasemapsNames.DarkMatter;
+        viewState: {
+            latitude: number;
+            longitude: number;
+            zoom: number;
+            minZoom: number;
+            maxZoom: number;
+        };
+        instanceRef: null;
+        overlayRef: null;
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+        getCursor?: (({ isDragging }: {
+            isDragging: boolean;
+        }) => string) | null | undefined;
+        onClick?: ((info: unknown, event: unknown) => void) | null | undefined;
+        onDrag?: ((info: unknown, event: unknown) => void) | null | undefined;
+        onDragEnd?: ((info: unknown, event: unknown) => void) | null | undefined;
+        onDragStart?: ((info: unknown, event: unknown) => void) | null | undefined;
+        onHover?: ((info: unknown, event: unknown) => void) | null | undefined;
+        basemap: import("../../types").Basemap;
+        instanceRef: import("react").MutableRefObject<google.maps.Map | import("react-map-gl").MapRef> | null;
+        layers: unknown[];
+        overlayRef: import("react").MutableRefObject<GoogleMapsOverlay> | null;
+        viewState: import("../../types").ViewState;
+        height?: import("csstype").Property.Height<0 | (string & {})> | undefined;
+        id?: string | undefined;
+        style?: Record<string, string | number> | undefined;
+        width?: import("csstype").Property.Width<0 | (string & {})> | undefined;
+        getTooltip?: ((info: unknown) => unknown) | null | undefined;
+        onResize?: ((props: import("../../types").ResizeProps) => void) | undefined;
+        onViewStateChange?: ((props: import("../../types").ViewStateProps) => void) | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/types/components/map/components/google-maps/google-maps.component.d.ts

@@ -0,0 +1,2 @@
+import { GoogleMapsProps } from '../../types';
+export declare function GoogleMapsComponent(props: GoogleMapsProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/map/components/google-maps/google-maps.stories.d.ts

@@ -0,0 +1,85 @@
+/// <reference types="google.maps" />
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+import { GMapsBasemap } from '../../types';
+import { GoogleMapsComponent } from './google-maps.component';
+declare const meta: {
+    title: string;
+    component: typeof GoogleMapsComponent;
+    parameters: {
+        layout: string;
+        docs: {
+            page: null;
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        instanceRef: {
+            control: {
+                disable: boolean;
+            };
+        };
+        overlayRef: {
+            control: {
+                disable: boolean;
+            };
+        };
+        mapOptions: {
+            control: {
+                disable: boolean;
+            };
+        };
+        style: {
+            control: {
+                disable: boolean;
+            };
+        };
+        height: {
+            control: string;
+        };
+        basemap: {
+            control: {
+                type: string;
+                default: GMapsBasemap;
+                options: GMapsBasemap[];
+            };
+        };
+    };
+    args: {
+        layers: never[];
+        basemap: GMapsBasemap.Satellite;
+        viewState: {
+            latitude: number;
+            longitude: number;
+            zoom: number;
+            minZoom: number;
+            maxZoom: number;
+        };
+        apiKey: string;
+        instanceRef: null;
+        overlayRef: null;
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+        apiKey: string;
+        language?: string | undefined;
+        mapOptions?: Record<string, string | number> | undefined;
+        version?: string | undefined;
+        basemap: import("../../types").Basemap;
+        instanceRef: import("react").MutableRefObject<google.maps.Map | import("react-map-gl").MapRef> | null;
+        layers: unknown[];
+        overlayRef: import("react").MutableRefObject<GoogleMapsOverlay> | null;
+        viewState: import("../../types").ViewState;
+        height?: import("csstype").Property.Height<0 | (string & {})> | undefined;
+        id?: string | undefined;
+        style?: Record<string, string | number> | undefined;
+        width?: import("csstype").Property.Width<0 | (string & {})> | undefined;
+        getTooltip?: ((info: unknown) => unknown) | null | undefined;
+        onResize?: ((props: import("../../types").ResizeProps) => void) | undefined;
+        onViewStateChange?: ((props: import("../../types").ViewStateProps) => void) | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/types/components/map/index.d.ts

@@ -0,0 +1,4 @@
+export * from './map.component';
+export * from './types';
+export * from './components/deckgl-map/deckgl-maps.component';
+export * from './components/google-maps/google-maps.component';

package/dist/types/components/map/map.component.d.ts

@@ -0,0 +1,2 @@
+import { MapsProps } from './types';
+export declare function MapComponent(props: MapsProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/map/map.stories.d.ts

@@ -0,0 +1,92 @@
+/// <reference types="google.maps" />
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+import { MapComponent } from './map.component';
+import { CartoBasemapsNames, GMapsBasemap } from './types';
+declare const meta: {
+    title: string;
+    component: typeof MapComponent;
+    parameters: {
+        layout: string;
+        docs: {
+            page: null;
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        instanceRef: {
+            control: {
+                disable: boolean;
+            };
+        };
+        overlayRef: {
+            control: {
+                disable: boolean;
+            };
+        };
+        basemap: {
+            control: {
+                type: string;
+                options: (CartoBasemapsNames | GMapsBasemap)[];
+            };
+        };
+        mapOptions: {
+            control: {
+                disable: boolean;
+            };
+        };
+        style: {
+            control: {
+                disable: boolean;
+            };
+        };
+        height: {
+            control: string;
+        };
+    };
+    args: {
+        layers: never[];
+        basemap: GMapsBasemap.Satellite;
+        viewState: {
+            latitude: number;
+            longitude: number;
+            zoom: number;
+            minZoom: number;
+            maxZoom: number;
+        };
+        apiKey: string;
+        instanceRef: null;
+        overlayRef: null;
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+        getCursor?: (({ isDragging }: {
+            isDragging: boolean;
+        }) => string) | null | undefined;
+        onClick?: ((info: unknown, event: unknown) => void) | null | undefined;
+        onDrag?: ((info: unknown, event: unknown) => void) | null | undefined;
+        onDragEnd?: ((info: unknown, event: unknown) => void) | null | undefined;
+        onDragStart?: ((info: unknown, event: unknown) => void) | null | undefined;
+        onHover?: ((info: unknown, event: unknown) => void) | null | undefined;
+        basemap: import("./types").Basemap;
+        instanceRef: import("react").MutableRefObject<google.maps.Map | import("react-map-gl").MapRef> | null;
+        layers: unknown[];
+        overlayRef: import("react").MutableRefObject<GoogleMapsOverlay> | null;
+        viewState: import("./types").ViewState;
+        height?: import("csstype").Property.Height<0 | (string & {})> | undefined;
+        id?: string | undefined;
+        style?: Record<string, string | number> | undefined;
+        width?: import("csstype").Property.Width<0 | (string & {})> | undefined;
+        getTooltip?: ((info: unknown) => unknown) | null | undefined;
+        onResize?: ((props: import("./types").ResizeProps) => void) | undefined;
+        onViewStateChange?: ((props: import("./types").ViewStateProps) => void) | undefined;
+        apiKey: string;
+        language?: string | undefined;
+        mapOptions?: Record<string, string | number> | undefined;
+        version?: string | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/types/components/map/types.d.ts

@@ -0,0 +1,67 @@
+/// <reference types="google.maps" />
+import { GoogleMapsOverlay } from '@deck.gl/google-maps';
+import type { Properties } from 'csstype';
+import type { MutableRefObject } from 'react';
+import type { MapRef } from 'react-map-gl';
+export declare enum GMapsBasemap {
+    Roadmap = "roadmap",
+    Satellite = "satellite",
+    Terrain = "terrain"
+}
+export declare enum CartoBasemapsNames {
+    DarkMatter = "dark-matter",
+    Positron = "positron",
+    Voyager = "voyager"
+}
+export declare const CartoBasemapURL: {
+    positron: string;
+    voyager: string;
+    "dark-matter": string;
+};
+export type Basemap = (typeof GMapsBasemap)[keyof typeof GMapsBasemap] | (typeof CartoBasemapsNames)[keyof typeof CartoBasemapsNames];
+export type ViewState = {
+    latitude: number;
+    longitude: number;
+    zoom: number;
+    maxZoom?: number;
+    minZoom?: number;
+} & Record<string, number>;
+export type ResizeProps = {
+    height: number;
+    width: number;
+};
+export type ViewStateProps = {
+    viewState: ViewState;
+};
+export type MapsProps = DeckGLMapsProps & GoogleMapsProps;
+type CommonProps = {
+    basemap: Basemap;
+    instanceRef: MutableRefObject<google.maps.Map | MapRef> | null;
+    layers: unknown[];
+    overlayRef: MutableRefObject<GoogleMapsOverlay> | null;
+    viewState: ViewState;
+    height?: Properties['height'];
+    id?: string;
+    style?: Record<string, number | string>;
+    width?: Properties['width'];
+    getTooltip?: ((info: unknown) => unknown) | null;
+    onResize?: (props: ResizeProps) => void;
+    onViewStateChange?: (props: ViewStateProps) => void;
+};
+export type DeckGLMapsProps = {
+    getCursor?: (({ isDragging }: {
+        isDragging: boolean;
+    }) => string) | null;
+    onClick?: ((info: unknown, event: unknown) => void) | null;
+    onDrag?: ((info: unknown, event: unknown) => void) | null;
+    onDragEnd?: ((info: unknown, event: unknown) => void) | null;
+    onDragStart?: ((info: unknown, event: unknown) => void) | null;
+    onHover?: ((info: unknown, event: unknown) => void) | null;
+} & CommonProps;
+export type GoogleMapsProps = {
+    apiKey: string;
+    language?: string;
+    mapOptions?: Record<string, number | string>;
+    version?: string;
+} & CommonProps;
+export {};

package/dist/types/components/scroll-to-anchor/index.d.ts

@@ -0,0 +1,2 @@
+export * from './scroll-to-anchor.component';
+export * from './types';

package/dist/types/components/scroll-to-anchor/scroll-to-anchor.component.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { ScrollToAnchorProps } from './types';
+/**
+ * The `ScrollToAnchor` component is a wrapper that adds the necessary properties to work with anchor links with the onScroll event.
+ *
+ * @param {ScrollToAnchorProps} props - ScrollToAnchor props
+ *
+ * @defaultValues
+ *
+ * | Prop | Value |
+ * | --- | --- |
+ * | `timeout` | `50` |
+ *
+ * @example
+ *
+ * ```ts
+ * <ScrollToAnchor
+ *  currentAnchor={currentAnchor}
+ *  onChange={handleScrollChange}
+ *  className='my-custom-scroll'
+ *  timeout={50}
+ * >
+ *  <SectionContainer
+ *    title='Section 1'
+ *    id='section-1'
+ *    anchor={true}
+ *    scrollMarginTop={0}
+ *  >
+ *    <Box>Content</Box>
+ *  </SectionContainer>
+ * </ScrollToAnchor>
+ * ```
+ */
+export declare function ScrollToAnchor({ children, currentAnchor, BoxProps, className, timeout, onChange, }: ScrollToAnchorProps): JSX.Element;

package/dist/types/components/scroll-to-anchor/scroll-to-anchor.stories.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { ScrollToAnchor } from './scroll-to-anchor.component';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: typeof ScrollToAnchor;
+    parameters: {
+        layout: string;
+        docs: {
+            page: null;
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        children: {
+            control: {
+                type: null;
+            };
+        };
+    };
+    args: {
+        children: import("react/jsx-runtime").JSX.Element;
+        currentAnchor: string;
+        className: string;
+        timeout: number;
+        onChange: () => void;
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+        children: JSX.Element;
+        currentAnchor: string;
+        BoxProps?: import("@mui/material").BoxProps | undefined;
+        className?: string | undefined;
+        timeout?: number | undefined;
+        onChange: (section: string) => void;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ButtonsTemplate: Story;

package/dist/types/components/scroll-to-anchor/scroll-to-anchor.styles.d.ts

@@ -0,0 +1,13 @@
+import { Theme } from '@mui/material';
+export declare const styles: {
+    box: {
+        borderRadius: ({ spacing }: Theme) => string;
+        flex: number;
+        height: string;
+        margin: string;
+        maxWidth: ({ breakpoints }: Theme) => number;
+        overflow: "auto";
+        position: "relative";
+        width: string;
+    };
+};

package/dist/types/components/scroll-to-anchor/types.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { BoxProps } from '@mui/material';
+export interface ScrollToAnchorProps {
+    children: JSX.Element;
+    currentAnchor: string;
+    BoxProps?: BoxProps;
+    className?: string;
+    timeout?: number;
+    onChange: (section: string) => void;
+}

package/dist/types/components/section-container/index.d.ts

@@ -0,0 +1,2 @@
+export * from './section-container.component';
+export * from './types';

package/dist/types/components/section-container/section-container.component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SectionContainerProps } from './types';
 /**
  * `SectionContainer` component is used to group content in a section with a sticky title with an optional anchor.

package/dist/types/components/section-container/section-container.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./types").SectionContainerProps>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;