flipper-ui 0.36.5 → 0.37.0

package/core/data-display/view-mode/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { Dispatch, ReactNode, SetStateAction } from 'react';
+export interface Filter {
+    label: ReactNode;
+    active: boolean;
+    onClick: () => void;
+}
+export interface IProps {
+    filters?: Filter[];
+    activeMode?: boolean;
+    setActiveMode?: Dispatch<SetStateAction<boolean>>;
+}
+declare const ViewMode: (props: IProps) => React.JSX.Element;
+export default ViewMode;

package/core/data-display/view-mode/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _button = _interopRequireDefault(require("../../inputs/button"));
+var _mui = require("../../../icons/mui");
+var _styles = require("./styles");
+var ViewMode = function ViewMode(props) {
+  var filters = props.filters,
+    _props$activeMode = props.activeMode,
+    activeMode = _props$activeMode === void 0 ? false : _props$activeMode,
+    setActiveMode = props.setActiveMode;
+  var defaultFilters = [{
+    label: /*#__PURE__*/_react["default"].createElement(_mui.IconTableView, {
+      fontSize: "small"
+    }),
+    active: activeMode,
+    onClick: function onClick() {
+      return setActiveMode === null || setActiveMode === void 0 ? void 0 : setActiveMode(function (prev) {
+        return !prev;
+      });
+    }
+  }, {
+    label: /*#__PURE__*/_react["default"].createElement(_mui.IconGridView, {
+      fontSize: "small"
+    }),
+    active: !activeMode,
+    onClick: function onClick() {
+      return setActiveMode === null || setActiveMode === void 0 ? void 0 : setActiveMode(function (prev) {
+        return !prev;
+      });
+    }
+  }];
+  var currentFilters = filters || defaultFilters;
+  return /*#__PURE__*/_react["default"].createElement(_styles.ButtonFilterGroup, {
+    size: "small"
+  }, currentFilters.map(function (filter, i) {
+    return /*#__PURE__*/_react["default"].createElement(_button["default"], {
+      key: i,
+      color: "primary",
+      variant: filter.active ? 'contained' : 'outlined',
+      onClick: filter.onClick
+    }, filter.label);
+  }));
+};
+var _default = exports["default"] = ViewMode;

package/core/data-display/view-mode/styles.d.ts

@@ -0,0 +1,13 @@
+export declare const ButtonFilterGroup: import("@emotion/styled").StyledComponent<import("@mui/material/ButtonGroup").ButtonGroupOwnProps & 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;
+}, "color" | "disabled" | "size" | "children" | "style" | "className" | "classes" | "disableRipple" | "sx" | "disableFocusRipple" | "orientation" | "variant" | "disableElevation" | "fullWidth"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const WrapperEnd: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Cards: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/core/data-display/view-mode/styles.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WrapperEnd = exports.Cards = exports.ButtonFilterGroup = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _ButtonGroup = _interopRequireDefault(require("@mui/material/ButtonGroup"));
+var _templateObject, _templateObject2, _templateObject3;
+var ButtonFilterGroup = exports.ButtonFilterGroup = (0, _styled["default"])(_ButtonGroup["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        display: flex;\n        gap: 2px;\n    }\n"])));
+var WrapperEnd = exports.WrapperEnd = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    justify-content: end;\n    margin: 0 0 24px 0;\n"])));
+var Cards = exports.Cards = _styled["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: grid;\n    gap: 16px;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n"])));

package/core/data-display/view-mode/useViewMode.d.ts

@@ -0,0 +1 @@
+export declare const useViewMode: (subKey: string) => readonly [boolean, () => void];

package/core/data-display/view-mode/useViewMode.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useViewMode = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var useViewMode = exports.useViewMode = function useViewMode(subKey) {
+  var STORAGE_KEY = 'view-mode';
+  var _useState = (0, _react.useState)(function () {
+      var sessionData = sessionStorage.getItem(STORAGE_KEY);
+      if (sessionData) {
+        var parsed = JSON.parse(sessionData);
+        if (parsed[subKey] !== undefined) return parsed[subKey];
+      }
+      var localData = localStorage.getItem(STORAGE_KEY);
+      if (localData) {
+        var _parsed = JSON.parse(localData);
+        if (_parsed[subKey] !== undefined) return _parsed[subKey];
+      }
+      return false;
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    activeMode = _useState2[0],
+    setActiveMode = _useState2[1];
+  var toggleActiveMode = function toggleActiveMode() {
+    setActiveMode(function (prev) {
+      var newValue = !prev;
+      var sessionData = sessionStorage.getItem(STORAGE_KEY);
+      var sessionObj = sessionData ? JSON.parse(sessionData) : {};
+      sessionObj[subKey] = newValue;
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(sessionObj));
+      var localData = localStorage.getItem(STORAGE_KEY);
+      var localObj = localData ? JSON.parse(localData) : {};
+      localObj[subKey] = newValue;
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(localObj));
+      return newValue;
+    });
+  };
+  return [activeMode, toggleActiveMode];
+};

package/core/data-display/view-mode/view-mode.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/core/data-display/view-mode/view-mode.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ViewMode from '.';
+declare const meta: Meta<typeof ViewMode>;
+export default meta;
+type Story = StoryObj<typeof ViewMode>;
+export declare const viewMode: Story;
+export declare const viewModeCustom: Story;

package/icons/mui/index.d.ts

@@ -63,6 +63,7 @@ export { default as IconFormatColorText } from '@mui/icons-material/FormatColorT
 export { default as IconFormatListBulleted } from '@mui/icons-material/FormatListBulleted';
 export { default as IconForumOutlined } from '@mui/icons-material/ForumOutlined';
 export { default as IconFullscreenRounded } from '@mui/icons-material/FullscreenRounded';
+export { default as IconGridView } from '@mui/icons-material/GridViewRounded';
 export { default as IconHeadset } from '@mui/icons-material/Headset';
 export { default as IconHelp } from '@mui/icons-material/Help';
 export { default as IconHelpOutline } from '@mui/icons-material/HelpOutline';
@@ -131,6 +132,7 @@ export { default as IconStar } from '@mui/icons-material/Star';
 export { default as IconStarBorder } from '@mui/icons-material/StarBorder';
 export { default as IconSync } from '@mui/icons-material/Sync';
 export { default as IconSyncProblem } from '@mui/icons-material/SyncProblem';
+export { default as IconTableView } from '@mui/icons-material/TableRows';
 export { default as IconTextFields } from '@mui/icons-material/TextFields';
 export { default as IconTimeline } from '@mui/icons-material/Timeline';
 export { default as IconToday } from '@mui/icons-material/Today';

package/icons/mui/index.js

@@ -394,6 +394,12 @@ Object.defineProperty(exports, "IconFullscreenRounded", {
     return _FullscreenRounded["default"];
   }
 });
+Object.defineProperty(exports, "IconGridView", {
+  enumerable: true,
+  get: function get() {
+    return _GridViewRounded["default"];
+  }
+});
 Object.defineProperty(exports, "IconHeadset", {
   enumerable: true,
   get: function get() {
@@ -796,6 +802,12 @@ Object.defineProperty(exports, "IconSyncProblem", {
     return _SyncProblem["default"];
   }
 });
+Object.defineProperty(exports, "IconTableView", {
+  enumerable: true,
+  get: function get() {
+    return _TableRows["default"];
+  }
+});
 Object.defineProperty(exports, "IconTextFields", {
   enumerable: true,
   get: function get() {
@@ -927,6 +939,7 @@ var _FormatColorText = _interopRequireDefault(require("@mui/icons-material/Forma
 var _FormatListBulleted = _interopRequireDefault(require("@mui/icons-material/FormatListBulleted"));
 var _ForumOutlined = _interopRequireDefault(require("@mui/icons-material/ForumOutlined"));
 var _FullscreenRounded = _interopRequireDefault(require("@mui/icons-material/FullscreenRounded"));
+var _GridViewRounded = _interopRequireDefault(require("@mui/icons-material/GridViewRounded"));
 var _Headset = _interopRequireDefault(require("@mui/icons-material/Headset"));
 var _Help = _interopRequireDefault(require("@mui/icons-material/Help"));
 var _HelpOutline = _interopRequireDefault(require("@mui/icons-material/HelpOutline"));
@@ -995,6 +1008,7 @@ var _Star = _interopRequireDefault(require("@mui/icons-material/Star"));
 var _StarBorder = _interopRequireDefault(require("@mui/icons-material/StarBorder"));
 var _Sync = _interopRequireDefault(require("@mui/icons-material/Sync"));
 var _SyncProblem = _interopRequireDefault(require("@mui/icons-material/SyncProblem"));
+var _TableRows = _interopRequireDefault(require("@mui/icons-material/TableRows"));
 var _TextFields = _interopRequireDefault(require("@mui/icons-material/TextFields"));
 var _Timeline = _interopRequireDefault(require("@mui/icons-material/Timeline"));
 var _Today = _interopRequireDefault(require("@mui/icons-material/Today"));

package/index.d.ts

@@ -23,6 +23,8 @@ export { default as TableRow } from './core/data-display/table/table-row';
 export { default as TableFooter } from './core/data-display/table/table-footer';
 export { default as TablePagination } from './core/data-display/table/table-pagination';
 export { default as Typography } from './core/data-display/typography';
+export { default as ViewMode } from './core/data-display/view-mode';
+export { useViewMode } from './core/data-display/view-mode/useViewMode';
 export { default as Collapse } from './core/feedback/collapse';
 export { default as Dialog } from './core/feedback/dialog';
 export { default as Fade } from './core/feedback/fade';

package/index.js

@@ -27,6 +27,8 @@ var _exportNames = {
   TableFooter: true,
   TablePagination: true,
   Typography: true,
+  ViewMode: true,
+  useViewMode: true,
   Collapse: true,
   Dialog: true,
   Fade: true,
@@ -440,6 +442,18 @@ Object.defineProperty(exports, "ValidationDialog", {
     return _validationDialog["default"];
   }
 });
+Object.defineProperty(exports, "ViewMode", {
+  enumerable: true,
+  get: function get() {
+    return _viewMode["default"];
+  }
+});
+Object.defineProperty(exports, "useViewMode", {
+  enumerable: true,
+  get: function get() {
+    return _useViewMode.useViewMode;
+  }
+});
 var _dataTable = require("./core/data-display/data-table");
 Object.keys(_dataTable).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -498,6 +512,8 @@ var _tableRow = _interopRequireDefault(require("./core/data-display/table/table-
 var _tableFooter = _interopRequireDefault(require("./core/data-display/table/table-footer"));
 var _tablePagination = _interopRequireDefault(require("./core/data-display/table/table-pagination"));
 var _typography = _interopRequireDefault(require("./core/data-display/typography"));
+var _viewMode = _interopRequireDefault(require("./core/data-display/view-mode"));
+var _useViewMode = require("./core/data-display/view-mode/useViewMode");
 var _collapse = _interopRequireDefault(require("./core/feedback/collapse"));
 var _dialog = _interopRequireDefault(require("./core/feedback/dialog"));
 var _fade = _interopRequireDefault(require("./core/feedback/fade"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.36.5",
+    "version": "0.37.0",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",
@@ -53,8 +53,8 @@
         "@storybook/react": "8.6.12",
         "@storybook/react-webpack5": "8.6.12",
         "@stylistic/eslint-plugin": "5.2.2",
-        "@testing-library/dom": "10.4.0",
-        "@testing-library/jest-dom": "6.6.3",
+        "@testing-library/dom": "10.4.1",
+        "@testing-library/jest-dom": "6.6.4",
         "@testing-library/react": "16.3.0",
         "@testing-library/user-event": "14.6.1",
         "@types/jest": "30.0.0",
@@ -67,7 +67,7 @@
         "babel-plugin-import": "1.13.8",
         "babel-plugin-module-resolver": "5.0.2",
         "date-fns": "4.1.0",
-        "eslint": "9.31.0",
+        "eslint": "9.32.0",
         "eslint-config-prettier": "10.1.8",
         "eslint-import-resolver-typescript": "4.4.4",
         "eslint-plugin-import": "2.32.0",
@@ -88,7 +88,7 @@
         "typescript": "5.8.3",
         "typescript-eslint": "8.38.0",
         "uuid": "11.1.0",
-        "webpack": "5.100.2"
+        "webpack": "5.101.0"
     },
     "peerDependencies": {
         "date-fns": "^4.0.0",