Skip to content

Commit 5eb245f

Browse files
ssi02014ssi02014
authored
release: v4 react-thumbnail-generator (#58)
* chore: migrate to Vite + Storybook v9 and upgrade dependencies (#57) * chore: vite storybook v9 & add vanilla-extract * feat: add Portal component & remove devagrace * chore: rollup config * chore: react-color-palette version upgrade * fix: colorPicker hide options * fix: rollup config & interface file naming (#59) * chore: add package.json sideEffects * fix: migration @emotion -> vanilla-extract (#60) * fix: migration accordion @emotion -> vanilla-extract * fix: migration iconButton/FileInput @emotion > vanilla-extract * fix: migration rangeInput emotion -> vanilla-extract * fix: migration textInput emotion -> vanilla-extract * fix: migration layout emotion -> vanilla-extract * fix: migration select emotion -> vanilla-extract * fix: remove emotion & lineHeight logic * docs: README.md * feat: react-konva (#61) * feat: react-konva * feat: konva text fontStyle * refac: ThunbnailGeneratorContent * feat: thumbnail generator ui * fix: add use client * fix: menu options * fix: remove code * feat: implement close more options on outside click * docs: README.md * release: v4.0.0
1 parent 53e5f1b commit 5eb245f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+5829
-14434
lines changed

‎.github/CODEOWNERS‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* @ssi02014

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,5 @@ yarn-debug.log*
2424
yarn-error.log*
2525

2626
storybook-static
27+
28+
*storybook.log

‎.storybook/main.js‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎.storybook/main.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import type { StorybookConfig } from '@storybook/react-vite';
2+
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
3+
import path from 'path';
4+
5+
const config: StorybookConfig = {
6+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
7+
addons: ['@storybook/addon-docs'],
8+
framework: {
9+
name: '@storybook/react-vite',
10+
options: {},
11+
},
12+
viteFinal: (config) => {
13+
config.plugins?.push(vanillaExtractPlugin());
14+
15+
if (config.resolve) {
16+
config.resolve.alias = {
17+
...config.resolve?.alias,
18+
'@assets': path.resolve(__dirname, '../src/assets'),
19+
'@components': path.resolve(__dirname, '../src/components'),
20+
'@constants': path.resolve(__dirname, '../src/constants'),
21+
'@utils': path.resolve(__dirname, '../src/utils'),
22+
'@css': path.resolve(__dirname, '../src/css'),
23+
'@lib': path.resolve(__dirname, '../src/lib'),
24+
'@interfaces': path.resolve(__dirname, '../src/interfaces'),
25+
'@hooks': path.resolve(__dirname, '../src/hooks'),
26+
};
27+
}
28+
29+
return config;
30+
},
31+
};
32+
export default config;

‎.storybook/preview.js‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎.storybook/preview.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { Preview } from '@storybook/react-vite'
2+
3+
const preview: Preview = {
4+
parameters: {
5+
controls: {
6+
matchers: {
7+
color: /(background|color)$/i,
8+
date: /Date$/i,
9+
},
10+
},
11+
},
12+
};
13+
14+
export default preview;

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2025 ssi02014
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README-ja_jp.md‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
# 💻 react-thumbnail-generator
2+
[English](README.md) | [한국어](README-ko_kr.md) | [简体中文](README-zh_cn.md) | 日本語
3+
4+
<a href="https://www.npmjs.com/package/react-thumbnail-generator" target="_blank">
5+
<img src="https://img.shields.io/npm/v/react-thumbnail-generator.svg">
6+
</a>
7+
<a href="https://www.npmjs.com/package/react-thumbnail-generator" target="_blank">
8+
<img src="https://img.shields.io/npm/dt/react-thumbnail-generator.svg">
9+
</a>
10+
<a href="https://bundlephobia.com/package/react-thumbnail-generator" target="_blank">
11+
<img src="https://img.shields.io/bundlephobia/minzip/react-thumbnail-generator/latest?style=flat-square">
12+
</a>
13+
14+
15+
<p align="center">
16+
<a href="https://www.npmjs.com/package/react-thumbnail-generator" target="_blank">
17+
<img src="https://user-images.githubusercontent.com/64779472/219855230-d6515d16-334c-432a-8d20-fa171e17c231.png" />
18+
</a>
19+
</p>
20+
21+
## Overview 🎨
22+
`react-thumbnail-generator`は、Webブラウザで直接サムネイルを簡単に作成・カスタマイズできる多機能なReactコンポーネントです。直感的なインターフェースと豊富な機能セットにより、アプリケーションを離れることなくプロジェクト用のサムネイルを生成できます。
23+
24+
https://github.com/user-attachments/assets/5d4f8c23-72c6-43ae-aa62-5c46ee0ddfc6
25+
26+
<br />
27+
28+
### Key Features
29+
- 🎯 シンプルなドラッグ&ドロップインターフェース
30+
- 🎨 背景色/画像のカスタマイズ
31+
- ✍️ 複数のフォントとエフェクトによるテキストスタイリング
32+
- 📏 柔軟なキャンバスサイズ調整
33+
- 🖼️ 複数のエクスポート形式 (PNG, JPG, WebP)
34+
- 🔧 高度に設定可能な位置と外観
35+
- 📱 デスクトップブラウザ最適化
36+
- 📱 クライアントサイド専用コンポーネント
37+
38+
<br />
39+
40+
## Demo Page 🖼️
41+
[react-thumbnail-generator デモページ](https://ssi02014.github.io/react-thumbnail-generator/?path=/story/components-thumbnailgenerator--default)
42+
43+
<br />
44+
45+
## Quick Start 🚀
46+
### STEP 1️⃣
47+
- パッケージのインストール
48+
```shell
49+
yarn add react-thumbnail-generator
50+
```
51+
```shell
52+
pnpm add react-thumbnail-generator
53+
```
54+
55+
```shell
56+
npm install react-thumbnail-generator
57+
```
58+
59+
<br />
60+
61+
### STEP 2️⃣
62+
- `<ThumbnailGenerator>` コンポーネントを追加します。
63+
- ThumbnailGeneratorは、デフォルトで`Portal`を使用して`document.body`の子要素として自動的にレンダリングされます。
64+
65+
```jsx
66+
import ThumbnailGenerator from 'react-thumbnail-generator';
67+
68+
const App = () => {
69+
return (
70+
<ThumbnailGenerator
71+
iconPosition="bottom-right"
72+
// トグルボタンアイコンの位置を指定 (top-left, top-right, bottom-left, bottom-right)
73+
74+
modalPosition="right"
75+
// サムネイル生成器が表示される位置を指定 (left, right, center)
76+
77+
iconSize="medium"
78+
// トグルボタンアイコンのサイズを設定 (small, medium, large)
79+
80+
additionalFontFamily={['Noto Sans', ...]}
81+
// 生成器で使用するカスタムフォントを追加
82+
// 重要: フォントがプロジェクトで既に読み込まれている必要があります
83+
84+
isFullWidth={true}
85+
// trueの場合、サムネイル生成器が全幅に拡張されます
86+
87+
isDefaultOpen={false}
88+
// trueの場合、読み込み時にサムネイル生成器が自動的に開きます
89+
/>
90+
)
91+
}
92+
```
93+
94+
<br />
95+
96+
## Webフォントの追加方法 😊
97+
### STEP 1️⃣
98+
- `public/index.html` または `index.html` にWebフォントを追加
99+
- または `CSS/SCSS` ファイルでWebフォントをインポート
100+
101+
```html
102+
<!DOCTYPE html>
103+
<html lang="en">
104+
<head>
105+
<!-- ... -->
106+
<!-- Webフォントを追加 -->
107+
<link rel="preconnect" href="https://fonts.googleapis.com" />
108+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
109+
<link
110+
href="https://fonts.googleapis.com/css2?family=Zeyada&display=swap"
111+
rel="stylesheet"
112+
/>
113+
</head>
114+
<body>
115+
<div id="root"></div>
116+
</body>
117+
</html>
118+
```
119+
120+
<br />
121+
122+
### STEP 2️⃣
123+
- `additionalFontFamily` プロパティにフォント名を配列として追加
124+
- フォント名は読み込まれたWebフォントと正確に一致する必要があります
125+
126+
```jsx
127+
import ThumbnailGenerator from 'react-thumbnail-generator';
128+
129+
const App = () => {
130+
return (
131+
<ThumbnailGenerator additionalFontFamily={["Zeyada"]} {...props} />
132+
)
133+
}
134+
```
135+
136+
<br />
137+
138+
## Options 📄
139+
- iconPosition
140+
- **オプション**
141+
- デフォルト: `bottom-right`
142+
- タイプ: `top-left | top-right | bottom-left | bottom-right`
143+
- modalPosition
144+
- **オプション**
145+
- デフォルト: `right`
146+
- タイプ: `left | right | center`
147+
- iconSize
148+
- **オプション**
149+
- デフォルト: `medium`
150+
- タイプ: `small | medium | large`
151+
- additionalFontFamily
152+
- **オプション**
153+
- タイプ: `string[]`
154+
- isFullWidth
155+
- **オプション**
156+
- デフォルト: `false`
157+
- タイプ: `boolean`
158+
- isDefaultOpen
159+
- **オプション**
160+
- デフォルト: `false`
161+
- タイプ: `boolean`
162+
163+
<br />
164+
165+
## Contributing
166+
167+
ご貢献いただきありがとうございます。❤️ 誰でも `react-thumbnail-generator` に貢献できます。
168+
169+
<a href="https://github.com/ssi02014/react-thumbnail-generator/graphs/contributors">
170+
<img src="https://contrib.rocks/image?repo=ssi02014/react-thumbnail-generator">
171+
</a>
172+
173+
<br />
174+
175+
## License
176+
MIT © ssi02014. 詳細は [LICENSE](./LICENSE) をご覧ください。

0 commit comments

Comments
 (0)