helloncanella

  @charset "UTF-8";
    /**
 * Foundation for Sites by ZURB
 * Version 6.3.1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
    /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
    /* Document
       ========================================================================== */

helloncanella

/*
    Before run this script do: 
    
        $ npm install gulp-cli -g
        $ npm install gulp-autoprefixer gulp -D

    Once done, in the folder you have put it, just run: 
        
        $ gulp prefixes
*/

helloncanella

import React from "react"
import _ from "lodash"
import { PropTypes } from "prop-types"
import uniqid from "uniqid"

export default function withHoveredLinkObserver(Component) {
  return class HoveredLinkObserver extends React.Component {
    id = uniqid()
    anchors = Array.from(document.querySelectorAll(`#${this.id} a`))

helloncanella

function toggler(collection, item) {

    var clone = [...collection]

    const idx = _.indexOf(clone, item);
    if(idx !== -1) {
        clone.splice(idx, 1);
    } else {
        clone.push(item);
    }

helloncanella

@mixin grid($columns, $gutter){
  display: flex;
  flex-wrap: wrap;

  $r: $columns;
  $s: $gutter;
  $f: calc(#{100%/$r} - #{(($r - 1)*$s)/$r});

  &>*{

helloncanella

import { MongoClient } from "mongodb"

export default function setupMongoDB({ url, dbName }) {
  return new Promise((resolve, reject) => {
    MongoClient.connect(url, function(err, client) {
      if (err) {
        reject(err)
        return
      }

helloncanella

import clsx from "clsx"
import React, { useEffect } from "react"
import { LinearProgress } from "@material-ui/core"

function DelayedLoadingBar({ isLoading, showAfterMs = 500, className }) {
  const id = React.useRef(null)

  const [show, setShow] = React.useState(false)

  useEffect(() => {

helloncanella

useAppState({
  query: A_QUERY,
  variables: { variableA: "hello", variableB: "world" }
})

helloncanella

<div className="counter-A">
  <Counter label="A"></Counter>
  <AddOneButton label="A"></AddOneButton>
</div>
 
<div className="counter-B">
  <Counter label="B"></Counter>
  <AddOneButton label="B"></AddOneButton>
</div>

helloncanella

function Counter({ label }) {
  const { count } = useCount({ label })
  return <p>{count || 0}</p>
}
 
function AddOneButton({ label }) {
  const { count, setCount } = useCount({ label })
  const addOne = () => setCount((count || 0) + 1)
 
  return <button onClick={addOne}>Add one</button>