chore: add Timezone Select in storybook (CALCOM-10760) (#10966)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>

packages/ui/components/form/timezone-select/timezoneSelect.stories.mdx

@@ -0,0 +1,83 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
+import {
+  CustomArgsTable,
+  Examples,
+  Example,
+  Title,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+import { StorybookTrpcProvider } from "../../mocks/trpc";
+import { TimezoneSelect } from "./TimezoneSelect";
+
+<Meta title="UI/Form/TimezoneSelect" component={TimezoneSelect} />
+
+<Title title="TimezoneSelect" suffix="Brief" subtitle="Version 1.0 — Last Update: 25 Aug 2023" />
+
+## Definition
+
+The `TimezoneSelect` component is used to display timezone options.
+
+## Structure
+
+The `TimezoneSelect` component can be used to display timezone options.
+
+<CustomArgsTable of={TimezoneSelect} />
+
+## Examples
+
+<Examples title="TimezoneSelect">
+  <Example title="Default">
+    <StorybookTrpcProvider>
+      <TimezoneSelect value="Africa/Douala" />
+    </StorybookTrpcProvider>
+  </Example>
+  <Example title="Disabled">
+    <StorybookTrpcProvider>
+      <TimezoneSelect value="Africa/Douala" isDisabled />
+    </StorybookTrpcProvider>
+  </Example>
+</Examples>
+
+## TimezoneSelect Story
+
+<Canvas>
+  <Story
+    name="TimezoneSelect"
+    args={{
+      className: "mt-24",
+      value: "Africa/Douala",
+      variant: "default",
+      isDisabled: false,
+      timezones: {
+        "Timezone 1": "City 1",
+        "Timezone 2": "City 2",
+        "Timezone 3": "City 3",
+      },
+      isLoading: false,
+    }}
+    argTypes={{
+      value: {
+        control: { disable: true },
+      },
+      variant: {
+        control: {
+          type: "inline-radio",
+          options: ["default", "minimal"],
+        },
+      },
+    }}>
+    {(args) => (
+      <VariantsTable titles={["Default"]} columnMinWidth={350}>
+        <VariantRow>
+          <StorybookTrpcProvider>
+            <TimezoneSelect {...args} />
+          </StorybookTrpcProvider>
+        </VariantRow>
+      </VariantsTable>
+    )}
+  </Story>
+</Canvas>

packages/ui/components/mocks/trpc.tsx

@@ -0,0 +1,25 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState, type PropsWithChildren } from "react";
+
+import { httpBatchLink } from "@calcom/trpc";
+import type { AppRouter } from "@calcom/trpc/server/routers/_app";
+
+import { createTRPCReact } from "@trpc/react-query";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const mockedTrpc: any = createTRPCReact<AppRouter>();
+export const StorybookTrpcProvider = ({ children }: PropsWithChildren) => {
+  const [queryClient] = useState(new QueryClient({ defaultOptions: { queries: { staleTime: Infinity } } }));
+
+  const [trpcClient] = useState(() =>
+    mockedTrpc.createClient({
+      links: [httpBatchLink({ url: "" })],
+    })
+  );
+
+  return (
+    <mockedTrpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </mockedTrpc.Provider>
+  );
+};