@softlimit/theme-envy 0.1.2-alpha

package/init/functions/copy-example-feature/example-feature/config/_example-feature.js

@@ -0,0 +1,8 @@
+/**
+ * @private
+ * @file adds config for the example feature to the theme config
+ */
+
+module.exports = {
+
+}

package/init/functions/copy-example-feature/example-feature/index.js

@@ -0,0 +1,5 @@
+/**
+ * @file imports all the scripts for the example feature
+ */
+
+import './scripts/example-feature.js'

package/init/functions/copy-example-feature/example-feature/install.js

@@ -0,0 +1,10 @@
+/**
+ * @file exports an array of objects for hooks and content to be added to the theme
+ */
+
+module.exports = [
+  {
+    hook: 'some-hook-name',
+    content: 'html/liquid - could reference to snippet, section, or partial or include conditional etc'
+  }
+]

package/init/functions/copy-example-feature/example-feature/partials/_example-feature-partial.liquid

@@ -0,0 +1,3 @@
+Partial content gets output directly in the file it is referenced from, so it can use any variables already defined in that file without passing them like snippets.
+
+Additionally, any variables defined in a partial can be used after its reference in the file it's referenced from, unlike the strict, one-way scope of snippets.

package/init/functions/copy-example-feature/example-feature/schema/schema-example-feature-schema-partial.js

@@ -0,0 +1,16 @@
+/**
+ * @private
+ * @file a schema partial that can be re-used in multiple schema files ThemeRequire('schema-example-feature-schema-partial.js')
+ */
+module.exports = [
+  {
+    type: 'Header',
+    content: 'Example Setting'
+  },
+  {
+    type: 'text',
+    id: 'title',
+    label: 'Title',
+    default: 'Title'
+  }
+]

package/init/functions/copy-example-feature/example-feature/schema/schema-example-feature-section.js

@@ -0,0 +1,14 @@
+/**
+ * @private
+ * @file The schema for the example feature, included in example-feature-section.liquid {% schema 'schema-example-feature-section' %}
+ */
+module.exports = {
+  name: 'Example Feature',
+  tag: 'div',
+  settings: [
+    ...ThemeRequire('schema-example-feature-schema-partial.js')
+  ],
+  presets: {
+    name: 'Example Feature'
+  }
+}

package/init/functions/copy-example-feature/example-feature/scripts/example-feature.js

@@ -0,0 +1,3 @@
+/**
+ * @file write your example feature JS here
+ */

package/init/functions/copy-example-feature/example-feature/sections/example-feature-section.liquid

@@ -0,0 +1,11 @@
+<div class="example-feature">
+  {% if section.settings.title != blank %}
+    <div class="w-full py-4 text-2xl text-center title">
+      {{ section.settings.title }}
+    </div>
+  {% endif %}
+  {% partial '_example-feature-partial' %}
+  {% snippet 'example-feature-snippet' %}
+</div>
+
+{% schema 'schema-example-feature-section.js' %}

package/init/functions/copy-example-feature/example-feature/snippets/example-feature-snippet.liquid

@@ -0,0 +1 @@
+Example snippet content.

package/init/functions/copy-example-feature/index.js

@@ -0,0 +1,25 @@
+/**
+ * @private
+ * @file Copy the example feature to the destination, used during init command
+ * @param {object} options - options object
+ * @param {string} options.dest - destination directory
+ */
+const path = require('path')
+const fs = require('fs-extra')
+const chalk = require('chalk')
+const logSymbols = require('#LogSymbols')
+
+module.exports = function({ dest }) {
+  // define and create the destination example-feature
+  const target = path.resolve(dest, './theme-envy/features/example-feature')
+  fs.ensureDirSync(target)
+
+  // define the src example-feature path
+  const exampleSrc = path.resolve(__dirname, './example-feature')
+
+  // now copy the files
+  fs.copy(exampleSrc, target, err => {
+    if (err) return console.error(err)
+    console.log(logSymbols.success, chalk.green.bold('Example Feature'), 'copied')
+  })
+}

package/init/functions/copy-starter-config-files/configs/postcss.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss/nesting'),
+    require('tailwindcss'),
+    require('autoprefixer'),
+    require('cssnano')
+  ]
+}

package/init/functions/copy-starter-config-files/configs/tailwind.config.js

@@ -0,0 +1,16 @@
+/**
+ * @private
+ * @type {import('tailwindcss').Config}
+ */
+const theme = require('./theme.config.js')
+const path = require('path')
+const ThemeEnvy = require('./theme.config.js')
+
+module.exports = {
+  content: [path.resolve(ThemeEnvy.themePath, '**/*.{liquid,js}')],
+  theme: {
+    extend: {},
+  },
+  screens: theme.breakpoints,
+  plugins: [],
+}

package/init/functions/copy-starter-config-files/configs/theme.config.js

@@ -0,0 +1,25 @@
+module.exports = {
+  entry: {
+    // main: './src/scripts/main.js',
+  },
+  store: 'my-store.myshopify.com',
+  themePath: 'src',
+  outputPath: 'dist',
+  // tailwind: false,
+  breakpoints: {
+    sm: '640px',
+    // => @media (min-width: 640px) { ... }
+
+    md: '768px',
+    // => @media (min-width: 768px) { ... }
+
+    lg: '1024px',
+    // => @media (min-width: 1024px) { ... }
+
+    xl: '1280px',
+    // => @media (min-width: 1280px) { ... }
+
+    '2xl': '1536px'
+  // => @media (min-width: 1536px) { ... }
+  }
+}

package/init/functions/copy-starter-config-files/index.js

@@ -0,0 +1,28 @@
+/**
+ * @file Copies starter config files to target directory during init command
+ */
+
+const path = require('path')
+const fs = require('fs-extra')
+const logSymbols = require('#LogSymbols')
+
+module.exports = function({ target, opts }) {
+  // copy config files
+  const configSrc = path.resolve(__dirname, './configs')
+  fs.copy(configSrc, target, err => {
+    if (err) return console.error(err)
+    console.log(`${logSymbols.success} Config files copied`
+    )
+    if (opts.store) {
+      const themeConfig = fs.readFileSync(path.resolve(target, 'theme.config.js'), 'utf8')
+      fs.writeFileSync(path.resolve(target, 'theme.config.js'), themeConfig.replace(/store: '.*'/, `store: '${opts.store}'`))
+    }
+  })
+
+  // copy util starter files
+  const utilsSrc = path.resolve(__dirname, './utils')
+  fs.copy(utilsSrc, path.resolve(target, 'utils'), err => {
+    if (err) return console.error(err)
+    console.log(`${logSymbols.success} Utils starter files copied`)
+  })
+}

package/init/functions/copy-starter-config-files/utils/starter-config.js

@@ -0,0 +1,17 @@
+/**
+ * @file Used as a template for a new config file for a new feature or element
+ * @param {string} readableName - The name of the feature or element
+ */
+
+module.exports = (readableName) => {
+  return `module.exports = [
+    {
+      name: '${readableName}',
+      settings: [
+  
+      ]
+    }
+  ]
+  
+`
+}

package/init/functions/copy-starter-config-files/utils/starter-element.js

@@ -0,0 +1,16 @@
+/**
+ * @file Used as a template for a new script file for a new element
+ * @param {string} elementName - The name of the element
+ * @param {string} elementClass - The class name of the element
+ */
+
+module.exports = (elementName, elementClass) => {
+  return `class ${elementClass} extends HTMLElement {
+  constructor() {
+    super()
+    console.log(this)
+  }
+}
+customElements.define('${elementName}', ${elementClass})
+`
+}

package/init/functions/copy-starter-config-files/utils/starter-install.js

@@ -0,0 +1,14 @@
+/**
+ * @file Used as a template for a new install.js file for a new feature or element
+ * @param {string} elementName - The name of the feature or element
+ */
+
+module.exports = (elementName) => {
+  return `module.exports = [
+  {
+    hook: 'body-end',
+    content: "{% render '${elementName}' %}"
+  }
+]
+`
+}

package/init/functions/copy-starter-config-files/utils/starter-schema.js

@@ -0,0 +1,32 @@
+/**
+ * @file Used as a template for a new schema file for a new feature section
+ * @param {string} elementName - The name of the feature or element
+ * @param {string} readableName - The readable name of the feature or element
+ */
+
+module.exports = (elementName, readableName) => {
+  return `module.exports = {
+  name: '${readableName}',
+  tag: 'section',
+  class: '${elementName}',
+  settings: [
+    ...ThemeRequire('schema-colors'),
+    ...ThemeRequire('schema-full-width'),
+    {
+      type: 'header',
+      content: 'Section Vertical Spacing'
+    },
+    ...ThemeRequire('schema-spacing-y'),
+    ...ThemeRequire('schema-lazy'),
+    ...ThemeRequire('schema-custom-classes'),
+  ],
+  presets: [
+    {
+      name: '${readableName}',
+      category: 'General',
+      settings: {},
+    },
+  ],
+}
+`
+}

package/init/functions/copy-starter-config-files/utils/starter-section.js

@@ -0,0 +1,16 @@
+/**
+ * @file Used as a template for a new section file for a new feature or element
+ * @param {string} extName - The name of the feature or element
+ * @param {string} tag - The tag name of the feature or element, e.g. 'section', 'div', or 'custom-element'
+ */
+
+module.exports = (tag, extName) => {
+  return `<!-- softlimit { "action": "partial", "file": "section-spacing-y" } -->
+<${tag} class="{{ sectionSpacingY }} {{ section.settings.custom_classes }}"{{ sectionColorStyle }}>
+  <div class="{% unless section.settings.full_width %}page-width {% endunless %}">
+    
+  </div>
+</${tag}>
+{% schema 'schema-${extName}.js' %}
+`
+}

package/init/functions/create-empty-settings-data.js

@@ -0,0 +1,19 @@
+/**
+ * @file Creates an empty settings_data.json file if it doesn't exist during init command
+ */
+
+const path = require('path')
+const fs = require('fs-extra')
+const chalk = require('chalk')
+const logSymbols = require('#LogSymbols')
+
+module.exports = function({ dest }) {
+  // create settings_data.json
+  const settingsData = path.join(dest, 'config/settings_data.json')
+  if (!fs.existsSync(settingsData)) {
+    fs.writeFile(settingsData, '{}', 'utf8', (err) => {
+      if (err) throw err
+      console.log(`${logSymbols.success} ${chalk.green.bold('settings_data.json')} created`)
+    })
+  }
+}

package/init/functions/create-settings-schema.js

@@ -0,0 +1,29 @@
+/**
+ * @file Creates basic settings_schema.js file during init command
+ */
+
+const path = require('path')
+const fs = require('fs-extra')
+const chalk = require('chalk')
+const logSymbols = require('#LogSymbols')
+
+module.exports = function({ dest }) {
+  // create settings_schema.js
+  const settingsSchema = path.join(dest, 'config/settings_schema.js')
+  const settingsSchemaMarkup = `module.exports = [
+  {
+    name: 'theme_info',
+    theme_name: 'Theme Envy',
+    theme_version: '1.0.0',
+    theme_author: 'Softlimit',
+    theme_documentation_url: 'http://www.softlimit.com',
+    theme_support_url: 'http://www.softlimit.com'
+  }
+]
+`
+
+  fs.writeFile(settingsSchema, settingsSchemaMarkup, 'utf8', (err) => {
+    if (err) throw err
+    console.log(`${logSymbols.success} ${chalk.green.bold('settings_schema.js')} created`)
+  })
+}

package/init/functions/if-shopify-theme-exists.js

@@ -0,0 +1,26 @@
+/**
+ * @file check if a Shopify theme exists in the target directory and move it to the destination
+ * @description Used during the init process to move an existing Shopify theme to the new source folder
+ * @param {object} options - options object
+ * @param {string} options.target - target directory
+ * @param {string} options.dest - destination directory
+ */
+
+const path = require('path')
+const fs = require('fs-extra')
+const { directories } = require('#EnsureDirectories')
+const chalk = require('chalk')
+const logSymbols = require('#LogSymbols')
+
+module.exports = function({ target, dest }) {
+  // if we have a valid Shopify theme structure in the target directory move those files to the dest
+  const rootDirs = fs.readdirSync(target).filter(res => !res.includes('.'))
+  const shopifyThemeExistsInRoot = directories.every(dir => rootDirs.includes(dir))
+  if (shopifyThemeExistsInRoot) {
+    console.log(logSymbols.info, chalk.cyan('Existing theme present, moving to new source folder'))
+    directories.forEach(dir => {
+      fs.moveSync(path.join(target, dir), path.join(dest, dir))
+    })
+    console.log(logSymbols.success, 'Existing theme moved')
+  }
+}

package/init/functions/import-from-git.js

@@ -0,0 +1,21 @@
+/**
+ * @file Helper function to import a git repo into the src directory
+ * @param {object} options - options object
+ * @param {string} options.source - git repo url
+ * @param {string} options.dest - destination directory
+ * @returns {string} - destination directory
+ */
+
+const fs = require('fs-extra')
+const path = require('path')
+const git = require('simple-git')(process.cwd())
+
+module.exports = async function({ source, dest }) {
+  await git.clone(source, dest)
+  // remove .git directory
+  const remove = ['.git', '.github', '.gitignore', '.vscode']
+  remove.forEach(dir => {
+    if (fs.existsSync(path.resolve(process.cwd(), dest, dir))) fs.removeSync(path.resolve(process.cwd(), dest, dir))
+  })
+  return dest
+}

package/init/functions/index.js

@@ -0,0 +1,10 @@
+module.exports = {
+  addThemeEnvyFeatures: require('./add-theme-envy-features'),
+  copyExampleFeature: require('./copy-example-feature'),
+  copyStarterConfigFiles: require('./copy-starter-config-files'),
+  createEmptySettingsData: require('./create-empty-settings-data'),
+  createSettingsSchema: require('./create-settings-schema'),
+  ifShopifyThemeExists: require('./if-shopify-theme-exists'),
+  importFromGit: require('./import-from-git'),
+  validateSourceTheme: require('./validate-source-theme'),
+}

package/init/functions/validate-source-theme.js

@@ -0,0 +1,28 @@
+/**
+ * @file Validates source theme directory structure
+ * @description Used during the init process to validate the source theme directory structure
+ * @param {object} options - options object
+ * @param {string} options.sourceTheme - source theme directory
+ */
+
+const fs = require('fs-extra')
+const path = require('path')
+const { directories } = require('#EnsureDirectories')
+const chalk = require('chalk')
+const logSymbols = require('#LogSymbols')
+
+module.exports = function({ sourceTheme }) {
+// verify source theme exists
+  if (!fs.existsSync(sourceTheme)) {
+    console.error(`${logSymbols.error} ${chalk.red.bold('Error:')} Source theme directory not found: ${sourceTheme}`)
+    process.exit(1)
+  }
+
+  // validate directory structure of source theme
+  directories.forEach(dir => {
+    if (!fs.existsSync(path.resolve(sourceTheme, dir))) {
+      console.error(`${logSymbols.error} ${chalk.red.bold('Error:')} Source theme required directory not found: ${path.resolve(sourceTheme, dir)}`)
+      process.exit(1)
+    }
+  })
+}

package/init/index.js

@@ -0,0 +1,87 @@
+/*
+  @file init/index.js
+  @param [optional]: --example --e: outputs example feature structure and dummy files with readme documentation in each subdirectory
+  @description creates skeleton structure for src folder
+    - Shopify directories
+    - Adds theme-envy directories
+    - config files
+  @example npx theme-envy init [source|git] [options]
+*/
+const path = require('path')
+const fs = require('fs-extra')
+const chalk = require('chalk')
+const logSymbols = require('#LogSymbols')
+const { directories, ensureDirectories } = require('#EnsureDirectories')
+const { setSettingsSchemaJs } = require('#Convert/functions')
+const themeEnvyConvert = require('#Convert')
+const {
+  ifShopifyThemeExists,
+  copyStarterConfigFiles,
+  addThemeEnvyFeatures,
+  createSettingsSchema,
+  createEmptySettingsData,
+  copyExampleFeature,
+  importFromGit,
+  validateSourceTheme
+} = require('#Init/functions')
+
+module.exports = async function(source, opts = {}) {
+  const target = path.resolve(process.cwd())
+
+  const dest = path.join(target, 'src')
+  fs.ensureDirSync(dest)
+  console.log(logSymbols.success, 'Destination directory created:', `\n${chalk.dim(dest)}\n`)
+
+  if (source) {
+    // we have a source directory, so we're importing a theme from a folder that is not the root
+    if (source.includes('.git')) {
+      console.log(
+        logSymbols.info,
+        chalk.cyan('Importing source from repo...')
+      )
+      source = await importFromGit({ source, dest })
+      console.log(`${logSymbols.success} ${chalk.green('Git repo cloned as source')}`)
+    }
+    const sourceTheme = path.resolve(process.cwd(), source)
+    const destTheme = path.resolve(process.cwd(), dest)
+    validateSourceTheme({ sourceTheme })
+    // Copy files from source to destination
+    if (sourceTheme !== destTheme) {
+      directories.forEach(dir => {
+        fs.copySync(path.resolve(sourceTheme, dir), path.resolve(destTheme, dir))
+      })
+      console.log(`${logSymbols.success} Source copied to destination folder`)
+    }
+  } else {
+    // if no source directory is provided, check if there is a Shopify theme in the current directory and move it to /src
+    ifShopifyThemeExists({ target, dest })
+  }
+
+  // setup our Theme Envy directories
+  ensureDirectories({ root: dest, envy: true })
+
+  console.log(`${logSymbols.success} Directory structure set up`)
+
+  copyStarterConfigFiles({ target, opts })
+
+  addThemeEnvyFeatures({ dest })
+
+  // if settings_schema.json exists, convert it to settings_schema.js, else create empty settings_schema.js
+  if (fs.existsSync(path.join(dest, 'config/settings_schema.json'))) {
+    setSettingsSchemaJs({ sourceTheme: dest })
+  } else {
+    createSettingsSchema({ dest })
+  }
+
+  // only runs if settings_data.json does not exist
+  createEmptySettingsData({ dest })
+
+  // if --example or --e flag is present, copy example-feature folder into theme-envy/features
+  if (opts.example) {
+    copyExampleFeature({ dest })
+  }
+
+  if (opts.convert) {
+    await themeEnvyConvert(dest, { addThemeEnvy: false })
+  }
+}

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@softlimit/theme-envy",
+  "version": "0.1.2-alpha",
+  "description": "Softlimit Shopify Theme Development Environment",
+  "bin": {
+    "theme-envy": "./index.js"
+  },
+  "imports": {
+    "#Build": "./build/index.js",
+    "#Build/*": "./build/*",
+    "#Build/functions": "./build/functions/index.js",
+    "#Build/functions/*": "./build/functions/*",
+    "#Convert": "./convert/index.js",
+    "#Convert/*": "./convert/*",
+    "#Convert/functions": "./convert/functions/index.js",
+    "#Convert/functions/*": "./convert/functions/*",
+    "#Dev": "./dev/index.js",
+    "#Dev/*": "./dev/*",
+    "#Dev/functions": "./dev/functions/index.js",
+    "#Dev/functions/*": "./dev/functions/*",
+    "#EnsureDirectories": "./helpers/functions/ensure-directories.js",
+    "#Helpers": "./helpers/index.js",
+    "#Helpers/*": "./helpers/*",
+    "#Helpers/functions": "./helpers/functions/index.js",
+    "#Helpers/functions/*": "./helpers/functions/*",
+    "#Init": "./init/index.js",
+    "#Init/*": "./init/*",
+    "#Init/functions": "./init/functions/index.js",
+    "#Init/functions/*": "./init/functions/*",
+    "#LogSymbols": "./helpers/functions/log-symbols.js",
+    "#ParentTheme": "./parent-theme/index.js",
+    "#Root/*": "./*"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/softlimit/theme-envy"
+  },
+  "engines": {
+    "npm": "8.x"
+  },
+  "standard-version": {
+    "scripts": {
+      "posttag": "git push && git push --tags"
+    }
+  },
+  "scripts": {
+    "version": "standard-version",
+    "jsdoc": "./node_modules/.bin/jsdoc ./{build,convert,helpers,init}/**/*.js"
+  },
+  "author": "Softlimit LLC",
+  "license": "MIT",
+  "dependencies": {
+    "@shopify/prettier-plugin-liquid": "^1.0.6",
+    "ansi-colors": "^4.1.3",
+    "autoprefixer": "^10.4.13",
+    "chalk": "^4.1.2",
+    "chokidar": "^3.5.3",
+    "cli-progress": "^3.12.0",
+    "commander": "^10.0.0",
+    "css-loader": "^6.7.3",
+    "cssnano": "^5.1.15",
+    "esbuild-loader": "^3.0.1",
+    "fs-extra": "^11.1.0",
+    "glob": "^8.1.0",
+    "mini-css-extract-plugin": "^2.7.2",
+    "node-emoji": "^1.11.0",
+    "path": "^0.12.7",
+    "postcss-import": "^15.1.0",
+    "postcss-loader": "^7.0.2",
+    "prettier": "^2.8.4",
+    "promptly": "^3.2.0",
+    "simple-git": "^3.17.0",
+    "stmux": "^1.8.5",
+    "tailwindcss": "^3.2.7",
+    "terser-webpack-plugin": "^5.3.6",
+    "webpack": "^5.77.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-remove-empty-scripts": "^1.0.1"
+  },
+  "devDependencies": {
+    "eslint": "^8.34.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-n": "^15.6.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "jsdoc": "^4.0.2"
+  }
+}