feat(meter): ✨ finish meter component

src/circular-progress/stories/CircularProgressBasic.component.tsx

@@ -9,7 +9,7 @@ export const CircularProgressBasic: React.FC<
 > = props => {
   return (
     <div className="flex flex-col items-center">
-      <CircularProgress value={50} {...props} />
+      <CircularProgress {...props} />
     </div>
   );
 };

src/circular-progress/stories/CircularProgressBasic.stories.tsx

@@ -24,7 +24,7 @@ export default {
 } as Meta;
 
 export const Default: Story = {
-  args: { size: "md", themeColor: "base" },
+  args: { size: "md", themeColor: "base", value: 50 },
 };
 
 export const Small: Story = {

src/meter/MeterBar.tsx

@@ -12,12 +12,26 @@ import { cx } from "../utils";
 import { MeterUIProps } from "./MeterProps";
 
 export const useMeterBar = createHook<MeterBarOptions>(
-  ({ state, size, intervals, flatBorders, label, hint, ...props }) => {
-    console.log("%cstate", "color: #408059", state);
+  ({
+    state,
+    size,
+    themeColor,
+    intervals,
+    flatBorders,
+    label,
+    hint,
+    ...props
+  }) => {
     const theme = useTheme("meter");
     const className = cx(
-      theme.bar.common,
-      flatBorders ? theme.bar.flatBorders : "",
+      theme.bar,
+      size
+        ? cx(
+            theme.size[size]?.bar.base,
+            !flatBorders ? theme.size[size]?.bar.roundedBorders : "",
+          )
+        : "",
+      themeColor ? theme.themeColor[themeColor]?.bar : "",
       props.className,
     );
     const style = { width: `${state?.percent}%`, ...props.style };

src/meter/MeterBarWrapper.tsx

@@ -12,10 +12,20 @@ import { cx } from "../utils";
 import { MeterUIProps } from "./MeterProps";
 
 export const useMeterBarWrapper = createHook<MeterBarWrapperOptions>(
-  ({ state, size, intervals, flatBorders, label, hint, ...props }) => {
+  ({
+    state,
+    size,
+    themeColor,
+    intervals,
+    flatBorders,
+    label,
+    hint,
+    ...props
+  }) => {
     const theme = useTheme("meter");
     const className = cx(
-      theme.barWrapper.common,
+      theme.barWrapper.base,
+      size ? theme.size[size]?.barWrapper : "",
       flatBorders ? theme.barWrapper.flatBorders : "",
       props.className,
     );

src/meter/MeterHint.tsx

@@ -12,11 +12,21 @@ import { cx } from "../utils";
 import { MeterUIProps } from "./MeterProps";
 
 export const useMeterHint = createHook<MeterHintOptions>(
-  ({ state, size, intervals, flatBorders, label, hint, ...props }) => {
+  ({
+    state,
+    size,
+    themeColor,
+    intervals,
+    flatBorders,
+    label,
+    hint,
+    ...props
+  }) => {
     const theme = useTheme("meter");
     const className = cx(
-      theme.hint.common,
-      size ? theme.hint.size[size] : "",
+      theme.hint,
+      size ? theme.size[size]?.hint : "",
+      themeColor ? theme.themeColor[themeColor]?.hint : "",
       props.className,
     );
 

src/meter/MeterLabel.tsx

@@ -12,11 +12,21 @@ import { tcm } from "../utils";
 import { MeterUIProps } from "./MeterProps";
 
 export const useMeterLabel = createHook<MeterLabelOptions>(
-  ({ state, size, intervals, flatBorders, label, hint, ...props }) => {
+  ({
+    state,
+    size,
+    themeColor,
+    intervals,
+    flatBorders,
+    label,
+    hint,
+    ...props
+  }) => {
     const theme = useTheme("meter");
     const className = tcm(
-      theme.label.common,
-      size ? theme.label.size[size] : "",
+      theme.label,
+      size ? theme.size[size]?.label : "",
+      themeColor ? theme.themeColor[themeColor]?.label : "",
       props.className,
     );
 

src/meter/MeterProps.ts

@@ -30,6 +30,7 @@ export function useMeterProps(props: MeterProps): MeterPropsReturn {
     min,
     max,
     size,
+    themeColor,
     intervals,
     flatBorders,
     label,
@@ -44,6 +45,7 @@ export function useMeterProps(props: MeterProps): MeterPropsReturn {
   });
   const uiState = useMeterUIState({
     size,
+    themeColor,
     flatBorders,
     intervals,
     label,
@@ -98,7 +100,7 @@ export function useMeterProps(props: MeterProps): MeterPropsReturn {
 
   const hintProps: MeterHintProps = {
     ...uiProps,
-    ...componentProps.trackProps,
+    ...componentProps.hintProps,
     children: runIfFn(_hint, uiProps),
   };
 

src/meter/MeterTrack.tsx

@@ -12,11 +12,22 @@ import { cx } from "../utils";
 import { MeterUIProps } from "./MeterProps";
 
 export const useMeterTrack = createHook<MeterTrackOptions>(
-  ({ state, size, intervals, flatBorders, label, hint, ...props }) => {
+  ({
+    state,
+    size,
+    themeColor,
+    intervals,
+    flatBorders,
+    label,
+    hint,
+    ...props
+  }) => {
     const theme = useTheme("meter");
     const className = cx(
-      theme.track.common,
-      size ? theme.track.size[size] : "",
+      theme.track,
+      size ? theme.size[size]?.track : "",
+      // flatBorders ? theme.bar.flatBorders : "",
+      themeColor ? theme.themeColor[themeColor]?.track : "",
       props.className,
     );
 

src/meter/MeterUIState.ts

@@ -3,10 +3,18 @@ import { RenderProp } from "../utils";
 import { MeterUIProps } from "./MeterProps";
 
 export const useMeterUIState = (props: MeterUIStateProps): MeterUIState => {
-  const { size = "md", intervals = 1, flatBorders = true, label, hint } = props;
+  const {
+    size = "md",
+    themeColor = "base",
+    intervals = 1,
+    flatBorders = true,
+    label,
+    hint,
+  } = props;
 
   return {
     size,
+    themeColor,
     intervals,
     flatBorders: intervals === 1 ? false : flatBorders,
     label,
@@ -20,7 +28,14 @@ export type MeterUIState = {
    *
    * @default md
    */
-  size: keyof AdaptUI.GetThemeValue<"meter", "track", "size">;
+  size: keyof AdaptUI.GetThemeValue<"meter", "size">;
+
+  /**
+   * How the progress should be themed?
+   *
+   * @default base
+   */
+  themeColor: keyof AdaptUI.GetThemeValue<"meter", "themeColor">;
 
   /**
    * No of intervals for the meter.
@@ -46,5 +61,8 @@ export type MeterUIState = {
 };
 
 export type MeterUIStateProps = Partial<
-  Pick<MeterUIState, "size" | "intervals" | "flatBorders" | "label" | "hint">
+  Pick<
+    MeterUIState,
+    "size" | "intervals" | "flatBorders" | "label" | "hint" | "themeColor"
+  >
 > & {};

src/meter/MeterWrapper.tsx

@@ -13,7 +13,16 @@ import { tcm } from "../utils";
 import { MeterUIProps } from "./MeterProps";
 
 export const useMeterWrapper = createHook<MeterWrapperOptions>(
-  ({ state, size, intervals, flatBorders, label, hint, ...props }) => {
+  ({
+    state,
+    size,
+    themeColor,
+    intervals,
+    flatBorders,
+    label,
+    hint,
+    ...props
+  }) => {
     const theme = useTheme("meter");
     const className = tcm(theme.wrapper, props.className);
 

src/meter/stories/MeterBasic.component.tsx

@@ -1,52 +1,15 @@
 import * as React from "react";
 
-import { Button, Meter, MeterProps } from "../../index";
+import { Meter, MeterProps } from "../../index";
 
 export type MeterBasicProps = MeterProps & {};
 
 export const MeterBasic: React.FC<MeterBasicProps> = props => {
-  const [value, setValue] = useMeterState();
-
   return (
     <div className="w-80">
-      <Meter value={value} max={100} {...props} />
-      <ActionButtons setValue={setValue} />
+      <Meter {...props} />
     </div>
   );
 };
 
 export default MeterBasic;
-
-const useMeterState = (initialValue: number = 0) => {
-  const [value, setValue] = React.useState<number>(initialValue);
-
-  React.useEffect(() => {
-    const clearId = setInterval(() => {
-      setValue(prevValue => {
-        return prevValue + 50;
-      });
-    }, 500);
-
-    if (value === 100) {
-      clearInterval(clearId);
-    }
-
-    return () => {
-      clearInterval(clearId);
-    };
-  }, [setValue, value]);
-
-  return [value, setValue] as const;
-};
-
-const ActionButtons: React.FC<{
-  setValue: React.Dispatch<React.SetStateAction<number>>;
-}> = ({ setValue }) => {
-  return (
-    <>
-      <Button type="reset" className="mt-2 block" onClick={() => setValue(0)}>
-        Restart Meter
-      </Button>
-    </>
-  );
-};

src/meter/stories/MeterBasic.stories.tsx

@@ -1,9 +1,6 @@
 import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
 
-import {
-  createPreviewTabs,
-  createUnionControl,
-} from "../../../.storybook/utils";
+import { createControls, createPreviewTabs } from "../../../.storybook/utils";
 
 import js from "./templates/MeterBasicJsx";
 import ts from "./templates/MeterBasicTsx";
@@ -15,17 +12,65 @@ type Story = ComponentStoryObj<typeof MeterBasic>;
 export default {
   title: "Feedback/Meter/Basic",
   component: MeterBasic,
-  argTypes: {
-    size: createUnionControl(["sm", "md", "lg", "xl"]),
-  },
+  argTypes: createControls("meter", {
+    ignore: ["wrapElement", "as", "ref", "label", "hint"],
+  }),
   parameters: {
     layout: "centered",
     options: { showPanel: true },
     preview: createPreviewTabs({ js, ts }),
   },
 } as Meta;
 
-export const Small: Story = { args: { size: "sm" } };
-export const Medium: Story = { args: { size: "md" } };
-export const Large: Story = { args: { size: "lg" } };
-export const ExtraLarge: Story = { args: { size: "xl" } };
+export const Default: Story = {
+  args: { size: "md", themeColor: "base", max: 100, value: 50 },
+};
+
+export const Small: Story = {
+  ...Default,
+  args: { ...Default.args, size: "sm" },
+};
+export const Medium: Story = { ...Default };
+export const Large: Story = {
+  ...Default,
+  args: { ...Default.args, size: "lg" },
+};
+export const ExtraLarge: Story = {
+  ...Default,
+  args: { ...Default.args, size: "xl" },
+};
+
+export const Base: Story = {
+  ...Default,
+  args: { ...Default.args, themeColor: "base" },
+};
+export const Primary: Story = {
+  ...Default,
+  args: { ...Default.args, themeColor: "primary" },
+};
+
+export const Label: Story = {
+  ...Default,
+  args: { ...Default.args, label: "Meter" },
+};
+
+export const Hint: Story = {
+  ...Default,
+  args: { ...Default.args, label: "Meter", hint: "50%" },
+};
+
+export const Intervals: Story = {
+  ...Default,
+  args: { ...Default.args, label: "Meter", hint: "50%", intervals: 2 },
+};
+
+export const RoundedBorders: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    label: "Meter",
+    hint: "50%",
+    intervals: 4,
+    flatBorders: false,
+  },
+};