[CI] Add lint workflow

.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

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.
+
+<br/>
+
 ## Join the Layer5 community!
 
 <a name="contributing"></a><a name="community"></a>

packages/components/src/custom/ErrorBoundary.tsx

@@ -54,11 +54,11 @@ export const ErrorBoundary: FC<ErrorBoundaryProps> = ({ children, ...props }) =>
   );
 };
 //
-export const withErrorBoundary = (
-  Component: FC<any>,
+export const withErrorBoundary = <P extends object>(
+  Component: React.ComponentType<P>,
   errorHandlingProps: ErrorBoundaryProps | null
 ) => {
-  const WrappedWithErrorBoundary = (props: any) => (
+  const WrappedWithErrorBoundary: React.FC<P> = (props: P) => (
     <ErrorBoundary {...(errorHandlingProps ? errorHandlingProps : {})}>
       <Component {...props} />
     </ErrorBoundary>
@@ -67,8 +67,14 @@ export const withErrorBoundary = (
   return WrappedWithErrorBoundary;
 };
 
-export const withSuppressedErrorBoundary = (Component: React.ComponentType<any>) => {
-  const WrappedWithErrorBoundary = (props: any) => (
+interface Props {
+  children: React.ReactNode;
+}
+
+export const withSuppressedErrorBoundary = <P extends object>(
+  Component: React.ComponentType<P>
+) => {
+  const WrappedWithErrorBoundary: React.FC<P & Props> = (props: P & Props) => (
     <ErrorBoundary FallbackComponent={() => null}>
       <Component {...props} />
     </ErrorBoundary>

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
+- **Minimum viewport height**: 300px