Snippets for Beam

Forked from https://github.com/vscodeshift/material-ui-snippets

Note: There are two ways to insert these:

• Trigger Suggest (⌃Space on macOS) and then type in the name; or you can enable the Editor: Tab Completion setting, then type the name of the snippet and press Tab.
• Execute the corresponding editor commands like Beam: insert <Button> (or even better, make keybindings for them!).

Performance Warning: Currently, the suggestions can cause performance issues due to VSCode API limitations. After the API is improved in an upcoming release I can fix these performance issues. Until then, the workaround is to either disable adding automatic imports for snippets (Settings > Extensions > Beam Snippets > Add Completion Imports) or use the commands to insert snippets instead of suggestions.

Features

• Works in JS/X and TSX
• Automatically adds missing imports when a snippet is inserted (as long as it succeeds in parsing the entire file)
• You can configure whether to use controlled or uncontrolled form controls in the extension settings.

Settings

Form Control Mode

• controlled - inserts value and onChange properties
• uncontrolled - inserts defaultValue property

Snippets

• beamAvatar: Beam <Avatar>
• beamBox: Beam <Box>
• beamButton: Beam <Button>
• beamButtonLoading: Beam <Button> with loading
• beamButtonSize: Beam <Button> with size
• beamButtonWithIcon: Beam <Button> with icon
• beamFormControl: Beam <FormControl>
• beamFormControlGroup: Beam <FormControlGroup> with <FormControl>
• beamModal: Beam <Modal>
• beamSpinner: Beam <Spinner>
• beamStack: Beam <Stack>
• beamText: Beam <Text>

beamAvatar: Beam <Avatar>

<Avatar size="${1|small,medium,xlarge,xxlarge|}" fit="${2|cover,contain|}" icon={$3}$4/>

beamBox: Beam <Box>

<Box$1>
  $0
</Box>

beamButton: Beam <Button>

<Button variant="${1|primary,secondary,tertiary,subtle|}"$2>
  $0
</Button>

beamButtonLoading: Beam <Button> with loading

<Button loading variant="${1|primary,secondary,tertiary,subtle|}"$2>
  $0
</Button>

beamButtonSize: Beam <Button> with size

<Button variant="${1|primary,secondary,tertiary,subtle|}" size="${2|small,medium,large|}"$3>
  $0
</Button>

beamButtonWithIcon: Beam <Button> with icon

<Button
  variant="${1|primary,secondary,tertiary,subtle|}"
  icon={$2}
  $3
/>

beamFormControl: Beam <FormControl>

<FormControl control={$0}>
  $1
</FormControl>

beamFormControlGroup: Beam <FormControlGroup> with <FormControl>

<FormControlGroup layout=${1|block,inline-start,inline-end|}$2>
  <FormControl control={$3}>
    $0
  </FormGroup>
</FormControlGroup>

beamModal: Beam <Modal>

<OverlayManager visible={${1:true}} onRequestClose={$2}>
  <Modal>
    <Modal.Header title="$4" sticky={${5:true}} withClose={${6:true}}$7/>
    <Modal.Body>
      <Stack>
        $8
      </Stack>
    </Modal.Body>
    <Modal.Footer
      actions={
        <>
          <Modal.Action variant="${0|primary,secondary,tertiary,subtle|}" requestCloseOnClick $10>
            $11
          </Modal.Action>
          <Modal.Action variant="${12|primary,secondary,tertiary,subtle|}" requestCloseOnClick $13>
            $14
          </Modal.Action>
        </>
      }
    />
  </Modal>
</OverlayManager>

beamSpinner: Beam <Spinner>

<Spinner size="${1|small,medium,xlarge,xxlarge|}"}${2: color="$3"}$4/>

beamStack: Beam <Stack>

<Stack direction=${1|horizontal,vertical|}$2>
  $0
</Stack>

beamText: Beam <Text>

<Text${1: as="${2|h1,h2,h3,h4,h5,h6,subtitle1,subtitle2,body1,body2,caption,button,overline,srOnly,inherit|}" variant="${3|jumboRegular,jumboSemiBold,megaRegular,megaSemiBold,displayRegular,displayMedium,displaySemiBold,headlineSemiBold,titleSemiBold,subtitle1Regular,subtitle1Medium,subtitle1SemiBold,subtitle2Regular,subtitle2Medium,subtitle2SemiBold,bodyRegular,bodyMedium,bodySemiBold,microRegular,microMedium,microSemiBold,nanoRegular,nanoMedium,nanoSemiBold,labelSemiBold|}"}$4>$TM_SELECTED_TEXT$0</Text>