Merge pull request #31 from Mateiadrielrafael/develop

Yet another release

.vscode/settings.json

@@ -5,10 +5,17 @@
   ],
   "cSpell.words": [
     "downlevel",
+    "htmlnano",
+    "hygen",
     "lunarbox",
+    "prebuild",
     "purescript",
     "scrollbar",
+    "seedrandom",
+    "spago",
     "textfield",
+    "tslib",
+    "unconnectable",
     "unmount",
     "unselectable",
     "width"

README.md

@@ -6,29 +6,28 @@
 
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
-![](https://img.shields.io/github/release-date/Mateiadrielrafael/lunarbox?label=Last%20release&style=for-the-badge) ![](https://img.shields.io/github/v/release/Mateiadrielrafael/lunarbox?style=for-the-badge) ![](https://img.shields.io/github/languages/top/Mateiadrielrafael/lunarbox?color=yellow&style=for-the-badge) ![](https://img.shields.io/github/workflow/status/Mateiadrielrafael/lunarbox/Test%20⛳/develop?style=for-the-badge)
-
 [![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com) [![forthebadge](https://forthebadge.com/images/badges/powered-by-water.svg)](https://forthebadge.com)
 
-Tool to help beginners learn functional programming
+![](https://img.shields.io/github/release-date/Mateiadrielrafael/lunarbox?label=Last%20release&style=for-the-badge) ![](https://img.shields.io/github/v/release/Mateiadrielrafael/lunarbox?style=for-the-badge) ![](https://img.shields.io/github/languages/top/Mateiadrielrafael/lunarbox?color=yellow&style=for-the-badge) ![](https://img.shields.io/github/workflow/status/Mateiadrielrafael/lunarbox/Test%20⛳/develop?style=for-the-badge)
 
-## Contributing
+Tool to help beginners learn functional programming
 
-Fork this repo, write some code and submit a pull request.
+## Documentation
 
-## Tehnologies:
+You can find the infoeducatie documentation (written in romanian) [here](./infoeducatie/documentatie.md)
 
-This project is mostly made in the [purescript](https://www.purescript.org) programming language using [halogen](https://github.com/purescript-halogen/purescript-halogen) for web rendering.
+> Also for infoeducatie I also made a list with everything I used which I didn't make which you can find [here](./infoeducatie/external.md)
 
-For installing dependencies this project uses:
+> Todo: usage guides
 
-- [pnpm](https://pnpm.js.org) for the js dependencies
-- [spago](https://github.com/purescript/spago) for the purescript dependencies
+## Contributing
 
-For the compilation this project uses [parcel](https://parceljs.org) to bundle the js, [scss](https://sass-lang.com) and the assets and [spago](https://github.com/purescript/spago) to compile the purescript.
+Fork this repo, write some code and submit a pull request.
 
 ## Installing locally
 
+This guide assumes you have purescript and spago alreay installed.
+
 ### Installing the dependencies
 
 Clone this repo. Install the dependencies with:
@@ -40,7 +39,7 @@ pnpm install
 Then build all the purescript stuff with:
 
 ```sh
-pnpx spago build
+spago build
 ```
 
 > Note: this project uses [pnpm](https://pnpm.js.org), pull requests using npm or yarn will be ignored
@@ -53,6 +52,14 @@ To start the dev server use the `dev` command:
 pnpm run dev
 ```
 
+### Building for production
+
+To generate a production build run:
+
+```sh
+pnpm run build
+```
+
 ## Code generation
 
 This project uses [hygen](http://www.hygen.io/) for code generation.
@@ -71,6 +78,8 @@ This will create an empty halogen component in `src/Component/Foo/Bar.purs` whic
 
 > Note: you can add the -p flag at the end to generate a page instead (lives in `src/Page` and has the module name prefixed with `Lunarbox.Page`)
 
+> Note 2: you can also use the render-function action when you want to build a render-function which takes some Input and some Actions as it's parameters
+
 ### Creating modules
 
 To create a simple purescript module use can use the `module` action from the `purescript` generator:
@@ -81,10 +90,6 @@ hygen purescript module Foo.Bar
 
 This will create an empty halogen component in `src/Foo/Bar.purs` which lives in a module called `Lunarbox.Foo.Bar` which has a single import to `Prelude`.
 
-## Strucure & architecture
-
-TODO
-
 ## Contributors ✨
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

_templates/purescript/component/main.ejs

@@ -1,7 +1,7 @@
 ---
 to: src/<%= folder %>/<%= name.replace(/\./g, "/") %>.purs
 ---
-module Lunarbox.<%= folder %>.<%= name %>
+module Lunarbox.<%= folder %>.<%= name %> where
 
 import Prelude
 import Control.Monad.Reader (class MonadAsk)

infoeducatie/documentatie.md

@@ -0,0 +1,97 @@
+# Documentatie
+
+## Table of contents
+
+## Tehnologii
+
+Proiectul a fost scis in [purescript](https://www.purescript.org/), un limbaj de programare pur functionala cu sintaxa aproape indentica cu haskell dar care poate fi compilat in javascript.
+
+- Pentru rendare web am folosit [halogen](https://github.com/purescript-halogen/purescript-halogen), o librarie care extinde arhitectura elm cu suport pentru mai mult de 1 component, alegerea orcarui monad pentru rularea interfatei si multe altele.
+- Pentru pacakge managementul dependentelor de pe [npm](https://www.npmjs.com/) am folosit [pnpm](https://pnpm.js.org/) - un cli care rezolva multe din problemele actuale aflate in npm, iar pentru (package managementul) dependentelor pentru purescript am folosit [spago](https://github.com/purescript/spago).
+- Pentru bundlingul aplicatie am folosit [parcel](https://parceljs.org/) iar pentru stiluri am folosit [scss](https://sass-lang.com/).
+- Pentru inferarea tipurilor am implementat [algoritmul Hindley Milner de inferare a tipurilor](https://en.wikipedia.org/wiki/Hindley%E2%80%93Milner_type_system) impreuna cu un sistem care transforma programele vizuale intr-o expresie lineara.
+- Proiectul foloseste [hygen](https://www.hygen.io/) pentru creerea de templateuri ce pot fi refolosite.
+- Pentru a recompila partea de purescript si back-endul la fiecare schimbare am folosit [nodemon](https://www.hygen.io/).
+- Proiectul respecta standardul [all-contributors](https://github.com/all-contributors/all-contributors)
+- Pentru CI & CD am folosit [semantic-release](https://semantic-release.gitbook.io/semantic-release/) impreuna cu [github-actions](https://github.com/features/actions)
+
+## Arhitectura
+
+Aplicatia ruleaza in monadul AppM:
+
+```haskell
+newtype AppM a
+  = AppM (ReaderT Config Aff a)
+```
+
+- Tranformerul RedaerT este necesar pentru a permite acesul de oriunde din aplicatie a unui Config global:
+
+  ```haskell
+  type UserEnv
+    = { currentUser :: Ref (Maybe Profile)
+        , userBus :: BusRW (Maybe Profile)
+        }
+
+  newtype Config
+    = Config
+    { devOptions :: DevOptions
+    , baseUrl :: BaseUrl
+    , user :: UserEnv
+    , pushStateInterface :: PushStateInterface
+    }
+  ```
+
+- Monadul Aff este necesar pentru rularea de cod asymc, cum ar fi function register
+  ```haskell
+  register :: forall m. MonadAff m => BaseUrl -> RegisterFields -> m (Either String Profile)
+  register baseUrl fields =
+    requestJson baseUrl
+        { endpoint: Register, method: Post $ Just $ encodeJson fields
+        }
+        *> profile baseUrl
+  ```
+
+Monadul AppM are instante pentru cateva typeclassuri care reprezinta capabilitati ale aplicatiei:
+
+- `ManageUser` permite lucrul cu utilizatori:
+
+  ```haskell
+  class
+      Monad m <= ManageUser m where
+
+      loginUser :: LoginFields -> m (Either String Profile)
+      registerUser :: RegisterFields -> m (Either String Profile)
+      getCurrentUser :: m (Maybe Profile)
+  ```
+
+- `ManageProjects` permite salvarea proiectelor in cloud:
+
+  ```haskell
+  class
+      Monad m <= ManageProjects m where
+
+      getProjects :: m (Either String ProjectList)
+      getProject :: forall a s m'. ProjectId -> m (Either String (State a s m'))
+      createProject :: forall a s m'. State a s m' -> m (Either String ProjectId)
+      saveProject :: forall a s m'. State a s m' -> m (Either String Unit)
+  ```
+
+## Portabilitate
+
+Aplicatia ruleaza pe orice pc ce poate rula o versiue recenta de chrome sau firefox.
+
+## Testarea
+
+Proiectul se bazeaza cel mai mult pe user-testing, dar am scris si cateva unit testuri pentru a ma asigura ca algoritmul de aranjare a arcurilor pe mai multe cercuri functioneaza cu mult inainte de a implementa partea grafica.
+
+## Gestionarea codului
+
+De la inceput am folosit [git](). Deoarece in fiecare repo (front-end / back-end) a lucrat o singura persoana am folosit un sistem de branching destul de simplu:
+
+Branchul default este `develop` care contine cele mai recente surse ale aplicatii. Fiecare commit in develop este testat si construit automat folosind github actions. Mereu cand vreau sa fac un release creeez un pull request in `master`. Dupa ce totul e testat si compilat se genereaza un changelog din commituri (acest lucru este posibil deoarece folosesc [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)) si un github release avand ca descriere sectiunea din changelog a respectibului release. Dupa acesti pasi proiectul este publicat automat pe [netlify](https://www.netlify.com/).
+
+## Structura de fisiere
+
+Aici este o rendare a structurii de fisiere generata folosind [gource](https://gource.io/)
+
+![file structure](./assets/file-structure.png)

infoeducatie/external.md

@@ -0,0 +1,10 @@
+# Stuff I didn't make myself
+
+- THe logo was made by [Vyctor](https://github.com/Vyctor661/). He also gave me ideas for the design.
+- Some of the auth stuff was originally taken from [this repo](https://github.com/thomashoneyman/purescript-halogen-realworld/)
+- All the purescript dependencies I used are listed in spago.dhall
+- Other tooling I used can be found in package.json
+
+## Why are there other contributors?
+
+Vyctor and ImperialWater helped me with design ideas & testing. ImperialWater also fixed some typos.

package.json

@@ -1,12 +1,11 @@
 {
   "version": "0.0.0-development",
   "scripts": {
-    "prepare:purescript": "rm -rf output/bundle.js && hygen bundle prepare",
     "build:purescript": "spago build",
-    "dev": "pnpm run prepare:purescript && parcel public/index.html --port 8080",
+    "dev": "parcel public/index.html --port 8080",
     "prebuild": "rm -rf dist",
-    "bundle:purescript": "cross-env NODE_ENV=production pnpm run prepare:purescript && spago bundle-app -t output/prod-bundle.js",
-    "build": "tsc && pnpm run bundle:purescript && parcel build public/index.html && cp _redirects dist",
+    "bundle:purescript": "spago bundle-app -t output/prod-bundle.js",
+    "build": "tsc && spago build && parcel build public/index.html && cp _redirects dist",
     "semantic-release": "semantic-release",
     "test": "spago test"
   },

public/index.js

@@ -1,9 +1,11 @@
 import "./styles/index.scss";
-import "../output/bundle";
+import { main } from "../output/Main";
 
 const production = process.env.NODE_ENV === "production";
+const start = main(production);
 
 if (!production && module.hot) {
-  // module.hot.accept(() => location.reload(true));
   module.hot.accept(() => location.reload(true));
 }
+
+start();

public/styles/components/node.scss

@@ -2,6 +2,10 @@
 
 svg .node {
   cursor: grab;
+
+  input {
+    cursor: text;
+  }
 }
 
 .node-input,
@@ -15,15 +19,22 @@ svg .node {
   cursor: pointer;
 }
 
-.node-input:hover,
-.node-connection:hover {
+.node-input:hover:not(.unconnectable),
+.node-connection {
   stroke-width: 9px;
 }
 
+.node-input.unconnectable,
+.node-output.unconnectable {
+  stroke-opacity: 0.3;
+  fill-opacity: 0.3;
+  cursor: not-allowed;
+}
+
 .node-output {
   transition: transform $transition-time;
-}
 
-.node-output:hover {
-  transform: scale(1.3);
+  &:hover:not(.unconnectable) {
+    transform: scale(1.3);
+  }
 }

public/styles/components/with-logo.scss

@@ -0,0 +1,31 @@
+@use "../utils/utils";
+
+@import "../theme.scss";
+
+.with-logo {
+  display: grid;
+  grid-template-columns: 30% auto;
+  height: 100vh;
+  overflow: hidden;
+
+  .left {
+    @include utils.center;
+    height: 100vh;
+
+    background: $primary-dark;
+  }
+
+  .right {
+    background: $primary;
+  }
+}
+
+@media only screen and (max-width: 1000px) {
+  .with-logo {
+    grid-template-columns: 1fr;
+
+    .left {
+      display: none;
+    }
+  }
+}

public/styles/index.scss

@@ -4,11 +4,13 @@
 @import "./pages/home.scss";
 @import "./pages/editor.scss";
 @import "./pages/login.scss";
+@import "./pages/projects.scss";
 
 // Components
 @import "./components/tooltip.scss";
 @import "./components/switch.scss";
 @import "./components/node-input.scss";
+@import "./components/with-logo.scss";
 
 // Libraries
 @import "normalize.css";
@@ -39,20 +41,19 @@ img,
 
 // Remove arrows from number inputs
 
-/* Chrome, Safari, Edge, Opera */
+// Chrome, Safari, Edge, Opera
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-/* Firefox */
+// Firefox
 input[type="number"] {
   -moz-appearance: textfield;
 }
 
 // Custom scrollbar
-
 * {
   scrollbar-color: $primary-bright;
   scrollbar-width: 1rem;