From 8bca3dd6ef1cafb006ed0509acc016ef2c5a9aed Mon Sep 17 00:00:00 2001 From: ssi02014 Date: Sat, 18 Mar 2023 23:39:13 +0900 Subject: [PATCH 1/2] feat: isFullWidth props, path alias --- package.json | 3 +- rollup.config.mjs | 6 +- src/assets/{icons.js => icons.ts} | 0 src/components/Accordion/index.tsx | 2 +- .../FileInput/index.tsx} | 8 +- src/components/Inputs/FileInput/styled.tsx | 32 ++++++++ .../{InputRange => RangeInput}/index.tsx | 18 ++--- .../{InputRange => RangeInput}/styled.tsx | 4 +- .../TextInput/index.tsx} | 14 ++-- src/components/Inputs/TextInput/styled.tsx | 36 +++++++++ src/components/TG.styled.ts | 73 +------------------ src/components/TG.tsx | 24 +++--- src/components/TGHeader.tsx | 5 +- src/components/TGSelect.tsx | 2 +- src/lib/ThumbnailGenerator.tsx | 5 +- .../components/ThumbnailGenerator.stories.tsx | 12 ++- src/utils/style.ts | 10 +-- tsconfig.json | 5 +- tsconfig.paths.json | 12 +++ yarn.lock | 7 ++ 20 files changed, 158 insertions(+), 120 deletions(-) rename src/assets/{icons.js => icons.ts} (100%) rename src/components/{TGInputFile.tsx => Inputs/FileInput/index.tsx} (76%) create mode 100644 src/components/Inputs/FileInput/styled.tsx rename src/components/Inputs/{InputRange => RangeInput}/index.tsx (66%) rename src/components/Inputs/{InputRange => RangeInput}/styled.tsx (89%) rename src/components/{TGInputText.tsx => Inputs/TextInput/index.tsx} (61%) create mode 100644 src/components/Inputs/TextInput/styled.tsx create mode 100644 tsconfig.paths.json diff --git a/package.json b/package.json index 30b0f32..98bbb38 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-thumbnail-generator", - "version": "2.6.6", + "version": "2.7.0", "description": "react-thumbnail-generator", "main": "dist/index.js", "module": "dist/index.js", @@ -28,6 +28,7 @@ "@babel/preset-env": "^7.20.2", "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.18.6", + "@rollup/plugin-alias": "^4.0.3", "@rollup/plugin-babel": "^6.0.3", "@rollup/plugin-commonjs": "^24.0.1", "@rollup/plugin-node-resolve": "^15.0.1", diff --git a/rollup.config.mjs b/rollup.config.mjs index b32ec49..27fc9b3 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -4,7 +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 alias from '@rollup/plugin-alias'; import pkg from './package.json' assert { type: 'json' }; const extensions = ['.js', '.jsx', '.ts', '.tsx']; @@ -21,7 +21,6 @@ export default { external: ['react'], plugins: [ peerDepsExternal(), - postcss(), commonjs({ include: 'node_modules/**' }), nodeResolve({ extensions, @@ -32,6 +31,9 @@ export default { include: ['src/**/*'], }), typescript({ tsconfig: './tsconfig.json' }), + alias({ + entries: [{ find: '@', replacement: './src' }], + }), terser(), ], }; diff --git a/src/assets/icons.js b/src/assets/icons.ts similarity index 100% rename from src/assets/icons.js rename to src/assets/icons.ts diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx index 3666e2d..36cfec3 100644 --- a/src/components/Accordion/index.tsx +++ b/src/components/Accordion/index.tsx @@ -1,6 +1,6 @@ import React, { useRef, useState } from 'react'; import * as S from './styled'; -import { arrowBottom, arrowTop } from '../../assets/icons'; +import { arrowBottom, arrowTop } from '@assets/icons'; import Icon from '../../components/Icon'; interface AccordionProps { diff --git a/src/components/TGInputFile.tsx b/src/components/Inputs/FileInput/index.tsx similarity index 76% rename from src/components/TGInputFile.tsx rename to src/components/Inputs/FileInput/index.tsx index 53a82f4..a50e322 100644 --- a/src/components/TGInputFile.tsx +++ b/src/components/Inputs/FileInput/index.tsx @@ -1,6 +1,6 @@ +import { photo } from '@assets/icons'; import React, { ChangeEvent } from 'react'; -import { TGInputFileWrapper } from './TG.styled'; -import { photo } from '../assets/icons'; +import * as S from './styled'; interface TGInputFileProps { onChangeImage: (e: ChangeEvent) => void; @@ -10,12 +10,12 @@ interface TGInputFileProps { const TGInputFile = ({ width, height, onChangeImage }: TGInputFileProps) => { return ( - + - + ); }; diff --git a/src/components/Inputs/FileInput/styled.tsx b/src/components/Inputs/FileInput/styled.tsx new file mode 100644 index 0000000..6f91bcd --- /dev/null +++ b/src/components/Inputs/FileInput/styled.tsx @@ -0,0 +1,32 @@ +import styled from 'styled-components'; + +export const FileInputWrapper = styled.div` + background: #fff; + border-radius: 5px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + border: 1px solid #cccccc; + padding: 4px 5px; + + label { + cursor: pointer; + margin: 0; + width: 20px; + height: 20px; + + img { + width: 100%; + height: 100%; + } + } + + input { + display: none; + } + + &:hover { + border: 1px solid #0e1b30; + } +`; diff --git a/src/components/Inputs/InputRange/index.tsx b/src/components/Inputs/RangeInput/index.tsx similarity index 66% rename from src/components/Inputs/InputRange/index.tsx rename to src/components/Inputs/RangeInput/index.tsx index 8c84073..e6b95fb 100644 --- a/src/components/Inputs/InputRange/index.tsx +++ b/src/components/Inputs/RangeInput/index.tsx @@ -1,32 +1,32 @@ -import TGInputText from '../../TGInputText'; import React, { ComponentProps, useMemo } from 'react'; +import TextInput from '../TextInput'; import * as S from './styled'; -interface InputRangeProps extends ComponentProps<'input'> { +interface RangeInputProps extends ComponentProps<'input'> { value: string; min: number; max: number; label: string; } -const InputRange = ({ +const RangeInput = ({ label, name, min, max, value, onChange, -}: InputRangeProps) => { +}: RangeInputProps) => { const backgroundSize = useMemo(() => { if (value === '-') return '50% 100%'; return ((+value - min) * 100) / (max - min) + '% 100%'; }, [min, max, value]); return ( - + - - - + + ); }; -export default InputRange; +export default RangeInput; diff --git a/src/components/Inputs/InputRange/styled.tsx b/src/components/Inputs/RangeInput/styled.tsx similarity index 89% rename from src/components/Inputs/InputRange/styled.tsx rename to src/components/Inputs/RangeInput/styled.tsx index 97117bc..27bc5d5 100644 --- a/src/components/Inputs/InputRange/styled.tsx +++ b/src/components/Inputs/RangeInput/styled.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; -export const InputRangeWrapper = styled.div` +export const RangeInputWrapper = styled.div` display: flex; height: 50px; align-items: center; @@ -18,7 +18,7 @@ export const InputLabelRangeContainer = styled.div` } `; -export const StyledInputRange = styled.input<{ backgroundSize: string }>` +export const StyledRangeInput = styled.input<{ backgroundSize: string }>` -webkit-appearance: none; appearance: none; width: 150px; diff --git a/src/components/TGInputText.tsx b/src/components/Inputs/TextInput/index.tsx similarity index 61% rename from src/components/TGInputText.tsx rename to src/components/Inputs/TextInput/index.tsx index c8a76d9..e87b9cd 100644 --- a/src/components/TGInputText.tsx +++ b/src/components/Inputs/TextInput/index.tsx @@ -1,11 +1,11 @@ import React, { ComponentProps } from 'react'; -import { TGInputTextContainer } from './TG.styled'; +import * as S from './styled'; -interface TGInputTextProps extends ComponentProps<'input'> { +interface TextInputProps extends ComponentProps<'input'> { label?: string; } -const TGInputText = ({ +const TextInput = ({ name, label, value, @@ -13,9 +13,9 @@ const TGInputText = ({ maxLength = 5, disabled = false, onChange, -}: TGInputTextProps) => { +}: TextInputProps) => { return ( - + - + ); }; -export default TGInputText; +export default TextInput; diff --git a/src/components/Inputs/TextInput/styled.tsx b/src/components/Inputs/TextInput/styled.tsx new file mode 100644 index 0000000..d38bbaa --- /dev/null +++ b/src/components/Inputs/TextInput/styled.tsx @@ -0,0 +1,36 @@ +import styled from 'styled-components'; + +// TG Input +export const TextInputWrapper = styled.div<{ width: number | string }>` + display: flex; + flex-direction: column; + justify-content: center; + height: 50px; + + label { + font-size: 0.7rem; + color: #969696; + height: 16px; + line-height: 17px; + } + + input { + border: 1px solid #cccccc; + border-radius: 5px; + padding: 6px 12px; + font-size: 0.9rem; + outline: none; + margin-top: 1px; + width: ${({ width }) => `${width}px`}; + + &:focus, + &:hover { + border: 1px solid #0e1b30; + } + + &:disabled { + color: #cccccc; + border: 1px solid #cccccc; + } + } +`; diff --git a/src/components/TG.styled.ts b/src/components/TG.styled.ts index 45338ee..5aab829 100644 --- a/src/components/TG.styled.ts +++ b/src/components/TG.styled.ts @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { getIconPosition, getModalPosition } from 'utils/style'; +import { getIconPosition, getModalPosition } from '@utils/style'; export const TGOpenButton = styled.button<{ iconPosition: [number, number, number, number]; @@ -23,11 +23,13 @@ export const TGOpenButton = styled.button<{ export const TGBodyWrapper = styled.section<{ modalPosition: 'left' | 'right' | 'center'; + isFullWidth: boolean; }>` position: fixed; display: flex; justify-content: center; - min-width: 600px; + min-width: ${({ isFullWidth }) => (isFullWidth ? '100%' : '600px')}; + min-height: 100vh; border-radius: 7px; box-shadow: 1px 1px 10px #cccccc; z-index: 9999; @@ -219,70 +221,3 @@ export const SelectListItem = styled.li` background-color: #ededed; } `; - -// TG Input -export const TGInputTextContainer = styled.div<{ width: number | string }>` - display: flex; - flex-direction: column; - justify-content: center; - height: 50px; - - label { - font-size: 0.7rem; - color: #969696; - height: 16px; - line-height: 17px; - } - - input { - border: 1px solid #cccccc; - border-radius: 5px; - padding: 6px 12px; - font-size: 0.9rem; - outline: none; - margin-top: 1px; - width: ${({ width }) => `${width}px`}; - - &:focus, - &:hover { - border: 1px solid #0e1b30; - } - - &:disabled { - color: #cccccc; - border: 1px solid #cccccc; - } - } -`; - -// TG InputFile -export const TGInputFileWrapper = styled.div` - background: #fff; - border-radius: 5px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - border: 1px solid #cccccc; - padding: 4px 5px; - - label { - cursor: pointer; - margin: 0; - width: 20px; - height: 20px; - - img { - width: 100%; - height: 100%; - } - } - - input { - display: none; - } - - &:hover { - border: 1px solid #0e1b30; - } -`; diff --git a/src/components/TG.tsx b/src/components/TG.tsx index 9487ecc..704103c 100644 --- a/src/components/TG.tsx +++ b/src/components/TG.tsx @@ -2,29 +2,30 @@ import React, { ChangeEvent, useMemo, useRef, useState } from 'react'; import TGHeader from './TGHeader'; import TGSelect from './TGSelect'; import TGSelectItem from './TGSelectItem'; -import TGInputText from './TGInputText'; +import TextInput from './Inputs/TextInput'; import Icon from './Icon'; -import TGInputFile from './TGInputFile'; +import FileInput from './Inputs/FileInput'; import Divider from './Divider'; import Accordion from './Accordion'; import Canvas from './Canvas'; import ColorPicker from './ColorPicker'; -import InputRange from './Inputs/InputRange'; +import InputRange from './Inputs/RangeInput'; import { fontFamilies, fontSizes, imageTypes, strokeTypes, -} from 'constants/select'; +} from '@constants/select'; import { CanvasState } from '../types/canvas'; -import { fill, font, stroke, blur } from '../assets/icons'; +import { fill, font, stroke, blur } from '@assets/icons'; import { Color, useColor } from 'react-color-palette'; import * as S from './TG.styled'; -import { downloadCanvas, getValidMessage } from '../utils/common'; +import { downloadCanvas, getValidMessage } from '@utils/common'; import { IconButton } from './Icon/styled'; interface TGProps { additionalFontFamily?: string[]; + isFullWidth: boolean; modalPosition: 'left' | 'right' | 'center'; onToggle: () => void; } @@ -32,9 +33,10 @@ interface TGProps { const TG = ({ additionalFontFamily = [], modalPosition, + isFullWidth, onToggle, }: TGProps) => { - const LIMIT_WIDTH = window.innerWidth - 70; + const LIMIT_WIDTH = window.innerWidth; const [canvasState, setCanvasState] = useState({ value: 'Simple Thumbnail\nGenerator 😁', fontSize: '30px', @@ -182,14 +184,14 @@ const TG = ({ }, [additionalFontFamily]); return ( - + - + - - { - const LimitWidthSize = window.innerWidth - 70; + const LimitWidthSize = window.innerWidth; + return (
diff --git a/src/components/TGSelect.tsx b/src/components/TGSelect.tsx index 5327128..eff43c8 100644 --- a/src/components/TGSelect.tsx +++ b/src/components/TGSelect.tsx @@ -1,4 +1,4 @@ -import { arrowBottom, arrowTop } from '../assets/icons'; +import { arrowBottom, arrowTop } from '@assets/icons'; import React, { useCallback, useState, diff --git a/src/lib/ThumbnailGenerator.tsx b/src/lib/ThumbnailGenerator.tsx index 408dc43..a67342a 100644 --- a/src/lib/ThumbnailGenerator.tsx +++ b/src/lib/ThumbnailGenerator.tsx @@ -1,7 +1,7 @@ import TG from '../components/TG'; import { TGOpenButton } from '../components/TG.styled'; import React, { useState } from 'react'; -import { toggleButton } from '../assets/icons'; +import { toggleButton } from '@assets/icons'; import { Position, getIconSize } from '../utils/style'; import TGPortal from '../components/TGPortal'; import Icon from '../components/Icon'; @@ -14,6 +14,7 @@ interface ThumbnailGeneratorProps { iconPosition?: [number, number, number, number]; modalPosition?: 'left' | 'right' | 'center'; additionalFontFamily?: string[]; + isFullWidth?: boolean; } const ThumbnailGenerator = ({ @@ -22,6 +23,7 @@ const ThumbnailGenerator = ({ iconSize = 'medium', iconPosition = [0, 20, 20, 0], modalPosition = 'right', + isFullWidth = false, additionalFontFamily = [], }: ThumbnailGeneratorProps) => { const [isOpen, setIsOpen] = useState(false); @@ -36,6 +38,7 @@ const ThumbnailGenerator = ({ {isOpen ? ( { return ( ); }; @@ -49,4 +54,5 @@ Default.args = { buttonIcon: , modalPosition: 'right', iconPosition: [0, 20, 20, 0], + isFullWidth: true, }; diff --git a/src/utils/style.ts b/src/utils/style.ts index 02ddf2f..417b48f 100644 --- a/src/utils/style.ts +++ b/src/utils/style.ts @@ -21,19 +21,19 @@ export const getModalPosition = (position: 'left' | 'right' | 'center') => { switch (position) { case 'left': return ` - bottom: 20px; - left: 20px; + bottom: 0; + left: 0; `; case 'right': return ` - bottom: 20px; - right: 20px; + bottom: 0; + right: 0; `; default: return ` left: 50%; transform: translateX(-50%); - bottom: 20px; + bottom: 0; `; } }; diff --git a/tsconfig.json b/tsconfig.json index 1ef1487..8d6a988 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "baseUrl": "./src", + "baseUrl": "./", "target": "es5", "lib": [ "dom", @@ -25,5 +25,6 @@ }, "include": [ "src" - ] + ], + "extends": "./tsconfig.paths.json" } diff --git a/tsconfig.paths.json b/tsconfig.paths.json new file mode 100644 index 0000000..b4efb49 --- /dev/null +++ b/tsconfig.paths.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "paths": { + "@components/*": ["src/components/*"], + "@assets/*": ["src/assets/*"], + "@constants/*": ["src/constants/*"], + "@utils/*": ["src/utils/*"], + "@types/*": ["src/types/*"], + "@hooks/*": ["src/hooks/*"], + }, + } +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index f5a82d4..ef56f09 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1928,6 +1928,13 @@ schema-utils "^3.0.0" source-map "^0.7.3" +"@rollup/plugin-alias@^4.0.3": + version "4.0.3" + resolved "https://registry.yarnpkg.com/@rollup/plugin-alias/-/plugin-alias-4.0.3.tgz#571f6fb26387df91d0363905a7fd835757727ae2" + integrity sha512-ZuDWE1q4PQDhvm/zc5Prun8sBpLJy41DMptYrS6MhAy9s9kL/doN1613BWfEchGVfKxzliJ3BjbOPizXX38DbQ== + dependencies: + slash "^4.0.0" + "@rollup/plugin-babel@^5.2.0": version "5.3.1" resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283" From 7c0a8d7116d7881edb5e3959293b18043b1ddcc0 Mon Sep 17 00:00:00 2001 From: ssi02014 Date: Sat, 18 Mar 2023 23:54:41 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20peerDependency=20+=20isFullWidth=20?= =?UTF-8?q?Content=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 ++++++ package.json | 6 +++++- rollup.config.mjs | 2 +- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5809d5f..fceff72 100644 --- a/README.md +++ b/README.md @@ -159,6 +159,9 @@ const App = () => { additionalFontFamily={['Noto Sans', ...]} // You can add the font of your choice to your project, but that font must already applied to your project. + + isFullWidth={true} + // Setting this property to true will make the thumbnail generator modal full width. />
) @@ -294,6 +297,9 @@ const App = () => { - additionalFontFamily - **Optional** - Type: `string[]` +- isFullWidth + - **Optional** + - Type: `boolean`
diff --git a/package.json b/package.json index 98bbb38..32d5dda 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-thumbnail-generator", - "version": "2.7.0", + "version": "2.7.1", "description": "react-thumbnail-generator", "main": "dist/index.js", "module": "dist/index.js", @@ -83,6 +83,10 @@ } ] }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + }, "keywords": [ "react", "next", diff --git a/rollup.config.mjs b/rollup.config.mjs index 27fc9b3..15c7432 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -18,7 +18,7 @@ export default { sourcemap: false, }, ], - external: ['react'], + external: ['react', 'react-dom'], plugins: [ peerDepsExternal(), commonjs({ include: 'node_modules/**' }),