#SIKKA-5131[in progress] added gauge and other components

components/elements/Gauge.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { cn } from "../util";
+
+type GaugeType = {
+  value: number; // Value between 0 and 100
+  maxValue: number; // Value between 0 and 100
+  design?: "full-circle" | "half-circle";
+};
+
+export const Gauge: React.FC<GaugeType> = ({
+  value = 0,
+  maxValue = 100,
+  design = "half-circle",
+}) => {
+  const radius = 16;
+  const fullCircumference = 2 * Math.PI * radius; // Full circle circumference
+  const halfCircumference = Math.PI * radius ; // Half circle circumference, updated
+  const percentage = value / maxValue;
+  const fullOffset = fullCircumference - percentage * fullCircumference;
+  const halfOffset = halfCircumference - percentage * halfCircumference; // Updated offset for half-circle
+  const strokeDasharray = percentage * halfCircumference;
+  const strokeDashoffset = halfCircumference * (1 - percentage);
+
+  const FullCircle = () => (
+    <svg className={"hawa-h-36 hawa-w-36"} viewBox="0 0 36 36">
+      <circle
+        cx="18"
+        cy="18"
+        r={radius}
+        strokeWidth="4"
+        stroke="lightgray"
+        fill="none"
+      />
+      <circle
+        cx="18"
+        cy="18"
+        r={radius}
+        strokeWidth="4"
+        stroke="#00f"
+        fill="none"
+        strokeDasharray={fullCircumference}
+        strokeDashoffset={fullOffset}
+        style={{
+          transition: "stroke-dashoffset 0.35s",
+          transform: "rotate(180deg)",
+          transformOrigin: "50% 50%",
+        }}
+      />
+      <text
+        x="50%"
+        y="50%"
+        alignmentBaseline="middle"
+        textAnchor="middle"
+        fontSize="10"
+        fill="#000"
+      >
+        {value}
+      </text>
+    </svg>
+  );
+
+  const HalfCircle = () => (
+    <svg className={"hawa-h-36 hawa-w-36"} viewBox="0 0 36 36">
+    <path
+        d="M 4,18 A 14,14 0 0,1 32,18"
+        strokeWidth="4"
+        stroke="lightgray"
+        fill="none"
+    />
+    <path
+        d="M 4,18 A 14,14 0 0,1 32,18"
+        strokeWidth="4"
+        stroke="#00f"
+        fill="none"
+        strokeDasharray={`${strokeDasharray}`}
+        strokeDashoffset={`${strokeDashoffset}`}
+        style={{
+            transition: "stroke-dashoffset 0.35s",
+            transformOrigin: "50% 50%",
+        }}
+    />
+    <text
+        x="50%"
+        y="45%"
+        alignmentBaseline="middle"
+        textAnchor="middle"
+        fontSize="8"
+        fill="#000"
+    >
+        {value}
+    </text>
+</svg>
+  );
+  return (
+    <div className="hawa-flex hawa-flex-row hawa-gap-x-3">
+      <div aria-label="Gauge" role="status">
+        {design === "full-circle" ? <FullCircle /> : <HalfCircle />}
+      </div>
+    </div>
+  );
+};

components/elements/Loading.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import clsx from "clsx";
+import { cn } from "../util";
 
 type LoadingTypes = {
   /** Specifies the size of the loading component.*/
@@ -34,23 +34,23 @@ export const Loading: FC<LoadingTypes> = ({
       return (
         <div className="hawa-flex hawa-flex-row hawa-gap-2">
           <div
-            className={clsx(
+            className={cn(
               "hawa-animate-bounce hawa-rounded-full hawa-delay-100 hawa-repeat-infinite",
               size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
               animationStyles[design.split("-")[1]],
               color ? color : "hawa-bg-primary"
             )}
           ></div>
           <div
-            className={clsx(
+            className={cn(
               "hawa-animate-bounce hawa-rounded-full hawa-delay-200 hawa-repeat-infinite",
               size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
               animationStyles[design.split("-")[1]],
               color ? color : "hawa-bg-primary"
             )}
           ></div>
           <div
-            className={clsx(
+            className={cn(
               "hawa-animate-bounce hawa-rounded-full hawa-delay-300 hawa-repeat-infinite",
               size === "button" ? "hawa-h-2 hawa-w-2" : sizeStyles[size],
               animationStyles[design.split("-")[1]],
@@ -65,7 +65,7 @@ export const Loading: FC<LoadingTypes> = ({
         <div className="hawa-flex hawa-flex-row hawa-gap-x-3">
           <div aria-label="Loading..." role="status">
             <svg
-              className={clsx(sizeStyles[size], "hawa-animate-spin")}
+              className={cn(sizeStyles[size], "hawa-animate-spin")}
               viewBox="3 3 18 18"
             >
               <path

components/elements/index.tsx

@@ -53,5 +53,7 @@ export * from "./Count";
 export * from "./InterfaceSettings";
 export * from "./Sheet";
 
+export * from "./Gauge";
+
 export * from "./NavigationMenu";
 export * from "./StopPropagationWrapper";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.11.20",
+  "version": "0.12.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {

stories/ElementsStories/Gauge.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Gauge } from "../../components";
+import { ArgsTable, Story, Title } from "@storybook/blocks";
+import { setLocale, t } from "../translations/i18n";
+import { GaugeCircle } from "lucide-react";
+
+const meta = {
+  title: "Elements/Gauge",
+  component: Gauge,
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: () => (
+        <>
+          <h1>{"<Gauge/>"}</h1>
+          <ArgsTable />
+        </>
+      ),
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Gauge>;
+
+export default meta;
+type Story = StoryObj<typeof Gauge>;
+
+const Template = (args: any, globals: any) => {
+  const locale = globals.globals?.locale === "ar" ? "ar" : "en";
+  const direction = locale === "ar" ? "rtl" : "ltr";
+  setLocale(locale);
+
+  return (
+    <div dir={direction} className="hawa-w-full hawa-h-52 ">
+      <Gauge {...args} design="half-circle" />
+      <Gauge {...args} design="full-circle" />
+    </div>
+  );
+};
+export const Default: Story = {
+  render: Template.bind({}),
+};