Fix types issues

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.eslintignore

@@ -7,6 +7,7 @@
 **/.git/**
 **/public/**
 **/microsite/**
+**/canon-website/**
 **/templates/**
 **/sample-templates/**
 playwright.config.ts

canon-website/components/Frame/index.tsx

@@ -1,9 +1,8 @@
+/* eslint-disable @next/next/no-css-tags */
 'use client';
 
 import { useEffect, useState } from 'react';
 import ReactFrame from 'react-frame-component';
-import '../../../packages/canon/src/css/core.css';
-import '../../../packages/canon/src/css/components.css';
 
 export const Frame = ({ children }: { children: React.ReactNode }) => {
   const [show, setShow] = useState(false);

canon-website/components/LayoutComponents/LayoutComponents.tsx

@@ -1,19 +1,3 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 import React from 'react';
 import { BoxSvg } from './svgs/box';
 import { StackSvg } from './svgs/stack';
@@ -21,59 +5,51 @@ import { GridSvg } from './svgs/grid';
 import { InlineSvg } from './svgs/inline';
 import { ContainerSvg } from './svgs/container';
 import styles from './LayoutComponents.module.css';
+import Link from 'next/link';
 
 export const LayoutComponents = () => {
   return (
     <div className={styles.layoutComponents}>
       <div className={styles.box}>
-        <a className={styles.content} href="/?path=/docs/components-box--docs">
+        <Link className={styles.content} href="/components/box">
           <BoxSvg />
-        </a>
+        </Link>
         <div className={styles.title}>Box</div>
         <div className={styles.description}>
           The most basic layout component
         </div>
       </div>
       <div className={styles.box}>
-        <a
-          className={styles.content}
-          href="/?path=/docs/components-stack--docs"
-        >
+        <Link className={styles.content} href="/components/stack">
           <StackSvg />
-        </a>
+        </Link>
         <div className={styles.title}>Stack</div>
         <div className={styles.description}>
           Arrange your components vertically
         </div>
       </div>
       <div className={styles.box}>
-        <a className={styles.content} href="/?path=/docs/components-grid--docs">
+        <Link className={styles.content} href="/components/grid">
           <GridSvg />
-        </a>
+        </Link>
         <div className={styles.title}>Grid</div>
         <div className={styles.description}>
           Arrange your components in a grid
         </div>
       </div>
       <div className={styles.box}>
-        <a
-          className={styles.content}
-          href="/?path=/docs/components-inline--docs"
-        >
+        <Link className={styles.content} href="/components/inline">
           <InlineSvg />
-        </a>
+        </Link>
         <div className={styles.title}>Inline</div>
         <div className={styles.description}>
           Arrange your components in a row
         </div>
       </div>
       <div className={styles.box}>
-        <a
-          className={styles.content}
-          href="/?path=/docs/components-container--docs"
-        >
+        <Link className={styles.content} href="/components/container">
           <ContainerSvg />
-        </a>
+        </Link>
         <div className={styles.title}>Container</div>
         <div className={styles.description}>
           A container for your components

canon-website/components/PropsTable/PropsTable.tsx

@@ -1,25 +1,15 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 import React from 'react';
 import * as Table from '../Table';
 import { Chip } from '../Chip';
 
-// Modify the PropsTable component to accept a generic type
-export const PropsTable = <T extends Record<string, any>>({
+// Define a more specific type for the data object
+type PropData = {
+  type: string | string[];
+  responsive: boolean;
+};
+
+// Modify the PropsTable component to use the new type
+export const PropsTable = <T extends Record<string, PropData>>({
   data,
 }: {
   data: T;
@@ -41,7 +31,7 @@ export const PropsTable = <T extends Record<string, any>>({
             </Table.Cell>
             <Table.Cell>
               {Array.isArray(data[n].type) ? (
-                data[n].type.map((t: any) => <Chip key={t}>{t}</Chip>)
+                data[n].type.map((t) => <Chip key={t}>{t}</Chip>)
               ) : (
                 <Chip>{data[n].type}</Chip>
               )}

canon-website/components/Sidebar/playground.tsx

@@ -7,7 +7,7 @@ import { Text } from '../../../packages/canon/src/components/Text';
 import { motion } from 'framer-motion';
 import styles from './Sidebar.module.css';
 import { usePathname } from 'next/navigation';
-import { screenSizes, ScreenSize } from '@/utils/data';
+import { screenSizes } from '@/utils/data';
 import { usePlayground } from '@/utils/playground-context';
 
 export const Playground = () => {

canon-website/package.json

@@ -11,7 +11,8 @@
   "sideEffects": false,
   "scripts": {
     "build": "next build",
-    "dev": "concurrently \"next dev\" \"yarn watch-css\"",
+    "dev": "next dev",
+    "dev-all": "concurrently \"next dev\" \"yarn watch-css\"",
     "lint": "next lint",
     "start": "next start",
     "watch-css": "node scripts/watch-css.js"