143 lines
5.9 KiB
JavaScript
143 lines
5.9 KiB
JavaScript
import { createElement } from 'react'
|
|
import { addons } from 'storybook/manager-api'
|
|
import { create } from 'storybook/theming'
|
|
import { decorateHanmacNavigation } from './manager-navigation.js'
|
|
|
|
// Match the measured Manager content background via its existing CSS variable.
|
|
// Keep mobile navigation, addon tabs,
|
|
// portalled menus and the preview iframe outside this toolbar scope.
|
|
const toolbarStyle = document.createElement('style')
|
|
toolbarStyle.id = 'hm-manager-toolbar-style'
|
|
toolbarStyle.textContent = `
|
|
.sb-bar[data-testid="sb-preview-toolbar"] {
|
|
background: var(--color-bg-content);
|
|
color: #000000;
|
|
}
|
|
.sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"], label, span, p, svg) {
|
|
color: inherit;
|
|
}
|
|
.sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"]):hover {
|
|
background: rgba(0, 0, 0, 0.10);
|
|
}
|
|
.sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"]):is([aria-checked="true"], [aria-expanded="true"], [aria-selected="true"]) {
|
|
background: rgba(0, 0, 0, 0.20);
|
|
}
|
|
.sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"]):focus-visible {
|
|
outline-color: currentColor;
|
|
}
|
|
`
|
|
document.head.appendChild(toolbarStyle)
|
|
|
|
// Sidebar display names only. Story titles, Story IDs and storySort stay English; items not listed keep item.name.
|
|
const koreanLabels = {
|
|
foundation: '기본 요소',
|
|
components: '컴포넌트',
|
|
'components-form': '폼 요소',
|
|
'components-navigation': '내비게이션',
|
|
'components-overlay': '오버레이',
|
|
'components-data-display': '데이터 표시',
|
|
'components-disclosure': '영역 확장·조절',
|
|
'components-search-date': '검색·날짜',
|
|
'components-feedback': '알림·피드백',
|
|
'components-form-button': '버튼',
|
|
'components-form-input': '입력창',
|
|
'components-form-textarea': '여러 줄 입력창',
|
|
'components-form-select': '선택 목록',
|
|
'components-form-checkbox': '체크박스',
|
|
'components-form-radio-group': '라디오 버튼 그룹',
|
|
'components-form-switch': '스위치',
|
|
'components-form-slider': '슬라이더',
|
|
'components-form-toggle': '토글 버튼',
|
|
'components-navigation-tabs': '탭',
|
|
'components-navigation-breadcrumb': '이동 경로',
|
|
'components-navigation-pagination': '페이지네이션',
|
|
'components-navigation-navigation-menu': '내비게이션 메뉴',
|
|
'components-navigation-menubar': '메뉴바',
|
|
'components-overlay-dialog': '대화상자',
|
|
'components-overlay-alert-dialog': '확인·경고 대화상자',
|
|
'components-overlay-sheet': '시트 패널',
|
|
'components-overlay-drawer': '드로어',
|
|
'components-overlay-dropdown-menu': '드롭다운 메뉴',
|
|
'components-overlay-context-menu': '컨텍스트 메뉴',
|
|
'components-overlay-popover': '팝오버',
|
|
'components-overlay-tooltip': '툴팁',
|
|
'components-overlay-hover-card': '호버 카드',
|
|
'components-data-display-card': '카드',
|
|
'components-data-display-table': '테이블',
|
|
'components-data-display-badge': '배지',
|
|
'components-data-display-avatar': '아바타',
|
|
'components-data-display-progress': '진행률',
|
|
'components-data-display-skeleton': '스켈레톤',
|
|
'components-data-display-separator': '구분선',
|
|
'components-data-display-aspect-ratio': '화면 비율',
|
|
'components-data-display-carousel': '캐러셀',
|
|
'components-data-display-scroll-area': '스크롤 영역',
|
|
'components-disclosure-accordion': '아코디언',
|
|
'components-disclosure-collapsible': '접기·펼치기',
|
|
'components-disclosure-resizable': '크기 조절',
|
|
'components-search-date-command': '명령어 검색',
|
|
'components-search-date-combobox': '콤보박스',
|
|
'components-search-date-calendar': '달력',
|
|
'components-search-date-date-picker': '날짜 선택기',
|
|
'components-feedback-alert': '알림 메시지',
|
|
'components-feedback-sonner': '토스트 알림',
|
|
patterns: 'UI 패턴',
|
|
'patterns-data': '데이터 조회',
|
|
'patterns-data-data-table': '데이터 테이블',
|
|
'patterns-data-filter-bar': '필터 바',
|
|
'patterns-layout': '화면 구성',
|
|
'patterns-layout-gnb': '전체 메뉴 (GNB)',
|
|
'patterns-layout-lnb': '좌측 메뉴 (LNB)',
|
|
'patterns-layout-dashboard-layout': '대시보드',
|
|
'patterns-layout-page-header': '페이지 헤더',
|
|
sw: 'SW UI',
|
|
'sw-header': '헤더',
|
|
'sw-header--overview': 'SW 헤더',
|
|
'sw-header--responsive-more': '화면 너비 대응',
|
|
'sw-viewer--responsive': '화면 너비 대응',
|
|
'sw-step-header--responsive': '화면 너비 대응',
|
|
'sw-footer--responsive': '화면 너비 대응',
|
|
'sw-viewer': '뷰어',
|
|
'sw-viewer--viewer-header': '뷰어 헤더',
|
|
'sw-step-header': '단계별',
|
|
'sw-step-header--process-header': '단계별 헤더',
|
|
'sw-popup': '팝업',
|
|
}
|
|
|
|
// A component with one visible Story is shown as that Story (`<component-id>--all`) under the component's name.
|
|
// A real Story named "All" under an expanded component keeps its own name.
|
|
const koreanLabel = (item) => {
|
|
const hoisted = item.type === 'story' && item.name !== 'All' ? koreanLabels[item.id.replace(/--all$/, '')] : undefined
|
|
return koreanLabels[item.id] ?? hoisted ?? item.name
|
|
}
|
|
|
|
addons.setConfig({
|
|
layout: {
|
|
showPanel: false,
|
|
showToolbar: false,
|
|
// LNB width 246px. recentVisibleSizes keeps the same width when the sidebar is collapsed and expanded again.
|
|
navSize: 246,
|
|
recentVisibleSizes: { navSize: 246 },
|
|
},
|
|
theme: create({
|
|
base: 'light',
|
|
brandTitle: '한맥 디자인 시스템',
|
|
brandUrl: './',
|
|
brandTarget: '_self',
|
|
fontBase: "'Hanmac Manager Noto Sans KR', 'Noto Sans KR', 'Malgun Gothic', sans-serif",
|
|
colorPrimary: '#123328',
|
|
colorSecondary: '#123328',
|
|
appBg: '#F5F0E5',
|
|
appContentBg: '#FFFFFF',
|
|
appPreviewBg: '#FFFFFF',
|
|
textColor: '#123328',
|
|
textInverseColor: '#FFFFFF',
|
|
barSelectedColor: '#123328',
|
|
}),
|
|
sidebar: {
|
|
renderLabel: (item) => createElement('span', { className: 'hm-manager-label' }, koreanLabel(item)),
|
|
},
|
|
})
|
|
|
|
addons.register('hm/manager-navigation-style', decorateHanmacNavigation)
|