Move legend to utils folder

packages/visualizations-react/stories/Legend/CategoryLegend.stories.tsx → packages/visualizations-react/stories/UtilsComponents/Legend/CategoryLegend.stories.tsx

@@ -1,18 +1,32 @@
-import { ComponentMeta } from '@storybook/react';
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import type { CategoryLegendType } from '@opendatasoft/visualizations';
 import { CATEGORY_ITEM_VARIANT } from '@opendatasoft/visualizations';
-import { CategoryLegend } from '../../src';
-import { SimpleProps } from '../../src/components/Props';
-import CategoryLegendTemplate from './CategoryLegendTemplate';
+import { CategoryLegend } from '../../../src';
+import { SimpleProps } from '../../../src/components/Props';
 
 const meta: ComponentMeta<typeof CategoryLegend> = {
-    title: 'Legend',
+    title: 'Utils/Legend',
     component: CategoryLegend,
 };
 
 export default meta;
 
-export const CategoryCircleLegend = CategoryLegendTemplate.bind({});
+const Template: ComponentStory<typeof CategoryLegend> = (
+    args: SimpleProps<CategoryLegendType>
+) => (
+    <div
+        style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }}
+    >
+        <CategoryLegend {...args} style={{ width: '60vw' }} />
+    </div>
+);
+
+export const CategoryCircleLegend = Template.bind({});
 const CategoryCircleLegendArgs: SimpleProps<CategoryLegendType> = {
     legendOptions: {
         type: 'category' as const,

packages/visualizations/src/components/Chart/Chart.svelte

@@ -8,8 +8,8 @@
     import { generateId } from '../utils';
     import SourceLink from '../utils/SourceLink.svelte';
     import { defaultNumberFormat } from '../utils/formatter';
-    import CategoryLegend from '../Legend/CategoryLegend.svelte';
-    import type { LegendPositions, CategoryLegendType } from '../Legend/types';
+    import CategoryLegend from '../utils/Legend/CategoryLegend.svelte';
+    import type { LegendPositions, CategoryLegendType } from '../utils/Legend/types';
     import { ChartSeriesType } from './types';
     import type { ChartOptions, ChartSeries } from './types';
     import { defaultValue } from './utils';

packages/visualizations/src/components/Chart/legend.ts

@@ -3,7 +3,7 @@ import type { _DeepPartialObject } from 'chart.js/types/utils';
 import type { ChartOptions } from './types';
 import { assureMaxLength } from '../utils/formatter';
 import { defaultValue, DEFAULT_GREY_COLOR } from './utils';
-import { CATEGORY_ITEM_VARIANT } from '../Legend/types';
+import { CATEGORY_ITEM_VARIANT } from '../utils/Legend/types';
 
 const LEGEND_MAX_LENGTH = 50;
 

packages/visualizations/src/components/Chart/types.ts

@@ -1,5 +1,5 @@
 import type { Color, Source } from '../types';
-import type { LegendConfiguration } from '../Legend/types';
+import type { LegendConfiguration } from '../utils/Legend/types';
 
 export interface ChartOptions {
     /** Specify label column in DataFrame */

packages/visualizations/src/components/Map/WebGl/MapRender.svelte

@@ -17,11 +17,11 @@
     import type { BBox } from 'geojson';
     import SourceLink from '../../utils/SourceLink.svelte';
     import { computeMaxZoomFromGeoJsonFeatures, getFixedTooltips } from '../utils';
-    import ColorsLegend from '../../Legend/ColorsLegend.svelte';
+    import ColorsLegend from '../../utils/Legend/ColorsLegend.svelte';
     import BackButton from '../../utils/BackButton.svelte';
     import MiniMap from '../../utils/MiniMap.svelte';
     import type { ColorScale, DataBounds, Source } from '../../types';
-    import type { LegendVariant } from '../../Legend/types';
+    import type { LegendVariant } from '../../utils/Legend/types';
     import type {
         ChoroplethFixedTooltipDescription,
         MapLayer,

packages/visualizations/src/components/Map/types.ts

@@ -1,7 +1,7 @@
 import type { Feature, FeatureCollection, Position, BBox } from 'geojson';
 import type { FillLayerSpecification, Popup } from 'maplibre-gl';
 import type { DebouncedFunc } from 'lodash';
-import type { LegendPositions } from '../Legend/types';
+import type { LegendPositions } from '../utils/Legend/types';
 import type { ColorScale, Color, Source } from '../types';
 
 export interface ChoroplethOptions {

packages/visualizations/src/components/MapPoi/MapRender.svelte

@@ -4,8 +4,8 @@
     import type { BBox } from 'geojson';
     import type { LngLatBoundsLike, LngLatLike, MapOptions, StyleSpecification } from 'maplibre-gl';
     import { onDestroy, onMount } from 'svelte';
-    import CategoryLegend from '../Legend/CategoryLegend.svelte';
-    import type { CategoryLegendType } from '../Legend/types';
+    import CategoryLegend from '../utils/Legend/CategoryLegend.svelte';
+    import type { CategoryLegendType } from '../utils/Legend/types';
     import SourceLink from '../utils/SourceLink.svelte';
     import type { Source } from '../types';
 

packages/visualizations/src/components/MapPoi/types.ts

@@ -7,7 +7,7 @@ import type {
 import type { BBox, GeoJsonProperties } from 'geojson';
 
 import type { Color, Source } from '../types';
-import type { CategoryLegendType } from '../Legend/types';
+import type { CategoryLegendType } from '../utils/Legend/types';
 
 // To render data layers on the map
 export type PoiMapData = Partial<{

packages/visualizations/src/components/Legend/ColorsLegend.svelte → packages/visualizations/src/components/utils/Legend/ColorsLegend.svelte

@@ -3,9 +3,9 @@
 <script lang="ts">
     import { onDestroy } from 'svelte';
     import { debounce } from 'lodash';
-    import type { DataBounds, ColorScale } from '../types';
+    import type { DataBounds, ColorScale } from '../../types';
     import type { LegendVariant, LegendPositions } from './types';
-    import { defaultCompactLegendNumberFormat } from '../utils/formatter';
+    import { defaultCompactLegendNumberFormat } from '../formatter';
 
     // options to customize the component
     export let dataBounds: DataBounds;

packages/visualizations/src/components/Legend/types.ts → packages/visualizations/src/components/utils/Legend/types.ts

@@ -1,4 +1,4 @@
-import type { Color } from '../types';
+import type { Color } from '../../types';
 
 export const LEGEND_POSITIONS = {
     bottom: 'bottom',

packages/visualizations/src/components/SvelteSimpleImpl.ts → packages/visualizations/src/components/utils/SvelteUtilsImpl.ts

@@ -1,5 +1,5 @@
 import type { SvelteComponent } from 'svelte';
-import { SimpleComponent } from '../types';
+import { SimpleComponent } from '../../types';
 
 export default abstract class SvelteImpl<Options> extends SimpleComponent<Options> {
     protected abstract getSvelteSimpleComponentClass(): typeof SvelteComponent;
@@ -26,4 +26,4 @@ export default abstract class SvelteImpl<Options> extends SimpleComponent<Option
         this.svelteComponent?.$destroy();
         this.svelteComponent = undefined;
     }
-}
+}

packages/visualizations/src/components/utils/index.ts

@@ -1,5 +1,12 @@
-/* eslint-disable import/prefer-default-export */
+import CategoryLegendImpl from './Legend/CategoryLegend.svelte';
+import SvelteUtilsImpl from './SvelteUtilsImpl';
+import type { CategoryLegendType } from './Legend/types';
 
+export class CategoryLegend extends SvelteUtilsImpl<CategoryLegendType> {
+    protected getSvelteSimpleComponentClass(): typeof CategoryLegendImpl {
+        return CategoryLegendImpl;
+    }
+}
 /**
  * Check (in the compiler) that a switch block is exhaustive.
  * Documentation: https://www.typescriptlang.org/docs/handbook/2/narrowing.html#exhaustiveness-checking

packages/visualizations/src/index.ts

@@ -4,7 +4,7 @@ export { default as KpiCard } from './components/KpiCard';
 export { ChoroplethGeoJson, ChoroplethVectorTiles } from './components/Map/WebGl';
 export { default as ChoroplethSvg } from './components/Map/Svg';
 export { default as PoiMap } from './components/MapPoi';
-export { default as CategoryLegend } from './components/Legend';
+export { CategoryLegend } from './components/utils';
 
 export * from './types';
 export * from './components/types';
@@ -13,4 +13,4 @@ export * from './components/KpiCard/types';
 export * from './components/Map/types';
 export * from './components/MarkdownText/types';
 export * from './components/MapPoi/types';
-export * from './components/Legend/types';
+export * from './components/utils/Legend/types';