From 038372a49e8084454d9ebaf4f33bdc449246b660 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 25 Oct 2023 17:27:43 +0530 Subject: [PATCH 1/5] feat(workflow): add lint workflow Signed-off-by: Sudhanshu Dasgupta --- .github/workflows/lint.yml | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 .github/workflows/lint.yml diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml new file mode 100644 index 00000000..93cc867d --- /dev/null +++ b/.github/workflows/lint.yml @@ -0,0 +1,28 @@ +name: Linting and formatting + +on: + push: + branches: + - "*" + pull_request: + branches: + - "*" + +jobs: + lint: + runs-on: ubuntu-latest + + steps: + - name: Checkout code + uses: actions/checkout@v2 + + - name: Set up Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v3 + with: + node-version: ${{ matrix.node-version }} + + - name: Install dependencies + run: yarn install + + - name: Run Lint + run: yarn lint && yarn format:check && yarn lint-staged From 339e8bd6f7c545460b1e4bbb27447c3b7edf875c Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 25 Oct 2023 17:39:01 +0530 Subject: [PATCH 2/5] fix(workflow): to fix lint Signed-off-by: Sudhanshu Dasgupta --- .../components/src/custom/ErrorBoundary.tsx | 146 +++++++++--------- 1 file changed, 74 insertions(+), 72 deletions(-) diff --git a/packages/components/src/custom/ErrorBoundary.tsx b/packages/components/src/custom/ErrorBoundary.tsx index 34ffb8f7..556bbba3 100644 --- a/packages/components/src/custom/ErrorBoundary.tsx +++ b/packages/components/src/custom/ErrorBoundary.tsx @@ -1,78 +1,80 @@ -import { Button } from '@mui/material'; -import React, { type FC } from 'react'; -import { - ErrorBoundaryProps, - FallbackProps, - ErrorBoundary as ReactErrorBoundary -} from 'react-error-boundary'; +//Commenting out the below code because its having typescript issues with using type as its violating the eslint rules and its failing workflow checks -const Fallback: React.ComponentType = ({ error, resetErrorBoundary }) => { - if (error instanceof Error) { - // Check if error is an instance of Error - return ( -
-

Uh-oh!😔 Please pardon the mesh.

-
- {error.message} -
- -
- ); - } else { - // Handle the case where error is not an instance of Error - return ( -
-

Uh-oh!😔 An unknown error occurred.

- -
- ); - } -}; +// import { Button } from '@mui/material'; +// import React, { type FC } from 'react'; +// import { +// ErrorBoundaryProps, +// FallbackProps, +// ErrorBoundary as ReactErrorBoundary +// } from 'react-error-boundary'; -const reportError = (error: Error, info: React.ErrorInfo) => { - // This is where you'd send the error to Sentry,etc - console.log('Error Caught Inside Boundary --reportError', error, 'Info', info); -}; +// const Fallback: React.ComponentType = ({ error, resetErrorBoundary }) => { +// if (error instanceof Error) { +// // Check if error is an instance of Error +// return ( +//
+//

Uh-oh!😔 Please pardon the mesh.

+//
+// {error.message} +//
+// +//
+// ); +// } else { +// // Handle the case where error is not an instance of Error +// return ( +//
+//

Uh-oh!😔 An unknown error occurred.

+// +//
+// ); +// } +// }; -export const ErrorBoundary: FC = ({ children, ...props }) => { - return ( - - {children} - - ); -}; -// -export const withErrorBoundary = ( - Component: FC, - errorHandlingProps: ErrorBoundaryProps | null -) => { - const WrappedWithErrorBoundary = (props: any) => ( - - - - ); +// const reportError = (error: Error, info: React.ErrorInfo) => { +// // This is where you'd send the error to Sentry,etc +// console.log('Error Caught Inside Boundary --reportError', error, 'Info', info); +// }; - return WrappedWithErrorBoundary; -}; +// export const ErrorBoundary: FC = ({ children, ...props }) => { +// return ( +// +// {children} +// +// ); +// }; +// // +// export const withErrorBoundary = ( +// Component: FC, +// errorHandlingProps: ErrorBoundaryProps | null +// ) => { +// const WrappedWithErrorBoundary = (props: any) => ( +// +// +// +// ); -export const withSuppressedErrorBoundary = (Component: React.ComponentType) => { - const WrappedWithErrorBoundary = (props: any) => ( - null}> - - - ); +// return WrappedWithErrorBoundary; +// }; - return WrappedWithErrorBoundary; -}; +// export const withSuppressedErrorBoundary = (Component: React.ComponentType) => { +// const WrappedWithErrorBoundary = (props: any) => ( +// null}> +// +// +// ); + +// return WrappedWithErrorBoundary; +// }; From ceb54870dce20b15f62946090f8cb61422084b23 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 25 Oct 2023 18:45:00 +0530 Subject: [PATCH 3/5] fix(lint): lint fix Signed-off-by: Sudhanshu Dasgupta --- system/foundations/responsive.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/system/foundations/responsive.md b/system/foundations/responsive.md index 2e6406d3..057a6539 100644 --- a/system/foundations/responsive.md +++ b/system/foundations/responsive.md @@ -29,9 +29,7 @@ Providing support at these smaller sizes enable people with low vision to use La To understand how to break down a page to work on smaller viewports, check out [Responsive foundations](/foundations/layout) and [Responsive behavior](/foundations/layout) sections in the [Layout](/foundations/layout) page. - TODO: Capture SVG requirements and practices from Meshery. - - **Minimum viewport width**: 375px -- **Minimum viewport height**: 300px \ No newline at end of file +- **Minimum viewport height**: 300px From 83d70183eeb7929f683276f8df61d8760092ee92 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 25 Oct 2023 18:54:22 +0530 Subject: [PATCH 4/5] fix(errorboundary): revise error boundary Signed-off-by: Sudhanshu Dasgupta --- .../components/src/custom/ErrorBoundary.tsx | 150 +++++++++--------- 1 file changed, 77 insertions(+), 73 deletions(-) diff --git a/packages/components/src/custom/ErrorBoundary.tsx b/packages/components/src/custom/ErrorBoundary.tsx index 556bbba3..294f869a 100644 --- a/packages/components/src/custom/ErrorBoundary.tsx +++ b/packages/components/src/custom/ErrorBoundary.tsx @@ -1,80 +1,84 @@ -//Commenting out the below code because its having typescript issues with using type as its violating the eslint rules and its failing workflow checks +import { Button } from '@mui/material'; +import React, { type FC } from 'react'; +import { + ErrorBoundaryProps, + FallbackProps, + ErrorBoundary as ReactErrorBoundary +} from 'react-error-boundary'; -// import { Button } from '@mui/material'; -// import React, { type FC } from 'react'; -// import { -// ErrorBoundaryProps, -// FallbackProps, -// ErrorBoundary as ReactErrorBoundary -// } from 'react-error-boundary'; +const Fallback: React.ComponentType = ({ error, resetErrorBoundary }) => { + if (error instanceof Error) { + // Check if error is an instance of Error + return ( +
+

Uh-oh!😔 Please pardon the mesh.

+
+ {error.message} +
+ +
+ ); + } else { + // Handle the case where error is not an instance of Error + return ( +
+

Uh-oh!😔 An unknown error occurred.

+ +
+ ); + } +}; -// const Fallback: React.ComponentType = ({ error, resetErrorBoundary }) => { -// if (error instanceof Error) { -// // Check if error is an instance of Error -// return ( -//
-//

Uh-oh!😔 Please pardon the mesh.

-//
-// {error.message} -//
-// -//
-// ); -// } else { -// // Handle the case where error is not an instance of Error -// return ( -//
-//

Uh-oh!😔 An unknown error occurred.

-// -//
-// ); -// } -// }; +const reportError = (error: Error, info: React.ErrorInfo) => { + // This is where you'd send the error to Sentry,etc + console.log('Error Caught Inside Boundary --reportError', error, 'Info', info); +}; -// const reportError = (error: Error, info: React.ErrorInfo) => { -// // This is where you'd send the error to Sentry,etc -// console.log('Error Caught Inside Boundary --reportError', error, 'Info', info); -// }; +export const ErrorBoundary: FC = ({ children, ...props }) => { + return ( + + {children} + + ); +}; +// +export const withErrorBoundary =

( + Component: React.ComponentType

, + errorHandlingProps: ErrorBoundaryProps | null +) => { + const WrappedWithErrorBoundary: React.FC

= (props: P) => ( + + + + ); -// export const ErrorBoundary: FC = ({ children, ...props }) => { -// return ( -// -// {children} -// -// ); -// }; -// // -// export const withErrorBoundary = ( -// Component: FC, -// errorHandlingProps: ErrorBoundaryProps | null -// ) => { -// const WrappedWithErrorBoundary = (props: any) => ( -// -// -// -// ); + return WrappedWithErrorBoundary; +}; -// return WrappedWithErrorBoundary; -// }; +interface Props { + children: React.ReactNode; +} -// export const withSuppressedErrorBoundary = (Component: React.ComponentType) => { -// const WrappedWithErrorBoundary = (props: any) => ( -// null}> -// -// -// ); +export const withSuppressedErrorBoundary =

( + Component: React.ComponentType

+) => { + const WrappedWithErrorBoundary: React.FC

= (props: P & Props) => ( + null}> + + + ); -// return WrappedWithErrorBoundary; -// }; + return WrappedWithErrorBoundary; +}; From 51686aa78ba1f730be7656e0e2cf8858736da2f9 Mon Sep 17 00:00:00 2001 From: Sudhanshu Dasgupta Date: Wed, 25 Oct 2023 19:07:21 +0530 Subject: [PATCH 5/5] fix(readme): add to ignore type any in readme Signed-off-by: Sudhanshu Dasgupta --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 67b39dfc..38e95bbc 100644 --- a/README.md +++ b/README.md @@ -66,6 +66,11 @@ format-fix: yarn run format:write ``` +> [!NOTE] +> Avoid using `type any` in your code. Always specify explicit types to ensure type safety and maintainability. + +
+ ## Join the Layer5 community!