Install prettier and format repository

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,14 +4,14 @@ about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/custom.md

@@ -4,7 +4,4 @@ about: Describe this issue template's purpose here.
 title: ''
 labels: ''
 assignees: ''
-
 ---
-
-

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,6 @@ about: Suggest an idea for this project
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

.prettierignore

@@ -0,0 +1,8 @@
+# Ignore artifacts:
+.yarn/
+build
+node_modules
+public
+
+# Ignore yml files for now
+*.yml

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2
+}

.storybook/CODTheme.js

@@ -1,40 +1,41 @@
-import { create } from '@storybook/theming';
-
-export default create({
-    base: 'light',
-
-    colorPrimary: 'white',
-    colorSecondary: '#004445',
-
-    // UI
-    appBg: 'white',
-    appContentBg: '#e6e6e6',
-    appBorderColor: '#004445',
-    appBorderRadius: 6,
-
-    // Typography
-    fontBase: '"Montserrat", sans-serif',
-    fontCode: '"Montserrat", monospace',
-
-    // Text colors
-    textColor: 'black',
-    textInverseColor: 'white',
-    textMutedColor: '#666666',
-
-    // Toolbar default and active colors
-    barTextColor: 'white',
-    barSelectedColor: '#9FD5B3',
-    barBg: '#004445',
-
-    // Form colors
-    inputBg: 'white',
-    inputBorder: '#004445',
-    inputTextColor: 'black',
-    inputBorderRadius: 4,
-
-    // Brand assets
-    brandTitle: 'City of Detroit',
-    brandUrl: 'https://detroitmi.gov',
-    brandImage: 'https://detroitmi.gov/sites/detroitmi.localhost/files/2023-05/city-of-detroit-logo-1.png',
-    brandTarget: '_self',
-});
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'light',
+
+  colorPrimary: 'white',
+  colorSecondary: '#004445',
+
+  // UI
+  appBg: 'white',
+  appContentBg: '#e6e6e6',
+  appBorderColor: '#004445',
+  appBorderRadius: 6,
+
+  // Typography
+  fontBase: '"Montserrat", sans-serif',
+  fontCode: '"Montserrat", monospace',
+
+  // Text colors
+  textColor: 'black',
+  textInverseColor: 'white',
+  textMutedColor: '#666666',
+
+  // Toolbar default and active colors
+  barTextColor: 'white',
+  barSelectedColor: '#9FD5B3',
+  barBg: '#004445',
+
+  // Form colors
+  inputBg: 'white',
+  inputBorder: '#004445',
+  inputTextColor: 'black',
+  inputBorderRadius: 4,
+
+  // Brand assets
+  brandTitle: 'City of Detroit',
+  brandUrl: 'https://detroitmi.gov',
+  brandImage:
+    'https://detroitmi.gov/sites/detroitmi.localhost/files/2023-05/city-of-detroit-logo-1.png',
+  brandTarget: '_self',
+});

.storybook/main.js

@@ -1,15 +1,22 @@
 module.exports = {
-  "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", '@storybook/addon-a11y', '@storybook/addon-coverage', '@storybook/addon-interactions', "@storybook/addon-mdx-gfm"],
-  "framework": {
-    name: "@storybook/web-components-webpack5",
-    options: {}
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-a12y',
+    '@storybook/addon-coverage',
+    '@storybook/addon-interactions',
+    '@storybook/addon-mdx-gfm',
+  ],
+  framework: {
+    name: '@storybook/web-components-webpack5',
+    options: {},
   },
   features: {
-    interactionsDebugger: true
+    interactionsDebugger: true,
   },
   staticDirs: ['../public'],
   docs: {
-    autodocs: true
-  }
-};
+    autodocs: true,
+  },
+};

.storybook/manager-head.html

@@ -1,4 +1,7 @@
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap" rel="stylesheet">
-<link rel="shortcut icon" href="favicon.ico">
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap"
+  rel="stylesheet"
+/>
+<link rel="shortcut icon" href="favicon.ico" />

.storybook/manager.js

@@ -1,6 +1,6 @@
-import CODTheme from './CODTheme';
-import { addons } from '@storybook/addons';
-
-addons.setConfig({
-  theme: CODTheme,
-});
+import CODTheme from './CODTheme';
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+  theme: CODTheme,
+});

.storybook/preview.js

@@ -2,11 +2,11 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+};

CHANGELOG.md

@@ -118,7 +118,6 @@
 - Moving image sources to slot. [#8](https://github.com/jedgar1mx/COD-Design-System/pull/8) ([@jedgar1mx](https://github.com/jedgar1mx))
 - GitHub.actions [#1](https://github.com/jedgar1mx/COD-Design-System/pull/1) ([@jedgar1mx](https://github.com/jedgar1mx))
 
-
 #### 📝 Documentation
 
 - Issue.49 [#50](https://github.com/jedgar1mx/COD-Design-System/pull/50) ([@jedgar1mx](https://github.com/jedgar1mx))

README.md

@@ -1,45 +1,50 @@
 # COD-Design-System
+
 Design System proof of concept
 
 ## Getting Started
 
 This project was created using:
- - [Webpack](https://webpack.js.org/) as a web application bundler.
- - [Yarn](https://classic.yarnpkg.com/en/) to manage project dependencies.
- - [MapLibre](https://maplibre.org/) for map framework.
- - [Storybook](https://storybook.js.org/) for UI component management.
+
+- [Webpack](https://webpack.js.org/) as a web application bundler.
+- [Yarn](https://classic.yarnpkg.com/en/) to manage project dependencies.
+- [MapLibre](https://maplibre.org/) for map framework.
+- [Storybook](https://storybook.js.org/) for UI component management.
 
 ## Using in Your Project
+
 1. Load package into your project
-    ```
-    yarn add @cityofdetroit/cod-design-system
-    ```
-    ```
-    npm i @cityofdetroit/cod-design-system
-    ```
+   ```
+   yarn add @cityofdetroit/cod-design-system
+   ```
+   ```
+   npm i @cityofdetroit/cod-design-system
+   ```
 
-## Contributing 
+## Contributing
 
 ### Setup Local Environment
 
 1. Download the repo.
-    ```
-    $ git clone [email protected]:jedgar1mx/COD-Design-System.git
-    ```
+   ```
+   $ git clone [email protected]:jedgar1mx/COD-Design-System.git
+   ```
 2. Install node dependencies.
-    ```
-    $ yarn
-    ```
+
+   ```
+   $ yarn
+   ```
 
 3. Run local instance.
-    ```
-    $ yarn storybook
-    ```
+
+   ```
+   $ yarn storybook
+   ```
 
 4. Build storybook.
-    ```
-    $ yarn build-storybook
-    ```
+   ```
+   $ yarn build-storybook
+   ```
 
 ### Testing
 
@@ -48,6 +53,6 @@ Use Storybooks [built-in test-runner](https://storybook.js.org/docs/react/writin
 1. Run a local instance of storybook in one process.
 
 2. Invoke the test runner in another. Note: depending on the power of you machine, you may have to reduce concurrent workers to avoid test timeout failures. Use `--maxWorkers=2` to limit the workers to two.
-    ```
-    $ yarn test-storybook
-    ```
+   ```
+   $ yarn test-storybook
+   ```

babel.config.js

@@ -1,31 +1,31 @@
-module.exports = {
-  presets: [
-    [
-      "@babel/preset-env",
-      {
-        modules: false
-      }
-    ],
-    "@babel/preset-react"
-  ],
-  plugins: [
-    "@babel/plugin-transform-runtime",
-    "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-proposal-class-properties"
-  ],
-  env: {
-    production: {
-      only: ["src"],
-      plugins: [
-        [
-          "transform-react-remove-prop-types",
-          {
-            removeImport: true
-          }
-        ],
-        "@babel/plugin-transform-react-inline-elements",
-        "@babel/plugin-transform-react-constant-elements"
-      ]
-    }
-  }
-};
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        modules: false,
+      },
+    ],
+    '@babel/preset-react',
+  ],
+  plugins: [
+    '@babel/plugin-transform-runtime',
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-proposal-class-properties',
+  ],
+  env: {
+    production: {
+      only: ['src'],
+      plugins: [
+        [
+          'transform-react-remove-prop-types',
+          {
+            removeImport: true,
+          },
+        ],
+        '@babel/plugin-transform-react-inline-elements',
+        '@babel/plugin-transform-react-constant-elements',
+      ],
+    },
+  },
+};