Merge pull request #35 from ssi02014/dev

Dev

.github/workflows/npm-publish.yml

@@ -0,0 +1,38 @@
+name: Publish Package to npmjs
+on:
+  push:
+    branches:
+      - master
+jobs:
+  npm-publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🔔
+        uses: actions/checkout@v3
+      - name: Node Setup 🔔
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install & Build 🔨
+        run: | 
+          yarn
+          yarn build
+      - name: Publish 🚀
+        run: yarn publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+  storybook-publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🔔
+        uses: actions/checkout@v3
+      - name: Install & Build 🔨
+        run: |
+          yarn
+          yarn build:storybook
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          token: ${{ secrets.PUBLISH_TOKEN }}
+          folder: storybook-static

README.md

@@ -72,7 +72,7 @@
 - Resizing the canvas
 - Filling the background with colors or pictures
 - Choosing a blur effect
-- Selecting font family, size, stroke, color, and angle
+- Selecting font family, size, stroke, color, angle, lineHeight
 - Dragging and dropping text on the canvas
 - Adding custom web font families
 - Selecting the modal button and its location

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-thumbnail-generator",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "description": "react-thumbnail-generator",
   "main": "dist/index.js",
   "module": "dist/index.js",

src/components/Canvas/index.tsx

@@ -10,6 +10,7 @@ interface CanvasProps {
 const Canvas = React.forwardRef(({ canvasState }: CanvasProps, ref: any) => {
   const {
     value,
+    lineHeight,
     canvasWidth,
     canvasHeight,
     fontSize,
@@ -85,10 +86,10 @@ const Canvas = React.forwardRef(({ canvasState }: CanvasProps, ref: any) => {
     lines: string[]
   ) => {
     const size = +fontSize.replace('px', '');
-    const lineHeight = size * 1.15;
+    const fontLineHeight = size + +lineHeight;
 
     lines.forEach((line, idx) => {
-      const { x, y } = getMultiLinePosition(lines.length, lineHeight, idx);
+      const { x, y } = getMultiLinePosition(lines.length, fontLineHeight, idx);
 
       ctx.save();
       ctx.translate(x, y);

src/components/Inputs/RangeInput/index.tsx

@@ -28,6 +28,7 @@ const RangeInput = ({
         <label htmlFor={name}>{label}</label>
         <S.StyledRangeInput
           type="range"
+          name={name}
           min={min}
           max={max}
           value={value}

src/components/TGHeader.tsx → src/components/Layout/Header/index.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
-import { TGHeaderWrapper, TGLimitSizeText } from './TG.styled';
+import * as S from '../styled';
 import { close } from '@assets/icons';
-import { IconButton } from './Icon/styled';
-import Icon from './Icon';
+import { IconButton } from '@components/Icon/styled';
+import Icon from '@components/Icon';
 
-interface TGHeaderProps {
+interface HeaderProps {
   onToggle: () => void;
 }
 
-const TGHeader = ({ onToggle }: TGHeaderProps) => {
+const Header = ({ onToggle }: HeaderProps) => {
   const LimitWidthSize = window.innerWidth;
 
   return (
-    <TGHeaderWrapper>
+    <S.HeaderWrapper>
       <div>
         <a
           href="https://github.com/ssi02014/react-thumbnail-generator"
@@ -24,11 +24,11 @@ const TGHeader = ({ onToggle }: TGHeaderProps) => {
           <Icon src={close} width={20} height={20} />
         </IconButton>
       </div>
-      <TGLimitSizeText>
+      <S.LimitSizeText>
         Limit Width: <span>{`${LimitWidthSize}px`}</span>
-      </TGLimitSizeText>
-    </TGHeaderWrapper>
+      </S.LimitSizeText>
+    </S.HeaderWrapper>
   );
 };
 
-export default TGHeader;
+export default Header;

src/components/Layout/styled.tsx

@@ -0,0 +1,91 @@
+import { getModalPosition } from '@utils/style';
+import styled from 'styled-components';
+
+export const HeaderWrapper = styled.div`
+  display: flex;
+  position: sticky;
+  top: 0;
+  flex-direction: column;
+  padding: 10px;
+  padding-bottom: 0;
+  background-color: #fff;
+
+  & > div:first-child {
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+  }
+
+  a {
+    color: #111111;
+    padding: 0;
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: bold;
+    text-decoration: none;
+
+    &:hover {
+      color: #3264b5;
+    }
+  }
+
+  button {
+    cursor: pointer;
+    transition: transform 0.2s;
+    &:hover {
+      transform: rotate(90deg);
+    }
+  }
+`;
+
+export const LimitSizeText = styled.div`
+  font-size: 0.85rem;
+  margin-top: 5px;
+  text-align: center;
+
+  span {
+    font-weight: bold;
+  }
+`;
+
+export const BodyWrapper = styled.section<{
+  modalPosition: 'left' | 'right' | 'center';
+  isFullWidth: boolean;
+}>`
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  min-width: ${({ isFullWidth }) => (isFullWidth ? '100%' : '600px')};
+  border-radius: 7px;
+  box-shadow: 1px 1px 10px #cccccc;
+  z-index: 9999;
+  background-color: #ffffff;
+  flex-direction: column;
+  overflow: hidden;
+  font-family: Arial;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  ${({ modalPosition }) => getModalPosition(modalPosition)}
+`;
+
+export const InnerWrapper = styled.div`
+  flex-direction: column;
+  width: 100%;
+  max-height: calc(100vh - 78px);
+  overflow-y: scroll;
+  overflow-x: auto;
+`;
+
+export const ContentWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  margin-bottom: 20px;
+
+  canvas + textarea {
+    margin-top: 10px;
+  }
+`;

src/components/TGPortal.tsx → src/components/Portal/index.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 
-interface TGPortalProps {
+interface PortalProps {
   id?: string;
   children: React.ReactNode;
 }
 
-const TGPortal = ({ id, children }: TGPortalProps) => {
+const Portal = ({ id, children }: PortalProps) => {
   const [portalElement, setPortalElement] = useState<Element | null>(null);
 
   useEffect(() => {
@@ -17,4 +17,4 @@ const TGPortal = ({ id, children }: TGPortalProps) => {
   return ReactDOM.createPortal(children, portalElement);
 };
 
-export default TGPortal;
+export default Portal;

src/components/TGSelectItem.tsx → src/components/Select/SelectItem.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
-import { SelectListItem } from './TG.styled';
-import { SelectContext } from './TGSelect';
+import * as S from './styled';
+import { SelectContext } from './index';
 
-interface TGSelectItemProps {
+interface SelectItemProps {
   children: string;
   value: string | number;
 }
@@ -12,18 +12,18 @@ interface SelectContextProps {
   onChange: (value: string | number) => void;
 }
 
-const TGSelectItem = ({ children, value }: TGSelectItemProps) => {
+const SelectItem = ({ children, value }: SelectItemProps) => {
   const { selectValue, onChange } = useContext(
     SelectContext
   ) as SelectContextProps;
 
   return (
-    <SelectListItem
+    <S.SelectListItem
       className={selectValue === value ? 'active' : ''}
       onClick={() => onChange(value)}>
       {children}
-    </SelectListItem>
+    </S.SelectListItem>
   );
 };
 
-export default TGSelectItem;
+export default SelectItem;

src/components/TGSelect.tsx → src/components/Select/index.tsx

@@ -6,8 +6,8 @@ import React, {
   useEffect,
   ComponentProps,
 } from 'react';
-import { SelectWrapper, SelectInput, SelectItemContainer } from './TG.styled';
-import Icon from './Icon';
+import * as S from './styled';
+import Icon from '../Icon';
 
 interface SelectContextProps {
   color?: string;
@@ -28,7 +28,7 @@ export const SelectContext = React.createContext<SelectContextProps | null>(
   null
 );
 
-const TGSelect = ({
+const Select = ({
   children,
   name,
   color,
@@ -70,9 +70,9 @@ const TGSelect = ({
   return (
     <SelectContext.Provider
       value={{ color, selectValue: value, onChange: handleChange }}>
-      <SelectWrapper>
+      <S.SelectWrapper>
         <label>{label}</label>
-        <SelectInput
+        <S.SelectInput
           ref={inputRef}
           onClick={handleToggleSelect}
           isOpenSelect={isOpenSelect}>
@@ -84,11 +84,13 @@ const TGSelect = ({
               <Icon src={arrowBottom} width={12} height={12} />
             )}
           </p>
-        </SelectInput>
-        {isOpenSelect && <SelectItemContainer>{children}</SelectItemContainer>}
-      </SelectWrapper>
+        </S.SelectInput>
+        {isOpenSelect && (
+          <S.SelectItemContainer>{children}</S.SelectItemContainer>
+        )}
+      </S.SelectWrapper>
     </SelectContext.Provider>
   );
 };
 
-export default TGSelect;
+export default Select;

src/components/Select/styled.tsx

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+
+// TG Select
+export const SelectWrapper = styled.div`
+  position: relative;
+  min-width: 150px;
+  max-width: 150px;
+
+  label {
+    font-size: 0.7rem;
+    color: #969696;
+  }
+`;
+
+export const SelectInput = styled.div<{ isOpenSelect: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  border: ${({ isOpenSelect }) =>
+    isOpenSelect ? `1px solid #0e1b30` : `1px solid #cccccc`};
+  border-radius: 5px;
+  padding: 6px 12px;
+
+  p {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.9rem;
+  }
+
+  &:hover {
+    border: 1px solid #0e1b30;
+  }
+`;
+
+export const SelectItemContainer = styled.ul`
+  position: absolute;
+  bottom: 20px;
+  width: 100%;
+  background-color: #fff;
+  box-shadow: 0 0 3px 0.5px #afafaf;
+  overflow-y: scroll;
+  list-style: none;
+  padding: 0;
+  max-height: 200px;
+`;
+
+export const SelectListItem = styled.li`
+  cursor: pointer;
+  padding: 10px 15px;
+  font-size: 0.9rem;
+
+  &:hover {
+    background-color: #ededed;
+  }
+`;