Docs

.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

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 :)

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('<PlyrComponent />', () => {
-  it('should render', () => {
-    const wrapper = shallow(<PlyrComponent />)
+describe("<PlyrComponent />", () => {
+  it("should render", () => {
+    const wrapper = shallow(<PlyrComponent />);
 
-    expect(wrapper).toBeDefined()
-  })
-
-  it('should allow custom className', () => {
-    const props = {
-      className: 'Custom',
-    }
-    const wrapper = shallow(<PlyrComponent {...props} />)
-
-    expect(wrapper.hasClass(props.className)).toBe(true)
-  })
-})
+    expect(wrapper).toBeDefined();
+  });
+});