Skip to content

Commit

Permalink
Break up the component-library into smaller modules (#1200)
Browse files Browse the repository at this point in the history
  • Loading branch information
jaronheard authored Jul 9, 2020
1 parent dbdbd02 commit 8bf84ec
Show file tree
Hide file tree
Showing 427 changed files with 40,212 additions and 2,270 deletions.
13 changes: 12 additions & 1 deletion .storybook/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { BrandTheme } from "@hackoregon/component-library";
import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
import themeCIVIC from "./themeCIVIC";

const STORYBOOK_ENV = process.env.STORYBOOK_ENV || "default";

addParameters({
options: {
showPanel: true,
Expand All @@ -23,7 +25,16 @@ addParameters({
});

function loadStories() {
require("../packages/component-library/stories");
if (STORYBOOK_ENV === "new") {
const req = require.context(
"../packages",
true,
/^\.\/[^\/]+\/stories\/index.story.js$/
);
req.keys().forEach(filename => req(filename));
} else {
require("../packages/component-library/stories");
}
}

const withGlobal = cb => (
Expand Down
3 changes: 2 additions & 1 deletion .storybook/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ module.exports = createConfig([
}
]
}),
match(["*.js"], [storySourceLoader()])
match(["*.story.js"], [storySourceLoader()])
]);

function storySourceLoader() {
Expand All @@ -38,6 +38,7 @@ function storySourceLoader() {
Object.assign(
{
test: /\.stories\.jsx?$/,
exclude: /\.node_modules\./,
loaders: [require.resolve("@storybook/addon-storysource/loader")],
enforce: "pre"
},
Expand Down
3 changes: 3 additions & 0 deletions lerna.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
"command": {
"publish": {
"message": "(🧹release): publish %s"
},
"version": {
"allowBranch": "master"
}
}
}
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
"publish-patch": "lerna publish bump patch --yes",
"start": "node scripts/start",
"storybook": "BABEL_ENV=esm start-storybook -p 6006",
"storybook-new": "BABEL_ENV=esm STORYBOOK_ENV=new start-storybook -p 6006",
"test": "lerna exec yarn test --no-bail",
"travis": "make travis",
"watch": "node scripts/watch"
Expand Down Expand Up @@ -78,7 +79,7 @@
"@storybook/addon-knobs": "^5.0.6",
"@storybook/addon-links": "^5.0.6",
"@storybook/addon-notes": "^5.0.6",
"@storybook/addon-storysource": "5.0.6",
"@storybook/addon-storysource": "^5.0.6",
"@storybook/addon-viewport": "^5.0.11",
"@storybook/react": "^5.0.6",
"@storybook/storybook-deployer": "^2.3.0",
Expand Down Expand Up @@ -147,4 +148,4 @@
"webpack-md5-hash": "^0.0.6",
"webpack-node-externals": "^1.5.4"
}
}
}
46 changes: 46 additions & 0 deletions packages/2018/.toMove/src/components/CardDetail/CardDetailPage.js
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&apos;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;
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&apos;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 packages/2018/.toMove/src/components/CardDetail/ExploreRelated.js
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;
Loading

0 comments on commit 8bf84ec

Please sign in to comment.