chore/issue 24 formatting and linting (#40)

.github/ISSUE_TEMPLATE.md

@@ -4,4 +4,4 @@
 
 ## Details
 
-<!-- Please provide additional details that would be helpful to the team when reviewing this issue. -->
+<!-- Please provide additional details that would be helpful to the team when reviewing this issue. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -14,4 +14,4 @@ We love contributions and appreciate any help you can offer!
 1. [x] Thing I fixed
 1. [x] Other thing I updated
 1. [x] Docs I updated
--->
+-->

.github/workflows/ci.yml

@@ -3,7 +3,6 @@ name: Continuous Integration
 on: [pull_request]
 
 jobs:
-
   build:
     runs-on: ubuntu-20.04
 
@@ -12,23 +11,26 @@ jobs:
         node: [18]
 
     steps:
-    - uses: actions/checkout@v4
-    - name: Use Node.js ${{ matrix.node }}
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ matrix.node }}
-    - name: Installing project dependencies
-      run: |
-        npm ci
-    # - name: Lint
-    #   run: |
-    #     npm run lint
-    - name: Test
-      run: |
-        npm run test
-    - name: Build Storybook
-      run: |
-        npm run story:build
-    - name: Build Project
-      run: |
-        npm run build
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+      - name: Installing project dependencies
+        run: |
+          npm ci
+      - name: Format
+        run: |
+          npm run format:check
+      - name: Lint
+        run: |
+          npm run lint
+      - name: Test
+        run: |
+          npm run test
+      - name: Build Storybook
+        run: |
+          npm run story:build
+      - name: Build Project
+        run: |
+          npm run build

.husky/.gitignore

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

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.ls-lint.yml

@@ -0,0 +1,24 @@
+ls:
+  .config.js: kebabcase
+  .spec.js: kebabcase
+  .stories.js: kebabcase
+  .js: kebabcase
+  .json: kebabcase
+  .css: kebabcase
+  .html: kebabcase
+  .ico: kebabcase
+  .jpg: kebabcase
+  .png: kebabcase
+  .webp: kebabcase
+  .svg: kebabcase
+  .tff: kebabcase
+  .woff: kebabcase
+  .woff2: kebabcase
+
+ignore:
+  - .git
+  - .greenwood
+  - node_modules
+  - public
+  - reports
+  - storybook-static

.nvmrc

@@ -1 +1 @@
-18.15.0
+18.18.0

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 100
+}

.storybook/main.js

@@ -1,11 +1,7 @@
 /** @type { import('@storybook/web-components-vite').StorybookConfig } */
 const config = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-  ],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@chromatic-com/storybook"],
   framework: {
     name: "@storybook/web-components-vite",
     options: {},
@@ -15,4 +11,4 @@ const config = {
   },
 };
 
-export default config;
+export default config;

.storybook/preview.js

@@ -1,5 +1,5 @@
-import '../src/styles/theme.css';
-import '../src/styles/main.css';
+import "../src/styles/theme.css";
+import "../src/styles/main.css";
 
 /** @type { import('@storybook/web-components').Preview } */
 const preview = {
@@ -13,4 +13,4 @@ const preview = {
   },
 };
 
-export default preview;
+export default preview;

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing
 
-Thanks for contributing to the GreenwoodJS website!  This document aims to help guide contributions into this project.
+Thanks for contributing to the GreenwoodJS website! This document aims to help guide contributions into this project.
 
 ## Project Structure
 
@@ -12,14 +12,14 @@ The layout of the project is as follows:
 - _/stories/_ - General developer documentation about the project for developers
 - _/styles/_ - Global theme and styles
 
-> [!NOTE]
+> [!NOTE]  
 > _Please review the documentation contained in this project's Storybook by running `npm run story:dev` and going through the content in the **Overview** section_
 
 ## Documentation Changes
 
 ### Greenwood Features
 
-Documentation changes specific to an in progress / unreleased feature in Greenwood should be made to the corresponding feature branch in this repository aligning with that Greenwood release.  This can be determined at the time of submitting your PR to Greenwood in coordination with the maintainers.
+Documentation changes specific to an in progress / unreleased feature in Greenwood should be made to the corresponding feature branch in this repository aligning with that Greenwood release. This can be determined at the time of submitting your PR to Greenwood in coordination with the maintainers.
 
 For example, if the next release your feature is targeting for Greenwood is 1.1.0, the git workflow would be as follows:
 
@@ -31,18 +31,17 @@ $ git checkout -b content/issue-xxx-the-feature
 
 Where `issue-xxx` is the corresponding issue in the GreenwoodJS project.
 
-
 ### Website
 
-General changes to the website can be made by submitting a PR directly to the main branch.  This includes typos, style changes, and general enhancements to the website as a whole.
+General changes to the website can be made by submitting a PR directly to the main branch. This includes typos, style changes, and general enhancements to the website as a whole.
 
 ## Development
 
 ### Styling
 
 All global theming and general styles should go in _src/styles/theme.css_, like font family and CSS custom properties to be used throughout the site.
 
-[Open Props](https://open-props.style/) are used in this project to provide a set of consistent and re-usable design system tokens.  Please review these first before creating any new custom values or variables.
+[Open Props](https://open-props.style/) are used in this project to provide a set of consistent and re-usable design system tokens. Please review these first before creating any new custom values or variables.
 
 ### Components
 
@@ -63,7 +62,7 @@ export default class MyComponent extends HTMLElement {
 <script src="../components/my-component/my-component.js" type="module" data-gwd-opt="static">
 ```
 
-> [!TIP]
+> [!TIP]  
 > _For highly interactive components **without** a strong need for static content and / or SEO, Declarative Shadow DOM can be used instead._
 
 The CSS for any Light DOM components should go into _src/styles/main.css_
@@ -75,7 +74,6 @@ The CSS for any Light DOM components should go into _src/styles/main.css_
 }
 ```
 
-
 ### Testing
 
 For each component, a testing file should be included to test basic functionality, living alongside the component in its directory.
@@ -89,7 +87,7 @@ components/
 
 ### Storybook
 
-For each component, a Storybook file should be included to demonstrate basic functionality, living alongside the component in its directory.  Generally a default story should be sufficient.
+For each component, a Storybook file should be included to demonstrate basic functionality, living alongside the component in its directory. Generally a default story should be sufficient.
 
 ```sh
 components/
@@ -100,4 +98,4 @@ components/
 
 ## Hosting and Deployment
 
-This project is hosted on Netlify and automatically deploys on each merge into main.  Release branches will be curated over the course of a Greenwood release cycle and then merged at the time the new Greenwood release is published to NPM.
+This project is hosted on Netlify and automatically deploys on each merge into main. Release branches will be curated over the course of a Greenwood release cycle and then merged at the time the new Greenwood release is published to NPM.