Merge pull request #30 from ssi02014/dev

�v2.7.1
ssi02014 · Mar 18, 2023 · 7402b2c · 7402b2c
2 parents ecf17fc + 7c0a8d7
commit 7402b2c
Show file tree

Hide file tree

Showing 21 changed files with 169 additions and 121 deletions.
diff --git 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.
       />
     </div>
   )
@@ -294,6 +297,9 @@ const App = () => {
 - additionalFontFamily
   - **Optional**
   - Type: `string[]`
+- isFullWidth
+  - **Optional**
+  - Type: `boolean`
 
 <br />
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-thumbnail-generator",
-  "version": "2.6.6",
+  "version": "2.7.1",
   "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",
@@ -82,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
@@ -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'];
@@ -18,10 +18,9 @@ export default {
       sourcemap: false,
     },
   ],
-  external: ['react'],
+  external: ['react', 'react-dom'],
   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 → src/assets/icons.ts b/src/assets/icons.js → src/assets/icons.ts
diff --git 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 → src/components/Inputs/FileInput/index.tsx b/src/components/TGInputFile.tsx → 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<HTMLInputElement>) => void;
@@ -10,12 +10,12 @@ interface TGInputFileProps {
 
 const TGInputFile = ({ width, height, onChangeImage }: TGInputFileProps) => {
   return (
-    <TGInputFileWrapper>
+    <S.FileInputWrapper>
       <label htmlFor="file">
         <img src={photo} width={width} height={height} />
       </label>
       <input id="file" type="file" onChange={onChangeImage} />
-    </TGInputFileWrapper>
+    </S.FileInputWrapper>
   );
 };
 

diff --git a/src/components/Inputs/FileInput/styled.tsx 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 → src/components/Inputs/RangeInput/index.tsx b/src/components/Inputs/InputRange/index.tsx → 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 (
-    <S.InputRangeWrapper>
+    <S.RangeInputWrapper>
       <S.InputLabelRangeContainer>
         <label htmlFor={name}>{label}</label>
-        <S.StyledInputRange
+        <S.StyledRangeInput
           type="range"
           min={min}
           max={max}
@@ -35,9 +35,9 @@ const InputRange = ({
           backgroundSize={backgroundSize}
         />
       </S.InputLabelRangeContainer>
-      <TGInputText width={60} name={name} value={value} onChange={onChange} />
-    </S.InputRangeWrapper>
+      <TextInput width={60} name={name} value={value} onChange={onChange} />
+    </S.RangeInputWrapper>
   );
 };
 
-export default InputRange;
+export default RangeInput;
diff --git a/src/components/Inputs/InputRange/styled.tsx → src/components/Inputs/RangeInput/styled.tsx b/src/components/Inputs/InputRange/styled.tsx → 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 → src/components/Inputs/TextInput/index.tsx b/src/components/TGInputText.tsx → src/components/Inputs/TextInput/index.tsx
@@ -1,21 +1,21 @@
 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,
   width = 124,
   maxLength = 5,
   disabled = false,
   onChange,
-}: TGInputTextProps) => {
+}: TextInputProps) => {
   return (
-    <TGInputTextContainer width={width}>
+    <S.TextInputWrapper width={width}>
       <label htmlFor={name}>{label}</label>
       <input
         type="text"
@@ -26,8 +26,8 @@ const TGInputText = ({
         onChange={onChange}
         disabled={disabled}
       />
-    </TGInputTextContainer>
+    </S.TextInputWrapper>
   );
 };
 
-export default TGInputText;
+export default TextInput;
diff --git a/src/components/Inputs/TextInput/styled.tsx 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
@@ -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;
-  }
-`;