$

src/app.riot

@@ -0,0 +1,84 @@
+<app>
+  <div class="container">
+    <router>
+      <div if={state.showNotFound} class="row">
+        <div class="column column-60">
+          <not-found />
+        </div>
+      </div>
+      <div if={!state.showNotFound} class="">
+        <div class="column column-60">
+          <route each={page in state.pages} path={page.path}>
+            <main is={page.componentName} />
+          </route>
+        </div>
+      </div>
+    </router>
+  </div>
+
+  <script>
+    import { Router, Route, route, toRegexp, match } from '@riotjs/route'
+    import lazy from '@riotjs/lazy'
+    import Loader from './components/includes/loader/loader.riot'
+    import NotFound from './pages/not-found.riot'
+    import pages from './pages'
+
+    export default {
+      components: {
+        Router,
+        Route,
+        NotFound,
+        Home: lazy(Loader, () => import(
+          /* webpackPrefetch: true, webpackChunkName: 'pages/home' */
+          './pages/home.riot'
+        )),
+      },
+      state: {
+        pages,
+        showNotFound: false,
+        activePage: null
+      },
+      onBeforeMount({ isServer }) {
+        // create a stream on all routes to catch the not-found page
+        this.anyRouteStream = route('(.*)')
+        this.anyRouteStream.on.value(this.onAnyRoute)
+      },
+      onAnyRoute(path) {
+        // show the not found page if none of the page paths are matched
+        const activePage = pages.find(p => match(path.pathname, toRegexp(p.path)))
+
+        this.update({
+          activePage,
+          showNotFound: !activePage
+        })
+      },
+      onBeforeUnmount() {
+        this.anyRouteStream.end()
+      }
+    }
+  </script>
+
+  <style>
+    :host {
+      padding: 2rem 0;
+    }
+
+    .menu {
+      margin: 1rem -1rem;
+    }
+
+    .menu a {
+      padding: 0 1rem;
+      color: black;
+    }
+
+    .menu a.active.active {
+      font-weight: bold;
+      text-decoration: none;
+    }
+
+    .menu a:hover, .menu a:focus, .menu a:active {
+      text-decoration: underline;
+    }
+  </style>
+</app>

src/components/global/selector/selector.riot

@@ -0,0 +1,125 @@
+<selector>
+    <style>
+        #selector {
+            width: 300px;
+            min-height: 700px;
+            padding: 15px;
+            box-shadow: 0px 0px 3px 1px black;
+        }
+
+        #selector
+        #selector-top-container {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            justify-content: space-between;
+            position: relative;
+            min-height: 100px;
+        }
+
+        #selector
+        #selector-top-container
+        #selector-top-btn {
+            background: white;
+            color: black;
+            border-color: black;
+            width: 20px;
+            height: 60px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        #selector
+        #selector-top-container
+        #selector-top-title {
+            text-transform: uppercase;
+        }
+
+        #selector
+        #selector-list-container
+        #selector-list
+        .selector-list-inner {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            font-weight: bold;
+            color: black;
+            list-style-type: none;
+        }
+
+        #selector
+        #selector-list-container
+        #selector-list
+        .selector-list-names {
+            padding-left: 18px;
+        }
+
+        #selector
+        #selector-list-container
+        #selector-list
+        .selector-list-counts {
+            color: white;
+            background: green;
+            padding: 3px;
+            text-align: center;
+            border-radius: 4px;
+            width: 50px;
+        }
+    </style>
+
+    <script>
+        const api = "https://data.enseignementsup-recherche.gouv.fr/api/records/1.0/search/?dataset=fr-esr-parcoursup&q=&sort=tri&facet=fili&timezone=Europe%2FBerlin"
+        let data = []
+
+        export default {
+            async getData() {
+                let data = []
+
+                await fetch(api)
+                    .then((res) => res.json())
+                    .then((d) => {
+                        data = d.facet_groups[0].facets
+                    })
+
+                this.state = {
+                    page: {
+                        curIndex: 0,
+                            "name": [
+                            "formation",
+                            "filère de formation",
+                            "filière de formation détaillée"
+                        ]
+                    },
+                    data: data
+                }
+
+                console.log(this.state)
+            },
+            onBeforeMount() {
+                this.getData()
+            }
+        }
+    </script>
+
+    <div id="selector">
+        <div id="selector-top-container">
+            <span id="selector-top-title">
+                { state.pages.name[state.pages.curIndex] }
+            </span>
+            <button id="selector-top-btn">
+                <
+            </button>
+        </div>
+
+        <div id="selector-list-container">
+            <ul id="selector-list">
+                <li each={ item in state.data }  class="selector-list-inner">
+                    <span class="selector-list-names">{state.data.name}</span>
+                    <span class="selector-list-counts">{state.data.count}</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+</selector>

src/components/includes/loader/loader.riot

@@ -0,0 +1,28 @@
+<loader>
+  <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+  <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#000">
+      <g fill="none" fill-rule="evenodd">
+          <g transform="translate(1 1)" stroke-width="2">
+              <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+              <path d="M36 18c0-9.94-8.06-18-18-18">
+                  <animateTransform
+                      attributeName="transform"
+                      type="rotate"
+                      from="0 18 18"
+                      to="360 18 18"
+                      dur="1s"
+                      repeatCount="indefinite"/>
+              </path>
+          </g>
+      </g>
+  </svg>
+  <style>
+    :host {
+      padding: 1rem 0;
+    }
+
+    :host svg {
+      overflow: visible;
+    }
+  </style>
+</loader>

src/components/includes/user/user.riot

@@ -0,0 +1,3 @@
+<user>
+  <p>My username is: <b>{ props.name }</b></p>
+</user>

src/components/includes/user/user.spec.js

@@ -0,0 +1,17 @@
+import User from './user.riot'
+import { expect } from 'chai'
+import { component } from 'riot'
+
+describe('User Unit Test', () => {
+  const mountUser = component(User)
+
+  it('The component is properly rendered', () => {
+    const div = document.createElement('div')
+
+    const component = mountUser(div, {
+      name: 'Jack'
+    })
+
+    expect(component.$('b').innerHTML).to.be.equal('Jack')
+  })
+})

src/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Parcoursup Analytic's</title>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.0/milligram.css">
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>

src/index.js

@@ -0,0 +1,10 @@
+import '@riotjs/hot-reload'
+import { component } from 'riot'
+import App from './app.riot'
+import registerGlobalComponents from './register-global-components'
+
+// register
+registerGlobalComponents()
+
+// mount the root tag
+component(App)(document.getElementById('root'))

src/pages.js

@@ -0,0 +1,5 @@
+export default [{
+	path: '/',
+	label: 'Accueil',
+	componentName: 'home'
+}]

src/pages/home.riot

@@ -0,0 +1,3 @@
+<home>
+	<selector />
+</home>

src/pages/not-found.riot

@@ -0,0 +1,4 @@
+<not-found>
+  <h1>Page not found</h1>
+  <p>Go back to <a href='/'>home</a></p>
+</not-found>

src/register-global-components.js

@@ -0,0 +1,19 @@
+import { register } from 'riot'
+
+const basename = (path, extension = '') => path.split('/').reverse()[0].replace(extension, '')
+const globalComponentsContext = require.context('./components/global/', true, /[a-zA-Z0-9-]+\.riot/)
+
+export default () => {
+  globalComponentsContext.keys().map(path => {
+    const name = basename(path, '.riot')
+
+    const component = globalComponentsContext(path)
+
+    register(name, component.default || component)
+
+    return {
+      name,
+      component
+    }
+  })
+}