-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
BREAKING CHANGE: Update the entire project to Typescript
- Loading branch information
Showing
51 changed files
with
2,262 additions
and
3,507 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| parser: '@typescript-eslint/parser' | ||
| env: | ||
| browser: true | ||
| node: true | ||
| es6: true | ||
| 'jest/globals': true | ||
| parserOptions: | ||
| ecmaVersion: 2020 | ||
| sourceType: "module" | ||
| ecmaFeatures: | ||
| jsx: true | ||
| settings: | ||
| react: | ||
| version: "detect" | ||
| extends: | ||
| - 'eslint:recommended' | ||
| - 'plugin:@typescript-eslint/recommended' | ||
| - 'prettier/@typescript-eslint' | ||
| - 'plugin:prettier/recommended' | ||
| - 'plugin:jest/recommended' | ||
| - 'plugin:react/recommended' | ||
| - 'plugin:react-hooks/recommended' | ||
| plugins: | ||
| - '@typescript-eslint' | ||
| - 'prettier' | ||
| - 'jest' | ||
| - 'react' | ||
| - 'react-hooks' | ||
| rules: | ||
| "react/no-children-prop": "off" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "semi": true, | ||
| "trailingComma": "none", | ||
| "printWidth": 80, | ||
| "singleQuote": true, | ||
| "tabWidth": 2 | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,14 @@ | ||
| module.exports = { | ||
| coverageDirectory: 'coverage', | ||
| moduleFileExtensions: ['js', 'json', 'ts', 'tsx'], | ||
| preset: 'ts-jest', | ||
| rootDir: __dirname, | ||
| transform: { | ||
| '^.+\\.(t|j)s$': 'ts-jest' | ||
| }, | ||
| testPathIgnorePatterns: [ | ||
| '<rootDir>/node_modules/', | ||
| '<rootDir>/__tests__/.eslintrc.js', | ||
| '<rootDir>/__tests__/.eslintrc.js' | ||
| ], | ||
| testEnvironmentOptions: { resources: 'usable' }, | ||
| testEnvironmentOptions: { resources: 'usable' } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| import React from 'react'; | ||
| import { render, act, waitFor } from '@testing-library/react'; | ||
| import Color from './Color.component'; | ||
|
|
||
| describe('Color', () => { | ||
| const src = 'https://homepages.cae.wisc.edu/~ece533/images/airplane.png'; | ||
| const timeout = 15000; | ||
|
|
||
| test( | ||
| 'should be a children with default format', | ||
| async () => { | ||
| const children = jest.fn(() => null); | ||
|
|
||
| await act(async () => { | ||
| render(<Color src={src} children={children} crossOrigin="Anonymous" />); | ||
| }); | ||
|
|
||
| expect(children).toHaveBeenCalledWith({ | ||
| loading: true, | ||
| error: undefined, | ||
| data: undefined | ||
| }); | ||
|
|
||
| await waitFor(() => expect(children).toHaveBeenCalledTimes(2), { | ||
| timeout | ||
| }); | ||
|
|
||
| expect(children).toHaveBeenCalledWith({ | ||
| loading: false, | ||
| error: undefined, | ||
| data: 'rgb(199, 203, 205)' | ||
| }); | ||
| }, | ||
| timeout | ||
| ); | ||
|
|
||
| test( | ||
| 'should be a children with rgb array', | ||
| async () => { | ||
| const format = 'rgbArray'; | ||
| const children = jest.fn(() => null); | ||
|
|
||
| await act(async () => { | ||
| render( | ||
| <Color | ||
| src={src} | ||
| format={format} | ||
| children={children} | ||
| crossOrigin="Anonymous" | ||
| /> | ||
| ); | ||
| }); | ||
|
|
||
| expect(children).toHaveBeenCalledWith({ | ||
| loading: true, | ||
| error: undefined, | ||
| data: undefined | ||
| }); | ||
|
|
||
| await waitFor(() => expect(children).toHaveBeenCalledTimes(2), { | ||
| timeout | ||
| }); | ||
|
|
||
| expect(children).toHaveBeenCalledWith({ | ||
| loading: false, | ||
| error: undefined, | ||
| data: [199, 203, 205] | ||
| }); | ||
| }, | ||
| timeout | ||
| ); | ||
|
|
||
| test( | ||
| 'should be a children with rgb string', | ||
| async () => { | ||
| const format = 'rgbString'; | ||
| const children = jest.fn(() => null); | ||
|
|
||
| await act(async () => { | ||
| render( | ||
| <Color | ||
| src={src} | ||
| format={format} | ||
| children={children} | ||
| crossOrigin="Anonymous" | ||
| /> | ||
| ); | ||
| }); | ||
|
|
||
| expect(children).toHaveBeenCalledWith({ | ||
| loading: true, | ||
| error: undefined, | ||
| data: undefined | ||
| }); | ||
|
|
||
| await waitFor(() => expect(children).toHaveBeenCalledTimes(2), { | ||
| timeout | ||
| }); | ||
|
|
||
| expect(children).toHaveBeenCalledWith({ | ||
| loading: false, | ||
| error: undefined, | ||
| data: 'rgb(199, 203, 205)' | ||
| }); | ||
| }, | ||
| timeout | ||
| ); | ||
|
|
||
| test( | ||
| 'should be a children with hex', | ||
| async () => { | ||
| const format = 'hex'; | ||
| const children = jest.fn(() => null); | ||
|
|
||
| await act(async () => { | ||
| render( | ||
| <Color | ||
| src={src} | ||
| format={format} | ||
| children={children} | ||
| crossOrigin="Anonymous" | ||
| /> | ||
| ); | ||
| }); | ||
|
|
||
| expect(children).toHaveBeenCalledWith({ | ||
| loading: true, | ||
| error: undefined, | ||
| data: undefined | ||
| }); | ||
|
|
||
| await waitFor(() => expect(children).toHaveBeenCalledTimes(2), { | ||
| timeout | ||
| }); | ||
|
|
||
| expect(children).toHaveBeenCalledWith({ | ||
| loading: false, | ||
| error: undefined, | ||
| data: '#c7cbcd' | ||
| }); | ||
| }, | ||
| timeout | ||
| ); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React from 'react'; | ||
| import { ColorFormats } from 'types'; | ||
| import useColor, { UseColorState } from './useColor'; | ||
|
|
||
| function Color({ | ||
| src, | ||
| format = 'rgbString', | ||
| crossOrigin = undefined, | ||
| quality = 10, | ||
| children | ||
| }: ColorProps): JSX.Element { | ||
| const state = useColor(src, format, { crossOrigin, quality }); | ||
|
|
||
| return <>{children(state)}</>; | ||
| } | ||
|
|
||
| export type ColorProps = { | ||
| /** | ||
| * Link of the image | ||
| */ | ||
| src: string; | ||
| /** | ||
| * Format of the response. | ||
| */ | ||
| format?: ColorFormats; | ||
| /** | ||
| * Tag cross-origin for image | ||
| */ | ||
| crossOrigin?: string; | ||
| /** | ||
| * Quality determines how many pixels are skipped before the nex one is sampled.We rarely need to sample every single pixel in the image to get good results. The bigger the number, the faster a value will be returned. Read more in https://lokeshdhakar.com/projects/color-thief/ | ||
| */ | ||
| quality?: number; | ||
| children: (state: UseColorState) => React.ReactNode; | ||
| }; | ||
|
|
||
| export default Color; |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.