diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..f8e16fe --- /dev/null +++ b/.babelrc @@ -0,0 +1,7 @@ +{ + "presets": ["@babel/env", "@babel/typescript", "@babel/react"], + "plugins": [ + "@babel/proposal-class-properties", + "@babel/proposal-object-rest-spread" + ] +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f6cacc6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,26 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +example/build +/build +dist/ +.netlify + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..984658c --- /dev/null +++ b/.travis.yml @@ -0,0 +1,4 @@ +language: node_js +node_js: + - 9 + - 8 diff --git a/README.md b/README.md new file mode 100644 index 0000000..b1d9b20 --- /dev/null +++ b/README.md @@ -0,0 +1,14 @@ +# LIBRARY_NAME + +LIBRARY_NAME is a library that... + +A simple "Hello world" would look like this: + +```js +// src/App.js +import new-react-lib from 'new-react-lib' + +export default props => ( +
+) +``` diff --git a/docs/.gitignore b/docs/.gitignore new file mode 100644 index 0000000..5395ea7 --- /dev/null +++ b/docs/.gitignore @@ -0,0 +1,12 @@ +.DS_Store + +node_modules + +lib/core/metadata.js +lib/core/MetadataBlog.js + +website/translated_docs +website/build/ +website/yarn.lock +website/node_modules +website/i18n/* diff --git a/docs/docs/introduction.md b/docs/docs/introduction.md new file mode 100644 index 0000000..eafe465 --- /dev/null +++ b/docs/docs/introduction.md @@ -0,0 +1,16 @@ +--- +id: introduction +title: Introduction +--- + +LIBRARY_NAME is a library that... A simple "Hello world" would look like this: + +``` +// src/App.js + +import new-react-lib from 'new-react-lib' + +export default props => ( +
+) +``` diff --git a/docs/website/README.md b/docs/website/README.md new file mode 100644 index 0000000..f3da77f --- /dev/null +++ b/docs/website/README.md @@ -0,0 +1,193 @@ +This website was created with [Docusaurus](https://docusaurus.io/). + +# What's In This Document + +* [Get Started in 5 Minutes](#get-started-in-5-minutes) +* [Directory Structure](#directory-structure) +* [Editing Content](#editing-content) +* [Adding Content](#adding-content) +* [Full Documentation](#full-documentation) + +# Get Started in 5 Minutes + +1. Make sure all the dependencies for the website are installed: + +```sh +# Install dependencies +$ yarn +``` +2. Run your dev server: + +```sh +# Start the site +$ yarn start +``` + +## Directory Structure + +Your project file structure should look something like this + +``` +my-docusaurus/ + docs/ + doc-1.md + doc-2.md + doc-3.md + website/ + blog/ + 2016-3-11-oldest-post.md + 2017-10-24-newest-post.md + core/ + node_modules/ + pages/ + static/ + css/ + img/ + package.json + sidebar.json + siteConfig.js +``` + +# Editing Content + +## Editing an existing docs page + +Edit docs by navigating to `docs/` and editing the corresponding document: + +`docs/doc-to-be-edited.md` + +```markdown +--- +id: page-needs-edit +title: This Doc Needs To Be Edited +--- + +Edit me... +``` + +For more information about docs, click [here](https://docusaurus.io/docs/en/navigation) + +## Editing an existing blog post + +Edit blog posts by navigating to `website/blog` and editing the corresponding post: + +`website/blog/post-to-be-edited.md` +```markdown +--- +id: post-needs-edit +title: This Blog Post Needs To Be Edited +--- + +Edit me... +``` + +For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog) + +# Adding Content + +## Adding a new docs page to an existing sidebar + +1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`: + +```md +--- +id: newly-created-doc +title: This Doc Needs To Be Edited +--- + +My new content here.. +``` + +1. Refer to that doc's ID in an existing sidebar in `website/sidebar.json`: + +```javascript +// Add newly-created-doc to the Getting Started category of docs +{ + "docs": { + "Getting Started": [ + "quick-start", + "newly-created-doc" // new doc here + ], + ... + }, + ... +} +``` + +For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation) + +## Adding a new blog post + +1. Make sure there is a header link to your blog in `website/siteConfig.js`: + +`website/siteConfig.js` +```javascript +headerLinks: [ + ... + { blog: true, label: 'Blog' }, + ... +] +``` + +2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`: + +`website/blog/2018-05-21-New-Blog-Post.md` + +```markdown +--- +author: Frank Li +authorURL: https://twitter.com/foobarbaz +authorFBID: 503283835 +title: New Blog Post +--- + +Lorem Ipsum... +``` + +For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog) + +## Adding items to your site's top navigation bar + +1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`: + +`website/siteConfig.js` +```javascript +{ + headerLinks: [ + ... + /* you can add docs */ + { doc: 'my-examples', label: 'Examples' }, + /* you can add custom pages */ + { page: 'help', label: 'Help' }, + /* you can add external links */ + { href: 'https://github.com/facebook/Docusaurus', label: 'GitHub' }, + ... + ], + ... +} +``` + +For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation) + +## Adding custom pages + +1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`: +1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element: + +`website/siteConfig.js` +```javascript +{ + headerLinks: [ + ... + { page: 'my-new-custom-page', label: 'My New Custom Page' }, + ... + ], + ... +} +``` + +For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages). + +# Full Documentation + +Full documentation can be found on the [website](https://docusaurus.io/). diff --git a/docs/website/blog/2017-10-24-new-version-1.0.0.md b/docs/website/blog/2017-10-24-new-version-1.0.0.md new file mode 100644 index 0000000..40d7f9b --- /dev/null +++ b/docs/website/blog/2017-10-24-new-version-1.0.0.md @@ -0,0 +1,6 @@ +--- +title: New Version +author: Dev +--- + +This blog post is a Release Note diff --git a/docs/website/core/Footer.js b/docs/website/core/Footer.js new file mode 100644 index 0000000..cd6d339 --- /dev/null +++ b/docs/website/core/Footer.js @@ -0,0 +1,91 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +const React = require('react') + +class Footer extends React.Component { + docUrl(doc, language) { + const { baseUrl } = this.props.config + const { docsUrl } = this.props.config + const docsPart = `${docsUrl ? `${docsUrl}/` : ''}` + const langPart = `${language ? `${language}/` : ''}` + return `${baseUrl}${docsPart}${langPart}${doc}` + } + + pageUrl(doc, language) { + const { baseUrl } = this.props.config + return baseUrl + (language ? `${language}/` : '') + doc + } + + render() { + return ( + + ) + } +} + +module.exports = Footer diff --git a/docs/website/package.json b/docs/website/package.json new file mode 100644 index 0000000..4f3814f --- /dev/null +++ b/docs/website/package.json @@ -0,0 +1,15 @@ +{ + "scripts": { + "examples": "docusaurus-examples", + "start": "docusaurus-start", + "build": "docusaurus-build", + "publish-gh-pages": "docusaurus-publish", + "write-translations": "docusaurus-write-translations", + "version": "docusaurus-version", + "rename-version": "docusaurus-rename-version" + }, + "devDependencies": { + "docusaurus": "^1.9.0", + "react": "^16.8.6" + } +} diff --git a/docs/website/pages/en/help.js b/docs/website/pages/en/help.js new file mode 100644 index 0000000..8b00a2c --- /dev/null +++ b/docs/website/pages/en/help.js @@ -0,0 +1,28 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +const React = require('react') + +const CompLibrary = require('../../core/CompLibrary.js') + +const { Container } = CompLibrary + +function Help(props) { + return ( +
+ +
+
+

Need help?

+
+
+ +
+ ) +} + +module.exports = Help diff --git a/docs/website/sidebars.json b/docs/website/sidebars.json new file mode 100644 index 0000000..4c9e571 --- /dev/null +++ b/docs/website/sidebars.json @@ -0,0 +1,5 @@ +{ + "docs": { + "Getting Started": ["introduction"] + } +} diff --git a/docs/website/siteConfig.js b/docs/website/siteConfig.js new file mode 100644 index 0000000..f03c31e --- /dev/null +++ b/docs/website/siteConfig.js @@ -0,0 +1,105 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +// See https://docusaurus.io/docs/site-config for all the possible +// site configuration options. + +// List of projects/orgs using your project for the users page. +const users = [ + { + caption: 'User1', + // You will need to prepend the image path with your baseUrl + // if it is not '/', like: '/test-site/img/image.jpg'. + image: '/img/undraw_open_source.svg', + infoLink: 'https://www.facebook.com', + pinned: true, + }, +] + +const siteConfig = { + title: 'LIBRARY_NAME.js', // Title for your website. + tagline: 'Yes.', + url: 'https://new-react-lib.netlify.com', // Your website URL + baseUrl: '/', // Base URL for your project */ + // For github.io type URLs, you would set the url and baseUrl like: + // url: 'https://facebook.github.io', + // baseUrl: '/test-site/', + + // Used for publishing and more + projectName: 'new-react-lib', + organizationName: 'Seasoned', + // For top-level user or org sites, the organization is still the same. + // e.g., for the https://JoelMarcey.github.io site, it would be set like... + // organizationName: 'JoelMarcey' + + // For no header links in the top nav bar -> headerLinks: [], + headerLinks: [ + { doc: 'introduction', label: 'Docs' }, + { doc: 'live-example', label: 'Live example' }, + { page: 'help', label: 'Help' }, + { blog: true, label: 'Blog' }, + ], + + // If you have users set above, you add it here: + users, + + /* path to images for header/footer */ + favicon: 'img/favicon.ico', + + /* Colors for website */ + colors: { + primaryColor: '#1F7A8C', + secondaryColor: '#F87060', + }, + + /* Custom fonts for website */ + /* + fonts: { + myFont: [ + "Times New Roman", + "Serif" + ], + myOtherFont: [ + "-apple-system", + "system-ui" + ] + }, + */ + + // This copyright info is used in /core/Footer.js and blog RSS/Atom feeds. + copyright: `Copyright © ${new Date().getFullYear()} Seasoned Software`, + + highlight: { + // Highlight.js theme to use for syntax highlighting in code blocks. + theme: 'atom-one-dark', + defaultLang: 'javascript', + }, + + // Add custom scripts here that would be placed in + LIBRARY_NAME docs + + + If you are not redirected automatically, follow this + link. + + diff --git a/example/.env b/example/.env new file mode 100644 index 0000000..6f809cc --- /dev/null +++ b/example/.env @@ -0,0 +1 @@ +SKIP_PREFLIGHT_CHECK=true diff --git a/example/package.json b/example/package.json new file mode 100644 index 0000000..3f16d4f --- /dev/null +++ b/example/package.json @@ -0,0 +1,28 @@ +{ + "name": "new-react-lib-example", + "homepage": "https://SeasonedSoftware.github.io/new-react-lib", + "version": "0.0.0", + "license": "MIT", + "private": true, + "dependencies": { + "@reach/router": "latest", + "new-react-lib": "latest", + "prop-types": "latest", + "react": "latest", + "react-dom": "latest", + "react-scripts": "latest" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject", + "postinstall": "yarn link new-react-lib" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/example/public/index.html b/example/public/index.html new file mode 100644 index 0000000..0f366bd --- /dev/null +++ b/example/public/index.html @@ -0,0 +1,23 @@ + + + + + + + + + + LIBRARY_NAME + + + + + +
+ + diff --git a/example/public/manifest.json b/example/public/manifest.json new file mode 100644 index 0000000..77d8542 --- /dev/null +++ b/example/public/manifest.json @@ -0,0 +1,8 @@ +{ + "short_name": "new-react-lib", + "name": "new-react-lib", + "start_url": "./index.html", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/example/src/App.css b/example/src/App.css new file mode 100644 index 0000000..f37ab6b --- /dev/null +++ b/example/src/App.css @@ -0,0 +1,29 @@ +body { + margin: 0; + padding: 0; + font-family: sans-serif; +} + +.App { + align-items: center; + background-color: #282c34; + color: white; + display: flex; + flex-direction: column; + font-size: calc(10px + 2vmin); + justify-content: center; + min-height: 100vh; + text-align: center; +} + +a { + color: #00dcff; +} + +.form { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + height: 200px; +} diff --git a/example/src/App.js b/example/src/App.js new file mode 100644 index 0000000..430bf18 --- /dev/null +++ b/example/src/App.js @@ -0,0 +1,15 @@ +import React from 'react' +import { Router } from '@reach/router' +import Example from './Example' + +import './App.css' + +const App = () => ( +
+ + + +
+) + +export default App diff --git a/example/src/Example.js b/example/src/Example.js new file mode 100644 index 0000000..ad84dca --- /dev/null +++ b/example/src/Example.js @@ -0,0 +1,6 @@ +import React from 'react' +import { foo } from 'new-react-lib' + +const Example = () =>
{foo()}
+ +export default Example diff --git a/package.json b/package.json new file mode 100644 index 0000000..f47fabb --- /dev/null +++ b/package.json @@ -0,0 +1,59 @@ +{ + "name": "new-react-lib", + "version": "1.1.3", + "description": "CRUD made easy. REST data layer abstraction library.", + "author": "SeasonedSoftware", + "license": "MIT", + "repository": "SeasonedSoftware/new-react-lib", + "main": "dist/new-react-lib.cjs.js", + "module": "dist/new-react-lib.esm.js", + "types": "dist/types/index.d.ts", + "engines": { + "node": ">=8", + "npm": ">=5" + }, + "scripts": { + "type-check": "tsc --noEmit", + "type-check:watch": "npm run type-check -- --watch", + "test": "cross-env CI=1 react-scripts test --env=jsdom", + "test:watch": "react-scripts test --env=jsdom", + "build": "npm run build:types && npm run build:js", + "build:js": "rollup -c", + "build:types": "tsc --emitDeclarationOnly", + "start": "rollup -c -w", + "prepare": "yarn run build", + "predeploy": "yarn build && cd example/ && yarn build && cd ../", + "deploy": "gh-pages -d example/build" + }, + "peerDependencies": { + "prop-types": "15.x", + "react": "^16.8.6", + "react-dom": "^16.8.6" + }, + "devDependencies": { + "@babel/core": "^7.4.5", + "@babel/plugin-proposal-class-properties": "^7.4.4", + "@babel/plugin-proposal-object-rest-spread": "^7.4.4", + "@babel/preset-react": "^7.0.0", + "@babel/preset-typescript": "^7.3.3", + "@types/react": "^16.8.20", + "@types/react-dom": "^16.8.4", + "cross-env": "^5.2.0", + "gh-pages": "^2.0.1", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "react-scripts": "^3.0.1", + "rollup": "^1.15.6", + "rollup-plugin-babel": "^4.3.2", + "rollup-plugin-commonjs": "^10.0.0", + "rollup-plugin-json": "^4.0.0", + "rollup-plugin-node-resolve": "^5.0.3", + "rollup-plugin-peer-deps-external": "^2.2.0", + "rollup-plugin-uglify": "^6.0.2", + "typescript": "^3.5.2" + }, + "files": [ + "dist" + ], + "dependencies": {} +} diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 0000000..cfbb59b --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,46 @@ +import commonjs from 'rollup-plugin-commonjs' +import uglify from 'rollup-plugin-uglify' +import resolve from 'rollup-plugin-node-resolve' +import external from 'rollup-plugin-peer-deps-external' +import babel from 'rollup-plugin-babel' +import json from 'rollup-plugin-json' +import pkg from './package.json' + +const extensions = ['.js', '.jsx', '.ts', '.tsx'] + +const config = { + input: './src/index.ts', + // Specify here external modules which you don't want to include in your bundle (for instance: 'lodash', 'moment' etc.) + external: ['react', 'react-dom'], + plugins: [ + // Allows node_modules resolution + resolve({ extensions }), + // Allow bundling cjs modules. Rollup doesn't understand cjs + commonjs({ + include: /node_modules/, + }), + json(), + // Compile TypeScript/JavaScript files + babel({ extensions, include: ['src/**/*'], exclude: 'node_modules/**' }), + external(), + ], + + output: [ + { + file: pkg.main, + format: 'cjs', + exports: 'named', + }, + { + file: pkg.module, + format: 'es', + exports: 'named', + }, + ], +} + +if (process.env.NODE_ENV === 'production') { + config.plugins.push(uglify()) +} + +export default config diff --git a/scripts/scaffold.js b/scripts/scaffold.js new file mode 100644 index 0000000..48fbf3e --- /dev/null +++ b/scripts/scaffold.js @@ -0,0 +1,65 @@ +const readline = require('readline-promise').default +const replace = require('replace-in-file') +const fs = require('fs') +const path = require('path') +const startCase = require('lodash/startCase') + +const rl = readline.createInterface({ + input: process.stdin, + output: process.stdout, +}) + +const replaceInFile = async options => { + try { + const results = await replace(options) + return console.log('Replacement results:', results) + } catch (error) { + return console.error('Error occurred:', error) + } +} + +const defaultProj = path + .dirname(__dirname, '..') + .split(path.sep) + .pop() + +const start = async () => { + const project = + (await rl.questionAsync( + `What is your app name in kebab case (${defaultProj})? `, + )) || defaultProj + const defaultName = startCase(project) + const name = + (await rl.questionAsync(`What is your website title (${defaultName})? `)) || + defaultName + await replaceInFile({ + files: [ + './docs/docs/introduction.md', + './docs/website/siteConfig.js', + './docs/website/core/Footer.js', + './example/public/manifest.json', + './example/src/Example.js', + './example/package.json', + './package.json', + './README.md', + ], + from: /new-react-lib/g, + to: project, + }) + await replaceInFile({ + files: [ + './docs/docs/introduction.md', + './docs/website/siteConfig.js', + './docs/website/static/index.html', + './example/public/index.html', + './README.md', + ], + from: /LIBRARY_NAME/g, + to: name, + }) + // fs.copyFileSync('.env.sample', '.env.local') + console.log(`All good! Happy dev 🤓`) + rl.close() +} + +start() diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..305565d --- /dev/null +++ b/src/index.ts @@ -0,0 +1,3 @@ +export default { + foo: () => 'bar', +} diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts new file mode 100644 index 0000000..6431bc5 --- /dev/null +++ b/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..5ac6bb1 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "allowSyntheticDefaultImports": true, + "noFallthroughCasesInSwitch": true, + "noUnusedParameters": true, + "noImplicitReturns": true, + "moduleResolution": "node", + "esModuleInterop": true, + "noUnusedLocals": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true, + "strictNullChecks": true, + "sourceMap": true, + "pretty": true, + "jsx": "react" + }, + "include": ["src/**/*"], + "exclude": ["node_modules", "dist"] +}