mix phx.new atm #23

Author: nelsonic

.formatter.exs

@@ -0,0 +1,6 @@
+[
+  import_deps: [:ecto, :ecto_sql, :phoenix],
+  subdirectories: ["priv/*/migrations"],
+  plugins: [Phoenix.LiveView.HTMLFormatter],
+  inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}", "priv/*/seeds.exs"]
+]

README.md

@@ -1,6 +1,6 @@
 <div align="center">
     <img src="https://github.com/dwyl/atm/assets/194400/1d71bfb3-1c55-46f0-8c0e-b72b725937bd" height="300">
-    <h1>**A**ctionable **T**imely **M**etrics.</h1>
+    <h1><b>A</b>ctionable <b>T</b>imely <b>M</b>etrics.</h1>
 
 
 
@@ -19,10 +19,8 @@ in Web Application/Site Development,
 with more than 100 project teams and organizations
 we've noted one alarming fact:
 
-**_Most_ Product Owners don't _check_ Google Analytics** 
-and use the **insights** to **_drive_ decisions**. 
-
-
+> **_Most_ Product Owners don't _check_ Google Analytics** 
+or use the **insights** to **_drive_ decisions**. 
 
 If the **_leaders_ aren't data driven**,
 _nobody_ `else` in the team will be. 
@@ -39,20 +37,60 @@ More detail in: https://github.com/dwyl/atm/issues/16
 
 ## Name? 🏧 
 
-"ATM" stands for "Actionable Timely Metrics" (_this is a ["backronym"](https://en.wikipedia.org/wiki/Backronym)). We **really** wanted to give this project a name that is both short, _memorable_ and helps stakeholders _understand_ the importance of analytics data to the organisation!
-
+"ATM" stands for "**A**ctionable **T**imely **M**etrics" 
+(_this 
+["**backronym**"](https://en.wikipedia.org/wiki/Backronym) 
+is not accidental_). 
+We _really_ wanted to give this project a name 
+that is both short, _memorable_ 
+and helps stakeholders _understand_ 
+the importance of metrics to the organization!
 
 ![free-cash-withdrawals](https://github.com/dwyl/atm/assets/194400/78fda825-5f71-4eed-8738-aef033829d7c)
 
-# Who?
+We want `people` to understand that being data-driven
+is like having a "**_free_**" **cash machine**.
 
-This project aims to both _simplify_ the language/vocabulary around analytics/metrics and create a simple way of tracking _any_ event in _any_ web app. 
 
-If it's not _immediately obvious_ **Why** this project is valuable and **How** it works, 
-we have failed. So if you are scratching your head wondering: "_Is this for **me**?_" ... 
-**please _help_ us** by describing your situation so we can **_help_ you** realise the _value_ of the data you are sending to Google Analytics and then _ignoring_... 
+
+# Who?
+
+This project if for the `people`
+that _get_ it
+and want an easy way for others 
+in their team/organization to do the same.
+
+We aim to both
+_simplify_ the language/vocabulary around analytics/metrics 
+and create a _simple_ way 
+of tracking _any_ event in _any_ web/mobile app. 
+
+If it's not _immediately obvious_ **Why** this project 
+is valuable and **How** it works, we have failed. 
+So if you are scratching your head wondering: 
+"_Is this for **me**?_" ... 
+**please _help_ us** by describing your situation 
+so we can **_help_ you** realize the _value_ 
+of the data you are sending 
+to Google Analytics 
+and then _ignoring_... 
 
 # How?
 
-+ [ ] Define the basic schema for an Events (Analytics) Table!
-+ [ ] Implement it!
+If you haven't already,
+please try the demo: 
+
+
+
+## Run on `localhost`
+
+Run 
+`mix setup` 
+to install and setup dependencies.
+
+Now visit 
+[`localhost:4000`](http://localhost:4000) 
+in your web browser.
+
+## Contributing?
+

assets/css/app.css

@@ -0,0 +1,5 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+/* This file is for your main application CSS */

assets/js/app.js

@@ -0,0 +1,41 @@
+// If you want to use Phoenix channels, run `mix help phx.gen.channel`
+// to get started and then uncomment the line below.
+// import "./user_socket.js"
+
+// You can include dependencies in two ways.
+//
+// The simplest option is to put them in assets/vendor and
+// import them using relative paths:
+//
+//     import "../vendor/some-package.js"
+//
+// Alternatively, you can `npm install some-package --prefix assets` and import
+// them using a path starting with the package name:
+//
+//     import "some-package"
+//
+
+// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
+import "phoenix_html"
+// Establish Phoenix Socket and LiveView configuration.
+import {Socket} from "phoenix"
+import {LiveSocket} from "phoenix_live_view"
+import topbar from "../vendor/topbar"
+
+let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+
+// Show progress bar on live navigation and form submits
+topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
+window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
+window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
+
+// connect if there are any LiveViews on the page
+liveSocket.connect()
+
+// expose liveSocket on window for web console debug logs and latency simulation:
+// >> liveSocket.enableDebug()
+// >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
+// >> liveSocket.disableLatencySim()
+window.liveSocket = liveSocket
+

assets/tailwind.config.js

@@ -0,0 +1,68 @@
+// See the Tailwind configuration guide for advanced usage
+// https://tailwindcss.com/docs/configuration
+
+const plugin = require("tailwindcss/plugin")
+const fs = require("fs")
+const path = require("path")
+
+module.exports = {
+  content: [
+    "./js/**/*.js",
+    "../lib/*_web.ex",
+    "../lib/*_web/**/*.*ex"
+  ],
+  theme: {
+    extend: {
+      colors: {
+        brand: "#FD4F00",
+      }
+    },
+  },
+  plugins: [
+    require("@tailwindcss/forms"),
+    // Allows prefixing tailwind classes with LiveView classes to add rules
+    // only when LiveView classes are applied, for example:
+    //
+    //     <div class="phx-click-loading:animate-ping">
+    //
+    plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
+    plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
+    plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
+    plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
+
+    // Embeds Heroicons (https://heroicons.com) into your app.css bundle
+    // See your `CoreComponents.icon/1` for more information.
+    //
+    plugin(function({matchComponents, theme}) {
+      let iconsDir = path.join(__dirname, "./vendor/heroicons/optimized")
+      let values = {}
+      let icons = [
+        ["", "/24/outline"],
+        ["-solid", "/24/solid"],
+        ["-mini", "/20/solid"]
+      ]
+      icons.forEach(([suffix, dir]) => {
+        fs.readdirSync(path.join(iconsDir, dir)).map(file => {
+          let name = path.basename(file, ".svg") + suffix
+          values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
+        })
+      })
+      matchComponents({
+        "hero": ({name, fullPath}) => {
+          let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
+          return {
+            [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+            "-webkit-mask": `var(--hero-${name})`,
+            "mask": `var(--hero-${name})`,
+            "mask-repeat": "no-repeat",
+            "background-color": "currentColor",
+            "vertical-align": "middle",
+            "display": "inline-block",
+            "width": theme("spacing.5"),
+            "height": theme("spacing.5")
+          }
+        }
+      }, {values})
+    })
+  ]
+}

assets/vendor/heroicons/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Refactoring UI Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

assets/vendor/heroicons/UPGRADE.md

@@ -0,0 +1,6 @@
+You are running heroicons v2.0.16. To upgrade in place, you can run the following command,
+where your `HERO_VSN` export is your desired version:
+
+    export HERO_VSN="2.0.16" ; \
+      curl -L "https://github.com/tailwindlabs/heroicons/archive/refs/tags/v${HERO_VSN}.tar.gz" | \
+      tar -xvz --strip-components=1 heroicons-${HERO_VSN}/optimized