feature/navbar (#40)

* feat: use surface on root layout, navbar basic component

* feat: temporary navbar

* feat: use tailwind css

* feat: extend tailwind config | add favicon ✨

* feat: add pwa config ✨

* feat: add static images | apinejs ✨

* chore: format

* feat: add daisyui ✨

* feat: add icons ✨

* feat: navbar v1 ✨

* chore: format

.gitignore

@@ -25,7 +25,7 @@ fuschia-*.tar
 # Since we are building assets from assets/,
 # we ignore priv/static. You may want to comment
 # this depending on your deployment strategy.
-/priv/static/
+/priv/static/assets
 
 # Ignore all secrets
 **/*.secret.exs
@@ -36,7 +36,10 @@ fuschia-*.tar
 # Ignore generated js hook files for components
 assets/js/_hooks/
 
-# Local env files
+# Ignore node_modules
+/assets/node_modules/
+
+# Ignore local env files
 /.direnv/
 /.nix-*/
 /.postgres/

assets/css/app.css

@@ -1,5 +1,53 @@
-/* This file is for your main application CSS */
-@import "./phoenix.css";
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+:root {
+  font-size: 62.5%;
+
+  /* theme vars */
+  --blue-lighter: #BCE0EF;
+  --blue-light: #88B8CC;
+  --blue-dark: #277DA1;
+  --blue-darker: #0E4771;
+
+  --green: #25CE52;
+  --orange: #F8961E;
+  --yellow: #F5BD00;
+  --red: #FF635D;
+}
+
+
+* {
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font: 400 1.125rem 'Open Sans', sans-serif;
+  min-height: 100vh;
+  background: var(--blue-dark);
+  -webkit-font-smoothing: antialiased;
+}
+
+input,
+button,
+textarea {
+  font: 400 1.5rem 'Open Sans', sans-serif;
+}
+
+button {
+  cursor: pointer;
+}
+
+.active {
+  background: var(--orange);
+  padding: 10px;
+  margin: -10px;
+  clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
+}
 
 /* Alerts and form errors used by phx.new */
 .alert {

assets/js/app.js

@@ -1,24 +1,8 @@
-// We import the CSS which is extracted to its own file by esbuild.
-// Remove this line if you add a your own CSS build pipeline (e.g postcss).
-import "../css/app.css"
-
 // 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"
-//
-
+import Alpine from 'alpine'
 // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
 import "phoenix_html"
 // Establish Phoenix Socket and LiveView configuration.
@@ -27,8 +11,21 @@ import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 import Hooks from "./_hooks"
 
+window.Alpine = Alpine
+Alpine.start()
+
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, hooks: Hooks})
+let liveSocket = new LiveSocket("/live", Socket, {
+  params: { _csrf_token: csrfToken },
+  hooks: Hooks,
+  dom: {
+    onBeforeElUpdated(from, to) {
+      if (from._x_dataStack) {
+        window.Alpine.clone(from, to);
+      }
+    }
+  }
+})
 
 // Show progress bar on live navigation and form submits
 topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
@@ -43,4 +40,3 @@ liveSocket.connect()
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket
-

assets/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "fuschia",
+  "version": "0.1.0",
+  "description": "Plataforma Digital PEA Pescarte",
+  "repository": "https://github.com/cciuenf/fuschia",
+  "author": "zoedsoupe",
+  "license": "BSD-3-Clause",
+  "private": true,
+  "dependencies": {
+    "alpine": "^0.2.1",
+    "daisyui": "^2.15.0"
+  }
+}

assets/tailwind.config.js

@@ -0,0 +1,37 @@
+const colors = require('tailwindcss/colors')
+
+module.exports = {
+  content: [
+    './js/**/*.js',
+    '../lib/*_web.ex',
+    '../lib/*_web/**/*.*ex',
+    '../lib/*_web/**/*.sface'
+  ],
+  theme: {
+    colors: {
+      blue: {
+        100: '#BCE0EF',
+        300: '#88B8CC',
+        500: '#277DA1',
+        700: '#0E4771'
+      },
+      green: '#25CE52',
+      orange: '#F8961E',
+      yellow: '#F5BD00',
+      red: '#FF635D',
+      white: colors.white,
+      black: colors.black
+    },
+    fontFamily: {
+      sans: ['Open Sans', 'sans-serif']
+    },
+    container: {
+      center: true
+    },
+    extend: {},
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require("daisyui")
+  ]
+}