Release/0.4.0

.circleci/config.yml

@@ -74,6 +74,11 @@ jobs:
       - checkout
       - node/install-packages:
           pkg-manager: yarn
+      - run:
+          name: Prepare Packages
+          command: yarn workspaces run prepare
+      - store_artifacts:
+          path: ./node_modules/@espressive/cascara # check to see why we do not have @espressive/cascara
       - save_cache:
           key: cascara-MONOREPO_INSTALLED-{{ .Revision }}
           paths:

.danger/README.md

@@ -0,0 +1,5 @@
+# Danger JS
+
+[Danger.js](https://danger.systems/js/) is being used to evaluate the most common issues we have with our pull requests. Instead of making developers ask for corrections in titles, description changes stating why dependencies were added, etc... we can instead automate checks for these items so developers can spend time evaluating code instead of evaluating if people are following our process.
+
+The goal is to have the team slowly add rules and tests over time to improve common, repetitive PR tasks.

.danger/index.ts

@@ -0,0 +1,66 @@
+import { danger, warn, fail, message } from 'danger';
+
+// Git specific values
+const modifiedFiles = danger.git.modified_files;
+const newFiles = danger.git.created_files;
+const changedFiles = [...modifiedFiles, ...newFiles];
+
+// Github specific values
+const github = {
+  description: danger.github.pr.body,
+  assignee: danger.github.pr.assignee,
+};
+
+// Changed file evaluations
+const changed = {
+  fixtures: modifiedFiles.filter((file) => file.includes('fixture.js')),
+  packages: changedFiles.filter((file) => file.includes('package.json')),
+  snapshots: modifiedFiles.filter((file) => file.includes('test.snap')),
+};
+
+// PR description sections
+const descSection = {
+  dependencies: '### Dependencies',
+  snapshots: '### Snapshots',
+};
+
+// Evaluates the description to see if it contains a particular section
+const hasDescriptionSection = (section: keyof typeof descSection) =>
+  github.description.includes(descSection[section]);
+
+// No PR is too small to include a description of why you made a change
+if (github.description.length < 10) {
+  warn('Please include a description of your PR changes.');
+}
+
+// Check that someone has been assigned to this PR
+if (github.assignee === null) {
+  warn(
+    'Please assign someone to merge this PR, and optionally include people who should review.'
+  );
+}
+
+// Check if we are modifying any Cosmos fixtures
+if (changed.fixtures) {
+  for (let file of changed.fixtures) {
+    message(`**${file}**: This fixture has been changed.`, file);
+  }
+}
+
+// Check if we are updating or adding any package dependencies
+if (changed.packages && !hasDescriptionSection('dependencies')) {
+  for (let file of changed.packages) {
+    fail(
+      `Please add a '${descSection.dependencies}' section to explain the reason we are changing dependencies.`
+    );
+  }
+}
+
+// Check if we are modifying any Jest snapshots
+if (changed.snapshots && !hasDescriptionSection('snapshots')) {
+  for (let file of changed.snapshots) {
+    fail(
+      `Please add a '${descSection.snapshots}' section to explain the reason we are changing snapshots.`
+    );
+  }
+}

.eslintrc.js

@@ -1,7 +1,7 @@
 // We should almost definitely not be adding rules here. Instead, we should be modifying rules in our eslint-config-espressive package
 
 module.exports = {
-  extends: '@espressive/eslint-config-espressive',
+  extends: ['@espressive', 'prettier'], // prettier must be last so we override any rules that potentially conflict with Prettier
   overrides: [
     {
       files: ['**/next-*/**/*', 'docs/**/*'],

.github/workflows/autoupdate.yml

@@ -0,0 +1,22 @@
+# This action will update any of our PRs that are out of date with their target branch.
+# tibdex/auto-update@v1 will only log the issue if there is a failure, usually due to conflicts
+# https://github.com/tibdex/auto-update/issues/2
+
+name: Auto-update
+on:
+  push:
+    # If pull requests are always based on the same branches, only triggering the workflow when these branches receive new commits will minimize the workflow execution.
+    branches:
+      - develop
+      - main
+
+jobs:
+  Auto:
+    name: Auto-update
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: tibdex/auto-update@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          # Uncomment to ignore pull requests without the specified label.
+          # label: auto-update

.github/workflows/danger.yml

@@ -0,0 +1,27 @@
+name: 'Danger JS'
+on:
+  pull_request:
+    types:
+      [
+        assigned,
+        edited,
+        labeled,
+        opened,
+        reopened,
+        synchronize,
+        unassigned,
+        unlabeled,
+      ]
+
+jobs:
+  danger:
+    name: Danger JS
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: Dangerfile
+        uses: danger/danger-js@10.6.2
+        with:
+          args: '--dangerfile .danger/index.ts'
+        env:
+          DANGER_GITHUB_API_TOKEN: ${{ secrets.DANGER_GITHUB_API_TOKEN }}

.vscode/settings.json

@@ -6,6 +6,9 @@
     "editor.wordWrap": "on",
     "editor.wrappingIndent": "same"
   },
+  "[yaml]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "autoSnippet.snippets": [
     {
       "pattern": "**/[A-Z]*.js",

app-tests/_templates/next-template/src/pages/_app.js

@@ -1,7 +1,15 @@
+import pt from 'prop-types';
+
 import '@espressive/legacy-css';
 
-function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />;
-}
+const propTypes = {
+  Component: pt.element,
+  // eslint-disable-next-line react/forbid-prop-types -- We do not know what the object params might be in this case
+  pageProps: pt.object,
+};
+
+const MyApp = ({ Component, pageProps }) => <Component {...pageProps} />;
+
+MyApp.propTypes = propTypes;
 
 export default MyApp;

app-tests/_templates/next-template/src/pages/api/hello.js

@@ -1,6 +1,8 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
-export default (req, res) => {
+const hello = (req, res) => {
   res.statusCode = 200;
   res.json({ name: 'John Doe' });
 };
+
+export default hello;

app-tests/_templates/next-template/src/pages/index.js

@@ -2,7 +2,7 @@ import Head from 'next/head';
 import pkg from '../../package';
 import styles from '../styles/Home.module.css';
 
-export default function Home() {
+const Home = () => {
   return (
     <div className={styles.container}>
       <Head>
@@ -17,4 +17,6 @@ export default function Home() {
       </main>
     </div>
   );
-}
+};
+
+export default Home;

app-tests/next-button/src/pages/_app.js

@@ -1,7 +1,15 @@
+import pt from 'prop-types';
+
 import '@espressive/legacy-css';
 
-function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />;
-}
+const propTypes = {
+  Component: pt.element,
+  // eslint-disable-next-line react/forbid-prop-types -- We do not know what the object params might be in this case
+  pageProps: pt.object,
+};
+
+const MyApp = ({ Component, pageProps }) => <Component {...pageProps} />;
+
+MyApp.propTypes = propTypes;
 
 export default MyApp;

app-tests/next-button/src/pages/api/hello.js

@@ -1,6 +1,8 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
-export default (req, res) => {
+const hello = (req, res) => {
   res.statusCode = 200;
   res.json({ name: 'John Doe' });
 };
+
+export default hello;

app-tests/next-button/src/pages/index.js

@@ -4,7 +4,7 @@ import styles from '../styles/Home.module.css';
 
 import { Button } from '@espressive/cascara';
 
-export default function Home() {
+const Home = () => {
   return (
     <div className={styles.container}>
       <Head>
@@ -19,4 +19,6 @@ export default function Home() {
       </main>
     </div>
   );
-}
+};
+
+export default Home;

app-tests/next-layout-admin/src/pages/_app.js

@@ -1,7 +1,15 @@
+import pt from 'prop-types';
+
 import '@espressive/legacy-css';
 
-function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />;
-}
+const propTypes = {
+  Component: pt.element,
+  // eslint-disable-next-line react/forbid-prop-types -- We do not know what the object params might be in this case
+  pageProps: pt.object,
+};
+
+const MyApp = ({ Component, pageProps }) => <Component {...pageProps} />;
+
+MyApp.propTypes = propTypes;
 
 export default MyApp;

app-tests/next-layout-admin/src/pages/api/hello.js

@@ -1,6 +1,8 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
-export default (req, res) => {
+const hello = (req, res) => {
   res.statusCode = 200;
   res.json({ name: 'John Doe' });
 };
+
+export default hello;

app-tests/next-layout-admin/src/pages/index.js

@@ -3,7 +3,7 @@ import pkg from '../../package';
 
 import { Admin } from '@espressive/cascara';
 
-export default function Home() {
+const Home = () => {
   return (
     <Admin>
       <Head>
@@ -20,4 +20,6 @@ export default function Home() {
       <Admin.Main>{'Admin.Main'}</Admin.Main>
     </Admin>
   );
-}
+};
+
+export default Home;

babel.config.js

@@ -1,19 +1,4 @@
 module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        modules: false,
-        loose: true,
-      },
-    ],
-    '@babel/preset-react',
-  ],
-  plugins: [
-    '@babel/plugin-proposal-export-default-from',
-    '@babel/plugin-proposal-optional-chaining',
-    ['@babel/plugin-proposal-class-properties', { loose: true }],
-  ],
   env: {
     // Jest
     test: {
@@ -23,4 +8,24 @@ module.exports = {
       ],
     },
   },
+  plugins: [
+    '@babel/plugin-proposal-export-default-from',
+    '@babel/plugin-proposal-optional-chaining',
+    [
+      '@babel/plugin-proposal-class-properties',
+      {
+        loose: true,
+      },
+    ],
+  ],
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        loose: true,
+        modules: false,
+      },
+    ],
+    '@babel/preset-react',
+  ],
 };

docs/package.json

@@ -1,14 +1,15 @@
 {
   "name": "docs",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "private": true,
   "scripts": {
     "start": "next-remote-watch ../packages/cascara",
-    "build": "next build"
+    "build": "next build",
+    "prepare": "echo 'No prepare scripts for this package'"
   },
   "dependencies": {
-    "@espressive/cascara": "file:../packages/cascara",
-    "@espressive/legacy-css": "file:../utils/legacy-css",
+    "@espressive/cascara": "^0.4.0",
+    "@espressive/legacy-css": "^2.0.4",
     "framer-motion": "2.5.5",
     "next": "10.0.5",
     "next-mdx-remote": "1.0.0",

docs/src/components/Asciagram/Asciagram.js

@@ -21,7 +21,7 @@ const Asciagram = ({
   <details
     {...rest}
     className={
-      rest?.className ? styles.Details + ' ' + rest.className : styles.Details
+      rest?.className ? `${styles.Details} ${rest.className}` : styles.Details
     }
     open={isInitialOpen}
   >