Skip to content

Instantly share code, notes, and snippets.

🤓

François Robichet Calvein

🤓
Block or report user

Report or block Calvein

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@Calvein
Calvein / index.js
Created Oct 25, 2018
Toggle component usage
View index.js
let Component = () => {
return (
<>
<Toggle defaultIsOn>
{({ isOn, toggle }) => (
<button onClick={toggle}>
is {isOn ? 'on' : 'off'}
</button>
<Modal isOpen={isOn}>
Hello
@Calvein
Calvein / declarative.js
Created Sep 11, 2018
Custom Dropdown react component API
View declarative.js
<Dropdown
trigger={({ toggle }) => (
<Button
isDropdown
icon={<IconDecoration />}
iconActive={<IconDecorationFill />}
onClick={toggle}
>
Decoration
</Button>
View react-redux-architecture.md

React/Redux architecture

Tools

  • [Visual Studio Code]: For its [TypeScript] integration
  • [TypeScript]: Which can also replace React's PropTypes
  • [Create React app]: For a PoC or a small project, you can easily [use TypeScript following this guide]
  • [Storybook]: To develop your component standalone, see Storybook-driven development
  • [Babel]
  • [Webpack]
@Calvein
Calvein / config
Created Jan 30, 2017
Polybar config
View config
[colors]
background = #1b2b34
foreground = #d8dee9
transparent = #00ffffff
base08 = #ec5f67
red = #ec5f67
base09 = #f99157
orange = #f99157
base0a = #fac863
View .Xresources
#define S_base03 #002b36
#define S_base02 #073642
#define S_base01 #586e75
#define S_base00 #657b83
#define S_base0 #839496
#define S_base1 #93a1a1
#define S_base2 #eee8d5
#define S_base3 #fdf6e3
*background: S_base03
@Calvein
Calvein / ces_theme.json
Created Jan 16, 2017
Fixed codepen Solarized Light
View ces_theme.json
{"elements":[{"prettyName":"Background","selector":".box, .editor .top-boxes, .CodeMirror-gutter-wrapper, body.project .editor-pane, body.project .editor","color":"#fdf6e3","description":false,"prop":"background"},{"prettyName":"Cursor","selector":".CodeMirror-cursor","color":"#657b83","description":false,"prop":"border-left-color"},{"prettyName":"Default","selector":".CodeMirror pre, .box pre,.editor .top-boxes pre,.CodeMirror-gutter-wrapper pre","color":"#657b83","description":"when nothin' else applies","prop":"color"},{"prettyName":"Keyword","selector":".cm-keyword","color":"#268bd2","description":"e.g. var, function","prop":"color"},{"prettyName":"Atom","selector":".cm-atom","color":"#859900","description":"used for some CSS values and JS primitives (e.g. null, undefined)","prop":"color"},{"prettyName":"HTML Atom","selector":".box-html .cm-atom","color":"#cb4b16","description":"e.g. HTML entities","prop":"color"},{"prettyName":"Definition","selector":".cm-def","color":"#b58900","description":"e.g. @inclu
@Calvein
Calvein / ces_theme.json
Created Jan 16, 2017
Fixed codepen Solarized Dark
View ces_theme.json
{"elements":[{"prettyName":"Background","selector":".box, .editor .top-boxes, .CodeMirror-gutter-wrapper, body.project .editor-pane, body.project .editor","color":"#002b36","description":false,"prop":"background"},{"prettyName":"Cursor","selector":".CodeMirror-cursor","color":"#839496","description":false,"prop":"border-left-color"},{"prettyName":"Default","selector":".CodeMirror pre, .box pre,.editor .top-boxes pre,.CodeMirror-gutter-wrapper pre","color":"#839496","description":"when nothin' else applies","prop":"color"},{"prettyName":"Keyword","selector":".cm-keyword","color":"#268bd2","description":"e.g. var, function","prop":"color"},{"prettyName":"Atom","selector":".cm-atom","color":"#859900","description":"used for some CSS values and JS primitives (e.g. null, undefined)","prop":"color"},{"prettyName":"HTML Atom","selector":".box-html .cm-atom","color":"#cb4b16","description":"e.g. HTML entities","prop":"color"},{"prettyName":"Definition","selector":".cm-def","color":"#b58900","description":"e.g. @inclu
@Calvein
Calvein / index.styl
Created Oct 4, 2016
Shadow on scroll for list with a scrollbar
View index.styl
$scroll-shadow
background linear-gradient(white 30%, rgba(black, 0)),
linear-gradient(rgba(black, 0) 10px, white 70%) bottom,
radial-gradient(at top, rgba(black, 0.2), transparent 70%),
radial-gradient(at bottom, rgba(black, 0.2), transparent 70%) bottom
background-repeat no-repeat
background-size 100% 20px, 100% 20px, 100% 10px, 100% 10px
background-attachment local, local, scroll, scroll
@Calvein
Calvein / components.styl
Last active Sep 6, 2016
Stylus style for react-select (assuming autoprefixer too)
View components.styl
@require 'control'
@require 'menu'
@require 'mixins'
@require 'multi'
@require 'spinner'
@Calvein
Calvein / data.json
Last active Dec 8, 2015
Get pictures and info of Australia's MPs
View data.json
[
{
"name": "Tony Abbott",
"img": "http://parlinfo.aph.gov.au/parlInfo/download/handbook/allmps/EZ5/upload_ref_binary/EZ5.JPG",
"electorate": "Warringah",
"state": "New South Wales"
},
{
"name": "Anthony Albanese",
"img": "http://parlinfo.aph.gov.au/parlInfo/download/handbook/allmps/R36/upload_ref_binary/R36.jpg",
You can’t perform that action at this time.