docs(AvatarGroup): enable live edit (#2128)

mondaycom · May 20, 2024 · 2f3455d · 2f3455d
1 parent 8d6a84c
commit 2f3455d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 39 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -252,7 +252,7 @@
     "sass-loader": "^12.4.0",
     "snapshot-diff": "^0.9.0",
     "storybook": "^7.5.3",
-    "storybook-addon-playground": "^1.8.0",
+    "storybook-addon-playground": "^1.9.0",
     "style-loader": "^3.3.1",
     "stylelint": "^14.2.0",
     "stylelint-config-recommended": "^7.0.0",

diff --git a/packages/core/src/components/AvatarGroup/__stories__/AvatarGroup.mdx b/packages/core/src/components/AvatarGroup/__stories__/AvatarGroup.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import { UsageGuidelines } from "vibe-storybook-components";
 import { AVATAR, COUNTER, BADGE } from "../../../storybook/components/related-components/component-description-map";
 import * as AvatarGroupStories from "./AvatarGroup.stories";

diff --git a/packages/core/src/components/AvatarGroup/__stories__/AvatarGroup.stories.js b/packages/core/src/components/AvatarGroup/__stories__/AvatarGroup.stories.js
@@ -19,7 +19,14 @@ export default {
   title: "Media/Avatar/AvatarGroup",
   component: AvatarGroup,
   argTypes: metaSettings.argTypes,
-  decorators: metaSettings.decorators
+  decorators: metaSettings.decorators,
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { styles, StoryDescription, person1, person2, person3 }
+      }
+    }
+  }
 };
 
 const avatarGroupTemplate = ({ persons, ...args }) => {
@@ -43,15 +50,20 @@ const avatarGroupTemplate = ({ persons, ...args }) => {
 };
 
 export const Overview = {
-  render: avatarGroupTemplate.bind(),
-  name: "Overview",
-
+  render: avatarGroupTemplate.bind({}),
   args: {
     persons: {
       person1: window.location.origin + "/" + person1,
       person2: window.location.origin + "/" + person2,
       person3: window.location.origin + "/" + person3
     }
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
   }
 };
 
@@ -89,9 +101,7 @@ export const Size = {
         </AvatarGroup>
       </StoryDescription>
     </Flex>
-  ),
-
-  name: "Size"
+  )
 };
 
 export const ColorVariants = {
@@ -132,9 +142,7 @@ export const ColorVariants = {
         </AvatarGroup>
       </StoryDescription>
     </Flex>
-  ),
-
-  name: "Color variants"
+  )
 };
 
 export const CustomCounter = {
@@ -154,9 +162,7 @@ export const CustomCounter = {
       <Avatar src={person2} ariaLabel="Sergey Roytman" />
       <Avatar src={person3} ariaLabel="Yossi Saadi" />
     </AvatarGroup>
-  ),
-
-  name: "Custom counter"
+  )
 };
 
 export const GridTooltip = {
@@ -181,9 +187,7 @@ export const GridTooltip = {
       <Avatar src={person2} />
       <Avatar src={person3} />
     </AvatarGroup>
-  ),
-
-  name: "Grid tooltip"
+  )
 };
 
 export const MaxAmountToDisplay = {
@@ -227,9 +231,7 @@ export const MaxAmountToDisplay = {
         </AvatarGroup>
       </Flex>
     );
-  },
-
-  name: "Max amount to display"
+  }
 };
 
 export const HoverVsClickable = {
@@ -296,7 +298,6 @@ export const HoverVsClickable = {
       </Flex>
     );
   },
-
   name: "Hover vs Clickable"
 };
 
@@ -323,9 +324,7 @@ export const VirtualizedList = {
         {getDummyAvatars(334)}
       </AvatarGroup>
     );
-  },
-
-  name: "Virtualized list"
+  }
 };
 
 export const CounterCustomTooltipContent = {
@@ -345,9 +344,7 @@ export const CounterCustomTooltipContent = {
       <Avatar src={person2} ariaLabel="Sergey Roytman" />
       <Avatar src={person3} ariaLabel="Yossi Saadi" />
     </AvatarGroup>
-  ),
-
-  name: "Counter custom tooltip content"
+  )
 };
 
 export const LastSeenUsers = {
@@ -363,9 +360,7 @@ export const LastSeenUsers = {
         <Avatar type={Avatar.types.IMG} src={person3} ariaLabel="Yossi Saadi" />
       </AvatarGroup>
     </Flex>
-  ),
-
-  name: "Last seen users"
+  )
 };
 
 export const DisplayingTeams = {
@@ -424,7 +419,5 @@ export const DisplayingTeams = {
         </tr>
       </tbody>
     </table>
-  ),
-
-  name: "Displaying teams"
+  )
 };
diff --git a/yarn.lock b/yarn.lock
@@ -5391,7 +5391,7 @@
     "@replit/codemirror-lang-svelte" "^6.0.0"
     codemirror-lang-mermaid "^0.5.0"
 
-"@uiw/codemirror-theme-github@^4.21.25":
+"@uiw/codemirror-theme-github@^4.21.21", "@uiw/codemirror-theme-github@^4.21.25":
   version "4.22.1"
   resolved "https://registry.npmjs.org/@uiw/codemirror-theme-github/-/codemirror-theme-github-4.22.1.tgz#7f2288cdbe6c873f2e13029004665a15fd8930f6"
   integrity sha512-trotMuMd8PQjvst4hg9b5Mz5qlD5HQzPVAZQFlQKaaF8mEKMk77nFCPhfD3Rg2WEq02lx6fqmOcErQjY0GRHew==
@@ -18201,13 +18201,14 @@ store2@^2.14.2:
   resolved "https://registry.npmjs.org/store2/-/store2-2.14.3.tgz#24077d7ba110711864e4f691d2af941ec533deb5"
   integrity sha512-4QcZ+yx7nzEFiV4BMLnr/pRa5HYzNITX2ri0Zh6sT9EyQHbBHacC6YigllUPU9X3D0f/22QCgfokpKs52YRrUg==
 
-storybook-addon-playground@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.npmjs.org/storybook-addon-playground/-/storybook-addon-playground-1.8.0.tgz#3e2d0f629287720ca2d113b5c1fdfd7a7c8a7a03"
-  integrity sha512-I51gIbMCrrYGT0FAt8alsW9H6XJ8ukz/beBM6D/n/WCIjMG7xkE3s4mohSXEG7r2yO3n4WCmYyacoU3a3OoUXA==
+storybook-addon-playground@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.npmjs.org/storybook-addon-playground/-/storybook-addon-playground-1.9.0.tgz#c708f98b76526d1c17d0a80ca8d424cde0f88d19"
+  integrity sha512-9PbxkowB0c2ESPMR5uJOagFzjWEfAY4e2XbkSm7hFr5NYDUwJwMyRrpa+IMoKzb3F3eVdnzek3S/nkqSxymdkg==
   dependencies:
     "@storybook/addon-links" "^7.6.4"
     "@uiw/codemirror-extensions-langs" "^4.21.21"
+    "@uiw/codemirror-theme-github" "^4.21.21"
     "@uiw/react-codemirror" "^4.21.21"
     classnames "^2.3.2"
     lodash-es "^4.17.21"