add cli to main project

we moved the cli code to hypestyle folder project
hypll · Jan 8, 2022 · 06a60bb · 06a60bb
1 parent e65d4b5
commit 06a60bb
Show file tree

Hide file tree

Showing 16 changed files with 303 additions and 0 deletions.
diff --git a/.npmignore b/.npmignore
@@ -2,8 +2,12 @@ docs
 examples
 node_modules
 src
+cli
 composer.json
 composer.lock
 SECURITY.md
 todoList.md
 gulpfile.js
+composer.json
+tasks.md
+todoList.md
diff --git a/cli/.editorconfig b/cli/.editorconfig
@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false
diff --git a/cli/.eslintrc.js b/cli/.eslintrc.js
@@ -0,0 +1,13 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": 13,
+        "sourceType": "module"
+    },
+    "rules": {
+    }
+};
diff --git a/cli/.gitignore b/cli/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+package-lock.json
diff --git a/cli/.npmignore b/cli/.npmignore
@@ -0,0 +1,2 @@
+.eslint.js
+.editorconfig
diff --git a/cli/README.md b/cli/README.md
@@ -0,0 +1,7 @@
+# Hypestyle CLI
+
+This is a **CLI** to generate a **Hypestyle** project.
+
+To get started, run `npx hypestyle-cli@latest` to create a new project.
+
+You can read the documentation for the CLI at [https://hypestyle.netlify.app/#/guide/cli/installation](https://hypestyle.netlify.app/#/guide/cli/installation).
diff --git a/cli/my-app/index.html b/cli/my-app/index.html
@@ -0,0 +1,28 @@
+<!--
+  This website was created with Hypestyle-cli
+  You find all the docs for Hypestyle 
+  in the following link: https://hypestyle.netlify.app
+  Copyright (c) 2021, Hypestyle
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+        <!-- HypeStyle CSS -->
+        <link
+            rel="stylesheet"
+            href="https://unpkg.com/hypestyle@0.1.4/dist/css/hypestyle.min.css"
+        />
+
+        <title>Yeah i using HypeStyle CSS!</title>
+        <link rel="stylesheet" href="main.css" />
+    </head>
+    <body>
+        <h1>This was created by HypeStyle CLI</h1>
+
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/cli/my-app/main.css b/cli/my-app/main.css
@@ -0,0 +1,22 @@
+/*
+  *
+  *
+  *
+
+  This website was created with Hypestyle-cli
+  You find all the docs for Hypestyle 
+  in the following link: https://hypestyle.netlify.app
+  Copyright (c) 2021, Hypestyle
+
+  *
+  *
+  *
+  
+*/
+
+/*
+
+    You can start use your own css code if you want to make some changes
+    of components or add some new components.
+
+*/
diff --git a/cli/my-app/package.json b/cli/my-app/package.json
@@ -0,0 +1,8 @@
+{
+    "name": "hypestyle-simple",
+    "version": "1.0.0",
+    "description": "This was made by @hypestyle-cli",
+    "scripts": {
+        "dev": "npx live-server --port=8080"
+    }
+}
diff --git a/cli/my-app/script.js b/cli/my-app/script.js
@@ -0,0 +1,8 @@
+/*
+  This website was created with Hypestyle-cli
+  You find all the docs for Hypestyle 
+  in the following link: https://hypestyle.netlify.app
+  Copyright (c) 2021, Hypestyle
+*/
+
+console.log('Hypestyle is so cool!')
diff --git a/cli/package.json b/cli/package.json
@@ -0,0 +1,44 @@
+{
+    "name": "hypestyle-cli",
+    "version": "3.0.0",
+    "description": "This is a cli tool to create a hyperstyle project",
+    "main": "src/index.js",
+    "bin": {
+        "create-hypestyle-app": "src/index.js"
+    },
+    "scripts": {
+        "start": "node src/index.js"
+    },
+    "keywords": [
+        "cli",
+        "hypestyle",
+        "hypestyle-cli"
+    ],
+    "author": "",
+    "license": "ISC",
+    "dependencies": {
+        "@types/chalk-animation": "^1.6.1",
+        "@types/inquirer": "^8.1.3",
+        "chalk": "4.1.2",
+        "chalk-animation": "^1.6.0",
+        "fs-extra": "^10.0.0",
+        "inquirer": "^8.2.0",
+        "meow": "^10.1.2",
+        "rcnlx": "^1.2.1",
+        "semver": "^7.3.5"
+    },
+    "devDependencies": {
+        "eslint": "^8.4.1"
+    },
+    "directories": {
+        "test": "tests"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/hypestyle/cli.git"
+    },
+    "bugs": {
+        "url": "https://github.com/hypestyle/cli/issues"
+    },
+    "homepage": "https://github.com/hypestyle/cli#readme"
+}
diff --git a/cli/src/index.js b/cli/src/index.js
@@ -0,0 +1,87 @@
+#!/usr/bin/env node
+const inquirer = require('inquirer')
+const fs = require('fs')
+const chalkAnimation = require('chalk-animation')
+const fse = require('fs-extra')
+const chalk = require('chalk')
+
+const CHOICES = fs.readdirSync(`${__dirname}/templates`)
+
+console.log()
+console.log(
+    `${chalk.greenBright('🌿 Welcome to hypestyle cli!')} ${chalk.redBright(
+        'Lets get you started!'
+    )}`
+)
+console.log()
+
+const QUESTIONS = [
+    {
+        name: 'project-choice',
+        type: 'list',
+        message: 'What project would you like to create?',
+        choices: CHOICES,
+    },
+    {
+        name: 'project-name',
+        type: 'input',
+        message: 'What is the name of your project?',
+        validate: function (input) {
+            if (/^([A-Za-z\-\_\d])+$/.test(input)) return true
+            else
+                return 'Project name may only include letters, numbers, underscores and hashes.'
+        },
+    },
+]
+
+const CURR_DIR = process.cwd()
+
+inquirer.prompt(QUESTIONS).then((answers) => {
+    const projectChoice = answers['project-choice']
+    const projectName = answers['project-name']
+
+    const templatePath = `${__dirname}/templates/${projectChoice}`
+
+    fs.mkdirSync(`${CURR_DIR}/${projectName}`)
+
+    createDirectoryContents(templatePath, projectName)
+
+    console.log()
+    console.log(`Done! Now run:`)
+    console.log()
+    console.log(`cd ${chalk.redBright(projectName)}`)
+    console.log(`npm run ${chalk.blueBright('dev')}`)
+    console.log()
+})
+
+function createDirectoryContents(templatePath, newProjectPath) {
+    const filesToCreate = fs.readdirSync(templatePath)
+
+    filesToCreate.forEach((file) => {
+        const origFilePath = `${templatePath}/${file}`
+
+        // get stats about the current file
+        const stats = fs.statSync(origFilePath)
+
+        if (stats.isFile()) {
+            const contents = fs.readFileSync(origFilePath, 'utf8')
+
+            const writePath = `${CURR_DIR}/${newProjectPath}/${file}`
+            fs.writeFileSync(writePath, contents, 'utf8')
+        }
+    })
+}
+
+const stats = fs.statSync(`${__dirname}/templates`)
+
+if (stats.isFile()) {
+    const contents = fs.readFileSync(origFilePath, 'utf8')
+
+    // Rename
+    if (file === '.npmignore') file = '.gitignore'
+
+    // get folders in all templates
+
+    const writePath = `${CURR_DIR}/${newProjectPath}/${file}/${folder} `
+    fs.writeFileSync(writePath, contents, 'utf8')
+}
diff --git a/cli/src/templates/hypestyle-default/index.html b/cli/src/templates/hypestyle-default/index.html
@@ -0,0 +1,28 @@
+<!--
+  This website was created with Hypestyle-cli
+  You find all the docs for Hypestyle 
+  in the following link: https://hypestyle.netlify.app
+  Copyright (c) 2021, Hypestyle
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+        <!-- HypeStyle CSS -->
+        <link
+            rel="stylesheet"
+            href="https://unpkg.com/hypestyle@0.1.4/dist/css/hypestyle.min.css"
+        />
+
+        <title>Yeah i using HypeStyle CSS!</title>
+        <link rel="stylesheet" href="main.css" />
+    </head>
+    <body>
+        <h1>This was created by HypeStyle CLI</h1>
+
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/cli/src/templates/hypestyle-default/main.css b/cli/src/templates/hypestyle-default/main.css
@@ -0,0 +1,22 @@
+/*
+  *
+  *
+  *
+
+  This website was created with Hypestyle-cli
+  You find all the docs for Hypestyle 
+  in the following link: https://hypestyle.netlify.app
+  Copyright (c) 2021, Hypestyle
+
+  *
+  *
+  *
+  
+*/
+
+/*
+
+    You can start use your own css code if you want to make some changes
+    of components or add some new components.
+
+*/
diff --git a/cli/src/templates/hypestyle-default/package.json b/cli/src/templates/hypestyle-default/package.json
@@ -0,0 +1,8 @@
+{
+    "name": "hypestyle-simple",
+    "version": "1.0.0",
+    "description": "This was made by @hypestyle-cli",
+    "scripts": {
+        "dev": "npx live-server --port=8080"
+    }
+}
diff --git a/cli/src/templates/hypestyle-default/script.js b/cli/src/templates/hypestyle-default/script.js
@@ -0,0 +1,8 @@
+/*
+  This website was created with Hypestyle-cli
+  You find all the docs for Hypestyle 
+  in the following link: https://hypestyle.netlify.app
+  Copyright (c) 2021, Hypestyle
+*/
+
+console.log('Hypestyle is so cool!')