$

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')
+  })
+})