Merge pull request #101 from aziontech/UXE-4490-storybook-documentation

feat: storybook documentation and organization
aziontech · Sep 26, 2024 · b840792 · b840792
2 parents e4d7024 + 3334117
commit b840792
Show file tree

Hide file tree

Showing 45 changed files with 622 additions and 646 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -4,6 +4,7 @@ const config = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
+    '@storybook/addon-docs',
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
     '@storybook/addon-themes',

diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
@@ -1,3 +1,10 @@
 <html>
     <body class="surface-ground"></body>
 </html>
+
+<style>
+    .sbdocs-content {
+        @apply w-full max-w-7xl ;
+    }
+</style>
+
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -18,7 +18,21 @@ setup((app) => {
 export const parameters = {
   options: {
     storySort: {
-      order: ['Blocks', 'Components Group', 'Components', 'Elements'],
+      method: 'alphabetical',
+      order: [
+        'Blocks', 
+        [
+          'Hero', 
+          'Sections',
+          'Banner',
+          'Pages',
+          'List'
+        ],
+        'Components Group', 
+        'Components', 
+        'Layout', 
+        'Elements'
+      ],    
     },
   },
   backgrounds: {

diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^9.2.6",
     "@semantic-release/release-notes-generator": "12.1.0",
+    "@storybook/addon-docs": "^8.3.2",
     "@storybook/addon-essentials": "^8.2.9",
     "@storybook/addon-interactions": "^8.2.9",
     "@storybook/addon-links": "^8.2.9",

diff --git a/src/stories/Rules.js b/src/stories/Rules.js
diff --git a/...tes/sections/section-highlight.stories.js → ...tes/banner/banner-architecture.stories.js b/...tes/sections/section-highlight.stories.js → ...tes/banner/banner-architecture.stories.js
@@ -1,10 +1,23 @@
 
-import Container from '../../../templates/container'
-import SectionHighlight from '../../../templates/sectionhighlight'
+import Container from '../../../templates/container/Container'
+import SectionHighlight from '../../../templates/sectionhighlight/SectionHighlight'
+import Rules from '../../rules'
 
 export default {
-  title: 'Blocks/Sections/section-highlight',
+  title: 'Blocks/Banner/banner-architecture',
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### Content rules
+${Rules.section.overline}
+${Rules.section.title}
+${Rules.section.image}
+        `,
+      },
+    },
+  },
 }
 
 const MOCK = {

diff --git a/...ates/sections/SectionSimpleCTA.stories.js → ...ates/banner/banner-get-started.stories.js b/...ates/sections/SectionSimpleCTA.stories.js → ...ates/banner/banner-get-started.stories.js
@@ -1,11 +1,25 @@
 
-import Container from '../../../templates/container'
-import ContentSection from '../../../templates/contentsection'
-import LinkButton from '../../../templates/linkbutton'
+import Container from '../../../templates/container/Container'
+import ContentSection from '../../../templates/contentsection/ContentSection'
+import LinkButton from '../../../templates/linkbutton/LinkButton'
+import Rules from '../../rules'
 
 export default {
-  title: 'Blocks/Sections/Simple CTA',
+  title: 'Blocks/Banner/banner-get-started',
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### Content rules
+${Rules.banner.overline}
+${Rules.banner.title}
+${Rules.banner.cta}
+${Rules.banner.list}
+        `,
+      },
+    },
+  },
 }
 
 const MOCK = {

diff --git a/...tes/sections/SectionCardBanner.stories.js → ...mplates/banner/banner-live-map.stories.js b/...tes/sections/SectionCardBanner.stories.js → ...mplates/banner/banner-live-map.stories.js
@@ -1,14 +1,28 @@
 
-import Overline from '../../../templates/overline'
-import LinkButton from '../../../templates/linkbutton'
-import CardBase from '../../../templates/cardbase'
-import CardDescription from '../../../templates/carddescription'
-import CardTitle from '../../../templates/cardtitle'
-import Container from '../../../templates/container'
+import Overline from '../../../templates/overline/Overline'
+import LinkButton from '../../../templates/linkbutton/LinkButton'
+import CardBase from '../../../templates/cardbase/CardBase'
+import CardDescription from '../../../templates/carddescription/CardDescription'
+import CardTitle from '../../../templates/cardtitle/CardTitle'
+import Container from '../../../templates/container/Container'
+import Rules from '../../rules'
 
 export default {
-  title: 'Blocks/Sections/Card Banner',
+  title: 'Blocks/Banner/banner-live-map',
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### Content rules
+${Rules.banner.overline}
+${Rules.banner.title}
+${Rules.banner.cta}
+${Rules.banner.image}
+        `,
+      },
+    },
+  },
 }
 
 const MOCK = {

diff --git a/...s/templates/Lists/ListWithHero.stories.js → ...plates/hero/hero-blog-featured.stories.js b/...s/templates/Lists/ListWithHero.stories.js → ...plates/hero/hero-blog-featured.stories.js
@@ -1,10 +1,24 @@
-import FeaturedPost from '../../../templates/featuredpost'
-import CardGridBlock from '../../../templates/cardgridblock'
-import Container from '../../../templates/container'
+import FeaturedPost from '../../../templates/featuredpost/FeaturedPost'
+import CardGridBlock from '../../../templates/cardgridblock/CardGridBlock'
+import Container from '../../../templates/container/Container'
+import Rules from '../../rules'
 
 export default {
-  title: 'Blocks/List/Featured Hero',
+  title: 'Blocks/Hero/hero-blog-featured',
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### Content rules
+${Rules.hero.image}
+${Rules.hero.title}
+${Rules.hero.description}
+${Rules.hero.avatar}
+        `,
+      },
+    },
+  },
   argTypes: {
     isSearchEnabled: {
       options: [true,  false],

diff --git a/...ates/content/ContentNavigation.stories.js → ...s/hero/hero-content-navigation.stories.js b/...ates/content/ContentNavigation.stories.js → ...s/hero/hero-content-navigation.stories.js
@@ -1,10 +1,10 @@
-import HeroArticle from '../../../templates/heroarticle';
+import HeroArticle from '../../../templates/heroarticle/HeroArticle';
 import Breadcrumb from "primevue/breadcrumb";
-import MenuNavigation from '../../../templates/menunavigationblock'
+import MenuNavigation from '../../../templates/menunavigationblock/MenuNavigationBlock'
 import Divider from 'primevue/divider'
 
 export default {
-  title: 'Blocks/Content/Content Navigation',
+  title: 'Blocks/Hero/hero-content-navigation',
   component: HeroArticle,
   tags: ['autodocs'],
   argTypes: {}

diff --git a/.../templates/content/ArticleHero.stories.js → ...es/templates/hero/hero-content.stories.js b/.../templates/content/ArticleHero.stories.js → ...es/templates/hero/hero-content.stories.js
@@ -1,9 +1,22 @@
-import HeroArticle from '../../../templates/heroarticle';
+import HeroArticle from '../../../templates/heroarticle/HeroArticle';
 import Breadcrumb from "primevue/breadcrumb";
-import Container from "../../../templates/container"
+import Container from "../../../templates/container/Container"
+import Rules from '../../rules'
 
 export default {
-  title: 'Blocks/Content/Article Hero',
+  title: 'Blocks/Hero/hero-content',
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### Content rules
+${Rules.hero.title}
+${Rules.hero.description}
+${Rules.hero.avatar}
+        `,
+      },
+    },
+  },
   component: HeroArticle,
   tags: ['autodocs'],
   argTypes: {}

diff --git a/...ates/hero/hero-form-horizontal.stories.js → ...templates/hero/hero-form-right.stories.js b/...ates/hero/hero-form-horizontal.stories.js → ...templates/hero/hero-form-right.stories.js
@@ -3,10 +3,26 @@ import LinkButton from '../../../templates/linkbutton'
 import ContentLogoBlock from '../../../templates/contentlogo'
 import FormBePartner from '../../../../dist/formbepartner'
 import Container from '../../../templates/container'
+import Rules from '../../rules'
 
 export default {
-  title: 'Blocks/Hero/hero-form-horizontal',
+  title: 'Blocks/Hero/hero-form-right',
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### Content rules
+${Rules.hero.overline}
+${Rules.hero.title}
+${Rules.hero.description}
+${Rules.hero.cta}
+${Rules.hero.logos}
+${Rules.hero.form}
+        `,
+      },
+    },
+  },
 }
 
 const logos = Array(3).fill({

diff --git a/...plates/hero/hero-home-vertical.stories.js → ...ories/templates/hero/hero-home.stories.js b/...plates/hero/hero-home-vertical.stories.js → ...ories/templates/hero/hero-home.stories.js
@@ -1,11 +1,26 @@
-import HeroBlockBase from '../../../templates/herobase'
-import LinkButton from '../../../templates/linkbutton'
-import ContentLogoBlock from '../../../templates/contentlogo'
-import Container from '../../../templates/container'
+import HeroBlockBase from '../../../templates/herobase/HeroBase'
+import LinkButton from '../../../templates/linkbutton/LinkButton'
+import ContentLogoBlock from '../../../templates/contentlogo/ContentLogo'
+import Container from '../../../templates/container/Container'
+import Rules from '../../rules'
 
 export default {
-  title: 'Blocks/Hero/hero-home-vertical',
+  title: 'Blocks/Hero/hero-home',
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### Content rules
+${Rules.hero.banner}
+${Rules.hero.title}
+${Rules.hero.description}
+${Rules.hero.cta}
+${Rules.hero.logos}
+        `,
+      },
+    },
+  },
 }
 
 const logos = Array(4).fill({
@@ -41,7 +56,7 @@ const MOCK = {
     }
   ],
   bannerNews: {
-    description: "Azion Console for Developerss!",
+    description: "Azion Console for Developers!",
     cta: {
       label: "Access now.",
       link: "https://console.azion.com/login"

diff --git a/...ro/hero-marketplace-horizontal.stories.js → ...es/hero/hero-image-right-logos.stories.js b/...ro/hero-marketplace-horizontal.stories.js → ...es/hero/hero-image-right-logos.stories.js
@@ -1,12 +1,26 @@
-import HeroBlockBase from '../../../templates/herobase'
-import LinkButton from '../../../templates/linkbutton'
-import ContentLogoBlock from '../../../templates/contentlogo'
-import ImageSwitcher from '../../../templates/themeawareimageswitcher'
-import Container from '../../../templates/container'
+import HeroBlockBase from '../../../templates/herobase/HeroBase'
+import LinkButton from '../../../templates/linkbutton/LinkButton'
+import ContentLogoBlock from '../../../templates/contentlogo/ContentLogo'
+import ImageSwitcher from '../../../templates/themeawareimageswitcher/ImageSwitcher'
+import Container from '../../../templates/container/Container'
+import Rules from '../../rules'
 
 export default {
-  title: 'Blocks/Hero/hero-marketplace-horizontal',
+  title: 'Blocks/Hero/hero-image-right-logos',
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+### Content rules
+${Rules.hero.overline}
+${Rules.hero.title}
+${Rules.hero.cta}
+${Rules.hero.imageVideo}
+        `,
+      },
+    },
+  },
 }
 
 const logos = Array(3).fill({
@@ -90,11 +104,6 @@ Default.parameters = {
   docs: {
     description: {
       story: `
-
-      * exemplo de description *
-
-      Definições:
-      - Utilizar apenas 3 logos
       `
     },
     source: { code: HeroDisplay } },