feat: Add isDefaultOpen props

Author: ssi02014

README.md

@@ -33,7 +33,7 @@
 
 <br/>
 
-<h3 align="center">🌟 CONTRIBUTORS 🌟</h3>
+<h3 align="center">🌟 CONTRIBUTORS 🌟=</h3>
 <p align="center">
   <a href="https://github.com/ssi02014/react-thumbnail-generator/graphs/contributors">
     <img src="https://contrib.rocks/image?repo=ssi02014/react-thumbnail-generator">
@@ -42,7 +42,7 @@
 
 <br />
 
-<h3 align="center">Storybook Github Page</h3>
+<h3 align="center">Storybook: Demo Page</h3>
 <p align="center">
   <a href="https://ssi02014.github.io/react-thumbnail-generator/?path=/story/components-thumbnailgenerator--default">
     <img src="https://user-images.githubusercontent.com/64779472/220122236-c90ae4a5-8271-41df-b150-230b97991d41.png" width="120">
@@ -76,7 +76,7 @@
 - Dragging and dropping text on the canvas
 - Adding custom web font families
 - Selecting the modal button and its location
-- Choosing the image type (png, jpg, webp)
+- Choosing the image type (png, jpg, webp, svg)
 - Supporting TypeScript and Next
 
 
@@ -146,22 +146,24 @@ const App = () => {
         // If you do not include this option, the default icon will be used.
 
         iconSize="medium"
-        // Please select the size of the default button icon. 
-        // If no size is specified, the default size (medium) will be applied. 
+        // Through this property, you can specify the size of the button icon.
         // However, if you are inserting a custom button icon, this option is meaningless.
 
         iconPosition={[0, 20, 20, 0]}
-        // Please select the location of the button to open the Thumbnail Model.
-        // Sequence: [top, right, bottom, left]
+        // Through this property, you can specify the position of the button icon.
+        // [top, right, bottom, left]
 
         modalPosition='right'
-        // Please select the location to open the ThumbnailModal.
+        // Through this property, you can specify the position of the thumbnail generator.
 
         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.
+        // Setting this property to true will make the thumbnail generator full-width.
+
+        isDefaultOpen={false}
+        // Setting this property to true will open the thumbnail generator by default.
       />
     </div>
   )
@@ -301,9 +303,15 @@ const App = () => {
   - **Optional**
   - Default: `false`
   - Type: `boolean`
+- isDefaultOpen
+  - **Optional**
+  - Default: `false`
+  - Type: `boolean`
 
 <br />
 
 ## Reference
 - https://github.com/wormwlrm/kwakcheolyong
-- https://github.com/banner-maker/banner-makers
+- https://github.com/banner-maker/banner-makers
+
+<br />

src/components/Canvas/index.tsx

@@ -122,11 +122,13 @@ const Canvas = React.forwardRef(({ canvasState }: CanvasProps, ref: any) => {
     const ctx = canvas.getContext('2d');
 
     if (!ctx) return;
+
     if (selectedImage) {
       if (isBlur) ctx.filter = 'blur(5px)';
       ctx.drawImage(selectedImage, 0, 0);
       return;
     }
+
     ctx.fillStyle = bgColor.hex;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
   };

src/components/Inputs/RangeInput/index.tsx

@@ -36,7 +36,7 @@ const RangeInput = ({
           backgroundSize={backgroundSize}
         />
       </S.InputLabelRangeContainer>
-      <TextInput width={60} name={name} value={value} onChange={onChange} />
+      <TextInput width={50} name={name} value={value} onChange={onChange} />
     </S.RangeInputWrapper>
   );
 };

src/components/Inputs/TextInput/index.tsx

@@ -16,7 +16,7 @@ const TextInput = ({
 }: TextInputProps) => {
   return (
     <S.TextInputWrapper width={width}>
-      <label htmlFor={name}>{label}</label>
+      {label && <label htmlFor={name}>{label}</label>}
       <input
         type="text"
         name={name}

src/lib/ThumbnailGenerator.tsx

@@ -8,6 +8,7 @@ import Icon from '@components/Icon';
 
 interface ThumbnailGeneratorProps {
   id?: string;
+  isDefaultOpen?: boolean;
   buttonIcon?: React.ReactNode;
   iconSize?: 'small' | 'medium' | 'large';
   position?: Position;
@@ -20,13 +21,14 @@ interface ThumbnailGeneratorProps {
 const ThumbnailGenerator = ({
   id,
   buttonIcon,
+  isDefaultOpen = false,
   iconSize = 'medium',
   iconPosition = [0, 20, 20, 0],
   modalPosition = 'right',
   isFullWidth = false,
   additionalFontFamily = [],
 }: ThumbnailGeneratorProps) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(isDefaultOpen);
   const tgIconSize = getIconSize(iconSize);
 
   const onToggleGenerator = () => {

src/stories/components/ThumbnailGenerator.stories.tsx

@@ -43,6 +43,7 @@ const Template: Story = ({
       iconPosition={iconPosition}
       iconSize={iconSize}
       isFullWidth={isFullWidth}
+      isDefaultOpen
     />
   );
 };

src/utils/common.ts

@@ -5,10 +5,8 @@ export type ValidType = 'imageSize' | 'canvasSize' | 'angle' | 'lineHeight';
 
 export const getValidMessage = (condition: boolean, type: ValidType) => {
   const message = {
-    imageSize: `Please register a picture smaller than "Limit Width"`,
-    canvasSize: `Please set the canvas width smaller than "Limit Width"`,
-    angle: 'Please set a value in the range of -360 to 360',
-    lineHeight: 'Please set a value in the range of 0 to 360',
+    angle: 'Please set the value to within the range',
+    lineHeight: 'Please set the value to within the range',
   } as { [key: string]: string };
 
   if (condition) return message[type];