feat: add more snippets, use options for variant props, make some props deletable

BREAKING CHANGE: I'm labeling this as a breaking change just because some of the snippets behave quite a bit differently now and I don't want it
to be too much of a surprise to people.

Author: jedwards1211

README.md

@@ -9,8 +9,21 @@ export interface CompiledSnippet {
   parameters: Set<Parameter>
 }
 
-export default function snip([body]: TemplateStringsArray): CompiledSnippet {
-  body = body.replace(/\s+$/gm, '')
+export default function snip(
+  strings: TemplateStringsArray,
+  ...expressions: any[]
+): CompiledSnippet {
+  const parts = []
+  for (let i = 0; i < strings.length - 1; i++) {
+    parts.push(strings[i])
+    parts.push(
+      Array.isArray(expressions[i])
+        ? `|${expressions[i].join(',')}|`
+        : String(expressions[i])
+    )
+  }
+  parts.push(...strings.slice(expressions.length))
+  const body = parts.join('').replace(/\s+$/gm, '')
 
   const parameters: Set<Parameter> = new Set()
 

src/snip.ts

@@ -1,14 +1,15 @@
 import snip from '../snip'
+import { positions, colors } from './mui-app-bar'
 
 export const description = 'Material-UI <AppBar> with menu icon'
 
 export const body = snip`
-<AppBar position="\${#:static}">
-  <Toolbar $#>
+<AppBar position="\${#${positions}}" color="\${#${colors}}">
+  <Toolbar$#>
     <IconButton edge="start" color="inherit" aria-label="menu">
       <MenuIcon />
     </IconButton>
-    <Typography variant="h6" $#>
+    <Typography variant="h6"$#>
       $0
     </Typography> 
   </Toolbar>

src/snippets/mui-app-bar-menu.ts

@@ -1,11 +1,21 @@
 import snip from '../snip'
 
+export const colors = [
+  'primary',
+  'default',
+  'inherit',
+  'secondary',
+  'transparent',
+]
+
+export const positions = ['fixed', 'absolute', 'relative', 'static', 'sticky']
+
 export const description = 'Material-UI <AppBar>'
 
 export const body = snip`
-<AppBar position="\${#:static}">
-  <Toolbar $#>
-    <Typography variant="h6" $#>
+<AppBar position="\${#${positions}}" color="\${#${colors}}">
+  <Toolbar$#>
+    <Typography variant="h6"$#>
       $0
     </Typography> 
   </Toolbar>

src/snippets/mui-app-bar.ts

@@ -3,5 +3,5 @@ import snip from '../snip'
 export const description = 'Material-UI <BottomNavigationAction>'
 
 export const body = snip`
-<BottomNavigationAction label="$#" value={$#} icon={$#} $0 />
+<BottomNavigationAction label="$#" value={$#} icon={$#}$0 />
 `

src/snippets/mui-bottom-navigation-action.ts

@@ -0,0 +1,11 @@
+import snip from '../snip'
+import { variants, colors, sizes } from './mui-button'
+
+export const description = 'Material-UI <ButtonGroup> with size'
+export const body = snip`
+<ButtonGroup variant="\${#${variants}}" color="\${#${colors}}" size="\${#${sizes}}" aria-label="$#"$#>
+  <Button>$#</Button>
+  <Button>$#</Button>
+  $0
+</ButtonGroup>
+`

src/snippets/mui-button-group-size.ts

@@ -1,8 +1,9 @@
 import snip from '../snip'
+import { variants, colors } from './mui-button'
 
 export const description = 'Material-UI vertical <ButtonGroup>'
 export const body = snip`
-<ButtonGroup orientation="vertical" variant="\${#:outlined}" color="\${#:primary}" aria-label="$#" $#>
+<ButtonGroup orientation="vertical" variant="\${#${variants}}" color="\${#${colors}}" aria-label="$#"$#>
   <Button>$#</Button>
   <Button>$#</Button>
   $0

src/snippets/mui-button-group-vertical.ts

@@ -1,8 +1,9 @@
 import snip from '../snip'
+import { variants, colors } from './mui-button'
 
 export const description = 'Material-UI <ButtonGroup>'
 export const body = snip`
-<ButtonGroup variant="\${#:outlined}" color="\${#:primary}" aria-label="$#" $#>
+<ButtonGroup variant="\${#${variants}}" color="\${#${colors}}" aria-label="$#"$#>
   <Button>$#</Button>
   <Button>$#</Button>
   $0

src/snippets/mui-button-group.ts

@@ -0,0 +1,9 @@
+import snip from '../snip'
+import { variants, colors, sizes } from './mui-button'
+
+export const description = 'Material-UI <Button> with size'
+export const body = snip`
+<Button variant="\${#${variants}}" color="\${#${colors}}" size="\${#${sizes}}"$#>
+  $0
+</Button>
+`

src/snippets/mui-button-size.ts

@@ -1,8 +1,9 @@
 import snip from '../snip'
+import { colors } from './mui-button'
 
 export const description = 'Material-UI text <Button>'
 export const body = snip`
-<Button color="\${#:primary}" $#>
+<Button color="\${#${colors}}"$#>
   $0
 </Button>
 `