Prettier and namespace updates (#3)

* Updated namespace (remobed lab49) and added prettier

* fixed prettier issues in unstaged file

* fixed special character issue on publush.yml

* fixed special character, other side

* Squashed commit of the following:

commit 8994a32
Author: Troy Prince <[email protected]>
Date:   Thu Jun 10 14:42:08 2021 -0400

    Added full fetch depth

commit c02922e
Author: Troy Prince <[email protected]>
Date:   Thu Jun 10 14:35:31 2021 -0400

    added headless chrome launcher for ci/cd

commit 666aafb
Author: Troy Prince <[email protected]>
Date:   Thu Jun 10 14:00:59 2021 -0400

    all in one job

commit e23642c
Author: Troy Prince <[email protected]>
Date:   Thu Jun 10 13:28:15 2021 -0400

    merged to one job

commit 7049b93
Author: Troy Prince <[email protected]>
Date:   Thu Jun 10 13:26:32 2021 -0400

    added chromatic action in separate file

* removed documentation.json from git tracking

* Created the 'Make it Nice' story for storybook, updated the component classes accordingly, and config for loading a global style to storybook

* moved and renamed make-it-nice styles file

.eslintrc.json

@@ -15,7 +15,9 @@
       "extends": [
         "plugin:@angular-eslint/ng-cli-compat",
         "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
-        "plugin:@angular-eslint/template/process-inline-templates"
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "plugin:prettier/recommended",
+        "prettier"
       ],
       "rules": {
         "dot-notation": "error",
@@ -25,6 +27,7 @@
         "no-empty-function": "off",
         "no-shadow": "error",
         "no-unused-expressions": "error",
+        "no-unused-vars": "error",
         "no-use-before-define": "off",
         "semi": "error"
       }
@@ -39,6 +42,14 @@
       "rules": {
         "eqeqeq": "error"
       }
+    },
+    {
+      "files": ["*.html"],
+      "excludedFiles": ["*inline-template-*.component.html"],
+      "extends": ["plugin:prettier/recommended"],
+      "rules": {
+        "prettier/prettier": ["error", { "parser": "angular" }]
+      }
     }
   ]
 }

.github/actions/chromatic.yml

@@ -0,0 +1,12 @@
+# .github/actions/chromatic.yml
+
+name: 'Chromatic'
+descriptions: 'Deploys storybook to Chromatic'
+
+runs:
+  using: "composite":
+  steps:
+    uses: chromaui/action@v1
+    with:
+      token: ${{ secrets.GITHUB_TOKEN }}
+      projectToken: "02c78aa7d86f"

.github/workflows/github-actions.yml

@@ -1,9 +1,21 @@
 name: Angular Value Flash CI/CD
 on: [push]
 jobs:
-  lint:
+  on-push-actions:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - run: npm install
-      - run: npm run lint
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # Required to retrieve git history for Chromatic
+      - name: Install dependencies
+        run: npm install
+      - name: Lint
+        run: npm run lint
+      - name: Test
+        run: npm run test:headless
+      - name: Chromatic
+        uses: chromaui/action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: "02c78aa7d86f"

.github/workflows/publish.yml

@@ -16,4 +16,4 @@ jobs:
       - run: npm run build:prod
       - run: npm run publish:lib
         env:
-          NODE_AUTH_TOKEN: ${​​​​​​​​​​​​​{​​​​​​​​​​​​​ secrets.NPM_AUTOMATION_TOKEN }​​​​​​​​​​​​​}​​​​​​​​​​​​​
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTOMATION_TOKEN }}

.gitignore

@@ -46,4 +46,5 @@ testem.log
 Thumbs.db
 
 # Storybook
-build-storybook.log
+build-storybook.log
+documentation.json

.husky/.gitignore

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

.husky/pre-commit

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

.prettierrc.json

@@ -0,0 +1,9 @@
+{
+    "semi": true,
+    "trailingComma": "all",
+    "singleQuote": true,
+    "printWidth": 100,
+    "tabWidth": 2,
+    "endOfLine": "auto"
+}
+

.storybook/main.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   "stories": [
     "../stories/**/*.stories.mdx",
@@ -6,5 +8,14 @@ module.exports = {
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials"
-  ]
-}
+  ],
+  webpackFinal: async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'css-loader', 'sass-loader'],
+      include: path.resolve(__dirname, '../stories/styles/'),
+    });
+    return config;
+  },
+}

.storybook/preview.js

@@ -1,4 +1,4 @@
-
+import '!style-loader!css-loader!sass-loader!../stories/styles/make-it-nice-theme.scss';
 import { setCompodocJson } from "@storybook/addon-docs/angular";
 import docJson from "../documentation.json";
 setCompodocJson(docJson);
@@ -12,4 +12,4 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+}

README.md

@@ -1,4 +1,4 @@
-# @lab49/angular-value-flash
+# angular-value-flash
 
 ![github action status](https://github.com/lab49/angular-value-flash/actions/workflows/github-actions.yml/badge.svg?branch=main)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
@@ -12,7 +12,7 @@ Not only are these colors configurable, but the properties of the flash itself a
 Furthermore, this component doesn't come with any styles, but does provide plenty of hooks to add your own styles. Even though flash color and transition properties are configurable as props, you can still use the generated classnames (which are also configurable) to add your own unique styles.
 
 <p align="center">
-  <img src="https://github.com/troy-prince-lab49/angular-value-flash/blob/777e5cbe5f4143122b3ba826db0a955506d0cfc6/.github/motion.gif">
+  <img src="https://github.com/lab49/angular-value-flash/blob/e7bfdca7c3de7004f0762e262b1dc6ca2cb12c05/.github/motion.gif">
 </p>
 
 This component is perfect for:
@@ -53,7 +53,7 @@ npm run storybook
 ## Installation
 
 ```sh
-npm install @lab49/angular-value-flash
+npm install angular-value-flash
 ```
 
 ###### [⇡ Top](#table-of-contents)
@@ -69,11 +69,13 @@ import { ValueFlashModule } from 'angular-value-flash';
     ValueFlashModule
   ],
   ...
+```
 
-// Use in a component template:
-<lab49-value-flash
-  value="20000">
-</lab49-value-flash>
+```html
+<!-- Use in a component template: -->
+<value-flash
+  [value]="20000">
+</value-flash>
 ```
 
 ###### [⇡ Top](#table-of-contents)

angular.json

@@ -7,7 +7,6 @@
       "projectType": "library",
       "root": "projects/value-flash",
       "sourceRoot": "projects/value-flash/src",
-      "prefix": "lab49",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:ng-packagr",