🎉 Add react filters-bar module

packages/react-filters-bar/.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+/dist
+/coverage

packages/react-filters-bar/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@cloudwalker/react-filters-bar",
+  "version": "0.0.0",
+  "scripts": {
+    "types": "tsc --noEmit",
+    "build": "tsup src/main.tsx",
+    "dev": "tsup src/main.tsx --watch"
+  },
+  "files": [
+    "dist/**"
+  ],
+  "main": "dist/main.js",
+  "module": "dist/main.mjs",
+  "types": "dist/main.d.ts",
+  "sideEffects": false,
+  "author": {
+    "name": "Luca Barone",
+    "email": "baro.luc@gmail.com",
+    "url": "https://github.com/cloud-walker"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.21",
+    "react": "^18.2.0",
+    "tsup": "^6.2.3",
+    "typescript": "^4.8.4"
+  },
+  "peerDependencies": {
+    "react": ">=16.8"
+  }
+}

packages/react-filters-bar/src/filter-context.tsx

@@ -0,0 +1,26 @@
+import { createContext, PropsWithChildren, useContext } from "react";
+
+type FilterState = {
+  remove: () => void;
+  setOperator: (value: string) => void;
+  setValue: (value: string) => void;
+  operator: string;
+  value: string;
+};
+
+const FilterCtx = createContext<FilterState | null>(null);
+
+export function useFilterCtx() {
+  const ctx = useContext(FilterCtx);
+  if (ctx == null) {
+    throw Error("FilterCtx.Provider is missing.");
+  }
+  return ctx;
+}
+
+export function FilterProvider({
+  children,
+  ...props
+}: PropsWithChildren<FilterState>) {
+  return <FilterCtx.Provider value={props}>{children}</FilterCtx.Provider>;
+}

packages/react-filters-bar/src/filtersbar-context.tsx

@@ -0,0 +1,24 @@
+import { createContext, PropsWithChildren, useContext } from "react";
+
+type FiltersDef = Record<string, JSX.Element>;
+
+const FiltersBarCtx = createContext<{ filtersDef: FiltersDef } | null>(null);
+
+export function useFiltersBarCtx() {
+  const ctx = useContext(FiltersBarCtx);
+  if (ctx == null) {
+    throw Error("FiltersBarCtx.Provider is missing.");
+  }
+  return ctx;
+}
+
+export function FiltersBarProvider<TFiltersDef extends FiltersDef>({
+  children,
+  filtersDef,
+}: PropsWithChildren<{ filtersDef: TFiltersDef }>) {
+  return (
+    <FiltersBarCtx.Provider value={{ filtersDef }}>
+      {children}
+    </FiltersBarCtx.Provider>
+  );
+}

packages/react-filters-bar/src/main.tsx

@@ -0,0 +1,5 @@
+import { FiltersBarProvider } from "./filtersbar-context";
+
+export function FiltersBar({filtersDef}: ) {
+  return <FiltersBarProvider filtersDef={}></FiltersBarProvider>
+}

packages/react-filters-bar/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "jsx": "react-jsx",
+    "noUncheckedIndexedAccess": true
+  },
+  "include": ["src"]
+}

packages/react-filters-bar/tsup.config.ts

@@ -0,0 +1,8 @@
+import {defineConfig} from 'tsup'
+
+export default defineConfig({
+  format: ['cjs', 'esm'],
+  minify: true,
+  sourcemap: true,
+  dts: true,
+})