Joe's Code Jottings

I'll admit this up front: I'm lazy. I hate typing. I hate typing long words. I hate trying to read through long words to get to what I need to see, especially oft-repeated ones.

I label it a kind of laziness, but rather it is more that it is a distraction. It gets in the way of seeing what you need to see, because it is always sticking out. Code syntax highlighters aren't smart enough to 'rate' attributes and properties and highlight only the ones that matter and fade out the ones that don't...and how would they know?

And with that comes one tiny gripe with Material-UI's naming and syntax. "Grid container", "Grid item", "Typography variant={variant}". Even with syntax highlighting, I find it makes the text of my code hard to read, and takes up so much space that in a nested Grid, I end up with a lot of line-wrapping in the editor which also decreases readability for me. They are long, almost boilerplate, words that cease to be useful to me after I've typed them, but they're always there, always taking up space, and making it hard to find the properties that I really need to argue with, like the responsive size markers, or in the case of Typography, my actual text itself. When the wrapper for a block of text is bigger than the text itself, there's a problem that needs to be resolved.

So for the terminally lazy (and/or easily distracted) like myself, here's this:

import T from "@material-ui/core/Typography";  
import G from "@material-ui/core/Grid";

export const Gc = p => <G container {...p} />;  
export const Gci = p => <G container item {...p} />;  
export const Gi = p => <G item {...p} />;

export { T };  
export { G };

function tv(variant) {  
  return function TV(p) {
    return <T variant={variant} {...p} />;
  };
}
export const Th1 = tv("h1");  
export const Th2 = tv("h2");  
export const Th3 = tv("h3");  
export const Th4 = tv("h4");  
export const Th5 = tv("h5");  
export const Th6 = tv("h6");

export const Tst1 = tv("subtitle1");  
export const Tst2 = tv("subtitle2");

export const Tb1 = tv("body1");  
export const Tb2 = tv("body2");

export const Tbt = tv("button");  
export const Tc = tv("caption");  
export const To = tv("overline");

Which can be used in code like the following:

    <Gc spacing={10} className={classes.main}>
        <Gi xs={12}>
          <Paper className={classes.sliderPaper + ' ' + classes.gr}>
            <Th1>Heading</Th1>
            <Ts2>subtitle 2</Ts2>
            <Tb1>body1</Tb1>
          </Paper>
        </Gi>
    </Gc>

I'll probably expand this a little for Paper elevations and Card elevations as I go.

With all the subcomponents one needs in Tables, Cards, and Lists, you should be encapsulating those in your own components (Storybook time!), so your main app pages aren't flooded with them...but that's a different kind of laziness.