Merge pull request #118 from Kartore/feat/expressions-filter

Expressions系UI実装

Author: NEKOYASAN

src/App.tsx

@@ -10,16 +10,16 @@ import { NavigationPanel } from '~/components/editor/NavigationPanel/NavigationP
 import type { onChangeType } from '~/components/editor/PropertiesPanel/LayerPropertiesPanel/utils/LayerUtil/LayerUtil.ts';
 import { replaceLayerData } from '~/components/editor/PropertiesPanel/LayerPropertiesPanel/utils/LayerUtil/LayerUtil.ts';
 import { PropertiesPanel } from '~/components/editor/PropertiesPanel/PropertiesPanel.tsx';
-import { osmLiberty } from '~/samples/osm-liberty.ts';
+import { osmLibertyMigrated } from '~/samples/osm-liberty.ts';
 
 function App() {
   const [mapStyle, setMapStyle] = useLocalStorage<StyleSpecification>(
     'kartore:style',
-    osmLiberty,
+    osmLibertyMigrated,
     {}
   );
 
-  const [selectedLayerId, setSelectedLayerId] = useState<string>(mapStyle.layers[0].id);
+  const [selectedLayerId, setSelectedLayerId] = useState<string>(mapStyle.layers[4].id);
   const selectedLayer =
     mapStyle.layers.find((layer) => layer.id === selectedLayerId) ?? mapStyle.layers[0];
   const handleChangeLayerOrder = (layer: LayerSpecification[]) => {

src/components/common/BoxRadioGroup/BoxRadioGroup.test.tsx

@@ -1,6 +1,6 @@
-import { describe } from 'vitest';
-import { render } from '@testing-library/react';
 import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { describe } from 'vitest';
 
 import * as Stories from './BoxRadioGroup.stories';
 

src/components/common/ColorField/ColorPicker/EyeDropperButton/EyeDropperButton.stories.tsx

@@ -1,5 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { EyeDropperButton } from '.';
-import { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
   component: EyeDropperButton,

src/components/common/ColorField/ColorPicker/EyeDropperButton/EyeDropperButton.test.tsx

@@ -1,6 +1,6 @@
-import { describe } from 'vitest';
-import { render } from '@testing-library/react';
 import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { describe } from 'vitest';
 
 import * as Stories from './EyeDropperButton.stories';
 

src/components/common/ComboBox/ComboBox.stories.tsx

@@ -1,5 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { ComboBox } from '.';
-import { Meta, StoryObj } from '@storybook/react';
 
 const meta = {
   component: ComboBox,

src/components/common/ComboBox/ComboBox.test.tsx

@@ -1,6 +1,6 @@
-import { describe } from 'vitest';
-import { render } from '@testing-library/react';
 import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { describe } from 'vitest';
 
 import * as Stories from './ComboBox.stories';
 

src/components/common/FilterInputField/FilterInputField.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { FilterInputField } from '.';
+
+const meta = {
+  component: FilterInputField,
+} satisfies Meta<typeof FilterInputField>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

src/components/common/FilterInputField/FilterInputField.test.tsx

@@ -0,0 +1,16 @@
+import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { describe } from 'vitest';
+
+import * as Stories from './FilterInputField.stories';
+
+const { Default } = composeStories(Stories);
+
+describe('Component: FilterInputField', () => {
+  describe('Snapshot', () => {
+    it('Default', () => {
+      const { asFragment } = render(<Default />);
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+});

src/components/common/FilterInputField/FilterInputField.tsx

@@ -0,0 +1,32 @@
+import type { ComponentProps, FC } from 'react';
+
+import type { ExpressionFilterSpecification } from '@maplibre/maplibre-gl-style-spec';
+
+import { ExpressionInputField } from '~/components/common/FilterInputField/expressions';
+
+export type FilterInputFieldProps = {
+  value?: ExpressionFilterSpecification;
+  onChange?: (value: ExpressionFilterSpecification) => void;
+} & Omit<ComponentProps<'div'>, 'onChange'>;
+
+export const FilterInputField: FC<FilterInputFieldProps> = ({
+  className,
+  children,
+  value,
+  onChange,
+  ...props
+}) => {
+  if (!value) {
+    return null;
+  }
+  if (value === true) {
+    return null;
+  }
+  return (
+    <ExpressionInputField className={'text-sm'} value={value} onChange={onChange} {...props}>
+      {children}
+    </ExpressionInputField>
+  );
+};
+
+FilterInputField.displayName = 'FilterInputField';