Adding missing frequently used components

[heIsThePirate]

Not sure if this extension is being still maintained. But given that this is sooo useful to me every single day (and probably to a lot of others as well), adding some of the missing most frequently used components while developing with MUI v5.

• muiAvatar
• muiBox
• muiCard
• muiChip
• muiDivider
• muiLink
• muiPaper
• muiSkeleton
• muiTable

Cheers!!

• Closes #2
• Closes #3

[jedwards1211]

yes this is still being maintained, thanks! I'll try to add comments to this PR...

[jedwards1211]

Okay that's most of the things I want to comment on I think. Basically I try to keep the "most default" snippet for a component only using props from the most basic use case, and use other snippets for when there are more props.

Good job figuring out my crazy templating system!

[jedwards1211]

Look at muiGridContainer and muiGridContainerFulll for examples of how I like to split up the default/advanced use cases. Also, I like to use prop__optional for the advanced props because in the generated snippet that wraps the whole property in a placeholder so that you can remove it.

[YeonV]

AWESOME extension!!! THANK you soo much for creating this!!! @jedwards1211 @oliviertassinari @heIsThePirate

I just started with using "snippets" and found your awesome extension

Could you show me how to add this snippet (if its possible at all):

• add import { useTheme } from '@mui/material' to the import section
• add const theme = useTheme() to the beginning of current function
• (stay or jump back) to the current cursor position

im sadly already struggling at the beginning of positioning:

{
"useTheme": {
		"prefix": [
			"theme",
		],
		"body": "import { useTheme } from '@mui/material'\nconst theme = useTheme()",
		"description": "useTranslation"
	}
}

Your templating language seems amazing, and might solve this? if so, would it be possbile somehow, to make user-created snippets with your template-language easier?

I would love to also add non mui-related stuff with your solution like:

{
"useTranslation": {
		"prefix": [
			"useTranslation",
			"t("
		],
		"body": "import { useTranslation } from 'next-i18next'\nconst { t } = useTranslation()",
		"description": "useTranslation"
	},
}

Thanks again

[megaacheyounes]

@heIsThePirate can you add MuiAlert? and can someone please merge this!!!

[luannofe]

@jedwards1211