Merge pull request #490 from layer5io/489-remove-packages-path

fix: remove packages path, and move to src directory

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layer5/sistent",
-  "version": "0.14.6",
+  "version": "0.14.7",
   "description": "Reusable React Components and SVG Icons library",
   "repository": {
     "type": "git",

packages/components/src/custom/TypingFilter/index.tsx → src/custom/TypingFilter/index.tsx

@@ -10,10 +10,10 @@ import {
   FilteringState,
   filterReducer
 } from '../../utils/typing.state';
+import { getFilters } from '../../utils/typing.utils';
 import TypingFilterInput from './TypingFIlterInput';
 import { TypingFilters } from './TypingFIlters';
 import { TypingFilterValueSuggestions } from './TypingFilterSuggestions';
-import { getFilters } from '../../utils/typing.utils';
 
 interface TypingFilterType {
   filterSchema: FilterSchema;
@@ -79,29 +79,31 @@ export function TypingFilter({ filterSchema, handleFilter, autoFilter = false }:
       return;
     }
 
+    const inputField = inputFieldRef.current; // Copy the value to a variable
+
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Enter') {
-        // Perform nullish check before accessing inputFieldRef.current.value
-        const inputValue = inputFieldRef.current?.value ?? '';
+        // Perform nullish check before accessing inputField.value
+        const inputValue = inputField?.value ?? '';
         handleFilter(getFilters(inputValue, filterSchema));
         setAnchorEl(null);
       }
     };
 
-    inputFieldRef.current?.addEventListener('keydown', handleKeyDown);
+    inputField?.addEventListener('keydown', handleKeyDown);
 
     return () => {
-      inputFieldRef.current?.removeEventListener('keydown', handleKeyDown);
+      inputField?.removeEventListener('keydown', handleKeyDown);
     };
-  }, []);
+  }, [filterSchema, handleFilter]);
 
   React.useEffect(() => {
     if (autoFilter && filterState.state === FilteringState.SELECTING_FILTER) {
       // Perform nullish check before accessing filterState.context
       const filterValue = filterState.context?.value ?? '';
       handleFilter(getFilters(filterValue, filterSchema));
     }
-  }, [filterState.state]);
+  }, [filterState.state, autoFilter, filterSchema, filterState.context?.value, handleFilter]);
 
   return (
     <React.Fragment>

src/custom/readme.md

@@ -35,10 +35,9 @@ This custom React component, `ResponsiveDataTable`, is a wrapper around the Mate
 
 ### Standard Props
 
-| Property | Type     | Description                                                                                                 |
-| -------- | -------- | ----------------------------------------------------------------------------------------------------------- |
-| `rowsPerPageOptions`  | `number[]` | (Optional) Array of numbers representing the number of rows per page. If not provided, the default values will be used(20, 50, 100). |
-
+| Property             | Type       | Description                                                                                                                          |
+| -------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `rowsPerPageOptions` | `number[]` | (Optional) Array of numbers representing the number of rows per page. If not provided, the default values will be used(20, 50, 100). |
 
 ### Customization
 

src/index.tsx

@@ -2,4 +2,5 @@ export * from './base';
 export * from './colors';
 export * from './custom';
 export * from './icons';
+export * from './schemas';
 export * from './theme';

packages/components/src/schemas/createAndEditEnvironment/schema.tsx → src/schemas/createAndEditEnvironment/schema.tsx

@@ -9,15 +9,16 @@ const createAndEditEnvironmentSchema = {
       'x-rjsf-grid-area': '12'
     },
     name: {
-      description: "Enter a unique and meaningful name for the environment. Remember you can change name of environment after it's creation too",
+      description:
+        "Enter a unique and meaningful name for the environment. Remember you can change name of environment after it's creation too",
       title: 'Name',
       type: 'string',
       'x-rjsf-grid-area': '12'
     },
     organization: {
       type: 'string',
       title: 'Organization',
-      description: "Select a organization in whic",
+      description: 'Select a organization in whic',
       enum: [],
       enumNames: [],
       'x-rjsf-grid-area': '12'

packages/components/src/utils/typing.state.tsx → src/utils/typing.state.tsx

@@ -40,13 +40,16 @@ export interface FilterActionType {
  * The `filterSchema` object defines available filter options for the TypingFilter component.
  * It provides information about different filter categories, their descriptions, and possible values.
  */
-export type FilterSchema = Record<string, {
+export type FilterSchema = Record<
+  string,
+  {
     value?: string;
     description?: string;
     type?: string;
     values?: string[];
     multiple?: boolean;
-  }>;
+  }
+>;
 /**
  * @example
  * // Example filter schema with multiple filter categories

src/utils/typing.utils.ts

@@ -0,0 +1,91 @@
+import { Delimiter, FilterSchema, FilterStateType } from './typing.state';
+
+export type Filters = Record<string, string[] | undefined>;
+
+/**
+ * Returns the filter object from the filterSchema
+ *
+ * @param value
+ * @param filterSchema
+ * @returns
+ */
+export const getFilterByValue = (
+  value: string,
+  filterSchema: FilterSchema
+): { value: string; multiple: boolean } | undefined => {
+  const matchingFilterKey = Object.keys(filterSchema).find(
+    (key) => filterSchema[key].value === value
+  );
+
+  if (matchingFilterKey) {
+    const matchingFilter = filterSchema[matchingFilterKey];
+    return {
+      value: matchingFilter.value ?? '',
+      multiple: !!matchingFilter.multiple
+    };
+  }
+
+  return undefined;
+};
+
+/**
+ * Parses a filter string and returns a filter object
+ *
+ * @param filterString  - The input filter string of the form "type:value type2:value2 type:value2"
+ * @param filterSchema - The filter object with types as keys and arrays of values as values
+ * @returns
+ */
+export const getFilters = (filterString: string, filterSchema: FilterSchema): Filters => {
+  const filters: Filters = {};
+
+  const filterValuePairs = filterString.split(Delimiter.FILTER);
+
+  filterValuePairs.forEach((filterValuePair) => {
+    const [filter, value] = filterValuePair.split(Delimiter.FILTER_VALUE);
+
+    const schemaEntry = filterSchema[filter];
+
+    if (schemaEntry && schemaEntry.multiple) {
+      filters[filter] = filters[filter] ?? [];
+      filters[filter]!.push(value); // Using non-null assertion
+    } else {
+      filters[filter] = [value]; // Treat as an array
+    }
+  });
+
+  return filters;
+};
+
+/**
+ * Returns a filter string of form "type:value type2:value2 type:value2" from
+ * a filter object of { type: { values }, type2: { values } }
+ *
+ * @param filters
+ * @returns
+ */
+export const getFilterString = (filters: FilterSchema) => {
+  return Object.entries(filters).reduce((filterString, [filter, values]) => {
+    const valuesArray = values?.values ?? [];
+    const filterValuesString = valuesArray
+      .map((value) => `${filter}${Delimiter.FILTER_VALUE}${value}`)
+      .join(' ');
+
+    return filterString + filterValuesString;
+  }, '');
+};
+
+/**
+ *
+ * @param filteringState
+ * @returns
+ */
+export const getCurrentFilterAndValue = (filteringState: FilterStateType) => {
+  const { context } = filteringState;
+  const currentFilterValue = context?.value?.split(Delimiter.FILTER).at(-1);
+  const currentFilter = currentFilterValue?.split(Delimiter.FILTER_VALUE)?.[0] ?? '';
+  const currentValue = currentFilterValue?.split(Delimiter.FILTER_VALUE)?.[1] ?? '';
+  return {
+    filter: currentFilter,
+    value: currentValue
+  };
+};