-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Break up the component-library into smaller modules (#1200)
- Loading branch information
1 parent
dbdbd02
commit 8bf84ec
Showing
427 changed files
with
40,212 additions
and
2,270 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
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,6 +6,9 @@ | |
"command": { | ||
"publish": { | ||
"message": "(🧹release): publish %s" | ||
}, | ||
"version": { | ||
"allowBranch": "master" | ||
} | ||
} | ||
} |
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
46 changes: 46 additions & 0 deletions
46
packages/2018/.toMove/src/components/CardDetail/CardDetailPage.js
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,46 @@ | ||
import React from "react"; | ||
import PropTypes from "prop-types"; | ||
import { Link } from "react-router"; | ||
import { PageLayout } from "@hackoregon/ui-core"; | ||
import { ExploreRelated } from ".."; | ||
|
||
const CardDetailPage = ({ params, CardRegistry }) => { | ||
const card = CardRegistry.find(params.slug); | ||
|
||
if (card && card.component) { | ||
const CardComponent = card.component; | ||
return ( | ||
<PageLayout> | ||
<CardComponent /> | ||
<ExploreRelated slug={params.slug} CardRegistry={CardRegistry} /> | ||
</PageLayout> | ||
); | ||
} | ||
|
||
return ( | ||
<PageLayout> | ||
<section> | ||
<h1>Card not found</h1> | ||
<p>The card you are looking for doesn't exist.</p> | ||
<Link to="/cards">Other cards</Link> | ||
</section> | ||
</PageLayout> | ||
); | ||
}; | ||
|
||
CardDetailPage.propTypes = { | ||
params: PropTypes.shape({ slug: PropTypes.string.isRequired }), | ||
CardRegistry: PropTypes.shape({ | ||
entries: PropTypes.arrayOf( | ||
PropTypes.shape({ | ||
component: PropTypes.func.isRequired, | ||
project: PropTypes.string.isRequired, | ||
slug: PropTypes.string.isRequired | ||
}) | ||
) | ||
}).isRequired | ||
}; | ||
|
||
CardDetailPage.displayName = "CardDetailPage"; | ||
|
||
export default CardDetailPage; |
53 changes: 53 additions & 0 deletions
53
packages/2018/.toMove/src/components/CardDetail/CardDetailPageEmbed.js
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,53 @@ | ||
import React from "react"; | ||
import PropTypes from "prop-types"; | ||
import { Link } from "react-router"; | ||
import { get } from "lodash"; | ||
import { | ||
CivicCardLayoutClassic, | ||
CivicCardLayoutPreview, | ||
CivicCardLayoutVisualizationOnly, | ||
CivicCardLayoutVisualizationOnlyNoLink, | ||
CivicCardLayoutSideBySide | ||
} from "@hackoregon/ui-cards"; | ||
|
||
const CardDetailPageEmbed = ({ params, CardRegistry }) => { | ||
const card = CardRegistry.find(params.slug); | ||
const layouts = { | ||
visualization: CivicCardLayoutVisualizationOnly, | ||
visualizationnolink: CivicCardLayoutVisualizationOnlyNoLink, | ||
classic: CivicCardLayoutClassic, | ||
preview: CivicCardLayoutPreview, | ||
comparison: CivicCardLayoutSideBySide | ||
}; | ||
const Layout = get(layouts, params.layout) || layouts.classic; | ||
|
||
if (card && card.component) { | ||
const CardComponent = card.component; | ||
return <CardComponent Layout={Layout} />; | ||
} | ||
|
||
return ( | ||
<div> | ||
<h1>Card not found</h1> | ||
<p>The card you are looking for doesn't exist.</p> | ||
<Link to="/">Find more on CIVIC</Link> | ||
</div> | ||
); | ||
}; | ||
|
||
CardDetailPageEmbed.propTypes = { | ||
params: PropTypes.shape({ slug: PropTypes.string.isRequired }), | ||
CardRegistry: PropTypes.shape({ | ||
entries: PropTypes.arrayOf( | ||
PropTypes.shape({ | ||
component: PropTypes.func.isRequired, | ||
project: PropTypes.string.isRequired, | ||
slug: PropTypes.string.isRequired | ||
}) | ||
) | ||
}).isRequired | ||
}; | ||
|
||
CardDetailPageEmbed.displayName = "CardDetailPageEmbed"; | ||
|
||
export default CardDetailPageEmbed; |
122 changes: 122 additions & 0 deletions
122
packages/2018/.toMove/src/components/CardDetail/ExploreRelated.js
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,122 @@ | ||
/** @jsx jsx */ | ||
import { jsx, css } from "@emotion/core"; | ||
import PropTypes from "prop-types"; | ||
import shortid from "shortid"; | ||
import { ThemeProvider } from "@material-ui/styles"; | ||
import { MaterialTheme } from "@hackoregon/ui-themes"; | ||
import { Placeholder } from "@hackoregon/ui-core"; | ||
import { CivicCardLayoutPreviewTitleOnly } from "@hackoregon/ui-cards"; | ||
|
||
const sectionMarginSmall = css` | ||
display: block; | ||
margin: 12px auto; | ||
`; | ||
|
||
const sectionMaxWidthSmall = css` | ||
max-width: 900px; | ||
`; | ||
|
||
const listContainerStyle = css` | ||
width: 100%; | ||
display: flex; | ||
padding: 0; | ||
justify-content: space-evenly; | ||
flex-wrap: wrap; | ||
box-sizing: border-box; | ||
`; | ||
|
||
const listItemStyle = css` | ||
width: 45%; | ||
margin: 5px; | ||
box-sizing: border-box; | ||
list-style-type: none; | ||
`; | ||
|
||
const matchRelatedCardsByTags = ( | ||
slug, | ||
baseTags, | ||
entries, | ||
numOfRelatedCards | ||
) => { | ||
const relatedCards = | ||
baseTags && baseTags.length | ||
? entries | ||
.map(entry => { | ||
return { | ||
numOfSimilarTags: entry.component.tags | ||
? entry.component.tags.filter(tag => { | ||
return baseTags.includes(tag); | ||
}).length | ||
: 0, | ||
...entry | ||
}; | ||
}) | ||
.filter(entry => { | ||
return entry.slug !== slug; | ||
}) | ||
.sort((a, b) => { | ||
return b.numOfSimilarTags - a.numOfSimilarTags; | ||
}) | ||
.slice(0, numOfRelatedCards) | ||
: []; | ||
|
||
return relatedCards; | ||
}; | ||
|
||
const ExploreRelated = ({ slug, CardRegistry, numOfRelatedCards = 4 }) => { | ||
const card = CardRegistry.find(slug); | ||
const relatedCards = matchRelatedCardsByTags( | ||
slug, | ||
card.component.tags, | ||
CardRegistry.entries, | ||
numOfRelatedCards | ||
); | ||
|
||
const relatedCardList = | ||
relatedCards.length > 0 ? ( | ||
relatedCards.map(relatedCard => ( | ||
<li key={shortid.generate()} css={listItemStyle}> | ||
<relatedCard.component Layout={CivicCardLayoutPreviewTitleOnly} /> | ||
</li> | ||
)) | ||
) : ( | ||
<Placeholder> | ||
<h3> | ||
<a href="https://civicsoftwarefoundation.org/#cities"> | ||
See your data here! | ||
</a> | ||
</h3> | ||
</Placeholder> | ||
); | ||
|
||
if (card && card.component) { | ||
return ( | ||
<ThemeProvider theme={MaterialTheme}> | ||
<section css={[sectionMarginSmall, sectionMaxWidthSmall]}> | ||
<h2>Explore related data</h2> | ||
<ul css={listContainerStyle}>{relatedCardList}</ul> | ||
</section> | ||
</ThemeProvider> | ||
); | ||
} | ||
|
||
return null; | ||
}; | ||
|
||
ExploreRelated.propTypes = { | ||
slug: PropTypes.string.isRequired, | ||
CardRegistry: PropTypes.shape({ | ||
entries: PropTypes.arrayOf( | ||
PropTypes.shape({ | ||
component: PropTypes.func.isRequired, | ||
project: PropTypes.string.isRequired, | ||
slug: PropTypes.string.isRequired | ||
}) | ||
) | ||
}).isRequired, | ||
numOfRelatedCards: PropTypes.number | ||
}; | ||
|
||
ExploreRelated.displayName = "ExploreRelated"; | ||
|
||
export default ExploreRelated; |
Oops, something went wrong.