Skip to content

chore: chore: add SVGR to appsmith-icon package, add processing for custom icons, update date-fns #37115

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KelvinOm merged 1 commit into from
Oct 28, 2024
Merged

chore: chore: add SVGR to appsmith-icon package, add processing for custom icons, update date-fns #37115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/client/cypress/e2e/Regression/ClientSide/Widgets/Datepicker/DatePicker3_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
propPane,
} from "../../../../../support/Objects/ObjectsCore";

import { format } from "date-fns";
import { format } from "date-fns/format.cjs";
import { datePickerlocators } from "../../../../../locators/WidgetLocators";
import EditorNavigation, {
EntityType,
Expand Down
2 changes: 1 addition & 1 deletion app/client/jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ module.exports = {
moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node", "css"],
moduleDirectories: ["node_modules", "src", "test"],
transformIgnorePatterns: [
"<rootDir>/node_modules/(?!codemirror|konva|react-dnd|dnd-core|@babel|(@blueprintjs)|@github|lodash-es|@draft-js-plugins|react-documents|linkedom|assert-never|axios|usehooks-ts)",
"<rootDir>/node_modules/(?!codemirror|konva|react-dnd|dnd-core|@babel|(@blueprintjs)|@github|lodash-es|@draft-js-plugins|react-documents|linkedom|assert-never|axios|usehooks-ts|date-fns)",
],
moduleNameMapper: {
"\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
Expand Down
2 changes: 1 addition & 1 deletion app/client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@
"cypress-log-to-output": "^1.1.2",
"cypress-repeat-pro": "^1.0.1",
"d3-geo": "^3.1.0",
"date-fns": "2.30.0",
"date-fns": "^4.1.0",
"dayjs": "^1.10.6",
"deep-diff": "^1.0.2",
"downloadjs": "^1.4.7",
Expand Down
2 changes: 2 additions & 0 deletions app/client/packages/icons/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
},
"devDependencies": {
"@svgr/core": "^8.1.0",
"@svgr/plugin-jsx": "^8.1.0",
"fast-glob": "^3.3.2",
"figmagic": "^4.5.13",
"fs-extra": "^11.2.0",
Expand Down
4 changes: 4 additions & 0 deletions app/client/packages/icons/src/components/CustomIcons/AIAvatarCustomIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import * as React from "react";
import type { SVGProps } from "react";
const AIAvatarCustomIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}><rect width={23} height={23} x={0.5} y={0.5} fill="#FFF7F4" rx={1.5} /><rect width={23} height={23} x={0.5} y={0.5} stroke="#FFE9E0" rx={1.5} /><path fill="#FF6D2D" d="M4.5 11a2 2 0 1 0 0 4v-4M19.5 11a2 2 0 1 1 0 4v-4" /><rect width={15} height={10} x={4.5} y={8} fill="#fff" stroke="#000" strokeMiterlimit={10} strokeWidth={0.149} rx={3} /><rect width={12} height={7} x={6} y={9.5} fill="#fff" stroke="#000" strokeMiterlimit={10} strokeWidth={0.5} rx={1.5} /><circle cx={9} cy={12} r={1} fill="#000" /><circle cx={15} cy={12} r={1} fill="#000" /><path fill="#000" d="M11.5 5.5h1V8h-1z" /><circle cx={12} cy={4.5} r={1.5} fill="#fff" stroke="#000" strokeMiterlimit={10} strokeWidth={0.149} /><path stroke="#000" strokeLinecap="round" strokeWidth={0.5} d="m10 14 .209.232A2.426 2.426 0 0 0 14 14v0" /></svg>;
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve SVG readability and accessibility.

The current implementation could benefit from better formatting and accessibility support.

Consider applying these improvements:

-const AIAvatarCustomIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}><rect width={23} height={23} x={0.5} y={0.5} fill="#FFF7F4" rx={1.5} /><rect width={23} height={23} x={0.5} y={0.5} stroke="#FFE9E0" rx={1.5} /><path fill="#FF6D2D" d="M4.5 11a2 2 0 1 0 0 4v-4M19.5 11a2 2 0 1 1 0 4v-4" /><rect width={15} height={10} x={4.5} y={8} fill="#fff" stroke="#000" strokeMiterlimit={10} strokeWidth={0.149} rx={3} /><rect width={12} height={7} x={6} y={9.5} fill="#fff" stroke="#000" strokeMiterlimit={10} strokeWidth={0.5} rx={1.5} /><circle cx={9} cy={12} r={1} fill="#000" /><circle cx={15} cy={12} r={1} fill="#000" /><path fill="#000" d="M11.5 5.5h1V8h-1z" /><circle cx={12} cy={4.5} r={1.5} fill="#fff" stroke="#000" strokeMiterlimit={10} strokeWidth={0.149} /><path stroke="#000" strokeLinecap="round" strokeWidth={0.5} d="m10 14 .209.232A2.426 2.426 0 0 0 14 14v0" /></svg>;
+const AIAvatarCustomIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    aria-label="AI Avatar"
+    role="img"
+    {...props}
+  >
+    <rect width={23} height={23} x={0.5} y={0.5} fill="#FFF7F4" rx={1.5} />
+    <rect width={23} height={23} x={0.5} y={0.5} stroke="#FFE9E0" rx={1.5} />
+    <path fill="#FF6D2D" d="M4.5 11a2 2 0 1 0 0 4v-4M19.5 11a2 2 0 1 1 0 4v-4" />
+    <rect
+      width={15}
+      height={10}
+      x={4.5}
+      y={8}
+      fill="#fff"
+      stroke="#000"
+      strokeMiterlimit={10}
+      strokeWidth={0.149}
+      rx={3}
+    />
+    <rect
+      width={12}
+      height={7}
+      x={6}
+      y={9.5}
+      fill="#fff"
+      stroke="#000"
+      strokeMiterlimit={10}
+      strokeWidth={0.5}
+      rx={1.5}
+    />
+    <circle cx={9} cy={12} r={1} fill="#000" />
+    <circle cx={15} cy={12} r={1} fill="#000" />
+    <path fill="#000" d="M11.5 5.5h1V8h-1z" />
+    <circle
+      cx={12}
+      cy={4.5}
+      r={1.5}
+      fill="#fff"
+      stroke="#000"
+      strokeMiterlimit={10}
+      strokeWidth={0.149}
+    />
+    <path
+      stroke="#000"
+      strokeLinecap="round"
+      strokeWidth={0.5}
+      d="m10 14 .209.232A2.426 2.426 0 0 0 14 14v0"
+    />
+  </svg>
+);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const AIAvatarCustomIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}><rect width={23} height={23} x={0.5} y={0.5} fill="#FFF7F4" rx={1.5} /><rect width={23} height={23} x={0.5} y={0.5} stroke="#FFE9E0" rx={1.5} /><path fill="#FF6D2D" d="M4.5 11a2 2 0 1 0 0 4v-4M19.5 11a2 2 0 1 1 0 4v-4" /><rect width={15} height={10} x={4.5} y={8} fill="#fff" stroke="#000" strokeMiterlimit={10} strokeWidth={0.149} rx={3} /><rect width={12} height={7} x={6} y={9.5} fill="#fff" stroke="#000" strokeMiterlimit={10} strokeWidth={0.5} rx={1.5} /><circle cx={9} cy={12} r={1} fill="#000" /><circle cx={15} cy={12} r={1} fill="#000" /><path fill="#000" d="M11.5 5.5h1V8h-1z" /><circle cx={12} cy={4.5} r={1.5} fill="#fff" stroke="#000" strokeMiterlimit={10} strokeWidth={0.149} /><path stroke="#000" strokeLinecap="round" strokeWidth={0.5} d="m10 14 .209.232A2.426 2.426 0 0 0 14 14v0" /></svg>;
const AIAvatarCustomIcon = (props: SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
aria-label="AI Avatar"
role="img"
{...props}
>
<rect width={23} height={23} x={0.5} y={0.5} fill="#FFF7F4" rx={1.5} />
<rect width={23} height={23} x={0.5} y={0.5} stroke="#FFE9E0" rx={1.5} />
<path fill="#FF6D2D" d="M4.5 11a2 2 0 1 0 0 4v-4M19.5 11a2 2 0 1 1 0 4v-4" />
<rect
width={15}
height={10}
x={4.5}
y={8}
fill="#fff"
stroke="#000"
strokeMiterlimit={10}
strokeWidth={0.149}
rx={3}
/>
<rect
width={12}
height={7}
x={6}
y={9.5}
fill="#fff"
stroke="#000"
strokeMiterlimit={10}
strokeWidth={0.5}
rx={1.5}
/>
<circle cx={9} cy={12} r={1} fill="#000" />
<circle cx={15} cy={12} r={1} fill="#000" />
<path fill="#000" d="M11.5 5.5h1V8h-1z" />
<circle
cx={12}
cy={4.5}
r={1.5}
fill="#fff"
stroke="#000"
strokeMiterlimit={10}
strokeWidth={0.149}
/>
<path
stroke="#000"
strokeLinecap="round"
strokeWidth={0.5}
d="m10 14 .209.232A2.426 2.426 0 0 0 14 14v0"
/>
</svg>
);

export { AIAvatarCustomIcon };
6 changes: 4 additions & 2 deletions app/client/packages/icons/src/components/Icons/AIChatIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
import React from "react";
export const AIChatIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="none"><path fill="#000" fill-opacity=".25" fill-rule="evenodd" d="M1.5 1A1.5 1.5 0 0 0 0 2.5v8A1.5 1.5 0 0 0 1.5 12H2V4.5A1.5 1.5 0 0 1 3.5 3H13v-.5A1.5 1.5 0 0 0 11.5 1z" clip-rule="evenodd"/><mask id="a" fill="#fff"><path fill-rule="evenodd" d="M3.5 3A1.5 1.5 0 0 0 2 4.5v8A1.5 1.5 0 0 0 3.5 14H10l2.146 2.146a.5.5 0 0 0 .854-.353V14h.5a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 13.5 3z" clip-rule="evenodd"/></mask><path fill="#000" d="m10 14 .707-.707-.293-.293H10zm3 0v-1h-1v1zM3 4.5a.5.5 0 0 1 .5-.5V2A2.5 2.5 0 0 0 1 4.5zm0 8v-8H1v8zm.5.5a.5.5 0 0 1-.5-.5H1A2.5 2.5 0 0 0 3.5 15zm6.5 0H3.5v2H10zm2.854 2.44-2.147-2.147-1.414 1.414 2.146 2.147zm-.854.353a.5.5 0 0 1 .854-.354l-1.415 1.415c.945.945 2.561.275 2.561-1.061zM12 14v1.793h2V14zm1.5-1H13v2h.5zm.5-.5a.5.5 0 0 1-.5.5v2a2.5 2.5 0 0 0 2.5-2.5zm0-8v8h2v-8zm-.5-.5a.5.5 0 0 1 .5.5h2A2.5 2.5 0 0 0 13.5 2zm-10 0h10V2h-10z" mask="url(#a)"/><path stroke="#000" stroke-opacity=".75" d="m8.536 6.27.6 1.402.08.184.183.078 1.403.602-1.403.6-.184.08-.078.183-.601 1.403-.602-1.403-.078-.184-.184-.078-1.403-.601 1.403-.602.184-.078.078-.184z"/></svg>;
import * as React from "react";
import type { SVGProps } from "react";
const AIChatIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={17} fill="none" {...props}><path fill="#000" fillOpacity={0.25} fillRule="evenodd" d="M1.5 1A1.5 1.5 0 0 0 0 2.5v8A1.5 1.5 0 0 0 1.5 12H2V4.5A1.5 1.5 0 0 1 3.5 3H13v-.5A1.5 1.5 0 0 0 11.5 1z" clipRule="evenodd" /><mask id="a" fill="#fff"><path fillRule="evenodd" d="M3.5 3A1.5 1.5 0 0 0 2 4.5v8A1.5 1.5 0 0 0 3.5 14H10l2.146 2.146a.5.5 0 0 0 .854-.353V14h.5a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 13.5 3z" clipRule="evenodd" /></mask><path fill="#000" d="m10 14 .707-.707-.293-.293H10zm3 0v-1h-1v1zM3 4.5a.5.5 0 0 1 .5-.5V2A2.5 2.5 0 0 0 1 4.5zm0 8v-8H1v8zm.5.5a.5.5 0 0 1-.5-.5H1A2.5 2.5 0 0 0 3.5 15zm6.5 0H3.5v2H10zm2.854 2.44-2.147-2.147-1.414 1.414 2.146 2.147zm-.854.353a.5.5 0 0 1 .854-.354l-1.415 1.415c.945.945 2.561.275 2.561-1.061zM12 14v1.793h2V14zm1.5-1H13v2h.5zm.5-.5a.5.5 0 0 1-.5.5v2a2.5 2.5 0 0 0 2.5-2.5zm0-8v8h2v-8zm-.5-.5a.5.5 0 0 1 .5.5h2A2.5 2.5 0 0 0 13.5 2zm-10 0h10V2h-10z" mask="url(#a)" /><path stroke="#000" strokeOpacity={0.75} d="m8.536 6.27.6 1.402.08.184.183.078 1.403.602-1.403.6-.184.08-.078.183-.601 1.403-.602-1.403-.078-.184-.184-.078-1.403-.601 1.403-.602.184-.078.078-.184z" /></svg>;
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider memoizing the static SVG component.

Since this is a static SVG component, wrapping it with React.memo could prevent unnecessary re-renders when used in parent components.

-const AIChatIcon = (props: SVGProps<SVGSVGElement>) => <svg
+const AIChatIcon = React.memo((props: SVGProps<SVGSVGElement>) => <svg
 xmlns="http://www.w3.org/2000/svg" width={16} height={17} fill="none" {...props}><path fill="#000" fillOpacity={0.25} fillRule="evenodd" d="M1.5 1A1.5 1.5 0 0 0 0 2.5v8A1.5 1.5 0 0 0 1.5 12H2V4.5A1.5 1.5 0 0 1 3.5 3H13v-.5A1.5 1.5 0 0 0 11.5 1z" clipRule="evenodd" /><mask id="a" fill="#fff"><path fillRule="evenodd" d="M3.5 3A1.5 1.5 0 0 0 2 4.5v8A1.5 1.5 0 0 0 3.5 14H10l2.146 2.146a.5.5 0 0 0 .854-.353V14h.5a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 13.5 3z" clipRule="evenodd" /></mask><path fill="#000" d="m10 14 .707-.707-.293-.293H10zm3 0v-1h-1v1zM3 4.5a.5.5 0 0 1 .5-.5V2A2.5 2.5 0 0 0 1 4.5zm0 8v-8H1v8zm.5.5a.5.5 0 0 1-.5-.5H1A2.5 2.5 0 0 0 3.5 15zm6.5 0H3.5v2H10zm2.854 2.44-2.147-2.147-1.414 1.414 2.146 2.147zm-.854.353a.5.5 0 0 1 .854-.354l-1.415 1.415c.945.945 2.561.275 2.561-1.061zM12 14v1.793h2V14zm1.5-1H13v2h.5zm.5-.5a.5.5 0 0 1-.5.5v2a2.5 2.5 0 0 0 2.5-2.5zm0-8v8h2v-8zm-.5-.5a.5.5 0 0 1 .5.5h2A2.5 2.5 0 0 0 13.5 2zm-10 0h10V2h-10z" mask="url(#a)" /><path stroke="#000" strokeOpacity={0.75} d="m8.536 6.27.6 1.402.08.184.183.078 1.403.602-1.403.6-.184.08-.078.183-.601 1.403-.602-1.403-.078-.184-.184-.078-1.403-.601 1.403-.602.184-.078.078-.184z" /></svg>);

Committable suggestion was skipped due to low confidence.

export { AIChatIcon };
6 changes: 4 additions & 2 deletions app/client/packages/icons/src/components/Icons/ButtonIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
import React from "react";
export const ButtonIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M14.5 8.5v3a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-3"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 2.5h-10a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M8.5 5.5v2m0 2v-2m3-2L9.793 7.207a1 1 0 0 1-.707.293H8.5M8.5 9.5v-4m3 4-2-2M3.5 8V7a1.5 1.5 0 1 1 3 0v1a1.5 1.5 0 1 1-3 0"/></svg>;
import * as React from "react";
import type { SVGProps } from "react";
const ButtonIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M14.5 8.5v3a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-3" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M12.5 2.5h-10a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M8.5 5.5v2m0 2v-2m3-2L9.793 7.207a1 1 0 0 1-.707.293H8.5M8.5 9.5v-4m3 4-2-2M3.5 8V7a1.5 1.5 0 1 1 3 0v1a1.5 1.5 0 1 1-3 0" /></svg>;
export { ButtonIcon };
6 changes: 4 additions & 2 deletions app/client/packages/icons/src/components/Icons/CheckboxGroupIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
import React from "react";
export const CheckboxGroupIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M5 6.5H2A1.5 1.5 0 0 1 .5 5V2A1.5 1.5 0 0 1 2 .5h3A1.5 1.5 0 0 1 6.5 2v3A1.5 1.5 0 0 1 5 6.5"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m2.5 3.5 1 1 1-2M8.5 2.5h6M8.5 12.5h4M5 14.5H2A1.5 1.5 0 0 1 .5 13v-3A1.5 1.5 0 0 1 2 8.5h3A1.5 1.5 0 0 1 6.5 10v3A1.5 1.5 0 0 1 5 14.5M8.5 4.5h4M8.5 10.5h6"/></svg>;
import * as React from "react";
import type { SVGProps } from "react";
const CheckboxGroupIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M5 6.5H2A1.5 1.5 0 0 1 .5 5V2A1.5 1.5 0 0 1 2 .5h3A1.5 1.5 0 0 1 6.5 2v3A1.5 1.5 0 0 1 5 6.5" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="m2.5 3.5 1 1 1-2M8.5 2.5h6M8.5 12.5h4M5 14.5H2A1.5 1.5 0 0 1 .5 13v-3A1.5 1.5 0 0 1 2 8.5h3A1.5 1.5 0 0 1 6.5 10v3A1.5 1.5 0 0 1 5 14.5M8.5 4.5h4M8.5 10.5h6" /></svg>;
export { CheckboxGroupIcon };
6 changes: 4 additions & 2 deletions app/client/packages/icons/src/components/Icons/CheckboxIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
import React from "react";
export const CheckboxIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M11.5 1.5h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m4.5 7.5 2 2 4-4"/></svg>;
import * as React from "react";
import type { SVGProps } from "react";
const CheckboxIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M11.5 1.5h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="m4.5 7.5 2 2 4-4" /></svg>;
export { CheckboxIcon };
6 changes: 4 additions & 2 deletions app/client/packages/icons/src/components/Icons/ComboboxSelectIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
import React from "react";
export const ComboboxSelectIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7M14.5 7.5l-1 1-1-1"/><circle cx="5.5" cy="7.5" r="2.079" stroke="#000"/><path fill="#000" d="m7.534 8.685-.424-.424-.849.849.424.424zm.042 1.74a.6.6 0 0 0 .848-.85zm-.89-.891.89.89.848-.848-.89-.89z"/></svg>;
import * as React from "react";
import type { SVGProps } from "react";
const ComboboxSelectIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7M14.5 7.5l-1 1-1-1" /><circle cx={5.5} cy={7.5} r={2.079} stroke="#000" /><path fill="#000" d="m7.534 8.685-.424-.424-.849.849.424.424zm.042 1.74a.6.6 0 0 0 .848-.85zm-.89-.891.89.89.848-.848-.89-.89z" /></svg>;
export { ComboboxSelectIcon };
6 changes: 4 additions & 2 deletions app/client/packages/icons/src/components/Icons/CurrencyInputIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
import React from "react";
export const CurrencyInputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M7.5 5.5h-3a1 1 0 0 0-1 1v0a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-3M5.5 10.5v-6"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/></svg>;
import * as React from "react";
import type { SVGProps } from "react";
const CurrencyInputIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M7.5 5.5h-3a1 1 0 0 0-1 1v0a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-3M5.5 10.5v-6" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7" /></svg>;
export { CurrencyInputIcon };
6 changes: 4 additions & 2 deletions app/client/packages/icons/src/components/Icons/DatePickerIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
import React from "react";
export const DatePickerIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 1.5h-10a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-10a1 1 0 0 0-1-1M9.5 5.5v8M5.5 5.5v8M1.5 5.5h12M1.5 9.5h12M4.5 3.5v-3m6 3v-3"/></svg>;
import * as React from "react";
import type { SVGProps } from "react";
const DatePickerIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M12.5 1.5h-10a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-10a1 1 0 0 0-1-1M9.5 5.5v8M5.5 5.5v8M1.5 5.5h12M1.5 9.5h12M4.5 3.5v-3m6 3v-3" /></svg>;
export { DatePickerIcon };
6 changes: 4 additions & 2 deletions app/client/packages/icons/src/components/Icons/EmailInputIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
import React from "react";
export const EmailInputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/><path stroke="#000" stroke-linecap="round" d="M6.5 8.5v-1a1 1 0 0 0-1-1v0a1 1 0 0 0-1 1v0a1 1 0 0 0 1 1zm0 0h.667c.736 0 1.333-.597 1.333-1.333v0A2.667 2.667 0 0 0 5.833 4.5H5.5a3 3 0 0 0-3 3v0a3 3 0 0 0 3 3h2"/></svg>;
import * as React from "react";
import type { SVGProps } from "react";
const EmailInputIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7" /><path stroke="#000" strokeLinecap="round" d="M6.5 8.5v-1a1 1 0 0 0-1-1v0a1 1 0 0 0-1 1v0a1 1 0 0 0 1 1zm0 0h.667c.736 0 1.333-.597 1.333-1.333v0A2.667 2.667 0 0 0 5.833 4.5H5.5a3 3 0 0 0-3 3v0a3 3 0 0 0 3 3h2" /></svg>;
export { EmailInputIcon };
6 changes: 4 additions & 2 deletions app/client/packages/icons/src/components/Icons/HeadingIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
import React from "react";
export const HeadingIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M.5 1.5h2m2 0h-2m0 0v12m-2 0h4M10.5 1.5h2m2 0h-2m0 0v12m-2 0h4M2.5 7.5h10"/></svg>;
import * as React from "react";
import type { SVGProps } from "react";
const HeadingIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M.5 1.5h2m2 0h-2m0 0v12m-2 0h4M10.5 1.5h2m2 0h-2m0 0v12m-2 0h4M2.5 7.5h10" /></svg>;
export { HeadingIcon };
6 changes: 4 additions & 2 deletions app/client/packages/icons/src/components/Icons/IconButtonIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
import React from "react";
export const IconButtonIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 2.5h-10a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M14.5 8.5v3a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-3"/><path stroke="#000" stroke-linecap="round" d="M5.5 7.5h4M7.5 9.5v-4"/></svg>;
import * as React from "react";
import type { SVGProps } from "react";
const IconButtonIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M12.5 2.5h-10a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M14.5 8.5v3a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-3" /><path stroke="#000" strokeLinecap="round" d="M5.5 7.5h4M7.5 9.5v-4" /></svg>;
export { IconButtonIcon };
6 changes: 4 additions & 2 deletions app/client/packages/icons/src/components/Icons/InlineButtonsIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
import React from "react";
export const InlineButtonsIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m11.5 7.5 1 1 1-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".75" d="m3.5 8.5 2-2m0 2-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5h-2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".75" d="M5.5 4.5h-2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2"/></svg>;
import * as React from "react";
import type { SVGProps } from "react";
const InlineButtonsIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="m11.5 7.5 1 1 1-2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.75} d="m3.5 8.5 2-2m0 2-2-2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5h-2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.75} d="M5.5 4.5h-2a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2" /></svg>;
export { InlineButtonsIcon };
6 changes: 4 additions & 2 deletions app/client/packages/icons/src/components/Icons/InputIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
import React from "react";
export const InputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m7.5 9.5-.5-1m-3.5 1 .5-1m0 0 1.5-3 1.5 3m-3 0h3"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/></svg>;
import * as React from "react";
import type { SVGProps } from "react";
const InputIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="m7.5 9.5-.5-1m-3.5 1 .5-1m0 0 1.5-3 1.5 3m-3 0h3" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7" /></svg>;
export { InputIcon };
6 changes: 4 additions & 2 deletions app/client/packages/icons/src/components/Icons/KeyValueIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
import React from "react";
export const KeyValueIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" stroke-width="2" d="M2 3h6"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M1.5 11.5h1m1 0h-1m-1-3 1-1v4M8.5 11.5h-3v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v0a1 1 0 0 0-1-1h-2M10.5 7.5h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-1M10.5 11.5h2a1 1 0 0 0 1-1v0a1 1 0 0 0-1-1h-1"/></svg>;
import * as React from "react";
import type { SVGProps } from "react";
const KeyValueIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} strokeWidth={2} d="M2 3h6" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M1.5 11.5h1m1 0h-1m-1-3 1-1v4M8.5 11.5h-3v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v0a1 1 0 0 0-1-1h-2M10.5 7.5h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-1M10.5 11.5h2a1 1 0 0 0 1-1v0a1 1 0 0 0-1-1h-1" /></svg>;
export { KeyValueIcon };
6 changes: 4 additions & 2 deletions app/client/packages/icons/src/components/Icons/MenuButtonIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
import React from "react";
export const MenuButtonIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 2.5h-10a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M14.5 8.5v3a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-3"/><path stroke="#000" stroke-linecap="round" d="M5.5 7.5h4M5.5 9.5h4M5.5 5.5h4"/></svg>;
import * as React from "react";
import type { SVGProps } from "react";
const MenuButtonIcon = (props: SVGProps<SVGSVGElement>) => <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M12.5 2.5h-10a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2" /><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.25} d="M14.5 8.5v3a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-3" /><path stroke="#000" strokeLinecap="round" d="M5.5 7.5h4M5.5 9.5h4M5.5 5.5h4" /></svg>;
export { MenuButtonIcon };
Loading