From d66932482a7d98d8dc7a470a97625cda594207dd Mon Sep 17 00:00:00 2001
From: Eduard Carrerars <ecarreras@gisce.net>
Date: Fri, 3 May 2024 18:07:53 +0200
Subject: [PATCH] feat(jsoncheckbox): new widget jsoncheckbox

---
 .../JSONCheckbox/JSONCheckbox.stories.tsx     | 23 +++++++++
 .../widgets/JSONCheckbox/JSONCheckbox.tsx     | 48 +++++++++++++++++++
 src/components/widgets/JSONCheckbox/index.ts  |  1 +
 3 files changed, 72 insertions(+)
 create mode 100644 src/components/widgets/JSONCheckbox/JSONCheckbox.stories.tsx
 create mode 100644 src/components/widgets/JSONCheckbox/JSONCheckbox.tsx
 create mode 100644 src/components/widgets/JSONCheckbox/index.ts

diff --git a/src/components/widgets/JSONCheckbox/JSONCheckbox.stories.tsx b/src/components/widgets/JSONCheckbox/JSONCheckbox.stories.tsx
new file mode 100644
index 0000000..00f2395
--- /dev/null
+++ b/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,
+};
diff --git a/src/components/widgets/JSONCheckbox/JSONCheckbox.tsx b/src/components/widgets/JSONCheckbox/JSONCheckbox.tsx
new file mode 100644
index 0000000..f92ea01
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/widgets/JSONCheckbox/index.ts b/src/components/widgets/JSONCheckbox/index.ts
new file mode 100644
index 0000000..a08b7df
--- /dev/null
+++ b/src/components/widgets/JSONCheckbox/index.ts
@@ -0,0 +1 @@
+export * from "./JSONCheckbox";