├── .nvmrc ├── .eslintignore ├── config ├── .storybook │ ├── stories │ │ └── index.js │ ├── addons.js │ ├── config.js │ └── webpack.config.js ├── testing │ ├── __mocks__ │ │ ├── styleMock.js │ │ └── fileMock.js │ └── templates │ │ └── _index.prod.html ├── generators │ ├── component │ │ ├── export.ts.hbs │ │ ├── types.ts.hbs │ │ ├── import.ts.hbs │ │ ├── styles.ts.hbs │ │ ├── stateless.tsx.hbs │ │ └── es6class.tsx.hbs │ ├── container │ │ ├── export.js.hbs │ │ ├── reducer.export.js.hbs │ │ ├── types.export.ts.hbs │ │ ├── state-type.js.hbs │ │ ├── reducer.export-state.js.hbs │ │ ├── reducer.import.js.hbs │ │ ├── import.js.hbs │ │ ├── types.import.ts.hbs │ │ ├── state.import.js.hbs │ │ ├── styles.js.hbs │ │ ├── state.js.hbs │ │ ├── actions.js.hbs │ │ ├── reducer.js.hbs │ │ ├── constants.js.hbs │ │ ├── types.ts.hbs │ │ ├── actionCreators.js.hbs │ │ ├── presentation.js.hbs │ │ └── selectors.js.hbs │ ├── utils │ │ ├── safeString.js │ │ └── index.js │ └── cli.js ├── scripts │ └── clean.js ├── types │ └── require.d.ts └── ignoreAssets.js ├── Procfile ├── packages ├── openui │ ├── src │ │ ├── Anchor │ │ │ ├── types.ts │ │ │ ├── __tests__ │ │ │ │ ├── __mocks__ │ │ │ │ │ └── anchorMocks.mock.ts │ │ │ │ ├── __snapshots__ │ │ │ │ │ └── index.test.tsx.snap │ │ │ │ └── index.test.tsx │ │ │ └── styles.ts │ │ ├── Article │ │ │ ├── types.ts │ │ │ ├── __tests__ │ │ │ │ ├── __mocks__ │ │ │ │ │ └── articleMocks.mock.ts │ │ │ │ ├── __snapshots__ │ │ │ │ │ └── index.test.tsx.snap │ │ │ │ └── index.test.tsx │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ ├── Footer │ │ │ ├── types.ts │ │ │ ├── __tests__ │ │ │ │ ├── __mocks__ │ │ │ │ │ └── footerMocks.mock.ts │ │ │ │ ├── __snapshots__ │ │ │ │ │ └── index.test.tsx.snap │ │ │ │ └── index.test.tsx │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ ├── Hero │ │ │ ├── types.ts │ │ │ ├── __tests__ │ │ │ │ ├── __mocks__ │ │ │ │ │ └── heroMocks.mock.ts │ │ │ │ ├── __snapshots__ │ │ │ │ │ └── index.test.tsx.snap │ │ │ │ └── index.test.tsx │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── Markdown │ │ │ ├── types.ts │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ ├── Heading │ │ │ ├── types.ts │ │ │ ├── styleUtils.ts │ │ │ ├── __tests__ │ │ │ │ ├── __mocks__ │ │ │ │ │ └── headingProps.mock.ts │ │ │ │ └── __snapshots__ │ │ │ │ │ └── index.test.tsx.snap │ │ │ └── styles.ts │ │ ├── LoadingIndicator │ │ │ ├── types.ts │ │ │ ├── __tests__ │ │ │ │ ├── __mocks__ │ │ │ │ │ └── loadingIndicatorMocks.mock.ts │ │ │ │ ├── __snapshots__ │ │ │ │ │ └── index.test.tsx.snap │ │ │ │ └── index.test.tsx │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ ├── Avatar │ │ │ ├── types.ts │ │ │ ├── maps.ts │ │ │ ├── default.ts │ │ │ ├── __tests__ │ │ │ │ ├── __mocks__ │ │ │ │ │ └── avatarMocks.mock.ts │ │ │ │ ├── __snapshots__ │ │ │ │ │ └── index.test.tsx.snap │ │ │ │ └── index.test.tsx │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── Image │ │ │ ├── types.ts │ │ │ ├── index.tsx │ │ │ ├── styles.ts │ │ │ └── __tests__ │ │ │ │ └── __mocks__ │ │ │ │ └── imageMocks.mock.ts │ │ ├── theming │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ ├── colorMap.ts │ │ │ └── globalCss.ts │ │ ├── Headline │ │ │ ├── __tests__ │ │ │ │ ├── __mocks__ │ │ │ │ │ └── headlineProps.mock.ts │ │ │ │ ├── __snapshots__ │ │ │ │ │ └── index.test.tsx.snap │ │ │ │ └── index.test.tsx │ │ │ ├── types.ts │ │ │ ├── styleUtils.ts │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ ├── Paragraph │ │ │ ├── types.ts │ │ │ ├── styleUtils.ts │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── utils │ │ │ ├── index.ts │ │ │ └── remStringFromPx.ts │ │ ├── Box │ │ │ ├── __tests__ │ │ │ │ ├── __mocks__ │ │ │ │ │ └── boxMocks.mock.ts │ │ │ │ ├── __snapshots__ │ │ │ │ │ └── index.test.tsx.snap │ │ │ │ └── index.test.tsx │ │ │ ├── index.tsx │ │ │ ├── maps.ts │ │ │ └── styles.ts │ │ ├── Header │ │ │ ├── types.ts │ │ │ ├── header.tsx │ │ │ ├── styles.ts │ │ │ └── utils.ts │ │ ├── Toast │ │ │ ├── __tests__ │ │ │ │ ├── __mocks__ │ │ │ │ │ └── toast.mock.ts │ │ │ │ └── index.test.tsx │ │ │ ├── types.ts │ │ │ └── styles.ts │ │ ├── Notification │ │ │ ├── types.ts │ │ │ ├── __tests__ │ │ │ │ ├── __mocks__ │ │ │ │ │ └── notificationMocks.mock.ts │ │ │ │ └── __snapshots__ │ │ │ │ │ └── index.test.tsx.snap │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ ├── WithAnimation │ │ │ ├── types.ts │ │ │ ├── index.tsx │ │ │ └── animation.ts │ │ ├── Button │ │ │ ├── maps.ts │ │ │ ├── types.ts │ │ │ ├── __tests__ │ │ │ │ ├── __mocks__ │ │ │ │ │ └── buttonMocks.mock.ts │ │ │ │ └── __snapshots__ │ │ │ │ │ └── index.test.tsx.snap │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ ├── SvgIcon │ │ │ ├── types.ts │ │ │ └── index.tsx │ │ ├── Section │ │ │ ├── __tests__ │ │ │ │ ├── __mocks__ │ │ │ │ │ └── sectionMocks.mock.ts │ │ │ │ ├── __snapshots__ │ │ │ │ │ └── index.test.tsx.snap │ │ │ │ └── index.test.tsx │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ └── index.ts │ ├── tsconfig.json │ └── package.json └── docs │ ├── src │ ├── client │ │ ├── components │ │ │ ├── Pic │ │ │ │ ├── types.ts │ │ │ │ ├── index.tsx │ │ │ │ └── styles.ts │ │ │ ├── utils │ │ │ │ ├── index.ts │ │ │ │ └── remStringFromPx.ts │ │ │ ├── PostCard │ │ │ │ ├── types.ts │ │ │ │ ├── shortenText.ts │ │ │ │ └── index.tsx │ │ │ ├── AddComment │ │ │ │ ├── __tests__ │ │ │ │ │ ├── __mocks__ │ │ │ │ │ │ └── addCommentMocks.mock.ts │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ └── index.test.tsx.snap │ │ │ │ ├── types.ts │ │ │ │ └── index.tsx │ │ │ ├── Comment │ │ │ │ ├── types.ts │ │ │ │ ├── __tests__ │ │ │ │ │ ├── __mocks__ │ │ │ │ │ │ └── commentMocks.mock.ts │ │ │ │ │ ├── index.test.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ └── index.test.tsx.snap │ │ │ │ ├── index.tsx │ │ │ │ └── styles.ts │ │ │ ├── NavBar │ │ │ │ ├── types.ts │ │ │ │ ├── __tests__ │ │ │ │ │ ├── __mocks__ │ │ │ │ │ │ └── navBarMocks.mock.ts │ │ │ │ │ ├── index.test.tsx │ │ │ │ │ └── __snapshots__ │ │ │ │ │ │ └── index.test.tsx.snap │ │ │ │ ├── styles.ts │ │ │ │ └── index.tsx │ │ │ ├── index.ts │ │ │ ├── Post │ │ │ │ ├── types.ts │ │ │ │ └── index.tsx │ │ │ └── Html │ │ │ │ └── index.tsx │ │ ├── theming │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ ├── colorMap.ts │ │ │ └── globalCss.ts │ │ ├── containers │ │ │ ├── Docs │ │ │ │ ├── __tests__ │ │ │ │ │ ├── __mocks__ │ │ │ │ │ │ └── docsMocks.mock.ts │ │ │ │ │ ├── __snapshots__ │ │ │ │ │ │ └── index.test.tsx.snap │ │ │ │ │ ├── index.test.tsx │ │ │ │ │ ├── logic.test.ts │ │ │ │ │ ├── reducer.test.ts │ │ │ │ │ └── actionCreators.test.ts │ │ │ │ ├── styles.ts │ │ │ │ ├── types.ts │ │ │ │ ├── state.ts │ │ │ │ ├── constants.ts │ │ │ │ ├── selectors.ts │ │ │ │ ├── logic.ts │ │ │ │ ├── actions.ts │ │ │ │ ├── actionCreators.ts │ │ │ │ ├── reducer.ts │ │ │ │ └── index.tsx │ │ │ ├── BlogPost │ │ │ │ ├── constants.ts │ │ │ │ ├── __tests__ │ │ │ │ │ ├── __mocks__ │ │ │ │ │ │ ├── blogPostSelectors.mock.ts │ │ │ │ │ │ └── blogPostPresentation.mock.ts │ │ │ │ │ ├── actionCreators.test.ts │ │ │ │ │ ├── reducer.test.ts │ │ │ │ │ ├── selectors.test.ts │ │ │ │ │ └── index.test.tsx │ │ │ │ ├── styles.ts │ │ │ │ ├── state.ts │ │ │ │ ├── commentMutation.graphql.ts │ │ │ │ ├── actions.ts │ │ │ │ ├── postQuery.graphql.ts │ │ │ │ ├── selectors.ts │ │ │ │ ├── reducer.ts │ │ │ │ ├── actionCreators.ts │ │ │ │ ├── apollo.ts │ │ │ │ ├── types.ts │ │ │ │ └── presentation.tsx │ │ │ ├── Blog │ │ │ │ ├── styles.ts │ │ │ │ ├── posts.graphql.ts │ │ │ │ └── types.ts │ │ │ ├── App │ │ │ │ ├── constants.ts │ │ │ │ ├── __tests__ │ │ │ │ │ ├── __snapshots__ │ │ │ │ │ │ └── index.test.tsx.snap │ │ │ │ │ ├── actionCreators.test.ts │ │ │ │ │ ├── reducer.test.ts │ │ │ │ │ └── index.test.tsx │ │ │ │ ├── styles.ts │ │ │ │ ├── actions.ts │ │ │ │ ├── types.ts │ │ │ │ ├── actionCreators.ts │ │ │ │ ├── reducer.ts │ │ │ │ ├── state.ts │ │ │ │ ├── selectors.ts │ │ │ │ └── index.tsx │ │ │ ├── Home │ │ │ │ ├── types.ts │ │ │ │ ├── index.tsx │ │ │ │ └── styles.ts │ │ │ ├── Features │ │ │ │ ├── types.ts │ │ │ │ └── features.ts │ │ │ ├── TodoApp │ │ │ │ ├── __tests__ │ │ │ │ │ ├── __mocks__ │ │ │ │ │ │ ├── selectors.mock.ts │ │ │ │ │ │ └── presentation.mock.ts │ │ │ │ │ ├── actionCreators.test.ts │ │ │ │ │ ├── index.test.tsx │ │ │ │ │ └── selectors.test.ts │ │ │ │ ├── state.ts │ │ │ │ ├── constants.ts │ │ │ │ ├── types.ts │ │ │ │ ├── selectors.ts │ │ │ │ ├── actions.ts │ │ │ │ ├── reducer.ts │ │ │ │ └── actionCreators.ts │ │ │ ├── index.ts │ │ │ └── About │ │ │ │ ├── contributors.ts │ │ │ │ └── about.ts │ │ ├── shared │ │ │ ├── constants.ts │ │ │ ├── actionCreators.ts │ │ │ └── actions.ts │ │ ├── logic.ts │ │ ├── apolloClient.ts │ │ ├── test │ │ │ └── mockstore.ts │ │ ├── reducers.ts │ │ ├── index.tsx │ │ ├── state.ts │ │ └── types.ts │ └── server │ │ ├── graph │ │ ├── mutations │ │ │ ├── index.ts │ │ │ └── comment │ │ │ │ ├── index.ts │ │ │ │ └── createComment.ts │ │ ├── queries │ │ │ ├── post │ │ │ │ ├── index.ts │ │ │ │ ├── posts.ts │ │ │ │ └── post.ts │ │ │ ├── index.ts │ │ │ └── comment │ │ │ │ ├── index.ts │ │ │ │ ├── comment.ts │ │ │ │ └── comments.ts │ │ ├── types │ │ │ ├── index.ts │ │ │ ├── post │ │ │ │ ├── postInput.ts │ │ │ │ └── post.ts │ │ │ └── comment │ │ │ │ ├── comment.ts │ │ │ │ └── commentInput.ts │ │ └── index.ts │ │ └── db │ │ ├── models │ │ ├── comment.ts │ │ └── post.ts │ │ └── utils │ │ └── uuid.ts │ ├── config │ ├── generators │ │ ├── component │ │ │ ├── export.ts.hbs │ │ │ ├── types.ts.hbs │ │ │ ├── import.ts.hbs │ │ │ ├── styles.ts.hbs │ │ │ ├── stateless.tsx.hbs │ │ │ └── es6class.tsx.hbs │ │ ├── container │ │ │ ├── export.js.hbs │ │ │ ├── reducer.export.js.hbs │ │ │ ├── types.export.ts.hbs │ │ │ ├── state-type.js.hbs │ │ │ ├── reducer.export-state.js.hbs │ │ │ ├── reducer.import.js.hbs │ │ │ ├── import.js.hbs │ │ │ ├── types.import.ts.hbs │ │ │ ├── state.import.js.hbs │ │ │ ├── styles.js.hbs │ │ │ ├── state.js.hbs │ │ │ ├── actions.js.hbs │ │ │ ├── reducer.js.hbs │ │ │ ├── constants.js.hbs │ │ │ ├── types.ts.hbs │ │ │ ├── actionCreators.js.hbs │ │ │ ├── presentation.js.hbs │ │ │ └── selectors.js.hbs │ │ ├── utils │ │ │ ├── safeString.js │ │ │ └── index.js │ │ └── cli.js │ ├── types │ │ └── require.d.ts │ └── ignoreAssets.js │ ├── server.js │ ├── .env │ ├── index.html │ ├── .babelrc │ ├── tsconfig.json │ └── devServer.js ├── src ├── client │ ├── features │ │ ├── Landing │ │ │ ├── types.ts │ │ │ ├── styles.ts │ │ │ ├── index.tsx │ │ │ └── presentation.tsx │ │ ├── Layout │ │ │ ├── types.ts │ │ │ ├── styles.ts │ │ │ ├── main.ts │ │ │ ├── presentation.tsx │ │ │ └── index.tsx │ │ └── index.ts │ ├── logic.ts │ ├── theming │ │ ├── index.ts │ │ ├── types.ts │ │ ├── colorMap.ts │ │ └── globalCss.ts │ ├── shared │ │ ├── constants.ts │ │ ├── actionCreators.ts │ │ └── actions.ts │ ├── components │ │ └── index.ts │ ├── state.ts │ ├── reducers.ts │ ├── apolloClient.ts │ ├── types.ts │ ├── test │ │ └── mockstore.ts │ ├── index.tsx │ └── routes.tsx └── server │ ├── graph │ ├── mutations │ │ └── index.ts │ ├── queries │ │ └── index.ts │ ├── types │ │ └── index.ts │ └── index.ts │ └── db │ ├── models │ └── post.ts │ └── utils │ └── uuid.ts ├── netlify.toml ├── .gitignore ├── lerna.json ├── server.js ├── .github └── CHANGELOG.md ├── .travis.yml ├── .env ├── index.html ├── .babelrc ├── tsconfig.json ├── devServer.js └── LICENSE /.nvmrc: -------------------------------------------------------------------------------- 1 | 6.9.5 -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/*.ts 2 | **/*.tsx 3 | -------------------------------------------------------------------------------- /config/.storybook/stories/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: cross-env NODE_ENV=server node server.js 2 | -------------------------------------------------------------------------------- /config/testing/__mocks__/styleMock.js: -------------------------------------------------------------------------------- 1 | module.exports = {}; -------------------------------------------------------------------------------- /packages/openui/src/Anchor/types.ts: -------------------------------------------------------------------------------- 1 | export { Props } from './'; 2 | -------------------------------------------------------------------------------- /packages/openui/src/Article/types.ts: -------------------------------------------------------------------------------- 1 | export { Props } from './'; 2 | -------------------------------------------------------------------------------- /packages/openui/src/Footer/types.ts: -------------------------------------------------------------------------------- 1 | export { Props } from './'; 2 | -------------------------------------------------------------------------------- /packages/openui/src/Hero/types.ts: -------------------------------------------------------------------------------- 1 | export { Props } from './'; 2 | -------------------------------------------------------------------------------- /src/client/features/Landing/types.ts: -------------------------------------------------------------------------------- 1 | export { Props } from './'; 2 | -------------------------------------------------------------------------------- /src/client/features/Layout/types.ts: -------------------------------------------------------------------------------- 1 | export { Props } from './'; 2 | -------------------------------------------------------------------------------- /config/generators/component/export.ts.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | {{ properCase name }}, -------------------------------------------------------------------------------- /config/generators/component/types.ts.hbs: -------------------------------------------------------------------------------- 1 | export { Props } from './'; 2 | -------------------------------------------------------------------------------- /config/generators/container/export.js.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | {{ properCase name }}, -------------------------------------------------------------------------------- /config/testing/__mocks__/fileMock.js: -------------------------------------------------------------------------------- 1 | module.exports = 'test-file-stub'; -------------------------------------------------------------------------------- /packages/openui/src/Markdown/types.ts: -------------------------------------------------------------------------------- 1 | export { Props } from './'; 2 | -------------------------------------------------------------------------------- /src/server/graph/mutations/index.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | 4 | }; 5 | -------------------------------------------------------------------------------- /src/server/graph/queries/index.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | 4 | }; 5 | -------------------------------------------------------------------------------- /src/server/graph/types/index.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | 4 | }; 5 | -------------------------------------------------------------------------------- /packages/docs/src/client/components/Pic/types.ts: -------------------------------------------------------------------------------- 1 | export * from './index'; 2 | -------------------------------------------------------------------------------- /packages/openui/src/Heading/types.ts: -------------------------------------------------------------------------------- 1 | export { Props, Tag } from './index'; 2 | -------------------------------------------------------------------------------- /packages/openui/src/LoadingIndicator/types.ts: -------------------------------------------------------------------------------- 1 | export { Props } from './'; 2 | -------------------------------------------------------------------------------- /config/generators/container/reducer.export.js.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | {{ camelCase name }}, -------------------------------------------------------------------------------- /config/generators/container/types.export.ts.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | {{ properCase name }}Types, -------------------------------------------------------------------------------- /packages/openui/src/Avatar/types.ts: -------------------------------------------------------------------------------- 1 | export { Props, ImageSize } from './index'; 2 | -------------------------------------------------------------------------------- /packages/openui/src/Image/types.ts: -------------------------------------------------------------------------------- 1 | export { Props, ImageSize } from './index'; 2 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command = "npm run deploy" 3 | publish = "build/public" 4 | -------------------------------------------------------------------------------- /packages/docs/config/generators/component/export.ts.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | {{ properCase name }}, -------------------------------------------------------------------------------- /packages/docs/config/generators/component/types.ts.hbs: -------------------------------------------------------------------------------- 1 | export { Props } from './'; 2 | -------------------------------------------------------------------------------- /packages/docs/config/generators/container/export.js.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | {{ properCase name }}, -------------------------------------------------------------------------------- /packages/openui/src/LoadingIndicator/__tests__/__mocks__/loadingIndicatorMocks.mock.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /config/scripts/clean.js: -------------------------------------------------------------------------------- 1 | require('shelljs/global'); 2 | 3 | rm('-fr', './packages/docs'); 4 | -------------------------------------------------------------------------------- /packages/docs/config/generators/container/reducer.export.js.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | {{ camelCase name }}, -------------------------------------------------------------------------------- /packages/docs/config/generators/container/types.export.ts.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | {{ properCase name }}Types, -------------------------------------------------------------------------------- /src/client/logic.ts: -------------------------------------------------------------------------------- 1 | 2 | const rootLogic = [ 3 | ]; 4 | 5 | export default rootLogic; 6 | -------------------------------------------------------------------------------- /config/generators/container/state-type.js.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | {{ camelCase name }}: {{ properCase name }}State; -------------------------------------------------------------------------------- /src/client/theming/index.ts: -------------------------------------------------------------------------------- 1 | import colorMap from './colorMap'; 2 | 3 | export default colorMap; 4 | -------------------------------------------------------------------------------- /packages/openui/src/theming/index.ts: -------------------------------------------------------------------------------- 1 | import colorMap from './colorMap'; 2 | 3 | export default colorMap; 4 | -------------------------------------------------------------------------------- /config/generators/container/reducer.export-state.js.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | {{ camelCase name }}: {{ camelCase name }}State, 3 | -------------------------------------------------------------------------------- /packages/docs/config/generators/container/state-type.js.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | {{ camelCase name }}: {{ properCase name }}State; -------------------------------------------------------------------------------- /packages/docs/src/client/theming/index.ts: -------------------------------------------------------------------------------- 1 | import colorMap from './colorMap'; 2 | 3 | export default colorMap; 4 | -------------------------------------------------------------------------------- /packages/openui/src/Footer/__tests__/__mocks__/footerMocks.mock.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | color: '#0b0b0b', 3 | }; 4 | -------------------------------------------------------------------------------- /packages/openui/src/Headline/__tests__/__mocks__/headlineProps.mock.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | color: '#fff', 3 | }; 4 | -------------------------------------------------------------------------------- /packages/openui/src/Paragraph/types.ts: -------------------------------------------------------------------------------- 1 | export { Props, ParagraphSize, Margin, SizeMap, MarginSizeMap } from './index'; 2 | -------------------------------------------------------------------------------- /packages/openui/src/utils/index.ts: -------------------------------------------------------------------------------- 1 | import remStringFromPx from './remStringFromPx'; 2 | 3 | export default remStringFromPx; 4 | -------------------------------------------------------------------------------- /config/generators/container/reducer.import.js.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | import {{ camelCase name }} from './features/{{ properCase name }}/reducer'; -------------------------------------------------------------------------------- /packages/docs/config/generators/container/reducer.export-state.js.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | {{ camelCase name }}: {{ camelCase name }}State, 3 | -------------------------------------------------------------------------------- /packages/openui/src/Box/__tests__/__mocks__/boxMocks.mock.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | pad: 'medium', 3 | size: 'large', 4 | }; 5 | -------------------------------------------------------------------------------- /packages/openui/src/Header/types.ts: -------------------------------------------------------------------------------- 1 | export { Props } from './'; 2 | export { Props as HeaderComponentProps } from './header'; 3 | -------------------------------------------------------------------------------- /packages/openui/src/Hero/__tests__/__mocks__/heroMocks.mock.ts: -------------------------------------------------------------------------------- 1 | export const heroProps = { 2 | backgroundColor: 'ff6600', 3 | }; 4 | -------------------------------------------------------------------------------- /packages/openui/src/Toast/__tests__/__mocks__/toast.mock.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | status: 'ok', 3 | onClose: jest.fn(), 4 | }; 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build 3 | dist 4 | npm-debug.log 5 | .vscode 6 | coverage 7 | yarn-error.log 8 | .DS_STORE 9 | lerna-debug.log -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "lerna": "2.0.0-beta.38", 3 | "packages": [ 4 | "packages/*" 5 | ], 6 | "version": "independent" 7 | } 8 | -------------------------------------------------------------------------------- /packages/openui/src/Avatar/maps.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | thumb: 50, 3 | small: 100, 4 | medium: 150, 5 | large: 250, 6 | }; 7 | -------------------------------------------------------------------------------- /packages/openui/src/Notification/types.ts: -------------------------------------------------------------------------------- 1 | export { Props } from './'; 2 | export type Status = 'none' | 'ok' | 'warning' | 'error'; 3 | -------------------------------------------------------------------------------- /packages/openui/src/Toast/types.ts: -------------------------------------------------------------------------------- 1 | export { Props } from './index'; 2 | 3 | export type Status = 'ok' | 'warning' | 'error' | 'none'; 4 | -------------------------------------------------------------------------------- /packages/openui/src/WithAnimation/types.ts: -------------------------------------------------------------------------------- 1 | export { Props } from './'; 2 | 3 | export type AnimationType = 'fadeIn' | 'fadeInUp'; 4 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | require('babel-core/register'); 2 | require('./config/ignoreAssets'); 3 | var app = require('./build/src/server/index.jsx'); 4 | -------------------------------------------------------------------------------- /src/client/shared/constants.ts: -------------------------------------------------------------------------------- 1 | export type DEFAULT_ACTION_TYPE = ''; 2 | export const DEFAULT_ACTION_TYPE: DEFAULT_ACTION_TYPE = ''; 3 | -------------------------------------------------------------------------------- /config/generators/component/import.ts.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | import {{ properCase name }} from '{{ getPath path 'components' }}{{ properCase name }}'; 3 | -------------------------------------------------------------------------------- /config/generators/container/import.js.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | import {{ properCase name }} from '{{ getPath path 'features' }}{{ properCase name }}'; 3 | -------------------------------------------------------------------------------- /config/generators/container/types.import.ts.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | import * as {{ properCase name }}Types from './features/{{ properCase name }}/types'; -------------------------------------------------------------------------------- /src/client/features/Layout/styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from 'styled-components'; 2 | 3 | export default css` 4 | min-height: 100vh; 5 | `; 6 | -------------------------------------------------------------------------------- /packages/docs/config/generators/container/reducer.import.js.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | import {{ camelCase name }} from './containers/{{ properCase name }}/reducer'; -------------------------------------------------------------------------------- /packages/docs/src/client/components/utils/index.ts: -------------------------------------------------------------------------------- 1 | import remStringFromPx from './remStringFromPx'; 2 | 3 | export default remStringFromPx; 4 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/Docs/__tests__/__mocks__/docsMocks.mock.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | pad: 'medium', 3 | size: 'large', 4 | }; 5 | -------------------------------------------------------------------------------- /.github/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## 1.0.1 4 | - Add jest snapshot / enzyme testing 5 | - Introduce changelog, contributing.md and roadmap.md -------------------------------------------------------------------------------- /packages/docs/server.js: -------------------------------------------------------------------------------- 1 | require('babel-core/register'); 2 | require('./config/ignoreAssets'); 3 | var app = require('./build/src/server/index.jsx'); 4 | -------------------------------------------------------------------------------- /packages/docs/src/client/shared/constants.ts: -------------------------------------------------------------------------------- 1 | export type DEFAULT_ACTION_TYPE = ''; 2 | export const DEFAULT_ACTION_TYPE: DEFAULT_ACTION_TYPE = ''; 3 | -------------------------------------------------------------------------------- /packages/docs/config/generators/component/import.ts.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | import {{ properCase name }} from '{{ getPath path 'components' }}{{ properCase name }}'; 3 | -------------------------------------------------------------------------------- /packages/docs/config/generators/container/import.js.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | import {{ properCase name }} from '{{ getPath path 'containers' }}{{ properCase name }}'; 3 | -------------------------------------------------------------------------------- /packages/docs/config/generators/container/types.import.ts.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | import * as {{ properCase name }}Types from './containers/{{ properCase name }}/types'; -------------------------------------------------------------------------------- /packages/docs/src/server/graph/mutations/index.ts: -------------------------------------------------------------------------------- 1 | import commentMutations from './comment'; 2 | 3 | export default { 4 | ...commentMutations, 5 | }; 6 | -------------------------------------------------------------------------------- /packages/openui/src/Button/maps.ts: -------------------------------------------------------------------------------- 1 | export const sizeMap = { 2 | xsmall: 10, 3 | small: 12, 4 | medium: 16, 5 | large: 20, 6 | xlarge: 24, 7 | }; 8 | -------------------------------------------------------------------------------- /packages/openui/src/SvgIcon/types.ts: -------------------------------------------------------------------------------- 1 | export { Props } from './index'; 2 | export interface SvgProps extends React.SVGProps { 3 | viewBox?: string; 4 | } 5 | -------------------------------------------------------------------------------- /src/client/components/index.ts: -------------------------------------------------------------------------------- 1 | /* GENERATOR-IMPORT */ 2 | import Html from './Html'; 3 | 4 | export { 5 | /* GENERATOR-EXPORT */ 6 | Html, 7 | }; 8 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/BlogPost/constants.ts: -------------------------------------------------------------------------------- 1 | export type INPUT_TYPE = 'BLOG_POST/INPUT'; 2 | export const INPUT: INPUT_TYPE = 'BLOG_POST/INPUT'; 3 | -------------------------------------------------------------------------------- /packages/docs/src/server/graph/mutations/comment/index.ts: -------------------------------------------------------------------------------- 1 | import createComment from './createComment'; 2 | 3 | export default { 4 | createComment, 5 | }; 6 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/Blog/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export default styled.hr` 4 | border-top: 4px solid; 5 | `; 6 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/Docs/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export default styled.hr` 4 | border-top: 4px solid; 5 | `; 6 | -------------------------------------------------------------------------------- /config/generators/component/styles.ts.hbs: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export default styled.div` 4 | height: 100px; 5 | width: 200px; 6 | `; 7 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/App/constants.ts: -------------------------------------------------------------------------------- 1 | export type SET_MOBILE_TYPE = 'APP/SET_MOBILE'; 2 | export const SET_MOBILE: SET_MOBILE_TYPE = 'APP/SET_MOBILE'; 3 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/BlogPost/__tests__/__mocks__/blogPostSelectors.mock.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | blogPost: { 3 | input: 'Money', 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /packages/openui/src/Article/__tests__/__mocks__/articleMocks.mock.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | pad: 'medium', 3 | size: 'large', 4 | backgroundColor: '#f5f5f5', 5 | }; 6 | -------------------------------------------------------------------------------- /packages/openui/src/Button/types.ts: -------------------------------------------------------------------------------- 1 | import { Props } from './'; 2 | 3 | export { Props }; 4 | export type Size = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'; 5 | -------------------------------------------------------------------------------- /packages/openui/src/Section/__tests__/__mocks__/sectionMocks.mock.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | pad: 'medium', 3 | size: 'large', 4 | backgroundColor: '#f5f5f5', 5 | }; 6 | -------------------------------------------------------------------------------- /src/client/features/Layout/main.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import styles from './styles'; 3 | 4 | export default styled.main` 5 | ${styles} 6 | `; 7 | -------------------------------------------------------------------------------- /packages/docs/.env: -------------------------------------------------------------------------------- 1 | # Environment variables for database connection. 2 | DB="srtb-docs-db" 3 | PORT=1340 4 | DEBUG=false 5 | MONGODB_URI="mongodb://localhost:27017/srtb-docs-db" -------------------------------------------------------------------------------- /packages/docs/src/client/containers/BlogPost/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const StyledHr = styled.hr` 4 | border-top: 4px solid; 5 | `; 6 | -------------------------------------------------------------------------------- /packages/docs/src/client/logic.ts: -------------------------------------------------------------------------------- 1 | import docsLogic from './containers/Docs/logic'; 2 | 3 | const rootLogic = [ 4 | ...docsLogic, 5 | ]; 6 | 7 | export default rootLogic; 8 | -------------------------------------------------------------------------------- /packages/docs/src/server/graph/queries/post/index.ts: -------------------------------------------------------------------------------- 1 | import post from './post'; 2 | import posts from './posts'; 3 | 4 | export default { 5 | post, 6 | posts, 7 | }; 8 | -------------------------------------------------------------------------------- /packages/openui/src/Avatar/default.ts: -------------------------------------------------------------------------------- 1 | // tslint:disable 2 | export default 'https://cloud.githubusercontent.com/assets/13810084/23538009/f9e348ae-ff9d-11e6-9f7a-485e8247a026.png'; -------------------------------------------------------------------------------- /packages/openui/src/Markdown/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export default styled.div` 4 | box-sizing: border-box; 5 | display: block; 6 | `; 7 | -------------------------------------------------------------------------------- /packages/docs/config/generators/component/styles.ts.hbs: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export default styled.div` 4 | height: 100px; 5 | width: 200px; 6 | `; 7 | -------------------------------------------------------------------------------- /packages/docs/src/client/components/PostCard/types.ts: -------------------------------------------------------------------------------- 1 | export interface PostCardProps { 2 | content: string; 3 | id: string; 4 | image: string; 5 | title: string; 6 | } 7 | -------------------------------------------------------------------------------- /packages/docs/src/server/graph/queries/index.ts: -------------------------------------------------------------------------------- 1 | import posts from './post'; 2 | import comment from './comment'; 3 | 4 | export default { 5 | ...posts, 6 | ...comment, 7 | }; 8 | -------------------------------------------------------------------------------- /packages/openui/src/Avatar/__tests__/__mocks__/avatarMocks.mock.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | src: 'https://avatars3.githubusercontent.com/u/19292575', 3 | name: 'Abhishek Ghosh', 4 | }; 5 | -------------------------------------------------------------------------------- /config/generators/container/state.import.js.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | import { initialState as {{ camelCase name }}State, State as {{ properCase name }}State } from './features/{{ properCase name }}/state'; -------------------------------------------------------------------------------- /packages/docs/src/client/containers/Home/types.ts: -------------------------------------------------------------------------------- 1 | import { Props } from './'; 2 | import { Props as PresentationProps } from './presentation'; 3 | 4 | export { Props, PresentationProps }; 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6.9.5" 4 | script: npm run test 5 | notifications: 6 | slack: scalable-react:HPFuyoipfw9RROPGrZrczz1m 7 | email: 8 | on_failure: always -------------------------------------------------------------------------------- /packages/docs/src/server/graph/queries/comment/index.ts: -------------------------------------------------------------------------------- 1 | import comment from './comment'; 2 | import comments from './comments'; 3 | 4 | export default { 5 | comment, 6 | comments, 7 | }; 8 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | # Environment variables for database connection. 2 | DB="scalable-react-ts-boilerplate-db" 3 | PORT=1338 4 | DEBUG=false 5 | MONGODB_URI="mongodb://localhost:27017/scalable-react-ts-boilerplate-db" -------------------------------------------------------------------------------- /config/.storybook/addons.js: -------------------------------------------------------------------------------- 1 | // To get default addons (actions and links) 2 | import '@kadira/storybook/addons'; 3 | // To add the knobs addon 4 | import '@kadira/storybook-addon-knobs/register' 5 | -------------------------------------------------------------------------------- /packages/docs/config/generators/container/state.import.js.hbs: -------------------------------------------------------------------------------- 1 | $1 2 | import { initialState as {{ camelCase name }}State, State as {{ properCase name }}State } from './containers/{{ properCase name }}/state'; -------------------------------------------------------------------------------- /packages/openui/src/Button/__tests__/__mocks__/buttonMocks.mock.ts: -------------------------------------------------------------------------------- 1 | export const buttonProps = { 2 | color: 'blue', 3 | backgroundColor: '#ffffff', 4 | borderColor: '#000000', 5 | size: 300, 6 | }; 7 | -------------------------------------------------------------------------------- /src/client/features/index.ts: -------------------------------------------------------------------------------- 1 | /* GENERATOR-IMPORT */ 2 | import Landing from './Landing'; 3 | import Layout from './Layout'; 4 | 5 | export { 6 | /* GENERATOR-EXPORT */ 7 | Landing, 8 | Layout, 9 | }; 10 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/App/__tests__/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`DocsContainer should render with default props 1`] = ``; 4 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/Docs/__tests__/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`DocsContainer should render with default props 1`] = ``; 4 | -------------------------------------------------------------------------------- /src/client/shared/actionCreators.ts: -------------------------------------------------------------------------------- 1 | import {DefaultAction} from './actions'; 2 | import * as types from './constants'; 3 | 4 | export const defaultAction = (): DefaultAction => ({ 5 | type: types.DEFAULT_ACTION_TYPE, 6 | }); 7 | -------------------------------------------------------------------------------- /src/client/state.ts: -------------------------------------------------------------------------------- 1 | /* GENERATOR-IMPORT-STATE */ 2 | 3 | export interface State { 4 | /* GENERATOR-EXPORT-STATE-TYPE */ 5 | } 6 | 7 | export const initialState: State = { 8 | /* GENERATOR-EXPORT-STATE */ 9 | }; 10 | -------------------------------------------------------------------------------- /packages/docs/src/client/shared/actionCreators.ts: -------------------------------------------------------------------------------- 1 | import {DefaultAction} from './actions'; 2 | import * as types from './constants'; 3 | 4 | export const defaultAction = (): DefaultAction => ({ 5 | type: types.DEFAULT_ACTION_TYPE, 6 | }); 7 | -------------------------------------------------------------------------------- /packages/docs/src/client/components/AddComment/__tests__/__mocks__/addCommentMocks.mock.ts: -------------------------------------------------------------------------------- 1 | export const addCommentProps = { 2 | input: 'Mock input for test', 3 | onSubmit: jest.fn(), 4 | onChange: jest.fn(), 5 | onKeyUp: jest.fn(), 6 | }; 7 | -------------------------------------------------------------------------------- /packages/openui/src/Footer/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const FooterComponent = styled.footer` 4 | background: ${(props) => props.color}; 5 | height: auto; 6 | min-height: 100px; 7 | width: 100%; 8 | `; 9 | -------------------------------------------------------------------------------- /packages/openui/src/utils/remStringFromPx.ts: -------------------------------------------------------------------------------- 1 | type Px = number; 2 | type Rem = number; 3 | 4 | const rootRem: number = 16; 5 | const calculateRem = (px: Px): Rem => (px / rootRem); 6 | export default (px: Px): string => `${calculateRem(px)}rem`; 7 | -------------------------------------------------------------------------------- /packages/openui/src/Section/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | import { 4 | BoxStyles, 5 | Props, 6 | } from '../Box/styles'; 7 | 8 | export { Props }; 9 | export default styled.section` 10 | ${BoxStyles} 11 | `; 12 | -------------------------------------------------------------------------------- /packages/docs/src/client/components/PostCard/shortenText.ts: -------------------------------------------------------------------------------- 1 | export default function shortenText(text: string, maxLength: number) { 2 | if (text.length > maxLength) { 3 | return `${text.substr(0, maxLength - 3)}...`; 4 | } 5 | return text; 6 | }; 7 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/Blog/posts.graphql.ts: -------------------------------------------------------------------------------- 1 | import gql from 'graphql-tag'; 2 | 3 | export default gql` 4 | query Posts { 5 | posts { 6 | id: _id 7 | title 8 | image 9 | content 10 | } 11 | } 12 | `; 13 | -------------------------------------------------------------------------------- /packages/docs/src/client/components/utils/remStringFromPx.ts: -------------------------------------------------------------------------------- 1 | type Px = number; 2 | type Rem = number; 3 | 4 | const rootRem: number = 16; 5 | const calculateRem = (px: Px): Rem => (px / rootRem); 6 | export default (px: Px): string => `${calculateRem(px)}rem`; 7 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/BlogPost/state.ts: -------------------------------------------------------------------------------- 1 | import { Input } from './types'; 2 | 3 | export interface State { 4 | input?: Input; 5 | } 6 | 7 | export const initialState: State = { 8 | input: '', 9 | }; 10 | 11 | export default State; 12 | -------------------------------------------------------------------------------- /packages/docs/src/client/components/Comment/types.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Comment from '../'; 3 | 4 | export interface CommentProps extends React.Props { 5 | author?: string; 6 | body?: string; 7 | picUrl?: string; 8 | } 9 | -------------------------------------------------------------------------------- /config/types/require.d.ts: -------------------------------------------------------------------------------- 1 | declare var require: { 2 | (path: string): any; 3 | (path: string): T; 4 | (paths: string[], callback: (...modules: any[]) => void): void; 5 | ensure: (paths: string[], callback: (require: (path: string) => T) => void) => void; 6 | }; 7 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/Features/types.ts: -------------------------------------------------------------------------------- 1 | import Features from './'; 2 | import * as React from 'react'; 3 | import { ThemeColorMap } from '../../types'; 4 | 5 | export interface Props extends React.Props { 6 | theme?: ThemeColorMap; 7 | } 8 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/Docs/types.ts: -------------------------------------------------------------------------------- 1 | export { actionCreators } from './actionCreators'; 2 | export * from './actions'; 3 | export * from './constants'; 4 | export * from './index'; 5 | export { FeatureProps } from './presentation'; 6 | export { State } from './state'; 7 | -------------------------------------------------------------------------------- /packages/openui/src/Headline/types.ts: -------------------------------------------------------------------------------- 1 | export { Props } from './index'; 2 | export { SizeMap, HeadlineSize } from './styleUtils'; 3 | 4 | export type TextAligment = 'center' | 'left' | 'right' | 'justify'; 5 | export type FontWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800; 6 | -------------------------------------------------------------------------------- /packages/openui/src/Notification/__tests__/__mocks__/notificationMocks.mock.ts: -------------------------------------------------------------------------------- 1 | export const NotificationPropsRequired = { 2 | message: 'Mock error message', 3 | }; 4 | 5 | export const NotificationPropsOther = { 6 | message: 'Mock error message', 7 | onClick: jest.fn(), 8 | }; 9 | -------------------------------------------------------------------------------- /config/generators/utils/safeString.js: -------------------------------------------------------------------------------- 1 | function SafeString(string) { 2 | this.string = string; 3 | } 4 | 5 | SafeString.prototype.toString = SafeString.prototype.toHTML = function() { 6 | return '' + this.string; 7 | }; 8 | 9 | module.exports = { 10 | SafeString 11 | }; 12 | -------------------------------------------------------------------------------- /packages/docs/config/types/require.d.ts: -------------------------------------------------------------------------------- 1 | declare var require: { 2 | (path: string): any; 3 | (path: string): T; 4 | (paths: string[], callback: (...modules: any[]) => void): void; 5 | ensure: (paths: string[], callback: (require: (path: string) => T) => void) => void; 6 | }; 7 | -------------------------------------------------------------------------------- /packages/docs/src/client/components/NavBar/types.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import NavBar from './'; 3 | 4 | interface Navlink { url: string; text: string; } 5 | export interface NavBarProps extends React.Props { 6 | logoText: string; 7 | links: Navlink[]; 8 | } 9 | -------------------------------------------------------------------------------- /packages/docs/src/client/components/Pic/index.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import {PicStyle} from './styles'; 3 | 4 | export interface PicProps { 5 | url?: string; 6 | } 7 | 8 | export const Pic = styled.div` 9 | ${PicStyle} 10 | `; 11 | 12 | export default Pic; 13 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/App/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Author = styled.div` 4 | color: white; 5 | padding: 10px; 6 | `; 7 | 8 | export const Main = styled.main` 9 | max-width: 100vw; 10 | box-sizing: border-box; 11 | `; 12 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/BlogPost/commentMutation.graphql.ts: -------------------------------------------------------------------------------- 1 | import gql from 'graphql-tag'; 2 | 3 | export default gql` 4 | mutation CreateComment($post: ID!, $body: String, $author: String) { 5 | createComment(data:{ post: $post, body: $body, author: $author }) 6 | } 7 | `; 8 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/TodoApp/__tests__/__mocks__/selectors.mock.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | todoApp: { 3 | todos: [ 4 | { 5 | text: 'LOL', 6 | }, 7 | { 8 | text: '🐒🚀', 9 | }, 10 | ], 11 | input: 'Money', 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /packages/docs/config/generators/utils/safeString.js: -------------------------------------------------------------------------------- 1 | function SafeString(string) { 2 | this.string = string; 3 | } 4 | 5 | SafeString.prototype.toString = SafeString.prototype.toHTML = function() { 6 | return '' + this.string; 7 | }; 8 | 9 | module.exports = { 10 | SafeString 11 | }; 12 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/TodoApp/state.ts: -------------------------------------------------------------------------------- 1 | import { Todo, Input } from './types'; 2 | 3 | export interface State { 4 | todos?: Todo[]; 5 | input?: Input; 6 | } 7 | 8 | export const initialState: State = { 9 | todos: [], 10 | input: '', 11 | }; 12 | 13 | export default State; 14 | -------------------------------------------------------------------------------- /config/generators/container/styles.js.hbs: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Section = styled.section` 4 | padding: 60px; 5 | background-color: #f5f5f5; 6 | min-height: calc(100vh - 50px); 7 | `; 8 | 9 | export const Heading = styled.h1` 10 | text-align: center; 11 | `; 12 | -------------------------------------------------------------------------------- /packages/openui/src/Heading/styleUtils.ts: -------------------------------------------------------------------------------- 1 | import { Tag } from './index'; 2 | import remStringFromPX from '../utils'; 3 | 4 | const sizeMap = { 5 | h1: 36, 6 | h2: 30, 7 | h3: 24, 8 | h4: 18, 9 | h5: 16, 10 | }; 11 | 12 | export const calculateSize = (tag: Tag): string => remStringFromPX(sizeMap[tag]); 13 | -------------------------------------------------------------------------------- /src/client/shared/actions.ts: -------------------------------------------------------------------------------- 1 | import { Action } from 'redux'; 2 | import * as types from './constants'; 3 | 4 | export interface DefaultAction extends Action { 5 | type: types.DEFAULT_ACTION_TYPE 6 | } 7 | 8 | export interface PayloadAction

extends Action { 9 | type: string; 10 | payload?: P; 11 | } 12 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/BlogPost/actions.ts: -------------------------------------------------------------------------------- 1 | import { Action } from 'redux'; 2 | import { Input } from './types'; 3 | import * as T from './constants'; 4 | 5 | export interface InputAction extends Action { 6 | type: T.INPUT_TYPE; 7 | input: Input; 8 | } 9 | 10 | export type ActionTypes = InputAction; 11 | -------------------------------------------------------------------------------- /packages/docs/src/server/db/models/comment.ts: -------------------------------------------------------------------------------- 1 | import mongoose from 'mongoose'; 2 | 3 | const CommentSchema = new mongoose.Schema({ 4 | author: String, 5 | body: String, 6 | post: { 7 | type: String, 8 | ref: 'Post', 9 | }, 10 | }); 11 | 12 | export default mongoose.model('Comment', CommentSchema); 13 | -------------------------------------------------------------------------------- /packages/docs/config/generators/container/styles.js.hbs: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Section = styled.section` 4 | padding: 60px; 5 | background-color: #f5f5f5; 6 | min-height: calc(100vh - 50px); 7 | `; 8 | 9 | export const Heading = styled.h1` 10 | text-align: center; 11 | `; 12 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/Docs/state.ts: -------------------------------------------------------------------------------- 1 | export interface State { 2 | markdownContent?: string; 3 | error?: string; 4 | isLoading: boolean; 5 | } 6 | 7 | export const initialState: State = { 8 | markdownContent: null, 9 | error: null, 10 | isLoading: false, 11 | }; 12 | 13 | export default State; 14 | -------------------------------------------------------------------------------- /packages/docs/src/client/shared/actions.ts: -------------------------------------------------------------------------------- 1 | import { Action } from 'redux'; 2 | import * as types from './constants'; 3 | 4 | export interface DefaultAction extends Action { 5 | type: types.DEFAULT_ACTION_TYPE 6 | } 7 | 8 | export interface PayloadAction

extends Action { 9 | type: string; 10 | payload?: P; 11 | } 12 | -------------------------------------------------------------------------------- /packages/openui/src/Article/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { 3 | BoxStyles, 4 | Props, 5 | } from '../Box/styles'; 6 | 7 | export { Props } 8 | export default styled.article` 9 | ${BoxStyles} 10 | box-shadow: 0 2px 4px 0 rgba(46, 61, 73, 0.2); 11 | border: 1px solid #dbe2e8; 12 | `; 13 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/TodoApp/__tests__/__mocks__/presentation.mock.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | todos: [ 3 | { 4 | text: 'foo', 5 | }, 6 | { 7 | text: 'bar', 8 | }, 9 | ], 10 | input: 'foo', 11 | onInput: jest.fn(), 12 | onAddition: jest.fn(), 13 | onDeletion: jest.fn(), 14 | }; 15 | -------------------------------------------------------------------------------- /packages/openui/src/Anchor/__tests__/__mocks__/anchorMocks.mock.ts: -------------------------------------------------------------------------------- 1 | export const hrefProps = { 2 | href: 'https://github.com/RyanCCollins/scalable-react-ts-boilerplate', 3 | label: 'Scalable React', 4 | color: '#fff', 5 | }; 6 | 7 | export default { 8 | path: '/docs', 9 | label: 'Docs', 10 | color: '#fff', 11 | }; 12 | -------------------------------------------------------------------------------- /src/client/features/Layout/presentation.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Props } from './types'; 3 | import Main from './main'; 4 | 5 | export default function LayoutPresentation({ children }: Props): JSX.Element { 6 | return ( 7 |

8 | {React.cloneElement(children)} 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /config/generators/utils/index.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | 3 | const trimTemplateFile = (template) => { 4 | // Loads the template file and trims the whitespace and then returns the content as a string. 5 | return fs.readFileSync(template, 'utf8').replace(/\s*$/, ''); 6 | }; 7 | 8 | module.exports = { 9 | trimTemplateFile 10 | }; 11 | -------------------------------------------------------------------------------- /packages/docs/src/client/components/Pic/styles.ts: -------------------------------------------------------------------------------- 1 | import { css } from 'styled-components'; 2 | import {PicProps} from './index'; 3 | 4 | export const PicStyle = css` 5 | height: 2.25rem; 6 | width: 2.25rem; 7 | border-radius: 50%; 8 | background-size: contain; 9 | background-image: url(${(props: PicProps) => props.url}); 10 | `; 11 | -------------------------------------------------------------------------------- /config/generators/container/state.js.hbs: -------------------------------------------------------------------------------- 1 | import { ErrorType } from './types'; 2 | 3 | export interface State { 4 | isLoading: boolean; 5 | error?: ErrorType; 6 | data?: string; 7 | } 8 | 9 | export const initialState: State = { 10 | isLoading: false, 11 | error: null, 12 | data: null, 13 | }; 14 | 15 | export default initialState; 16 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/BlogPost/postQuery.graphql.ts: -------------------------------------------------------------------------------- 1 | import gql from 'graphql-tag'; 2 | 3 | export default gql` 4 | query Post($id: ID!) { 5 | post(id: $id) { 6 | id: _id 7 | title 8 | image 9 | content 10 | comments { 11 | body 12 | author 13 | } 14 | } 15 | } 16 | `; 17 | -------------------------------------------------------------------------------- /packages/docs/src/server/graph/types/index.ts: -------------------------------------------------------------------------------- 1 | import postType from './post/post'; 2 | import postInputType from './post/postInput'; 3 | import commentType from './comment/comment'; 4 | import commentInputType from './comment/commentInput'; 5 | 6 | export default { 7 | postType, 8 | postInputType, 9 | commentType, 10 | commentInputType, 11 | }; 12 | -------------------------------------------------------------------------------- /packages/openui/src/Box/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Component from './styles'; 3 | import Props from './types'; 4 | 5 | export default function Box({ 6 | children, 7 | ...rest, 8 | }: Props): JSX.Element { 9 | return ( 10 | 11 | {children || null} 12 | 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /packages/docs/config/generators/utils/index.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | 3 | const trimTemplateFile = (template) => { 4 | // Loads the template file and trims the whitespace and then returns the content as a string. 5 | return fs.readFileSync(template, 'utf8').replace(/\s*$/, ''); 6 | }; 7 | 8 | module.exports = { 9 | trimTemplateFile 10 | }; 11 | -------------------------------------------------------------------------------- /packages/docs/config/generators/container/state.js.hbs: -------------------------------------------------------------------------------- 1 | import { ErrorType } from './types'; 2 | 3 | export interface State { 4 | isLoading: boolean; 5 | error?: ErrorType; 6 | data?: string; 7 | } 8 | 9 | export const initialState: State = { 10 | isLoading: false, 11 | error: null, 12 | data: null, 13 | }; 14 | 15 | export default initialState; 16 | -------------------------------------------------------------------------------- /packages/openui/src/Section/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Component from './styles'; 3 | import BoxProps from '../Box/types'; 4 | 5 | export default function Section({ 6 | children, 7 | ...rest, 8 | }: BoxProps): JSX.Element { 9 | return ( 10 | 11 | {children} 12 | 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /packages/docs/src/client/components/NavBar/__tests__/__mocks__/navBarMocks.mock.ts: -------------------------------------------------------------------------------- 1 | const links = [ 2 | { 3 | url: 'https://medium.com', 4 | text: 'Medium', 5 | }, 6 | { 7 | url: 'https://www.ryancollins.io/', 8 | text: 'RyanCollins', 9 | }, 10 | ]; 11 | 12 | export const navbarProps = { 13 | logoText: 'NavBar Test', 14 | links, 15 | }; 16 | -------------------------------------------------------------------------------- /src/client/features/Landing/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Section = styled.section` 4 | padding: 60px; 5 | background-color: #f5f5f5; 6 | min-height: 100vh; 7 | align-items: center; 8 | justify-content: center; 9 | display: flex; 10 | flex-direction: column; 11 | h1, p { 12 | color: #666 !important; 13 | } 14 | `; 15 | -------------------------------------------------------------------------------- /src/server/db/models/post.ts: -------------------------------------------------------------------------------- 1 | import mongoose from 'mongoose'; 2 | 3 | const PostSchema = new mongoose.Schema({ 4 | title: { 5 | type: String, 6 | }, 7 | image: { 8 | type: String, 9 | }, 10 | content: { 11 | type: String, 12 | }, 13 | comments: [{ type: String, ref: 'Comment' }], 14 | }); 15 | 16 | export default mongoose.model('Post', PostSchema); 17 | -------------------------------------------------------------------------------- /packages/docs/src/client/components/Comment/__tests__/__mocks__/commentMocks.mock.ts: -------------------------------------------------------------------------------- 1 | export const commentProps = { 2 | author: 'Comment Author', 3 | body: 'Comment Body', 4 | }; 5 | 6 | export const commentPicProps = { 7 | author: 'Comment Author', 8 | body: 'Comment Body', 9 | picUrl: 'https://github.com/RyanCCollins/cdn/blob/master/misc/missing.png?raw=true', 10 | }; 11 | -------------------------------------------------------------------------------- /packages/docs/src/server/graph/types/post/postInput.ts: -------------------------------------------------------------------------------- 1 | import { 2 | GraphQLInputObjectType, 3 | GraphQLString, 4 | } from 'graphql'; 5 | 6 | export default new GraphQLInputObjectType({ 7 | name: 'PostInput', 8 | fields: () => ({ 9 | title: { type: GraphQLString }, 10 | content: { type: GraphQLString }, 11 | image: { type: GraphQLString }, 12 | }), 13 | }); 14 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/App/actions.ts: -------------------------------------------------------------------------------- 1 | import { DefaultAction } from 'shared/actions'; 2 | import * as types from './constants'; 3 | import { Action } from 'redux'; 4 | 5 | export interface SetIsMobileAction extends Action { 6 | type: types.SET_MOBILE_TYPE, 7 | isMobile: boolean 8 | } 9 | 10 | export type FeatureAction = 11 | SetIsMobileAction | 12 | DefaultAction; 13 | -------------------------------------------------------------------------------- /packages/docs/src/server/graph/queries/post/posts.ts: -------------------------------------------------------------------------------- 1 | import { 2 | GraphQLList, 3 | } from 'graphql'; 4 | 5 | import types from '../../types'; 6 | import PostModel from '../../../db/models/post'; 7 | 8 | export default { 9 | type: new GraphQLList(types.postType), 10 | args: {}, 11 | resolve() { 12 | return PostModel 13 | .find() 14 | .exec(); 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /src/client/reducers.ts: -------------------------------------------------------------------------------- 1 | import { combineReducers, Reducer } from 'redux'; 2 | import { routerReducer } from 'react-router-redux'; 3 | import client from './apolloClient'; 4 | /* GENERATOR-IMPORT-REDUCER */ 5 | 6 | export const rootReducer = combineReducers({ 7 | /* GENERATOR-EXPORT-REDUCER */ 8 | routing: routerReducer, 9 | apollo: client.reducer() as Reducer, 10 | }); 11 | -------------------------------------------------------------------------------- /packages/docs/src/server/db/models/post.ts: -------------------------------------------------------------------------------- 1 | import mongoose from 'mongoose'; 2 | 3 | const PostSchema = new mongoose.Schema({ 4 | title: { 5 | type: String, 6 | }, 7 | image: { 8 | type: String, 9 | }, 10 | content: { 11 | type: String, 12 | }, 13 | comments: [{ type: String, ref: 'Comment' }], 14 | }); 15 | 16 | export default mongoose.model('Post', PostSchema); 17 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/App/types.ts: -------------------------------------------------------------------------------- 1 | import App from '../'; 2 | 3 | export interface NavLink { url: string; text: string; }; 4 | 5 | export interface Props extends React.Props { 6 | children: JSX.Element; 7 | actions: { 8 | appSetMobile: (isMobile: boolean) => void, 9 | }; 10 | isMobile: boolean; 11 | navLinks: NavLink[]; 12 | logoText: string; 13 | }; 14 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/TodoApp/constants.ts: -------------------------------------------------------------------------------- 1 | export type ADD_TODO_TYPE = 'TODO_APP/ADD_TODO'; 2 | export const ADD_TODO: ADD_TODO_TYPE = 'TODO_APP/ADD_TODO'; 3 | 4 | export type INPUT_TYPE = 'TODO_APP/INPUT'; 5 | export const INPUT: INPUT_TYPE = 'TODO_APP/INPUT'; 6 | 7 | export type DELETE_TODO_TYPE = 'TODO_APP/DELETE_TODO'; 8 | export const DELETE_TODO: DELETE_TODO_TYPE = 'TODO_APP/DELETE_TODO'; 9 | -------------------------------------------------------------------------------- /packages/openui/src/Box/__tests__/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[` should render with default props 1`] = ` 4 | 5 |
6 | 7 | `; 8 | 9 | exports[` should render with different props 1`] = ` 10 | 14 |
15 | 16 | `; 17 | -------------------------------------------------------------------------------- /src/client/features/Landing/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Presentation from './presentation'; 3 | 4 | export interface Props { 5 | title: string; 6 | } 7 | 8 | class Landing extends React.Component { 9 | public render() { 10 | return ( 11 | 12 | ); 13 | } 14 | } 15 | 16 | export default Landing; 17 | -------------------------------------------------------------------------------- /src/client/features/Layout/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import LayoutPresentation from './presentation'; 3 | 4 | export interface Props { 5 | children: JSX.Element; 6 | } 7 | 8 | class Layout extends React.Component { 9 | public render() { 10 | return ( 11 | 12 | ); 13 | } 14 | } 15 | 16 | export default Layout; 17 | -------------------------------------------------------------------------------- /config/ignoreAssets.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | (function() { 3 | require.extensions['.scss'] = () => { 4 | return; 5 | }; 6 | require.extensions['.css'] = () => { 7 | return; 8 | }; 9 | require.extensions['.png'] = () => { 10 | return; 11 | }; 12 | require.extensions['.jpg'] = () => { 13 | return; 14 | }; 15 | require.extensions['.md'] = () => { 16 | return; 17 | }; 18 | })(); 19 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React TS Starter 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/Blog/types.ts: -------------------------------------------------------------------------------- 1 | import Blog from '../'; 2 | 3 | export interface Post { 4 | id: string; 5 | title: string; 6 | image: string; 7 | content: string; 8 | } 9 | 10 | export interface Props extends React.Props { 11 | loading: boolean; 12 | error?: { message: string }; 13 | posts?: Post[]; 14 | } 15 | 16 | export interface State { 17 | showError: boolean; 18 | } 19 | -------------------------------------------------------------------------------- /packages/docs/src/server/graph/types/comment/comment.ts: -------------------------------------------------------------------------------- 1 | import { 2 | GraphQLObjectType, 3 | GraphQLString, 4 | GraphQLNonNull, 5 | GraphQLID, 6 | } from 'graphql'; 7 | 8 | export default new GraphQLObjectType({ 9 | name: 'Comment', 10 | fields: () => ({ 11 | author: { type: GraphQLString }, 12 | body: { type: GraphQLString }, 13 | post: { type: new GraphQLNonNull(GraphQLID) }, 14 | }), 15 | }); 16 | -------------------------------------------------------------------------------- /packages/docs/src/client/components/index.ts: -------------------------------------------------------------------------------- 1 | /* GENERATOR-IMPORT */ 2 | import PostCard from './PostCard'; 3 | import AddComment from './AddComment'; 4 | import Comment from './Comment'; 5 | import Post from './Post'; 6 | import NavBar from './NavBar'; 7 | import Pic from './Pic'; 8 | 9 | export { 10 | /* GENERATOR-EXPORT */ 11 | PostCard, 12 | AddComment, 13 | Comment, 14 | Post, 15 | NavBar, 16 | Pic, 17 | }; 18 | -------------------------------------------------------------------------------- /packages/docs/src/client/containers/BlogPost/__tests__/actionCreators.test.ts: -------------------------------------------------------------------------------- 1 | import * as T from '../constants'; 2 | import actionCreators from '../actionCreators'; 3 | 4 | describe('blogPost actionCreators', () => { 5 | it('should have a type of INPUT', () => { 6 | const input = 'bar'; 7 | const expected = { type: T.INPUT, input }; 8 | expect(actionCreators.input(input)).toEqual(expected); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /config/generators/component/stateless.tsx.hbs: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Component from './styles'; 3 | 4 | export interface Props extends React.HTMLProps { 5 | children: JSX.Element; 6 | } 7 | export default function {{ properCase name }}({ 8 | children, 9 | }: Props): JSX.Element { 10 | return ( 11 | 12 | {children} 13 | 14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /packages/docs/config/ignoreAssets.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | (function() { 3 | require.extensions['.scss'] = () => { 4 | return; 5 | }; 6 | require.extensions['.css'] = () => { 7 | return; 8 | }; 9 | require.extensions['.png'] = () => { 10 | return; 11 | }; 12 | require.extensions['.jpg'] = () => { 13 | return; 14 | }; 15 | require.extensions['.md'] = () => { 16 | return; 17 | }; 18 | })(); 19 | -------------------------------------------------------------------------------- /packages/docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React TS Starter 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/openui/src/Button/__tests__/__snapshots__/index.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`