From 2adbb57c4b42930255876830e94459f00e4975ae Mon Sep 17 00:00:00 2001 From: Hunain Bin Sajid Date: Wed, 20 Mar 2024 23:36:17 +0500 Subject: [PATCH] refactor: remove className from icons and add styled-system --- package-lock.json | 136 +++++++++++++++++++- package.json | 4 +- src/components/credentialCard.tsx | 22 ++-- src/components/identifierCard.tsx | 4 +- src/components/shared/icons/auto-signin.tsx | 16 ++- src/components/shared/icons/copy.tsx | 11 +- src/components/shared/icons/credential.tsx | 11 +- src/components/shared/icons/eye-off.tsx | 11 +- src/components/shared/icons/eye.tsx | 11 +- src/components/shared/icons/identifier.tsx | 11 +- src/components/shared/icons/loader.tsx | 6 + src/components/shared/icons/lock.tsx | 11 +- src/components/shared/icons/popup-arrow.tsx | 12 +- src/components/shared/icons/revoked.tsx | 11 +- src/components/shared/icons/setting.tsx | 11 +- src/components/shared/icons/signin.tsx | 11 +- src/components/shared/icons/valid.tsx | 11 +- src/components/sidebar.tsx | 8 +- src/components/signinCard.tsx | 4 +- src/components/ui/box/box.tsx | 20 +++ src/components/ui/box/index.ts | 1 + src/components/ui/flex/flex.tsx | 20 +++ src/components/ui/flex/index.ts | 1 + src/components/ui/index.ts | 4 +- src/components/ui/loader/loader.tsx | 7 +- src/pages/dialog/popupPrompt.tsx | 5 +- src/pages/dialog/signin.tsx | 2 +- src/screens/signin/index.tsx | 2 +- src/screens/signup/signup.tsx | 4 +- 29 files changed, 331 insertions(+), 57 deletions(-) create mode 100644 src/components/ui/box/box.tsx create mode 100644 src/components/ui/box/index.ts create mode 100644 src/components/ui/flex/flex.tsx create mode 100644 src/components/ui/flex/index.ts diff --git a/package-lock.json b/package-lock.json index 2edb311a..8cfc7bfe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "react-intl": "^6.6.2", "react-tooltip": "^5.26.2", "styled-components": "^6.1.8", + "styled-system": "^5.1.5", "webextension-polyfill": "^0.10.0" }, "devDependencies": { @@ -24,6 +25,7 @@ "@types/node": "^18.11.18", "@types/react": "^18.0.27", "@types/react-dom": "^18.0.10", + "@types/styled-system": "^5.1.22", "@types/webextension-polyfill": "^0.10.0", "@typescript-eslint/eslint-plugin": "^5.49.0", "@typescript-eslint/parser": "^5.49.0", @@ -1068,6 +1070,108 @@ } } }, + "node_modules/@styled-system/background": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/background/-/background-5.1.2.tgz", + "integrity": "sha512-jtwH2C/U6ssuGSvwTN3ri/IyjdHb8W9X/g8Y0JLcrH02G+BW3OS8kZdHphF1/YyRklnrKrBT2ngwGUK6aqqV3A==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/border": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@styled-system/border/-/border-5.1.5.tgz", + "integrity": "sha512-JvddhNrnhGigtzWRCVuAHepniyVi6hBlimxWDVAdcTuk7aRn9BYJUwfHslURtwYFsF5FoEs8Zmr1oZq2M1AP0A==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/color": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/color/-/color-5.1.2.tgz", + "integrity": "sha512-1kCkeKDZkt4GYkuFNKc7vJQMcOmTl3bJY3YBUs7fCNM6mMYJeT1pViQ2LwBSBJytj3AB0o4IdLBoepgSgGl5MA==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/core": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/core/-/core-5.1.2.tgz", + "integrity": "sha512-XclBDdNIy7OPOsN4HBsawG2eiWfCcuFt6gxKn1x4QfMIgeO6TOlA2pZZ5GWZtIhCUqEPTgIBta6JXsGyCkLBYw==", + "dependencies": { + "object-assign": "^4.1.1" + } + }, + "node_modules/@styled-system/css": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@styled-system/css/-/css-5.1.5.tgz", + "integrity": "sha512-XkORZdS5kypzcBotAMPBoeckDs9aSZVkvrAlq5K3xP8IMAUek+x2O4NtwoSgkYkWWzVBu6DGdFZLR790QWGG+A==" + }, + "node_modules/@styled-system/flexbox": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/flexbox/-/flexbox-5.1.2.tgz", + "integrity": "sha512-6hHV52+eUk654Y1J2v77B8iLeBNtc+SA3R4necsu2VVinSD7+XY5PCCEzBFaWs42dtOEDIa2lMrgL0YBC01mDQ==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/grid": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/grid/-/grid-5.1.2.tgz", + "integrity": "sha512-K3YiV1KyHHzgdNuNlaw8oW2ktMuGga99o1e/NAfTEi5Zsa7JXxzwEnVSDSBdJC+z6R8WYTCYRQC6bkVFcvdTeg==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/layout": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/layout/-/layout-5.1.2.tgz", + "integrity": "sha512-wUhkMBqSeacPFhoE9S6UF3fsMEKFv91gF4AdDWp0Aym1yeMPpqz9l9qS/6vjSsDPF7zOb5cOKC3tcKKOMuDCPw==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/position": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/position/-/position-5.1.2.tgz", + "integrity": "sha512-60IZfMXEOOZe3l1mCu6sj/2NAyUmES2kR9Kzp7s2D3P4qKsZWxD1Se1+wJvevb+1TP+ZMkGPEYYXRyU8M1aF5A==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/shadow": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/shadow/-/shadow-5.1.2.tgz", + "integrity": "sha512-wqniqYb7XuZM7K7C0d1Euxc4eGtqEe/lvM0WjuAFsQVImiq6KGT7s7is+0bNI8O4Dwg27jyu4Lfqo/oIQXNzAg==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/space": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/space/-/space-5.1.2.tgz", + "integrity": "sha512-+zzYpR8uvfhcAbaPXhH8QgDAV//flxqxSjHiS9cDFQQUSznXMQmxJegbhcdEF7/eNnJgHeIXv1jmny78kipgBA==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/typography": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@styled-system/typography/-/typography-5.1.2.tgz", + "integrity": "sha512-BxbVUnN8N7hJ4aaPOd7wEsudeT7CxarR+2hns8XCX1zp0DFfbWw4xYa/olA0oQaqx7F1hzDg+eRaGzAJbF+jOg==", + "dependencies": { + "@styled-system/core": "^5.1.2" + } + }, + "node_modules/@styled-system/variant": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@styled-system/variant/-/variant-5.1.5.tgz", + "integrity": "sha512-Yn8hXAFoWIro8+Q5J8YJd/mP85Teiut3fsGVR9CAxwgNfIAiqlYxsk5iHU7VHJks/0KjL4ATSjmbtCDC/4l1qw==", + "dependencies": { + "@styled-system/core": "^5.1.2", + "@styled-system/css": "^5.1.5" + } + }, "node_modules/@tsconfig/node10": { "version": "1.0.9", "dev": true, @@ -1219,6 +1323,15 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/styled-system": { + "version": "5.1.22", + "resolved": "https://registry.npmjs.org/@types/styled-system/-/styled-system-5.1.22.tgz", + "integrity": "sha512-NbRp37zWcrf/+Qf2NumdyZfhSx1dzJ50zgfKvnezYJx1HTRUMVYY8jtWvK1eoIAa6F5sXwHLhE8oXNu15ThBAA==", + "dev": true, + "dependencies": { + "csstype": "^3.0.2" + } + }, "node_modules/@types/stylis": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz", @@ -4636,7 +4749,6 @@ }, "node_modules/object-assign": { "version": "4.1.1", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -5912,6 +6024,26 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" }, + "node_modules/styled-system": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.1.5.tgz", + "integrity": "sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A==", + "dependencies": { + "@styled-system/background": "^5.1.2", + "@styled-system/border": "^5.1.5", + "@styled-system/color": "^5.1.2", + "@styled-system/core": "^5.1.2", + "@styled-system/flexbox": "^5.1.2", + "@styled-system/grid": "^5.1.2", + "@styled-system/layout": "^5.1.2", + "@styled-system/position": "^5.1.2", + "@styled-system/shadow": "^5.1.2", + "@styled-system/space": "^5.1.2", + "@styled-system/typography": "^5.1.2", + "@styled-system/variant": "^5.1.5", + "object-assign": "^4.1.1" + } + }, "node_modules/stylis": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz", @@ -6267,7 +6399,7 @@ }, "node_modules/typescript": { "version": "4.9.5", - "devOptional": true, + "dev": true, "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", diff --git a/package.json b/package.json index d7971751..4f8f8b6a 100755 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ }, "scripts": { "build": "vite build", - "build:firefox":"BROWSER=firefox vite build", + "build:firefox": "BROWSER=firefox vite build", "dev": "nodemon" }, "type": "module", @@ -21,6 +21,7 @@ "react-intl": "^6.6.2", "react-tooltip": "^5.26.2", "styled-components": "^6.1.8", + "styled-system": "^5.1.5", "webextension-polyfill": "^0.10.0" }, "devDependencies": { @@ -30,6 +31,7 @@ "@types/node": "^18.11.18", "@types/react": "^18.0.27", "@types/react-dom": "^18.0.10", + "@types/styled-system": "^5.1.22", "@types/webextension-polyfill": "^0.10.0", "@typescript-eslint/eslint-plugin": "^5.49.0", "@typescript-eslint/parser": "^5.49.0", diff --git a/src/components/credentialCard.tsx b/src/components/credentialCard.tsx index 84391943..7069d16e 100644 --- a/src/components/credentialCard.tsx +++ b/src/components/credentialCard.tsx @@ -1,5 +1,5 @@ import { useIntl } from "react-intl"; -import { Text, Subtext, Card } from "@components/ui"; +import { Text, Subtext, Card, Flex, Box } from "@components/ui"; import CredentialIcon from "@components/shared/icons/credential"; import ValidIcon from "@components/shared/icons/valid"; import RevokedIcon from "@components/shared/icons/revoked"; @@ -26,7 +26,7 @@ export function CredentialCard({ credential }: ICredentialCard): JSX.Element { return ( <> -
+
{credential.schema.title} @@ -35,9 +35,9 @@ export function CredentialCard({ credential }: ICredentialCard): JSX.Element { {credential.schema.credentialType}
- -
-
+ + + {credential.schema.description} @@ -49,9 +49,9 @@ export function CredentialCard({ credential }: ICredentialCard): JSX.Element { -
-
-
+ + +
{formatMessage({ id: "credential.lastUsed.label" })}{" "} @@ -61,16 +61,16 @@ export function CredentialCard({ credential }: ICredentialCard): JSX.Element {
{credential.status?.et === "iss" ? (
- +

{formatMessage({ id: "credential.valid" })}

) : (
- +

{formatMessage({ id: "credential.revoked" })}

)} -
+ ); diff --git a/src/components/identifierCard.tsx b/src/components/identifierCard.tsx index 807fc5b2..0514ef25 100644 --- a/src/components/identifierCard.tsx +++ b/src/components/identifierCard.tsx @@ -25,7 +25,7 @@ export function IdentifierCard({ aid }: IIdentifierCard): JSX.Element {
- +
@@ -48,7 +48,7 @@ export function IdentifierCard({ aid }: IIdentifierCard): JSX.Element { navigator.clipboard.writeText(aid.prefix); }} > - +
diff --git a/src/components/shared/icons/auto-signin.tsx b/src/components/shared/icons/auto-signin.tsx index dddf7dab..154a5afd 100644 --- a/src/components/shared/icons/auto-signin.tsx +++ b/src/components/shared/icons/auto-signin.tsx @@ -1,6 +1,18 @@ -export default function AutoSignin({ className }: { className?: string }) { +export default function AutoSignin({ + size, + scale = 4, +}: { + size: number; + scale?: number; +}) { return ( - + diff --git a/src/components/shared/icons/lock.tsx b/src/components/shared/icons/lock.tsx index 204a8251..9041d3da 100644 --- a/src/components/shared/icons/lock.tsx +++ b/src/components/shared/icons/lock.tsx @@ -1,4 +1,10 @@ -export default function Lock({ className }: { className?: string }) { +export default function Lock({ + size, + scale = 4, +}: { + size: number; + scale?: number; +}) { return ( diff --git a/src/components/shared/icons/revoked.tsx b/src/components/shared/icons/revoked.tsx index 7696ed4d..c7ae4936 100644 --- a/src/components/shared/icons/revoked.tsx +++ b/src/components/shared/icons/revoked.tsx @@ -1,4 +1,10 @@ -export default function Revoked({ className }: { className?: string }) { +export default function Revoked({ + size, + scale = 4, +}: { + size: number; + scale?: number; +}) { return ( , + icon: , title: , }, { id: SIDEBAR_KEYS.credentials, - icon: , + icon: , title: , }, { id: SIDEBAR_KEYS.signin, - icon: , + icon: , title: , }, ]; @@ -110,7 +110,7 @@ export function Sidebar(props: ISidebar): JSX.Element { onClick={props.onSignout} className={`flex items-center p-2 rounded-lg group`} > - + {formatMessage({ id: "action.disconnect" })} diff --git a/src/components/signinCard.tsx b/src/components/signinCard.tsx index 00973ccb..9799a81f 100644 --- a/src/components/signinCard.tsx +++ b/src/components/signinCard.tsx @@ -28,7 +28,7 @@ export function SigninCard({ {signin?.domain} - +
@@ -59,7 +59,7 @@ export function SigninCard({ } + icon={} />
diff --git a/src/components/ui/box/box.tsx b/src/components/ui/box/box.tsx new file mode 100644 index 00000000..8cd676bf --- /dev/null +++ b/src/components/ui/box/box.tsx @@ -0,0 +1,20 @@ +import styled from "styled-components"; +import { + space, + layout, + typography, + color, + SpaceProps, + TypographyProps, +} from "styled-system"; + +type TBox = SpaceProps & TypographyProps; + +export const Box = styled.div` + ${space} + ${layout} + ${typography} + ${color} +`; + +Box.displayName = "Box"; diff --git a/src/components/ui/box/index.ts b/src/components/ui/box/index.ts new file mode 100644 index 00000000..4e5c5d94 --- /dev/null +++ b/src/components/ui/box/index.ts @@ -0,0 +1 @@ +export { Box } from "./box"; diff --git a/src/components/ui/flex/flex.tsx b/src/components/ui/flex/flex.tsx new file mode 100644 index 00000000..0d16e666 --- /dev/null +++ b/src/components/ui/flex/flex.tsx @@ -0,0 +1,20 @@ +import styled from "styled-components"; +import { + alignSelf, + alignItems, + justifyContent, + flexDirection, + flex, + FlexDirectionProps, + JustifyContentProps, +} from "styled-system"; +import { Box } from "../box"; + +type TFlex = FlexDirectionProps & JustifyContentProps; + +export const Flex = styled(Box)` + display: flex; + ${alignSelf} ${alignItems} ${justifyContent} ${flexDirection} ${flex}; +`; + +Flex.displayName = "Flex"; diff --git a/src/components/ui/flex/index.ts b/src/components/ui/flex/index.ts new file mode 100644 index 00000000..5f309049 --- /dev/null +++ b/src/components/ui/flex/index.ts @@ -0,0 +1 @@ +export { Flex } from "./flex"; diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts index 70b35b14..04a2beee 100644 --- a/src/components/ui/index.ts +++ b/src/components/ui/index.ts @@ -6,4 +6,6 @@ export * from "./dropdown"; export * from "./radio"; export * from "./switch"; export * from "./loader"; -export * from "./input"; \ No newline at end of file +export * from "./input"; +export * from "./box"; +export * from "./flex"; diff --git a/src/components/ui/loader/loader.tsx b/src/components/ui/loader/loader.tsx index 50c9e4b9..8575730d 100644 --- a/src/components/ui/loader/loader.tsx +++ b/src/components/ui/loader/loader.tsx @@ -6,10 +6,5 @@ interface ILoader { } export const Loader = ({ color = "currentColor", size = 3 }: ILoader) => { - return ( - - ); + return ; }; diff --git a/src/pages/dialog/popupPrompt.tsx b/src/pages/dialog/popupPrompt.tsx index fe9f694e..ef391a52 100644 --- a/src/pages/dialog/popupPrompt.tsx +++ b/src/pages/dialog/popupPrompt.tsx @@ -14,7 +14,10 @@ export const PopupPrompt = ({ message }: IPopupPrompt): JSX.Element => { return ( {message} - + ); }; diff --git a/src/pages/dialog/signin.tsx b/src/pages/dialog/signin.tsx index 222e3e6a..678edff2 100644 --- a/src/pages/dialog/signin.tsx +++ b/src/pages/dialog/signin.tsx @@ -64,7 +64,7 @@ export const SigninItem = ({ signin }: { signin: ISignin }): JSX.Element => {

Auto Sign in

- +
{props.showConfig ? ( diff --git a/src/screens/signup/signup.tsx b/src/screens/signup/signup.tsx index fe6d0abd..6ce491b5 100644 --- a/src/screens/signup/signup.tsx +++ b/src/screens/signup/signup.tsx @@ -116,9 +116,9 @@ export function Signup({ }} > {showPassword ? ( - + ) : ( - + )}