[WEB-4879] refactor: organize stories and remove logs

[JayashTripathy]

Description

This PR includes—

• Organized folders in stories by prepending domain (Components/emoji...), which will create the folder hierarchy
• Unnecessary console log cleanup
• Improve type safety

Type of Change

• Code refactoring

[coderabbitai]

Walkthrough

Storybook story meta titles were updated to use hierarchical names. The EmojiPicker story also tightened its state type by importing TChangeHandlerProps from its helper and simplified its onChange handler. No component logic changed; edits are limited to story files and a helper type export.

Changes

Cohort / File(s)	Change summary
Storybook title realignment packages/propel/src/animated-counter/animated-counter.stories.tsx, packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx, packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx	Updated Storybook meta title strings to hierarchical paths (e.g., Components/...); no logic or API changes.
EmojiPicker story typing + handler packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx, packages/propel/src/emoji-icon-picker/helper.ts	Story imports and uses TChangeHandlerProps; state narrowed to TChangeHandlerProps | null; onChange now only sets state (removed console logging). Exported TChangeHandlerProps from helper.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• [WEB-4320] dev: propel emoji reaction component #7741 — Touches the same emoji-reaction story modules; similar meta title adjustments.
• [WEB-4860] dev: propel animated counter component #7740 — Involves the AnimatedCounter story meta; overlaps with the title update here.

Suggested labels

🌐frontend

Suggested reviewers

• prateekshourya29
• sriramveeraghanta

Poem

A hop, a bop, I tidy the tales—
Titles in rows, like garden trails.
Emojis wink, with types that stick,
My paws click-clack, review done quick.
Carrot confetti, stories align—
Ship it, friend—our burrow’s fine! 🥕✨

Pre-merge checks (2 passed, 1 warning)

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The current pull request description includes a high-level summary under “Description” and a checked “Type of Change” but omits the “Test Scenarios” and “References” sections required by the repository template, making it incomplete relative to the prescribed structure.	Please add the missing “Test Scenarios” section describing how the changes were verified and a “References” section linking any related issues or documentation; you may also include a “Screenshots and Media” section (or note if not applicable) to fully align with the template.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Title Check	✅ Passed	The title concisely reflects the PR intent: a refactor that re-organizes story titles and removes logging. The changeset updates Storybook meta titles into a Components/* hierarchy and removes a console.log from the emoji picker, which aligns with "organize stories and remove logs." Including the ticket prefix [WEB-4879] is acceptable and the phrasing is clear for reviewers.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch refactor-storybook-cleanup

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull Request Overview

This PR reorganizes Storybook component titles to follow a hierarchical structure for better organization and navigation. The changes update story titles to use consistent "Components/" prefixes with logical groupings like "Emoji" for related components.

• Updates story titles to include component hierarchy for better organization
• Groups emoji-related components under "Components/Emoji/" namespace
• Places animated counter component under "Components/" for consistent structure

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
emoji-reaction.stories.tsx	Updates story title from "EmojiReaction" to "Components/Emoji/EmojiReaction"
emoji-reaction-picker.stories.tsx	Updates story title from "EmojiReactionPicker" to "Components/Emoji/EmojiReactionPicker"
emoji-picker.stories.tsx	Updates story title to "Components/Emoji/EmojiPicker" and improves type safety
animated-counter.stories.tsx	Updates story title from "AnimatedCounter" to "Components/AnimatedCounter"

Comments suppressed due to low confidence (1)

packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx:1

• Console.log statement should be removed from production code. Use a proper logging mechanism or remove this debug statement.

import { useState } from "react";

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[makeplane]

Linked to Plane Work Item(s)

• [WEB-4879] [Propel_UI] cleanup and reorganization of storybook stories

This comment was auto-generated by Plane

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (3)

packages/propel/src/animated-counter/animated-counter.stories.tsx (1)

5-7: Storybook config verified; update Chromatic baselines for title change
Config in packages/propel uses @storybook/react-vite@9.1.2 and your stories import from it—no duplicate “Components/AnimatedCounter” titles detected.
Nit: consider

• import type { ComponentProps } from "react" instead of React.ComponentProps
• useState(args.count ?? 0) instead of args.count || 0

packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx (1)

7-14: Title hierarchy LGTM; swap console.log for Storybook action for cleaner DX

The rename looks good. Optional: replace console.log in the story with the Actions addon so interactions show up in the panel.

Suggested changes:

+import { action } from "@storybook/addon-actions";
@@
-        onChange={(emoji) => {
-          setSelectedEmoji(emoji);
-          console.log("Selected emoji:", emoji);
-        }}
+        onChange={(emoji) => {
+          setSelectedEmoji(emoji);
+          action("onChange")(emoji);
+        }}

packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx (1)

3-5: Use a type-only import for TChangeHandlerProps

Avoids pulling types into runtime bundles and keeps intent explicit.

-import { EmojiIconPickerTypes, TChangeHandlerProps } from "./helper";
+import { EmojiIconPickerTypes } from "./helper";
+import type { TChangeHandlerProps } from "./helper";

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0f7bfdd and 4aa25fe.

📒 Files selected for processing (4)

• packages/propel/src/animated-counter/animated-counter.stories.tsx (1 hunks)
• packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx (2 hunks)
• packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx (1 hunks)
• packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx (2)

packages/propel/src/emoji-icon-picker/emoji-picker.tsx (1)

• EmojiPicker (10-136)

packages/propel/src/emoji-icon-picker/helper.tsx (1)

• TChangeHandlerProps (8-19)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Build and lint web apps
• GitHub Check: Analyze (javascript)

🔇 Additional comments (3)

packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx (1)

4-6: Title hierarchy LGTM

Consistent with the new Components/Emoji grouping.

packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx (2)

6-8: Title hierarchy LGTM

Matches the Components/Emoji grouping used elsewhere.

---

19-21: Nice: narrowed state type improves story correctness

This ensures the onChange payload matches the component contract.

[makeplane]

Linked to Plane Work Item(s)

• [WEB-4879] [Propel_UI] cleanup and reorganization of storybook stories

This comment was auto-generated by Plane