Skip to content

feat(storybook): add withPlainValue decorator and enhance drag/text stories#151

Merged
Nowely merged 8 commits intonextfrom
next-step
Mar 15, 2026
Merged

feat(storybook): add withPlainValue decorator and enhance drag/text stories#151
Nowely merged 8 commits intonextfrom
next-step

Conversation

@Nowely
Copy link
Owner

@Nowely Nowely commented Mar 15, 2026

Summary

  • Add withPlainValue decorator that provides a global toggle to display the plain string value of MarkedInput alongside the interactive component
  • Enhance TodoMark with checkbox state management and interactive checkbox functionality
  • Refactor Drag stories to use MarkedInputProps and the new decorator
  • Improve Text component styling and structure

Nowely added 8 commits March 14, 2026 11:02
- 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.
- 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.
- 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.
- 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.
- Changed the type of the `TodoList` story to `StoryObj<MarkedInputProps<TodoMarkProps>>` for better type safety.
- Updated the `Mark` prop assignment to use the correct type, enhancing the integration with the MarkedInput component.
- 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.
- 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.
- 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.
@vercel
Copy link

vercel bot commented Mar 15, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
markput-react Ready Ready Preview, Comment Mar 15, 2026 7:57am
markput-vue Ready Ready Preview, Comment Mar 15, 2026 7:57am
markput-website Ready Ready Preview, Comment Mar 15, 2026 7:57am

@Nowely Nowely merged commit 1d76c1f into next Mar 15, 2026
10 checks passed
@Nowely Nowely deleted the next-step branch March 15, 2026 07:58
Nowely pushed a commit that referenced this pull request Mar 15, 2026
🤖 I have created a release *beep* *boop*
---


## [0.6.0](0.5.0...0.6.0)
(2026-03-15)


### Features

* **blocks:** add block merging via Backspace/Delete and TodoList story
([#148](#148))
([0685033](0685033))
* **blocks:** Notion-like block editor with keyboard navigation, block
operations, and drag-and-drop
([#146](#146))
([4bd5534](4bd5534))
* **drag:** replace block mode with drag-and-drop row management
([#149](#149))
([83034e8](83034e8))
* **storybook:** add withPlainValue decorator and enhance drag/text
stories ([#151](#151))
([1d76c1f](1d76c1f))


### Refactoring

* **storybook:** standardize stories with PlainValuePanel and StoryObj
types across React and Vue
([#152](#152))
([42d21f3](42d21f3))


### Miscellaneous

* upgrade to Vite 8, Vitest 4.1, and Astro 6
([#150](#150))
([693966d](693966d))

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant