Merge pull request #1 from armand1m/feat/filter-state-enhancements

feat: smaller build, unit tests, more confidence in the library

Author: armand1m

.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  "extends": [
+    "react-app",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "no-redeclare": "off",
+  }
+}

.github/workflows/main.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: ['10.x', '12.x', '14.x']
+        node: ['12.x', '14.x']
         os: [ubuntu-latest, macOS-latest]
 
     steps:

.gitignore

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

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "jsxBracketSameLine": true,
+  "printWidth": 70,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

README.md

@@ -1,12 +1,16 @@
-# react-query-filters
+# react-query-filter
+
+<div style="max-width: 700px">
+  <img src="./.github/chakra-ui-demo.gif?raw=true">
+</div>
 
 > **Heads up:** This is still a work in progress. A lot of breaking change might happen and a lot of features are still missing. PR's are very welcome but please open an issue first describing what you think could be better.
 
 Set of utilities to implement a Query Builder for filters.
 
 This library ships a `useQueryFilters` hook that you can use to implement an UI on top of it.
 
-The `useQueryFilters` will track state changes and enable you do build your query filter builder using the styles you want.
+The `useQueryFilters` will track state changes and enable you to build your own UI implementation on top of it.
 
  - [Features](#features)
  - [Signature](#signature)
@@ -24,8 +28,9 @@ The `useQueryFilters` will track state changes and enable you do build your quer
     - [ ] Single Select
     - [ ] Multiple Select
  - [x] Conditional value based on operation type
-    - Condition value is always `undefined` if operation type is `is-empty` or `is-not-empty`
+    - Condition value is always `undefined` if operation type is `IS_EMPTY` or `IS_NOT_EMPTY`
  - [x] `AND` & `OR` logic gates supported, implemented as the `Binding` enum
+ - [x] Custom Operation Labels enabled
  - [ ] Support for controlled state
  - [ ] Support for nested conditions
 
@@ -143,7 +148,7 @@ import {
   SlideFade,
   Code,
 } from '@chakra-ui/react';
-import { useQueryFilters, Filter, PropertyDescription } from 'react-query-filters';
+import { useQueryFilters, Filter, PropertyDescription } from 'react-query-filter';
 import { FilterRow } from './FilterRow';
 
 interface Props {
@@ -192,7 +197,7 @@ import {
   Select,
   Tooltip,
 } from '@chakra-ui/react';
-import { FilterRowProps } from 'react-query-filters';
+import { FilterRowProps } from 'react-query-filter';
 
 export const FilterRow: React.FC<FilterRowProps> = ({
   filter,
@@ -305,10 +310,6 @@ const properties: PropertyDescription[] = [
 <FilterSelection properties={properties} />
 ```
 
-<div style="max-width: 700px">
-  <img src="./.github/chakra-ui-demo.gif?raw=true">
-</div>
-
 ## License
 
-MIT © [Armando Magalhaes](https://github.com/armand1m)
+MIT © [Armando Magalhaes](https://github.com/armand1m)

package.json

@@ -31,7 +31,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "tsdx lint"
+      "pre-commit": "tsdx test"
     }
   },
   "prettier": {
@@ -40,6 +40,10 @@
     "singleQuote": true,
     "trailingComma": "es5"
   },
+  "resolutions": {
+    "**/@typescript-eslint/eslint-plugin": "^4.1.1",
+    "**/@typescript-eslint/parser": "^4.1.1"
+  },
   "name": "react-query-filter",
   "author": "Armando Magalhães",
   "module": "dist/react-query-filter.esm.js",
@@ -65,10 +69,11 @@
     "@storybook/addon-links": "^6.1.11",
     "@storybook/addons": "^6.1.11",
     "@storybook/react": "^6.1.11",
-    "@testing-library/react-hooks": "^3.7.0",
+    "@testing-library/react-hooks": "^7.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-select": "^3.0.28",
+    "@types/uuid": "^8.3.0",
     "babel-loader": "^8.2.2",
     "framer-motion": "^3.1.1",
     "husky": "^4.3.6",
@@ -80,16 +85,18 @@
     "size-limit": "^4.9.1",
     "tsdx": "^0.14.1",
     "tslib": "^2.0.3",
-    "typescript": "^4.1.3"
+    "typescript": "^4.3.2"
   },
   "dependencies": {
-    "react-use": "^15.3.4"
+    "uuid": "^8.3.2"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/armand1m/react-query-filter.git"
   },
   "release": {
-    "branches": ["main"]
+    "branches": [
+      "main"
+    ]
   }
 }

src/bindings.ts

@@ -5,13 +5,17 @@ export enum Binding {
   OR = 'OR',
 }
 
+export const AndOption: SelectOption<Binding> = {
+  value: Binding.AND,
+  label: 'And',
+};
+
+export const OrOption: SelectOption<Binding> = {
+  value: Binding.OR,
+  label: 'Or',
+};
+
 export const defaultBindingOptions: SelectOption<Binding>[] = [
-  {
-    value: Binding.AND,
-    label: 'And',
-  },
-  {
-    value: Binding.OR,
-    label: 'Or',
-  },
+  AndOption,
+  OrOption,
 ];

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

@@ -10,10 +10,17 @@ const meta: Meta<FilterRowProps> = {
     controls: { expanded: true },
   },
   args: {
-    filter: {},
+    filter: {
+      id: 'test-id',
+    },
     fields: [],
     operations: [],
     bindings: [],
+    selectStates: {
+      onChangeBinding: () => {},
+      onChangeField: () => {},
+      onChangeOperation: () => {},
+    },
     shouldRenderBindingSelect: false,
     shouldRenderValueInput: true,
   },

src/components/chakra-ui/FilterRow.tsx

@@ -1,26 +1,26 @@
 import React, { FC } from 'react';
-import {
-  CloseButton,
-  Text,
-  HStack,
-  Input,
-  Select,
-  Tooltip,
-} from '@chakra-ui/react';
+import { CloseButton, Text, HStack, Select, Tooltip } from '@chakra-ui/react';
 import { FilterRowProps } from '../../';
+import { ValueInput } from '../shared/ValueInput';
 
 export const FilterRow: FC<FilterRowProps> = ({
   filter,
   fields,
   bindings,
   operations,
+  suggestions,
   shouldRenderBindingSelect,
   shouldRenderValueInput,
   onRemove,
-  onChangeBinding,
-  onChangeField,
-  onChangeOperation,
   onChangeValue,
+  selectStates: {
+    bindingIndex,
+    fieldIndex,
+    operationIndex,
+    onChangeBinding,
+    onChangeField,
+    onChangeOperation,
+  },
 }) => {
   return (
     <HStack>
@@ -32,12 +32,15 @@ export const FilterRow: FC<FilterRowProps> = ({
         <Select
           size="sm"
           maxWidth="6rem"
-          value={filter.binding}
-          onChange={onChangeBinding}
+          value={bindingIndex}
+          onChange={event => {
+            const index = Number(event.target.value);
+            onChangeBinding(bindings[index]);
+          }}
         >
-          {bindings.map(binding => (
+          {bindings.map((binding, index) => (
             <option
-              value={binding.value}
+              value={index}
               key={binding.value}
               selected={filter.binding === binding.value}
             >
@@ -51,13 +54,16 @@ export const FilterRow: FC<FilterRowProps> = ({
 
       <Select
         size="sm"
-        value={filter.field}
-        onChange={onChangeField}
+        value={fieldIndex}
+        onChange={event => {
+          const index = Number(event.target.value);
+          onChangeField(fields[index]);
+        }}
         placeholder="Field"
       >
-        {fields.map(field => (
+        {fields.map((field, index) => (
           <option
-            value={field.value}
+            value={index}
             key={field.value}
             selected={filter.field === field.value}
           >
@@ -68,13 +74,16 @@ export const FilterRow: FC<FilterRowProps> = ({
 
       <Select
         size="sm"
-        value={filter.operation}
-        onChange={onChangeOperation}
+        value={operationIndex}
+        onChange={event => {
+          const index = Number(event.target.value);
+          onChangeOperation(operations[index]);
+        }}
         placeholder="Operation"
       >
-        {operations.map(operation => (
+        {operations.map((operation, index) => (
           <option
-            value={operation.value}
+            value={index}
             key={operation.value}
             selected={filter.operation === operation.value}
           >
@@ -84,11 +93,13 @@ export const FilterRow: FC<FilterRowProps> = ({
       </Select>
 
       {shouldRenderValueInput && (
-        <Input
+        <ValueInput
           size="sm"
-          placeholder="Value"
-          value={filter.value ?? ''}
+          name={filter.id}
+          type={filter.type}
+          value={filter.value}
           onChange={onChangeValue}
+          suggestions={suggestions}
         />
       )}
     </HStack>

src/components/react-select/FilterRow.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { FilterRowProps } from '../../';
+import { FilterRow } from './FilterRow';
+
+const meta: Meta<FilterRowProps> = {
+  title: 'React Select/Filter Row',
+  component: FilterRow,
+  parameters: {
+    controls: { expanded: true },
+  },
+  args: {
+    filter: {
+      id: 'test-id',
+    },
+    fields: [],
+    operations: [],
+    bindings: [],
+    selectStates: {
+      onChangeBinding: () => {},
+      onChangeField: () => {},
+      onChangeOperation: () => {},
+    },
+    shouldRenderBindingSelect: false,
+    shouldRenderValueInput: true,
+  },
+};
+
+export default meta;
+
+const Template: Story<FilterRowProps> = args => {
+  return <FilterRow {...args} />;
+};
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+
+Default.args = {};