From 5dacf24145223fcc9422486717257cdc17340a01 Mon Sep 17 00:00:00 2001 From: ssi02014 Date: Thu, 23 Feb 2023 01:16:18 +0900 Subject: [PATCH] add: icon modal position --- README.md | 60 +++--- package.json | 3 +- rollup.config.mjs | 2 + src/components/TG.styled.ts | 62 ++++-- src/components/TG.tsx | 70 +++---- src/components/TGColorPicker.tsx | 7 +- src/components/TGIcon.tsx | 5 +- src/components/TGSelect.tsx | 5 +- src/constants/select.ts | 29 +++ src/lib/ThumbnailGenerator.tsx | 9 +- .../components/ThumbnailGenerator.stories.tsx | 26 ++- src/utils/style.ts | 31 +-- yarn.lock | 194 +++++++++++++++++- 13 files changed, 382 insertions(+), 121 deletions(-) create mode 100644 src/constants/select.ts diff --git a/README.md b/README.md index 6fd9ef0..643006c 100644 --- a/README.md +++ b/README.md @@ -8,11 +8,19 @@

-

Simply create a thumbnail generator for your project🚀

+

Simply create a thumbnail generator for your project 🚀

- - + + + + + +

+ +

+ +


@@ -38,16 +46,12 @@ ## Features 😁 - Download Thumbnail Image - Resize Canvas -- Choose Background Color -- Choose Background Picture -- Choose Font Family -- Choose Font Size -- Choose Font Stroke & Color -- Choose Font Position & Angle -- Choose Image Type (png, jpg, webp) +- Choose Background Color & Picture +- Choose Font Family & Size & Stroke & Color & Position & Angle - Add Custom Web Font Family -- Supports TypeScript -- Supports Next.js +- Select the Modal button and the location of the Modal. +- Choose Image Type (`png`, `jpg`, `webp`) +- Supports TypeScript & Next
@@ -101,12 +105,15 @@ const App = () => { // However, there is a possibility that the UI will change due to CSS inheritance iconSrc={iconImage} - // You can select the icon of the modal open button that you want. - // If you do not enter this option, the default icon takes effect. + // Insert the icon of the button to open the Thumbnail Model. + // If you do not insert this option, the default icon takes effect. - position="bottom-right" - // You can select the location of the button that opens the modal. - // If you do not enter this option, the default position(bottom-right) is applied + iconPosition={[0, 20, 20, 0]} + // Select the location of the button to open the Thumbnail Model. + // Sequence: [top, right, bottom, left] + + modalPosition='right' + // Select the location to open ThumbnailModal. iconSize="medium" // You can select the size of the button that opens the modal. @@ -216,16 +223,16 @@ const App = () => { ### Result Screen 🖥️ -스크린샷 2023-02-20 오후 10 26 00 +![스크린샷 2023-02-23 오전 12 47 56](https://user-images.githubusercontent.com/64779472/220677341-7b6c062f-f0f6-49dd-8bcd-b402b61660ea.png)
## Video 📷 -### Background Color -![ezgif com-video-to-gif](https://user-images.githubusercontent.com/64779472/220112887-cc3c81a9-7b88-49e2-bc53-677c0508388a.gif) +### Default +![ezgif com-video-to-gif (1)](https://user-images.githubusercontent.com/64779472/220687212-d60e66fb-f8e6-450d-b33e-ca161a1b04d8.gif) ### Picture -![ezgif com-video-to-gif (1)](https://user-images.githubusercontent.com/64779472/220118455-d954b4b8-2ab6-48c4-b874-0350839b1330.gif) +![ezgif com-video-to-gif](https://user-images.githubusercontent.com/64779472/220687159-375c736a-b9cc-4646-8e82-8cbca983b34c.gif)
@@ -240,10 +247,15 @@ const App = () => { 스크린샷 2023-02-20 오후 10 48 05 - Type: `string` -- position +- iconPosition + - **Optional** + - Sequence: [top, right, bottom, left] + - Default: `[0, 20, 20, 0]` + - Type:`[number, number, number, number]` +- modalPosition - **Optional** - - Default: `bottom-right` - - Type: `bottom-right | bottom-left | top-right | top-left` + - Default: `right` + - Type:`left | right | center` - iconSize - **Optional** - Default: `medium` diff --git a/package.json b/package.json index 9295232..229017d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-thumbnail-generator", - "version": "1.2.0", + "version": "2.1.1", "description": "react-thumbnail-generator", "main": "dist/index.js", "module": "dist/index.js", @@ -67,6 +67,7 @@ "react-scripts": "^5.0.1", "rollup": "^3.17.2", "rollup-plugin-peer-deps-external": "^2.2.4", + "rollup-plugin-postcss": "^4.0.2", "tsconfig-paths-webpack-plugin": "^4.0.0", "typescript": "^4.9.5" }, diff --git a/rollup.config.mjs b/rollup.config.mjs index bee3567..b32ec49 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -4,6 +4,7 @@ import terser from '@rollup/plugin-terser'; import typescript from '@rollup/plugin-typescript'; import commonjs from '@rollup/plugin-commonjs'; import peerDepsExternal from 'rollup-plugin-peer-deps-external'; +import postcss from 'rollup-plugin-postcss'; import pkg from './package.json' assert { type: 'json' }; const extensions = ['.js', '.jsx', '.ts', '.tsx']; @@ -20,6 +21,7 @@ export default { external: ['react'], plugins: [ peerDepsExternal(), + postcss(), commonjs({ include: 'node_modules/**' }), nodeResolve({ extensions, diff --git a/src/components/TG.styled.ts b/src/components/TG.styled.ts index eeb3131..c8ad7fb 100644 --- a/src/components/TG.styled.ts +++ b/src/components/TG.styled.ts @@ -1,7 +1,9 @@ import styled from 'styled-components'; -import { getPosition, Position } from '../utils/style'; +import { getIconPosition, getModalPosition } from 'utils/style'; -export const TGOpenButton = styled.button<{ position: Position }>` +export const TGOpenButton = styled.button<{ + iconPosition: [number, number, number, number]; +}>` padding: 0; background-color: transparent; position: fixed; @@ -16,12 +18,12 @@ export const TGOpenButton = styled.button<{ position: Position }>` transform: scale(1.1); } - ${({ position }) => { - return getPosition(position); - }} + ${({ iconPosition }) => getIconPosition(iconPosition)} `; -export const TGBodyWrapper = styled.section<{ position: Position }>` +export const TGBodyWrapper = styled.section<{ + modalPosition: 'left' | 'right' | 'center'; +}>` position: fixed; display: flex; justify-content: center; @@ -33,9 +35,7 @@ export const TGBodyWrapper = styled.section<{ position: Position }>` flex-direction: column; overflow: hidden; - ${({ position }) => { - return getPosition(position); - }} + ${({ modalPosition }) => getModalPosition(modalPosition)} `; export const TGCanvasWrapper = styled.div` @@ -115,6 +115,10 @@ export const TGTextarea = styled.textarea` font-size: 1rem; color: #cccccc; } + + &:focus { + border: 1px solid #0e1b30; + } `; export const TGButtonContainer = styled.div` @@ -126,7 +130,7 @@ export const TGButtonContainer = styled.div` button { background-color: #192841; color: #fff; - width: 200px; + width: 300px; padding: 12px 15px; border: none; border-radius: 5px; @@ -294,14 +298,29 @@ export const TGControllerWrapper = styled.div` } `; -export const TGIConButton = styled.button<{ isBorder?: boolean }>` +export const TGIConButton = styled.button<{ + isOpenColorPicker?: boolean; + isBorder?: boolean; +}>` padding: 4px 5px; background: #fff; - border: ${({ isBorder }) => (isBorder ? `1px solid #cccccc` : 'none')}; border-radius: 5px; display: flex; align-items: center; cursor: pointer; + + ${({ isBorder, isOpenColorPicker }) => { + if (!isBorder) return `border: none;`; + return ` + border: ${ + isOpenColorPicker ? '1px solid #0e1b30;' : '1px solid #cccccc;' + }; + `; + }} + + &:hover { + border: ${({ isBorder }) => (isBorder ? `1px solid #0e1b30` : 'none')}; + } `; // TG Select @@ -315,12 +334,13 @@ export const SelectWrapper = styled.div` } `; -export const SelectInput = styled.div` +export const SelectInput = styled.div<{ isOpenSelect: boolean }>` display: flex; justify-content: space-between; align-items: center; cursor: pointer; - border: 1px solid #cccccc; + border: ${({ isOpenSelect }) => + isOpenSelect ? `1px solid #0e1b30` : `1px solid #cccccc`}; border-radius: 5px; padding: 6px 12px; @@ -377,13 +397,15 @@ export const TGInputTextContainer = styled.div<{ width?: number }>` outline: none; margin-top: 1px; width: ${({ width }) => `${width}px`}; + + &:focus { + border: 1px solid #0e1b30; + } } `; // TG Icon -export const TGIConImage = styled.img<{ color?: string }>` - fill: ${({ color }) => `${color}`}; -`; +export const TGIConImage = styled.img``; // TG InputFile export const TGInputFileWrapper = styled.div` @@ -394,16 +416,20 @@ export const TGInputFileWrapper = styled.div` justify-content: center; cursor: pointer; border: 1px solid #cccccc; - padding: 4px 5px; label { cursor: pointer; width: 20px; height: 20px; + padding: 4px 5px; margin: 0; } input { display: none; } + + &:hover { + border: 1px solid #0e1b30; + } `; diff --git a/src/components/TG.tsx b/src/components/TG.tsx index 389d927..66c0a14 100644 --- a/src/components/TG.tsx +++ b/src/components/TG.tsx @@ -16,47 +16,28 @@ import TGSelectItem from './TGSelectItem'; import TGInputText from './TGInputText'; import TGIcon from './TGIcon'; import { fill, font, stroke } from '../assets/icons'; -import { Position } from '../utils/style'; import TGInputFile from './TGInputFile'; import Divider from './Divider'; +import { + fontFamilies, + fontSizes, + imageTypes, + strokeTypes, +} from 'constants/select'; + +type StrokeTypes = 'None' | 'Thin' | 'Normal' | 'Thick'; interface TGProps { additionalFontFamily?: string[]; - position: Position; + modalPosition: 'left' | 'right' | 'center'; onToggle: () => void; } -type StrokeTypes = 'None' | 'Thin' | 'Normal' | 'Thick'; - -const fontFamilies = [ - 'Arial', - 'monospace', - 'Times New Roman', - 'Georgia', - 'Courier New', - 'Verdana', -]; -const strokeTypes = ['None', 'Thin', 'Normal', 'Thick']; -const imageTypes = ['png', 'jpg', 'webp']; -const fontSizes = [ - '10px', - '20px', - '30px', - '40px', - '50px', - '60px', - '70px', - '80px', - '90px', - '100px', - '120px', - '140px', - '160px', - '180px', - '200px', -]; - -const TG = ({ additionalFontFamily = [], position, onToggle }: TGProps) => { +const TG = ({ + additionalFontFamily = [], + modalPosition, + onToggle, +}: TGProps) => { const [text, setText] = useState('Simple Thumbnail Generator 😁'); const [bgColor, setBgColor] = useColor('hex', '#192841'); const [fontColor, setFontColor] = useColor('hex', '#fff'); @@ -82,17 +63,19 @@ const TG = ({ additionalFontFamily = [], position, onToggle }: TGProps) => { const LimitWidthSize = window.innerWidth - 70; const LimitHeightSize = 5000; + const setStateType = { + imageType: setImageType, + fontSize: setFontSize, + fontStrokeType: setFontStrokeType, + fontFamily: setFontFamily, + canvasSize: setCanvasSize, + fontAxis: setFontAxisAndAngle, + }; + const onChangeSelectValue = ( type: 'imageType' | 'fontSize' | 'fontStrokeType' | 'fontFamily', value: string ) => { - const setStateType = { - imageType: setImageType, - fontSize: setFontSize, - fontStrokeType: setFontStrokeType, - fontFamily: setFontFamily, - }; - const setState = setStateType[type]; setState(value); }; @@ -117,11 +100,6 @@ const TG = ({ additionalFontFamily = [], position, onToggle }: TGProps) => { return alert('Please set the height smaller than 5000px'); } - const setStateType = { - canvasSize: setCanvasSize, - fontAxis: setFontAxisAndAngle, - }; - const setState = setStateType[type]; setState((prev: any) => ({ @@ -172,7 +150,7 @@ const TG = ({ additionalFontFamily = [], position, onToggle }: TGProps) => { const fontFamilyOptions = [...additionalFontFamily, ...fontFamilies]; return ( - + diff --git a/src/components/TGColorPicker.tsx b/src/components/TGColorPicker.tsx index 3dd9553..7735428 100644 --- a/src/components/TGColorPicker.tsx +++ b/src/components/TGColorPicker.tsx @@ -21,6 +21,10 @@ const TGColorPicker = ({ children, color, setColor }: TGColorPickerProps) => { } }; + const handleOpenColorPicker = () => { + setIsOpenColorPicker(!isOpenColorPicker); + }; + useEffect(() => { document.addEventListener('mousedown', handleCloseColorPicker); @@ -32,7 +36,8 @@ const TGColorPicker = ({ children, color, setColor }: TGColorPickerProps) => { return ( setIsOpenColorPicker(!isOpenColorPicker)} + isOpenColorPicker={isOpenColorPicker} + onClick={handleOpenColorPicker} isBorder={true}> {children} diff --git a/src/components/TGIcon.tsx b/src/components/TGIcon.tsx index 5ad0eab..7c9a53d 100644 --- a/src/components/TGIcon.tsx +++ b/src/components/TGIcon.tsx @@ -5,10 +5,9 @@ interface TGIconProps { src: string; width: number; height: number; - color?: string; } -const TGIcon = ({ src, width, height, color }: TGIconProps) => { - return ; +const TGIcon = ({ src, width, height }: TGIconProps) => { + return ; }; export default TGIcon; diff --git a/src/components/TGSelect.tsx b/src/components/TGSelect.tsx index b9eb0aa..82a7320 100644 --- a/src/components/TGSelect.tsx +++ b/src/components/TGSelect.tsx @@ -63,7 +63,10 @@ const TGSelect = ({ children, onChange, color, value, label }: SelectProps) => { value={{ color, selectValue: value, onChange: handleChange }}> - +

{value}

{isOpenSelect ? ( diff --git a/src/constants/select.ts b/src/constants/select.ts new file mode 100644 index 0000000..4d8c0e8 --- /dev/null +++ b/src/constants/select.ts @@ -0,0 +1,29 @@ +export const fontFamilies = [ + 'Arial', + 'monospace', + 'Times New Roman', + 'Georgia', + 'Courier New', + 'Verdana', +]; +export const strokeTypes = ['None', 'Thin', 'Normal', 'Thick']; + +export const imageTypes = ['png', 'jpg', 'webp']; + +export const fontSizes = [ + '10px', + '20px', + '30px', + '40px', + '50px', + '60px', + '70px', + '80px', + '90px', + '100px', + '120px', + '140px', + '160px', + '180px', + '200px', +]; diff --git a/src/lib/ThumbnailGenerator.tsx b/src/lib/ThumbnailGenerator.tsx index ceeb6a4..7b66626 100644 --- a/src/lib/ThumbnailGenerator.tsx +++ b/src/lib/ThumbnailGenerator.tsx @@ -11,6 +11,8 @@ interface ThumbnailGeneratorProps { iconSrc?: string; iconSize?: 'small' | 'medium' | 'large'; position?: Position; + iconPosition?: [number, number, number, number]; + modalPosition?: 'left' | 'right' | 'center'; additionalFontFamily?: string[]; } @@ -18,7 +20,8 @@ const ThumbnailGenerator = ({ id, iconSrc = toggleButton, iconSize = 'medium', - position = 'bottom-right', + iconPosition = [0, 20, 20, 0], + modalPosition = 'right', additionalFontFamily = [], }: ThumbnailGeneratorProps) => { const [isOpen, setIsOpen] = useState(false); @@ -33,12 +36,12 @@ const ThumbnailGenerator = ({ {isOpen ? ( ) : ( - + )} diff --git a/src/stories/components/ThumbnailGenerator.stories.tsx b/src/stories/components/ThumbnailGenerator.stories.tsx index 315b7e2..4ffdf27 100644 --- a/src/stories/components/ThumbnailGenerator.stories.tsx +++ b/src/stories/components/ThumbnailGenerator.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Story } from '@storybook/react/types-6-0'; import ThumbnailGenerator from '../../lib/ThumbnailGenerator'; -import { Size, Position } from '../../utils/style'; +import { Size } from '../../utils/style'; import { toggleButton, fill } from '../../assets/icons'; export default { @@ -11,12 +11,12 @@ export default { options: [toggleButton, fill], control: { type: 'select' }, }, - iconSize: { - options: ['small', 'medium', 'large'], + modalPosition: { + options: ['left', 'right', 'center'], control: { type: 'select' }, }, - position: { - options: ['top-left', 'top-right', 'bottom-left', 'bottom-right'], + iconSize: { + options: ['small', 'medium', 'large'], control: { type: 'select' }, }, }, @@ -24,16 +24,23 @@ export default { interface Props { iconSize?: Size; - position?: Position; iconSrc?: string; + modalPosition?: 'left' | 'right' | 'center'; + iconPosition?: [number, number, number, number]; } -const Template: Story = ({ iconSize, position, iconSrc }: Props) => { +const Template: Story = ({ + modalPosition, + iconPosition, + iconSize, + iconSrc, +}: Props) => { return ( ); @@ -42,7 +49,8 @@ const Template: Story = ({ iconSize, position, iconSrc }: Props) => { export const Default = Template.bind({}); Default.args = { - position: 'bottom-right', iconSize: 'medium', iconSrc: toggleButton, + modalPosition: 'right', + iconPosition: [0, 20, 20, 0], }; diff --git a/src/utils/style.ts b/src/utils/style.ts index 4e2918b..02ddf2f 100644 --- a/src/utils/style.ts +++ b/src/utils/style.ts @@ -6,28 +6,35 @@ export type Position = export type Size = 'small' | 'medium' | 'large'; -export const getPosition = (position: Position) => { +export const getIconPosition = (position: [number, number, number, number]) => { + const [top, right, bottom, left] = position; + + return ` + top: ${top ? `${top}px` : ''}; + right: ${right ? `${right}px` : ''}; + bottom: ${bottom ? `${bottom}px` : ''}; + left: ${left ? `${left}px` : ''}; + `; +}; + +export const getModalPosition = (position: 'left' | 'right' | 'center') => { switch (position) { - case 'top-left': + case 'left': return ` - top: 20px; + bottom: 20px; left: 20px; `; - case 'top-right': + case 'right': return ` - top: 20px; + bottom: 20px; right: 20px; `; - case 'bottom-left': + default: return ` + left: 50%; + transform: translateX(-50%); bottom: 20px; - left: 20px; `; - default: - return ` - bottom: 20px; - right: 20px; - `; } }; diff --git a/yarn.lock b/yarn.lock index e8ac751..caafcb8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5694,6 +5694,13 @@ concat-stream@^1.5.0: readable-stream "^2.2.2" typedarray "^0.0.6" +concat-with-sourcemaps@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz#d4ea93f05ae25790951b99e7b3b09e3908a4082e" + integrity sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg== + dependencies: + source-map "^0.6.1" + confusing-browser-globals@^1.0.11: version "1.0.11" resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz#ae40e9b57cdd3915408a2805ebd3a5585608dc81" @@ -6101,11 +6108,55 @@ cssnano-preset-default@^5.2.13: postcss-svgo "^5.1.0" postcss-unique-selectors "^5.1.1" +cssnano-preset-default@^5.2.14: + version "5.2.14" + resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz#309def4f7b7e16d71ab2438052093330d9ab45d8" + integrity sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A== + dependencies: + css-declaration-sorter "^6.3.1" + cssnano-utils "^3.1.0" + postcss-calc "^8.2.3" + postcss-colormin "^5.3.1" + postcss-convert-values "^5.1.3" + postcss-discard-comments "^5.1.2" + postcss-discard-duplicates "^5.1.0" + postcss-discard-empty "^5.1.1" + postcss-discard-overridden "^5.1.0" + postcss-merge-longhand "^5.1.7" + postcss-merge-rules "^5.1.4" + postcss-minify-font-values "^5.1.0" + postcss-minify-gradients "^5.1.1" + postcss-minify-params "^5.1.4" + postcss-minify-selectors "^5.2.1" + postcss-normalize-charset "^5.1.0" + postcss-normalize-display-values "^5.1.0" + postcss-normalize-positions "^5.1.1" + postcss-normalize-repeat-style "^5.1.1" + postcss-normalize-string "^5.1.0" + postcss-normalize-timing-functions "^5.1.0" + postcss-normalize-unicode "^5.1.1" + postcss-normalize-url "^5.1.0" + postcss-normalize-whitespace "^5.1.1" + postcss-ordered-values "^5.1.3" + postcss-reduce-initial "^5.1.2" + postcss-reduce-transforms "^5.1.0" + postcss-svgo "^5.1.0" + postcss-unique-selectors "^5.1.1" + cssnano-utils@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz#95684d08c91511edfc70d2636338ca37ef3a6861" integrity sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA== +cssnano@^5.0.1: + version "5.1.15" + resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.1.15.tgz#ded66b5480d5127fcb44dac12ea5a983755136bf" + integrity sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw== + dependencies: + cssnano-preset-default "^5.2.14" + lilconfig "^2.0.3" + yaml "^1.10.2" + cssnano@^5.0.6: version "5.1.14" resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.1.14.tgz#07b0af6da73641276fe5a6d45757702ebae2eb05" @@ -7121,6 +7172,11 @@ estree-to-babel@^3.1.0: "@babel/types" "^7.2.0" c8 "^7.6.0" +estree-walker@^0.6.1: + version "0.6.1" + resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362" + integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w== + estree-walker@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700" @@ -7141,7 +7197,7 @@ etag@~1.8.1: resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887" integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg== -eventemitter3@^4.0.0: +eventemitter3@^4.0.0, eventemitter3@^4.0.4: version "4.0.7" resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f" integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw== @@ -7730,6 +7786,13 @@ gauge@^3.0.0: strip-ansi "^6.0.1" wide-align "^1.1.2" +generic-names@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-4.0.0.tgz#0bd8a2fd23fe8ea16cbd0a279acd69c06933d9a3" + integrity sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A== + dependencies: + loader-utils "^3.2.0" + gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2: version "1.0.0-beta.2" resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0" @@ -8391,6 +8454,11 @@ iconv-lite@^0.6.3: dependencies: safer-buffer ">= 2.1.2 < 3.0.0" +icss-replace-symbols@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded" + integrity sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg== + icss-utils@^4.0.0, icss-utils@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467" @@ -8440,6 +8508,13 @@ immer@^9.0.7: resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.19.tgz#67fb97310555690b5f9cd8380d38fc0aabb6b38b" integrity sha512-eY+Y0qcsB4TZKwgQzLaE/lqYMlKhv5J9dyd2RhhtGhNo2njPXDqU9XPfcNfa3MIDsdtZt5KlkIsirlo4dHsWdQ== +import-cwd@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-3.0.0.tgz#20845547718015126ea9b3676b7592fb8bd4cf92" + integrity sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg== + dependencies: + import-from "^3.0.0" + import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1: version "3.3.0" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" @@ -8448,6 +8523,13 @@ import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1: parent-module "^1.0.0" resolve-from "^4.0.0" +import-from@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/import-from/-/import-from-3.0.0.tgz#055cfec38cd5a27d8057ca51376d7d3bf0891966" + integrity sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ== + dependencies: + resolve-from "^5.0.0" + import-local@^3.0.2: version "3.1.0" resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.1.0.tgz#b4479df8a5fd44f6cdce24070675676063c95cb4" @@ -9940,6 +10022,11 @@ locate-path@^6.0.0: dependencies: p-locate "^5.0.0" +lodash.camelcase@^4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6" + integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA== + lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" @@ -10935,6 +11022,14 @@ p-map@^4.0.0: dependencies: aggregate-error "^3.0.0" +p-queue@^6.6.2: + version "6.6.2" + resolved "https://registry.yarnpkg.com/p-queue/-/p-queue-6.6.2.tgz#2068a9dcf8e67dd0ec3e7a2bcb76810faa85e426" + integrity sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ== + dependencies: + eventemitter3 "^4.0.4" + p-timeout "^3.2.0" + p-retry@^4.5.0: version "4.6.2" resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-4.6.2.tgz#9baae7184057edd4e17231cee04264106e092a16" @@ -10943,7 +11038,7 @@ p-retry@^4.5.0: "@types/retry" "0.12.0" retry "^0.13.1" -p-timeout@^3.1.0: +p-timeout@^3.1.0, p-timeout@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-3.2.0.tgz#c7e17abc971d2a7962ef83626b35d635acf23dfe" integrity sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg== @@ -11171,6 +11266,11 @@ pify@^4.0.1: resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231" integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g== +pify@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/pify/-/pify-5.0.0.tgz#1f5eca3f5e87ebec28cc6d54a0e4aaf00acc127f" + integrity sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA== + pinkie-promise@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa" @@ -11300,6 +11400,16 @@ postcss-colormin@^5.3.0: colord "^2.9.1" postcss-value-parser "^4.2.0" +postcss-colormin@^5.3.1: + version "5.3.1" + resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-5.3.1.tgz#86c27c26ed6ba00d96c79e08f3ffb418d1d1988f" + integrity sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ== + dependencies: + browserslist "^4.21.4" + caniuse-api "^3.0.0" + colord "^2.9.1" + postcss-value-parser "^4.2.0" + postcss-convert-values@^5.1.3: version "5.1.3" resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz#04998bb9ba6b65aa31035d669a6af342c5f9d393" @@ -11443,7 +11553,7 @@ postcss-lab-function@^4.2.1: "@csstools/postcss-progressive-custom-properties" "^1.1.0" postcss-value-parser "^4.2.0" -postcss-load-config@^3.1.4: +postcss-load-config@^3.0.0, postcss-load-config@^3.1.4: version "3.1.4" resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855" integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg== @@ -11499,6 +11609,16 @@ postcss-merge-rules@^5.1.3: cssnano-utils "^3.1.0" postcss-selector-parser "^6.0.5" +postcss-merge-rules@^5.1.4: + version "5.1.4" + resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz#2f26fa5cacb75b1402e213789f6766ae5e40313c" + integrity sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g== + dependencies: + browserslist "^4.21.4" + caniuse-api "^3.0.0" + cssnano-utils "^3.1.0" + postcss-selector-parser "^6.0.5" + postcss-minify-font-values@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz#f1df0014a726083d260d3bd85d7385fb89d1f01b" @@ -11592,6 +11712,20 @@ postcss-modules-values@^4.0.0: dependencies: icss-utils "^5.0.0" +postcss-modules@^4.0.0: + version "4.3.1" + resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-4.3.1.tgz#517c06c09eab07d133ae0effca2c510abba18048" + integrity sha512-ItUhSUxBBdNamkT3KzIZwYNNRFKmkJrofvC2nWab3CPKhYBQ1f27XXh1PAPE27Psx58jeelPsxWB/+og+KEH0Q== + dependencies: + generic-names "^4.0.0" + icss-replace-symbols "^1.1.0" + lodash.camelcase "^4.3.0" + postcss-modules-extract-imports "^3.0.0" + postcss-modules-local-by-default "^4.0.0" + postcss-modules-scope "^3.0.0" + postcss-modules-values "^4.0.0" + string-hash "^1.1.1" + postcss-nested@6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.0.tgz#1572f1984736578f360cffc7eb7dca69e30d1735" @@ -11781,6 +11915,14 @@ postcss-reduce-initial@^5.1.1: browserslist "^4.21.4" caniuse-api "^3.0.0" +postcss-reduce-initial@^5.1.2: + version "5.1.2" + resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz#798cd77b3e033eae7105c18c9d371d989e1382d6" + integrity sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg== + dependencies: + browserslist "^4.21.4" + caniuse-api "^3.0.0" + postcss-reduce-transforms@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz#333b70e7758b802f3dd0ddfe98bb1ccfef96b6e9" @@ -11946,6 +12088,11 @@ promise.prototype.finally@^3.1.0: define-properties "^1.1.4" es-abstract "^1.20.4" +promise.series@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/promise.series/-/promise.series-0.2.0.tgz#2cc7ebe959fc3a6619c04ab4dbdc9e452d864bbd" + integrity sha512-VWQJyU2bcDTgZw8kpfBpB/ejZASlCrzwz5f2hjb/zlujOEB4oeiAhHygAWq8ubsX2GVkD4kCU5V2dwOTaCY5EQ== + promise@^8.1.0: version "8.3.0" resolved "https://registry.yarnpkg.com/promise/-/promise-8.3.0.tgz#8cb333d1edeb61ef23869fbb8a4ea0279ab60e0a" @@ -12721,6 +12868,25 @@ rollup-plugin-peer-deps-external@^2.2.4: resolved "https://registry.yarnpkg.com/rollup-plugin-peer-deps-external/-/rollup-plugin-peer-deps-external-2.2.4.tgz#8a420bbfd6dccc30aeb68c9bf57011f2f109570d" integrity sha512-AWdukIM1+k5JDdAqV/Cxd+nejvno2FVLVeZ74NKggm3Q5s9cbbcOgUPGdbxPi4BXu7xGaZ8HG12F+thImYu/0g== +rollup-plugin-postcss@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/rollup-plugin-postcss/-/rollup-plugin-postcss-4.0.2.tgz#15e9462f39475059b368ce0e49c800fa4b1f7050" + integrity sha512-05EaY6zvZdmvPUDi3uCcAQoESDcYnv8ogJJQRp6V5kZ6J6P7uAVJlrTZcaaA20wTH527YTnKfkAoPxWI/jPp4w== + dependencies: + chalk "^4.1.0" + concat-with-sourcemaps "^1.1.0" + cssnano "^5.0.1" + import-cwd "^3.0.0" + p-queue "^6.6.2" + pify "^5.0.0" + postcss-load-config "^3.0.0" + postcss-modules "^4.0.0" + promise.series "^0.2.0" + resolve "^1.19.0" + rollup-pluginutils "^2.8.2" + safe-identifier "^0.4.2" + style-inject "^0.3.0" + rollup-plugin-terser@^7.0.0: version "7.0.2" resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d" @@ -12731,6 +12897,13 @@ rollup-plugin-terser@^7.0.0: serialize-javascript "^4.0.0" terser "^5.0.0" +rollup-pluginutils@^2.8.2: + version "2.8.2" + resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e" + integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ== + dependencies: + estree-walker "^0.6.1" + rollup@^2.43.1: version "2.79.1" resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7" @@ -12779,6 +12952,11 @@ safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6" integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ== +safe-identifier@^0.4.2: + version "0.4.2" + resolved "https://registry.yarnpkg.com/safe-identifier/-/safe-identifier-0.4.2.tgz#cf6bfca31c2897c588092d1750d30ef501d59fcb" + integrity sha512-6pNbSMW6OhAi9j+N8V+U715yBQsaWJ7eyEUaOrawX+isg5ZxhUlV1NipNtgaKHmFGiABwt+ZF04Ii+3Xjkg+8w== + safe-regex-test@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz#793b874d524eb3640d1873aad03596db2d4f2295" @@ -13387,6 +13565,11 @@ stream-shift@^1.0.0: resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d" integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ== +string-hash@^1.1.1: + version "1.1.3" + resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b" + integrity sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A== + string-length@^4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a" @@ -13569,6 +13752,11 @@ strip-outer@^1.0.1: dependencies: escape-string-regexp "^1.0.2" +style-inject@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/style-inject/-/style-inject-0.3.0.tgz#d21c477affec91811cc82355832a700d22bf8dd3" + integrity sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw== + style-loader@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.3.0.tgz#828b4a3b3b7e7aa5847ce7bae9e874512114249e"