Merge pull request #21 from 8845musign/fix/DSGNPB-201-fix-import-paths

Fix paths and Enable import lint checking

.eslintrc.cjs

@@ -33,6 +33,7 @@ module.exports = {
             alwaysTryTypes: true,
             project: './tsconfig.json',
         },
+        "import/resolver": 'typescript'
     },
     rules: {
         'import/order': [
@@ -51,7 +52,7 @@ module.exports = {
             },
         ],
         'unused-imports/no-unused-imports': 'error',
-        'import/no-unresolved': 'off',
+        'import/no-unresolved': 2,
     },
     overrides: [
         {

.scaffdog/example.md

@@ -29,7 +29,7 @@ export default {{ inputs.exampleName | pascal }};
 
 ```typescript
 ---
-import ExampleLayout from '@layouts/exampleLayout.astro';
+import ExampleLayout from '@layouts/ExampleLayout.astro';
 import {{ inputs.exampleName | pascal }} from '@components/react/examples/{{ inputs.exampleKey }}/{{ inputs.exampleName | pascal }}';
 ---
 

package.json

@@ -51,6 +51,7 @@
     "@ubie/prettier-config": "^0.1.0",
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-astro": "^0.29.1",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",

src/components/astro/PropsTable.astro

@@ -1,8 +1,8 @@
 ---
 type Prop = {
   name: string;
-  type: string;
-  defaultValue: string;
+  type: string | string[];
+  defaultValue: string | number | null;
   required: boolean;
   description: string;
 };

src/components/react/ButtonIcon.tsx

@@ -1,6 +1,6 @@
-import { clsx } from "clsx";
-import styles from "./ButtonIcon.module.css";
-import type { FC, ReactNode } from "react";
+import { clsx } from 'clsx';
+import styles from './ButtonIcon.module.css';
+import type { FC, ReactNode } from 'react';
 
 interface Props {
   children: ReactNode;
@@ -9,18 +9,8 @@ interface Props {
   className?: string;
 }
 
-const ButtonIcon: FC<Props> = ({
-  children,
-  label,
-  onClick,
-  className = "",
-}) => (
-  <button
-    onClick={onClick}
-    aria-label={label}
-    className={clsx(styles.button, className)}
-    title={label}
-  >
+const ButtonIcon: FC<Props> = ({ children, label, onClick, className = '' }) => (
+  <button onClick={onClick} aria-label={label} className={clsx(styles.button, className)} title={label}>
     {children}
   </button>
 );

src/components/react/CopyButton.tsx

@@ -1,6 +1,6 @@
-import { copyToClipboard } from '@utils/client';
 import { clsx } from 'clsx';
 import { useState } from 'react';
+import { copyToClipboard } from '@utils/client';
 import styles from './CopyButton.module.css';
 import type { FC } from 'react';
 

src/components/react/GlobalNavigation.tsx

@@ -1,7 +1,7 @@
 import { useStore } from '@nanostores/react';
-import { $isMobileGlobalNavigationOpen } from '@store/navigation';
 import clsx from 'clsx';
 import FocusTrap from 'focus-trap-react';
+import { $isMobileGlobalNavigationOpen } from '@store/navigation';
 import styles from './GlobalNavigation.module.css';
 import type { PostData } from '@types';
 import type { FC } from 'react';

src/components/react/TableOfContents/TableOfContents.tsx

@@ -1,5 +1,5 @@
-import { extractHeadingsFromMain, pickHeadingIds } from '@utils/client';
 import { useEffect, useState } from 'react';
+import { extractHeadingsFromMain, pickHeadingIds } from '@utils/client';
 import LinkToHeading from './LinkToHeading';
 import styles from './TableOfContents.module.css';
 import type { Heading } from '@utils/client';

src/components/react/WithGlobalNavigation.tsx

@@ -1,6 +1,6 @@
 import { useStore } from '@nanostores/react';
-import { $isMobileGlobalNavigationOpen } from '@store/navigation';
 import clsx from 'clsx';
+import { $isMobileGlobalNavigationOpen } from '@store/navigation';
 import GlobalNavigation from './GlobalNavigation';
 import styles from './WithGlobalNavigation.module.css';
 import type { PostData } from '@types';

src/components/react/figures/color/ColorChip.tsx

@@ -1,5 +1,5 @@
-import ButtonCopy from '@components/react/CopyButton';
 import DesignToken from '@ubie/design-tokens';
+import ButtonCopy from '@components/react/CopyButton';
 import { validateContrast, convertHexWithPercentage, convertDisplayName, deleteAlpha } from '@utils/client';
 import styles from './ColorChip.module.css';
 import ColorChipValidationIndicator from './ColorChipValidationIndicator';

src/components/react/figures/radius/TokenList.tsx

@@ -1,6 +1,6 @@
+import DesignToken from '@ubie/design-tokens';
 import CopyButton from '@components/react/CopyButton';
 import Table, { Row, TBody, THead, Cell, HeadCell, HeadRow } from '@components/react/Table';
-import DesignToken from '@ubie/design-tokens';
 import { pascalCaseToCSSVariables } from '@utils/client/css';
 import { getKeys } from '@utils/client/object';
 import type { FC } from 'react';

src/components/react/figures/spacing/TokenList.tsx

@@ -1,6 +1,6 @@
+import DesignToken from '@ubie/design-tokens';
 import CopyButton from '@components/react/CopyButton';
 import Table, { Row, TBody, THead, Cell, HeadCell, HeadRow } from '@components/react/Table';
-import DesignToken from '@ubie/design-tokens';
 import { pascalCaseToCSSVariables } from '@utils/client/css';
 import { getKeys } from '@utils/client/object';
 import type { FC } from 'react';

src/components/react/figures/typography/ExampleText.tsx

@@ -1,5 +1,5 @@
-import CopyButton from '@components/react/CopyButton';
 import DesignTokens from '@ubie/design-tokens';
+import CopyButton from '@components/react/CopyButton';
 import { convertToTypographyCSS, convertToTypographyReact } from './scripts';
 import type { FC } from 'react';
 

src/layouts/BaseLayout.astro

@@ -4,10 +4,10 @@ import '@unocss/reset/sanitize/assets.css';
 import '@ubie/design-tokens/dist/tokens.css';
 import '../styles/libs/prism-a11y-dark.css';
 import '@styles/global.css';
-import type { PostData } from '@types';
 
 import GlobalHeader from '@components/astro/GlobalHeader.astro';
 import WithGlobalNavigation from '@components/react/WithGlobalNavigation';
+import type { PostData } from '@types';
 
 const currentPath = new URL(Astro.request.url).pathname;
 const allComponentMdx = await Astro.glob('../pages/components/*.mdx');

src/layouts/ComponentLayout.astro

@@ -31,7 +31,7 @@ const examples = getAllExample(exampleKey);
       <h2 id="Props">
         Props<a class="linkHeading" href="#Props"><span class="linkHeadingIcon">#</span></a>
       </h2>
-      <PropsTable propsArray={propsArray as any} />
+      <PropsTable propsArray={propsArray} />
     </section>
     <slot />
   </section>

src/layouts/PostLayout.astro

@@ -1,7 +1,7 @@
 ---
+import Markdown from '@components/astro/Markdown.astro';
 import BaseLayout from './BaseLayout.astro';
 import WithTableOfContentsLayout from './WithTableOfContentsLayout.astro';
-import Markdown from '@components/astro/Markdown.astro';
 
 const { title, description } = Astro.props.frontmatter;
 ---

src/pages/components/examples/accordion/small.astro

@@ -1,8 +1,8 @@
 ---
-import ExampleLayout from '@layouts/exampleLayout.astro';
+import ExampleLayout from '@layouts/ExampleLayout.astro';
 import Small from '@components/react/examples/accordion/Small';
 ---
 
 <ExampleLayout title="Small Example | Accordion">
   <Small client:only="react" />
-</ExampleLayout>
+</ExampleLayout>

src/pages/components/examples/action-half-modal/Customized.astro

@@ -1,8 +1,8 @@
 ---
-import ExampleLayout from '@layouts/exampleLayout.astro';
+import ExampleLayout from '@layouts/ExampleLayout.astro';
 import Customized from '@components/react/examples/action-half-modal/Customized';
 ---
 
 <ExampleLayout title="Customized Example | ActionHalfModal">
   <Customized client:only="react" />
-</ExampleLayout>
+</ExampleLayout>

src/pages/components/examples/action-half-modal/fullscreen.astro

@@ -1,8 +1,8 @@
 ---
-import ExampleLayout from '@layouts/exampleLayout.astro';
+import ExampleLayout from '@layouts/ExampleLayout.astro';
 import Fullscreen from '@components/react/examples/action-half-modal/Fullscreen';
 ---
 
 <ExampleLayout title="Fullscreen Example | ActionHalfModal">
   <Fullscreen client:only="react" />
-</ExampleLayout>
+</ExampleLayout>

src/pages/components/examples/action-half-modal/no-close-button.astro

@@ -1,8 +1,8 @@
 ---
-import ExampleLayout from '@layouts/exampleLayout.astro';
+import ExampleLayout from '@layouts/ExampleLayout.astro';
 import NoCloseButton from '@components/react/examples/action-half-modal/NoCloseButton';
 ---
 
 <ExampleLayout title="NoCloseButton Example | ActionHalfModal">
   <NoCloseButton client:only="react" />
-</ExampleLayout>
+</ExampleLayout>

src/pages/components/examples/action-half-modal/secondary.astro

@@ -1,8 +1,8 @@
 ---
-import ExampleLayout from '@layouts/exampleLayout.astro';
+import ExampleLayout from '@layouts/ExampleLayout.astro';
 import Secondary from '@components/react/examples/action-half-modal/Secondary';
 ---
 
 <ExampleLayout title="Secondary Example | ActionHalfModal">
   <Secondary client:only="react" />
-</ExampleLayout>
+</ExampleLayout>

src/pages/components/examples/action-modal/customized.astro

@@ -1,8 +1,8 @@
 ---
-import ExampleLayout from '@layouts/exampleLayout.astro';
+import ExampleLayout from '@layouts/ExampleLayout.astro';
 import Customized from '@components/react/examples/action-modal/Customized';
 ---
 
 <ExampleLayout title="Customized Example | ActionModal">
   <Customized client:only="react" />
-</ExampleLayout>
+</ExampleLayout>

src/pages/components/examples/action-modal/fixed-height.astro

@@ -1,8 +1,8 @@
 ---
-import ExampleLayout from '@layouts/exampleLayout.astro';
+import ExampleLayout from '@layouts/ExampleLayout.astro';
 import FixedHeight from '@components/react/examples/action-modal/FixedHeight';
 ---
 
 <ExampleLayout title="FixedHeight Example | ActionModal">
   <FixedHeight client:only="react" />
-</ExampleLayout>
+</ExampleLayout>

src/pages/components/examples/action-modal/secondary.astro

@@ -1,8 +1,8 @@
 ---
-import ExampleLayout from '@layouts/exampleLayout.astro';
+import ExampleLayout from '@layouts/ExampleLayout.astro';
 import Secondary from '@components/react/examples/action-modal/Secondary';
 ---
 
 <ExampleLayout title="Secondary Example | ActionModal">
   <Secondary client:only="react" />
-</ExampleLayout>
+</ExampleLayout>

src/pages/components/examples/button/block.astro

@@ -1,8 +1,8 @@
 ---
-import ExampleLayout from '@layouts/exampleLayout.astro';
+import ExampleLayout from '@layouts/ExampleLayout.astro';
 import Block from '@components/react/examples/button/Block';
 ---
 
 <ExampleLayout title="Block Example | Button">
   <Block client:only="react" />
-</ExampleLayout>
+</ExampleLayout>

src/pages/components/examples/button/disabled.astro

@@ -1,8 +1,8 @@
 ---
-import ExampleLayout from '@layouts/exampleLayout.astro';
+import ExampleLayout from '@layouts/ExampleLayout.astro';
 import Disabled from '@components/react/examples/button/Disabled';
 ---
 
 <ExampleLayout title="Disabled Example | Button">
   <Disabled client:only="react" />
-</ExampleLayout>
+</ExampleLayout>