@carto/ps-react-ui 1.3.1 → 2.0.0

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

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { SxProps, Theme } from '@mui/material';
+import { SectionContainerProps } from './types';
+export declare const styles: {
+    contentBox: {
+        paddingBottom: number;
+        paddingX: number;
+    };
+};
+type StyledSectionContainerBoxProps = {
+    scrollMarginTop: SectionContainerProps['scrollMarginTop'];
+};
+export declare const StyledSectionContainerBox: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: SxProps<Theme> | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<Theme> & StyledSectionContainerBoxProps, {}, {}>;
+type StyledTitleBoxProp = {
+    scrollMarginTop: SectionContainerProps['scrollMarginTop'];
+};
+export declare const StyledTitleBox: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: SxProps<Theme> | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<Theme> & StyledTitleBoxProp, {}, {}>;
+export {};

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

@@ -1,4 +1,5 @@
-import type { BoxProps } from '@material-ui/core';
+/// <reference types="react" />
+import type { BoxProps } from '@mui/material';
 export interface SectionContainerProps {
     title: string;
     id: string;

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

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

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

@@ -22,4 +22,4 @@ import { TabsToAnchorProps } from './types';
  * </TabsToAnchor>
  * ```
  */
-export declare function TabsToAnchor({ children, anchor, TabsProps, variant, onChange, }: TabsToAnchorProps): JSX.Element;
+export declare function TabsToAnchor({ children, anchor, TabsProps, variant, onChange, }: TabsToAnchorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,30 @@
+import { StoryObj } from '@storybook/react';
+import { TabsToAnchor } from './tabs-to-anchor.component';
+declare const meta: {
+    title: string;
+    component: typeof TabsToAnchor;
+    parameters: {
+        layout: string;
+        docs: {
+            page: null;
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        children: {
+            control: {
+                type: null;
+            };
+        };
+    };
+    args: {
+        anchor: string;
+        variant: "fullWidth";
+        children: import("react/jsx-runtime").JSX.Element[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -0,0 +1,23 @@
+import { Theme } from '@mui/material';
+export declare const styles: {
+    tabsWrapper: {
+        backgroundColor: ({ palette }: Theme) => string;
+        left: number;
+        position: "sticky";
+        top: number;
+        width: string;
+        zIndex: number;
+        '& .MuiTab-root:last-of-type': {
+            marginRight: number;
+        };
+        '& .MuiTab-textColorPrimary': {
+            color: ({ palette }: Theme) => string;
+            '&.Mui-selected': {
+                color: ({ palette }: Theme) => string;
+            };
+        };
+        '& .MuiTabs-indicator.colorPrimary': {
+            backgroundColor: ({ palette }: Theme) => string;
+        };
+    };
+};

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

@@ -1,4 +1,5 @@
-import type { TabsProps } from '@material-ui/core';
+/// <reference types="react" />
+import type { TabsProps } from '@mui/material';
 export interface TabsToAnchorProps {
     children: JSX.Element[];
     anchor?: string;

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export * from './components';
-export * from './styling';
+export * from './utils';

package/dist/types/utils/create-select-options-from-array.utils.d.ts

@@ -0,0 +1,5 @@
+export type SelectOptions = {
+    value: string | number;
+    label: string;
+};
+export declare function createSelectOptionsFromArray(data: (number | string)[]): SelectOptions[];

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

@@ -0,0 +1 @@
+export * from './create-select-options-from-array.utils';

package/package.json

@@ -1,69 +1,82 @@
 {
   "name": "@carto/ps-react-ui",
-  "version": "1.3.1",
+  "version": "2.0.0",
   "description": "CARTO's Professional Service React UI library",
   "files": [
     "dist"
   ],
   "type": "module",
   "types": "./dist/types/index.d.ts",
-  "main": "./dist/ps-react-ui.js",
-  "module": "./dist/ps-react-ui.js",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "exports": {
     ".": {
-      "import": "./dist/ps-react-ui.js"
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
   "scripts": {
     "start": "npm run storybook:start",
-    "build": "vite build",
-    "lint": "eslint './**/*.{ts,tsx}' --ignore-path ../../.gitignore",
+    "prebuild": "npm exec rimraf dist",
+    "build": "tsc && vite build",
+    "lint": "eslint './**/*.{ts,tsx}' --ignore-path ../../.gitignore --ignore-pattern '.storybook'",
     "format": "prettier --write . --ignore-path ../../.gitignore",
     "test:watch": "vitest",
     "test:related": "vitest --run --passWithNoTests",
     "test:coverage": "vitest run --coverage",
-    "storybook:start": "start-storybook -p 6006 --no-open",
-    "storybook:build": "build-storybook"
+    "storybook:start": "storybook dev --no-open -p 6006",
+    "storybook:build": "storybook build"
   },
   "typedoc": {
     "entryPoint": "./src/index.ts",
     "readmeFile": "./README.md"
   },
   "dependencies": {
-    "@material-ui/core": "4.x",
-    "@material-ui/icons": "4.x",
-    "@material-ui/lab": "4.0.0-alpha.61",
-    "@material-ui/styles": "4.x",
-    "clsx": "1.x",
-    "echarts": "5.x",
-    "echarts-for-react": "3.x",
-    "react-window": "1.x"
+    "@deck.gl/google-maps": "8.9.17",
+    "@deck.gl/react": "8.9.17",
+    "@emotion/react": "11.11.0",
+    "@mui/icons-material": "5.11.16",
+    "@mui/lab": "5.0.0-alpha.132",
+    "@mui/material": "5.13.3",
+    "@react-google-maps/api": "2.18.1",
+    "echarts": "5.4.2",
+    "echarts-for-react": "3.0.2",
+    "maplibre-gl": "3.0.1",
+    "react-map-gl": "7.0.25",
+    "react-window": "1.8.9"
   },
   "devDependencies": {
-    "@carto/eslint-config-ps-react": "1.0.0",
-    "@carto/react-ui": "1.4.9",
-    "@rollup/pluginutils": "5.0.2",
-    "@storybook/addon-actions": "6.5.15",
-    "@storybook/addon-essentials": "6.5.15",
-    "@storybook/addon-interactions": "6.5.15",
-    "@storybook/addon-links": "6.5.15",
-    "@storybook/builder-vite": "0.3.0",
-    "@storybook/react": "6.5.15",
-    "@storybook/testing-library": "0.0.13",
-    "@types/react-dom": "17.0.15",
-    "@vitejs/plugin-react-swc": "3.0.1",
-    "eslint-plugin-jsx-a11y": "6.7.1"
+    "@carto/eslint-config-ps-react": "1.0.1",
+    "@carto/react-ui": "2.0.5",
+    "@storybook/addon-actions": "7.0.18",
+    "@storybook/addon-essentials": "7.0.18",
+    "@storybook/addon-interactions": "7.0.18",
+    "@storybook/addon-links": "7.0.18",
+    "@storybook/blocks": "7.0.18",
+    "@storybook/builder-vite": "7.0.18",
+    "@storybook/react": "7.0.18",
+    "@storybook/react-vite": "7.0.18",
+    "@storybook/testing-library": "0.1.0",
+    "@types/google.maps": "3.53.2",
+    "@vitejs/plugin-react-swc": "3.3.1",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "storybook": "7.0.18"
   },
   "peerDependencies": {
-    "@material-ui/core": "4.x",
-    "@material-ui/icons": "4.x",
-    "@material-ui/lab": "4.0.0-alpha.61",
-    "@material-ui/styles": "4.x",
-    "clsx": "1.x",
+    "@deck.gl/google-maps": "8.x",
+    "@deck.gl/react": "8.x",
+    "@emotion/react": "11.x",
+    "@mui/icons-material": "5.x",
+    "@mui/lab": "5.x",
+    "@mui/material": "5.x",
+    "@react-google-maps/api": "2.x",
     "echarts": "5.x",
     "echarts-for-react": "3.x",
-    "react": "17.x",
-    "react-dom": "17.x",
+    "maplibre-gl": "3.x",
+    "react": "17.x || 18.x",
+    "react-dom": "17.x || 18.x",
+    "react-map-gl": ">=7.0.25",
     "react-window": "1.x"
   },
   "eslintConfig": {