Skip to content

Instantly share code, notes, and snippets.

Avatar

Olivier Tassinari oliviertassinari

View GitHub Profile
View metric.js
import warning from 'warning'
const times = new Map()
const implementations = {
mark: {
start: name => {
times.set(name, performance.now())
performance.mark(`metric_${name}_start`)
},
@oliviertassinari
oliviertassinari / theme.js
Last active Jul 11, 2020
Material-UI Store theme
View theme.js
import { deepmerge } from '@material-ui/utils';
import { createMuiTheme } from '@material-ui/core/styles';
import grey from '@material-ui/core/colors/grey';
const rawTheme = createMuiTheme({
palette: {
primary: {
main: '#1976d2',
dark: '#0052cc',
},
View theme.js
import { deepmerge } from '@material-ui/utils'
import { createMuiTheme } from '@material-ui/core/styles'
import grey from '@material-ui/core/colors/grey'
const basicBlue = '#0052cc' // Nathan's blue #0b24fb
const rawTheme = createMuiTheme({
palette: {
primary: {
main: basicBlue,
View README.md
diff --git a/yarn.lock b/yarn.lock
index fb57ccd..e24ce4a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,3 +2,276 @@
 # yarn lockfile v1


+"@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7":
View theme.js
import { deepmerge } from '@material-ui/utils';
import { createMuiTheme } from '@material-ui/core/styles';
import { grey } from '@material-ui/core/colors';
const rawTheme = createMuiTheme({
palette: {
primary: {
main: '#1976d2',
dark: '#0052cc',
},
View searches.csv
search count
button 3862
icon 3642
grid 3140
icons 2419
text 2303
table 2190
form 1816
input 1788
card 1788
View datatables.md
Features react-data-grid react-table material-table hand-sontable ag-gird antd Kendo Syncfusion datatables.net
Stars 3.5k 7k 1k 12k 6k
Downloads 280k 1.1m 90k 190k 400k 33k 5k 550k
Bundle size 40kB 11kB 85kB 315kB 250kB 20kB 425kB 56kB
Docs traffic 95k 230k 1.3m
Row sorting free free free 💰 free free 💰 💰 free
Filtering free free free 💰 free free 💰 💰 free
Cell editing free free free 💰 free free 💰 💰 💰
Column with groups free 💰 free free 💰 💰 free
@oliviertassinari
oliviertassinari / Variant.js
Created Jan 3, 2019
Build your own design system
View Variant.js
import React from "react";
import styled, { ThemeProvider } from "styled-components";
import { style, typography } from "@material-ui/system";
const variant = style({
prop: "variant",
cssProperty: false,
themeKey: "typography"
});
View Banner.js
import React from "react";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Avatar from "@material-ui/core/Avatar";
import Divider from "@material-ui/core/Divider";
import CssBaseline from "@material-ui/core/CssBaseline";
import SignalWifiOffIcon from "@material-ui/icons/SignalWifiOff";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import { unstable_Box as Box } from "@material-ui/core/Box";
View Box.js
import { palette, spacing, typography } from '@material-ui/system';
import styled from 'styled-components';
const Box = styled.div`${palette}${spacing}${typography}`;
// or import { unstable_Box as Box } from '@material-ui/core/Box';
<Box
color="primary.main"
bgcolor="background.paper"
fontFamily="h6.fontFamily"
You can’t perform that action at this time.