Skip to content

Instantly share code, notes, and snippets.

Avatar

Andrey Okonetchnikov okonet

View GitHub Profile
View SketchSystems.spec
DatePicker
DateNotSet
click -> SelectDate
SelectDate
hover -> DateHighlighted
DateHighlighted
click -> DateSet
DateSelected
hover -> DateHighlighted
@okonet
okonet / SketchSystems.spec
Created Aug 13, 2020
DynamicDateRangePicker
View SketchSystems.spec
DynamicDateRangePicker
DateRangeNotSet
click -> CustomRange
CustomRange
fixedStart -> FixedStart
prevPeriod -> PreviousPeriod
nextPeriod -> NextPeriod
currentPeriod -> CurrentPeriod
# See https://sketch.systems/okonet/sketch/64ddad32ec5753cdab12da7d4eb53a48
DateRangePicker&
@okonet
okonet / SketchSystems.spec
Last active Feb 28, 2020
Pattern Journey
View SketchSystems.spec
Pattern Journey
Pattern exists in the UI library?*
Yes -> Does it fulfill all the requirements?
No -> Similar pattern exists in other projects?
Does it fulfill all the requirements?
Yes -> Just use it
No -> Can be modified to fulfill all requirements?
Similar pattern exists in other projects?
View machine.js
const patterJourneyMachine = Machine({
id: 'pattern',
initial: 'Pattern exists in the UI library?',
states: {
"Pattern exists in the UI library?": {
on: {
YES: 'Does it fulfill all the requirements?',
NO: 'Similar pattern exists in other projects?'
}
},
@okonet
okonet / mixins.js
Created Jan 29, 2020
Mixins to handle focus ring in CSS-in-JS
View mixins.js
import "focus-visible"; // :focus-visible polyfill
import { darken, transparentize } from "polished";
/**
* Mixin to generate consistent box-shadow rule for focus rings and selections
*/
export function focusBoxShadow(color, hasInset = false) {
return {
boxShadow: `
0 0 0 0.2em ${transparentize(0.75, color)}
@okonet
okonet / lightning_talk_proposal.md
Last active Apr 10, 2018
Make linting great again! -- ReactiveConf 2017 ⚡️talk proposal
View lightning_talk_proposal.md

Please 🌟 this gist to vote for this proposal!

Make linting great again!

tabs vs spaces

No other topic in software development probably has so much controversy as linting.

With a wrong workflow linting can be really a pain and will slow you and your team down. With a proper setup, though, it can save you hours of manual work reformatting the code and reducing the code-review overhead.

@okonet
okonet / jest-webpack-preprocessor.js
Created Mar 9, 2017
Test webpack-shimmed and aliased modules with Jest
View jest-webpack-preprocessor.js
/* eslint-env node */
const path = require('path');
const webpack = require('webpack');
const MemoryFileSystem = require('memory-fs');
const EnhancedResolve = require('enhanced-resolve');
const transform = require('transform-jest-deps');
const babel = require('babel-jest');
const createConfig = require('../build/utils/createWebpackConfig');
@okonet
okonet / ScrollPane.js
Created Jan 13, 2017
React at 60fps Example 3
View ScrollPane.js
export default class ScrollPane extends Component {
static contextTypes = {
registerPane: PropTypes.func.isRequired,
unregisterPane: PropTypes.func.isRequired
};
componentDidMount() {
this.context.registerPane(this.el)
}