feat: mark Avatar and AvatarGroup as stable (#14)

.storybook/preview.css

@@ -0,0 +1,18 @@
+.preview-container-stage-tag {
+    color: #fff;
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+}
+
+.preview-container-stage-tag[data-tag="experimental"] {
+    background-color: #f0ad4e;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+}
+
+.preview-container-stage-tag[data-tag="stable"] {
+    background-color: #5cb85c;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+}

.storybook/preview.tsx

@@ -0,0 +1,33 @@
+import "../lib/css/global.css";
+import "./preview.css";
+import {StoryFn} from "@storybook/react";
+
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story: StoryFn, { tags }: { tags: string[]}) => {
+    const isStable = (tags || []).includes('stable');
+    const state = isStable ? 'stable' : 'experimental';
+    return (
+        <>
+          <span className='preview-container-stage-tag' data-tag={state}>
+            {state}
+          </span>
+          <Story />
+        </>
+    );
+    },
+  ],
+};
+
+
+
+export default preview;

lib/components/Avatar/AvatarGroup.stories.ts

@@ -5,7 +5,7 @@ const meta = {
   title: 'Avatar/AvatarGroup',
   component: AvatarGroup,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
+  tags: ['autodocs', 'stable'],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     //    layout: 'fullscreen',

lib/components/Avatar/AvatarGroup.tsx

@@ -19,6 +19,9 @@ export interface AvatarGroupProps {
   className?: string;
 }
 
+/**
+ * Avatar group component for displaying multiple avatars as a group.
+ */
 export const AvatarGroup = ({
   items = [],
   maxItemsCount = 4,

lib/components/Avatar/avatar.stories.tsx

@@ -4,7 +4,7 @@ import { Avatar } from './';
 const meta = {
   title: 'Avatar/Avatar',
   component: Avatar,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'stable'],
   parameters: {},
   args: {
     name: 'Jane Doe',