-
-
Notifications
You must be signed in to change notification settings - Fork 390
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: refactor MemberProfile component
- Loading branch information
1 parent
5fab501
commit 6dc9206
Showing
15 changed files
with
408 additions
and
145 deletions.
There are no files selected for viewing
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,252 @@ | ||
| import { Story, Preview } from '@storybook/addon-docs' | ||
| import { MemberProfile } from './MemberProfile.tsx' | ||
| import { Provider, observable } from 'mobx-react' | ||
|
|
||
| <Meta title="Components|MemberProfile" component={MemberProfile} /> | ||
|
|
||
| # Member Profile | ||
|
|
||
| Using the Member Profile component | ||
|
|
||
| <Story name="Default story"> | ||
| <Provider> | ||
| <MemberProfile | ||
| user={{ | ||
| userName: 'example', | ||
| displayName: 'displayName', | ||
| profileType: 'member', | ||
| coverImages: [], | ||
| about: | ||
| 'Curabitur vulputate sit amet felis quis aliquet. Maecenas varius congue arcu at elementum. Quisque in ornare odio.', | ||
| badges: { | ||
| verified: true, | ||
| }, | ||
| location: { | ||
| countryCode: 'nl', | ||
| latlng: {}, | ||
| }, | ||
| links: [ | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| ], | ||
| stats: { | ||
| userCreatedHowtos: [1], | ||
| userCreatedEvents: [1], | ||
| }, | ||
| }} | ||
| /> | ||
| </Provider> | ||
| </Story> | ||
|
|
||
| Stress testing the component | ||
|
|
||
| <Preview> | ||
| <Story name="No location data provided"> | ||
| <MemberProfile | ||
| user={{ | ||
| userName: 'aUserWithOutALocation', | ||
| displayName: 'User Without A Location', | ||
| profileType: 'member', | ||
| coverImages: [], | ||
| about: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non sollicitudin nunc. Sed in nisl in velit dapibus dapibus a ut nisi. Donec lectus tellus, pretium sed sollicitudin vitae, consequat vitae ante. Sed ex est, molestie ut augue in, vehicula tempor arcu. Curabitur at finibus enim.`, | ||
| links: [ | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| ], | ||
| stats: { | ||
| userCreatedHowtos: 1, | ||
| userCreatedEvents: 1, | ||
| }, | ||
| }} | ||
| /> | ||
| </Story> | ||
| <Story name="Short usernames"> | ||
| <MemberProfile | ||
| user={{ | ||
| userName: 'A', | ||
| displayName: 'ABC', | ||
| profileType: 'member', | ||
| coverImages: [], | ||
| about: `a`, | ||
| location: { | ||
| countryCode: 'nl', | ||
| latlng: {}, | ||
| }, | ||
| links: [ | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| ], | ||
| stats: { | ||
| userCreatedHowtos: 1, | ||
| userCreatedEvents: 1, | ||
| }, | ||
| }} | ||
| /> | ||
| </Story> | ||
| <Story name="Long broken username"> | ||
| <MemberProfile | ||
| user={{ | ||
| userName: | ||
| 'AReallyLongButBrokenDisplayNameWhichContainsHelpfulSpaceCharacters', | ||
| displayName: | ||
| 'A Really Long But Broken Display Name Which Contains Helpful Space Characters', | ||
| profileType: 'member', | ||
| coverImages: [], | ||
| about: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non sollicitudin nunc. Sed in nisl in velit dapibus dapibus a ut nisi. Donec lectus tellus, pretium sed sollicitudin vitae, consequat vitae ante. Sed ex est, molestie ut augue in, vehicula tempor arcu. Curabitur at finibus enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam accumsan tellus libero, et pellentesque ex mollis eget. Proin id dolor auctor elit viverra fermentum eget sit amet erat. Nullam et venenatis nunc. Sed a tellus cursus, dapibus massa eget, varius sapien. Morbi a facilisis nibh, vitae rhoncus massa. Integer iaculis nulla sit amet nunc lacinia, non elementum mi egestas. Nam turpis eros, luctus a est vel, commodo accumsan nunc. Phasellus consectetur pretium auctor. Vivamus at sollicitudin lacus. Sed id dapibus diam. Nulla condimentum, magna in ultricies suscipit, felis felis vestibulum nibh, vel euismod elit ipsum in turpis. Pellentesque elementum nisi non molestie efficitur. Vestibulum sed gravida ipsum. Suspendisse lacinia, lectus ut mattis volutpat, justo tellus sollicitudin dolor, non malesuada ex orci at nisi. Pellentesque maximus convallis nulla quis suscipit. Proin sodales dolor mauris. Suspendisse a mauris tortor. Morbi eleifend varius posuere. | ||
| Suspendisse mattis egestas justo eu faucibus. Nulla in feugiat mi. Mauris malesuada sapien nec leo scelerisque, et viverra massa commodo. Maecenas nunc metus, lacinia id dignissim a, dictum nec augue. Etiam condimentum maximus nulla ut imperdiet. Praesent tempor at risus eget luctus. Nulla eleifend, nisl ut fermentum iaculis, lectus orci imperdiet magna, id semper metus diam sit amet urna. Sed ultricies quam nisl, vel iaculis erat gravida vel. Donec cursus facilisis faucibus. Etiam elit sapien, tristique quis felis quis, vehicula ornare lorem. Sed tristique diam neque, in convallis turpis sodales ac. Phasellus blandit turpis sem, at ultricies nibh eleifend in. Aenean varius sem nec sodales porttitor. Proin non orci euismod, suscipit mauris eu, iaculis massa. Etiam nec vestibulum leo. Donec pharetra nunc ut arcu tincidunt dignissim. Aenean at pretium lectus, a lacinia neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec lacinia magna. Proin scelerisque commodo mattis. Pellentesque ullamcorper nunc eget eros vehicula, in sollicitudin enim aliquam. Sed id quam magna. Donec non accumsan arcu. Etiam nisi quam, consequat et ex id, hendrerit maximus tortor. Curabitur vulputate sit amet felis quis aliquet. Maecenas varius congue arcu at elementum. Quisque in ornare odio.`, | ||
| location: { | ||
| countryCode: 'nl', | ||
| latlng: {}, | ||
| }, | ||
| links: [ | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| ], | ||
| stats: { | ||
| userCreatedHowtos: 1, | ||
| userCreatedEvents: 1, | ||
| }, | ||
| }} | ||
| /> | ||
| </Story> | ||
| <Story name="Long unbroken username"> | ||
| <MemberProfile | ||
| user={{ | ||
| userName: | ||
| 'aReallyLongUnbrokenDisplayNameWhichDoesNotContainAnyHelpfulBreakpoints', | ||
| displayName: | ||
| 'aReallyLongUnbrokenDisplayNameWhichDoesNotContainAnyHelpfulBreakpoints', | ||
| profileType: 'member', | ||
| coverImages: [], | ||
| about: 'Long text', | ||
| location: { | ||
| countryCode: 'nl', | ||
| latlng: {}, | ||
| }, | ||
| links: [ | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| ], | ||
| stats: { | ||
| userCreatedHowtos: 1, | ||
| userCreatedEvents: 1, | ||
| }, | ||
| }} | ||
| /> | ||
| </Story> | ||
| <Story name="A long list of user provided links"> | ||
| <MemberProfile | ||
| user={{ | ||
| userName: 'aLongListOfUserLinks', | ||
| displayName: 'A Long List of User Links', | ||
| profileType: 'member', | ||
| coverImages: [], | ||
| about: 'Long text', | ||
| location: { | ||
| countryCode: 'nl', | ||
| latlng: {}, | ||
| }, | ||
| links: [ | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| { | ||
| url: 'https://example.com', | ||
| label: 'website', | ||
| }, | ||
| ], | ||
| stats: { | ||
| userCreatedHowtos: 1, | ||
| userCreatedEvents: 1, | ||
| }, | ||
| }} | ||
| /> | ||
| </Story> | ||
| </Preview> |
Oops, something went wrong.