diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index 88b6b32c..37f07f76 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -19,8 +19,8 @@ jobs: node-version: ${{ matrix.node-version }} - name: npm install, build, and test run: | - npm i + npm ci npm run build --if-present - + npm run test env: CI: true diff --git a/README.md b/README.md index 8d509288..7d5a7b5c 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,13 @@ # plyr-react -> plyr-react under work in progress -# Getting started +## Example + +Click +[here](https://stackblitz.com/edit/react-uq98gq?ctl=1&embed=1&file=index.js&hideExplorer=1&hideNavigation=1&view=preview) +to see example and you can play with +[this](https://stackblitz.com/edit/react-uq98gq) example. + +### Getting started for Development There are two methods for getting started with this repo. @@ -10,120 +16,148 @@ There are two methods for getting started with this repo. ``` > git clone git@github.com:chintan9/plyr-react.git > cd plyr-react - > yarn install + > npm run install ``` #### Not Familiar with Git? -Click [here](https://github.com/chintan9/plyr-react.git/archive/master.zip) to download the .zip file. Extract the contents of the zip file, then open your terminal, change to the project directory, and: + +Click [here](https://github.com/chintan9/plyr-react.git/archive/master.zip) to +download the .zip file. Extract the contents of the zip file, then open your +terminal, change to the project directory, and: ``` - > yarn install + > npm run install ``` - -## Developing +#### Developing To start the developing run : ``` -> yarn dev +> npm run dev ``` -This will build a version of your library, run the watcher and also run the Styleguide. -To open the Styleguide manualy open your Browser and navigate to [http://localhost:6060](http://localhost:6060). -Start developing your components in `src/lib/components` folder and update the `src/lib/index.js` file acordingly. -Always provide an `YourComponent.examples.md` file, so your component will show up in the Styleguide. -You can refer to example `PlyrComponent` component, but i think you'll get the idea. +This will build a version of your library, run the watcher and also run the +Styleguide. To open the Styleguide manualy open your Browser and navigate to +[http://localhost:6060](http://localhost:6060). Start developing your components +in `src/lib/components` folder and update the `src/lib/index.js` file +acordingly. Always provide an `YourComponent.examples.md` file, so your +component will show up in the Styleguide. You can refer to example +`PlyrComponent` component, but i think you'll get the idea. + +##### Proposals (Babel) -### Proposals (Babel) For smoother development some Babel plugin are included + - [class-properties](https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-class-properties) - [object-rest-spread](https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-object-rest-spread) - [optional-chaining](https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-optional-chaining) -## Styling your components +##### Styling your components + +`SCSS` and `CSS` are supported out of the box just import your styles into your +component like you normaly would do. For the use of `CSS Modules` refere to +[rollup-plugin-postcss](https://github.com/egoist/rollup-plugin-postcss) -`SCSS` and `CSS` are supported out of the box just import your styles into your component like you normaly would do. -For the use of `CSS Modules` refere to [rollup-plugin-postcss](https://github.com/egoist/rollup-plugin-postcss) +##### Testing -## Testing +Testing is done with [Jest](https://facebook.github.io/jest/), +[Enzyme](http://airbnb.io/enzyme/) and +[Jasmine Matchers](https://github.com/JamieMason/Jasmine-Matchers) You can refer +to `PlyrComponent.test.js` as an example. -Testing is done with [Jest](https://facebook.github.io/jest/), [Enzyme](http://airbnb.io/enzyme/) and [Jasmine Matchers](https://github.com/JamieMason/Jasmine-Matchers) -You can refer to `PlyrComponent.test.js` as an example. ``` -> yarn test +> npm run test ``` + or (for getting coverage) + ``` -> yarn test:coverage +> npm run test:coverage ``` +##### Linting -## Linting - -Linting is set up through [ESLint](https://eslint.org/) and configured with [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb) -You can modify linting rules by overriding them in the `.eslintrc.json` file. +Linting is set up through [ESLint](https://eslint.org/) and configured with +[eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb) You +can modify linting rules by overriding them in the `.eslintrc.json` file. ``` -> yarn lint +> npm run lint ``` + or (for for automatic fixing if possible) + ``` -> yarn lint:fix +> npm run lint:fix ``` -## Publishing your library to NPM +##### Publishing your library to NPM -To release your library to NPM or your private Registry, make sure you have an active account at [NPM](https://www.npmjs.com/), your `.npmrc` file is correctly setup and the repository url in `package.json` file is set to your repoitory url, then: +To release your library to NPM or your private Registry, make sure you have an +active account at [NPM](https://www.npmjs.com/), your `.npmrc` file is correctly +setup and the repository url in `package.json` file is set to your repoitory +url, then: ``` -> yarn release +> npm run release ``` -## Styleguide +##### Styleguide -For custom layouts, styleing and more information about the Styleguide please refer to [React Styleguidist](https://react-styleguidist.js.org/) documentation. +For custom layouts, styleing and more information about the Styleguide please +refer to [React Styleguidist](https://react-styleguidist.js.org/) documentation. -#### Deploy the Styleguide to GitHub Pages -Make sure the repository url in `package.json` file is set to your repoitory url, then: +##### Deploy the Styleguide to GitHub Pages + +Make sure the repository url in `package.json` file is set to your repoitory +url, then: ``` -> yarn deploy +> npm run deploy ``` -## Scripts +##### Scripts -- `yarn dev` : Executes the develop mode, running watcher and the Stylguide, rebuilding your library on every change. -- `yarn start` : Only serves the Styleguide. -- `yarn build` : Builds your library (build can be faound in `dist` folder). -- `yarn styleguide:build` : Builds the static Styleguide in case you want to deploy it. -- `yarn test` : Runs the tests. -- `yarn test:coverage`: Runs the test and shows the coverage. -- `yarn lint` : Runs the linter. -- `yarn lint:fix` : Runs the linter and fixes automatic fixable issues. -- `yarn release` : Publishes your Library on NPM or your private Registry (depending on your config in your `.npmrc` file). -- `yarn deploy`: Deploys the Styleguide to GitHub Pages. +- `npm run dev` : Executes the develop mode, running watcher and the Stylguide, + rebuilding your library on every change. +- `npm run start` : Only serves the Styleguide. +- `npm run build` : Builds your library (build can be faound in `dist` folder). +- `npm run styleguide:build` : Builds the static Styleguide in case you want to + deploy it. +- `npm run test` : Runs the tests. +- `npm run test:coverage`: Runs the test and shows the coverage. +- `npm run lint` : Runs the linter. +- `npm run lint:fix` : Runs the linter and fixes automatic fixable issues. +- `npm run release` : Publishes your Library on NPM or your private Registry + (depending on your config in your `.npmrc` file). +- `npm run deploy`: Deploys the Styleguide to GitHub Pages. +### Resources -## Resources +#### Bundler -### Bundler - [Rollup.js](https://rollupjs.org/guide/en) -### Styleguide +#### Styleguide + - [React Styleguidist](https://react-styleguidist.js.org/) -### Testing +#### Testing + - [Jasmine Matchers](https://github.com/JamieMason/Jasmine-Matchers) - [Enzyme](http://airbnb.io/enzyme/) - [Jest](https://facebook.github.io/jest/) -### Linting +#### Linting + - [ESLint](https://eslint.org/) - [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb) -### Compiler +#### Compiler + - [Babel 7](https://babeljs.io/) ## Support + If you like the project and want to support my work, you can buy me a coffee :) diff --git a/src/lib/components/PlyrComponent/PlyrComponent.test.js b/src/lib/components/PlyrComponent/PlyrComponent.test.js index badc9fdd..db1ae04b 100644 --- a/src/lib/components/PlyrComponent/PlyrComponent.test.js +++ b/src/lib/components/PlyrComponent/PlyrComponent.test.js @@ -1,21 +1,12 @@ -import React from 'react' -import { shallow } from 'enzyme' +import { shallow } from "enzyme"; +import React from "react"; -import PlyrComponent from './PlyrComponent' +import PlyrComponent from "./PlyrComponent"; -describe('', () => { - it('should render', () => { - const wrapper = shallow() +describe("", () => { + it("should render", () => { + const wrapper = shallow(); - expect(wrapper).toBeDefined() - }) - - it('should allow custom className', () => { - const props = { - className: 'Custom', - } - const wrapper = shallow() - - expect(wrapper.hasClass(props.className)).toBe(true) - }) -}) + expect(wrapper).toBeDefined(); + }); +});