Merge pull request #189 from ASU/uds-494-core-ui-buttons

feat(components-core): Implement core React Buttons

Author: mlsamuelson

.vscode/settings.json

@@ -1,25 +1,8 @@
 {
-  "editor.rulers": [
-    80
-  ],
+  "editor.rulers": [80],
   "editor.wordWrapColumn": 80,
   "editor.detectIndentation": false,
   "editor.tabSize": 2,
-  "eslint.autoFixOnSave": true,
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-  ],
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  },
-  "editor.formatOnSave": true,
-  "[javascript]": {
-    "editor.formatOnSave": false
-  },
-  "[javascriptreact]": {
-    "editor.formatOnSave": false
-  },
   "files.trimTrailingWhitespace": true,
   "files.insertFinalNewline": true,
   "files.exclude": {

package.json

@@ -57,6 +57,7 @@
     "eslint-config-prettier": "^8.2.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-import-helpers": "^1.1.0",
+    "eslint-plugin-jest": "^24.3.5",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.23.2",

packages/components-core/.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
     "plugin:react/recommended",
     "airbnb",
     "plugin:prettier/recommended", // Make this the last element so prettier config overrides other formatting rules
+    // "plugin:jest/recommended",
   ],
   parserOptions: {
     ecmaFeatures: {
@@ -20,10 +21,14 @@ module.exports = {
     ecmaVersion: 12,
     sourceType: "module",
   },
-  plugins: ["react"],
+  plugins: [
+    "react",
+    // "jest"
+  ],
   rules: {
     "react/jsx-filename-extension": "off",
     "prettier/prettier": ["error", {}, { usePrettierrc: true }], // Use our .prettierrc file as source
     "dot-notation": "off",
+    "import/prefer-default-export": "off",
   },
 };

packages/components-core/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  verbose: true,
+  setupFilesAfterEnv: ["./setupTests.js"],
+  transform: {
+    "^.+\\.js$": "babel-jest",
+    "^.+\\.css$": "jest-transform-css",
+    "\\.(jpg|jpeg|png|gif|webp|svg)$": "jest-transform-file",
+  },
+};

packages/components-core/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "components-core",
+  "name": "@asu-design-system/components-core",
   "version": "1.0.0",
   "description": "Core UDS Preact UI components required by other higher-order Preact packages",
   "author": "Nathan Rollins <[email protected]>",
@@ -10,8 +10,8 @@
     "url": "git+https://github.com/ASU/asu-unity-stack.git"
   },
   "scripts": {
-    "lint:disabled": "eslint --fix 'src/**/*.{js,jsx}' --ignore-path ../../.eslintignore",
-    "test": "echo \"Error: run tests from root\" && exit 1",
+    "lint": "eslint --fix 'src/**/*.{js,jsx}' --ignore-path ../../.eslintignore",
+    "test": "jest --config=./jest.config.js",
     "start:dev": "webpack-dashboard -- webpack serve -c webpack/webpack.dev.js",
     "build": "webpack -c webpack/webpack.prod.js",
     "build:stats": "webpack -c webpack/webpack.prod.js --profile --json=compilation-stats.json",
@@ -25,13 +25,21 @@
     "@asu-design-system/bootstrap4-theme": "latest",
     "@babel/core": "^7.13.14",
     "@storybook/addon-actions": "^6.2.3",
+    "@storybook/addon-docs": "^6.2.9",
     "@storybook/addon-essentials": "^6.2.3",
     "@storybook/addon-links": "^6.2.3",
     "@storybook/react": "^6.2.3",
+    "@testing-library/react": "^11.2.6",
     "babel-loader": "^8.2.2",
     "css-loader": "^5.2.0",
     "file-loader": "^6.2.0",
     "glob": "^7.1.6",
+    "jest": "^26.6.3",
+    "jest-image-snapshot": "^4.4.1",
+    "jest-transform-css": "^2.1.0",
+    "jest-transform-file": "^1.1.1",
+    "jsdom-screenshot": "^4.0.0",
+    "postcss": "^7.0.2",
     "semantic-release": "^17.4.2",
     "semantic-release-monorepo": "^7.0.4",
     "storybook-css-modules-preset": "^1.0.7",
@@ -51,6 +59,7 @@
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-reveal": "^1.2.2",
+    "react-router-dom": "^5.2.0",
     "react-share": "^4.4.0",
     "reactstrap": "^8.9.0"
   }

packages/components-core/setupTests.js

@@ -0,0 +1,3 @@
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+
+expect.extend({ toMatchImageSnapshot });