ViewComponent

When you’re designing three features simultaneously, they start bleeding into each other. This time I added the following to a tournament bracket management app: FAB Feedback Button — floating button bottom-right → Telegram notification Role-Based Bracket Edit Permissions — tournament vs. friendly mode determines whether regular participants can edit the bracket Audit Log — records who changed what and when, with before/after data Each is simple on its own, but doing them together forced a lot of decisions: where to check permissions, where to write logs, and how much to expose in the UI. ...

I added click-to-highlight interactivity to an SVG-based tournament bracket built with Rails 8 and ViewComponent. Here’s what I ran into. The goal: click a player’s row in the bracket → all matches featuring that player get a subtle color highlight. Background: SVG-rendered bracket The bracket isn’t HTML divs — it’s a pure SVG rendered by a BracketTreeComponent (ViewComponent). The component calculates coordinates for each match slot and emits <rect>, <text>, <circle>, and connector <path> elements. ...

While documenting UX flows with Rails + Lookbook, I hit a moment of “something feels off.” Each Step only showed wireframe fragments, so looking at the Lookbook list gave zero sense of the overall flow. I fixed two things: Add a Mermaid flowchart Overview step to each flow Redesign all Step template structures The Problem: Lookbook Step Previews Feel Like “Context-Free Fragments” # @label Admin UX Flow # @logical_path ux_flows class UxFlows::AdminFlowPreview < ViewComponent::Preview # @label 1. Login -> Admin Dashboard def step_1_login_dashboard render_with_template end # ... end Each step_* method renders an ERB template via render_with_template. The ERB contains a wireframe with a simple step navigation bar at the top. ...

I migrated 47 ViewComponents in a Rails 8 project to a warm orange theme and built a full Lookbook preview system. Here are the real issues I ran into. Background The project already had: 47 ViewComponents across 15 categories (input, layout, navigation, card, typography, etc.) CSS Custom Properties based design tokens (tokens.css) Tailwind CSS 4 + Propshaft asset pipeline The goal was to adopt a BMC (Buy Me a Coffee) inspired warm orange theme with a dark sidebar and stone palette, and build comprehensive Lookbook previews. ...

Rails + ViewComponent + Lookbook 조합으로 컴포넌트 라이브러리를 만들 때, Stimulus 컨트롤러가 전부 스텁(빈 껍데기) 상태로 남아있는 상황을 맞닥뜨렸다. 13개 컨트롤러 중 3개만 동작하고 나머지 10개는 connect() {} 한 줄짜리였다. 이걸 전부 구현하면서 겪은 삽질을 정리한다. 구현 대상 총 11개 컨트롤러를 4단계로 나눠서 구현했다. Wave 컨트롤러 핵심 기술 1 TagInput, FileDropzone, CategoryTab DOM 조작, 드래그 이벤트 2 ScrollReveal, ScrollScale, VideoScrubbing, HorizontalScroll RAF 쓰로틀, IntersectionObserver, ResizeObserver 3 ScrambleText, RandomReveal RAF 애니메이션 루프, Fisher-Yates 셔플 4 ImageCarousel, CarouselContainer 드래그/터치, translateX 트랜지션 삽질 1: Lookbook 프리뷰에서 Stimulus가 아예 안 됨 가장 크게 막혔던 부분이다. 컨트롤러를 다 구현하고 Lookbook을 열었는데 아무 동작도 하지 않는다. 크롬 DevTools를 열어보니 data-controller 속성은 붙어있는데 Stimulus가 연결이 안 된 상태였다. ...