christianalfoni

Updated packages

package	from version	to version
betsy	1.0.2	1.0.2-1583050194528
overmind	22.0.5	23.0.0-1583050194529
overmind-angular	22.0.5	23.0.0-1583050194529
overmind-devtools	23.1.3	24.0.0-1583050194529
overmind-devtools-client	5.1.3	6.0.0-1583050194529
overmind-devtools-vscode	4.1.3	5.0.0-1583050194529

christianalfoni

const config = {
  defaults: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    colors: {
      transparent: 'transparent',

christianalfoni

Taking inspiration from tailwindcss and this idea, here is a specification for how to achieve it.

What is it

With TailwindCSS you have an amazing default design system, but it is not ideal. It lacks:

• Validation of classnames: It does not validate the classnames you insert
• Composition: It does not allow you to effectively compose together classnames into new classnames and it can not dynamically do so at runtime effectively
• Defining by variables: Even though it is nice to write TailwindCSS inline with your elements, you can not define classes as variables, because the TailwindCSS extension does not understand it

This solution solves all of this with an even better experience of setup and consumption!

christianalfoni

// I have a couple of transition states, "authenticated", "authenticating", "unauthenticated"
const machine = new Machine({
  initial: 'unauthenticated',
  states: {
    unauthenticated: 'authenticating',
    authenticating: ['authenticated', 'unauthenticated'],
    authenticated: 'unauthenticated'
  }
})

christianalfoni

OUT {
  "seq": 0,
  "type": "response",
  "command": "configure",
  "request_seq": 0,
  "success": true
}
OUT {
  "seq": 0,
  "type": "response",

christianalfoni

CONTAINER

REQUEST {"seq":0,"type":"request","command":"configure","arguments":{"hostInfo":"vscode","preferences":{"providePrefixAndSuffixTextForRename":true,"allowRenameOfImportPath":true}}}
REQUEST {"seq":1,"type":"request","command":"updateOpen","arguments":{"changedFiles":[],"closedFiles":[],"openFiles":[{"file":"/sandbox/src/main.js","fileContent":"import Vue from 'vue';\nimport App from './App.vue';\n\nVue.config.productionTip = false;\n\nnew Vue({\n  render: h => h(App),\n}).$mount('#app');\n","scriptKindName":"JS","projectRootPath":"/sandbox"}]}}
REQUEST {"seq":0,"type":"request","command":"configure","arguments":{"hostInfo":"vscode","preferences":{"providePrefixAndSuffixTextForRename":true,"allowRenameOfImportPath":true}}}
REQUEST {"seq":1,"type":"request","command":"compilerOptionsForInferredProjects","arguments":{"options":{"module":"commonjs","target":"es2016","jsx":"preserve","allowJs":true,"allowSyntheticDefaultImports":true,"allowNonTsExtensions":true}}}
REQUEST {"seq":2,"type":"request","comma

christianalfoni

// Create an effect to persist data. For native envs, using something similar
// to localStorage
const persistedState = {
  set(state) {
    localStorage.setItem('state', JSON.stringify(state))
  },
  get() {
    return JSON.parse(localStorage.getItem('state') || '{}')
  }
}

christianalfoni

Updated packages

package	from version	to version
betsy	1.0.2	1.0.2-1575903734574
overmind	20.0.0	21.0.0-1575903734575
overmind-angular	20.0.0	21.0.0-1575903734575
overmind-devtools	21.0.0	22.0.0-1575903734575
overmind-devtools-client	3.0.0	4.0.0-1575903734575
overmind-devtools-vscode	2.0.0	3.0.0-1575903734575

christianalfoni

/*
  Add to package JSON script:
  npm run test:pr ${ID}
  The ID is the #1234 type of number on the PR
*/ 
const { spawn } = require('child_process');
const { argv } = require('yargs');
const username = require('username');

const id = argv._[0];

christianalfoni

export const createModals = <
  T extends {
    [name: string]: {
      state?: IState;
      result?: unknown;
    };
  }
>(
  modals: T
): {