Skip to content

BA-1584 Add Storybook for Notifications #128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Nov 12, 2024
Merged

BA-1584 Add Storybook for Notifications #128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9ad94ba
BA-1738 add storybook for notifications components
matheusysd Nov 5, 2024
6c6e202
Update changelog
matheusysd Nov 5, 2024
d4eb4de
Remove unnecessary component
matheusysd Nov 5, 2024
363f3b0
remove unused component
matheusysd Nov 8, 2024
d55898f
Rename storiesOrder and fix components order and add signature
matheusysd Nov 11, 2024
60e7d90
bump components package.json version
matheusysd Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 13 additions & 5 deletions packages/components/.storybook/decorators/withProviders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react'
import React, { useEffect } from 'react'

import { LoadingState, ThemeProvider } from '@baseapp-frontend/design-system'
import { RelayTestProvider, createTestEnvironment } from '@baseapp-frontend/graphql'
Expand All @@ -17,13 +17,21 @@ const withProviders = (Story: StoryFn, context: StoryContext) => {
// TODO: registering a few tailwind classess (used by @baseapp-frontend/design-system components), need to figure out why the @baseapp-frontend/components storybook are not including it correctly
// pb-3 px-3 w-full rounded-md bg-background-neutral px-2 py-1
const relayMockEnvironment = createTestEnvironment()
const { environment, queueOperationResolver } = relayMockEnvironment
const { environment, queueOperationResolver, resolveMostRecentOperation } = relayMockEnvironment

context.parameters.relayMockEnvironment = relayMockEnvironment

const mockResolvers = context.parameters.mockResolvers || {}

queueOperationResolver(mockResolvers)
const mockResolvers = context.parameters.mockResolvers || undefined
const mockData = context.parameters.mockData || {}
Comment on lines +24 to +25
Copy link

@coderabbitai coderabbitai bot Nov 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Change to mockResolvers affects existing stories and tests

Multiple Storybook story and test files use mockResolvers. Please ensure that changing the default value to undefined does not break these existing implementations.

🔗 Analysis chain

Verify backward compatibility of mockResolvers change

Changing the default value from an empty object to undefined might affect existing stories that expect mockResolvers to be an object. Please ensure this change doesn't break existing stories.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for stories that might be affected by this change
rg -l "mockResolvers" --type stories

# Check for any direct references to mockResolvers in test files
rg -l "mockResolvers" --type test

Length of output: 131

Script:

#!/bin/bash
# Search for Storybook stories that might be affected by this change
rg -l "mockResolvers" --glob "*.stories.tsx" --glob "*.stories.jsx"

# Search for test files that reference mockResolvers
rg -l "mockResolvers" --glob "*.test.tsx" --glob "*.spec.tsx" --glob "*.test.jsx" --glob "*.spec.jsx"

Length of output: 318

Script:

#!/bin/bash
# Search for Storybook stories that might be affected by this change
fd --glob "*.stories.tsx" --glob "*.stories.jsx" -e tsx -e jsx | xargs rg -l "mockResolvers"

# Search for test files that reference mockResolvers
fd --glob "*.test.tsx" --glob "*.spec.tsx" --glob "*.test.jsx" --glob "*.spec.jsx" -e tsx -e jsx | xargs rg -l "mockResolvers"

Length of output: 3854

Script:

#!/bin/bash
# Search for Storybook stories that might be affected by this change
fd --glob "*.stories.tsx" --glob "*.stories.jsx" | xargs rg -l "mockResolvers"

# Search for test files that reference mockResolvers
fd --glob "*.test.tsx" --glob "*.spec.tsx" --glob "*.test.jsx" --glob "*.spec.jsx" | xargs rg -l "mockResolvers"

Length of output: 3826


useEffect(() => {
if (!!mockResolvers) {
queueOperationResolver(mockResolvers)
}
if (mockData) {
resolveMostRecentOperation({ mockResolvers, data: mockData })
}
}, [mockData, resolveMostRecentOperation, queueOperationResolver, mockResolvers])

return (
<QueryClientProvider client={queryClient}>
Expand Down
10 changes: 7 additions & 3 deletions packages/components/.storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ const preview: Preview = {
// @ts-ignore
storySort: (a, b) => {
// NOTE: Storybook does not accept importing external variables for storySort,
// so the `storiesOrder` and `componentsStoriesOrder` are defined inline.
const storiesOrder = [
// so the `designSystemStoriesOrder` and `componentsStoriesOrder` are defined inline.
const designSystemStoriesOrder = [
'Iconography',
// Avatars
'AvatarWithPlaceholder',
Expand Down Expand Up @@ -95,6 +95,10 @@ const preview: Preview = {
'NavHorizontal',
'NavCentered',
'NavVertical',
//Notifications
'NotificationItem',
'NotificationsList',
'NotificationsPopover',
// Social
'Comments',
'CommentsList',
Expand All @@ -105,7 +109,7 @@ const preview: Preview = {
'ReactionButton',
'Timestamp',
]
const final = [...storiesOrder, ...componentsStoriesOrder]
const final = [...designSystemStoriesOrder, ...componentsStoriesOrder]

const titleA = a.title || ''
const titleB = b.title || ''
Expand Down
6 changes: 6 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# @baseapp-frontend/components

## 0.0.15

### Patch Changes

- Add Storybook for notifications components.

## 0.0.14

### Patch Changes
Expand Down
Loading
Loading