enable a few ESLint rules

.eslintignore

@@ -1,2 +1,5 @@
 dist/
 node_modules/
+
+!/.*.js
+!/*.js

.eslintrc.js

@@ -0,0 +1,57 @@
+// eslint-disable-next-line import/no-unresolved
+const yaml = require('js-yaml');
+// eslint-disable-next-line import/no-unresolved
+const fs = require('fs');
+
+const workspace = yaml.load(
+  // eslint-disable-next-line no-sync
+  fs.readFileSync(`${__dirname}/pnpm-workspace.yaml`, 'utf-8'),
+);
+
+module.exports = {
+  extends: '',
+  extends: 'seek',
+  settings: {
+    'import/resolver': {
+      typescript: {
+        project: workspace.packages.map(
+          (project) => `${project}/tsconfig.json`,
+        ),
+      },
+    },
+  },
+  // workaround for @typescript-eslint/consistent-type-imports + import/no-duplicates
+  // ! requires TypeScript >=4.5 downstream
+  // remove when this is done https://github.com/typescript-eslint/typescript-eslint/issues/4338
+  // plugins: ['canonical'],
+  rules: {
+    '@typescript-eslint/consistent-type-imports': 'error',
+    // 'canonical/prefer-inline-type-import': 'error', // remove when this is done https://github.com/typescript-eslint/typescript-eslint/issues/4338
+    'import/no-cycle': 'warn',
+    'import/no-duplicates': 'error',
+    'import/no-relative-packages': 'error',
+  },
+  overrides: [
+    {
+      files: ['*.{js,ts,tsx}'],
+      excludedFiles: [
+        '*.{docs,gallery,screenshots,stories}.tsx',
+        'site/**/*.{ts,tsx}',
+      ],
+      rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            patterns: [
+              'braid-design-system**',
+              '!braid-design-system/lib/utils/source.macro',
+              'braid-src/**',
+              'site/**',
+              '**/site/**',
+            ],
+          },
+        ],
+      },
+    },
+  ],
+};

package.json

@@ -59,7 +59,8 @@
     "enquirer": "^2.3.6",
     "escape-string-regexp": "^4.0.0",
     "eslint": "^8.21.0",
-    "eslint-config-seek": "10.0.0",
+    "eslint-config-seek": "^10.1.0",
+    "eslint-plugin-canonical": "^3.1.0",
     "fast-glob": "^3.2.11",
     "fs-extra": "^10.1.0",
     "gh-pages": "^4.0.0",

packages/braid-design-system/css/atoms.docs.tsx

@@ -1,14 +1,16 @@
 import dedent from 'dedent';
 import React from 'react';
-import {
-  responsiveProperties,
+import type {
   ResponsiveProperties,
-  pseudoProperties,
   PseudoProperties,
-  unresponsiveProperties,
   UnresponsiveProperties,
   BoxShadow,
 } from 'braid-src/lib/css/atoms/atomicProperties';
+import {
+  responsiveProperties,
+  pseudoProperties,
+  unresponsiveProperties,
+} from 'braid-src/lib/css/atoms/atomicProperties';
 import { atoms } from 'braid-src/css';
 import {
   Stack,
@@ -27,7 +29,7 @@ import { Box } from 'braid-src/lib/components/Box/Box';
 import source from '../lib/utils/source.macro';
 import Code from 'site/App/Code/Code';
 import { ThemedExample } from 'site/App/ThemeSetting';
-import { CssDoc } from 'site/types';
+import type { CssDoc } from 'site/types';
 import { VanillaMigrationBanner } from './VanillaMigrationBanner';
 
 type BoxShadowDocs = Required<Record<BoxShadow, string>>;

packages/braid-design-system/css/breakpoints.docs.tsx

@@ -11,7 +11,7 @@ import {
 } from 'braid-src/lib/components';
 import { breakpoints } from 'braid-src/lib/css/breakpoints';
 import Code from 'site/App/Code/Code';
-import { CssDoc } from 'site/types';
+import type { CssDoc } from 'site/types';
 import { VanillaMigrationBanner } from './VanillaMigrationBanner';
 
 const bps = Object.keys(breakpoints) as Array<keyof typeof breakpoints>;

packages/braid-design-system/css/colorModeStyle.docs.tsx

@@ -4,7 +4,7 @@ import { colorModeStyle, vars } from '.';
 import { Strong, Text, TextLink } from 'braid-src/lib/components';
 import source from '../lib/utils/source.macro';
 import Code from 'site/App/Code/Code';
-import { CssDoc } from 'site/types';
+import type { CssDoc } from 'site/types';
 
 const docs: CssDoc = {
   usage: (

packages/braid-design-system/css/globalHeadingStyle.docs.tsx

@@ -4,7 +4,7 @@ import { Alert, Stack, Strong, Text, TextLink } from '../lib/components';
 import { globalHeadingStyle } from '../lib/css/globalTypographyStyles';
 import source from '../lib/utils/source.macro';
 import Code from 'site/App/Code/Code';
-import { CssDoc } from 'site/types';
+import type { CssDoc } from 'site/types';
 import { VanillaMigrationBanner } from './VanillaMigrationBanner';
 
 const docs: CssDoc = {

packages/braid-design-system/css/globalTextStyle.docs.tsx

@@ -4,7 +4,7 @@ import { Alert, Stack, Strong, Text, TextLink } from '../lib/components';
 import { globalTextStyle } from '../lib/css/globalTypographyStyles';
 import source from '../lib/utils/source.macro';
 import Code from 'site/App/Code/Code';
-import { CssDoc } from 'site/types';
+import type { CssDoc } from 'site/types';
 import { VanillaMigrationBanner } from './VanillaMigrationBanner';
 
 const docs: CssDoc = {

packages/braid-design-system/css/index.ts

@@ -1,5 +1,6 @@
 import { vars as internalVars } from '../lib/themes/vars.css';
-import { atoms as internalAtoms, Atoms } from '../lib/css/atoms/atoms';
+import type { Atoms } from '../lib/css/atoms/atoms';
+import { atoms as internalAtoms } from '../lib/css/atoms/atoms';
 import { colorModeStyle } from '../lib/css/colorModeStyle';
 import { responsiveStyle } from '../lib/css/responsiveStyle';
 import { breakpoints } from '../lib/css/breakpoints';

packages/braid-design-system/css/responsiveStyle.docs.tsx

@@ -4,7 +4,7 @@ import { responsiveStyle, vars, breakpoints } from '.';
 import { Notice, Strong, Text, TextLink } from '../lib/components';
 import source from '../lib/utils/source.macro';
 import Code from 'site/App/Code/Code';
-import { CssDoc } from 'site/types';
+import type { CssDoc } from 'site/types';
 import { VanillaMigrationBanner } from './VanillaMigrationBanner';
 
 const bps = Object.keys(breakpoints);

packages/braid-design-system/css/vars.docs.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { vars } from '.';
 import {
   Text,
@@ -11,11 +12,12 @@ import {
   Alert,
   List,
 } from '../lib/components';
-import { Box, BoxProps } from '../lib/components/Box/Box';
-import { ReactNodeNoStrings } from '../lib/components/private/ReactNodeNoStrings';
+import type { BoxProps } from '../lib/components/Box/Box';
+import { Box } from '../lib/components/Box/Box';
+import type { ReactNodeNoStrings } from '../lib/components/private/ReactNodeNoStrings';
 import Code from 'site/App/Code/Code';
 import { ThemedExample, useThemeSettings } from 'site/App/ThemeSetting';
-import { CssDoc } from 'site/types';
+import type { CssDoc } from 'site/types';
 import { VanillaMigrationBanner } from './VanillaMigrationBanner';
 
 const Row = ({

packages/braid-design-system/lib/components/Accordion/Accordion.docs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentDocs } from 'site/types';
+import type { ComponentDocs } from 'site/types';
 import source from '../../utils/source.macro';
 import {
   Accordion,

packages/braid-design-system/lib/components/Accordion/Accordion.gallery.tsx

@@ -8,7 +8,7 @@ import {
   IconPromote,
   Placeholder,
 } from '../../playroom/components';
-import { ComponentExample } from 'site/types';
+import type { ComponentExample } from 'site/types';
 
 export const galleryItems: ComponentExample[] = [
   {

packages/braid-design-system/lib/components/Accordion/Accordion.playroom.tsx

@@ -1,11 +1,8 @@
 import React from 'react';
 import { mapResponsiveValue } from '../../css/atoms/sprinkles.css';
 import { wireframe } from '../../themes';
-import {
-  Accordion as BraidAccordion,
-  AccordionProps,
-  validSpaceValues,
-} from './Accordion';
+import type { AccordionProps } from './Accordion';
+import { Accordion as BraidAccordion, validSpaceValues } from './Accordion';
 
 type ValidSpaceValue = typeof validSpaceValues[number];
 

packages/braid-design-system/lib/components/Accordion/Accordion.screenshots.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ComponentScreenshot } from 'site/types';
+import type { ComponentScreenshot } from 'site/types';
 import { AccordionItem, Accordion, Badge, Text, IconPromote, Stack } from '../';
 import { Placeholder } from '../../playroom/components';
 import { Box } from '../Box/Box';

packages/braid-design-system/lib/components/Accordion/Accordion.snippets.tsx

@@ -6,7 +6,7 @@ import {
   Placeholder,
 } from '../../playroom/components';
 import source from '../../utils/source.macro';
-import { Snippets } from '../private/Snippets';
+import type { Snippets } from '../private/Snippets';
 
 export const snippets: Snippets = [
   {

packages/braid-design-system/lib/components/Accordion/Accordion.tsx

@@ -1,21 +1,15 @@
 import assert from 'assert';
 import React, { useMemo } from 'react';
-import { ReactNodeNoStrings } from '../private/ReactNodeNoStrings';
-import {
-  normalizeResponsiveValue,
-  RequiredResponsiveValue,
-} from '../../css/atoms/sprinkles.css';
-import buildDataAttributes, {
-  DataAttributeMap,
-} from '../private/buildDataAttributes';
+import type { ReactNodeNoStrings } from '../private/ReactNodeNoStrings';
+import type { RequiredResponsiveValue } from '../../css/atoms/sprinkles.css';
+import { normalizeResponsiveValue } from '../../css/atoms/sprinkles.css';
+import type { DataAttributeMap } from '../private/buildDataAttributes';
+import buildDataAttributes from '../private/buildDataAttributes';
 import { Box } from '../Box/Box';
 import { Stack } from '../Stack/Stack';
 import { Divider } from '../Divider/Divider';
-import {
-  AccordionContext,
-  AccordionContextValue,
-  validTones,
-} from './AccordionContext';
+import type { AccordionContextValue } from './AccordionContext';
+import { AccordionContext, validTones } from './AccordionContext';
 
 export const validSpaceValues = ['medium', 'large', 'xlarge'] as const;
 

packages/braid-design-system/lib/components/Accordion/AccordionContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { TextProps } from '../Text/Text';
+import type { TextProps } from '../Text/Text';
 
 export const validTones = ['neutral', 'secondary'] as const;
 

packages/braid-design-system/lib/components/Accordion/AccordionItem.playroom.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { useFallbackState, StateProp } from '../../playroom/playroomState';
+import type { StateProp } from '../../playroom/playroomState';
+import { useFallbackState } from '../../playroom/playroomState';
 import { useFallbackId } from '../../playroom/utils';
-import {
-  AccordionItem as BraidAccordionItem,
+import type {
   AccordionItemProps,
   AccordionItemBaseProps,
   AccordionItemStateProps,
 } from './AccordionItem';
+import { AccordionItem as BraidAccordionItem } from './AccordionItem';
 
 type OptionalProps = 'id';
 type PlayroomAccordionItemProps = StateProp &

packages/braid-design-system/lib/components/Accordion/AccordionItem.tsx

@@ -1,34 +1,27 @@
-import React, {
-  cloneElement,
-  ReactElement,
-  ReactNode,
-  useContext,
-} from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import React, { cloneElement, useContext } from 'react';
 import assert from 'assert';
 import { Box } from '../Box/Box';
-import { Text, TextProps } from '../Text/Text';
+import type { TextProps } from '../Text/Text';
+import { Text } from '../Text/Text';
 import { Columns } from '../Columns/Columns';
 import { Column } from '../Column/Column';
 import { Inline } from '../Inline/Inline';
-import { BadgeProps } from '../Badge/Badge';
+import type { BadgeProps } from '../Badge/Badge';
 import { IconChevron } from '../icons';
-import {
-  useDisclosure,
+import type {
   UseDisclosureProps,
   DisclosureStateProps,
 } from '../Disclosure/useDisclosure';
+import { useDisclosure } from '../Disclosure/useDisclosure';
 
 import { virtualTouchable } from '../private/touchable/virtualTouchable';
 import { hideFocusRingsClassName } from '../private/hideFocusRings/hideFocusRings';
 import { Overlay } from '../private/Overlay/Overlay';
-import {
-  AccordionContext,
-  AccordionContextValue,
-  validTones,
-} from './AccordionContext';
-import buildDataAttributes, {
-  DataAttributeMap,
-} from '../private/buildDataAttributes';
+import type { AccordionContextValue } from './AccordionContext';
+import { AccordionContext, validTones } from './AccordionContext';
+import type { DataAttributeMap } from '../private/buildDataAttributes';
+import buildDataAttributes from '../private/buildDataAttributes';
 import * as styles from './AccordionItem.css';
 
 const itemSpaceForSize = {

packages/braid-design-system/lib/components/Actions/Actions.docs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentDocs } from 'site/types';
+import type { ComponentDocs } from 'site/types';
 import source from '../../utils/source.macro';
 import { Actions, Button, TextLink, Text, Strong, Card, Stack } from '../';
 

packages/braid-design-system/lib/components/Actions/Actions.gallery.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import source from '../../utils/source.macro';
-import { ComponentExample } from 'site/types';
+import type { ComponentExample } from 'site/types';
 import { Actions, Button, IconDelete } from '../';
 
 export const galleryItems: ComponentExample[] = [

packages/braid-design-system/lib/components/Actions/Actions.screenshots.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentScreenshot } from 'site/types';
+import type { ComponentScreenshot } from 'site/types';
 import { Button, Actions } from '../';
 
 export const screenshots: ComponentScreenshot = {

packages/braid-design-system/lib/components/Actions/Actions.snippets.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Actions, Button, IconDelete } from '../../playroom/components';
 import source from '../../utils/source.macro';
-import { Snippets } from '../private/Snippets';
+import type { Snippets } from '../private/Snippets';
 
 export const snippets: Snippets = [
   {

packages/braid-design-system/lib/components/Actions/Actions.tsx

@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react';
 import ActionsContext from './ActionsContext';
-import { Inline, InlineProps } from '../Inline/Inline';
-import { ButtonProps } from '../Button/Button';
+import type { InlineProps } from '../Inline/Inline';
+import { Inline } from '../Inline/Inline';
+import type { ButtonProps } from '../Button/Button';
 
 export interface ActionsProps {
   size?: ButtonProps['size'];