Update for Halogen 5 (#39)

* Remove QueryF from Select in preparation for v5 changes, as there is no longer the ability to leverage a query within ComponentHTML. Add the npm-check-updates package to dev dependencies.

* switch to variants

* Complete switch to Halogen 5

* switch examples to v5

* switch to extensible state, no comonad

* now that state can be embedded, take as an argument

* cleanup

* switch to handling messages, which addresses lingering concerns with extensibility in the components

* uncomment

* cleanup

* add default.nix file containing mkdocs

* update dependencies

* fix infinite recursion (compiler bug?)

* eta-expand instead of removing helper

* remove unused css

* Add type synonyms for simple cases

* rename RunQuery to AsAction

* allow external initialization, merge state fields

* simplify examples

* Simplify a little more

* formatting

* add finalizer to default spec

* extensible actions

* update item counts on attempted highlight

* cleanup

* polish up CSS for examples to test behavior

* switch to void

Author: thomashoneyman

.circleci/config.yml

@@ -48,21 +48,6 @@ jobs:
           paths:
             - js
 
-  css:
-    <<: *defaults
-    steps:
-      - checkout
-
-      - run:
-          name: Fetch and persist CSS
-          command: |
-            yarn fetch-css && yarn move-css
-
-      - persist_to_workspace:
-          root: docs
-          paths:
-            - css
-
   site:
     working_directory: ~/select
     docker:
@@ -139,16 +124,6 @@ workflows:
               ignore: gh-pages
 
       # On master branch, rebuild docs
-      - css:
-          filters:
-            branches:
-              only:
-                - master
-                - docs
-
-          requires:
-            - test
-
       - site:
           filters:
             branches:
@@ -168,4 +143,4 @@ workflows:
 
           requires:
             - site
-            - css
+

bower.json

@@ -31,10 +31,12 @@
     "generated-docs"
   ],
   "dependencies": {
-    "purescript-halogen": "^4.0.0",
-    "purescript-halogen-renderless": "^0.0.3"
+    "purescript-halogen": "^5.0.0-rc.3",
+    "purescript-record": "^2.0.0"
   },
   "devDependencies": {
-    "purescript-debug": "^4.0.0"
+    "purescript-debug": "^4.0.0",
+    "purescript-affjax": "^9.0.0",
+    "purescript-argonaut": "^6.0.0"
   }
 }

default.nix

@@ -0,0 +1,97 @@
+{ nixpkgs ? import <nixpkgs> {} }:
+with nixpkgs;
+
+let
+  livereload = python27Packages.buildPythonPackage {
+    name = "livereload-2.5.1";
+    src = fetchurl {
+      url = https://pypi.python.org/packages/e9/2e/c4972828cf526a2e5f5571d647fb2740df68f17e8084a9a1092f4d209f4c/livereload-2.5.1.tar.gz;
+      sha256 = "0b2yyfnpddmrwjfqsndidzchkf3l9jlgzfkwl8dplim9gq6y2ba2";
+    };
+
+    propagatedBuildInputs = with python27Packages; [ six tornado ];
+
+    meta = {
+      homepage = https://github.com/lepture/python-livereload;
+      description = "Python LiveReload is an awesome tool for web developers";
+      license = stdenv.lib.licenses.bsd3;
+    };
+  };
+
+  mkdocs = python27Packages.buildPythonApplication rec {
+    name="mkdocs-0.17.2";
+    src = fetchurl {
+      url = https://pypi.python.org/packages/27/0a/bb42cda3b298ffb4b30375b7538a4d57803ff8be418ee3e00460188c4332/mkdocs-0.17.2.tar.gz;
+      sha256 = "18d3m9iws5shlbg0yj5xwiy68bliiz70v32y5pa8wi274c36nssa";
+    };
+
+    propagatedBuildInputs = with python27Packages;
+    [ tornado livereload click pyyaml markdown jinja2 ];
+
+    meta = {
+      homepage = http://www.mkdocs.org/;
+      description = "MkDocs is a fast, simple and downright gorgeous static site generator that’s geared towards building project documentation. Documentation source files are written in Markdown, and configured with a single YAML configuration file.";
+      license = stdenv.lib.licenses.bsd3;
+    };
+  };
+
+  pymdown-extensions = python27Packages.buildPythonPackage {
+    name = "pymdown-extensions-4.8";
+    src = fetchurl {
+      url = https://pypi.python.org/packages/f5/9f/74d8a85458e831f3b161956b30bc60d31c6a507ed72ac4f4cb2ca08d8042/pymdown-extensions-4.8.tar.gz;
+      sha256 = "1zvi8d44v758vbhi9fl5x5gqs098ajamilfz53jzid0v0fad88nj";
+    };
+
+    propagatedBuildInputs = with python27Packages; [ markdown ];
+    doCheck = false;
+
+    meta = {
+      homepage = https://github.com/facelessuser/pymdown-extensions;
+      description = "Extension pack for Python Markdown.";
+      license = stdenv.lib.licenses.mit;
+    };
+  };
+
+  mkdocs-material = python27Packages.buildPythonPackage {
+    name = "mkdocs-material-2.6.0";
+    src = fetchurl {
+      url = https://pypi.python.org/packages/e3/85/f42493d453d9b6f51912b818134a4a555c597807ba96b40eae12017ede35/mkdocs-material-2.6.0.tar.gz;
+      sha256 = "1xq5nkj0g6gg4lm8nhcwc30g9drq1i4p4pky8s5c0rfa1s9s7sla";
+    };
+
+    propagatedBuildInputs = with python27Packages; [ pymdown-extensions pygments mkdocs ];
+
+    meta = {
+      homepage = https://squidfunk.github.io/mkdocs-material/;
+      description = "A Material Design theme for MkDocs";
+      license = stdenv.lib.licenses.mit;
+    };
+  };
+
+  markdown-fenced-code-tabs = python27Packages.buildPythonPackage {
+    name = "markdown-fenced-code-tabs-0.2.0";
+    src = fetchurl {
+      url = https://pypi.python.org/packages/21/7a/0cee39060c5173cbd80930b720fb18f5cb788477c03214ccdef44ec91d85/markdown-fenced-code-tabs-0.2.0.tar.gz;
+      sha256 = "05k5v9wlxgghw2k18savznxc1xgg60gqz60mka4gnp8nsxpz99zs";
+    };
+
+    propagatedBuildInputs = with python27Packages; [ markdown ];
+
+    meta = {
+      homepage = https://github.com/yacir/markdown-fenced-code-tabs;
+      description = "Generates Bootstrap HTML Tabs for Consecutive Fenced Code Blocks";
+      license = stdenv.lib.licenses.mit;
+    };
+  };
+
+in
+  nixpkgs.stdenv.mkDerivation {
+    name = "env";
+    buildInputs = [ 
+      mkdocs 
+      mkdocs-material 
+      nixpkgs.nodejs
+      nixpkgs.yarn
+      nixpkgs.stack
+    ];
+  }

docs/examples.md

@@ -11,9 +11,9 @@ You can play around with a few example components here. However, for a much rich
 
 Dropdowns are a common button-driven input type, especially for navigation. But most custom dropdowns sacrifice usability: unlike browser default dropdowns, you can't type on most custom dropdowns, nor are many built with accessibility in mind. With `Select` you can easily create rich, usable dropdowns with little code.
 
-<div data-component="dropdown" class="ocelot-scoped"></div>
+<div data-component="dropdown"></div>
 
-Curious how to build a dropdown with `Select`? Check out [the dropdown tutorial](https://citizennet.github.io/tutorials/build-a-dropdown).
+Curious how to build a dropdown with `Select`? Check out [the dropdown tutorial](https://citizennet.github.io/tutorials/dropdown).
 
 ### Typeahead / Autocomplete
 
@@ -23,6 +23,6 @@ Building typeaheads with `Select` is only a little more complex than building dr
 
 The typeahead below is quite simple; to see examples of more sophisticated typeaheads -- including ones that fetch and display data asynchronously -- check out the [Ocelot component library](https://citizennet.github.io/purescript-ocelot/#typeaheads).
 
-<div data-component="typeahead" class="ocelot-scoped"></div>
+<div data-component="typeahead"></div>
 
-Curious how to build a typeahead with `Select`? Check out [the typeahead tutorial](https://citizennet.github.io/tutorials/build-a-typehead).
+Curious how to build a typeahead with `Select`? Check out [the typeahead tutorial](https://citizennet.github.io/tutorials/typeahead).

examples/Components/CSS.purs

@@ -0,0 +1,82 @@
+module Components.Dropdown where
+
+import Prelude
+
+import Data.Const (Const)
+import Effect.Aff (Aff)
+import Data.Array ((!!), mapWithIndex, length)
+import Data.Maybe (Maybe(..), fromMaybe)
+import Data.Monoid (guard)
+import Halogen as H
+import Halogen.HTML as HH
+import Internal.CSS (class_, classes_, whenElem)
+import Select as S
+import Select.Setters as SS
+
+type Slot =
+  H.Slot S.Query' Message
+
+type State =
+  ( items :: Array String
+  , selection :: Maybe String 
+  , buttonLabel :: String
+  )
+
+data Message
+  = SelectionChanged (Maybe String) (Maybe String)
+
+-- it is unnecessary to export your own input type, but doing so helps if you
+-- would like to set some sensible defaults behind the scenes.
+type Input =
+  { items :: Array String
+  , buttonLabel :: String
+  }
+
+input :: Input -> S.Input State 
+input { items, buttonLabel } =
+  { inputType: S.Toggle
+  , search: Nothing
+  , debounceTime: Nothing
+  , getItemCount: length <<< _.items
+  , items
+  , buttonLabel
+  , selection: Nothing
+  }
+
+spec :: S.Spec State (Const Void) Void () Message Aff
+spec = S.defaultSpec { render = render, handleMessage = handleMessage }
+  where
+  handleMessage = case _ of
+    S.Selected ix -> do
+      st <- H.get
+      let selection = st.items !! ix
+      H.modify_ _ { selection = selection, visibility = S.Off }
+      H.raise $ SelectionChanged st.selection selection
+    _ -> pure unit
+
+  render st = 
+    HH.div 
+      [ class_ "Dropdown" ]
+      [ renderToggle, renderContainer ]
+    where
+    renderToggle =
+      HH.button
+        ( SS.setToggleProps st [ class_ "Dropdown__toggle" ] )
+        [ HH.text (fromMaybe st.buttonLabel st.selection) ]
+
+    renderContainer = whenElem (st.visibility == S.On) \_ ->
+      HH.div
+        ( SS.setContainerProps [ class_ "Dropdown__container" ] )
+        ( renderItem `mapWithIndex` st.items )
+      where
+      renderItem index item =
+        HH.div 
+          ( SS.setItemProps index 
+              [ classes_ 
+                  [ "Dropdown__item"
+                  , "Dropdown__item--highlighted" # guard (st.highlightedIndex == Just index)
+                  ]
+              ]
+          ) 
+          [ HH.text item ]
+