├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .prettierrc
├── .travis.yml
├── README.md
├── example
    ├── README.md
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   └── manifest.json
    ├── src
    │   ├── App.test.tsx
    │   ├── App.tsx
    │   ├── index.tsx
    │   ├── react-app-env.d.ts
    │   └── setupTests.ts
    ├── tsconfig.json
    └── yarn.lock
├── package.json
├── src
    ├── .eslintrc
    ├── index.test.tsx
    ├── index.tsx
    ├── types
    │   └── index.ts
    └── typings.d.ts
├── tsconfig.json
├── tsconfig.test.json
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build/
2 | dist/
3 | node_modules/
4 | .snapshots/
5 | *.min.js


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "@typescript-eslint/parser",
 3 |   "extends": [
 4 |     "standard",
 5 |     "standard-react",
 6 |     "plugin:prettier/recommended",
 7 |     "prettier/standard",
 8 |     "prettier/react",
 9 |     "plugin:@typescript-eslint/eslint-recommended"
10 |   ],
11 |   "env": {
12 |     "node": true
13 |   },
14 |   "parserOptions": {
15 |     "ecmaVersion": 2020,
16 |     "ecmaFeatures": {
17 |       "legacyDecorators": true,
18 |       "jsx": true
19 |     }
20 |   },
21 |   "settings": {
22 |     "react": {
23 |       "version": "16"
24 |     }
25 |   },
26 |   "rules": {
27 |     "space-before-function-paren": 0,
28 |     "react/prop-types": 0,
29 |     "react/jsx-handler-names": 0,
30 |     "react/jsx-fragments": 0,
31 |     "react/no-unused-prop-types": 0,
32 |     "import/export": 0
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | build
2 | dist
3 | node_modules
4 | **/node_modules


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "singleQuote": true,
 3 |   "jsxSingleQuote": true,
 4 |   "semi": false,
 5 |   "tabWidth": 2,
 6 |   "bracketSpacing": true,
 7 |   "jsxBracketSameLine": false,
 8 |   "arrowParens": "always",
 9 |   "trailingComma": "none"
10 | }
11 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - 12
4 |   - 10
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # @soubai/react-spotifycode
 2 | 
 3 | <p align="center">
 4 | <img alt="spotify:user:spotify:playlist:37i9dQZF1DXcBWIGoYBM5M" src="https://scannables.scdn.co/uri/plain/jpeg/BAED54/black/640/spotify:user:spotify:playlist:37i9dQZF1DXcBWIGoYBM5M">
 5 | </p>
 6 | 
 7 | React library for Spotify codes
 8 | 
 9 | >Spotify Code is a QR-like “scannable” tag that can be used to quickly share or access a piece of content within Spotify
10 | 
11 | [![NPM](https://img.shields.io/npm/v/@soubai/react-spotifycode.svg)](https://www.npmjs.com/package/@soubai/react-spotifycode) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
12 | 
13 | ## Install
14 | 
15 | ```bash
16 | npm install --save @soubai/react-spotifycode
17 | ```
18 | 
19 | ## Usage
20 | 
21 | ```tsx
22 | import React, { Component } from 'react'
23 | 
24 | import SpotifyCode from '@soubai/react-spotifycode'
25 | 
26 | class Example extends Component {
27 |   render() {
28 |     return (
29 |       <SpotifyCode code='spotify:user:spotify:playlist:37i9dQZF1DXcBWIGoYBM5M' />
30 |     )
31 |   }
32 | }
33 | ```
34 | 
35 | ## Props
36 | 
37 | The component accept a few props:
38 | 
39 | - **code**: The Spotify URI - **required**
40 | - **format** The image format - 'jpeg' | 'png' | 'svg' - **default** : 'jpeg'
41 | - **barColor**: Bar color - 'black' | 'white' - **default** : 'black'
42 | - **backgroundColor**: The background color - **default** : '000' - **example** : '000' or '000000' for #000 color
43 | - **size**: The image size on pixel - **default** : 640
44 | 
45 | ## Development
46 | 
47 | Local development is broken into two parts (ideally using two tabs).
48 | 
49 | First, run rollup to watch your `src/` module and automatically recompile it into `dist/` whenever you make changes.
50 | 
51 | ```bash
52 | npm start # runs rollup with watch flag
53 | ```
54 | 
55 | The second part will be running the `example/` create-react-app that's linked to the local version of your module.
56 | 
57 | ```bash
58 | # (in another tab)
59 | cd example
60 | npm start # runs create-react-app dev server
61 | ```
62 | 
63 | ## License
64 | 
65 | MIT © [AbderrahimSoubaiElidrissi](https://github.com/AbderrahimSoubaiElidrissi)
66 | 


--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
1 | This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 | 
3 | It is linked to the @soubai/react-spotifycode package in the parent directory for development purposes.
4 | 
5 | You can run `yarn install` and then `yarn start` to test your package.
6 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@soubai/react-spotifycode-example",
 3 |   "homepage": ".",
 4 |   "version": "0.0.0",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
 8 |     "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
 9 |     "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
10 |     "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
11 |   },
12 |   "dependencies": {
13 |     "@testing-library/jest-dom": "link:../node_modules/@testing-library/jest-dom",
14 |     "@testing-library/react": "link:../node_modules/@testing-library/react",
15 |     "@testing-library/user-event": "link:../node_modules/@testing-library/user-event",
16 |     "@types/jest": "link:../node_modules/@types/jest",
17 |     "@types/node": "link:../node_modules/@types/node",
18 |     "@types/react": "link:../node_modules/@types/react",
19 |     "@types/react-dom": "link:../node_modules/@types/react-dom",
20 |     "react": "link:../node_modules/react",
21 |     "react-dom": "link:../node_modules/react-dom",
22 |     "react-scripts": "link:../node_modules/react-scripts",
23 |     "typescript": "link:../node_modules/typescript",
24 |     "@soubai/react-spotifycode": "link:.."
25 |   },
26 |   "devDependencies": {
27 |     "@babel/plugin-syntax-object-rest-spread": "^7.8.3"
28 |   },
29 |   "eslintConfig": {
30 |     "extends": "react-app"
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/example/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/soub4i/react-spotifycode/4a10c3c72c568b133341c51e05bd548f5fc60807/example/public/favicon.ico


--------------------------------------------------------------------------------
/example/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta
 7 |       name="viewport"
 8 |       content="width=device-width, initial-scale=1, shrink-to-fit=no"
 9 |     />
10 |     <meta name="theme-color" content="#000000" />
11 | 
12 |     <!--
13 |       manifest.json provides metadata used when your web app is added to the
14 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
15 |     -->
16 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
17 | 
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>react-spotifycode</title>
28 |   </head>
29 | 
30 |   <body>
31 |     <noscript>
32 |       You need to enable JavaScript to run this app.
33 |     </noscript>
34 | 
35 |     <div id="root"></div>
36 | 
37 |     <!--
38 |       This HTML file is a template.
39 |       If you open it directly in the browser, you will see an empty page.
40 | 
41 |       You can add webfonts, meta tags, or analytics to this file.
42 |       The build step will place the bundled scripts into the <body> tag.
43 | 
44 |       To begin the development, run `npm start` or `yarn start`.
45 |       To create a production bundle, use `npm run build` or `yarn build`.
46 |     -->
47 |   </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/example/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "react-spotifycode",
 3 |   "name": "react-spotifycode",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/example/src/App.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import App from './App'
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div')
 7 |   ReactDOM.render(<App />, div)
 8 |   ReactDOM.unmountComponentAtNode(div)
 9 | })
10 | 


--------------------------------------------------------------------------------
/example/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | import SpotifyCode  from '@soubai/react-spotifycode'
4 | const App = () => {
5 |   return <SpotifyCode backgroundColor="BAED54" barColor="white" code="spotify:user:spotify:playlist:37i9dQZF1DXcBWIGoYBM5M" />
6 | }
7 | 
8 | export default App
9 | 


--------------------------------------------------------------------------------
/example/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom'
3 | import App from './App'
4 | 
5 | ReactDOM.render(<App />, document.getElementById('root'))
6 | 


--------------------------------------------------------------------------------
/example/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/example/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 | 


--------------------------------------------------------------------------------
/example/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "outDir": "dist",
 4 |     "module": "esnext",
 5 |     "lib": [
 6 |       "dom",
 7 |       "esnext"
 8 |     ],
 9 |     "moduleResolution": "node",
10 |     "jsx": "react",
11 |     "sourceMap": true,
12 |     "declaration": true,
13 |     "esModuleInterop": true,
14 |     "noImplicitReturns": true,
15 |     "noImplicitThis": true,
16 |     "noImplicitAny": true,
17 |     "strictNullChecks": true,
18 |     "suppressImplicitAnyIndexErrors": true,
19 |     "noUnusedLocals": true,
20 |     "noUnusedParameters": true,
21 |     "allowSyntheticDefaultImports": true,
22 |     "target": "es5",
23 |     "allowJs": true,
24 |     "skipLibCheck": true,
25 |     "strict": true,
26 |     "forceConsistentCasingInFileNames": true,
27 |     "resolveJsonModule": true,
28 |     "isolatedModules": true,
29 |     "noEmit": true
30 |   },
31 |   "include": [
32 |     "src"
33 |   ],
34 |   "exclude": [
35 |     "node_modules",
36 |     "build"
37 |   ]
38 | }
39 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@soubai/react-spotifycode",
 3 |   "version": "1.0.0",
 4 |   "description": "React library for Spotify codes",
 5 |   "author": "Abderrahim Soubai-Elidrisi",
 6 |   "license": "MIT",
 7 |   "repository": "AbderrahimSoubaiElidrissi/react-spotifycode",
 8 |   "main": "dist/index.js",
 9 |   "module": "dist/index.modern.js",
10 |   "source": "src/index.tsx",
11 |   "engines": {
12 |     "node": ">=10"
13 |   },
14 |   "scripts": {
15 |     "build": "microbundle-crl --no-compress --format modern,cjs",
16 |     "start": "microbundle-crl watch --no-compress --format modern,cjs",
17 |     "prepare": "run-s build",
18 |     "test": "run-s test:unit test:lint test:build",
19 |     "test:build": "run-s build",
20 |     "test:lint": "eslint ./src/**/*.ts",
21 |     "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
22 |     "test:watch": "react-scripts test --env=jsdom",
23 |     "predeploy": "cd example && yarn install && yarn run build",
24 |     "deploy": "gh-pages -d example/build"
25 |   },
26 |   "peerDependencies": {
27 |     "react": "^16.0.0"
28 |   },
29 |   "devDependencies": {
30 |     "@testing-library/jest-dom": "^4.2.4",
31 |     "@testing-library/react": "^9.5.0",
32 |     "@testing-library/user-event": "^7.2.1",
33 |     "@types/jest": "^25.1.4",
34 |     "@types/node": "^12.12.38",
35 |     "@types/react": "^16.9.27",
36 |     "@types/react-dom": "^16.9.7",
37 |     "@typescript-eslint/eslint-plugin": "^2.26.0",
38 |     "@typescript-eslint/parser": "^2.26.0",
39 |     "microbundle-crl": "^0.13.10",
40 |     "babel-eslint": "^10.0.3",
41 |     "cross-env": "^7.0.2",
42 |     "eslint": "^6.8.0",
43 |     "eslint-config-prettier": "^6.7.0",
44 |     "eslint-config-standard": "^14.1.0",
45 |     "eslint-config-standard-react": "^9.2.0",
46 |     "eslint-plugin-import": "^2.18.2",
47 |     "eslint-plugin-node": "^11.0.0",
48 |     "eslint-plugin-prettier": "^3.1.1",
49 |     "eslint-plugin-promise": "^4.2.1",
50 |     "eslint-plugin-react": "^7.17.0",
51 |     "eslint-plugin-standard": "^4.0.1",
52 |     "gh-pages": "^2.2.0",
53 |     "npm-run-all": "^4.1.5",
54 |     "prettier": "^2.0.4",
55 |     "react": "^16.13.1",
56 |     "react-dom": "^16.13.1",
57 |     "react-scripts": "^3.4.1",
58 |     "typescript": "^3.7.5"
59 |   },
60 |   "files": [
61 |     "dist"
62 |   ]
63 | }
64 | 


--------------------------------------------------------------------------------
/src/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "env": {
3 |     "jest": true
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/src/index.test.tsx:
--------------------------------------------------------------------------------
1 | import SpotifyCode from '.'
2 | 
3 | describe('SpotifyCode', () => {
4 |   it('is truthy', () => {
5 |     expect(SpotifyCode).toBeTruthy()
6 |   })
7 | })
8 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { Props } from './types'
 3 | 
 4 | const SpotifyCode = ({
 5 |   code,
 6 |   format,
 7 |   backgroundColor,
 8 |   barColor,
 9 |   size
10 | }: Props) => {
11 |   const src = `https://scannables.scdn.co/uri/plain/${format}/${backgroundColor}/${barColor}/${size}/${code}`
12 |   return <img alt={code} src={src} />
13 | }
14 | 
15 | SpotifyCode.defaultProps = {
16 |   format: 'jpeg',
17 |   backgroundColor: '000',
18 |   barColor: 'black',
19 |   size: 640
20 | }
21 | 
22 | export default SpotifyCode
23 | 


--------------------------------------------------------------------------------
/src/types/index.ts:
--------------------------------------------------------------------------------
 1 | type FormatTypes = 'jpeg' | 'png' | 'svg'
 2 | 
 3 | type BarColorTypes = 'black' | 'white'
 4 | 
 5 | export interface Props {
 6 |   code: string
 7 |   format?: FormatTypes
 8 |   backgroundColor?: string
 9 |   barColor?: BarColorTypes
10 |   size?: number
11 | }
12 | 


--------------------------------------------------------------------------------
/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | interface SpotifyCode extends React.StatelessComponent {}
2 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "outDir": "dist",
 4 |     "module": "esnext",
 5 |     "lib": ["dom", "esnext"],
 6 |     "moduleResolution": "node",
 7 |     "jsx": "react",
 8 |     "sourceMap": true,
 9 |     "declaration": true,
10 |     "esModuleInterop": true,
11 |     "noImplicitReturns": true,
12 |     "noImplicitThis": true,
13 |     "noImplicitAny": true,
14 |     "strictNullChecks": true,
15 |     "suppressImplicitAnyIndexErrors": true,
16 |     "noUnusedLocals": true,
17 |     "noUnusedParameters": true,
18 |     "allowSyntheticDefaultImports": true
19 |   },
20 |   "include": ["src"],
21 |   "exclude": ["node_modules", "dist", "example"]
22 | }
23 | 


--------------------------------------------------------------------------------
/tsconfig.test.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./tsconfig.json",
3 |   "compilerOptions": {
4 |     "module": "commonjs"
5 |   }
6 | }


--------------------------------------------------------------------------------