Merge pull request #232 from adobe/karstens/fix--little-improvements

feat: add prettier config and test npm script

.github/workflows/ci.yml

@@ -0,0 +1,16 @@
+name: CI
+on: pull_request
+jobs:
+  ci:
+    name: CI
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: moonrepo/setup-moon-action@v1
+      - run: moon ci
+      - uses: 'moonrepo/run-report-action@v1'
+        if: success() || failure()
+        with:
+          access-token: ${{ secrets.MOON_GH_TOKEN }}

.gitignore

@@ -1,12 +1,13 @@
 dist/
 node_modules/
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 .nyc_output/
 .cache/
 .DS_Store
 # moon
 .moon/cache
 .moon/docker
 .parcel-cache
+
+# husky
+.husky/_

.gitmodules

@@ -1,6 +1,6 @@
 [submodule "packages/contrast-colors/SAPC-APCA"]
 	path = packages/contrast-colors/SAPC-APCA
 	url = [email protected]:Myndex/SAPC-APCA.git
-[submodule "packages/ui/src/c3"]
-	path = packages/ui/src/c3
+[submodule "docs/ui/src/c3"]
+	path = docs/ui/src/c3
 	url = [email protected]:StanfordHCI/c3.git

.husky/.gitignore

@@ -0,0 +1 @@
+_

.moon/toolchain.yml

@@ -1,5 +1,5 @@
 # https://moonrepo.dev/docs/config/toolchain
-$schema: "https://moonrepo.dev/schemas/toolchain.json"
+$schema: 'https://moonrepo.dev/schemas/toolchain.json'
 
 # Extend and inherit an external configuration file. Must be a valid HTTPS URL or file system path.
 # extends: './shared/toolchain.yml'
@@ -10,15 +10,15 @@ $schema: "https://moonrepo.dev/schemas/toolchain.json"
 node:
   # The version to use. Must be a semantic version that includes major, minor, and patch.
   # We suggest using the latest active LTS version: https://nodejs.org/en/about/releases
-  version: "20.0.0"
+  version: '20.0.0'
 
   # The package manager to use when managing dependencies.
   # Accepts "npm" (default), "pnpm", or "yarn".
-  packageManager: "pnpm"
+  packageManager: 'pnpm'
 
   # The version of the package manager (above) to use.
   pnpm:
-    version: "8.15.1"
+    version: '8.15.4'
 
   # Add `node.version` as a constraint in the root `package.json` `engines`.
   addEnginesConstraint: true

.moon/workspace.yml

@@ -12,7 +12,7 @@ $schema: "https://moonrepo.dev/schemas/workspace.json"
 # path to the project folder as the map value. File paths are relative from the workspace root,
 # and cannot reference projects located outside the workspace boundary.
 projects:
-  - "apps/*"
+  - "docs/*"
   - "packages/*"
 
 # Configures the version control system to utilize within the workspace. A VCS

.prettierignore

@@ -0,0 +1,4 @@
+node_modules/
+*.min.js
+*.map
+*.snap

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "printWidth": 256,
+  "singleQuote": true,
+  "bracketSpacing": false,
+  "trailingComma": "none"
+}

README.md

@@ -84,27 +84,27 @@ Contributions are welcomed! Read the [Contributing Guide](./.github/CONTRIBUTING
 
 To get started [developing Leonardo UI](packages/ui#development):
 
-_Note: [Yarn](https://yarnpkg.com/) must be installed on your machine_
+_Note: [Pnpm](https://pnpm.io/installation) must be installed on your machine_
 
 ```sh
 # Install dependencies
-yarn install
+pnpm install
 
 # Change directory to Leonardo UI
-cd packages/ui
+cd docs/ui/
 
 # Run local server
-yarn dev
+pnpm dev
 ```
 
 To get started [developing Leonardo `contrast-colors` package](packages/contrast-colors#development):
 
 ```sh
 # From root, change directory to contrast-colors
-cd packages/contrast-colors
+cd packages/contrast-colors/
 
 # Run tests and watch for changes
-yarn dev
+pnpm dev
 ```
 
 Then, visit the live reloading web UIs here:

docs/ui/README.md

@@ -14,10 +14,10 @@ To get started developing Leonardo's UI:
 
 ```sh
 # Install dependencies
-yarn install
+pnpm install
 
 # Run local server
-yarn dev
+pnpm dev
 ```
 
 Then, visit the live reloading web UIs here:
@@ -28,30 +28,29 @@ http://localhost:1234/tools.html
 
 ### Cross-package development
 
-When making updates to `@adobe/leonardo-contrast-colors` while also developing the user interface, some issues may occur while linking the local dependancy. Follow these steps **every time you install or update an npm or yarn dependancy**:
+When making updates to `@adobe/leonardo-contrast-colors` while also developing the user interface, some issues may occur while linking the local dependency. 
+Follow these steps **every time you install or update an npm dependency**:
 
-1. Install your new dependancy
+1. Install your new dependency
 
 ```sh
-yarn install my-new-package
-// or
-npm install my-new-package
+pnpm add my-new-package
 ```
 
-2. Delete the cache
+2. Delete the cache (if it exists)
 
 ```
-leonardo/packages/ui/.cache
+rm -rf <leonardo-root>/.parcel-cache
 ```
 
 3. Link local Leonardo
 
 ```sh
-cd packages/contrast-colors
-npm link
-cd ..
-cd ui
-npm link @adobe/leonardo-contrast-colors
+cd packages/contrast-colors/
+pnpm link --global
+cd ../../
+cd docs/ui/
+pnpm link --global @adobe/leonardo-contrast-colors
 ```
 
 If you do not properly remove the cache and re-link the local `@adobe/leonardo-contrast-colors` package, things won't work right.

docs/ui/moon.yml

@@ -1,3 +1,108 @@
-$schema: "https://moonrepo.dev/schemas/project.json"
+# Copyright 2023 Adobe. All rights reserved.
+# This file is licensed to you under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License. You may obtain a copy
+# of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software distributed under
+# the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+# OF ANY KIND, either express or implied. See the License for the specific language
+# governing permissions and limitations under the License.
+$schema: https://moonrepo.dev/schemas/project.json
+type: application
+fileGroups:
+  sources:
+    - 'src/**/*'
+  output:
+    - 'dist/**/*'
 dependsOn:
   - contrast-colors
+tasks:
+  makeDistDir:
+    command: 'mkdir -p dist'
+    platform: system
+    outputs:
+      - dist
+  dev:
+    command: 'parcel src/index.html src/theme.html src/scales.html src/tools.html src/demo.html --no-hmr'
+    platform: node
+    inputs:
+      - '@globs(sources)'
+    local: true
+    deps:
+      - ~:makeDistDir
+      - ~:copyWorkflowIcons
+      - ~:copyUIIcons
+  clean:
+    command: 'rm -rf dist/*'
+    platform: system
+    deps:
+      - ~:makeDistDir
+    local: true
+  copyWorkflowIcons:
+    command:
+      - cp
+      - -r
+      - node_modules/@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg
+      - dist/
+    platform: system
+    deps:
+      - ~:makeDistDir
+    inputs:
+      - node_modules/@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg
+    outputs:
+      - dist/spectrum-icons.svg
+  copyUIIcons:
+    command:
+      - cp
+      - -r
+      - node_modules/@spectrum-css/icon/dist/spectrum-css-icons.svg
+      - dist/
+    platform: system
+    deps:
+      - ~:makeDistDir
+    inputs:
+      - node_modules/@spectrum-css/icon/dist/spectrum-css-icons.svg
+    outputs:
+      - dist/spectrum-css-icons.svg
+  copyCNAME:
+    command:
+      - cp
+      - -r
+      - src/CNAME
+      - dist/CNAME
+    platform: system
+    deps:
+      - ~:makeDistDir
+    inputs:
+      - src/CNAME
+    outputs:
+      - dist/CNAME
+  buildSite:
+    command:
+      - parcel
+      - build
+      - --no-optimize
+      - src/index.html
+      - src/scales.html
+      - src/tools.html
+      - src/theme.html
+      - src/demo.html
+      - --public-url
+      - ./
+    platform: node
+    deps:
+      - ~:makeDistDir
+      - ~:copyCNAME
+      - ~:copyUIIcons
+      - ~:copyWorkflowIcons
+    inputs:
+      - '@globs(sources)'
+    outputs:
+      - '@globs(output)'
+  deploySite:
+    command: 'gh-pages -d dist'
+    platform: node
+    local: true
+    deps:
+      - ~:clean
+      - ~:buildSite

docs/ui/package.json

@@ -5,49 +5,6 @@
   "description": "Demonstration UI for Leonardo",
   "repository": "[email protected]:adobe/leonardo.git",
   "author": "Nate Baldwin <[email protected]>",
-  "scripts": {
-    "serve": "npx parcel src/index.html src/theme.html src/scales.html src/tools.html src/demo.html --no-hmr",
-    "clean": "rm -rf dist/*",
-    "dev": "pnpm copyIcons && pnpm serve",
-    "copyIcons": "mkdir -p dist && pnpm copyWorkflowIcons && pnpm copyUIIcons",
-    "copyWorkflowIcons": "cp -r node_modules/@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg dist/",
-    "copyUIIcons": "cp -r node_modules/@spectrum-css/icon/dist/spectrum-css-icons.svg dist/",
-    "copyCNAME": "cp -r src/CNAME dist/CNAME",
-    "postPublish": "pnpm deploySite",
-    "buildSite": "npx parcel build --no-optimize src/index.html src/scales.html src/tools.html src/theme.html src/demo.html --public-url ./ && pnpm copyCNAME && pnpm copyIcons",
-    "deploySite": "pnpm clean && pnpm buildSite && npx gh-pages -d dist"
-  },
-  "keywords": [
-    "accessibility",
-    "inclusive",
-    "wcag",
-    "contrast",
-    "color",
-    "contrast-ratio",
-    "a11y",
-    "luminance",
-    "relative-luminance",
-    "accessible",
-    "a11ycolor",
-    "colour",
-    "adaptive",
-    "adaptive-color",
-    "color-generator",
-    "contrast-generator",
-    "color-contrast-generator"
-  ],
-  "license": "Apache-2.0",
-  "devDependencies": {
-    "@parcel/transformer-webmanifest": "^2.9.3",
-    "gh-pages": "^3.2.3",
-    "highlight.js": "^11.2.0",
-    "parcel": "^2.11.0",
-    "posthtml": "^0.16.5",
-    "posthtml-doctype": "^1.1.1",
-    "posthtml-include": "^1.7.2",
-    "posthtml-modules": "^0.7.4",
-    "sass": "^1.23.6"
-  },
   "dependencies": {
     "@adobe/focus-ring-polyfill": "^0.1.5",
     "@adobe/leonardo-contrast-colors": "workspace:^",
@@ -115,5 +72,40 @@
     "plotly.js-dist-min": "^2.5.1",
     "posthtml-parser": "^0.10.1",
     "simple-color-converter": "^2.1.13"
+  },
+  "keywords": [
+    "accessibility",
+    "inclusive",
+    "wcag",
+    "contrast",
+    "color",
+    "contrast-ratio",
+    "a11y",
+    "luminance",
+    "relative-luminance",
+    "accessible",
+    "a11ycolor",
+    "colour",
+    "adaptive",
+    "adaptive-color",
+    "color-generator",
+    "contrast-generator",
+    "color-contrast-generator"
+  ],
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@parcel/transformer-webmanifest": "^2.9.3",
+    "buffer": "^5.5.0||^6.0.0",
+    "gh-pages": "^3.2.3",
+    "highlight.js": "^11.2.0",
+    "parcel": "^2.11.0",
+    "posthtml": "^0.16.5",
+    "posthtml-doctype": "^1.1.1",
+    "posthtml-include": "^1.7.2",
+    "posthtml-modules": "^0.7.4",
+    "path-browserify": "^1.0.0",
+    "process": "^0.11.10",
+    "sass": "^1.23.6",
+    "vm-browserify": "^1.1.2"
   }
 }