module-package-comp 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import "./index.css";
+export * from "./component/ComponentDisplayer";
+export * from "./component/ShowAttr";
+export * from "./util/type";

package/dist/index.js

@@ -0,0 +1,5 @@
+import "./index.css";
+export * from "./component/ComponentDisplayer";
+export * from "./component/ShowAttr";
+export * from "./util/type";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sBAAsB,CAAC;AAErC,cAAc,aAAa,CAAC"}

package/dist/util/type.d.ts

@@ -0,0 +1,92 @@
+export type DataJSON = Record<string, string | object>;
+export type DateTime = string;
+export declare enum ConditionEnum {
+    EQ = "equal",
+    SUP = "superior",
+    INF = "inferior"
+}
+export declare enum AttributeTypeEnum {
+    TEXT = "text",
+    LIST = "list",
+    NUMBER = "number",
+    BOOLEAN = "boolean",
+    DATE = "date",
+    NOTE = "note",
+    IMAGE = "image",
+    LINK = "link",
+    MULTIPLE = "multiple",
+    AUTOGEN = "autogen",
+    FILE = "file",
+    TITRE = "titre",
+    TEXT_OUTPUT = "text_output",
+    IMAGE_OUTPUT = "image_output",
+    VIDEO_OUTPUT = "video_output"
+}
+export declare enum ComponentType {
+    GENERAL = "general",
+    ACCESS = "access",
+    PEC = "PEC",
+    DOSSIER = "dossier",
+    PATIENT = "patient",
+    PRESCRIPTION = "prescription",
+    WORKFLOW = "workflow",
+    FOLDER = "folder",
+    CONSULTATION = "consultation",
+    TREE = "tree"
+}
+export interface Condition {
+    attribute: string;
+    cond: keyof typeof ConditionEnum;
+    value: string;
+    delimiter: string;
+}
+export interface SettingsAttribute {
+    max?: string;
+    min?: string;
+    color?: string;
+}
+export interface Attribute {
+    name: string;
+    label?: string;
+    type?: keyof typeof AttributeTypeEnum;
+    content?: Content;
+    settings?: SettingsAttribute;
+}
+export type Content = string | string[];
+export interface SettingsComponent {
+    required?: boolean;
+}
+export interface Component {
+    _id: string;
+    name: string;
+    label: string;
+    type: keyof typeof ComponentType;
+    attributes: Attribute[];
+    conditions: Condition[][];
+    settings?: SettingsComponent;
+    filter?: DataJSON;
+    createdAt?: DateTime;
+    updatedAt?: DateTime;
+}
+export interface ComponentResult {
+    total: number;
+    page: number;
+    lastPage: number;
+    data: Component[];
+}
+export interface Data {
+    _id: string;
+    patient_dmi: string;
+    from: string;
+    component_id: Component;
+    value: DataJSON;
+    extra: DataJSON;
+    createdAt: DateTime;
+    updatedAt: DateTime;
+}
+export interface DataResult {
+    total: number;
+    page: number;
+    lastPage: number;
+    data: Data[];
+}

package/dist/util/type.js

@@ -0,0 +1,39 @@
+// Enums
+export var ConditionEnum;
+(function (ConditionEnum) {
+    ConditionEnum["EQ"] = "equal";
+    ConditionEnum["SUP"] = "superior";
+    ConditionEnum["INF"] = "inferior";
+})(ConditionEnum || (ConditionEnum = {}));
+export var AttributeTypeEnum;
+(function (AttributeTypeEnum) {
+    AttributeTypeEnum["TEXT"] = "text";
+    AttributeTypeEnum["LIST"] = "list";
+    AttributeTypeEnum["NUMBER"] = "number";
+    AttributeTypeEnum["BOOLEAN"] = "boolean";
+    AttributeTypeEnum["DATE"] = "date";
+    AttributeTypeEnum["NOTE"] = "note";
+    AttributeTypeEnum["IMAGE"] = "image";
+    AttributeTypeEnum["LINK"] = "link";
+    AttributeTypeEnum["MULTIPLE"] = "multiple";
+    AttributeTypeEnum["AUTOGEN"] = "autogen";
+    AttributeTypeEnum["FILE"] = "file";
+    AttributeTypeEnum["TITRE"] = "titre";
+    AttributeTypeEnum["TEXT_OUTPUT"] = "text_output";
+    AttributeTypeEnum["IMAGE_OUTPUT"] = "image_output";
+    AttributeTypeEnum["VIDEO_OUTPUT"] = "video_output";
+})(AttributeTypeEnum || (AttributeTypeEnum = {}));
+export var ComponentType;
+(function (ComponentType) {
+    ComponentType["GENERAL"] = "general";
+    ComponentType["ACCESS"] = "access";
+    ComponentType["PEC"] = "PEC";
+    ComponentType["DOSSIER"] = "dossier";
+    ComponentType["PATIENT"] = "patient";
+    ComponentType["PRESCRIPTION"] = "prescription";
+    ComponentType["WORKFLOW"] = "workflow";
+    ComponentType["FOLDER"] = "folder";
+    ComponentType["CONSULTATION"] = "consultation";
+    ComponentType["TREE"] = "tree";
+})(ComponentType || (ComponentType = {}));
+//# sourceMappingURL=type.js.map

package/dist/util/type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.js","sourceRoot":"","sources":["../../src/util/type.ts"],"names":[],"mappings":"AAIA,QAAQ;AACR,MAAM,CAAN,IAAY,aAIX;AAJD,WAAY,aAAa;IACvB,6BAAY,CAAA;IACZ,iCAAgB,CAAA;IAChB,iCAAgB,CAAA;AAClB,CAAC,EAJW,aAAa,KAAb,aAAa,QAIxB;AAED,MAAM,CAAN,IAAY,iBAgBX;AAhBD,WAAY,iBAAiB;IAC3B,kCAAa,CAAA;IACb,kCAAa,CAAA;IACb,sCAAiB,CAAA;IACjB,wCAAmB,CAAA;IACnB,kCAAa,CAAA;IACb,kCAAa,CAAA;IACb,oCAAe,CAAA;IACf,kCAAa,CAAA;IACb,0CAAqB,CAAA;IACrB,wCAAmB,CAAA;IACnB,kCAAa,CAAA;IACb,oCAAe,CAAA;IACf,gDAA2B,CAAA;IAC3B,kDAA6B,CAAA;IAC7B,kDAA6B,CAAA;AAC/B,CAAC,EAhBW,iBAAiB,KAAjB,iBAAiB,QAgB5B;AAED,MAAM,CAAN,IAAY,aAWX;AAXD,WAAY,aAAa;IACvB,oCAAmB,CAAA;IACnB,kCAAiB,CAAA;IACjB,4BAAW,CAAA;IACX,oCAAmB,CAAA;IACnB,oCAAmB,CAAA;IACnB,8CAA6B,CAAA;IAC7B,sCAAqB,CAAA;IACrB,kCAAiB,CAAA;IACjB,8CAA6B,CAAA;IAC7B,8BAAa,CAAA;AACf,CAAC,EAXW,aAAa,KAAb,aAAa,QAWxB"}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "module-package-comp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "npx tailwindcss -i ./src/index.css -o ./dist/index.css && tsc",
+    "dev": "concurrently \"npx tailwindcss -i ./src/index.css -o ./dist/index.css --watch\" \"tsc -watch\""
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "concurrently": "^8.2.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.5.3"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/component/ComponentDisplayer.tsx

@@ -0,0 +1,107 @@
+import { useState } from "react";
+import {
+  Attribute,
+  Component,
+  Condition,
+  ConditionEnum,
+  DataJSON,
+} from "../util/type";
+import { ShowAttr } from "./ShowAttr";
+import PrimaryBtn from "./PrimaryBtn";
+
+type ComponentDisplayerProps = {
+  components: Component[];
+  data: DataJSON;
+  setData: (data: DataJSON) => void;
+  onSubmit: () => void;
+};
+
+export function ComponentDisplayer({
+  components,
+  data,
+  setData,
+  onSubmit,
+}: ComponentDisplayerProps) {
+  const [page, setPage] = useState(0);
+  return (
+    <form onSubmit={onSubmit} className="min-w-72">
+      <h1 className="font-bold text-center text-blue-800 text-4xl mb-8">
+        {components[page].label}
+      </h1>
+      <div className="space-y-3">
+        {components[page].attributes.map((attr) => {
+          if (canShow(attr, data, components[page].conditions || [])) {
+            return (
+              <ShowAttr
+                key={attr.name}
+                attribute={attr}
+                value={data[attr.name] ? String(data[attr.name]) : ""}
+                setValue={(s) => {
+                  const temp = { ...data };
+                  temp[attr.name] = s;
+                  setData(temp);
+                }}
+              />
+            );
+          } else {
+            if (data[attr.name]) {
+              const temp = { ...data };
+              temp[attr.name] = "";
+              setData(temp);
+            }
+          }
+        })}
+      </div>
+      <div className="flex justify-center my-8">
+        <PrimaryBtn clickFn={onSubmit} text="Submit" />
+      </div>
+    </form>
+  );
+}
+
+function canShow(
+  attr: Attribute,
+  data: DataJSON,
+  conds: Condition[][],
+): boolean {
+  const conditions = conds.filter(
+    (c) => c[c.length - 1].delimiter === attr.name,
+  );
+
+  if (!conditions || conditions.length === 0) {
+    return true;
+  }
+
+  return conditions.some((conditionSet) => {
+    let lastDelimiter = "ou"; // Default to OR
+    return conditionSet.every((condition, index) => {
+      const result = evaluateCondition(condition, data);
+
+      if (index < conditionSet.length - 1) {
+        lastDelimiter = condition.delimiter;
+      }
+
+      if (lastDelimiter === "et") {
+        return result;
+      } else {
+        return result || index === conditionSet.length - 1;
+      }
+    });
+  });
+}
+
+function evaluateCondition(condition: Condition, data: DataJSON): boolean {
+  const { attribute, cond, value } = condition;
+  const dataValue = data[attribute];
+
+  switch (cond) {
+    case "EQ":
+      return value === dataValue;
+    case "INF":
+      return value < dataValue;
+    case "SUP":
+      return value > dataValue;
+    default:
+      return false;
+  }
+}

package/src/component/PrimaryBtn.tsx

@@ -0,0 +1,30 @@
+import { useRef } from "react";
+
+type props = {
+  text: string;
+  clickFn: () => void;
+  className?: string;
+  disabled?: boolean;
+};
+
+export default function PrimaryBtn({
+  text,
+  clickFn,
+  className,
+  disabled,
+}: props) {
+  const btn = useRef<HTMLButtonElement>(null);
+  return (
+    <button
+      type="submit"
+      ref={btn}
+      onClick={clickFn}
+      className={
+        "rounded-2xl bg-secondary-blue bg-opacity-85 px-8 py-2 font-bold text-white-shade hover:bg-opacity-100"
+      }
+      disabled={disabled}
+    >
+      {text}
+    </button>
+  );
+}

package/src/component/ShowAttr.tsx

@@ -0,0 +1,120 @@
+import { Attribute, AttributeTypeEnum, Content } from "../util/type";
+import LabeledSelect from "./inputs/LableledSelect";
+import LabeledInput from "./inputs/LableledInput";
+import MultiSelect from "./inputs/MultiSelect";
+import LabeledMutliSelect from "./inputs/LabeledMutliSelect";
+import { useMemo } from "react";
+
+type ShowAttrProps = {
+  attribute: Attribute;
+  value: string;
+  setValue: (s: string) => void;
+  showLabel?: boolean;
+};
+
+export function ShowAttr({
+  attribute,
+  value,
+  setValue,
+  showLabel = true,
+}: ShowAttrProps) {
+  const label = useMemo(
+    () => (showLabel ? attribute.label || "" : ""),
+    [attribute.label],
+  );
+  const type = useMemo(() => {
+    if (attribute.type) return AttributeTypeEnum[attribute.type];
+  }, [attribute.type]);
+  switch (type) {
+    case AttributeTypeEnum.NUMBER:
+      return (
+        <LabeledInput
+          label={label}
+          value={value}
+          setValue={setValue}
+          type="number"
+        />
+      );
+    case AttributeTypeEnum.TEXT:
+      return (
+        <LabeledInput
+          label={label}
+          value={value}
+          setValue={setValue}
+          type="text"
+        />
+      );
+    case AttributeTypeEnum.LIST:
+      return (
+        <LabeledSelect
+          label={label}
+          selected={value}
+          setSelected={setValue}
+          options={(attribute.content as string[]) || []}
+        />
+      );
+    case AttributeTypeEnum.BOOLEAN:
+      return (
+        <LabeledInput
+          type="checkbox"
+          label={label}
+          checked={value === "true"}
+          setValue={(s) => setValue(s)}
+        />
+      );
+    case AttributeTypeEnum.DATE:
+      return (
+        <LabeledInput
+          type="date"
+          label={label}
+          value={value}
+          setValue={(date) => setValue(date)}
+        />
+      );
+    case AttributeTypeEnum.LINK:
+      return (
+        <div className="w-full">
+          <label className="block text-sm font-bold mb-1">{label}</label>
+          <a href={attribute.content as string}>{attribute.content}</a>
+        </div>
+      );
+    case AttributeTypeEnum.MULTIPLE:
+      return (
+        <LabeledMutliSelect
+          label={label}
+          selectedOptions={value !== "" ? value.split(",") : []}
+          onChange={(selected) => setValue(selected.join(","))}
+          options={(attribute.content as string[]) || []}
+        />
+      );
+    case AttributeTypeEnum.FILE:
+      return (
+        <LabeledInput
+          label={label}
+          type="file"
+          value={value}
+          setValue={setValue}
+        />
+      );
+    case AttributeTypeEnum.IMAGE_OUTPUT:
+      return (
+        <div className="w-full">
+          <label className="block text-sm font-bold mb-1">{label}</label>
+          <img className="w-64" src={attribute.content as string} />
+        </div>
+      );
+    case AttributeTypeEnum.TEXT_OUTPUT:
+      return (
+        <div className="w-full">
+          <label className="block text-sm font-bold mb-1">{label}</label>
+          <p>{attribute.content as string}</p>
+        </div>
+      );
+    case AttributeTypeEnum.TITRE:
+      return (
+        <div className="w-full">
+          <h2 className="text-3xl font-semibold">{attribute.label}</h2>
+        </div>
+      );
+  }
+}

package/src/component/inputs/Input.tsx

@@ -0,0 +1,43 @@
+import { HTMLInputTypeAttribute } from "react";
+
+export type InputProps = {
+  value?: string;
+  setValue: (s: string) => void;
+  type: HTMLInputTypeAttribute;
+  className?: string;
+  onBlur?: () => void;
+  maxLength?: number;
+  placeholder?: string;
+  disabled?: boolean;
+  checked?: boolean;
+};
+
+export default function Input({
+  value,
+  setValue,
+  className,
+  type,
+  onBlur,
+  maxLength,
+  placeholder,
+  disabled,
+  checked,
+}: InputProps) {
+  return (
+    <input
+      type={type}
+      className="py-2 px-3 block w-full border-2 border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
+      value={value}
+      onChange={(e) =>
+        type === "checkbox"
+          ? setValue(String(e.target.checked))
+          : setValue(e.target.value)
+      }
+      disabled={disabled}
+      onBlur={onBlur}
+      maxLength={maxLength}
+      placeholder={placeholder}
+      checked={checked}
+    />
+  );
+}

package/src/component/inputs/LabeledMutliSelect.tsx

@@ -0,0 +1,15 @@
+import Input, { InputProps } from "./Input";
+import MultiSelect, { MultiSelectProps } from "./MultiSelect";
+
+type Props = {
+  label: string;
+} & MultiSelectProps;
+
+export default function LabeledMutliSelect({ label, ...inputprops }: Props) {
+  return (
+    <div className="w-full">
+      <label className="block text-sm font-bold mb-1">{label}</label>
+      <MultiSelect {...inputprops} />
+    </div>
+  );
+}

package/src/component/inputs/LableledInput.tsx

@@ -0,0 +1,14 @@
+import Input, { InputProps } from "./Input";
+
+type Props = {
+  label: string;
+} & InputProps;
+
+export default function LabeledInput({ label, ...inputProps }: Props) {
+  return (
+    <div className="w-full">
+      <label className="block text-sm font-bold mb-1">{label}</label>
+      <Input {...inputProps} />
+    </div>
+  );
+}

package/src/component/inputs/LableledSelect.tsx

@@ -0,0 +1,14 @@
+import Select, { SelectProps } from "./Select";
+
+type Props = {
+  label: string;
+} & SelectProps;
+
+export default function LabeledSelect({ label, ...inputProps }: Props) {
+  return (
+    <div className="w-full">
+      <label className="block text-sm font-bold mb-1">{label}</label>
+      <Select {...inputProps} />
+    </div>
+  );
+}

package/src/component/inputs/MultiSelect.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+
+export type MultiSelectProps = {
+  options: string[];
+  selectedOptions: string[];
+  onChange: (selected: string[]) => void;
+};
+
+const MultiSelect: React.FC<MultiSelectProps> = ({
+  options,
+  selectedOptions,
+  onChange,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [filter, setFilter] = useState("");
+
+  const toggleDropdown = () => setIsOpen(!isOpen);
+
+  const handleOptionClick = (option: string) => {
+    if (selectedOptions.includes(option)) {
+      onChange(selectedOptions.filter((selected) => selected !== option));
+    } else {
+      onChange([...selectedOptions, option]);
+    }
+  };
+  console.log(selectedOptions);
+  const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFilter(e.target.value);
+  };
+
+  const filteredOptions = options.filter((option) =>
+    option.toLowerCase().includes(filter.toLowerCase()),
+  );
+
+  return (
+    <div className="relative inline-block w-full">
+      <div
+        className="py-2 px-3 bg-white block w-full border-2 border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
+        onClick={toggleDropdown}
+      >
+        {Array.isArray(selectedOptions) && selectedOptions.length > 0 ? (
+          selectedOptions.map((option) => (
+            <span
+              key={option}
+              className="mr-1 inline-block rounded-full bg-secondary-blue px-2 py-1 text-sm text-white-shade"
+            >
+              {option}
+            </span>
+          ))
+        ) : (
+          <span className="text-placeholder-gray">Select options</span>
+        )}
+      </div>
+      {isOpen && (
+        <div className="absolute left-0 right-0 z-10 mt-2 rounded-md border border-secondary-gray bg-white-shade">
+          <input
+            type="text"
+            className="w-full border-b border-secondary-gray p-2"
+            placeholder="Filter options..."
+            value={filter}
+            onChange={handleFilterChange}
+          />
+          <div className="max-h-60 overflow-y-auto">
+            {filteredOptions.map((option) => (
+              <div
+                key={option}
+                className="cursor-pointer p-2 hover:bg-primary-gray"
+                onClick={() => handleOptionClick(option)}
+              >
+                <input
+                  type="checkbox"
+                  checked={selectedOptions.includes(option)}
+                  readOnly
+                  className="mr-2"
+                />
+                <span className="ml-2">{option}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MultiSelect;

package/src/component/inputs/Select.tsx

@@ -0,0 +1,28 @@
+export type SelectProps = {
+  options: string[];
+  selected: string;
+  setSelected: (s: string) => void;
+  canDefault?: boolean;
+};
+
+export default function Select({
+  options,
+  selected,
+  setSelected,
+  canDefault,
+}: SelectProps) {
+  return (
+    <select
+      value={selected || ""}
+      onChange={(e) => setSelected(e.target.value)}
+      className="py-2 px-3 bg-white block w-full border-2 border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
+    >
+      <option value="" disabled={!canDefault} hidden={!canDefault}>
+        selection
+      </option>
+      {options.map((opt) => (
+        <option value={opt}>{opt}</option>
+      ))}
+    </select>
+  );
+}

package/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/index.tsx

@@ -0,0 +1,6 @@
+import "./index.css";
+
+export * from "./component/ComponentDisplayer";
+export * from "./component/ShowAttr";
+
+export * from "./util/type";