feat: Implement default config

Sidnioulz · Oct 17, 2024 · 2236887 · 2236887
1 parent d7b5e13
commit 2236887
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 43 deletions.
diff --git a/src/components/Badge.stories.ts b/src/components/Badge.stories.ts
@@ -1,6 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import type { API_ComponentEntry } from '@storybook/types'
 
-import { Badge } from './Badge'
+import { Badge, getBadgeProps } from './Badge'
+import { defaultConfig } from '../defaultConfig'
+
+const mockEntry: API_ComponentEntry = {
+  type: 'component',
+  id: 'foo',
+  name: '',
+  children: [],
+  tags: [],
+  depth: 0,
+}
 
 const meta: Meta<typeof Badge> = {
   title: 'Addon/Badge',
@@ -39,33 +50,64 @@ type Story = StoryObj<typeof Badge>
 export const Default: Story = {
   args: {
     context: 'toolbar',
-    text: 'New',
+    text: 'Text',
   },
 }
 
 export const Colors: Story = {
   args: {
     context: 'toolbar',
-    text: 'New',
-    bgColor: 'hsl(164, 100%, 64%)',
-    fgColor: 'hsl(164, 100%, 8%)',
+    text: 'Text',
+    bgColor: 'hsl(110, 100%, 64%)',
+    fgColor: 'hsl(110, 100%, 8%)',
   },
 }
 
 export const ColorAndBorders: Story = {
   args: {
     context: 'toolbar',
-    text: 'New',
-    bgColor: 'hsl(164, 100%, 64%)',
-    borderColor: 'hsl(164, 100%, 24%)',
-    fgColor: 'hsl(164, 100%, 8%)',
+    text: 'Text',
+    bgColor: 'hsl(110, 100%, 64%)',
+    borderColor: 'hsl(110, 100%, 24%)',
+    fgColor: 'hsl(110, 100%, 8%)',
   },
 }
 
 export const Tooltip: Story = {
   args: {
     context: 'toolbar',
-    text: 'New',
-    tooltip: 'This component is new!',
+    text: 'Text',
+    tooltip: 'This badge has a tooltip!',
   },
 }
+
+export const PresetNew: Story = {
+  args: getBadgeProps(defaultConfig[0].badge, mockEntry, 'new'),
+}
+export const PresetAlpha: Story = {
+  args: getBadgeProps(defaultConfig[1].badge, mockEntry, 'alpha'),
+}
+export const PresetBeta: Story = {
+  args: getBadgeProps(defaultConfig[1].badge, mockEntry, 'beta'),
+}
+export const PresetRC: Story = {
+  args: getBadgeProps(defaultConfig[1].badge, mockEntry, 'rc'),
+}
+export const PresetExperimental: Story = {
+  args: getBadgeProps(defaultConfig[1].badge, mockEntry, 'experimental'),
+}
+export const PresetDeprecated: Story = {
+  args: getBadgeProps(defaultConfig[2].badge, mockEntry, 'deprecated'),
+}
+export const PresetOutdated: Story = {
+  args: getBadgeProps(defaultConfig[3].badge, mockEntry, 'outdated'),
+}
+export const PresetDanger: Story = {
+  args: getBadgeProps(defaultConfig[4].badge, mockEntry, 'danger'),
+}
+export const PresetCodeOnly: Story = {
+  args: getBadgeProps(defaultConfig[5].badge, mockEntry, 'code-only'),
+}
+export const PresetVersion: Story = {
+  args: getBadgeProps(defaultConfig[6].badge, mockEntry, 'version:1.0.0'),
+}
diff --git a/src/defaultConfig.ts b/src/defaultConfig.ts
@@ -1,47 +1,69 @@
 import { getTagSuffix } from './utils/tag'
 import type { TagBadgeParameters } from './types/TagBadgeParameters'
 
+function upperFirst(str: string): string {
+  return str[0].toUpperCase() + str.slice(1)
+}
+
 export const defaultConfig: TagBadgeParameters = [
   {
     display: {
       sidebar: ['component'],
-      toolbar: ['component', 'story', 'docs'],
+      toolbar: ['story', 'docs'],
     },
     tags: 'new',
     badge: {
-      text: 'New!',
-      bgColor: 'hsl(168, 100%, 64%)',
-      borderColor: 'hsl(168, 100%, 34%)',
-      fgColor: 'hsl(168, 100%, 12%)',
-      tooltip: 'This component was released recently!',
+      text: 'New',
+      bgColor: 'hsl(130, 100%, 74%)',
+      borderColor: 'hsl(130, 100%, 34%)',
+      fgColor: 'hsl(130, 100%, 6%)',
+    },
+  },
+  {
+    tags: ['alpha', 'beta', 'rc', 'experimental'],
+    badge: ({ tag }) => {
+      return {
+        text: tag === 'rc' ? 'Release candidate' : upperFirst(tag),
+        bgColor: 'hsl(257, 100%, 84%)',
+        borderColor: 'hsl(257, 100%, 64%)',
+        fgColor: 'hsl(257, 100%, 12%)',
+      }
+    },
+  },
+  {
+    tags: 'deprecated',
+    badge: {
+      text: 'Deprecated',
+      bgColor: 'hsl(36, 100%, 74%)',
+      borderColor: 'hsl(36, 100%, 34%)',
+      fgColor: 'hsl(36, 100%, 12%)',
+    },
+  },
+  {
+    tags: 'outdated',
+    badge: {
+      text: 'Outdated',
+      bgColor: 'hsl(12, 100%, 74%)',
+      borderColor: 'hsl(12, 100%, 34%)',
+      fgColor: 'hsl(12, 100%, 12%)',
+    },
+  },
+  {
+    tags: 'danger',
+    badge: {
+      text: 'Danger',
+      bgColor: 'hsl(0, 100%, 44%)',
+      borderColor: 'hsl(0, 100%, 64%)',
+      fgColor: 'hsl(0, 100%, 94%)',
     },
   },
-  // {
-  //   tags: ['alpha', 'beta', 'rc'],
-  //   badge: ({ tag }) => {
-  //     console.log('hi', tag)
-  //     return {
-  //       text: `Unstable: ${tag}`,
-  //       bgColor: 'hsl(44, 100%, 64%)',
-  //       borderColor: 'hsl(44, 100%, 34%)',
-  //       fgColor: 'hsl(44, 100%, 12%)',
-  //     }
-  //   },
-  // },
   {
-    tags: [
-      {
-        prefix: 'group',
-      },
-      {
-        prefix: 'category',
-      },
-    ],
+    tags: ['code-only'],
     badge: {
-      text: '{{suffix}}',
-      bgColor: 'hsl(194, 100%, 64%)',
-      borderColor: 'hsl(194, 100%, 34%)',
-      fgColor: 'hsl(194, 100%, 12%)',
+      text: 'Code Only',
+      bgColor: 'hsl(84, 0%, 84%)',
+      borderColor: 'hsl(84, 0%, 34%)',
+      fgColor: 'hsl(84, 0%, 12%)',
     },
   },
   {
@@ -51,11 +73,11 @@ export const defaultConfig: TagBadgeParameters = [
     badge: ({ tag }) => {
       const version = getTagSuffix(tag)
       const isExperimental = version?.startsWith('0')
-      const hue = isExperimental ? 66 : 120
+      const hue = isExperimental ? 66 : 194
 
       return {
         text: `${version}`,
-        bgColor: `hsl(${hue}, 100%, 64%)`,
+        bgColor: `hsl(${hue}, 100%, 74%)`,
         borderColor: `hsl(${hue}, 100%, 34%)`,
         fgColor: `hsl(${hue}, 100%, 12%)`,
         tooltip: `Version ${version}${isExperimental ? '. Experimental!' : ''}`,