diff --git a/CREATE-PLAY.md b/CREATE-PLAY.md index 06fdb5304e..f4790704a3 100644 --- a/CREATE-PLAY.md +++ b/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 +

plop create

@@ -41,6 +43,11 @@ Welcome developers! We are as excited as you are to know that you are going to c No It is a description of the play for users to understand it better. The maximum number of allowed characters is 1024. + + Language to be used (javascript/typescript) + Yes + Let the application know your choice of script. It supports both JavaScript and TypeScript. You can pick either of it. + What is the level of this play? Yes diff --git a/README.md b/README.md index 633c10b176..85914892b3 100644 --- a/README.md +++ b/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: diff --git a/jsconfig.json b/jsconfig.json deleted file mode 100644 index 3baded8dc7..0000000000 --- a/jsconfig.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "src" - }, - "include": ["src/**/*"] -} \ No newline at end of file diff --git a/package.json b/package.json index 0dbcb4316a..5b56dd344a 100644 --- a/package.json +++ b/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" } } diff --git a/plop-templates/component.hbs b/plop-templates/component_js.hbs similarity index 100% rename from plop-templates/component.hbs rename to plop-templates/component_js.hbs diff --git a/plop-templates/component_ts.hbs b/plop-templates/component_ts.hbs new file mode 100644 index 0000000000..6941972c0e --- /dev/null +++ b/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 ( + <> +
+ +
+ {/* Your Code Starts Here */} +
+

Play Details - {{titleCase name}}

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Pellentesque euismod, urna eu tincidunt consectetur, + nisi nunc ultricies nisi, eget consectetur nunc nisi + euismod nunc. +

+
+ {/* Your Code Ends Here */} +
+
+ + ); +} + +export default {{pascalCase name}}; \ No newline at end of file diff --git a/plop-templates/play.hbs b/plop-templates/play.hbs index 6ebfbb7d58..516d1904bd 100644 --- a/plop-templates/play.hbs +++ b/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 \ No newline at end of file diff --git a/plopfile.js b/plopfile.js index e8b313b60a..ac9b407ed3 100644 --- a/plopfile.js +++ b/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', diff --git a/screens/plop-create.png b/screens/plop-create.png index 8d4558b5ae..cd3cf6307d 100644 Binary files a/screens/plop-create.png and b/screens/plop-create.png differ diff --git a/src/common/playlists/PlayThumbnail.jsx b/src/common/playlists/PlayThumbnail.jsx index 5b7197bdac..948ad7b42e 100644 --- a/src/common/playlists/PlayThumbnail.jsx +++ b/src/common/playlists/PlayThumbnail.jsx @@ -66,6 +66,7 @@ const PlayThumbnail = ({ play }) => {
{play.name}
{ play.github && } +
diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css index 6b8f09ed51..ac9f91477f 100644 --- a/src/common/playlists/playlist.css +++ b/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; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000000..c2e80f9841 --- /dev/null +++ b/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/**/*"] +} \ No newline at end of file