Merge pull request #13 from ssi02014/dev

add: icon modal position
ssi02014 · Feb 22, 2023 · abd76d9 · abd76d9
2 parents c28b111 + 5dacf24
commit abd76d9
Show file tree

Hide file tree

Showing 13 changed files with 382 additions and 121 deletions.
diff --git a/README.md b/README.md
@@ -8,11 +8,19 @@
   </a>
 </p>
 
-<h2 align="center">Simply create a thumbnail generator for your project🚀 </h2> 
+<h2 align="center">Simply create a thumbnail generator for your project 🚀 </h2> 
 
 <p align="center">
-  <img src="https://img.shields.io/badge/styled--components-5.3.6-green">
-  <img src="https://img.shields.io/badge/react--color--palette-6.2.0-green">
+  <img src="https://img.shields.io/badge/typescript-blue">
+  <img src="https://img.shields.io/badge/react-blue">
+  <img src="https://img.shields.io/badge/styled--components-green">
+  <img src="https://img.shields.io/badge/react--color--palette-important">
+  <img src="https://img.shields.io/badge/storybook-ff69b4">
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/rollup-red">
+  <img src="https://img.shields.io/badge/babel-yellow">
 </p>
 
 <br/>
@@ -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
 
 
 <br />
@@ -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 🖥️
 
-<img width="721" alt="스크린샷 2023-02-20 오후 10 26 00" src="https://user-images.githubusercontent.com/64779472/220121084-1f2d57db-1c0d-4709-9c24-473ee4f55152.png">
+![스크린샷 2023-02-23 오전 12 47 56](https://user-images.githubusercontent.com/64779472/220677341-7b6c062f-f0f6-49dd-8bcd-b402b61660ea.png)
 
 <br />
 
 ## 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)
 
 <br />
 
@@ -240,10 +247,15 @@ const App = () => {
   <img width="43" alt="스크린샷 2023-02-20 오후 10 48 05" src="https://user-images.githubusercontent.com/64779472/220125380-77aaaa79-9baf-4252-aa46-a44e6e91dd3d.png">
 
   - 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
@@ -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
@@ -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
@@ -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
@@ -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 (
-    <TGBodyWrapper position={position}>
+    <TGBodyWrapper modalPosition={modalPosition}>
       <TGHeader onToggle={onToggle} />
       <TGInnerWrapper>
         <TGContentWrapper>