22392: Added additional PropertyLabels, MINOR (#76)

src/components/DataDisplay/LocaleNumber/LocaleNumber.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { LocaleNumber } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<typeof LocaleNumber> = {
+  component: LocaleNumber,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ["autodocs"],
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered",
+  },
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+  args: {
+    loading: false,
+    value: 300_452,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof LocaleNumber>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Default: Story = {
+  // More on args: https://storybook.js.org/docs/react/writing-stories/args
+  args: {
+    value: 300_452,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+  },
+};
+
+export const NullOrUndefined: Story = {
+  args: {
+    value: undefined,
+  },
+};

src/components/DataDisplay/LocaleNumber/LocaleNumber.tsx

@@ -0,0 +1,39 @@
+import { FC, ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+import { Skeleton, SkeletonProps } from "../../Feedback";
+
+export type LocaleNumberProps = {
+  /** A value to be displayed if no value is present when not loading */
+  defaultValue?: ReactNode;
+  /** Defaults to { maximumFractionDigits: 3 } */
+  formatter?: Intl.NumberFormat;
+  loading?: boolean;
+  skeleton?: SkeletonProps;
+  value: number | null | undefined;
+};
+export const LocaleNumber: FC<LocaleNumberProps> = ({
+  defaultValue = "-",
+  formatter = defaultIntlNumberFormatter,
+  loading = false,
+  skeleton,
+  value,
+}) => {
+  if (loading) {
+    return (
+      <Skeleton
+        variant="text"
+        className={twMerge("w-28", skeleton?.className)}
+      />
+    );
+  }
+
+  if (value === undefined || value === null) {
+    return defaultValue;
+  }
+
+  return formatter.format(value);
+};
+
+export const defaultIntlNumberFormatter = new Intl.NumberFormat(undefined, {
+  maximumFractionDigits: 3,
+});

src/components/DataDisplay/LocaleNumber/index.ts

@@ -0,0 +1 @@
+export * from "./LocaleNumber";

src/components/DataDisplay/PropertyLabels/FeaturesLabel.tsx

@@ -0,0 +1,6 @@
+import type { FC } from "react";
+import { PropertyLabel, type PropertyLabelProps } from "./PropertyLabel";
+
+export const FeaturesLabel: FC<Omit<PropertyLabelProps, "property">> = (
+  props,
+) => <PropertyLabel {...props} property={"features"} />;

src/components/DataDisplay/PropertyLabels/i18n.ts

@@ -10,6 +10,8 @@ const en = {
   createdAt: "Created at",
   createdBy: "Created by",
   duration: "Duration",
+  feature: "Feature",
+  features: "Features",
   updatedAt: "Updated at",
   updatedBy: "Updated by",
   startedAt: "Started at",
@@ -21,6 +23,7 @@ const en = {
   name: "Name",
   id: "Id",
   status: "Status",
+  timeSeries: "Time series",
   uptime: "Uptime",
 };
 

src/components/DataDisplay/PropertyLabels/index.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { IconBaseProps } from "react-icons";
 import {
   CreatedAtLabel,
   CreatedByLabel,
@@ -14,8 +13,8 @@ import {
   StatusLabel,
   UpdatedAtLabel,
   UpdatedByLabel,
+  UptimeLabel,
 } from ".";
-import { UptimeLabel } from "./UptimeLabel";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta: Meta<PropertyLabelProps> = {
@@ -31,6 +30,15 @@ const meta: Meta<PropertyLabelProps> = {
   args: {
     className: "",
   },
+};
+
+export default meta;
+type Story = StoryObj<PropertyLabelProps>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Default: Story = {
+  // More on args: https://storybook.js.org/docs/react/writing-stories/args
+  args: {},
   render: (args) => (
     <div className="flex flex-col gap-1">
       <CreatedAtLabel {...args} />
@@ -49,12 +57,3 @@ const meta: Meta<PropertyLabelProps> = {
     </div>
   ),
 };
-
-export default meta;
-type Story = StoryObj<IconBaseProps>;
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-export const Default: Story = {
-  // More on args: https://storybook.js.org/docs/react/writing-stories/args
-  args: {},
-};

src/components/DataDisplay/index.ts

@@ -15,6 +15,7 @@ export * from "./DateDiff";
 export * from "./DateLong";
 export * from "./DateShort";
 export * from "./DateTimeShort";
+export * from "./LocaleNumber";
 export * from "./PropertyLabels";
 export * from "./TableHeadCell";