From 8f8857a7f279b9efce016b073a9f3f72697a5598 Mon Sep 17 00:00:00 2001 From: Nowely Date: Sat, 14 Mar 2026 11:02:45 +0300 Subject: [PATCH 1/8] feat(drag): enhance TodoMark component with checkbox functionality - Updated the TodoMark component to utilize the useMark hook for managing checkbox state. - Simplified the markup and styling logic for displaying nested items based on their completion status. - Removed the deprecated todo prop and replaced it with a more dynamic approach using the value prop to determine the checkbox state. --- .../storybook/src/pages/Drag/Drag.stories.tsx | 112 +++++++++--------- 1 file changed, 56 insertions(+), 56 deletions(-) diff --git a/packages/react/storybook/src/pages/Drag/Drag.stories.tsx b/packages/react/storybook/src/pages/Drag/Drag.stories.tsx index c3ab62b5..e45adab9 100644 --- a/packages/react/storybook/src/pages/Drag/Drag.stories.tsx +++ b/packages/react/storybook/src/pages/Drag/Drag.stories.tsx @@ -1,4 +1,4 @@ -import {MarkedInput} from '@markput/react' +import {MarkedInput, useMark} from '@markput/react' import type {MarkProps, Option} from '@markput/react' import type {Meta, StoryObj} from '@storybook/react-vite' import type {CSSProperties, ReactNode} from 'react' @@ -60,7 +60,6 @@ export const Markdown: Story = { interface TodoMarkProps extends MarkProps { style?: CSSProperties - todo?: 'pending' | 'done' } const todoOptions: Option[] = [ @@ -72,58 +71,48 @@ const todoOptions: Option[] = [ }), }, { - markup: '- [ ] __nested__\n\n', - mark: (props: MarkProps) => ({...props, todo: 'pending' as const, style: {display: 'block'} as CSSProperties}), - }, - { - markup: '- [x] __nested__\n\n', - mark: (props: MarkProps) => ({ - ...props, - todo: 'done' as const, - style: {display: 'block', textDecoration: 'line-through', opacity: 0.5} as CSSProperties, - }), - }, - { - markup: '\t- [ ] __nested__\n\n', - mark: (props: MarkProps) => ({ - ...props, - todo: 'pending' as const, - style: {display: 'block', paddingLeft: '1.5em'} as CSSProperties, - }), - }, - { - markup: '\t- [x] __nested__\n\n', - mark: (props: MarkProps) => ({ - ...props, - todo: 'done' as const, - style: { - display: 'block', - paddingLeft: '1.5em', - textDecoration: 'line-through', - opacity: 0.5, - } as CSSProperties, - }), + markup: '- [__value__] __nested__\n\n', + mark: (props: MarkProps) => { + const isDone = props.value === 'x' + return { + ...props, + style: { + display: 'block', + textDecoration: isDone ? 'line-through' : undefined, + opacity: isDone ? 0.5 : undefined, + } as CSSProperties, + } + }, }, { - markup: '\t\t- [ ] __nested__\n\n', - mark: (props: MarkProps) => ({ - ...props, - todo: 'pending' as const, - style: {display: 'block', paddingLeft: '3em'} as CSSProperties, - }), + markup: '\t- [__value__] __nested__\n\n', + mark: (props: MarkProps) => { + const isDone = props.value === 'x' + return { + ...props, + style: { + display: 'block', + paddingLeft: '1.5em', + textDecoration: isDone ? 'line-through' : undefined, + opacity: isDone ? 0.5 : undefined, + } as CSSProperties, + } + }, }, { - markup: '\t\t- [x] __nested__\n\n', - mark: (props: MarkProps) => ({ - ...props, - todo: 'done' as const, - style: { - display: 'block', - paddingLeft: '3em', - textDecoration: 'line-through', - opacity: 0.5, - } as CSSProperties, - }), + markup: '\t\t- [__value__] __nested__\n\n', + mark: (props: MarkProps) => { + const isDone = props.value === 'x' + return { + ...props, + style: { + display: 'block', + paddingLeft: '3em', + textDecoration: isDone ? 'line-through' : undefined, + opacity: isDone ? 0.5 : undefined, + } as CSSProperties, + } + }, }, { markup: '> __nested__\n\n', @@ -134,12 +123,23 @@ const todoOptions: Option[] = [ }, ] -const TodoMark = ({children, value, style, todo}: TodoMarkProps) => ( - - {todo && {todo === 'done' ? '\u2611' : '\u2610'}} - {children || value} - -) +const TodoMark = ({nested, style}: TodoMarkProps) => { + const {value, change, readOnly} = useMark() + const isDone = value === 'x' + + return ( + + change({content: isDone ? ' ' : 'x'})} + disabled={readOnly} + style={{marginRight: 6}} + /> + {nested} + + ) +} const TODO_VALUE = `# \u{1F4CB} Project Launch Checklist From c93a26a2df4ab03b9afc7d31f06eb91559f20cbb Mon Sep 17 00:00:00 2001 From: Nowely Date: Sat, 14 Mar 2026 12:35:46 +0300 Subject: [PATCH 2/8] feat(drag): add todo state management to TodoMark component - Introduced a new `todo` prop to the TodoMark component to indicate the completion status as 'pending' or 'done'. - Updated the checkbox functionality to reflect the todo state, allowing for dynamic updates based on user interaction. - Enhanced styling to visually differentiate completed and pending items. --- .../storybook/src/pages/Drag/Drag.stories.tsx | 39 +++++++++++++------ 1 file changed, 28 insertions(+), 11 deletions(-) diff --git a/packages/react/storybook/src/pages/Drag/Drag.stories.tsx b/packages/react/storybook/src/pages/Drag/Drag.stories.tsx index e45adab9..90294fb5 100644 --- a/packages/react/storybook/src/pages/Drag/Drag.stories.tsx +++ b/packages/react/storybook/src/pages/Drag/Drag.stories.tsx @@ -60,6 +60,7 @@ export const Markdown: Story = { interface TodoMarkProps extends MarkProps { style?: CSSProperties + todo?: 'pending' | 'done' } const todoOptions: Option[] = [ @@ -76,6 +77,7 @@ const todoOptions: Option[] = [ const isDone = props.value === 'x' return { ...props, + todo: isDone ? 'done' : 'pending', style: { display: 'block', textDecoration: isDone ? 'line-through' : undefined, @@ -90,6 +92,7 @@ const todoOptions: Option[] = [ const isDone = props.value === 'x' return { ...props, + todo: isDone ? 'done' : 'pending', style: { display: 'block', paddingLeft: '1.5em', @@ -105,6 +108,7 @@ const todoOptions: Option[] = [ const isDone = props.value === 'x' return { ...props, + todo: isDone ? 'done' : 'pending', style: { display: 'block', paddingLeft: '3em', @@ -123,19 +127,32 @@ const todoOptions: Option[] = [ }, ] -const TodoMark = ({nested, style}: TodoMarkProps) => { - const {value, change, readOnly} = useMark() - const isDone = value === 'x' +const TodoMark = ({nested, style, todo}: TodoMarkProps) => { + const mark = useMark() + const [isDone, setIsDone] = useState(mark.value === 'x') return ( - - change({content: isDone ? ' ' : 'x'})} - disabled={readOnly} - style={{marginRight: 6}} - /> + + {todo !== undefined && ( + { + const next = !isDone + setIsDone(next) + mark.value = next ? 'x' : ' ' + }} + disabled={mark.readOnly} + style={{marginRight: 6}} + /> + )} {nested} ) From 64fa868780235ef348473a3e4d1c9c2d68cd05ec Mon Sep 17 00:00:00 2001 From: Nowely Date: Sat, 14 Mar 2026 12:58:50 +0300 Subject: [PATCH 3/8] fix(drag): remove unnecessary newline in markup for nested todos - Updated the markup for nested todo items in both React and Vue storybook files to eliminate trailing newlines, ensuring cleaner output. - Adjusted the TODO_VALUE string to maintain consistent formatting across the project. --- .../storybook/src/pages/Drag/Drag.stories.tsx | 26 +++------------ .../storybook/src/pages/Drag/Drag.stories.ts | 32 +++++-------------- 2 files changed, 13 insertions(+), 45 deletions(-) diff --git a/packages/react/storybook/src/pages/Drag/Drag.stories.tsx b/packages/react/storybook/src/pages/Drag/Drag.stories.tsx index 90294fb5..6ae0dc94 100644 --- a/packages/react/storybook/src/pages/Drag/Drag.stories.tsx +++ b/packages/react/storybook/src/pages/Drag/Drag.stories.tsx @@ -72,7 +72,7 @@ const todoOptions: Option[] = [ }), }, { - markup: '- [__value__] __nested__\n\n', + markup: '- [__value__] __nested__\n', mark: (props: MarkProps) => { const isDone = props.value === 'x' return { @@ -87,7 +87,7 @@ const todoOptions: Option[] = [ }, }, { - markup: '\t- [__value__] __nested__\n\n', + markup: '\t- [__value__] __nested__\n', mark: (props: MarkProps) => { const isDone = props.value === 'x' return { @@ -103,7 +103,7 @@ const todoOptions: Option[] = [ }, }, { - markup: '\t\t- [__value__] __nested__\n\n', + markup: '\t\t- [__value__] __nested__\n', mark: (props: MarkProps) => { const isDone = props.value === 'x' return { @@ -161,42 +161,26 @@ const TodoMark = ({nested, style, todo}: TodoMarkProps) => { const TODO_VALUE = `# \u{1F4CB} Project Launch Checklist - [ ] Design Phase - \t- [ ] Create wireframes - \t- [x] Define color palette - \t- [ ] Design component library - - [x] Research - \t- [x] Analyze competitors - \t- [x] User interviews - \t\t- [x] Draft interview questions - \t\t- [x] Schedule 5 sessions - - [ ] Development - \t- [ ] Set up CI/CD pipeline - \t- [x] Write unit tests - \t- [ ] API integration - \t\t- [ ] Auth endpoints - \t\t- [ ] Data sync - - [ ] Launch - \t- [ ] Final QA pass - \t- [ ] Deploy to production +> \u2610 = pending \u2611 = done -> \u2610 = pending \u2611 = done` +` // ─── Test helper stories (used by Drag.spec.tsx) ───────────────────────────── diff --git a/packages/vue/storybook/src/pages/Drag/Drag.stories.ts b/packages/vue/storybook/src/pages/Drag/Drag.stories.ts index e711e0d5..5477601b 100644 --- a/packages/vue/storybook/src/pages/Drag/Drag.stories.ts +++ b/packages/vue/storybook/src/pages/Drag/Drag.stories.ts @@ -177,11 +177,11 @@ const todoOptions: Option[] = [ }), }, { - markup: '- [ ] __nested__\n\n' as Markup, + markup: '- [ ] __nested__\n' as Markup, mark: (props: MarkProps) => ({...props, todo: 'pending', style: {display: 'block'}}), }, { - markup: '- [x] __nested__\n\n' as Markup, + markup: '- [x] __nested__\n' as Markup, mark: (props: MarkProps) => ({ ...props, todo: 'done', @@ -189,11 +189,11 @@ const todoOptions: Option[] = [ }), }, { - markup: '\t- [ ] __nested__\n\n' as Markup, + markup: '\t- [ ] __nested__\n' as Markup, mark: (props: MarkProps) => ({...props, todo: 'pending', style: {display: 'block', paddingLeft: '1.5em'}}), }, { - markup: '\t- [x] __nested__\n\n' as Markup, + markup: '\t- [x] __nested__\n' as Markup, mark: (props: MarkProps) => ({ ...props, todo: 'done', @@ -201,11 +201,11 @@ const todoOptions: Option[] = [ }), }, { - markup: '\t\t- [ ] __nested__\n\n' as Markup, + markup: '\t\t- [ ] __nested__\n' as Markup, mark: (props: MarkProps) => ({...props, todo: 'pending', style: {display: 'block', paddingLeft: '3em'}}), }, { - markup: '\t\t- [x] __nested__\n\n' as Markup, + markup: '\t\t- [x] __nested__\n' as Markup, mark: (props: MarkProps) => ({ ...props, todo: 'done', @@ -224,42 +224,26 @@ const todoOptions: Option[] = [ const TODO_VALUE = `# \u{1F4CB} Project Launch Checklist - [ ] Design Phase - \t- [ ] Create wireframes - \t- [x] Define color palette - \t- [ ] Design component library - - [x] Research - \t- [x] Analyze competitors - \t- [x] User interviews - \t\t- [x] Draft interview questions - \t\t- [x] Schedule 5 sessions - - [ ] Development - \t- [ ] Set up CI/CD pipeline - \t- [x] Write unit tests - \t- [ ] API integration - \t\t- [ ] Auth endpoints - \t\t- [ ] Data sync - - [ ] Launch - \t- [ ] Final QA pass - \t- [ ] Deploy to production +> \u2610 = pending \u2611 = done -> \u2610 = pending \u2611 = done` +` // ─── Test helper stories (used by Drag.spec.ts) ────────────────────────────── From 9a9b9bbd32bda79eb804abfb5fd202c1453a7902 Mon Sep 17 00:00:00 2001 From: Nowely Date: Sat, 14 Mar 2026 16:53:18 +0300 Subject: [PATCH 4/8] feat(drag): integrate withPlaintValue decorator for TodoList story - Added the `withPlaintValue` decorator to the `TodoList` story, enhancing the interaction by displaying the raw value alongside the draggable input. - Refactored the `TodoList` story to utilize args for state management, simplifying the render logic. --- .../storybook/src/pages/Drag/Drag.stories.tsx | 23 ++++++------------- .../src/shared/lib/withPlaintValue.tsx | 22 ++++++++++++++++++ 2 files changed, 29 insertions(+), 16 deletions(-) create mode 100644 packages/react/storybook/src/shared/lib/withPlaintValue.tsx diff --git a/packages/react/storybook/src/pages/Drag/Drag.stories.tsx b/packages/react/storybook/src/pages/Drag/Drag.stories.tsx index 6ae0dc94..cd1f9479 100644 --- a/packages/react/storybook/src/pages/Drag/Drag.stories.tsx +++ b/packages/react/storybook/src/pages/Drag/Drag.stories.tsx @@ -6,6 +6,7 @@ import {useState} from 'react' import {Text} from '../../shared/components/Text' import {DRAG_MARKDOWN} from '../../shared/lib/sampleTexts' +import {withPlaintValue} from '../../shared/lib/withPlaintValue' import {markdownOptions} from '../Nested/MarkdownOptions' export default { @@ -231,21 +232,11 @@ export const ReadOnlyDrag: Story = { // ─── Todo list (all marks include \n\n) ─────────────────────────────────────── export const TodoList: Story = { - render: () => { - const [value, setValue] = useState(TODO_VALUE) - - return ( -
- - -
- ) + decorators: [withPlaintValue], + args: { + Mark: TodoMark as any, + options: todoOptions, + value: TODO_VALUE, + drag: true, }, } \ No newline at end of file diff --git a/packages/react/storybook/src/shared/lib/withPlaintValue.tsx b/packages/react/storybook/src/shared/lib/withPlaintValue.tsx new file mode 100644 index 00000000..6ba166bb --- /dev/null +++ b/packages/react/storybook/src/shared/lib/withPlaintValue.tsx @@ -0,0 +1,22 @@ +import {useCallback} from 'react' +import {useArgs} from 'storybook/preview-api' + +import {Text} from '../components/Text' + +export const withPlaintValue = (Story: any) => { + const [args, updateArgs] = useArgs() + + const handleChange = useCallback( + (newValue: string) => { + updateArgs({value: newValue}) + }, + [updateArgs] + ) + + return ( + <> + + {args.value !== undefined && } + + ) +} \ No newline at end of file From 399cd38d2f91179214aef48ca85cf0d43a0af218 Mon Sep 17 00:00:00 2001 From: Nowely Date: Sat, 14 Mar 2026 16:58:17 +0300 Subject: [PATCH 5/8] refactor(drag): update TodoList story to use MarkedInputProps - Changed the type of the `TodoList` story to `StoryObj>` for better type safety. - Updated the `Mark` prop assignment to use the correct type, enhancing the integration with the MarkedInput component. --- packages/react/storybook/src/pages/Drag/Drag.stories.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/storybook/src/pages/Drag/Drag.stories.tsx b/packages/react/storybook/src/pages/Drag/Drag.stories.tsx index cd1f9479..85dfd2f3 100644 --- a/packages/react/storybook/src/pages/Drag/Drag.stories.tsx +++ b/packages/react/storybook/src/pages/Drag/Drag.stories.tsx @@ -1,5 +1,5 @@ import {MarkedInput, useMark} from '@markput/react' -import type {MarkProps, Option} from '@markput/react' +import type {MarkProps, MarkedInputProps, Option} from '@markput/react' import type {Meta, StoryObj} from '@storybook/react-vite' import type {CSSProperties, ReactNode} from 'react' import {useState} from 'react' @@ -231,10 +231,10 @@ export const ReadOnlyDrag: Story = { // ─── Todo list (all marks include \n\n) ─────────────────────────────────────── -export const TodoList: Story = { +export const TodoList: StoryObj> = { decorators: [withPlaintValue], args: { - Mark: TodoMark as any, + Mark: TodoMark, options: todoOptions, value: TODO_VALUE, drag: true, From f8b4a15690c75fc5db0949726d1e3e47c9edbd56 Mon Sep 17 00:00:00 2001 From: Nowely Date: Sat, 14 Mar 2026 22:57:10 +0300 Subject: [PATCH 6/8] fix(drag): correct decorator import and add withPlainValue functionality - Updated the import statement for the `withPlainValue` decorator to fix a typo. - Introduced the `withPlainValue` decorator to manage state and display the plain value in the `TodoList` story, enhancing user interaction. --- packages/react/storybook/src/pages/Drag/Drag.stories.tsx | 4 ++-- .../shared/lib/{withPlaintValue.tsx => withPlainValue.tsx} | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) rename packages/react/storybook/src/shared/lib/{withPlaintValue.tsx => withPlainValue.tsx} (73%) diff --git a/packages/react/storybook/src/pages/Drag/Drag.stories.tsx b/packages/react/storybook/src/pages/Drag/Drag.stories.tsx index 85dfd2f3..4070c34c 100644 --- a/packages/react/storybook/src/pages/Drag/Drag.stories.tsx +++ b/packages/react/storybook/src/pages/Drag/Drag.stories.tsx @@ -6,7 +6,7 @@ import {useState} from 'react' import {Text} from '../../shared/components/Text' import {DRAG_MARKDOWN} from '../../shared/lib/sampleTexts' -import {withPlaintValue} from '../../shared/lib/withPlaintValue' +import {withPlainValue} from '../../shared/lib/withPlainValue' import {markdownOptions} from '../Nested/MarkdownOptions' export default { @@ -232,7 +232,7 @@ export const ReadOnlyDrag: Story = { // ─── Todo list (all marks include \n\n) ─────────────────────────────────────── export const TodoList: StoryObj> = { - decorators: [withPlaintValue], + decorators: [withPlainValue], args: { Mark: TodoMark, options: todoOptions, diff --git a/packages/react/storybook/src/shared/lib/withPlaintValue.tsx b/packages/react/storybook/src/shared/lib/withPlainValue.tsx similarity index 73% rename from packages/react/storybook/src/shared/lib/withPlaintValue.tsx rename to packages/react/storybook/src/shared/lib/withPlainValue.tsx index 6ba166bb..73fd430f 100644 --- a/packages/react/storybook/src/shared/lib/withPlaintValue.tsx +++ b/packages/react/storybook/src/shared/lib/withPlainValue.tsx @@ -3,7 +3,7 @@ import {useArgs} from 'storybook/preview-api' import {Text} from '../components/Text' -export const withPlaintValue = (Story: any) => { +export const withPlainValue = (Story: any) => { const [args, updateArgs] = useArgs() const handleChange = useCallback( @@ -16,7 +16,7 @@ export const withPlaintValue = (Story: any) => { return ( <> - {args.value !== undefined && } + {args.value !== undefined && } ) } \ No newline at end of file From 44cc5eb1bb0f1404cfa5571e71e6a781b19858a3 Mon Sep 17 00:00:00 2001 From: Nowely Date: Sun, 15 Mar 2026 00:00:25 +0300 Subject: [PATCH 7/8] feat(text): enhance Text component with new styling and structure - Refactored the Text component to include a container with a header and label for better organization and presentation. - Updated CSS styles to improve the visual appearance, including borders and background colors. - Adjusted the layout in the withPlainValue decorator to accommodate the new Text component structure, ensuring a consistent design. --- .../storybook/src/pages/Drag/Drag.stories.tsx | 27 +++--- .../src/shared/components/Text/Text.css | 89 ++++++++++++++++--- .../src/shared/components/Text/Text.tsx | 16 ++-- .../src/shared/lib/withPlainValue.tsx | 22 ++++- 4 files changed, 122 insertions(+), 32 deletions(-) diff --git a/packages/react/storybook/src/pages/Drag/Drag.stories.tsx b/packages/react/storybook/src/pages/Drag/Drag.stories.tsx index 4070c34c..96b43270 100644 --- a/packages/react/storybook/src/pages/Drag/Drag.stories.tsx +++ b/packages/react/storybook/src/pages/Drag/Drag.stories.tsx @@ -81,8 +81,7 @@ const todoOptions: Option[] = [ todo: isDone ? 'done' : 'pending', style: { display: 'block', - textDecoration: isDone ? 'line-through' : undefined, - opacity: isDone ? 0.5 : undefined, + opacity: isDone ? 0.55 : undefined, } as CSSProperties, } }, @@ -96,9 +95,9 @@ const todoOptions: Option[] = [ todo: isDone ? 'done' : 'pending', style: { display: 'block', - paddingLeft: '1.5em', - textDecoration: isDone ? 'line-through' : undefined, - opacity: isDone ? 0.5 : undefined, + paddingLeft: '22px', + borderLeft: '2px solid #d0d7de', + opacity: isDone ? 0.55 : undefined, } as CSSProperties, } }, @@ -112,9 +111,10 @@ const todoOptions: Option[] = [ todo: isDone ? 'done' : 'pending', style: { display: 'block', - paddingLeft: '3em', - textDecoration: isDone ? 'line-through' : undefined, - opacity: isDone ? 0.5 : undefined, + paddingLeft: '22px', + marginLeft: '24px', + borderLeft: '2px solid #d0d7de', + opacity: isDone ? 0.55 : undefined, } as CSSProperties, } }, @@ -123,7 +123,13 @@ const todoOptions: Option[] = [ markup: '> __nested__\n\n', mark: (props: MarkProps) => ({ ...props, - style: {display: 'block', fontSize: '0.85em', color: '#888', fontStyle: 'italic'} as CSSProperties, + style: { + display: 'block', + fontSize: '0.85em', + color: '#888', + fontStyle: 'italic', + marginTop: 16, + } as CSSProperties, }), }, ] @@ -137,8 +143,7 @@ const TodoMark = ({nested, style, todo}: TodoMarkProps) => { style={{ ...style, margin: '0 1px', - textDecoration: isDone ? 'line-through' : undefined, - opacity: isDone ? 0.5 : undefined, + opacity: isDone ? 0.55 : undefined, }} > {todo !== undefined && ( diff --git a/packages/react/storybook/src/shared/components/Text/Text.css b/packages/react/storybook/src/shared/components/Text/Text.css index 20635e98..b110eae8 100644 --- a/packages/react/storybook/src/shared/components/Text/Text.css +++ b/packages/react/storybook/src/shared/components/Text/Text.css @@ -1,12 +1,79 @@ -pre { - font-family: - Apple-System, - Arial, - Helvetica, - PingFang SC, - Hiragino Sans GB, - Microsoft YaHei, - STXihei, - sans-serif; - font-size: 14px; +.text-container { + border: 1px solid #d0d7de; + border-radius: 6px; + overflow: hidden; +} + +.text-header { + background: #f0f3f6; + padding: 6px 16px; + border-bottom: 1px solid #d0d7de; +} + +.text-label { + font-size: 12px; + font-weight: 600; + color: #6b7280; + text-transform: uppercase; + letter-spacing: 0.06em; + font-family: Arial, Helvetica, sans-serif; +} + +.text-label::before { + content: ' '; + color: #0550ae; + font-style: normal; + letter-spacing: 0; +} + +.text-container.text-inset { + border: none; + border-left: 1px solid #d0d7de; + border-radius: 0; + height: 100%; + background: #f6f8fa; +} + +.text-container.text-inset .text-header { + background: transparent; + border-bottom-color: #d0d7de; +} + +.text-container.text-inset .text-pre { + background: transparent; +} + +.tok-heading-prefix { + color: #8b949e; +} +.tok-heading-text { + color: #0550ae; + font-weight: 600; +} +.tok-bullet { + color: #8b949e; +} +.tok-checked { + color: #1a7f37; + font-weight: 600; +} +.tok-unchecked { + color: #8b949e; +} +.tok-blockquote { + color: #8b949e; + font-style: italic; +} + +.text-pre { + font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; + font-size: 13px; + background: #f6f8fa; + padding: 12px 12px; + overflow-x: auto; + line-height: 1.5; + color: #24292f; + margin: 0; + white-space: pre-wrap; + word-break: break-word; } diff --git a/packages/react/storybook/src/shared/components/Text/Text.tsx b/packages/react/storybook/src/shared/components/Text/Text.tsx index c5ae58a3..8ee03e58 100644 --- a/packages/react/storybook/src/shared/components/Text/Text.tsx +++ b/packages/react/storybook/src/shared/components/Text/Text.tsx @@ -3,12 +3,16 @@ import './Text.css' export interface TextProps { value: string label?: string + className?: string } -export const Text = ({value, label}: TextProps) => ( - <> -
- {label && {label}} - 
{value}
- +export const Text = ({value, label, className}: TextProps) => ( +
+ {label && ( +
+ {label} +
+ )} + 
{value}
+
) \ No newline at end of file diff --git a/packages/react/storybook/src/shared/lib/withPlainValue.tsx b/packages/react/storybook/src/shared/lib/withPlainValue.tsx index 73fd430f..cdd7966f 100644 --- a/packages/react/storybook/src/shared/lib/withPlainValue.tsx +++ b/packages/react/storybook/src/shared/lib/withPlainValue.tsx @@ -14,9 +14,23 @@ export const withPlainValue = (Story: any) => { ) return ( - <> - - {args.value !== undefined && } - +
+
+ +
+ {args.value !== undefined && ( +
+ +
+ )} +
) } \ No newline at end of file From 262f0f7e83a6066336963f0ba240627eeb1380ad Mon Sep 17 00:00:00 2001 From: Nowely Date: Sun, 15 Mar 2026 00:27:02 +0300 Subject: [PATCH 8/8] feat(storybook): add global toggle for plain value display - Introduced a global type `showPlainValue` in Storybook to toggle the visibility of the plain value panel. - Updated the `withPlainValue` decorator to utilize the global state, allowing for conditional rendering based on the toggle's value. - Enhanced the user experience by providing a toolbar option to show or hide the plain value in stories. --- packages/react/storybook/.storybook/preview.ts | 14 ++++++++++++++ .../storybook/src/shared/lib/withPlainValue.tsx | 8 +++++++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/react/storybook/.storybook/preview.ts b/packages/react/storybook/.storybook/preview.ts index b6dc191f..1dbcd053 100644 --- a/packages/react/storybook/.storybook/preview.ts +++ b/packages/react/storybook/.storybook/preview.ts @@ -1,6 +1,20 @@ import type {Preview} from '@storybook/react-vite' const preview: Preview = { + globalTypes: { + showPlainValue: { + name: 'Plain Value', + description: 'Toggle plain value panel', + defaultValue: 'show', + toolbar: { + icon: 'eye', + items: [ + {value: 'show', icon: 'eye'}, + {value: 'hide', icon: 'eyeclose'}, + ], + }, + }, + }, parameters: { controls: { hideNoControlsWarning: true, diff --git a/packages/react/storybook/src/shared/lib/withPlainValue.tsx b/packages/react/storybook/src/shared/lib/withPlainValue.tsx index cdd7966f..3b72165a 100644 --- a/packages/react/storybook/src/shared/lib/withPlainValue.tsx +++ b/packages/react/storybook/src/shared/lib/withPlainValue.tsx @@ -1,10 +1,12 @@ import {useCallback} from 'react' -import {useArgs} from 'storybook/preview-api' +import {useArgs, useGlobals} from 'storybook/preview-api' import {Text} from '../components/Text' export const withPlainValue = (Story: any) => { const [args, updateArgs] = useArgs() + const [globals] = useGlobals() + const showPlainValue = globals.showPlainValue !== 'hide' const handleChange = useCallback( (newValue: string) => { @@ -13,6 +15,10 @@ export const withPlainValue = (Story: any) => { [updateArgs] ) + if (!showPlainValue) { + return + } + return (