@superdispatch/eslint-plugin-ui 0.12.0

package/src/rules/no-color-literals.ts

@@ -0,0 +1,93 @@
+import { Color } from '@superdispatch/ui';
+import { TSESTree } from '@typescript-eslint/types';
+import { createRule } from '../utils/createRule';
+
+//
+// Utils
+//
+
+function normalizeHex(hex: string): string {
+  hex = hex.toLowerCase();
+
+  // #ffffff -> #fff
+  if (new Set(hex).size === 2) {
+    hex = hex.charAt(0) + hex.charAt(1).repeat(3);
+  }
+
+  return hex;
+}
+
+const COLOR_KEY_CACHE = new Map<string, string>();
+function findColorName(color: string): undefined | string {
+  if (COLOR_KEY_CACHE.size === 0) {
+    for (const [key, hex] of Object.entries(Color)) {
+      COLOR_KEY_CACHE.set(normalizeHex(hex), key);
+    }
+  }
+
+  return COLOR_KEY_CACHE.get(color);
+}
+
+const HEX_COLOR_PATTERN = /(#\b([a-f0-9]{3}|[a-f0-9]{6})\b)/gim;
+function* listColorNames(text: string): Generator<string, void> {
+  for (const [, hex] of text.matchAll(HEX_COLOR_PATTERN)) {
+    if (hex) {
+      const color = normalizeHex(hex);
+      const name = findColorName(color);
+      if (name) yield name;
+    }
+  }
+}
+
+//
+// Rule
+//
+
+const messages = {
+  suggestColor: 'Use `Color.{{name}}` from "@superdispatch/ui"',
+} as const;
+
+export type MessageIds = keyof typeof messages;
+
+export const rule = createRule<[], MessageIds>({
+  name: 'no-restricted-modules',
+  defaultOptions: [],
+  meta: {
+    messages,
+    type: 'problem',
+    fixable: 'code',
+    docs: {
+      recommended: 'error',
+      category: 'Possible Errors',
+      description: 'Disallows to use Material UI modules',
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      Literal(node: TSESTree.Literal): void {
+        if (typeof node.value == 'string') {
+          for (const name of listColorNames(node.value)) {
+            context.report({
+              node,
+              data: { name },
+              messageId: 'suggestColor',
+            });
+          }
+        }
+      },
+
+      TemplateLiteral(node: TSESTree.TemplateLiteral): void {
+        for (const quasi of node.quasis) {
+          for (const name of listColorNames(quasi.value.raw)) {
+            context.report({
+              node,
+              data: { name },
+              messageId: 'suggestColor',
+            });
+          }
+        }
+      },
+    };
+  },
+});

package/src/rules/no-restricted-modules.spec.ts

@@ -0,0 +1,94 @@
+import { ESLintUtils } from '@typescript-eslint/experimental-utils';
+import { rule } from './no-restricted-modules';
+
+const ruleTester = new ESLintUtils.RuleTester({
+  parser: '@typescript-eslint/parser',
+});
+
+ruleTester.run('no-restricted-modules', rule, {
+  valid: ['import { Box } from "styled-system"'],
+  invalid: [
+    {
+      code: 'import { Box } from "@material-ui/core"',
+      errors: [
+        {
+          line: 1,
+          endLine: 1,
+          column: 10,
+          endColumn: 13,
+          messageId: 'restrict',
+          data: {
+            restrictedName: 'Box',
+            restrictedModule: '@material-ui/core',
+            suggestedName: 'Box',
+            suggestedModule: '@superdispatch/ui-lab',
+          },
+        },
+      ],
+    },
+
+    {
+      code: 'import { Box as div } from "@material-ui/core"',
+      errors: [
+        {
+          line: 1,
+          endLine: 1,
+          column: 10,
+          endColumn: 20,
+          messageId: 'restrict',
+          data: {
+            restrictedName: 'Box',
+            restrictedModule: '@material-ui/core',
+            suggestedName: 'Box',
+            suggestedModule: '@superdispatch/ui-lab',
+          },
+        },
+      ],
+    },
+
+    {
+      code: 'import { Avatar, Button, Card, Grid, Snackbar, SnackbarContent } from "@material-ui/core"',
+      errors: [
+        {
+          messageId: 'restrict',
+          data: {
+            restrictedName: 'Button',
+            restrictedModule: '@material-ui/core',
+            suggestedName: 'Button',
+            suggestedModule: '@superdispatch/ui-lab',
+          },
+        },
+
+        {
+          messageId: 'restrict',
+          data: {
+            restrictedName: 'Grid',
+            restrictedModule: '@material-ui/core',
+            suggestedName: 'Columns',
+            suggestedModule: '@superdispatch/ui-lab',
+          },
+        },
+
+        {
+          messageId: 'restrict',
+          data: {
+            restrictedName: 'Snackbar',
+            restrictedModule: '@material-ui/core',
+            suggestedName: 'Snackbar',
+            suggestedModule: '@superdispatch/ui',
+          },
+        },
+
+        {
+          messageId: 'restrict',
+          data: {
+            restrictedName: 'SnackbarContent',
+            restrictedModule: '@material-ui/core',
+            suggestedName: 'SnackbarContent',
+            suggestedModule: '@superdispatch/ui',
+          },
+        },
+      ],
+    },
+  ],
+});

package/src/rules/no-restricted-modules.ts

@@ -0,0 +1,92 @@
+import { AST_NODE_TYPES } from '@typescript-eslint/experimental-utils';
+import { TSESTree } from '@typescript-eslint/types';
+import { createRule } from '../utils/createRule';
+
+const messages = {
+  restrict:
+    'Usage of `{{restrictedName}}` from `{{restrictedModule}}` is restricted, use `{{suggestedName}}` from the `{{suggestedModule}}`',
+} as const;
+
+export type MessageIds = keyof typeof messages;
+
+type Restrictions = {
+  readonly [TPackage in string]?: {
+    readonly [TModule in string]?: [name: string, source: string];
+  };
+};
+
+const RESTRICTIONS: Restrictions = {
+  '@material-ui/lab': {
+    Alert: ['Alert', '@superdispatch/ui-lab'],
+  },
+  '@material-ui/core': {
+    Grid: ['Columns', '@superdispatch/ui-lab'],
+    Box: ['Box', '@superdispatch/ui-lab'],
+    Button: ['Button', '@superdispatch/ui-lab'],
+    Snackbar: ['Snackbar', '@superdispatch/ui'],
+    SnackbarContent: ['SnackbarContent', '@superdispatch/ui'],
+  },
+  '@superdispatch/ui': {
+    Button: ['Button', '@superdispatch/ui-lab'],
+    GridStack: ['Stack', '@superdispatch/ui'],
+    InlineGrid: ['Inline', '@superdispatch/ui'],
+    DescriptionList: ['Stack', '@superdispatch/ui-lab'],
+    DescriptionListItem: ['DescriptionItem', '@superdispatch/ui-lab'],
+  },
+};
+
+export const rule = createRule<[], MessageIds>({
+  name: 'no-restricted-modules',
+  defaultOptions: [],
+  meta: {
+    messages,
+    type: 'problem',
+    fixable: 'code',
+    docs: {
+      recommended: 'error',
+      category: 'Possible Errors',
+      description: 'Disallows to use Material UI modules',
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      ImportDeclaration(node: TSESTree.ImportDeclaration): void {
+        const { value: restrictedModule } = node.source;
+
+        if (typeof restrictedModule != 'string') return;
+
+        const packageRestrictions = RESTRICTIONS[restrictedModule];
+
+        if (!packageRestrictions) return;
+
+        for (const specifier of node.specifiers) {
+          if (specifier.type === AST_NODE_TYPES.ImportNamespaceSpecifier) {
+            continue;
+          }
+
+          const restrictedName =
+            specifier.type === AST_NODE_TYPES.ImportDefaultSpecifier
+              ? 'default'
+              : specifier.imported.name;
+          const moduleRestrictions = packageRestrictions[restrictedName];
+
+          if (!moduleRestrictions) continue;
+
+          const [suggestedName, suggestedModule] = moduleRestrictions;
+
+          context.report({
+            node: specifier,
+            data: {
+              restrictedName,
+              restrictedModule,
+              suggestedName,
+              suggestedModule,
+            },
+            messageId: 'restrict',
+          });
+        }
+      },
+    };
+  },
+});

package/src/utils/createRule.ts

@@ -0,0 +1,5 @@
+import { ESLintUtils } from '@typescript-eslint/experimental-utils';
+
+export const createRule = ESLintUtils.RuleCreator(
+  (ruleName) => `http://${ruleName}`,
+);

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "include": ["src"],
+  "extends": "../../tsconfig.build",
+  "exclude": ["**/*.spec.*", "**/__tests__/**", "**/__testutils__/**"],
+  "compilerOptions": {
+    "target": "ES2019",
+    "module": "CommonJS",
+    "composite": true,
+    "rootDir": "src",
+    "outDir": "pkg",
+    "tsBuildInfoFile": "pkg/.tsbuildinfo"
+  }
+}