chore: add UnpublishedEntity in storybook (CALCOM-10760) (#10864)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>

apps/storybook/.storybook/i18next.js

@@ -1,9 +1,29 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 
+const ns = ["common"];
+const supportedLngs = ["en", "fr"];
+const resources = ns.reduce((acc, n) => {
+  supportedLngs.forEach((lng) => {
+    if (!acc[lng]) acc[lng] = {};
+    acc[lng] = {
+      ...acc[lng],
+      [n]: require(`../../web/public/static/locales/${lng}/${n}.json`),
+    };
+  });
+  return acc;
+}, {});
+
 i18n.use(initReactI18next).init({
-  resources: [],
   debug: true,
+  fallbackLng: "en",
+  defaultNS: "common",
+  ns,
+  interpolation: {
+    escapeValue: false,
+  },
+  react: { useSuspense: true },
+  resources,
 });
 
 export default i18n;

apps/storybook/.storybook/preview.jsx

@@ -21,6 +21,14 @@ export const parameters = {
     push() {},
     Provider: AppRouterContext.Provider,
   },
+  globals: {
+    locale: "en",
+    locales: {
+      en: "English",
+      fr: "Français",
+    },
+  },
+  i18n,
 };
 
 addDecorator((storyFn) => (

packages/ui/components/unpublished-entity/unpublishedEntity.stories.mdx

@@ -0,0 +1,37 @@
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
+import { Title, CustomArgsTable, VariantsTable, VariantRow } from "@calcom/storybook/components";
+
+import { UnpublishedEntity } from "./UnpublishedEntity";
+
+<Meta title="UI/UnpublishedEntity" component={UnpublishedEntity} />
+
+<Title title="UnpublishedEntity" suffix="Brief" subtitle="Version 1.0 — Last Update: 17 Aug 2023" />
+
+## Definition
+
+The `UnpublishedEntity` component is used to display an "empty screen" with relevant information for unpublished teams or organizations.
+
+## Structure
+
+The `UnpublishedEntity` component consists of the following parts:
+
+- An `EmptyScreen` component from `@calcom/ui` that displays a visual representation of an "empty screen."
+- An `Avatar` component from `@calcom/ui` that shows an avatar image associated with the organization or team.
+- Translated text obtained using the `useLocale` hook for displaying messages based on the entity's status.
+
+<CustomArgsTable of={UnpublishedEntity} />
+
+## UnpublishedEntity Story
+
+<Canvas>
+  <Story name="UnpublishedEntity" args={{ name: "TeamExample", teamSlug: "team-example" }}>
+    {(args) => (
+      <VariantsTable titles={["Default"]} columnMinWidth={150}>
+        <VariantRow>
+          <UnpublishedEntity {...args} />
+        </VariantRow>
+      </VariantsTable>
+    )}
+  </Story>
+</Canvas>