Add a story for QuantityFormatSettingsPage component (#1206)

* Fix import attributes error.

* Add story for QuantityFormatSettingsPage

docs/storybook/src/components/QuantityFormat.stories.tsx

@@ -0,0 +1,28 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import type { Meta, StoryObj } from "@storybook/react";
+import { QuantityType } from "@itwin/core-frontend";
+import { AppUiDecorator, InitializerDecorator } from "../Decorators";
+import { enumArgType } from "../Utils";
+import { QuantityFormatStory } from "./QuantityFormat";
+
+const meta = {
+  title: "Components/QuantityFormat",
+  component: QuantityFormatStory,
+  tags: ["autodocs"],
+  decorators: [AppUiDecorator, InitializerDecorator],
+  args: {
+    initialQuantityType: QuantityType.Length,
+    availableUnitSystems: ["metric", "imperial", "usCustomary", "usSurvey"],
+  },
+  argTypes: {
+    initialQuantityType: enumArgType(QuantityType),
+  },
+} satisfies Meta<typeof QuantityFormatStory>;
+
+export default meta;
+type Story = StoryObj<typeof QuantityFormatStory>;
+
+export const Default: Story = {};

docs/storybook/src/components/QuantityFormat.tsx

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { QuantityFormatSettingsPage } from "@itwin/appui-react";
+import { UnitSystemKey } from "@itwin/core-quantity";
+
+type QuantityFormatSettingsPageProps = React.ComponentProps<
+  typeof QuantityFormatSettingsPage
+>;
+interface QuantityFormatStoryProps
+  extends Omit<QuantityFormatSettingsPageProps, "availableUnitSystems"> {
+  availableUnitSystems: UnitSystemKey[];
+}
+
+export function QuantityFormatStory(props: QuantityFormatStoryProps) {
+  const { availableUnitSystems, ...rest } = props;
+
+  return (
+    <QuantityFormatSettingsPage
+      key={rest.initialQuantityType}
+      availableUnitSystems={new Set(availableUnitSystems)}
+      {...rest}
+    />
+  );
+}

docs/storybook/vite.config.ts

@@ -37,7 +37,13 @@ export default defineConfig({
     },
   },
   plugins: [
-    react(),
+    react({
+      babel: {
+        generatorOpts: {
+          importAttributesKeyword: "with",
+        },
+      },
+    }),
     fixedViteCommonjs({
       include: ["@itwin/core-frontend"],
     }),