Add code linting and formatting (#367)

.eslintignore

@@ -0,0 +1,13 @@
+tokens-v2-private/
+.cache/
+docs/public/
+CHANGELOG.md
+
+# Ignore all files relating to v1 tokens
+# TODO: Remove after v1 tokens have been removed
+data/
+dist/
+src/utils.ts
+src/@types/
+script/lib/
+script/build.ts

.eslintrc.js

@@ -0,0 +1,163 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  extends: [
+    'plugin:react/jsx-runtime',
+    'plugin:react/recommended',
+    'plugin:jsx-a11y/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:prettier/recommended',
+    'plugin:github/recommended',
+    'plugin:github/browser'
+  ],
+  ignorePatterns: ['node_modules', '.cache', 'coverage/**/*', 'docs/public/**/*', 'dist/**/*', 'types/**/*'],
+  globals: {
+    __DEV__: 'readonly'
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+    jest: true,
+    node: true
+  },
+  settings: {
+    react: {
+      version: 'detect'
+    },
+    'import/resolver': {
+      typescript: {} // this loads <rootdir>/tsconfig.json to eslint
+    }
+  },
+  // rules which apply to JS, TS, etc.
+  rules: {
+    'filenames/match-regex': 0,
+    'eslint-comments/no-unused-disable': 0,
+    'react/prop-types': 0,
+    'react/display-name': 0,
+    'react-hooks/exhaustive-deps': 'error',
+    'jsx-a11y/label-has-for': [
+      2,
+      {
+        components: []
+      }
+    ],
+    camelcase: [
+      'error',
+      {
+        allow: [
+          'light_high_contrast',
+          'light_colorblind',
+          'light_tritanopia',
+          'dark_dimmed',
+          'dark_high_contrast',
+          'dark_colorblind',
+          'dark_tritanopia'
+        ]
+      }
+    ]
+  },
+  overrides: [
+    // rules which apply only to JS
+    {
+      files: ['**/*.{js,jsx}'],
+      rules: {
+        'eslint-comments/no-use': 0,
+        'import/no-namespace': 0,
+        'no-shadow': 0,
+        'import/no-commonjs': 0,
+        'import/no-nodejs-modules': 0,
+        'no-unused-vars': [
+          'error',
+          {
+            ignoreRestSiblings: true
+          }
+        ]
+      }
+    },
+    // rules which apply only to TS
+    {
+      parserOptions: {
+        project: 'tsconfig.json'
+      },
+      files: ['**/*.{ts,tsx}'],
+      extends: ['plugin:@typescript-eslint/recommended', 'prettier'],
+      rules: {
+        'no-shadow': 'off',
+        '@typescript-eslint/no-shadow': 'error',
+        '@typescript-eslint/no-explicit-any': 2,
+        '@typescript-eslint/no-unnecessary-condition': 2,
+        '@typescript-eslint/explicit-module-boundary-types': 0,
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          {
+            argsIgnorePattern: '^_',
+            ignoreRestSiblings: true
+          }
+        ]
+      }
+    },
+    // rules which apply only to tests files
+    {
+      files: ['**/*.test.{ts,tsx,js,jsx}'],
+      rules: {
+        'i18n-text/no-en': 0
+      }
+    },
+    // rules which apply only to TS scripts
+    {
+      files: ['script/*.ts'],
+      rules: {
+        'import/no-nodejs-modules': [
+          'error',
+          {
+            allow: ['path', 'fs']
+          }
+        ]
+      }
+    },
+    // rules which apply only to Markdown
+    {
+      files: ['**/*.{md,mdx}'],
+      extends: ['plugin:mdx/recommended'],
+      settings: {
+        'mdx/code-blocks': true
+      },
+      rules: {
+        'prettier/prettier': 0
+      }
+    },
+    // rules which apply only to Markdown code blocks
+    {
+      files: ['**/*.{md,mdx}/**'],
+      parserOptions: {
+        project: false
+      },
+      rules: {
+        camelcase: 0,
+        'import/no-unresolved': 0,
+        'no-constant-condition': 0,
+        'no-console': 0,
+        'no-empty-pattern': 0,
+        'no-unused-vars': 0,
+        'no-undef': 0,
+        'react/no-unescaped-entities': 0,
+        'react/react-in-jsx-scope': 0,
+        'react/jsx-no-undef': 0,
+        'react/jsx-key': 0,
+        'react/jsx-no-comment-textnodes': 0,
+        'i18n-text/no-en': 0,
+        'import/no-anonymous-default-export': 0,
+        'import/extensions': 0,
+        'prettier/prettier': 0,
+        '@typescript-eslint/no-unnecessary-condition': 0,
+        '@typescript-eslint/no-unused-vars': 0,
+        'no-redeclare': 0
+      }
+    }
+  ]
+}

.github/workflows/ci.yml

@@ -0,0 +1,47 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  ci:
+    if: ${{ github.repository == 'primer/primitives' }}
+    name: Install and run tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile && cd docs && yarn install --frozen-lockfile
+
+      - name: Build
+        run: npm run build
+
+      - name: Build v2 tokens
+        run: npm run build:tokens
+
+      - name: Run linters
+        run: npm run lint
+
+      - name: Check formatting
+        run: npm run format
+
+      - name: Run unit tests
+        run: npm run test

.gitignore

@@ -6,3 +6,4 @@ node_modules
 /tokens-v2-private/
 /primitives/modes/
 /package-lock.json
+coverage/

.prettierignore

@@ -0,0 +1,12 @@
+tokens-v2-private/
+.cache/
+docs/public/
+# next line needed for <Note> reference
+docs/content/colors.mdx 
+.changeset/*.md
+coverage/
+
+# Ignore all files relating to v1 tokens
+# TODO: Remove after v1 tokens have been removed
+data/
+dist/

.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  ...require('@github/prettier-config')
+}

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib"
-}
+}

DEVELOP.md

@@ -15,8 +15,8 @@
             "xsmall": { <------------------------------------ Variant
                 "paddingInline": { <------------------------- Property
                     "condensed": { <------------------------- Modifier
-                        "value": "8px" 
-                    }, 
+                        "value": "8px"
+                    },
                 }
             }
         }
@@ -40,7 +40,7 @@ Tokens are transforms and built with [style-dictionary](https://amzn.github.io/s
 
 ## Formats
 
--`css/touch-target-mobile`: wraps mobile scoped tokens in a media query `(pointer: coarse)`.
--`css/touch-target-desktop`: wraps desktop scoped tokens in a media query `(pointer: fine)`.
+-`css/touch-target-mobile`: wraps mobile scoped tokens in a media query `(pointer: coarse)`. -`css/touch-target-desktop`: wraps desktop scoped tokens in a media query `(pointer: fine)`.
+
 - `custom/format/custom-media`: injects viewport tokens into a `@custom-media` query (requires PostCSS).
 - `json/docs`: builds a JSON file of all token data to be consumed by documentation.

README.md

@@ -6,7 +6,6 @@ This repo contains values for color, spacing, and typography primitives for use
 
 ![primer primitives diagram](https://user-images.githubusercontent.com/4608155/135384588-192c279f-020f-4544-a61f-559be6629f18.png)
 
-
 ## Install
 
 This repository is distributed on [npm][npm]. After [installing npm][install-npm], you can install `@primer/primitives` with this command.
@@ -35,15 +34,15 @@ To deprecate a variable, define a mapping from the deprecated variable to its re
     ...
 ```
 
-```js
+```
 // data/colors/deprecated.json
-{
+
 {
   "text.primary": "fg.default", // this means: `text.primary` is deprecated. Use `fg.default` instead
   "auto.blue.4": ["accent.fg, accent.emphasis"], // this means: `auto.blue.4` is deprecated. Use `accent.fg` or `accent.emphasis` instead
   "text.white": null // this means: `text.white` is deprecated. We don't have a replacement for it
 }
-}
+
 ```
 
 During the build process, the `deprecated.json` files will be added to a `dist/deprecated` directory organized by variable category:

__tests__/pathToDotNotation.test.js

@@ -1,5 +1,6 @@
-const pathToDotNotation = require('../build.js').pathToDotNotation
+const pathToDotNotation = require('../build').pathToDotNotation
 
+// eslint-disable-next-line i18n-text/no-en
 describe('Token formatters: dot.notation', () => {
   it('returns a valid token name in dot.notation', () => {
     expect(pathToDotNotation({path: ['red']})).toBe('red')
@@ -12,4 +13,4 @@ describe('Token formatters: dot.notation', () => {
     expect(() => pathToDotNotation({path: null})).toThrowError()
     expect(() => pathToDotNotation([])).toThrowError()
   })
-})
+})

__tests__/pathToKebabCase.test.js

@@ -1,5 +1,6 @@
-const pathToKebabCase = require('../build.js').pathToKebabCase
+const pathToKebabCase = require('../build').pathToKebabCase
 
+// eslint-disable-next-line i18n-text/no-en
 describe('Token formatters: kebab-case', () => {
   it('returns a valid token name in kebab-case', () => {
     expect(pathToKebabCase({path: ['red']})).toBe('red')
@@ -12,4 +13,4 @@ describe('Token formatters: kebab-case', () => {
     expect(() => pathToKebabCase({path: null})).toThrowError()
     expect(() => pathToKebabCase([])).toThrowError()
   })
-})
+})

__tests__/pathToPascalCase.test.js

@@ -1,5 +1,6 @@
-const pathToPascalCase = require('../build.js').pathToPascalCase
+const pathToPascalCase = require('../build').pathToPascalCase
 
+// eslint-disable-next-line i18n-text/no-en
 describe('Token formatters: PascalCase', () => {
   test('returns a valid token name in PascalCase', () => {
     expect(pathToPascalCase({path: ['red']})).toBe('Red')
@@ -12,4 +13,4 @@ describe('Token formatters: PascalCase', () => {
     expect(() => pathToPascalCase({path: null})).toThrowError()
     expect(() => pathToPascalCase([])).toThrowError()
   })
-})
+})