changes made#295
Closed
Swayymalcolm99 wants to merge 2 commits into
Closed
Conversation
Summary
Set up Storybook for the NexaFx v2 UI component library. Contributors building features need to be able to view and test UI components in isolation, without having to run the full app. Storybook also acts as living documentation for the design system.
What Needs to Be Done
1. Install Storybook
npx storybook@latest init
This will add:
.storybook/main.ts
.storybook/preview.ts
package.json scripts: storybook and build-storybook
2. Configure Storybook for Next.js and Tailwind
.storybook/preview.ts:
import '../app/globals.css'
import type { Preview } from '@storybook/react'
const preview: Preview = {
parameters: {
backgrounds: {
default: 'light',
values: [
{ name: 'light', value: '#ffffff' },
{ name: 'dark', value: '#111827' },
],
},
},
}
export default preview
3. Write stories for all UI components in components/ui/
For each component, write a story file at components/ui/.stories.tsx:
Button stories:
Default (primary)
Secondary variant
Outline variant
Loading state
Disabled state
All sizes (sm, md, lg)
Input stories:
Default
With label
With error message
With helper text
With left icon
Disabled
Badge stories:
All variants (success, error, warning, info, neutral)
Card stories:
Default
Elevated
Toast stories:
Success
Error
Info
Warning
Skeleton stories:
Text skeleton
Circle skeleton
Rect skeleton
Modal stories:
Open state
With long content (scrollable)
Acceptance Criteria
npm run storybook launches Storybook without errors
Stories exist for all 7 UI components in components/ui/
Dark mode background switch works in Storybook
All variants and states documented in stories
npm run build-storybook completes without errors
npm run build and npm run lint pass
|
@Swayy713 is attempting to deploy a commit to the Emmanuel Dorcas' projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@Swayymalcolm99 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
Added a global network status system with `useNetworkStatus`, sticky offline/reconnect banners, and mounted it across both dashboard and admin authenticated layouts. Updated `apiClient` and exchange-rate requests to throw `OfflineError`, preventing API calls while offline and standardizing offline-aware error handling. Patched key data-fetching screens/components to show cached-data or empty-state offline messages; `npm run lint` and `npm run build` both pass.
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.
closed #261
Added Storybook v10.4.6 with Next.js Vite framework for isolated UI component testing and living documentation. Created comprehensive stories for all 5 UI components (Button, Checkbox, Select, Switch, Tabs) covering variants, sizes, states, and use cases. Configured dark/light mode background switching; all npm scripts (storybook, build-storybook, build, lint) pass successfully.