added typescript support

README.md

@@ -83,6 +83,14 @@ Or
 ```bash
 yarn install
 ```
+
+### Setup dependencies
+```bash
+npm install -g typescript
+npm install -g gulp
+npm link typescript
+```
+
 ### 🦄 Start the Development Mode
 Use the following command to start the app in the development mode:
 

gulpfile.js

@@ -0,0 +1,4 @@
+var gulp = require('gulp');
+gulp.task('default', function () { 
+ console.log('Hello Gulp!') 
+});

package.json

@@ -6,6 +6,8 @@
  "@testing-library/jest-dom": "^5.14.1",
  "@testing-library/react": "^12.0.0",
  "@testing-library/user-event": "^13.2.1",
+ "@types/react": "^18.0.6",
+ "@types/react-dom": "^18.0.2",
  "plop": "^3.0.5",
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
@@ -15,6 +17,7 @@
  "react-router-dom": "6",
  "react-scripts": "5.0.0",
  "react-shimmer-effect": "^1.0.9",
+ "typescript": "^4.6.3",
  "web-vitals": "^2.1.0"
  },
  "scripts": {
@@ -23,7 +26,8 @@
  "postbuild": "react-snap",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
- "create-play": "plop"
+ "create-play": "plop",
+ "postinstall": "./node_modules/.bin/gulp build"
  },
  "eslintConfig": {
  "extends": [
@@ -50,6 +54,7 @@
  ]
  },
  "devDependencies": {
+ "gulp": "^4.0.2",
  "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

@@ -10,4 +10,5 @@
  cover: '{{cover}}',
  blog: '{{blog}}',
  video: '{{video}}'
+ video: '{{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='https://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='https://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;

src/meta/play-meta.js

@@ -8,6 +8,7 @@ import {
 States,
 SocialCard,
 RandomMemeGenerator,
+TypeScriptSample,
 //import play here
 } from "plays";
 
@@ -113,6 +114,19 @@ export const plays = [
  cover: '',
  blog: '',
  video: ''
+ }, {
+ id: 'pl-typescript-sample', 
+ name: 'TypeScript Sample', 
+ description: 'TypeScript Sample',
+ component: () => {return <TypeScriptSample />},
+ path: '/plays/typescript-sample',
+ level: 'Beginner',
+ tags: 'TSX',
+ github: 'koustov',
+ cover: '',
+ blog: '',
+ video: '',
+ language: 'ts'
  }, //replace new play item here
 ];
 

src/plays/index.js

@@ -9,4 +9,5 @@ export { default as CounterApp } from 'plays/counter/CounterApp';
 export { default as States } from 'plays/states/States';
 export { default as SocialCard } from 'plays/social-card/SocialCard';
 export { default as RandomMemeGenerator } from 'plays/random-meme-generator/RandomMemeGenerator';
+export { default as TypeScriptSample } from 'plays/typescript-sample/TypeScriptSample';
 //add export here

src/plays/typescript-sample/Readme.md

@@ -0,0 +1 @@
+# TypeScript Sample

src/plays/typescript-sample/TypeScriptSample.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { getPlayById } from 'meta/play-meta-util';
+
+import PlayHeader from 'common/playlists/PlayHeader';
+
+function TypeScriptSample(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 - TypeScript Sample</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 TypeScriptSample;

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/**/*"]
+}