Merge pull request #32 from uswds/jm/gh-action-formatting

USWDS-Next - CI: Create a GH action to test code formatting

.github/workflows/formatting.yml

@@ -0,0 +1,18 @@
+name: Code formatting
+on: push
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "18.x"
+          cache: "npm"
+      - name: Install dependencies
+        run: npm ci
+      - name: Run prettier JavaScript
+        run: "npm run prettier:js"
+      - name: Run prettier Markdown
+        run: "npm run prettier:md"

.github/workflows/ui-test.yml

@@ -8,7 +8,8 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '18.x'
+          node-version: "18.x"
+          cache: "npm"
       - name: Install dependencies
         run: npm ci
       - name: Install playwright

.prettierignore

@@ -0,0 +1 @@
+package.json

.prettierrc

@@ -0,0 +1 @@
+{}

.storybook/UswdsTheme.js

@@ -1,10 +1,11 @@
-import { create } from '@storybook/theming/create';
+import { create } from "@storybook/theming/create";
 
 export default create({
-  base: 'light',
+  base: "light",
   brandTitle: "USWDS Next",
-  fontBase: '"Public Sans Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-  colorPrimary: '#4a77b4',
-  colorSecondary: '#2672de',
-  textColor: '#1b1b1b',
+  fontBase:
+    '"Public Sans Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+  colorPrimary: "#4a77b4",
+  colorSecondary: "#2672de",
+  textColor: "#1b1b1b",
 });

.storybook/main.js

@@ -8,7 +8,7 @@ const config = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
-    "@storybook/addon-a11y"
+    "@storybook/addon-a11y",
   ],
   framework: {
     name: "@storybook/web-components-vite",

README.md

@@ -1,12 +1,11 @@
 # USWDS.next (aka Screaming Eagle 🦅)
 
 > [!CAUTION]
-> Work on the next version of the Design System will happen in this repo. At the moment, any code in here is exploratory only, and in an extremely pre-alpha stage. APIs *will* change.
+> Work on the next version of the Design System will happen in this repo. At the moment, any code in here is exploratory only, and in an extremely pre-alpha stage. APIs _will_ change.
 
+Over the course of the next several months (and beyond), we will incrementally build the next version of the Design System. This version will introduce [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)-based implementations of Design System elements. We intend that, as we ship new components and new versions of existing components, you will be able to use them alongside older versions of USWDS.
 
-Over the course of the next several months (and beyond), we will incrementally build the next version of the Design System. This version will introduce [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)-based implmentations of Design System elements. We intend that, as we ship new components and new versions of existing components, you will be able to use them alongside older versions of USWDS.
-
-* [More on our decision to use Web Components](https://github.com/uswds/uswds-proposals/blob/main/decisions/0001-use-web-components.md)
+- [More on our decision to use Web Components](https://github.com/uswds/uswds-proposals/blob/main/decisions/0001-use-web-components.md)
 
 ## Guiding Principles
 

package.json

@@ -8,6 +8,8 @@
     "dev": "vite",
     "prettier:js": "npx prettier --check './src/components/**/*.js'",
     "prettier:js:fix": "npx prettier --write './src/components/**/*.js'",
+    "prettier:md": "npx prettier --check '**/*.{md,mdx}'",
+    "prettier:md:fix": "npx prettier --write '**/*.{md,mdx}'",
     "start": "npm run storybook",
     "storybook:build": "storybook build",
     "storybook": "storybook dev -p 8008",

storybook/readme.mdx

@@ -3,4 +3,4 @@ import Readme from "../README.md?raw";
 
 <Meta title="README" />
 
-<Markdown>{ Readme }</Markdown>
+<Markdown>{Readme}</Markdown>

storybook/welcome.mdx

@@ -34,9 +34,9 @@ npm run start
     title="Base"
     subtitle="Grayscale colors"
     colors={{
-      White: '#FFFFFF',
-      "Longer custom text": '#F3F3F3',
-      Black: "#000"
+      White: "#FFFFFF",
+      "Longer custom text": "#F3F3F3",
+      Black: "#000",
     }}
   />
 </ColorPalette>
@@ -47,13 +47,14 @@ npm run start
 
 export const typography = {
   type: {
-    primary: 'Public Sans Web, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol',
+    primary:
+      "Public Sans Web, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
   },
   weight: {
-    regular: '400',
-    bold: '700',
-    extrabold: '800',
-    black: '900',
+    regular: "400",
+    bold: "700",
+    extrabold: "800",
+    black: "900",
   },
   size: {
     xs1: 13,
@@ -68,7 +69,8 @@ export const typography = {
   },
 };
 
-export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+export const SampleText =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
 
 **Font:** Public Sans Web