[IGNORE] remove some of the core dependencies (#115)

Signed-off-by: Seyed Mahmoud SHAHROKNI <[email protected]>

Author: shahrokni

components/src/ContentWithLegend/ContentWithLegend.tsx

@@ -13,7 +13,7 @@
 
 import { ReactElement } from 'react';
 import { Box, useTheme } from '@mui/material';
-import { getLegendSize } from '@perses-dev/core'; // TODO
+import { getLegendSize } from '../model';
 import { Legend } from '../Legend';
 import { ContentWithLegendProps, getContentWithLegendLayout } from './model/content-with-legend-model';
 

components/src/ContentWithLegend/model/content-with-legend-model.test.ts

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import { createTheme } from '@mui/material';
-import { legendModes, legendSizes } from '@perses-dev/core'; // TODO
+import { legendModes, legendSizes } from '../../model';
 import * as table from '../../Table';
 import {
   ContentWithLegendLayoutOpts,

components/src/ContentWithLegend/model/content-with-legend-model.ts

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import { Theme } from '@mui/material';
-import { LegendPositions, getLegendMode, LegendSize } from '@perses-dev/core'; //TODO
+import { LegendPositions, getLegendMode, LegendSize } from '../../model';
 import { LegendProps } from '../../Legend';
 import { getTableCellLayout } from '../../Table';
 

components/src/Legend/Legend.tsx

@@ -14,7 +14,7 @@
 import { Box } from '@mui/material';
 import { produce } from 'immer';
 import { ReactElement, ReactNode } from 'react';
-import { getLegendMode } from '@perses-dev/core'; // TODO
+import { getLegendMode } from '../model';
 import { ListLegend } from './ListLegend';
 import { CompactLegend } from './CompactLegend';
 import { TableLegend, TableLegendProps } from './TableLegend';

components/src/Legend/legend-model.ts

@@ -12,7 +12,7 @@
 // limitations under the License.
 
 import { MouseEventHandler } from 'react';
-import { LegendOptionsBase } from '@perses-dev/core'; // TODO
+import { LegendOptionsBase } from '../model';
 
 // This file contains legend-related model code specific to the legend component.
 // See the `core` package for common/shared legend model code and the

components/src/model/index.ts

@@ -16,3 +16,4 @@ export * from './theme';
 export * from './timeOption';
 export * from './timeZoneOption';
 export * from './action';
+export * from './legend';

components/src/model/legend.ts

@@ -0,0 +1,72 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+export const legendPositions = ['bottom', 'right'] as const;
+export type LegendPositions = (typeof legendPositions)[number];
+
+export const legendModes = ['list', 'table'] as const;
+export type LegendMode = (typeof legendModes)[number];
+
+export const legendSizes = ['small', 'medium'] as const;
+export type LegendSize = (typeof legendSizes)[number];
+
+// Common legend options used across some UI components and panel specifications
+export interface LegendOptionsBase {
+  position: LegendPositions;
+  mode?: LegendMode;
+  size?: LegendSize;
+}
+
+export function isValidLegendPosition(position: LegendPositions): boolean {
+  return (legendPositions as readonly string[]).includes(position);
+}
+
+export function isValidLegendMode(mode: LegendMode): boolean {
+  return (legendModes as readonly string[]).includes(mode);
+}
+
+export function isValidLegendSize(size: LegendSize): boolean {
+  return (legendSizes as readonly string[]).includes(size);
+}
+
+export const DEFAULT_LEGEND: Required<LegendOptionsBase> = {
+  position: 'bottom',
+  mode: 'list',
+  size: 'medium',
+};
+
+export function getLegendPosition(position?: LegendPositions): 'bottom' | 'right' {
+  if (position === undefined) {
+    return DEFAULT_LEGEND.position;
+  }
+  if (isValidLegendPosition(position)) {
+    return position;
+  }
+  return DEFAULT_LEGEND.position;
+}
+
+export function getLegendMode(mode?: LegendMode): 'list' | 'table' {
+  if (!mode || !isValidLegendMode(mode)) {
+    return DEFAULT_LEGEND.mode;
+  }
+
+  return mode;
+}
+
+export function getLegendSize(size?: LegendSize): 'small' | 'medium' {
+  if (!size || !isValidLegendSize(size)) {
+    return DEFAULT_LEGEND.size;
+  }
+
+  return size;
+}

dashboards/src/components/DashboardShortcuts/useDashboardShortcuts.ts

@@ -13,10 +13,10 @@
 
 import { useCallback } from 'react';
 import { AbsoluteTimeRange, TimeRangeValue, isRelativeTimeRange, toAbsoluteTimeRange } from '@perses-dev/spec';
-import { PanelGroupItemId } from '@perses-dev/core';
 import { useSnackbar } from '@perses-dev/components';
 import { useTimeRange } from '@perses-dev/plugin-system';
 import { useHotkeys, useHotkeySequences } from '@tanstack/react-hotkeys';
+import { PanelGroupItemId } from '../../model';
 import {
   useFocusedPanel,
   buildShortcutOptions,

dashboards/src/components/GridLayout/GridItemContent.tsx

@@ -15,7 +15,7 @@ import { Box, useForkRef } from '@mui/material';
 import { useInView } from 'react-intersection-observer';
 import { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';
 import React, { ReactElement, useMemo, useState } from 'react';
-import { isPanelGroupItemIdEqual, PanelGroupItemId } from '@perses-dev/core'; // TODO
+import { isPanelGroupItemIdEqual, PanelGroupItemId } from '../../model'; // TODO
 import { useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';
 import { usePanelFocusHandlers } from '../../keyboard-shortcuts';
 import { Panel, PanelProps, PanelOptions } from '../Panel';

dashboards/src/components/GridLayout/GridLayout.tsx

@@ -12,12 +12,13 @@
 // limitations under the License.
 import { ReactElement, useState } from 'react';
 import { Layouts, Layout } from 'react-grid-layout';
-import { PanelGroupDefinition } from '@perses-dev/core'; // TODO what should we do about the PanelGroupDefinition ?
+
 import { PanelGroupId } from '@perses-dev/spec';
 import { useVariableValues, VariableContext } from '@perses-dev/plugin-system';
 import { useEditMode, usePanelGroup, usePanelGroupActions, useViewPanelGroup } from '../../context';
 import { GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';
 import { PanelOptions } from '../Panel';
+import { PanelGroupDefinition } from '../../model';
 import { Row, RowProps } from './Row';
 
 export interface GridLayoutProps {