From 22368870cf2f12a376f93974c0f959509f9ce5e0 Mon Sep 17 00:00:00 2001 From: Steve Dodier-Lazaro Date: Thu, 17 Oct 2024 22:34:44 +0200 Subject: [PATCH] feat: Implement default config --- src/components/Badge.stories.ts | 64 +++++++++++++++++++----- src/defaultConfig.ts | 86 +++++++++++++++++++++------------ 2 files changed, 107 insertions(+), 43 deletions(-) diff --git a/src/components/Badge.stories.ts b/src/components/Badge.stories.ts index 2299f4c..3b127cc 100644 --- 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 = { title: 'Addon/Badge', @@ -39,33 +50,64 @@ type Story = StoryObj 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 index 1d3d98b..af71a1d 100644 --- 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!' : ''}`,