@rpcbase/client 0.215.0 → 0.216.0

package/access-control/PolicyEditor/TargetSelector/QueryBuilder.tsx

@@ -0,0 +1,48 @@
+import {
+  QueryBuilderBootstrap,
+  bootstrapControlClassnames,
+  bootstrapControlElements,
+} from "@react-querybuilder/bootstrap"
+import {QueryBuilder as ReactQueryBuilder} from "react-querybuilder"
+import {QueryBuilderDnD as ReactQueryBuilderDnD} from "@react-querybuilder/dnd"
+import * as ReactDnD from "react-dnd"
+import * as ReactDnDHtml5Backend from "react-dnd-html5-backend"
+
+// import FieldSelector from "./FieldSelector"
+// import OperatorSelector from "./OperatorSelector"
+// import ValueEditor from "./ValueEditor"
+
+import "./query-builder.scss"
+
+
+const controlClassnames = {...bootstrapControlClassnames}
+controlClassnames.queryBuilder += " queryBuilder-branches"
+
+const QueryBuilder = ({controlElements = {}, ...props}) => {
+  return (
+    <ReactQueryBuilderDnD dnd={{...ReactDnD, ...ReactDnDHtml5Backend}}>
+      <QueryBuilderBootstrap>
+        <ReactQueryBuilder
+          addRuleToNewGroups
+          // TODO: why is DnD not working??
+          // https://react-querybuilder.js.org/docs/components/querybuilder#enabledraganddrop
+          enableDragAndDrop
+          showCombinatorsBetweenRules={false}
+          showNotToggle
+          showCloneButtons
+          controlClassnames={controlClassnames}
+          controlElements={{
+            ...bootstrapControlElements,
+            ...controlElements,
+            // fieldSelector: FieldSelector,
+            // operatorSelector: OperatorSelector,
+            // valueEditor: ValueEditor,
+          }}
+          {...props}
+        />
+      </QueryBuilderBootstrap>
+    </ReactQueryBuilderDnD>
+  )
+}
+
+export default QueryBuilder

package/access-control/PolicyEditor/TargetSelector/index.tsx

@@ -0,0 +1,5 @@
+
+
+export const TargetSelector = () => {
+
+}

package/access-control/PolicyEditor/TargetSelector/query-builder.scss

@@ -0,0 +1,9 @@
+@import "helpers";
+
+.queryBuilder {
+  .dropdown-item.active {
+    .text-secondary {
+      color: $gray-200 !important;
+    }
+  }
+}

package/access-control/PolicyEditor/index.tsx

@@ -0,0 +1,70 @@
+import {useState} from "react"
+
+
+const TARGET_TYPES = [
+  {
+    name: "Collection:",
+    key: "collection",
+    description: "Applies to all documents within the collection.",
+  },
+  {
+    name: "Document:",
+    key: "document",
+    description: "Applies only to certain specific documents.",
+  },
+]
+
+export const PolicyEditor = () => {
+  const [targetType, setTargetType] = useState("collection")
+
+  const onChangeTargetType = (event) => {
+    setTargetType(event.target.value)
+  }
+
+  return (
+    <div>
+      <h6>Policy Editor</h6>
+      <br />
+      <div className="d-flex flex-row">
+        <div className="me-2">
+          <h6>Target Type:</h6>
+          <div style={{maxWidth: 300}}>
+            {TARGET_TYPES.map((type) => (
+              <div key={type.key} className="d-flex flex-row mb-1">
+                <input
+                  className="form-check-input"
+                  type="radio"
+                  name="targetTypeOptions"
+                  id={type.key}
+                  value={type.key}
+                  checked={targetType === type.key}
+                  onChange={onChangeTargetType}
+                />
+                <label
+                  className="form-check-label cursor-pointer ps-2"
+                  htmlFor={type.key}
+                >
+                  <b>{type.name}</b> {type.description}
+                </label>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <h6>Targets:</h6>
+          <div>
+            <input type="text" />
+          </div>
+        </div>
+      </div>
+      grant / deny
+      <br />
+      Scope: document, field
+      <br />
+      operation: create read write delete
+      <br />
+      to attributes / conditions add support for expiry date
+    </div>
+  )
+}

package/access-control/index.ts

@@ -1,2 +1,3 @@
 export * from "./ACLModal"
 export * from "./ACLForm"
+export * from "./PolicyEditor"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.215.0",
+  "version": "0.216.0",
   "scripts": {
     "build": "../../node_modules/.bin/wireit",
     "test": "../../node_modules/.bin/wireit"

package/ui/SelectPills/index.tsx

@@ -1,5 +1,6 @@
 import "./select-pills.scss"
 
+
 type Props = {
   direction?: "row" | "col";
   size?: "md" | "sm";
@@ -16,11 +17,11 @@ export const SelectPills= ({
   activeKey,
 }: Props) => {
   const handleSelectType = (type: string) => () => {
-    onChange(type);
-  };
+    onChange(type)
+  }
 
   const renderRow = () => {
-    const iconSize = size === "sm" ? "24px" : "32px";
+    const iconSize = size === "sm" ? "24px" : "32px"
 
     return (
       <div className={`select-pills mb-3 card-group direction-row`}>
@@ -48,11 +49,11 @@ export const SelectPills= ({
           </div>
         ))}
       </div>
-    );
-  };
+    )
+  }
 
   const renderCol = () => {
-    const iconSize = size === "sm" ? "24px" : "32px";
+    const iconSize = size === "sm" ? "24px" : "32px"
 
     return (
       <div className="select-pills">
@@ -64,11 +65,14 @@ export const SelectPills= ({
             onClick={handleSelectType(item.key)}
           >
             <div className="card-body d-flex flex-row px-2 py-3">
-              <img
-                className="d-flex align-self-center me-2"
-                style={{ width: iconSize, height: iconSize }}
-                src={item.icon}
-              />
+              {item.icon && (
+                <img
+                  className="d-flex align-self-center me-2"
+                  style={{width: iconSize, height: iconSize}}
+                  src={item.icon}
+                />
+              )}
+
               {size === "md" && (
                 <div className="flex-column">
                   <h6 className="card-title mb-1 fw-bold">{item.name}</h6>
@@ -77,7 +81,7 @@ export const SelectPills= ({
               )}
               {size === "sm" && (
                 <div className="">
-                  <h6 className="card-title my-0 d-inline-block me-2 fw-bold">{item.name}</h6>
+                  <h6 className="card-title my-0 d-inline-block me-1 fw-bold">{item.name}</h6>
                   <span className="card-text">{item.description}</span>
                 </div>
               )}
@@ -85,8 +89,8 @@ export const SelectPills= ({
           </div>
         ))}
       </div>
-    );
-  };
+    )
+  }
 
-  return direction === "row" ? renderRow() : renderCol();
-};
+  return direction === "row" ? renderRow() : renderCol()
+}