docs(www): render workspace components in Docusaurus and document Accordion - #297
Conversation
…ordion The docs site had no path for rendering a workspace component: www declared no @sipe-team dependency, and workspace `exports` resolves to raw `src/*.ts`, which webpack cannot consume. Add the vanilla-extract webpack plugin so Docusaurus compiles the packages' `.css.ts` from source — docs pages import @sipe-team/* directly, with no prebuilt dist, alias table, CSS injection, or build ordering. Adding a component is then just a www dependency plus its MDX page. - add Preview: renders children server-side with a "Show code" toggle. No react-live, no BrowserOnly — an example that only appeared after hydration would not prove the component server-renders - accordion.mdx with hand-written prop tables read off the source. No prop extraction, so packages/ stays untouched - _TEMPLATE.md fixes the five core sections; Accessibility and Known limitations are optional trailing sections a component adds when warranted Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Dark-only components landed as a dark card floating on a light neutral frame, which read as a broken render. Add an opt-in `theme="dark"` to Preview that swaps the stage to a dark canvas, so the example reads as deliberate; the Accordion examples use it. Also compact the stage padding and fold the "Show code" toggle into the card as a left-aligned footer instead of a floating right-aligned button. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. 🗂️ Base branches to auto review (2)
Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. 🚀 New features to boost your workflow:
|
Yeom-JinHo
changed the title
|
@3o14 문서 드리프트 가능성에는 100% 공감합니다.
이번엔 수동으로 파일럿을 확정하여 docs를 채우고 다음 phase로 자동화 flow 구축을 재검토해보겠습니다! |
3o14
left a comment
3o14
left a comment
There was a problem hiding this comment.
넵 추후에 script, JSDoc 보강해서 반영되면 좋겠네용
|
아! 그리고 SIDE 문서 보시는 분들 중엔 외국인은 없을 것 같아서, |
* docs(www): document Button and make the token chain survive production
Button is the only component that reads `vars`, so it's the first to need the
Style Dictionary value layer — and it exposed a production-only break: every
`var(--side-*)` resolved to nothing while dev worked and hid it.
Root cause: under source compilation the token bridge was emitted twice — once
by the injected `@sipe-team/tokens/styles.css`, and again by vanilla-extract
recompiling tokens' `themes.css.ts` through Button's `vars` import. Docusaurus's
advanced cssnano collapses the duplicated `@layer theme { … }` to a bare
`@layer theme;`, stripping the whole bridge.
Fix:
- alias `@sipe-team/tokens` to its built dist so its theme is compiled once
(via `build:tokens`); the bridge now has a single copy and full CSS
minification stays on. Components still compile from source
- inject `@sipe-team/tokens/styles.css` for the Style Dictionary value layer
(`--color-*` etc.), which is not vanilla-extract and can't come from source
button.mdx documents variant/size/leftIcon/rightIcon/asChild from source, with
hand-written prop tables. packages/ is untouched.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
* docs(www): sharpen Button captions, fix Back arrow, clarify disabled example
- Variant/Size captions now say when to reach for each option instead of just
restating the names, matching the accordion pilot's teaching tone
- the "With icons" example pointed a right chevron at "Back"; split the inline
icon into ArrowLeft/ArrowRight so Back points left and Next points right
- the Disabled example showed two identical unlabelled buttons; label them
Fill/Outline and note that disabled styling is uniform across variants, so the
sameness reads as an intentional demonstration rather than a mistake
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
@3o14 님이 주신 의견 다들 어떠신지 남겨주시면 감사할꺼 같습니다~~ |
|
#298 그냥 머지해버려서 여기 일반머지로 밀어넣을게용~! |
2 participants
Changes
문서 사이트에는 워크스페이스 컴포넌트를 렌더할 경로가 아예 없었습니다:
www는@sipe-team/*의존성을 하나도 선언하지 않았고, 워크스페이스exports는 rawsrc/*.ts로 해석되어 webpack이 그대로 소비할 수 없습니다 (vanilla-extract.css.ts포함). 이 PR은 그 경로를 처음부터 구축하고, Accordion을 파일럿 문서로 완성합니다. 이 문서는 나머지 컴포넌트로 확산할 표준 템플릿을 겸합니다.렌더 경로
@sipe-team/{accordion,button,icon}을 각 패키지의 빌드된dist로 webpack alias.build:deps(dev/build/pretypecheck에 체이닝)가 webpack 실행 전에 dist를 위상 순서로 빌드하도록 강제 — 깨끗한 클론에서 수동 사전 빌드 없이 빌드됩니다.tokens는 alias하지 않음 (dist JS에 런타임 import가 남지 않음, CSS만 필요).Preview프리미티브children을 서버에서 무조건 렌더하고code를 "Show code" 토글로 펼칩니다.react-live·BrowserOnly없음 — 하이드레이션 후에만 나타나는 예제는 SSR 렌더를 증명하지 못하기 때문입니다.--ifm-*변수만 사용 (Tailwind 없음). 중립 컨테이너로 accordion의 다크 전용 표면을 감쌉니다.accordion.mdxpackages/를 건드리지 않습니다. 존재하지 않는 prop(disabled,defaultValue)은 문서화하지 않고, 실제 API(type,initialValue,value/onValueChange,defaultOpen,asChild)만 기술합니다._TEMPLATE.md— 고정 섹션 순서/제목 +Preview사용법 + "API 표 수동 작성, 존재하지 않는 prop 금지" 규칙.Visuals
Checklist
_TEMPLATE.md에 확산 규칙 포함Additional Discussion Points
customCss배열 순서는 load-bearing입니다 (건드리지 마세요).tokensCss는 반드시 컴포넌트 스타일시트 뒤에 와야 합니다. cssnano(프로덕션 빌드에서만 실행)가 빈@layer theme;와 내용 있는@layer theme { … }를 중복으로 보고 마지막 것을 남기는데, vanilla-extract는 tokens contract 기반 스타일시트마다 상단에 빈@layer theme;를 방출합니다. 토큰을 앞에 두면 Button의 빈 선언이--side-*브릿지를 덮어써서 프로덕션 번들에서 브릿지가 통째로 사라지고, 빌드는 exit 0으로 통과하며, dev 서버는 압축을 안 해 이를 숨깁니다. 실측: 토큰 먼저 →--side-*정의 0개 / 토큰 나중 → 65개. 설정 파일에 긴 주석으로 경고를 남겨뒀습니다.