feat: add initial value property

feat: add initial value property

Author: armand1m

.gitignore

@@ -5,3 +5,4 @@ node_modules
 dist
 coverage
 *.tgz
+storybook-static

.storybook/main.js

@@ -6,6 +6,7 @@ module.exports = {
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   typescript: {
     check: true,
+    reactDocgen: 'react-docgen'
   },
   reactOptions: {
     fastRefresh: true,
@@ -23,4 +24,4 @@ module.exports = {
       },
     }
   },
-};
+};

.storybook/preview.js

@@ -6,10 +6,18 @@ addParameters({
   actions: {
     argTypesRegex: '^on.*'
   },
-})
+  docs: {
+    extractComponentDescription: (component, { notes }) => {
+      if (notes) {
+        return typeof notes === 'string' ? notes : notes.markdown || notes.text;
+      }
+      return null;
+    },
+  },
+});
 
 addDecorator((Story) => (
   <ChakraProvider resetCSS>
     <Story />
   </ChakraProvider>
-));
+));

package.json

@@ -64,11 +64,10 @@
     "@emotion/react": "^11.1.4",
     "@emotion/styled": "^11.0.0",
     "@size-limit/preset-small-lib": "^4.9.1",
-    "@storybook/addon-essentials": "^6.1.11",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.1.11",
-    "@storybook/addons": "^6.1.11",
-    "@storybook/react": "^6.1.11",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-links": "^6.2.9",
+    "@storybook/addons": "^6.2.9",
+    "@storybook/react": "^6.2.9",
     "@testing-library/react-hooks": "^7.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
@@ -85,7 +84,7 @@
     "size-limit": "^4.9.1",
     "tsdx": "^0.14.1",
     "tslib": "^2.0.3",
-    "typescript": "^4.3.2"
+    "typescript": "^4.3.4"
   },
   "dependencies": {
     "uuid": "^8.3.2"

src/components/chakra-ui/FilterSelection.stories.tsx

@@ -2,6 +2,9 @@ import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { PropertyDescription } from '../../';
 import { FilterSelection } from './FilterSelection';
+import { Filter } from '../../types';
+import { OperationType } from '../../operations';
+import { Binding } from '../../bindings';
 
 const meta: Meta = {
   title: 'Chakra UI/Filter Selection',
@@ -33,8 +36,22 @@ const properties: PropertyDescription[] = [
   },
 ];
 
+const initialValue: Filter[] = [
+  {
+    id: '35f924a2-9e1d-423c-8565-41619a5b8e8e',
+    field: 'name',
+    operation: OperationType.IS,
+    value: 'Artemis',
+    type: 'string',
+  },
+  {
+    id: '91f7e872-f0e9-4fdf-8db1-6b51c0670817',
+    binding: Binding.AND,
+  },
+];
+
 const Template: Story = args => (
-  <FilterSelection properties={properties} {...args} />
+  <FilterSelection value={initialValue} properties={properties} {...args} />
 );
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test

src/components/chakra-ui/FilterSelection.tsx

@@ -9,8 +9,9 @@ interface Props {
   properties: PropertyDescription[];
 }
 
-export const FilterSelection: FC<Props> = ({ properties }) => {
+export const FilterSelection: FC<Props> = ({ value, properties }) => {
   const { filters, onAddFilter, createFilterRowProps } = useQueryFilters({
+    initialValue: value,
     properties,
   });
 

src/components/react-select/FilterRow.tsx

@@ -40,7 +40,13 @@ export const FilterRow: FC<FilterRowProps> = ({
         <Select
           styles={selectStyles}
           value={binding}
-          onChange={onChangeBinding}
+          onChange={selectedBinding => {
+            if (!selectedBinding) {
+              return;
+            }
+
+            onChangeBinding(selectedBinding);
+          }}
           options={bindings}
         />
       ) : (
@@ -50,15 +56,27 @@ export const FilterRow: FC<FilterRowProps> = ({
       <Select
         styles={selectStyles}
         value={field}
-        onChange={onChangeField}
+        onChange={selectedField => {
+          if (!selectedField) {
+            return;
+          }
+
+          onChangeField(selectedField);
+        }}
         placeholder="Field"
         options={fields}
       />
 
       <Select
         styles={selectStyles}
         value={operation}
-        onChange={onChangeOperation}
+        onChange={selectedOperation => {
+          if (!selectedOperation) {
+            return;
+          }
+
+          onChangeOperation(selectedOperation);
+        }}
         placeholder="Operation"
         options={operations}
       />

src/hooks/useQueryFilters.test.tsx

@@ -1,11 +1,13 @@
 import { act, renderHook } from '@testing-library/react-hooks';
 import { ChangeEvent } from 'react';
+import { Binding } from '../bindings';
 import {
   defaultTypeOperationsMap,
   defaultOperationLabels,
   mapOperationToSelectOption,
   OperationType,
 } from '../operations';
+import { Filter } from '../types';
 import { useQueryFilters, HookProps } from './useQueryFilters';
 
 const properties: HookProps['properties'] = [
@@ -53,6 +55,27 @@ describe('useQueryFilters', () => {
     createTestFilter();
   });
 
+  it('should initialize using a given initial state', () => {
+    const initialValue: Filter[] = [
+      {
+        id: '35f924a2-9e1d-423c-8565-41619a5b8e8e',
+        field: 'name',
+        operation: OperationType.IS,
+        value: 'Artemis',
+        type: 'string',
+      },
+      {
+        id: '91f7e872-f0e9-4fdf-8db1-6b51c0670817',
+        binding: Binding.AND,
+      },
+    ];
+    const { result } = renderHook(() =>
+      useQueryFilters({ initialValue, properties })
+    );
+
+    expect(result.current.filters).toStrictEqual(initialValue);
+  });
+
   describe('createFilterRowProps', () => {
     it('should return the string operation choices by default if the filter has no field selected', () => {
       const result = createTestFilter();