ISSUE 29 Add type script support

CREATE-PLAY.md

@@ -13,6 +13,8 @@ Welcome developers! We are as excited as you are to know that you are going to c
     npm run create-play
   ```
 - This will ask a few questions about your `Play` and then perform required steps to create the play. The screen shot below shows the output of the command.
+   > **Script Language**: `react-play` is equiped with both `JavaScript` and `TypeScript`. So you can use either of it as base language for your play
+
   <p align="center">
     <img src="./screens/plop-create.png" alt="plop create" />
   </p>
@@ -41,6 +43,11 @@ Welcome developers! We are as excited as you are to know that you are going to c
             <td>No</td>
             <td>It is a description of the play for users to understand it better. The maximum number of allowed characters is 1024.</td>
           </tr>
+          <tr>
+            <td>Language to be used (javascript/typescript)</td>
+            <td>Yes</td>
+            <td>Let the application know your choice of script. It supports both <b>JavaScript</b> and <b>TypeScript</b>. You can pick either of it.</td>
+          </tr>
           <tr>
             <td>What is the level of this play?</td>
             <td>Yes</td>

README.md

@@ -83,6 +83,7 @@ Or
 ```bash
 yarn install
 ```
+
 ### 🦄 Start the Development Mode
 Use the following command to start the app in the development mode:
 

package.json

@@ -3,6 +3,8 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
+    "@types/react": "^18.0.6",
+    "@types/react-dom": "^18.0.2",
     "@giscus/react": "^2.0.3",
     "plop": "^3.0.5",
     "react": "^18.0.0",
@@ -48,6 +50,7 @@
     ]
   },
   "devDependencies": {
+    "typescript": "^4.6.4",
     "react-snap": "^1.23.0"
   }
 }

plop-templates/component_ts.hbs

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { getPlayById } from 'meta/play-meta-util';
+
+import PlayHeader from 'common/playlists/PlayHeader';
+
+function {{pascalCase name}}(props:any) {
+  // Do not remove the below lines. 
+  // The following code is to fetch the current play from the URL
+  const { id } = props;
+  const play = getPlayById(id);
+
+  // Your Code Start below.
+
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={play} />
+        <div className="play-details-body">
+        {/* Your Code Starts Here */}
+          <div>
+            <h1>Play Details -  {{titleCase name}}</h1>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Pellentesque euismod, urna eu tincidunt consectetur,
+              nisi nunc ultricies nisi, eget consectetur nunc nisi
+              euismod nunc.
+            </p>
+          </div>
+        {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default {{pascalCase name}};

plop-templates/play.hbs

@@ -9,5 +9,6 @@
     github: '{{github}}',
     cover: '{{cover}}',
     blog: '{{blog}}',
-    video: '{{video}}'
+    video: '{{video}}',
+    language: '{{language}}'
   }, //replace new play item here

plopfile.js

@@ -10,6 +10,9 @@ module.exports = plop => {
 
   plop.setHelper('generateFolderName', str => `${str.trim().replaceAll(/\s/g,'-').toLowerCase()}`);
 
+  const insertIf = (condition, ...elements) => (condition ? elements : []);
+
+
   // demo generator
   plop.setGenerator('play', {
     description: 'Steps to add a new play',
@@ -24,6 +27,12 @@ module.exports = plop => {
         name: 'description',
         message: 'Tell us more about the play(Max 1024 characters):',
       },
+      {
+        type: 'list',
+        name: 'language',
+        message: 'Language to be used (javascript/typescript):',
+        choices: ['js', 'ts']
+      },
       {
         type: 'list',
         name: 'level',
@@ -59,8 +68,8 @@ module.exports = plop => {
     actions: [
       {
         type: 'add',
-        path: 'src/plays/{{generateFolderName name}}/{{pascalCase name}}.jsx',
-        templateFile: 'plop-templates/component.hbs',
+        path: 'src/plays/{{generateFolderName name}}/{{pascalCase name}}.{{language}}x',
+        templateFile: 'plop-templates/component_{{language}}.hbs',
       },
       {
         type: 'add',

src/common/playlists/PlayThumbnail.jsx

@@ -66,6 +66,7 @@ const PlayThumbnail = ({ play }) => {
         <div className="play-header">
           <div className="play-title">{play.name}</div>
           { play.github && <Author github={play.github} /> }
+          <div className={`language language-${play.language || 'js'}`}></div>
         </div>
         <div className="play-status">
           <BsPlayCircleFill size="48px" />

src/common/playlists/playlist.css

@@ -55,6 +55,24 @@
     color: var(--color-neutral-80);
 }
 
+.list-plays a .play-header .language {
+    position: absolute;
+    height: 1rem;
+    width: 1rem;
+    bottom: 0;
+    right:0;
+    padding: .8rem;
+    background-repeat: no-repeat;
+    opacity: 0.2;
+}
+
+.list-plays a .play-header .language-ts {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' data-name='Layer 1' viewBox='6 6 36 36'%3E%3Cpath d='M6,6V42H42V6ZM26.9,25H22.21V38.76h-3V25H14.57V22.46H26.9ZM32.29,39a9.42,9.42,0,0,1-4.41-1l.66-2.46a8.29,8.29,0,0,0,3.94,1c1.9,0,3-.89,3-2.22s-.82-2-2.89-2.71c-2.69-.95-4.41-2.39-4.41-4.73,0-2.67,2.23-4.68,5.77-4.68a8.66,8.66,0,0,1,3.91.81l-.71,2.4a7,7,0,0,0-3.26-.78c-1.89,0-2.69,1-2.69,2,0,1.25.94,1.84,3.11,2.67,2.84,1.08,4.2,2.5,4.2,4.84C38.47,36.74,36.49,39,32.29,39Z'/%3E%3C/svg%3E");
+}
+.list-plays a .play-header .language-js {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M379.328 7337.432c-1.745 0-2.873-.832-3.423-1.92l1.53-.886c.403.658.926 1.141 1.853 1.141.778 0 1.275-.389 1.275-.926 0-.808-1.078-1.124-1.839-1.45-1.356-.577-2.256-1.302-2.256-2.833 0-1.409 1.074-2.483 2.753-2.483 1.194 0 2.054.416 2.671 1.503l-1.463.94c-.322-.577-.671-.805-1.208-.805-.551 0-.9.349-.9.805 0 .564.349.792 1.155 1.141 1.689.724 2.967 1.293 2.967 3.155 0 1.692-1.329 2.618-3.115 2.618zm-4.328-2.833c0 1.947-1.199 2.976-2.864 2.976-1.504 0-2.405-.575-2.848-1.575h-.026l1.529-1.069c.295.523.561.894 1.205.894.618 0 1.004-.313 1.004-1.252V7328h2v6.599zM364 7339h20v-20h-20v20z' transform='translate(-364 -7319)'/%3E%3C/svg%3E");
+}
+
 .list-plays a .play-title {
     position: relative;
     margin-bottom: 0.3rem;

tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "jsx": "react",
+        "baseUrl": "src",
+        "outDir": "./dist/",
+        "noImplicitAny": true,
+        "module": "es6",
+        "target": "es5",
+        "allowJs": true,
+        "moduleResolution": "node",
+    },
+    "include": ["src/**/*"]
+}