Refactored information widgets, improve widget-boxed style

Signed-off-by: Denis Papec <denis.papec@gmail.com>

src/components/widgets/widget/container.jsx

@@ -0,0 +1,42 @@
+import classNames from "classnames";
+
+import WidgetIcon from "./widget_icon";
+import PrimaryText from "./primary_text";
+import SecondaryText from "./secondary_text";
+import Raw from "./raw";
+
+export function getAllClasses(options, additionalClassNames = '') {
+  return classNames(
+    "flex flex-col justify-center first:ml-0 ml-4 mr-2",
+    additionalClassNames,
+    options?.style === "boxedWidgets" && " ml-4 mt-2 m:mb-0 rounded-md shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 dark:bg-white/5 p-2 pl-3",
+  );
+}
+
+export function getInnerBlock(children) {
+  // children won't be an array if it's Raw component
+  return Array.isArray(children) && <div className="flex flex-row items-center justify-end">
+    <div className="flex flex-col items-center">{children.find(child => child.type === WidgetIcon)}</div>
+    <div className="flex flex-col ml-3 text-left">
+      <span className="text-theme-800 dark:text-theme-200 text-sm">{children.find(child => child.type === PrimaryText)}</span>
+      <span className="text-theme-800 dark:text-theme-200 text-xs">{children.find(child => child.type === SecondaryText)}</span>
+    </div>
+  </div>;
+}
+
+export function getBottomBlock(children) {
+  if (children.type !== Raw) {
+    return children.find(child => child.type === Raw) || [];
+  }
+
+  return [children];
+}
+
+export default function Container({ children = [], options, additionalClassNames = '' }) {
+  return (
+    <div className={getAllClasses(options, additionalClassNames)}>
+      {getInnerBlock(children)}
+      {getBottomBlock(children)}
+    </div>
+  );
+}

src/components/widgets/widget/container_button.jsx

@@ -0,0 +1,10 @@
+import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
+
+export default function ContainerButton ({ children = [], options, additionalClassNames = '', callback }) {
+  return (
+    <button type="button" onClick={callback} className={getAllClasses(options, additionalClassNames)}>
+      {getInnerBlock(children)}
+      {getBottomBlock(children)}
+    </button>
+  );
+}

src/components/widgets/widget/container_form.jsx

@@ -0,0 +1,10 @@
+import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
+
+export default function ContainerForm ({ children = [], options, additionalClassNames = '', callback }) {
+  return (
+    <form type="button" onSubmit={callback} className={getAllClasses(options, additionalClassNames)}>
+      {getInnerBlock(children)}
+      {getBottomBlock(children)}
+    </form>
+  );
+}

src/components/widgets/widget/container_link.jsx

@@ -0,0 +1,10 @@
+import { getAllClasses, getInnerBlock, getBottomBlock } from "./container";
+
+export default function ContainerLink ({ children = [], options, additionalClassNames = '', target }) {
+  return (
+    <a href={options.url} target={target} className={getAllClasses(options, additionalClassNames)}>
+      {getInnerBlock(children)}
+      {getBottomBlock(children)}
+    </a>
+  );
+}

src/components/widgets/widget/error.jsx

@@ -0,0 +1,15 @@
+import { useTranslation } from "react-i18next";
+import { BiError } from "react-icons/bi";
+
+import Container from "./container";
+import PrimaryText from "./primary_text";
+import WidgetIcon from "./widget_icon";
+
+export default function Error({ options }) {
+  const { t } = useTranslation();
+
+  return <Container options={options}>
+    <PrimaryText>{t("widget.api_error")}</PrimaryText>
+    <WidgetIcon icon={BiError} size="l" />
+  </Container>;
+}

src/components/widgets/widget/primary_text.jsx

@@ -0,0 +1,5 @@
+export default function PrimaryText({ children }) {
+  return (
+    <span className="text-theme-800 dark:text-theme-200 text-sm">{children}</span>
+  );
+}

src/components/widgets/widget/raw.jsx

@@ -0,0 +1,7 @@
+export default function Raw({ children }) {
+  if (children.type === Raw) {
+      return [children];
+  }
+
+  return children;
+}

src/components/widgets/widget/resource_label.jsx

@@ -0,0 +1,5 @@
+export default function ResourceLabel({ children }) {
+  return (
+    <div className="pr-1">{children}</div>
+  );
+}

src/components/widgets/widget/resource_value.jsx

@@ -0,0 +1,5 @@
+export default function ResourceValue({ children }) {
+  return (
+    <div className="pl-0.5">{children}</div>
+  );
+}

src/components/widgets/widget/resources.jsx

@@ -0,0 +1,15 @@
+import ContainerLink from "./container_link";
+import SingleResource from "./single_resource";
+import Raw from "./raw";
+import WidgetLabel from "./widget_label";
+
+export default function Resources({ options, children, target }) {
+  return <ContainerLink options={options} target={target}>
+    <Raw>
+      <div className="flex flex-row self-center flex-wrap justify-between">
+        {children.filter(child => child && child.type === SingleResource)}
+      </div>
+      {children.filter(child => child && child.type === WidgetLabel)}
+    </Raw>
+  </ContainerLink>;
+}

src/components/widgets/widget/secondary_text.jsx

@@ -0,0 +1,5 @@
+export default function SecondaryText({ children }) {
+  return (
+    <span className="text-theme-800 dark:text-theme-200 text-xs">{children}</span>
+  );
+}

src/components/widgets/widget/single_resource.jsx

@@ -0,0 +1,28 @@
+import UsageBar from "../resources/usage-bar";
+
+import WidgetIcon from "./widget_icon";
+import ResourceValue from "./resource_value";
+import ResourceLabel from "./resource_label";
+import Raw from "./raw";
+
+export default function SingleResource({ children, key, expanded = false }) {
+  const values = children.filter(child => child.type === ResourceValue);
+  const labels = children.filter(child => child.type === ResourceLabel);
+
+  return <div key={key} className="flex-none flex flex-row items-center mr-3 py-1.5">
+    {children.find(child => child.type === WidgetIcon)}
+    <div className="flex flex-col ml-3 text-left min-w-[85px]">
+      <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+        {values.pop()}
+        {labels.pop()}
+      </div>
+      { expanded && <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+          {values.pop()}
+          {labels.pop()}
+        </div>
+      }
+      {children.find(child => child.type === UsageBar)}
+    </div>
+    {children.find(child => child.type === Raw)}
+  </div>;
+}

src/components/widgets/widget/widget_icon.jsx

@@ -0,0 +1,18 @@
+export default function WidgetIcon({ icon, size = "s", pulse = false, weatherInfo = {} }) {
+  const Icon = icon;
+  const { condition, timeOfDay } = weatherInfo;
+  let additionalClasses = "text-theme-800 dark:text-theme-200 ";
+
+  switch (size) {
+    case "m": additionalClasses += "w-6 h-6 "; break;
+    case "l": additionalClasses += "w-8 h-8 "; break;
+    case "xl": additionalClasses += "w-10 h-10 "; break;
+    default: additionalClasses += "w-5 h-5 ";
+  }
+
+  if (pulse) {
+    additionalClasses += "animate-pulse ";
+  }
+
+  return <Icon className={additionalClasses} condition={condition} timeOfDay={timeOfDay} />;
+}

src/components/widgets/widget/widget_label.jsx

@@ -0,0 +1,3 @@
+export default function WidgetLabel({ label = "" }) {
+  return <div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{label}</div>
+}