Merge pull request #9 from gisce/add-json-checkbox-group

Add a new widget JSONCheckbox

src/components/widgets/JSONCheckbox/JSONCheckbox.stories.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { StoryFn, Meta } from "@storybook/react";
+import { JSONCheckbox } from ".";
+
+export default {
+  title: "Work in progress/Widgets/JSONCheckbox/JSONCheckbox",
+  component: JSONCheckbox,
+} as Meta<typeof JSONCheckbox>;
+
+const Template: StoryFn<typeof JSONCheckbox> = (args: any) => (
+  <JSONCheckbox {...args} onChange={(value) => console.log("value", value)} />
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  value: { option_1: false, option_2: true, option_3: false },
+};
+
+export const ReadOnly = Template.bind({});
+ReadOnly.args = {
+  value: { option_1: false, option_2: true, option_3: false },
+  readOnly: true,
+};

src/components/widgets/JSONCheckbox/JSONCheckbox.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import { BaseFieldProps } from "@/components/form";
+import { Checkbox } from "antd";
+
+const humanizeLabel = (key: string): string => {
+  return (
+    key
+      // Reemplaça guions baixos i guions amb espais
+      .replace(/[_-]+/g, " ")
+      // Converteix a majúscules la primera lletra de cada paraula
+      .split(" ")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" ")
+  );
+};
+
+export const JSONCheckbox = (
+  props: BaseFieldProps<Record<string, boolean>>,
+) => {
+  const { readOnly } = props;
+  const [values, setValues] = useState(props.value || {});
+
+  const handleChange = (key: string) => {
+    const newValues = {
+      ...values,
+      [key]: !values[key],
+    };
+    setValues(newValues);
+    if (props.onChange) {
+      props.onChange(newValues);
+    }
+  };
+
+  return (
+    <div>
+      {Object.keys(values).map((key) => (
+        <Checkbox
+          disabled={readOnly}
+          key={key}
+          checked={values[key]}
+          onChange={() => handleChange(key)}
+        >
+          {humanizeLabel(key)}
+        </Checkbox>
+      ))}
+    </div>
+  );
+};

src/components/widgets/JSONCheckbox/index.ts

@@ -0,0 +1 @@
+export * from "./JSONCheckbox";