Skip to content

Commit

Permalink
chore: setup storybook with nx
Browse files Browse the repository at this point in the history
  • Loading branch information
@mariojsnunes
mariojsnunes committed Jul 4, 2024
1 parent 8cbf456 commit 2e6bf53
Show file tree
Hide file tree
Showing 23 changed files with 3,843 additions and 375 deletions.
4 changes: 3 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,4 +50,6 @@ functions/firebase-debug.log
*.tsbuildinfo
.nx
libs/dist
dist/*
dist/*

storybook-static
265 changes: 130 additions & 135 deletions apps/community-platform/src/pages/Research/Content/ResearchUpdate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,162 +58,157 @@ const ResearchUpdate = ({
}

return (
<>
<Flex
data-testid={`ResearchUpdate: ${updateIndex}`}
data-cy={`update_${updateIndex}`}
id={`update_${updateIndex}`}
mx={[0, 0, -2]}
mt={9}
sx={{ flexDirection: ['column', 'column', 'row'] }}
>
<Flex mx={[0, 0, 2]} sx={{ width: '100%', flex: 1 }} mb={[3, 3, 0]}>
<FlexStepNumber sx={{ height: 'fit-content' }}>
<Card py={3} px={4} sx={{ width: '100%', textAlign: 'center' }}>
<Heading as="p" mb={0}>
{updateIndex + 1}
</Heading>
</Card>
</FlexStepNumber>
</Flex>

<Flex
data-testid={`ResearchUpdate: ${updateIndex}`}
data-cy={`update_${updateIndex}`}
id={`update_${updateIndex}`}
mx={[0, 0, -2]}
mt={9}
sx={{ flexDirection: ['column', 'column', 'row'] }}
sx={{
width: '100%',
flexDirection: 'column',
flex: 9,
overflow: 'hidden',
}}
>
<Flex mx={[0, 0, 2]} sx={{ width: '100%', flex: 1 }} mb={[3, 3, 0]}>
<FlexStepNumber sx={{ height: 'fit-content' }}>
<Card py={3} px={4} sx={{ width: '100%', textAlign: 'center' }}>
<Heading as="p" mb={0}>
{updateIndex + 1}
</Heading>
</Card>
</FlexStepNumber>
</Flex>
<Card mx={[0, 0, 2]}>
<Flex sx={{ width: '100%', flexDirection: 'column' }} py={4} px={4}>
<Flex
sx={{ width: '100%', flexDirection: ['column', 'row', 'row'] }}
>
<Box sx={{ width: ['100%', '75%', '75%'] }}>
{contributors.length > 0 ? (
<Box sx={{ mb: 2 }} data-testid="collaborator/creator">
<Username user={contributors[0]} />
</Box>
) : null}

<Heading as="h2" sx={{ mb: 2 }}>
{update.title}
</Heading>
</Box>

<Flex
sx={{
width: '100%',
flexDirection: 'column',
flex: 9,
overflow: 'hidden',
}}
>
<Card mx={[0, 0, 2]}>
<Flex sx={{ width: '100%', flexDirection: 'column' }} py={4} px={4}>
<Flex
sx={{ width: '100%', flexDirection: ['column', 'row', 'row'] }}
sx={{
flexDirection: ['row', 'column', 'column'],
width: ['100%', '25%', '25%'],
justifyContent: 'space-between',
alignItems: 'flex-end',
}}
>
<Box sx={{ width: ['100%', '75%', '75%'] }}>
{contributors.length > 0 ? (
<Box sx={{ mb: 2 }} data-testid="collaborator/creator">
<Username user={contributors[0]} />
</Box>
) : null}

<Heading as="h2" sx={{ mb: 2 }}>
{update.title}
</Heading>
</Box>
<Flex sx={{ flexDirection: ['column'] }}>
<Text
variant="auxiliary"
sx={{
textAlign: ['left', 'right', 'right'],
}}
>
{'created ' + formattedCreateDatestamp}
</Text>

<Flex
sx={{
flexDirection: ['row', 'column', 'column'],
width: ['100%', '25%', '25%'],
justifyContent: 'space-between',
alignItems: 'flex-end',
}}
>
<Flex sx={{ flexDirection: ['column'] }}>
{formattedCreateDatestamp !== formattedModifiedDatestamp && (
<Text
variant="auxiliary"
sx={{
textAlign: ['left', 'right', 'right'],
}}
>
{'created ' + formattedCreateDatestamp}
{'edited ' + formattedModifiedDatestamp}
</Text>

{formattedCreateDatestamp !==
formattedModifiedDatestamp && (
<Text
variant="auxiliary"
sx={{
textAlign: ['left', 'right', 'right'],
}}
>
{'edited ' + formattedModifiedDatestamp}
</Text>
)}
</Flex>
{/* Show edit button for the creator of the research OR a super-admin */}
{isEditable && (
<Link
to={'/research/' + slug + '/edit-update/' + update._id}
>
<Button
variant={'primary'}
data-cy={'edit-update'}
ml="auto"
mt={[0, 2, 2]}
>
Edit
</Button>
</Link>
)}
</Flex>
{/* Show edit button for the creator of the research OR a super-admin */}
{isEditable && (
<Link to={'/research/' + slug + '/edit-update/' + update._id}>
<Button
variant={'primary'}
data-cy={'edit-update'}
ml="auto"
mt={[0, 2, 2]}
>
Edit
</Button>
</Link>
)}
</Flex>
<Box>
<Text
mt={3}
variant="paragraph"
color={'grey'}
sx={{ whiteSpace: 'pre-line' }}
>
<LinkifyText>{update.description}</LinkifyText>
</Text>
</Box>
</Flex>
<Box sx={{ width: '100%' }}>
{update.videoUrl ? (
<VideoPlayer videoUrl={update.videoUrl} />
) : (
<ImageGallery
images={formatImagesForGallery(update.images) as any}
allowPortrait={true}
/>
)}
</Box>
{((update.files && update.files.length > 0) || update.fileLink) && (
<Flex
className="file-container"
<Box>
<Text
mt={3}
sx={{ flexDirection: 'column', px: 4 }}
variant="paragraph"
color={'grey'}
sx={{ whiteSpace: 'pre-line' }}
>
{update.fileLink && (
<DownloadFileFromLink
handleClick={handleDownloadClick}
link={update.fileLink}
redirectToSignIn={
!loggedInUser ? redirectToSignIn : undefined
}
/>
)}
{update.files &&
update.files
.filter(Boolean)
.map(
(file, index) =>
file && (
<DownloadStaticFile
allowDownload
file={file}
key={file ? file.name : `file-${index}`}
handleClick={handleDownloadClick}
redirectToSignIn={
!loggedInUser ? redirectToSignIn : undefined
}
/>
),
)}
<DownloadCounter total={update.downloadCount} />
</Flex>
<LinkifyText>{update.description}</LinkifyText>
</Text>
</Box>
</Flex>
<Box sx={{ width: '100%' }}>
{update.videoUrl ? (
<VideoPlayer videoUrl={update.videoUrl} />
) : (
<ImageGallery
images={formatImagesForGallery(update.images) as any}
allowPortrait={true}
/>
)}
<ResearchUpdateDiscussion
update={update}
research={research}
showComments={showComments}
/>
</Card>
</Flex>
</Box>
{((update.files && update.files.length > 0) || update.fileLink) && (
<Flex
className="file-container"
mt={3}
sx={{ flexDirection: 'column', px: 4 }}
>
{update.fileLink && (
<DownloadFileFromLink
handleClick={handleDownloadClick}
link={update.fileLink}
redirectToSignIn={
!loggedInUser ? redirectToSignIn : undefined
}
/>
)}
{update.files &&
update.files
.filter(Boolean)
.map(
(file, index) =>
file && (
<DownloadStaticFile
allowDownload
file={file}
key={file ? file.name : `file-${index}`}
handleClick={handleDownloadClick}
redirectToSignIn={
!loggedInUser ? redirectToSignIn : undefined
}
/>
),
)}
<DownloadCounter total={update.downloadCount} />
</Flex>
)}
<ResearchUpdateDiscussion
update={update}
research={research}
showComments={showComments}
/>
</Card>
</Flex>
</>
</Flex>
)
}

Expand Down
2 changes: 1 addition & 1 deletion libs/components/.eslintrc.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"extends": ["plugin:@nx/react", "../../.eslintrc.base.json"],
"ignorePatterns": ["!**/*"],
"ignorePatterns": ["!**/*", "storybook-static"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
Expand Down
33 changes: 33 additions & 0 deletions libs/components/.storybook/main.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import type { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-mdx-gfm',
],
framework: {
name: '@storybook/react-vite',
options: {
builder: {
viteConfigPath: 'vite.config.ts',
},
},
},
docs: {
autodocs: false,
},
// -> Is this needed?
// async viteFinal(config) {
// return mergeConfig(config, {
// publicDir: '../public',
// })
// },
}

export default config

// To customize your Vite configuration you can use the viteFinal field.
// Check https://storybook.js.org/docs/react/builders/vite#configuration
// and https://nx.dev/recipes/storybook/custom-builder-configs
2 changes: 1 addition & 1 deletion ...components/src/lib/.storybook/preview.tsx → libs/components/.storybook/preview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import type { Preview } from '@storybook/react'
import React from 'react'

import { Global } from '@emotion/react'
import { GlobalStyles } from '../src/GlobalStyles/GlobalStyles'

import {
preciousPlasticTheme,
projectKampTheme,
fixingFashionTheme,
GlobalStyles,
} from '@onearmy.apps/themes'

import {
Expand Down
28 changes: 0 additions & 28 deletions libs/components/src/lib/.storybook/main.ts
View file

This file was deleted.

Loading

0 comments on commit 2e6bf53

Please sign in to comment.