From efe9e3f12f56d2e152a4435678c3106074725e64 Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Fri, 18 Aug 2023 10:20:32 +0000
Subject: [PATCH] feat: adjust storybook structure

---
 src/docs/Introduction.mdx                   | 14 ++++++++++++++
 src/docs/Tailwind.mdx                       |  3 +++
 src/docs/Utilitiets.mdx                     | 13 +++++++++++++
 src/stories/{Configure.mdx => Configure.md} | 19 +++++++++++--------
 4 files changed, 41 insertions(+), 8 deletions(-)
 create mode 100644 src/docs/Introduction.mdx
 create mode 100644 src/docs/Tailwind.mdx
 create mode 100644 src/docs/Utilitiets.mdx
 rename src/stories/{Configure.mdx => Configure.md} (97%)

diff --git a/src/docs/Introduction.mdx b/src/docs/Introduction.mdx
new file mode 100644
index 0000000..2873aa2
--- /dev/null
+++ b/src/docs/Introduction.mdx
@@ -0,0 +1,14 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Introduction" />
+
+<div align="center">
+	<img
+		style={{ marginBottom: "16px" }}
+		alt="ZenML Logo"
+		src="https://user-images.githubusercontent.com/3348134/223112746-345126ff-a0e8-479f-8ac0-670d78f71712.png"
+		alt="Logo"
+		width="400"
+	/>
+	<h1>ZenML Component Library</h1>
+</div>
diff --git a/src/docs/Tailwind.mdx b/src/docs/Tailwind.mdx
new file mode 100644
index 0000000..581397e
--- /dev/null
+++ b/src/docs/Tailwind.mdx
@@ -0,0 +1,3 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Docs/Tailwind" />
diff --git a/src/docs/Utilitiets.mdx b/src/docs/Utilitiets.mdx
new file mode 100644
index 0000000..4ea7974
--- /dev/null
+++ b/src/docs/Utilitiets.mdx
@@ -0,0 +1,13 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Docs/Utilities" />
+
+# Utilities
+
+The component library exposes a set of helpful utlitiy functions, that can be imported from `@zenml-io/react-component-library/utilities`.  
+The exposed utilities are decorated with JSDoc to improve the DX, and to make it as easy as possible to get
+started with them.
+
+## Functions
+
+`cn` : Utility function for merging multiple Tailwind classes, allowing the usage of the clsx-syntax. The abbreviation stands for `classNames`
diff --git a/src/stories/Configure.mdx b/src/stories/Configure.md
similarity index 97%
rename from src/stories/Configure.mdx
rename to src/stories/Configure.md
index a50fcea..3df550b 100644
--- a/src/stories/Configure.mdx
+++ b/src/stories/Configure.md
@@ -15,11 +15,11 @@ import Accessibility from "./assets/accessibility.png";
 import Theming from "./assets/theming.png";
 import AddonLibrary from "./assets/addon-library.png";
 
-export const RightArrow = () => <svg 
-    viewBox="0 0 14 14" 
-    width="8px" 
-    height="14px" 
-    style={{ 
+export const RightArrow = () => <svg
+viewBox="0 0 14 14"
+width="8px"
+height="14px"
+style={{
       marginLeft: '4px',
       display: 'inline-block',
       shapeRendering: 'inherit',
@@ -27,9 +27,9 @@ export const RightArrow = () => <svg
       fill: 'currentColor',
       'path fill': 'currentColor'
     }}
->
-  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
-</svg>
+
+>   <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
+> </svg>
 
 <Meta title="Configure your project" />
 
@@ -38,6 +38,7 @@ export const RightArrow = () => <svg
     # Configure your project
 
     Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
   </div>
   <div className="sb-section">
     <div className="sb-section-item">
@@ -84,6 +85,7 @@ export const RightArrow = () => <svg
     # Do more with Storybook
 
     Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
   </div>
 
   <div className="sb-section">
@@ -203,6 +205,7 @@ export const RightArrow = () => <svg
           target="_blank"
         >Discover tutorials<RightArrow /></a>
     </div>
+
 </div>
 
 <style>