Initial commit

.commitlintrc.json

@@ -0,0 +1,5 @@
+{
+    "extends": [
+        "@commitlint/config-conventional"
+    ]
+}

.editorconfig

@@ -0,0 +1,16 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[package.json]
+indent_size = 2
+
+[{*.md,*.snap}]
+trim_trailing_whitespace = false

.eslintrc.json

@@ -0,0 +1,13 @@
+{
+    "root": true,
+    "env": {
+        "browser": true,
+        "node": true
+    },
+    "extends": [
+        "@moxy/eslint-config-base/esm",
+        "@moxy/eslint-config-babel",
+        "@moxy/eslint-config-react",
+        "@moxy/eslint-config-jest"
+    ]
+}

.github/workflows/node-ci.yml

@@ -0,0 +1,36 @@
+name: Node CI
+
+on:
+  push:
+    paths-ignore:
+      - demo/**/*
+
+jobs:
+
+  check:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: ['12', '13']
+    name: "[v${{ matrix.node }}] prepare"
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v1
+
+    - name: Install dependencies
+      run: |
+        npm ci
+
+    - name: Run lint & tests
+      env:
+        CI: 1
+      run: |
+        npm run lint
+        npm t
+
+    - name: Submit coverage
+      uses: codecov/codecov-action@v1
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: true

.gitignore

@@ -0,0 +1,6 @@
+node_modules
+npm-debug.log*
+coverage
+lib/
+es/
+dist/

.huskyrc

@@ -0,0 +1,6 @@
+{
+    "hooks": {
+        "pre-commit": "lint-staged",
+        "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+}

.lintstagedrc

@@ -0,0 +1,3 @@
+{
+    "*.js": "eslint"
+}

INSTRUCTIONS.md

@@ -0,0 +1,79 @@
+# react-lib-template
+
+A template that aims to make the implementation of `React` component packages easier and more methodic.
+
+## Usage
+
+This repo serves as the template for the creation of MOXY's base `React` components. To use this, just select `@moxystudio/react-lib-template` as the template when creating a new repo for your new package, and you're all set to start working.
+
+This template already includes a `src` folder, with 2 dummy files ready for you to start your work. `NewComponent` is a dummy component, available for demonstration purposes. Just rename `NewComponent.js` and change it according to your needs. An `index.js` for exporting is available as well. Do not forget to update the unit tests and try to reach as much coverage as possible.
+
+### Demo
+
+There is a [Next.js](https://nextjs.org/) project available inside the `/demo` folder. This is useful for you to manually test your package before releasing it.
+
+To gain access to your package as if it already was a `node_module`, please update the demo's `package.json` and create a symlink:
+
+```json
+"dependencies": {
+    "{name-of-package}": "file:..",
+}
+```
+
+To run the demo, just do the following inside the demo's folder:
+
+```cmd
+$ npm i
+$ npm run dev
+```
+
+### With CSS
+
+This package already has css configuration enabled. We are currently using [@moxy/postcss-preset](https://github.com/moxystudio/postcss-preset) without `css-modules`.
+
+Your stylesheets should be placed inside `src/styles` and you must use a good naming convention to avoid collisions with other project's styles. We suggest that you use the package name as a prefix.
+Here is an example to a package named `react-foo`:
+
+```css
+.react-foo_container {
+    background-color: black;
+}
+
+.react-foo_content {
+    margin-top: 20px;
+    color: black;
+}
+```
+
+Every stylesheet placed inside the `src/styles` folder will be transpiled at build time and the output will be available at `/dist`.
+So, whenever you publish a package, please remember to detail in the README file which stylesheets are available and how a developer can import them.
+An example with a package named `react-foo`:
+
+> To import a stylesheet, one can import it on the project's entry CSS file:
+> ```css
+> /* src/index.css */
+> @import "@moxy/react-foo/dist/index.css";
+> ```
+> ...or in the project's entry JavaScript file:
+> ```js
+> /* src/index.js */
+> import "@moxy/react-foo/dist/index.css";
+> ```
+
+### Without CSS
+
+If your package doesn't need any styling, you can trim it down to disable css support:
+1. Delete `postcss.config.js` file.
+2. Delete `src/styles` folder.
+3. Remove `npm run build:css` from the `"build"` script in `package.json`.
+4. Remove `postcss-cli` from the dev dependencies list in `package.json`.
+5. Remove all imported css from the demo `/pages/_app.js`.
+
+## DOD Checklist
+
+In order to help make proper use of this template, here's a quick checklist with some crucial stuff to have in mind:
+
+- [ ] Update `package.json` name, description, keywords, etc.
+- [ ] Review dependencies, removing unnecessary ones.
+- [ ] Add unit tests and reach good coverage. The closest to 100%, the better.
+- [ ] Update the `README`, documenting the features of your component as best as possible.

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 Made With MOXY Lda <hello@moxy.studio>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,91 @@
+-------
+### ⚠️  PLEASE READ THE [INSTRUCTIONS](/INSTRUCTIONS.md) FOR GUIDELINES ON HOW TO START YOUR PACKAGE.
+> Don't forget to remove this warning while updating this README.
+-------
+
+# {package-name}
+
+[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Build Status][build-status-image]][build-status-url] [![Coverage Status][codecov-image]][codecov-url] [![Dependency status][david-dm-image]][david-dm-url] [![Dev Dependency status][david-dm-dev-image]][david-dm-dev-url]
+
+[npm-url]:https://npmjs.org/package/@moxy/{package-name}
+[downloads-image]:https://img.shields.io/npm/dm/@moxy/{package-name}.svg
+[npm-image]:https://img.shields.io/npm/v/@moxy/{package-name}.svg
+[build-status-url]:https://github.com/moxystudio/{package-name}/actions
+[build-status-image]:https://img.shields.io/github/workflow/status/moxystudio/{package-name}/Node%20CI/master
+[codecov-url]:https://codecov.io/gh/moxystudio/{package-name}
+[codecov-image]:https://img.shields.io/codecov/c/github/moxystudio/{package-name}/master.svg
+[david-dm-url]:https://david-dm.org/moxystudio/{package-name}
+[david-dm-image]:https://img.shields.io/david/moxystudio/{package-name}.svg
+[david-dm-dev-url]:https://david-dm.org/moxystudio/{package-name}?type=dev
+[david-dm-dev-image]:https://img.shields.io/david/dev/moxystudio/{package-name}.svg
+
+{package-description}
+
+## Installation
+
+```sh
+$ npm install @moxy/{package-name}
+```
+
+This library is written in modern JavaScript and is published in both CommonJS and ES module transpiled variants. If you target older browsers please make sure to transpile accordingly.
+
+## Motivation
+
+{package-motivation}
+
+## Usage
+
+{package-usage-example}
+
+## API
+
+{package-api-description}
+
+#### {package-api-prop-example}
+
+Type: `object`
+Required: `true`
+
+The `{package-api-prop-example}` has the following shape:
+```js
+{package-api-prop-example}: PropTypes.shape({
+    foo: PropTypes.string,
+    bar: PropTypes.arrayOf(PropTypes.object),
+}).isRequired,
+```
+
+## Tests
+
+```sh
+$ npm test
+$ npm test -- --watch # during development
+```
+
+## Demo
+
+A demo [Next.js](https://nextjs.org/) project is available in the [`/demo`](./demo) folder so you can try out this component.
+
+First, build the `{package-name}` project with:
+
+```sh
+$ npm run build
+```
+
+To run the demo, do the following inside the demo's folder:
+
+```sh
+$ npm i
+$ npm run dev
+```
+
+*Note: Everytime a change is made to the package a rebuild is required to reflect those changes on the demo.*
+
+## FAQ
+
+### I can't override the component's CSS, what's happening?
+
+There is an ongoing [next.js issue](https://github.com/zeit/next.js/issues/10148) about the loading order of modules and global CSS in development mode. This has been fixed in [v9.3.6-canary.0](https://github.com/zeit/next.js/releases/tag/v9.3.6-canary.0), so you can either update `next.js` to a version higher than `v9.3.5`, or simply increase the CSS specificity when overriding component's classes, as we did in the [`demo`](./demo/pages/index.module.css), e.g. having the page or section CSS wrap the component's one.
+
+## License
+
+Released under the [MIT License](https://www.opensource.org/licenses/mit-license.php).

babel.config.js

@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = (api) => {
+    api.cache(true);
+
+    return {
+        ignore: process.env.NODE_ENV === 'test' ? [] : ['**/*.test.js', '**/__snapshots__'],
+        presets: [
+            ['@moxy/babel-preset/lib', { react: true }],
+        ],
+    };
+};

demo/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.next/
+out/

demo/next.config.js

@@ -0,0 +1,9 @@
+/* eslint-disable import/no-commonjs */
+
+module.exports = {
+    webpack: (config) => {
+        config.resolve.symlinks = false;
+
+        return config;
+    },
+};