Scaffold UI library with Storybook and add NavBar component#25
Merged
Conversation
- React 18 + TypeScript + Vite library mode - Storybook 8 with react-vite framework - Design tokens CSS (colors, spacing, typography, shadows) - Button: primary/secondary/ghost/danger variants, sm/md/lg sizes - Card: optional title and footer slots - Badge: success/warning/error/info/neutral variants - UserStatus story maps to platform three-tier user status
- Tokens: update semantic colors to platform dark theme (#0b162b bg, #e5eefc text, rgba borders, Inter font-family) - NavBar: sticky top bar with glass/blur effect matching platform style - Props: title, subtitle, links[], user, actions - User pill with avatar initial + Badge for user status - Active link highlight with blue tint - Stories: TitleOnly, WithUser, WithNavLinks, WithActions, user statuses
- Replace vanilla HTML/CSS/JS with React 18 + Vite frontend - NavBar: subtitle='Platform', title, user pill, back to dashboard action - Card: greeting text + meta list (service, user, timestamp) + footer button - Button: 'New Message' (primary), '← Dashboard' (ghost) - App.css: page background gradient + meta-list layout (no component CSS) - server.js: serve frontend/dist/ statically, add /api/user endpoint - Dockerfile: multi-stage build (frontend-build → production server) - Build context expanded to monorepo root for ui-library access - docker-compose.yml: build context: . / dockerfile: hello-world-app/Dockerfile - vite.config.js: resolve alias points to ui-library/src (no pre-build needed)
- Add .dockerignore at monorepo root: exclude **/node_modules/, .git/, **/dist/ — prevents local npm symlinks conflicting with Docker COPY - Remove .dockerignore from .gitignore so it can be tracked - CI: matrix include override for hello-world-app (context '.', explicit dockerfile) - CI: trigger hello-world-app rebuild on ui-library/** changes - CI: always-explicit file: path (no empty-string fallback)
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
1 participant
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.
This pull request introduces the initial implementation of a new React UI component library, including core components, their styles, Storybook configuration, and packaging setup. The main focus is on providing reusable, styled components (Button, Card, Badge, NavBar), complete with Storybook stories for documentation and testing, and setting up the project for distribution as a package.
Component Implementation and Exports:
Added
Button,Card,Badge, andNavBarcomponents with corresponding TypeScript types, CSS modules for styling, and index files for exports. Each component supports variants, sizing, and composability as appropriate. (src/components/Button/Button.tsx,src/components/Card/Card.tsx,src/components/Badge/Badge.tsx,src/components/NavBar/NavBar.tsx,src/components/Button/index.ts,src/components/Card/index.ts,src/components/Badge/index.ts,src/components/NavBar/index.ts) [1] [2] [3] [4] [5] [6] [7] [8]Created CSS modules for each component, defining consistent design tokens, variants, and responsive styles. (
src/components/Button/Button.module.css,src/components/Card/Card.module.css,src/components/Badge/Badge.module.css,src/components/NavBar/NavBar.module.css) [1] [2] [3] [4]Storybook Integration:
Added Storybook stories for all components, demonstrating their variants, states, and usage patterns to facilitate documentation and visual testing. (
src/components/Button/Button.stories.tsx,src/components/Card/Card.stories.tsx,src/components/Badge/Badge.stories.tsx,src/components/NavBar/NavBar.stories.tsx) [1] [2] [3] [4]Configured Storybook with Vite for fast development, including a preview file to apply design tokens and set up controls/layout. (
.storybook/main.ts,.storybook/preview.ts) [1] [2]Project Setup and Packaging:
Added a
package.jsonfor the UI library, specifying build scripts, dependencies, and export structure for compatibility with modern bundlers and consumers. (package.json)Created a central
index.tsentry point to export all components and import design tokens CSS. (src/index.ts)