feat: add imrs, imrse, rnxf snippets

Restores snippet contributions from closed PRs:
- imrs / imrse (#321): React imports with useState / useState+useEffect
- rnxf (#339): React Native extended functional component

Also sorts package.json keywords to satisfy oxfmt --check.

Author: ice-chillios

package.json

@@ -7,29 +7,29 @@
     "Snippets"
   ],
   "keywords": [
-    "react snippets",
-    "react native snippets",
-    "redux snippets",
-    "javascript snippets",
-    "typescript snippets",
+    "customizable",
+    "es2022",
+    "es7",
     "es7 snippets",
+    "hooks",
+    "javascript",
+    "javascript snippets",
+    "jsx",
+    "productivity",
     "react",
-    "react-native",
+    "react native snippets",
+    "react snippets",
     "react-hooks",
+    "react-native",
     "react-router",
     "redux",
+    "redux snippets",
     "redux-toolkit",
     "rtk-query",
-    "javascript",
-    "typescript",
-    "jsx",
-    "tsx",
     "snippets",
-    "hooks",
-    "es2022",
-    "es7",
-    "customizable",
-    "productivity"
+    "tsx",
+    "typescript",
+    "typescript snippets"
   ],
   "homepage": "https://github.com/r5n/vscode-react-javascript-snippets#readme",
   "bugs": {

src/snippets/generated.json

@@ -993,6 +993,22 @@
     ],
     "scope": "typescript,typescriptreact,javascript,javascriptreact"
   },
+  "importReactWithUseState": {
+    "key": "importReactWithUseState",
+    "prefix": "imrs",
+    "body": [
+      "import { useState } from 'react'"
+    ],
+    "scope": "typescript,typescriptreact,javascript,javascriptreact"
+  },
+  "importReactWithUseStateAndUseEffect": {
+    "key": "importReactWithUseStateAndUseEffect",
+    "prefix": "imrse",
+    "body": [
+      "import { useState, useEffect } from 'react'"
+    ],
+    "scope": "typescript,typescriptreact,javascript,javascriptreact"
+  },
   "importCreateBrowserRouter": {
     "key": "importCreateBrowserRouter",
     "prefix": "imcbr",
@@ -1433,6 +1449,42 @@
     ],
     "scope": "typescript,typescriptreact,javascript,javascriptreact"
   },
+  "reactNativeExtendedFunctional": {
+    "key": "reactNativeExtendedFunctional",
+    "prefix": "rnxf",
+    "body": [
+      "import { useState, useEffect } from 'react'",
+      "import { View, SafeAreaView, Text, StyleSheet } from 'react-native'",
+      "",
+      "const ${1:${TM_FILENAME_BASE}} = ({ ${2:props} }) => {",
+      "  const [${3:state}, ${4:setState}] = useState(${5:initialState})",
+      "",
+      "  useEffect(() => {",
+      "    // Effect here",
+      "  }, [])",
+      "",
+      "  return (",
+      "    <SafeAreaView style={styles.container}>",
+      "      <View>",
+      "        <Text>${6:Hello, World!}</Text>",
+      "      </View>",
+      "    </SafeAreaView>",
+      "  )",
+      "}",
+      "",
+      "const styles = StyleSheet.create({",
+      "  container: {",
+      "    flex: 1,",
+      "    justifyContent: 'center',",
+      "    alignItems: 'center',",
+      "  },",
+      "})",
+      "",
+      "export default ${1:${TM_FILENAME_BASE}}"
+    ],
+    "description": "React Native functional component with useState, useEffect, SafeAreaView and basic styling",
+    "scope": "typescript,typescriptreact,javascript,javascriptreact"
+  },
   "reactNativeFunctionalComponent": {
     "key": "reactNativeFunctionalComponent",
     "prefix": "rnf",

src/sourceSnippets/imports.ts

@@ -19,6 +19,8 @@ type ImportsMappings = {
   importReactWithMemoAndPropTypes: 'imrmp';
   importReactWithPureComponent: 'imrpc';
   importReactWithPureComponentAndPropTypes: 'imrpcp';
+  importReactWithUseState: 'imrs';
+  importReactWithUseStateAndUseEffect: 'imrse';
   importReduxConnect: 'redux';
   importRouterLink: 'imbrl';
   importRouterNavLink: 'imbrnl';
@@ -81,6 +83,18 @@ const importReactWithPureComponentAndPropTypes: ImportsSnippet = {
   ],
 };
 
+const importReactWithUseState: ImportsSnippet = {
+  key: 'importReactWithUseState',
+  prefix: 'imrs',
+  body: ["import React, { useState } from 'react'"],
+};
+
+const importReactWithUseStateAndUseEffect: ImportsSnippet = {
+  key: 'importReactWithUseStateAndUseEffect',
+  prefix: 'imrse',
+  body: ["import React, { useState, useEffect } from 'react'"],
+};
+
 const importReactWithMemo: ImportsSnippet = {
   key: 'importReactWithMemo',
   prefix: 'imrm',
@@ -236,6 +250,8 @@ export default [
   importReactWithMemoAndPropTypes,
   importReactWithPureComponent,
   importReactWithPureComponentAndPropTypes,
+  importReactWithUseState,
+  importReactWithUseStateAndUseEffect,
   importCreateBrowserRouter,
   importRouterLink,
   importRouterNavLink,

src/sourceSnippets/reactNative.ts

@@ -19,6 +19,7 @@ type ReactNativeMapping = {
   reactNativeFunctionalExportComponentWithStyles: 'rnfes';
   reactNativeFunctionalComponent: 'rnf';
   reactNativeFunctionalComponentWithStyles: 'rnfs';
+  reactNativeExtendedFunctional: 'rnxf';
 };
 
 export type ReactNativeSnippet = SnippetMapping<ReactNativeMapping>;
@@ -181,10 +182,48 @@ const reactNativeFunctionalComponentWithStyles: ReactNativeSnippet = {
   ],
 };
 
+const reactNativeExtendedFunctional: ReactNativeSnippet = {
+  key: 'reactNativeExtendedFunctional',
+  prefix: 'rnxf',
+  body: [
+    "import React, { useState, useEffect } from 'react'",
+    "import { View, SafeAreaView, Text, StyleSheet } from 'react-native'",
+    '',
+    `const ${Placeholders.FileName} = ({ \${2:props} }) => {`,
+    '  const [${3:state}, ${4:setState}] = useState(${5:initialState})',
+    '',
+    '  useEffect(() => {',
+    '    // Effect here',
+    '  }, [])',
+    '',
+    '  return (',
+    '    <SafeAreaView style={styles.container}>',
+    '      <View>',
+    '        <Text>${6:Hello, World!}</Text>',
+    '      </View>',
+    '    </SafeAreaView>',
+    '  )',
+    '}',
+    '',
+    'const styles = StyleSheet.create({',
+    '  container: {',
+    '    flex: 1,',
+    "    justifyContent: 'center',",
+    "    alignItems: 'center',",
+    '  },',
+    '})',
+    '',
+    `export default ${Placeholders.FileName}`,
+  ],
+  description:
+    'React Native functional component with useState, useEffect, SafeAreaView and basic styling',
+};
+
 export default [
   reactNativeComponent,
   reactNativeComponentExport,
   reactNativeComponentWithStyles,
+  reactNativeExtendedFunctional,
   reactNativeFunctionalComponent,
   reactNativeFunctionalComponentWithStyles,
   reactNativeFunctionalExportComponent,