feat: atom extension (#44)

Author: 0xMukesh

package.json

@@ -20,4 +20,4 @@
     "format": "prettier --write \"packages/vscode/{code,snippets}/**/*.{js,jsx,ts,tsx,json,md}\"",
     "format:check": "prettier --check \"packages/vscode/{code,snippets}/**/*.{js,jsx,ts,tsx,json,md}\""
   }
-}
+}

packages/atom/README.md

@@ -0,0 +1,110 @@
+# Usage Guide
+
+# Installation
+
+- Install the Atom package
+- Reload Atom
+- The code snippets are ready to use 🎉
+
+# Usage
+
+## React
+
+### JavaScript
+
+1. `rimr` (Import React)
+
+   ```jsx
+   import React from "react";
+   ```
+
+2. `rimrd` (Import ReactDOM)
+
+   ```jsx
+   import ReactDOM from "react-dom";
+   ```
+
+3. `rimrs` (Import React and useState)
+
+   ```jsx
+   import React, { useState } from "react";
+   ```
+
+4. `rimrse` (Import React, useState and useEffect)
+
+   ```jsx
+   import React, { useState, useEffect } from "react";
+   ```
+
+5. `rfc` (React functional component)
+
+   ```jsx
+   const Component = () => {
+     return <div></div>;
+   };
+   export default Component;
+   ```
+
+6. `rue` (useEffect hook)
+
+   ```jsx
+   useEffect(() => {}, []);
+   ```
+
+7. `rus` (useState hook)
+
+   ```jsx
+   const [state, setState] = useState(initialValue);
+   ```
+
+8. `ruc` (useContext hook)
+
+   ```jsx
+   const value = useContext(myContext);
+   ```
+
+9. `rur` (useRef hook)
+
+   ```jsx
+   const refContainer = useRef(initialValue);
+   ```
+
+### TypeScript
+
+1. `rfcet` (React functional component)
+
+   ```tsx
+   import React from "react";
+
+   interface Props {}
+
+   function Component({}: Props) {
+     return <div></div>;
+   }
+
+   export default Component;
+   ```
+
+2. `ruet` (useEffect hook)
+
+   ```tsx
+   useEffect(() => {}, []);
+   ```
+
+3. `rust` (useState hook)
+
+   ```tsx
+   const [state, setState] = useState(initialValue);
+   ```
+
+4. `ruct` (useContext hook)
+
+   ```tsx
+   const value = useContext(myContext);
+   ```
+
+5. `rurt` (useRef hook)
+
+   ```tsx
+   const refContainer = useRef(initialValue);
+   ```

packages/atom/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "react-nextjs-snippets",
+  "version": "0.0.1",
+  "description": "This is an extension for React and Next.js Snippets with Typescript support as well!",
+  "keywords": [
+    "code-snippets",
+    "react-code-snippets"
+  ],
+  "repository": "https://github.com/avneesh0612/react-nextjs-snippets",
+  "license": "GNU",
+  "engines": {
+    "atom": ">=1.0.0 <2.0.0"
+  }
+}

packages/atom/snippets/react-javascript.cson

@@ -0,0 +1,52 @@
+".source.js, .source.jsx":
+  'JavaScript: Import React':
+    'prefix': 'rimr'
+    'body': """
+      import React from 'react';
+    """
+  'JavaScript: Import ReactDOM':
+    'prefix': 'rimrd'
+    'body': """
+      import ReactDOM from 'react-dom';
+    """
+  'JavaScript: Import React and useState':
+    'prefix': 'rimrs'
+    'body': """
+      import React, { useState } from 'react';
+    """
+  'JavaScript: Import React, useState and useEffect':
+    'prefix': 'rimrse'
+    'body': """
+      import React, { useState, useEffect} from 'react';
+    """
+  'JavaScript: React functional component':
+    'prefix': 'rfc'
+    'body': """
+      const ${1:Component} = () => {
+        return <div></div>
+      }
+      
+      export default ${1:Component}
+    """
+  'JavaScript: useEffect hook':
+    'prefix': 'rue'
+    'body': """
+      useEffect(() => {
+        $1
+      }, []);
+    """
+  'JavaScript: useState hook':
+    'prefix': 'rus'
+    'body': """
+      const [${1:state}, set${1:State}] = useState(${2:initialValue});
+    """
+  'JavaScript: useContext hook':
+    'prefix': 'ruc'
+    'body': """
+      const ${1:value} = useContext(${2:myContext});
+    """
+  'JavaScript: useRef hook':
+    'prefix': 'rur'
+    'body': """
+      const ${1:refContainer} = useRef(${2:intialValue});
+    """

packages/atom/snippets/react-typescript.cson

@@ -0,0 +1,36 @@
+".source.ts, .source.tsx":
+  'TypeScript: React functional component':
+    'prefix': 'rfcet'
+    'body': """
+        import React from "react";
+        
+        interface Props {}
+        
+        function ${1:Component}({}: Props) {
+        return <div></div>;
+        }
+        
+        export default ${1:Component};
+    """
+  'TypeScript: useEffect hook':
+    'prefix': 'ruet'
+    'body': """
+        useEffect(() => {
+        \t${1}
+        }, []);
+    """
+  'TypeScript: useState hook':
+    'prefix': 'rust'
+    'body': """
+      const [${1:state}, set${1:State}] = useState(${2:initialValue});
+    """
+  'TypeScript: useContext hook':
+    'prefix': 'ruct'
+    'body': """
+        const ${1:value} = useContext(${2:myContext});
+    """
+  'TypeScript: useRef hook':
+    'prefix': 'rurt'
+    'body': """
+        const ${1:refContainer} = useRef(${2:initialValue});
+    """

packages/vscode/README.md

@@ -87,27 +87,27 @@
 
 2. `ruet` (useEffect hook)
 
-    ```tsx
-    useEffect(() => {}, []);
-    ```
+   ```tsx
+   useEffect(() => {}, []);
+   ```
 
 3. `rust` (useState hook)
 
-    ```tsx
-    const [state, setState] = useState(initialValue);
-    ```
+   ```tsx
+   const [state, setState] = useState(initialValue);
+   ```
 
 4. `ruct` (useContext hook)
 
-    ```tsx
-    const value = useContext(myContext);
-    ```
+   ```tsx
+   const value = useContext(myContext);
+   ```
 
 5. `rurt` (useRef hook)
 
-    ```tsx
-    const refContainer = useRef(initialValue);
-    ```
+   ```tsx
+   const refContainer = useRef(initialValue);
+   ```
 
 ## NextJS
 
@@ -258,4 +258,3 @@
 
    export default Document;
    ```
-

packages/vscode/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-nextjs-snippets",
   "displayName": "React and Next.js Snippets",
-  "description": "This is an extension for React and Next.js Snippets with ts support as well!",
+  "description": "This is an extension for React and Next.js Snippets with Typescript support as well!",
   "version": "1.2.4",
   "publisher": "AvneeshAgarwal",
   "icon": "logo.png",