Skip to content

Commit f3dec15

Browse files
agjsagjs
authored
feat: Add ImageDialog component with advanced image cropping function… (#32)
* feat: Add ImageDialog component with advanced image cropping functionality - Introduce new ImageDialog component for image selection and cropping - Update Dialog component with optional click outside closing - Modify ImageCrop to support Blob input and improved image handling - Add ImageDialog story for component demonstration - Enhance ImageInput with file input reset functionality * Updates * chore: Minor styling and configuration updates across components - Update Mastodon icon color to match new primary color scheme - Add Tailwind PostCSS plugin configuration - Modify ESLint and Vite configuration files - Update Storybook preview and theme settings - Adjust various component stories and styling classes - Refactor export order in index.ts - Minor logo and icon updates * refactor: Update Icons and DomainInput stories - Modify Icons story to dynamically render all available icons - Simplify icon rendering and improve type handling - Update DomainInput story to optimize onChange event handling * refactor: Migrate color scheme to OKLCH color space - Remove tailwind.config.js configuration - Update Select component styles to use OKLCH color values - Replace RGB color variables with OKLCH color representation - Minor styling adjustments in Select component * feat: Add data-testid attributes to Icons across components - Enhance Icon component with optional dataTestId prop - Update Icon component to support data-testid attribute - Add data-testid attributes to icons in Accordion, CTA, ContentWidget, Error, ImageSelector, and other components - Modify test setup to mock Icon component with data-testid support - Improve test coverage and component testability * refactor: Remove Button color variants and related CSS * refactor: Improve ImageDialog and ImageCrop component functionality - Remove unnecessary props from ImageCrop and ImageDialog - Add state management for cropping and saving images - Enhance error handling in image saving process - Update ImageDialog to support loading state during save - Simplify image cropping and dialog interaction * refactor: Simplify image handling and remove unnecessary props - Extract blobToBase64 utility method to ImageUtils - Remove unused crop state and props from ImageCrop components - Update ImageDialog to pass both blob and base64 to onSave handler - Remove console.log statements and unnecessary code - Streamline image-related components and stories
1 parent ab53a50 commit f3dec15

File tree

158 files changed

+4783
-6764
lines changed

Some content is hidden

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

158 files changed

+4783
-6764
lines changed

‎.eslintrc.js‎

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

‎.storybook/preview.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const preview: Preview = {
1616
values: [
1717
{
1818
name: "programmer.network",
19-
value: "#1b1f23"
19+
value: "#000408"
2020
}
2121
]
2222
},

‎.storybook/theme.ts‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,17 @@ export default create({
44
base: "dark",
55
brandTitle: "Yail",
66
brandUrl: "https://programmer.network",
7-
brandImage:
8-
"https://raw.githubusercontent.com/Programmer-Network/yail/master/assets/images/yail-logo.png",
7+
brandImage: "../assets/images/yail-logo.png",
98
brandTarget: "_self",
10-
appBg: "#1b1f23",
11-
appContentBg: "#1b1f23",
12-
appBorderColor: "#1b1f23",
9+
appBg: "#000408",
10+
appContentBg: "#000408",
11+
appBorderColor: "#000408",
1312
colorPrimary: "#ffb900",
1413
textColor: "#9ca3af",
15-
barBg: "#1b1f23",
14+
barBg: "#000408",
1615
barTextColor: "#ffb900",
17-
barSelectedColor: "#4338ca",
18-
barHoverColor: "#4338ca",
16+
barSelectedColor: "#ffb900",
17+
barHoverColor: "#ffb900",
1918
appBorderRadius: 0,
2019
colorSecondary: "#ffb900"
2120
});

‎assets/icons/icon-mastodon.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎assets/images/yail-logo.png‎

-3.08 KB
Loading

‎eslint.config.mjs‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import pluginJs from "@eslint/js";
2+
import pluginReact from "eslint-plugin-react";
3+
import pluginReactHooks from "eslint-plugin-react-hooks";
4+
import globals from "globals";
5+
import tseslint from "typescript-eslint";
6+
7+
export default [
8+
{
9+
files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
10+
languageOptions: {
11+
globals: {
12+
...globals.browser,
13+
...globals.node,
14+
...globals.jest,
15+
React: "readonly"
16+
},
17+
parser: tseslint.parser,
18+
parserOptions: {
19+
ecmaVersion: "latest",
20+
sourceType: "module",
21+
ecmaFeatures: { jsx: true }
22+
}
23+
},
24+
plugins: {
25+
react: pluginReact,
26+
"@typescript-eslint": tseslint.plugin,
27+
"react-hooks": pluginReactHooks
28+
},
29+
settings: {
30+
react: {
31+
version: "detect"
32+
}
33+
},
34+
rules: {
35+
...pluginJs.configs.recommended.rules,
36+
...tseslint.configs.recommended[0].rules,
37+
...pluginReact.configs.flat.recommended.rules,
38+
"react/react-in-jsx-scope": "off",
39+
"react/prop-types": "off",
40+
"react-hooks/rules-of-hooks": "error",
41+
"react-hooks/exhaustive-deps": "warn",
42+
"no-unused-vars": "off",
43+
"@typescript-eslint/no-unused-vars": "error"
44+
}
45+
}
46+
];

‎package.json‎

Lines changed: 99 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
},
4343
"lint-staged": {
4444
"*.{js,jsx,ts,tsx}": [
45-
"eslint --cache --fix",
45+
"eslint --cache --fix --config eslint.config.mjs",
4646
"prettier --write"
4747
],
4848
"*.{css,html,md}": "prettier --write"
@@ -55,112 +55,120 @@
5555
"keywords": [],
5656
"license": "ISC",
5757
"devDependencies": {
58-
"@babel/core": "7.24.0",
59-
"@babel/preset-env": "7.24.0",
60-
"@babel/preset-react": "7.23.3",
61-
"@babel/preset-typescript": "7.23.3",
62-
"@faker-js/faker": "8.4.1",
63-
"@programmer_network/use-ajv-form": "1.0.19",
64-
"@storybook/addon-actions": "8.0.0",
65-
"@storybook/addon-essentials": "8.0.0",
66-
"@storybook/addon-interactions": "8.0.0",
67-
"@storybook/addon-links": "8.0.0",
68-
"@storybook/addon-onboarding": "8.0.0",
69-
"@storybook/blocks": "8.0.0",
70-
"@storybook/manager-api": "8.0.0",
71-
"@storybook/react": "8.0.0",
72-
"@storybook/react-vite": "8.0.0",
73-
"@storybook/theming": "8.0.0",
74-
"@tailwindcss/forms": "0.5.7",
75-
"@tailwindcss/typography": "0.5.10",
76-
"@testing-library/jest-dom": "6.4.2",
77-
"@testing-library/react": "14.2.1",
78-
"@trivago/prettier-plugin-sort-imports": "4.3.0",
79-
"@types/jest": "29.5.8",
80-
"@types/node": "20.8.10",
81-
"@types/react": "18.3.1",
58+
"@babel/core": "7.26.9",
59+
"@babel/preset-env": "7.26.9",
60+
"@babel/preset-react": "7.26.3",
61+
"@babel/preset-typescript": "7.26.0",
62+
"@eslint/compat": "1.2.7",
63+
"@eslint/eslintrc": "3.3.0",
64+
"@eslint/js": "9.21.0",
65+
"@faker-js/faker": "9.5.1",
66+
"@programmer_network/use-ajv-form": "1.0.31",
67+
"@storybook/addon-actions": "8.6.3",
68+
"@storybook/addon-essentials": "8.6.3",
69+
"@storybook/addon-interactions": "8.6.3",
70+
"@storybook/addon-links": "8.6.3",
71+
"@storybook/addon-onboarding": "8.6.3",
72+
"@storybook/blocks": "8.6.3",
73+
"@storybook/manager-api": "8.6.3",
74+
"@storybook/react": "8.6.3",
75+
"@storybook/react-vite": "8.6.3",
76+
"@storybook/theming": "8.6.3",
77+
"@tailwindcss/forms": "0.5.10",
78+
"@tailwindcss/postcss": "4.0.9",
79+
"@tailwindcss/typography": "0.5.16",
80+
"@testing-library/jest-dom": "6.6.3",
81+
"@testing-library/react": "16.2.0",
82+
"@trivago/prettier-plugin-sort-imports": "5.2.2",
83+
"@types/jest": "29.5.14",
84+
"@types/node": "22.13.0",
85+
"@types/react": "19.0.10",
8286
"@types/react-copy-to-clipboard": "5.0.7",
83-
"@types/react-dom": "18.3.0",
84-
"@types/sanitize-html": "2.9.5",
85-
"@typescript-eslint/eslint-plugin": "7.2.0",
86-
"@typescript-eslint/parser": "7.2.0",
87-
"@vitejs/plugin-react": "4.2.1",
88-
"@vitest/ui": "1.4.0",
89-
"ajv": "8.13.0",
90-
"autoprefixer": "10.4.18",
87+
"@types/react-dom": "19.0.0",
88+
"@types/sanitize-html": "2.13.0",
89+
"@typescript-eslint/eslint-plugin": "8.25.0",
90+
"@typescript-eslint/parser": "8.25.0",
91+
"@vitejs/plugin-react": "4.3.4",
92+
"@vitest/ui": "3.0.7",
93+
"ajv": "8.17.1",
9194
"client": "link:@types/vite-plugin-svgr/client",
9295
"core": "link:@types/@popperjs/core",
9396
"create": "link:@types/@storybook/theming/create",
94-
"eslint": "8.57.0",
95-
"eslint-config-prettier": "9.1.0",
96-
"eslint-plugin-prettier": "5.1.3",
97-
"eslint-plugin-react": "7.34.1",
98-
"eslint-plugin-react-hooks": "4.6.0",
99-
"eslint-plugin-storybook": "0.8.0",
100-
"husky": "9.0.11",
101-
"jsdom": "24.0.0",
102-
"postcss": "8.4.35",
103-
"prettier": "3.2.5",
104-
"prettier-plugin-tailwindcss": "0.5.12",
105-
"react": "18.3.1",
106-
"react-dom": "18.3.1",
107-
"react-router-dom": "6.21.1",
108-
"storybook": "8.0.0",
109-
"storybook-addon-remix-react-router": "3.0.0",
110-
"tailwindcss": "3.4.1",
111-
"typescript": "5.4.2",
112-
"vite": "5.2.11",
113-
"vite-plugin-dts": "3.7.3",
114-
"vite-tsconfig-paths": "4.3.2",
115-
"vitest": "1.4.0"
97+
"eslint": "9.21.0",
98+
"eslint-config-prettier": "10.0.2",
99+
"eslint-plugin-prettier": "5.2.3",
100+
"eslint-plugin-react": "7.37.1",
101+
"eslint-plugin-react-hooks": "5.2.0",
102+
"eslint-plugin-storybook": "0.11.3",
103+
"globals": "16.0.0",
104+
"husky": "9.1.7",
105+
"jsdom": "26.0.0",
106+
"postcss": "8.5.3",
107+
"prettier": "3.5.3",
108+
"prettier-plugin-tailwindcss": "0.6.11",
109+
"react": "19.0.0",
110+
"react-dom": "19.0.0",
111+
"react-router-dom": "7.2.0",
112+
"storybook": "8.6.3",
113+
"storybook-addon-remix-react-router": "4.0.1",
114+
"tailwindcss": "4.0.9",
115+
"typescript": "5.8.2",
116+
"typescript-eslint": "8.26.0",
117+
"vite": "6.2.0",
118+
"vite-plugin-dts": "4.5.3",
119+
"vite-plugin-eslint": "1.8.1",
120+
"vite-tsconfig-paths": "5.1.4",
121+
"vitest": "3.0.7"
116122
},
117123
"dependencies": {
118124
"@popperjs/core": "2.11.8",
119125
"@programmer_network/ajv": "1.0.4",
120-
"@storybook/test": "8.0.0",
121-
"@tiptap/core": "2.2.4",
122-
"@tiptap/extension-blockquote": "2.2.4",
123-
"@tiptap/extension-bold": "2.2.4",
124-
"@tiptap/extension-bullet-list": "2.2.4",
125-
"@tiptap/extension-code": "2.2.4",
126-
"@tiptap/extension-code-block": "2.2.4",
127-
"@tiptap/extension-color": "2.2.4",
128-
"@tiptap/extension-document": "2.2.4",
129-
"@tiptap/extension-dropcursor": "2.2.4",
130-
"@tiptap/extension-hard-break": "2.2.4",
131-
"@tiptap/extension-heading": "2.2.4",
132-
"@tiptap/extension-history": "2.2.4",
133-
"@tiptap/extension-image": "2.2.4",
134-
"@tiptap/extension-italic": "2.2.4",
135-
"@tiptap/extension-link": "2.2.4",
136-
"@tiptap/extension-list-item": "2.2.4",
137-
"@tiptap/extension-mention": "2.2.4",
138-
"@tiptap/extension-ordered-list": "2.2.4",
139-
"@tiptap/extension-paragraph": "2.2.4",
140-
"@tiptap/extension-placeholder": "2.2.4",
141-
"@tiptap/extension-strike": "2.2.4",
142-
"@tiptap/extension-text": "2.2.4",
143-
"@tiptap/extension-text-style": "2.2.4",
144-
"@tiptap/extension-youtube": "2.2.4",
145-
"@tiptap/react": "2.2.4",
146-
"@tiptap/suggestion": "2.2.4",
147-
"boring-avatars": "1.10.1",
126+
"@storybook/test": "8.6.3",
127+
"@tailwindcss/vite": "4.0.9",
128+
"@tiptap/core": "2.11.5",
129+
"@tiptap/extension-blockquote": "2.11.5",
130+
"@tiptap/extension-bold": "2.11.5",
131+
"@tiptap/extension-bullet-list": "2.11.5",
132+
"@tiptap/extension-code": "2.11.5",
133+
"@tiptap/extension-code-block": "2.11.5",
134+
"@tiptap/extension-color": "2.11.5",
135+
"@tiptap/extension-document": "2.11.5",
136+
"@tiptap/extension-dropcursor": "2.11.5",
137+
"@tiptap/extension-hard-break": "2.11.5",
138+
"@tiptap/extension-heading": "2.11.5",
139+
"@tiptap/extension-history": "2.11.5",
140+
"@tiptap/extension-image": "2.11.5",
141+
"@tiptap/extension-italic": "2.11.5",
142+
"@tiptap/extension-link": "2.11.5",
143+
"@tiptap/extension-list-item": "2.11.5",
144+
"@tiptap/extension-mention": "2.11.5",
145+
"@tiptap/extension-ordered-list": "2.11.5",
146+
"@tiptap/extension-paragraph": "2.11.5",
147+
"@tiptap/extension-placeholder": "2.11.5",
148+
"@tiptap/extension-strike": "2.11.5",
149+
"@tiptap/extension-text": "2.11.5",
150+
"@tiptap/extension-text-style": "2.11.5",
151+
"@tiptap/extension-youtube": "2.11.5",
152+
"@tiptap/react": "2.11.5",
153+
"@tiptap/suggestion": "2.11.5",
154+
"boring-avatars": "1.11.2",
148155
"classnames": "2.5.1",
156+
"eslint-plugin-import": "2.31.0",
149157
"prosemirror-state": "1.4.3",
150158
"react-colorful": "5.6.1",
151159
"react-copy-to-clipboard": "5.1.0",
152-
"react-datepicker": "7.5.0",
160+
"react-datepicker": "8.1.0",
153161
"react-image-crop": "11.0.7",
154-
"react-select": "5.8.0",
155-
"react-select-async-paginate": "0.7.3",
162+
"react-select": "5.10.0",
163+
"react-select-async-paginate": "0.7.9",
156164
"react-step-wizard": "5.3.11",
157-
"react-tooltip": "5.26.3",
158-
"sanitize-html": "2.12.1",
165+
"react-tooltip": "5.28.0",
166+
"sanitize-html": "2.14.0",
159167
"tippy.js": "6.3.7"
160168
},
161169
"peerDependencies": {
162-
"react": ">=18.2.0",
163-
"react-dom": ">=18.2.0",
164-
"react-router-dom": ">=6.22.3"
170+
"react": ">=19.0.0",
171+
"react-dom": ">=19.0.0",
172+
"react-router-dom": ">=7.2.0"
165173
}
166174
}

0 commit comments

Comments
 (0)