From 4fe44b92507a7c9ed72ea6585ed50a6c8be919e0 Mon Sep 17 00:00:00 2001
From: Serdar Sayin <srdrsayin@gmail.com>
Date: Fri, 13 Oct 2023 14:44:01 +0200
Subject: [PATCH] Feature/react dictionary docs (#201)

* build(react-media):set publish config to public

* docs(react-dictionary): add usedictionary story
---
 .../react-dictionary/useDictionary.docs.mdx   | 11 ++++
 .../useDictionary.stories.tsx                 | 60 +++++++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 apps/storybook/stories/react-dictionary/useDictionary.docs.mdx
 create mode 100644 apps/storybook/stories/react-dictionary/useDictionary.stories.tsx

diff --git a/apps/storybook/stories/react-dictionary/useDictionary.docs.mdx b/apps/storybook/stories/react-dictionary/useDictionary.docs.mdx
new file mode 100644
index 00000000..f5070e21
--- /dev/null
+++ b/apps/storybook/stories/react-dictionary/useDictionary.docs.mdx
@@ -0,0 +1,11 @@
+import { Canvas, Meta, Story } from "@storybook/blocks";
+
+import * as useDictionaryStories from "./useDictionary.stories";
+
+<Meta of={useDictionaryStories} />
+
+<Canvas of={useDictionaryStories.Default} />
+
+# useDictionary
+
+Simple localized key value storage.
diff --git a/apps/storybook/stories/react-dictionary/useDictionary.stories.tsx b/apps/storybook/stories/react-dictionary/useDictionary.stories.tsx
new file mode 100644
index 00000000..0bc91bea
--- /dev/null
+++ b/apps/storybook/stories/react-dictionary/useDictionary.stories.tsx
@@ -0,0 +1,60 @@
+import { Meta, StoryObj } from "@storybook/react";
+import docs from "./useDictionary.docs.mdx";
+import { DictionaryProvider, useDictionary } from "@codedazur/react-dictionary";
+import { Button, Row } from "@codedazur/react-components";
+
+const meta: Meta = {
+  title: "React-Dictionary/useDictionary",
+  parameters: {
+    docs: {
+      page: docs,
+    },
+  },
+  args: {
+    locale: "de",
+  },
+  argTypes: {
+    locale: {
+      control: "select",
+      options: ["nl", "de", "en"],
+    },
+  },
+};
+export default meta;
+
+const DictionaryConsumer = () => {
+  const dictionary = useDictionary();
+  const register = dictionary.get("register");
+
+  return (
+    <Row>
+      <Button>{register}</Button>
+    </Row>
+  );
+};
+
+export const Default: StoryObj<{ locale: string }> = {
+  render: function Default({ locale, ...rest }) {
+    return (
+      <>
+        <DictionaryProvider
+          {...rest}
+          locale={locale}
+          dictionaries={{
+            en: {
+              register: "Register",
+            },
+            nl: {
+              register: "Registreren",
+            },
+            de: {
+              register: "Registrieren",
+            },
+          }}
+        >
+          <DictionaryConsumer />
+        </DictionaryProvider>
+      </>
+    );
+  },
+};