typescriptreact.json

{
	"SVComponent": {
		"prefix": "svcomponent",
		"body": [
			"import React, { forwardRef } from 'react';",
			"",
			"import ErrorBoundary from '../ErrorBoundary';",
			"import { SVComponent } from '../../types/shared';",
			"import { getClasses } from '../../lib/componentLib';",
			"",
			"import styles from './${1:ComponentName}.module.css';",
			"",
			"/*",
			"TODO:",
			"	- Delete `aria-label` and `sanitizedArgs` if not needed",
			"	- Swap `SVComponent` with `SVComponentWithChildren` if needed",
			"*/",
			"",
			"export type ${1:ComponentName}Props = {",
			"	/**",
			"	 * Aria label attribute for screen readers",
			"	 */",
			"	'aria-label'?: string;",
			"} & SVComponent &",
			"	React.HtmlHTMLAttributes<HTMLDivElement>;",
			"",
			"/**",
			" * TODO: Describe the component here",
			" */",
			"const ${1:ComponentName} = forwardRef<HTMLDivElement, ${1:ComponentName}Props>(",
			"	function ${1:ComponentName}({ className = '', ...args }, ref) {",
			"		const classes = getClasses({",
			"			classes: ['${2:component-name}', ...className.trim().split(' ')],",
			"			cssModules: [styles],",
			"		});",
			"",
			"		const ariaLabel = args?.['aria-label'];",
			"		const sanitizedArgs = { ...args };",
			"		delete sanitizedArgs['aria-label'];",
			"",
			"		return (",
			"			<ErrorBoundary name='${1:ComponentName}'>",
			"				<div",
			"					ref={ref}",
			"					className={classes}",
			"					{...sanitizedArgs}",
			"				/>",
			"			</ErrorBoundary>",
			"		);",
			"	},",
			");",
			"",
			"export default ${1:ComponentName};"
			"",
		],
	},
	"SVStory": {
		"prefix": "svstory",
		"body": [
			"import React from 'react';",
			"import { Meta, StoryFn } from '@storybook/react';",
			"import ${1:ComponentName}, { type ${1:ComponentName}Props } from './${1:ComponentName}';",
			"",
			"export default {",
			"	title: '${2:StoryPath}',",
			"	component: ${1:ComponentName},",
			"} as Meta<typeof ${1:ComponentName}>;",
			"",
			"const Template: StoryFn<typeof ${1:ComponentName}> = (",
			"	args: ${1:ComponentName}Props,",
			") => {",
			"	return <${1:ComponentName} {...args} />;",
			"};",
			"",
			"export const Default = Template.bind({});",
			"Default.args = {};",
			"",
		]
	},
	"SVTest": {
		"prefix": "svtest",
		"body": [
			"/* eslint-disable testing-library/no-node-access */",
			"import React from 'react';",
			"import { render, screen } from '@testing-library/react';",
			"import { axe, toHaveNoViolations } from 'jest-axe';",
			"import userEvent from '@testing-library/user-event';"
			"import ${1:ComponentName} from './${1:ComponentName}';",
			"",
			"expect.extend(toHaveNoViolations);",
			"",
			"describe('${1:ComponentName}', () => {",
			"	it('should not have any testable a11y violations', async () => {",
			"		const { container } = render(",
			"			<${1:ComponentName} />,",
			"		);",
			"		const results = await axe(container);",
			"",
			"		expect(results).toHaveNoViolations();",
			"	});",
			"});",
		]
	}
}