datastake-daf 0.6.168 → 0.6.170

package/src/@daf/core/components/Icon/CustomIcon.stories.js

@@ -8,204 +8,202 @@ import { copyToClipboard } from "../../../../helpers/copyToClipboard";
 const configKeys = Object.keys(config);
 
 const groupIconsByTag = () => {
-	const groupedIcons = {};
+  const groupedIcons = {};
 
-	configKeys.forEach((iconName) => {
-		const iconConfig = config[iconName];
-		const tags = iconConfig.tag || ["other"];
+  configKeys.forEach((iconName) => {
+    const iconConfig = config[iconName];
+    const tags = iconConfig.tag || ["other"];
 
-		tags.forEach((tag) => {
-			if (!groupedIcons[tag]) {
-				groupedIcons[tag] = [];
-			}
-			groupedIcons[tag].push(iconName);
-		});
-	});
+    tags.forEach((tag) => {
+      if (!groupedIcons[tag]) {
+        groupedIcons[tag] = [];
+      }
+      groupedIcons[tag].push(iconName);
+    });
+  });
 
-	return groupedIcons;
+  return groupedIcons;
 };
 
 const groupedIcons = groupIconsByTag();
 
 const groupOptions = Object.keys(groupedIcons).map((tag) => ({
-	label:
-		tag === "other" ? "General Icons" : `${tag.charAt(0).toUpperCase() + tag.slice(1)} Icons`,
-	value: tag,
+  label:
+    tag === "other"
+      ? "General Icons"
+      : `${tag.charAt(0).toUpperCase() + tag.slice(1)} Icons`,
+  value: tag,
 }));
 
 export default {
-	title: "Core/Icon",
-	component: CustomIcon,
+  title: "Components/Icon",
+  component: CustomIcon,
 
-	decorators: [
-		() => {
-			const [selectedGroups, setSelectedGroups] = useState([]);
-			const [copiedIcon, setCopiedIcon] = useState(null);
+  decorators: [
+    () => {
+      const [selectedGroups, setSelectedGroups] = useState([]);
+      const [copiedIcon, setCopiedIcon] = useState(null);
 
-			const handleGroupSelectionChange = (selectedValues) => {
-				setSelectedGroups(selectedValues);
-			};
+      const handleGroupSelectionChange = (selectedValues) => {
+        setSelectedGroups(selectedValues);
+      };
 
-			const handleIconClick = (iconName) => {
-				const tempInput = document.createElement("input");
-				tempInput.value = iconName;
-				tempInput.id = "temp-copy-input";
-				tempInput.style.position = "absolute";
-				tempInput.style.left = "-9999px";
-				document.body.appendChild(tempInput);
+      const handleIconClick = (iconName) => {
+        const tempInput = document.createElement("input");
+        tempInput.value = iconName;
+        tempInput.id = "temp-copy-input";
+        tempInput.style.position = "absolute";
+        tempInput.style.left = "-9999px";
+        document.body.appendChild(tempInput);
 
-				const success = copyToClipboard("temp-copy-input");
-				document.body.removeChild(tempInput);
+        const success = copyToClipboard("temp-copy-input");
+        document.body.removeChild(tempInput);
 
-				if (success) {
-					setCopiedIcon(iconName);
-					setTimeout(() => setCopiedIcon(null), 2000);
-				}
-			};
+        if (success) {
+          setCopiedIcon(iconName);
+          setTimeout(() => setCopiedIcon(null), 2000);
+        }
+      };
 
-			const filteredGroupedIcons = {};
-			Object.entries(groupedIcons).forEach(([tag, icons]) => {
-				if (selectedGroups.length === 0 || selectedGroups.includes(tag)) {
-					filteredGroupedIcons[tag] = icons;
-				}
-			});
+      const filteredGroupedIcons = {};
+      Object.entries(groupedIcons).forEach(([tag, icons]) => {
+        if (selectedGroups.length === 0 || selectedGroups.includes(tag)) {
+          filteredGroupedIcons[tag] = icons;
+        }
+      });
 
-			return (
-				<div style={{ margin: "3em" }}>
-					<ThemeLayout>
-						<div style={{ marginBottom: 30 }}>
-							<h3 style={{ marginBottom: 15, fontSize: "1.1rem", fontWeight: "500" }}>
-								Filter Icon Groups
-							</h3>
-							<Multiselect
-								options={groupOptions}
-								defaultSelected={selectedGroups}
-								onChange={handleGroupSelectionChange}
-								textWhenMultiple={`${selectedGroups.length} groups selected`}
-								withCount={true}
-								placeholder="Select icon groups to display (leave empty to show all)..."
-								style={{ width: "100%" }}
-								showSearch={true}
-								selectionType="checkbox"
-							/>
-						</div>
-						<div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
-							{Object.entries(filteredGroupedIcons).map(([tag, icons]) => (
-								<div key={tag}>
-									<h2
-										style={{
-											marginBottom: 20,
-											padding: "10px 0",
-											borderBottom: "2px solid #e0e0e0",
-											textTransform: "capitalize",
-											fontSize: "1.5rem",
-											fontWeight: "600",
-										}}
-									>
-										{tag === "other" ? "General Icons" : `${tag} Icons`}
-									</h2>
-									<div
-										style={{
-											display: "grid",
-											gridTemplateColumns:
-												"repeat(auto-fill, minmax(120px, 1fr))",
-											gap: 20,
-										}}
-									>
-										{icons.map((iconName) => (
-											<div
-												key={iconName}
-												onClick={() => handleIconClick(iconName)}
-												style={{
-													display: "flex",
-													flexDirection: "column",
-													alignItems: "center",
-													padding: "15px",
-													border: "1px solid #f0f0f0",
-													borderRadius: "8px",
-													backgroundColor:
-														copiedIcon === iconName
-															? "#e8f5e8"
-															: "#fafafa",
-													cursor: "pointer",
-													transition: "all 0.2s ease",
-													position: "relative",
-												}}
-											>
-												<div
-													style={{
-														display: "flex",
-														justifyContent: "center",
-														alignItems: "center",
-														width: "45px",
-														height: "45px",
-														marginBottom: 8,
-													}}
-												>
-													<CustomIcon
-														name={iconName}
-														size={28}
-														color="black"
-													/>
-												</div>
-												<p
-													style={{
-														textAlign: "center",
-														fontSize: "0.8rem",
-														margin: 0,
-														wordBreak: "break-word",
-														lineHeight: "1.2",
-														color:
-															copiedIcon === iconName
-																? "#4CAF50"
-																: "inherit",
-														fontWeight:
-															copiedIcon === iconName
-																? "600"
-																: "normal",
-													}}
-												>
-													{iconName}
-												</p>
-												{copiedIcon === iconName && (
-													<div
-														style={{
-															position: "absolute",
-															top: "5px",
-															right: "5px",
-															backgroundColor: "#4CAF50",
-															color: "white",
-															borderRadius: "50%",
-															width: "20px",
-															height: "20px",
-															display: "flex",
-															alignItems: "center",
-															justifyContent: "center",
-															fontSize: "12px",
-														}}
-													>
-														✓
-													</div>
-												)}
-											</div>
-										))}
-									</div>
-								</div>
-							))}
-						</div>
-					</ThemeLayout>
-				</div>
-			);
-		},
-	],
+      return (
+        <div style={{ margin: "3em" }}>
+          <ThemeLayout>
+            <div style={{ marginBottom: 30 }}>
+              <h3
+                style={{
+                  marginBottom: 15,
+                  fontSize: "1.1rem",
+                  fontWeight: "500",
+                }}
+              >
+                Filter Icon Groups
+              </h3>
+              <Multiselect
+                options={groupOptions}
+                defaultSelected={selectedGroups}
+                onChange={handleGroupSelectionChange}
+                textWhenMultiple={`${selectedGroups.length} groups selected`}
+                withCount={true}
+                placeholder="Select icon groups to display (leave empty to show all)..."
+                style={{ width: "100%" }}
+                showSearch={true}
+                selectionType="checkbox"
+              />
+            </div>
+            <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
+              {Object.entries(filteredGroupedIcons).map(([tag, icons]) => (
+                <div key={tag}>
+                  <h2
+                    style={{
+                      marginBottom: 20,
+                      padding: "10px 0",
+                      borderBottom: "2px solid #e0e0e0",
+                      textTransform: "capitalize",
+                      fontSize: "1.5rem",
+                      fontWeight: "600",
+                    }}
+                  >
+                    {tag === "other" ? "General Icons" : `${tag} Icons`}
+                  </h2>
+                  <div
+                    style={{
+                      display: "grid",
+                      gridTemplateColumns:
+                        "repeat(auto-fill, minmax(120px, 1fr))",
+                      gap: 20,
+                    }}
+                  >
+                    {icons.map((iconName) => (
+                      <div
+                        key={iconName}
+                        onClick={() => handleIconClick(iconName)}
+                        style={{
+                          display: "flex",
+                          flexDirection: "column",
+                          alignItems: "center",
+                          padding: "15px",
+                          border: "1px solid #f0f0f0",
+                          borderRadius: "8px",
+                          backgroundColor:
+                            copiedIcon === iconName ? "#e8f5e8" : "#fafafa",
+                          cursor: "pointer",
+                          transition: "all 0.2s ease",
+                          position: "relative",
+                        }}
+                      >
+                        <div
+                          style={{
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            width: "45px",
+                            height: "45px",
+                            marginBottom: 8,
+                          }}
+                        >
+                          <CustomIcon name={iconName} size={28} color="black" />
+                        </div>
+                        <p
+                          style={{
+                            textAlign: "center",
+                            fontSize: "0.8rem",
+                            margin: 0,
+                            wordBreak: "break-word",
+                            lineHeight: "1.2",
+                            color:
+                              copiedIcon === iconName ? "#4CAF50" : "inherit",
+                            fontWeight:
+                              copiedIcon === iconName ? "600" : "normal",
+                          }}
+                        >
+                          {iconName}
+                        </p>
+                        {copiedIcon === iconName && (
+                          <div
+                            style={{
+                              position: "absolute",
+                              top: "5px",
+                              right: "5px",
+                              backgroundColor: "#4CAF50",
+                              color: "white",
+                              borderRadius: "50%",
+                              width: "20px",
+                              height: "20px",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              fontSize: "12px",
+                            }}
+                          >
+                            ✓
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </ThemeLayout>
+        </div>
+      );
+    },
+  ],
 };
 
 export const Primary = {
-	name: "Warning Icon",
-	args: {
-		name: "Warning",
-		fill: "white",
-		width: 20,
-		height: 20,
-	},
+  name: "Warning Icon",
+  args: {
+    name: "Warning",
+    fill: "white",
+    width: 20,
+    height: 20,
+  },
 };

package/src/@daf/core/components/ProgressBar/MultiBarProgress/MultibarProgress.stories.jsx

@@ -2,51 +2,58 @@ import ProgressBar from "./index";
 import ThemeLayout from "../../ThemeLayout";
 
 export default {
-	title: "Core/Progress/MultiBar Progress",
-	component: ProgressBar,
-	tags: ["autodocs"],
-	decorators: [
-		(Story) => (
-			<div style={{ margin: "3em" }}>
-				<ThemeLayout>
-					<Story />
-				</ThemeLayout>
-			</div>
-		),
-	],
+  title: "Components/Progress/MultiBar Progress",
+  component: ProgressBar,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ margin: "3em" }}>
+        <ThemeLayout>
+          <Story />
+        </ThemeLayout>
+      </div>
+    ),
+  ],
 };
 
 export const Primary = {
-	name: "Default",
-	args: {
-		config: [
-			{ percentage: 30, color: "#FF99C3" },
-			{ percentage: 20, color: "#5AD8A6", placement: "bottom" },
-			{ percentage: 10, color: "#F6BD16" },
-		],
-	},
-	render: (args) => (
-		<div>
-			<ProgressBar {...args} />
-		</div>
-	),
+  name: "Default",
+  args: {
+    config: [
+      { percentage: 30, color: "#FF99C3" },
+      { percentage: 20, color: "#5AD8A6", placement: "bottom" },
+      { percentage: 10, color: "#F6BD16" },
+    ],
+  },
+  render: (args) => (
+    <div>
+      <ProgressBar {...args} />
+    </div>
+  ),
 };
 
 export const CustomTooltip = {
-	name: "Custom Tooltip",
-	args: {
-		config: [
-			{ percentage: 30, color: "#FF99C3", tooltipTitle: "Red LABEL" },
-			{ percentage: 20, color: "#5AD8A6", tooltipTitle: "Blue LABEL", placement: "bottom" },
-			{ percentage: 10, color: "#F6BD16", tooltipTitle: "Green LABEL" },
-		],
-		renderTooltip: (item) => (
-			<div style={{ color: item.color }}>{`${item.tooltipTitle} ${item.percentage}%`}</div>
-		),
-	},
-	render: (args) => (
-		<div>
-			<ProgressBar {...args} />
-		</div>
-	),
+  name: "Custom Tooltip",
+  args: {
+    config: [
+      { percentage: 30, color: "#FF99C3", tooltipTitle: "Red LABEL" },
+      {
+        percentage: 20,
+        color: "#5AD8A6",
+        tooltipTitle: "Blue LABEL",
+        placement: "bottom",
+      },
+      { percentage: 10, color: "#F6BD16", tooltipTitle: "Green LABEL" },
+    ],
+    renderTooltip: (item) => (
+      <div
+        style={{ color: item.color }}
+      >{`${item.tooltipTitle} ${item.percentage}%`}</div>
+    ),
+  },
+  render: (args) => (
+    <div>
+      <ProgressBar {...args} />
+    </div>
+  ),
 };

package/src/@daf/core/components/ProgressBar/Progress.stories.jsx

@@ -2,38 +2,38 @@ import ProgressBar from "./index";
 import ThemeLayout from "../ThemeLayout";
 
 export default {
-	title: "Core/Progress/Single Progress Bar",
-	component: ProgressBar,
-	tags: ["autodocs"],
-	args: {
-		percentage: 50,
-		isSubmitted: true,
-	},
-	argTypes: {
-		percentage: {
-			control: {
-				type: "range",
-				min: 0,
-				max: 100,
-			},
-		},
-	},
-	decorators: [
-		(Story) => (
-			<div style={{ margin: "3em" }}>
-				<ThemeLayout>
-					<Story />
-				</ThemeLayout>
-			</div>
-		),
-	],
+  title: "Components/Progress/Single Progress Bar",
+  component: ProgressBar,
+  tags: ["autodocs"],
+  args: {
+    percentage: 50,
+    isSubmitted: true,
+  },
+  argTypes: {
+    percentage: {
+      control: {
+        type: "range",
+        min: 0,
+        max: 100,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ margin: "3em" }}>
+        <ThemeLayout>
+          <Story />
+        </ThemeLayout>
+      </div>
+    ),
+  ],
 };
 
 export const Primary = {
-	name: "Default",
-	render: (args) => (
-		<div>
-			<ProgressBar {...args} />
-		</div>
-	),
+  name: "Default",
+  render: (args) => (
+    <div>
+      <ProgressBar {...args} />
+    </div>
+  ),
 };