@procore/saved-views 5.0.0

package/README.md

@@ -0,0 +1,90 @@
+# @procore/saved-views
+
+> [!WARNING]
+> It's an initial version of this package (0.0.0) intended to demo the Saved Views capabilities. The design and API integration aren't finished yet, so please don't use it on production.
+> The final design and API integration are going to be delivered with next version (0.0.1) soon.
+
+Saved Views Component for integration with @procore/data-table and @procore/smart-grid-core
+
+**✨ Latest Updates:**
+
+- Upgraded to @tanstack/react-query v5.83.0 (latest) for better performance and modern API and made it a direct dependecy to not force our consumers
+
+## Installation
+
+### In a web application, micro frontend or hydra client
+
+```shell script
+yarn add @procore/saved-views
+```
+
+**NOTE:** Ensure that the following peer dependencies for `@procore/saved-views` are also installed:
+
+- `@procore/core-react`: `>=11.4.0 <13`
+- `@procore/toast-alert`: `>=5.1.0`
+- `react`: `>=16.8`
+- `styled-components`: `^5.3.0`
+
+### In a npm package or library
+
+```
+yarn add -P @procore/saved-views^1.0.0 # adds the package as a peer dependency
+yarn add -D @procore/saved-views # adds as a dev dependency, for tests, storybook, etc.
+```
+
+**NOTE:** Ensure that the following peer dependencies for `@procore/saved-views` are also installed _as peer dependencies_ and as dev dependencies (for tests, storybook, etc.):
+
+- `@procore/core-react`: `^12`
+- `react`: `>=16.8`
+- `styled-components`: `^5.3.0`
+
+## Usage
+
+```js
+import { useSavedViews } from '@procore/saved-views';
+```
+
+```jsx
+const { SavedViews } = useSavedViews(
+  onSelect,
+  onEdit,
+  onDelete,
+  onCreate,
+  onUpdate,
+  AllItemsOptionFlag,
+  savedViewsGroups
+:
+savedGroups,
+  isAdmin
+:
+true,
+  currentFilters,
+  currentColumnState,
+  onTableConfigChange,
+  tableConfig,
+  tableApi,
+  currentRowHeight,
+  stickyViewsKey
+:
+'currentSavedView'
+)
+;
+
+<SavedViews />
+```
+
+## Development
+
+This project uses [`yarn`][yarn], and supports the following commands:
+
+- `build`: builds and bundles the project.
+- `format`: runs [`prettier`][prettier] on the project.
+- `format:check`: validates that the source code conforms to the [`prettier`][prettier] configuration.
+- `lint`: lints the source code.
+- `storybook`: starts up the storybook development server on port 6006.
+- `build-storybook`: generates a static version of the storybook.
+- `test`: runs the unit test suite.
+- `test:dev`: run the unit test suite in watch mode.
+
+[prettier]: https://prettier.io/
+[yarn]: https://classic.yarnpkg.com/

package/dist/legacy/index.d.mts

@@ -0,0 +1,150 @@
+import { Locale, MapLocalesToTranslations } from '@procore/globalization-toolkit';
+import * as React from 'react';
+import React__default from 'react';
+import { DataTableConfig, TableApi, ColumnDefinition } from '@procore/data-table';
+import { ColumnState, Column, FilterModel, GridApi } from 'ag-grid-community';
+import * as styled_components from 'styled-components';
+
+declare function getTranslations(envLocale: Locale): Partial<MapLocalesToTranslations>;
+
+declare const useSavedViewsPanel: (domain: string, tableName: string) => {
+    isOpen: boolean;
+    SavedViewsButton: () => React__default.JSX.Element;
+};
+
+interface IQueryInputProps {
+    domain: string;
+    tableName: string;
+    enableSavedViews: boolean;
+    projectId?: number;
+    companyId?: number;
+}
+
+interface ISmartGridConfig {
+    columnState: ColumnState[];
+    columnGroupState: {
+        groupId: string;
+        open: boolean;
+    }[];
+    rowGroupState: Column[];
+    rowHeight: number | undefined;
+    filterState: FilterModel;
+}
+
+declare const VIEW_LEVELS: readonly ["company", "project", "personal"];
+type ViewLevel = (typeof VIEW_LEVELS)[number];
+
+interface ISavedView {
+    id: string;
+    name: string;
+    description?: string;
+    table_config?: DataTableConfig | ISmartGridConfig;
+    view_level: ViewLevel | 'default';
+}
+
+type TableProvider = 'smart-grid' | 'data-table';
+
+interface IBaseSavedViewsProps {
+    tableName: string;
+    domain: string;
+    stickyViewsKey: string;
+    enableSavedViews: boolean;
+    userId: number;
+    projectId: number;
+    companyId: number;
+}
+
+interface IDataTableSavedViewsExternalConsumerProps extends IBaseSavedViewsProps {
+    tableApi: TableApi;
+    onTableConfigChange: (config: DataTableConfig) => void;
+    defaultViewName?: string;
+    defaultViewConfig?: DataTableConfig;
+    columnDefinitions: ColumnDefinition[];
+}
+
+interface ISmartGridSavedViewsExternalConsumerProps extends IBaseSavedViewsProps {
+    gridApi: GridApi;
+    defaultViewName?: string;
+    defaultViewFilters: FilterModel | null;
+    defaultRowHeight: number;
+}
+
+interface IPermissions {
+    can_create_project_saved_views: boolean;
+    can_create_company_saved_views: boolean;
+}
+
+type SavedViewCollectionMenuItemProps = {
+    item: ISavedView;
+    key?: string;
+    selected: boolean;
+    canUpdate?: boolean;
+    canEditOrDelete?: boolean;
+    onUpdate?: (data: ISavedView) => void;
+    onDelete?: (data: {
+        savedView: ISavedView;
+    }) => void;
+    onEdit?: (data: {
+        savedView: ISavedView;
+    }) => void;
+    isUpdateProcessing?: boolean;
+    permissions?: IPermissions;
+};
+declare const SavedViewCollectionMenuItem: (props: SavedViewCollectionMenuItemProps) => React.JSX.Element;
+
+declare const ExpandedPanel: styled_components.StyledComponent<any, any, any, any>;
+
+declare enum ModalType {
+    CREATE = "create",
+    UPDATE = "update"
+}
+
+type PanelContentProps = {
+    openModal: (type: ModalType) => void;
+    onDelete: () => void;
+    onSelect: (data: {
+        item: ISavedView;
+    }) => void;
+    updateLocalStorage: (data: ISavedView) => void;
+    setSelectedSavedView: (data: ISavedView) => void;
+    queryInput: IQueryInputProps;
+    selectedSavedView: ISavedView | undefined;
+    tableConfig: DataTableConfig | ISmartGridConfig;
+    provider: TableProvider;
+    defaultView: ISavedView;
+    stickyViewsKey: string;
+    userId: number;
+};
+declare const PanelContent: (props: PanelContentProps) => React__default.JSX.Element;
+
+declare const SmartGridSavedViews: (props: ISmartGridSavedViewsExternalConsumerProps) => React__default.JSX.Element;
+
+interface IDataTableSavedViewsRef {
+    setTableConfig: (config: DataTableConfig) => void;
+}
+declare const DataTableSavedViews: React__default.ForwardRefExoticComponent<IDataTableSavedViewsExternalConsumerProps & React__default.RefAttributes<IDataTableSavedViewsRef>>;
+
+type Props = {
+    onDelete(): void;
+    onCancel(): void;
+    open: boolean;
+};
+declare const SavedViewsDeleteConfirmationModalShared: React__default.FC<Props>;
+
+type SavedViewsFormModalProps = {
+    open: boolean;
+    mode: ModalType;
+    isLoading?: boolean;
+    onCancel(): void;
+    queryInput: IQueryInputProps;
+    tableConfig: DataTableConfig | ISmartGridConfig;
+    tableName: string;
+    selectedSavedView: ISavedView | undefined;
+    setSelectedSavedView: (data: ISavedView) => void;
+    onSelect: (item: ISavedView) => void;
+    setOpenEditCreateModal: (open: boolean) => void;
+    defaultView: ISavedView;
+};
+declare const SavedViewsFormModal: React__default.FC<SavedViewsFormModalProps>;
+
+export { DataTableSavedViews, ExpandedPanel, type IDataTableSavedViewsRef, PanelContent, type PanelContentProps, SavedViewCollectionMenuItem, SavedViewsDeleteConfirmationModalShared, SavedViewsFormModal, SmartGridSavedViews, getTranslations, useSavedViewsPanel };

package/dist/legacy/index.d.ts

@@ -0,0 +1,150 @@
+import { Locale, MapLocalesToTranslations } from '@procore/globalization-toolkit';
+import * as React from 'react';
+import React__default from 'react';
+import { DataTableConfig, TableApi, ColumnDefinition } from '@procore/data-table';
+import { ColumnState, Column, FilterModel, GridApi } from 'ag-grid-community';
+import * as styled_components from 'styled-components';
+
+declare function getTranslations(envLocale: Locale): Partial<MapLocalesToTranslations>;
+
+declare const useSavedViewsPanel: (domain: string, tableName: string) => {
+    isOpen: boolean;
+    SavedViewsButton: () => React__default.JSX.Element;
+};
+
+interface IQueryInputProps {
+    domain: string;
+    tableName: string;
+    enableSavedViews: boolean;
+    projectId?: number;
+    companyId?: number;
+}
+
+interface ISmartGridConfig {
+    columnState: ColumnState[];
+    columnGroupState: {
+        groupId: string;
+        open: boolean;
+    }[];
+    rowGroupState: Column[];
+    rowHeight: number | undefined;
+    filterState: FilterModel;
+}
+
+declare const VIEW_LEVELS: readonly ["company", "project", "personal"];
+type ViewLevel = (typeof VIEW_LEVELS)[number];
+
+interface ISavedView {
+    id: string;
+    name: string;
+    description?: string;
+    table_config?: DataTableConfig | ISmartGridConfig;
+    view_level: ViewLevel | 'default';
+}
+
+type TableProvider = 'smart-grid' | 'data-table';
+
+interface IBaseSavedViewsProps {
+    tableName: string;
+    domain: string;
+    stickyViewsKey: string;
+    enableSavedViews: boolean;
+    userId: number;
+    projectId: number;
+    companyId: number;
+}
+
+interface IDataTableSavedViewsExternalConsumerProps extends IBaseSavedViewsProps {
+    tableApi: TableApi;
+    onTableConfigChange: (config: DataTableConfig) => void;
+    defaultViewName?: string;
+    defaultViewConfig?: DataTableConfig;
+    columnDefinitions: ColumnDefinition[];
+}
+
+interface ISmartGridSavedViewsExternalConsumerProps extends IBaseSavedViewsProps {
+    gridApi: GridApi;
+    defaultViewName?: string;
+    defaultViewFilters: FilterModel | null;
+    defaultRowHeight: number;
+}
+
+interface IPermissions {
+    can_create_project_saved_views: boolean;
+    can_create_company_saved_views: boolean;
+}
+
+type SavedViewCollectionMenuItemProps = {
+    item: ISavedView;
+    key?: string;
+    selected: boolean;
+    canUpdate?: boolean;
+    canEditOrDelete?: boolean;
+    onUpdate?: (data: ISavedView) => void;
+    onDelete?: (data: {
+        savedView: ISavedView;
+    }) => void;
+    onEdit?: (data: {
+        savedView: ISavedView;
+    }) => void;
+    isUpdateProcessing?: boolean;
+    permissions?: IPermissions;
+};
+declare const SavedViewCollectionMenuItem: (props: SavedViewCollectionMenuItemProps) => React.JSX.Element;
+
+declare const ExpandedPanel: styled_components.StyledComponent<any, any, any, any>;
+
+declare enum ModalType {
+    CREATE = "create",
+    UPDATE = "update"
+}
+
+type PanelContentProps = {
+    openModal: (type: ModalType) => void;
+    onDelete: () => void;
+    onSelect: (data: {
+        item: ISavedView;
+    }) => void;
+    updateLocalStorage: (data: ISavedView) => void;
+    setSelectedSavedView: (data: ISavedView) => void;
+    queryInput: IQueryInputProps;
+    selectedSavedView: ISavedView | undefined;
+    tableConfig: DataTableConfig | ISmartGridConfig;
+    provider: TableProvider;
+    defaultView: ISavedView;
+    stickyViewsKey: string;
+    userId: number;
+};
+declare const PanelContent: (props: PanelContentProps) => React__default.JSX.Element;
+
+declare const SmartGridSavedViews: (props: ISmartGridSavedViewsExternalConsumerProps) => React__default.JSX.Element;
+
+interface IDataTableSavedViewsRef {
+    setTableConfig: (config: DataTableConfig) => void;
+}
+declare const DataTableSavedViews: React__default.ForwardRefExoticComponent<IDataTableSavedViewsExternalConsumerProps & React__default.RefAttributes<IDataTableSavedViewsRef>>;
+
+type Props = {
+    onDelete(): void;
+    onCancel(): void;
+    open: boolean;
+};
+declare const SavedViewsDeleteConfirmationModalShared: React__default.FC<Props>;
+
+type SavedViewsFormModalProps = {
+    open: boolean;
+    mode: ModalType;
+    isLoading?: boolean;
+    onCancel(): void;
+    queryInput: IQueryInputProps;
+    tableConfig: DataTableConfig | ISmartGridConfig;
+    tableName: string;
+    selectedSavedView: ISavedView | undefined;
+    setSelectedSavedView: (data: ISavedView) => void;
+    onSelect: (item: ISavedView) => void;
+    setOpenEditCreateModal: (open: boolean) => void;
+    defaultView: ISavedView;
+};
+declare const SavedViewsFormModal: React__default.FC<SavedViewsFormModalProps>;
+
+export { DataTableSavedViews, ExpandedPanel, type IDataTableSavedViewsRef, PanelContent, type PanelContentProps, SavedViewCollectionMenuItem, SavedViewsDeleteConfirmationModalShared, SavedViewsFormModal, SmartGridSavedViews, getTranslations, useSavedViewsPanel };