feat(components): base component library#4
Closed
joetakara wants to merge 199 commits into
Closed
Conversation
Move write permission to job level in ci.yml. Pin action SHAs in release/size/sonar workflows. Use export...from in docs page. Use top-level await in MCP. Use node: prefix for fs/path imports.
Add size-match-font utility, move spinner styles to BEM class, add audit-code agent, rewrite all rules and docs in English, fix Tailwind v4 syntax.
Radius is now an independent prop (none/sm/md/lg/xl/full), not tied to size. Size controls structure (φ math), radius controls style (Tailwind standard). Gitignore decisions/.
Add storybook.md rule, radius prop in stories, full API reference in docs. Generic all rules/agents. Add docs addon. Home page uses design tokens.
Add live component previews in docs. Source exports for dev (no build needed). Design anatomy table, with icons demo, as-a-link pattern. SVG opacity as attributes. Remove tailwindcss from styles, consumer imports first.
Pin all third-party and first-party actions to commit sha so workflow behavior stays reproducible across upstream releases. Drop the redundant ci run on push to main — branch protection plus required linear history already ensure main matches a commit that passed ci on its pull request.
Add chromatic.yml — build storybook, upload to chromatic on pull request and push to main. Pin chromaui/action to sha. Install chromatic cli in apps/storybook so contributors can run snapshots locally before opening a pull request. Set buildScriptName so chromatic resolves the storybook build script without flags. Ignore build-storybook.log emitted by the cli.
The pre-commit hook ran lint-staged from the repo root, so eslint loaded the root flat config. The root config ignores apps/** and packages/**, so workspace files silently passed without firing the per-package rules. CI runs the same lint via turbo with cwd inside each package, so the gap surfaced only after push. Add --flag v10_config_lookup_from_file to the eslint task in .lintstagedrc.json. ESLint resolves eslint.config from each file being linted instead of from cwd, so workspace files load their own package config and fire all the rules CI uses. The flag ships in ESLint 9 as opt-in and becomes the default in ESLint 10. Reference: eslint/eslint#18385.
Upgrade eslint 9 -> 10 across the workspace. ESLint 10 resolves the flat config from each file being linted by default, fixing the silent miss when lint-staged invoked eslint from the repo root (eslint/eslint#18385). Drop the v10_config_lookup_from_file flag from .lintstagedrc.json — no longer needed. Replace eslint-plugin-react with @eslint-react/eslint-plugin (flat-config first, peer ^10.0.0, modern React 19 patterns). Pull eslint-plugin-react-hooks 5 -> 7, eslint-plugin-nextfriday 1.x -> 2.0.0, and @eslint/js 9 -> 10 for v10 peers. Refactor AvatarGroup to propagate size through React Context in avatar-group-context.ts instead of Children.toArray + cloneElement, addressing the new @eslint-react/no-children-to-array and no-clone-element rules. Avatar reads the inherited size when no explicit size is set. Reorder JSX spread to come last across stories and a few component files per the new nextfriday/jsx-spread-props-last rule.
Use storybook/test to assert that <Button isDisabled> renders with the native disabled attribute and that clicking the button does not invoke onPress. Bypass user-event's pointer-events check (disabled buttons set pointer-events: none via the status-disabled utility, which user-event refuses to click). Add storybook to packages/react devDependencies so stories in this workspace can resolve `storybook/test` during the runtime story tests in apps/storybook.
Surface the link to the public Chromatic library so consumers can browse the snapshot history and visual baselines alongside the existing Sonar and CI badges.
Extract chained && commands into named scripts so each step can be invoked, debugged, and composed independently. apps/docs typecheck splits into typecheck:gen (next typegen) plus typecheck:check (tsc --noEmit). apps/storybook and packages/react test:coverage split into test:coverage-run (vitest --coverage) plus coverage:normalize (the lcov fixup that Sonar reads).
The bugs metric mirrors the same Sonar gate already surfaced by the quality gate badge, so the standalone bugs badge adds no extra signal in the header.
Adopt the industry-aligned Tailwind scale (12 / 14 / 16 / 18 / 20 / 24). Avatar md / lg / xl shrink to text-sm / text-lg / text-xl now that text-sm and text-lg are permitted in component sizing. Story argType descriptions reframe size scales around their role anchor instead of the perceptual ratio.
|
|
This PR has been automatically marked as stale because it has not had activity in the last 30 days. It will be closed in 7 days if no further activity occurs. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Base component library for Fried UI v1 release — components, design tokens, docs, and tooling.
Test plan
pnpm buildpassespnpm lint0 errorspnpm typecheckpassespnpm testall tests pass