# Snippets

dd

<details>

<summary>How to get to "snippets" in VSCode</summary>

* `Cmd + P`
* In textbox, type & click: `>Snippets: Configure User Snippets`&#x20;
* Find `typescriptreact.code-snippets` & click
  * Mine has the extension `.code-snippets` for whatever reason, but I think the standard `.json` should work as well? [(article for instructions to configure snippets here)](https://medium.com/@manishmanice2003/creating-custom-react-typescript-snippets-in-visual-studio-code-99ce3ea20f71)

![](/files/iW2Q6A6FbPOE8cdis5pn)

</details>

<details>

<summary>How to create snippets (snippet generator)</summary>

* [Snippet Generator](https://snippet-generator.app/)

</details>

<details>

<summary>Aaron's snippets</summary>

```javascript
{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	//
	// Snippet generator: https://snippet-generator.app/
	//
	// JavaScript
	"function": {
		"scope": "typescriptreact,typescript",
		"prefix": "f",
		"body": [
			"function ${1:}() {",
			"  ${2:}",
			"}"
		],
		"description": "function"
	},
	"console.log": {
		"scope": "typescriptreact,typescript",
		"prefix": "cl",
		"body": [
			"console.log(${1:})"
		],
		"description": "console log"
	},
	"arrow function": {
		"scope": "typescriptreact,typescript",
		"prefix": "arr",
		"body": [
			"() => {${1:}}"
		],
		"description": "arrow function"
	},
	"if": {
		"scope": "typescriptreact,typescript",
		"prefix": "iff",
		"body": [
			"if (${1:}) {",
			"  ${2:}",
			"}"
		],
		"description": "if"
	},
	"ifelse": {
		"scope": "typescriptreact,typescript",
		"prefix": "ifel",
		"body": [
			"if (${1:}) {",
			"  ${2:}",
			"} else {",
			"  ${3:}",
			"}"
		],
		"description": "ifelse"
	},
	"try catch": {
		"scope": "typescriptreact,typescript",
		"prefix": "tryc",
		"body": [
			"try {",
			"  ${1:}",
			"} catch {",
			"  ${2:}",
			"}"
		],
		"description": "try catch"
	},
	// React
	"reactFunctionalComponent": {
		"prefix": "rfc",
		"body": [
			"interface Props {}",
			"",
			"export function ${1:ComponentName}({}: Props) {",
			"  return (",
			"    <${2}>",
			"      ${3}",
			"    </${2}>",
			"  );",
			"}"
		],
		"description": "reactFunctionalComponent"
	},
	"reactFunctionalComponentContext": {
		"prefix": "rfc-context",
		"body": [
			"import React, { createContext, useContext } from 'react';",
			"",
			"// context (with default values)",
			"interface ContextProps {",
			"",
			"}",
			"const Context = createContext<ContextProps | undefined>(undefined)",
			"",
			"// context provider (makes context accessible to children)",
			"interface ProviderProps {",
			"  children: React.ReactNode;",
			"}",
			"export function Context${1:Item}Provider({ children }: ProviderProps) {",
			"  return <Context.Provider value={{}}>{children}</Context.Provider>;",
			"}",
			"",
			"// context hook (to use the context within children components)",
			"export function useContext${1:Item}() {",
			"  const context = useContext(Context);",
			"  if (context === undefined) {",
			"    throw new Error('useContext${1:Item} must be used within a Context${1:Item}Provider');",
			"  }",
			"  return context;",
			"}",
			""
		],
		"description": "reactFunctionalComponent-context"
	},
	"reactFunctionalComponentIndex": {
		"prefix": "rfci",
		"body": [
			"export * from './${1:ComponentName}';",
		],
		"description": "reactFunctionalComponentIndex"
	},
	"useEffect": {
		"scope": "typescriptreact,typescript",
		"prefix": "useeff",
		"body": [
			"useEffect(() => {",
			"  ${1:}",
			"}, [${2:}])"
		],
		"description": "useEffect"
	},
	// Pavewise
	"reactFunctionalComponentPagePavewise": {
		"prefix": "rfcp-pavewise",
		"body": [
			"interface PageProps {}",
			"",
			"export default function Page({}: PageProps) {",
			"${1}",
			"  return (",
			"    <>",
			"      ${2}",
			"    </>",
			"  )",
			"}"
		],
		"description": "reactFunctionalComponentPagePavewise"
	},
	"reactFunctionalComponentLayoutPavewise": {
		"prefix": "rfcl-pavewise",
		"body": [
			"import { PageLayout } from '@components/layout/_pages/PageLayout';",
			"import Page from './page';",
			"",
			"interface LayoutProps {}",
			"",
			"export default function Layout({}: LayoutProps) {",
			"  return (",
			"    <PageLayout header={null}>",
			"      <Page />",
			"    </PageLayout>",
			"  );",
			"}",
			""
		],
		"description": "reactFunctionalComponentLayoutPavewise"
	},
	"reactFunctionalComponentIndexLayoutPavewise": {
		"prefix": "rfci-layout-pavewise",
		"body": [
			"export { default } from './layout';",
		],
		"description": "reactFunctionalComponentIndexLayoutPavewise"
	},
	"reactFunctionComponentSchema": {
		"prefix": "rfc-schema",
		"body": [
			"import { z } from 'zod';",
			"",
			"/**",
			" * See documentation: https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/new/router-folder#schema.ts",
			" */",
			"",
			"// FE schemas",
			"export const schema = z.object({});",
			"",
			"export const schemaCreate = schema.pick({});",
			"",
			"export const schemaUpdate = schema.pick({}).partial();",
			"",
			"// BE schemas",
			"export const schemaBE = z.object({});",
			"",
			"export const schemaBECreate = schemaBE.pick({});",
			"",
			"export const schemaBEUpdate = schemaBE.pick({}).partial();",
			"    "
		],
		"description": "reactFunctionComponentSchema"
	},
	"reactFunctionComponentAdapterFns": {
		"prefix": "rfc-adapterFns",
		"body": [
			"import { TDocBE, TDocBECreate, TDoc, TDocCreate } from './types';",
			"",
			"/**",
			" * See documentation: https://pavewise.gitbook.io/pavewise-style-guide-and-more/frontend/new/router-folder#adapterfns.ts",
			" */",
			"",
			"export function adapterFn(data: TDocBE): TDoc {",
			"  return data;",
			"  // return {};",
			"}",
			"",
			"export function adapterFnToBE(data: TDocCreate): TDocBECreate {",
			"  return data;",
			"  // return {};",
			"}",
			""
		],
		"description": "reactFunctionComponentAdapterFns"
	},
	"reactFunctionalComponentFormCRUD": {
		"prefix": "rfc-formcrud",
		"body": [
			"import { Stack } from '@mui/material';",
			"import { useFormField } from '~/hooks';",
			"import { DevTool } from '@hookform/devtools';",
			"import { useFormDoc } from './_lib';",
			"import { TYPE } from '../../../_config';",
			"",
			"interface Props {}",
			"",
			"export function FormCRUD({}: Props) {",
			"  const { form, onSubmit, isLoading } = useFormDoc();",
			"  const { TextFieldRhf, FormHeader, FormButtonsContainer, ButtonSubmit } = useFormField();",
			"",
			"  return (",
			"    <>",
			"      <FormHeader details=\"Form details...\">{TYPE.display.singular}</FormHeader>",
			"",
			"      <Stack gap={1} sx={{ width: 1 }}>",
			"        <TextFieldRhf form={form} name=\"name\" label=\"Name\" />",
			"        <FormButtonsContainer>",
			"          <ButtonSubmit onClick={form.handleSubmit(onSubmit)} disabled={isLoading} isLoading={isLoading} />",
			"          {/* <ButtonCancel onClick={() => setOpenModal(false)} disabled={isLoading} /> */}",
			"        </FormButtonsContainer>",
			"",
			"        <DevTool control={form.control} placement=\"top-right\" />",
			"      </Stack>",
			"    </>",
			"  );",
			"}",
			""
		],
		"description": "reactFunctionalComponentFormCRUD"
	},
	"storybookStory": {
		"prefix": "sb-s",
		"body": [
			"import type { Meta, StoryObj } from '@storybook/react';",
			"import { StorybookProviders } from '~/context';",
			"import { ${1:ComponentName} as Component } from './index';",
			"// import { FX_DATA } from '~/fixtures';",
			"// import * as InnerComponentStories from '../InnerComponent/InnerComponent.stories';",
			"",
			"// COMPONENT",
			"const meta = {",
			"  component: Component,",
			"  title: 'Components/UI/${1:ComponentName}',",
			"  tags: ['autodocs'],",
			"  decorators: [",
			"    (Story) => (",
			"      <StorybookProviders>",
			"        <Story />",
			"      </StorybookProviders>",
			"    ),",
			"  ],",
			"} satisfies Meta<typeof Component>;",
			"export default meta;",
			"",
			"// STORIES",
			"type Story = StoryObj<typeof meta>;",
			"const defaultArgs: Story['args'] = {",
			"  // data: undefined,",
			"  // isLoading: false,",
			"  // isError: false,",
			"  // propsInnerComponent: InnerComponentStories.Default.args,",
			"};",
			"const standardArgs: Story['args'] = {",
			"  ...defaultArgs,",
			"  // data: FX_DATA,",
			"  // propsInnerComponent: InnerComponentStories.Standard.args,",
			"};",
			"",
			"export const Playground: Story = {",
			"  args: standardArgs,",
			"  parameters: {",
			"    layout: 'centered',",
			"  },",
			"};",
			"",
			"export const Default: Story = {",
			"  args: defaultArgs,",
			"};",
			"",
			"export const Standard: Story = {",
			"  args: standardArgs,",
			"};",
			"",
			"// export const Loading: Story = {",
			"//   args: {",
			"//     ...Standard.args,",
			"//     isLoading: true,",
			"//   },",
			"// };",
			"",
			"// export const Error: Story = {",
			"//   args: {",
			"//     ...Standard.args,",
			"//     isError: true,",
			"//   },",
			"// };",
			"",
			"// export const Empty: Story = {",
			"//   args: {",
			"//     ...Standard.args,",
			"//     data: undefined,",
			"//   },",
			"// };",
			"",
			"// export const WithoutDataField: Story = {",
			"//   args: {",
			"//     ...Standard.args,",
			"//     data: { ...FX_DATA, field: undefined },",
			"//   },",
			"// };",
			""
		],
		"description": "storybookStory"
	},
}
```

</details>

ddd


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://aaron-mota.gitbook.io/aarons-style-guide/starting-a-new-project/setup/editor-ide-setup/snippets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.