From e6880608c690c34811b040e110c8f0dbe5667c19 Mon Sep 17 00:00:00 2001
From: Ines Montero <ines@minnekdigital.com>
Date: Fri, 8 Sep 2023 13:54:46 -0400
Subject: [PATCH 1/2] ci: modify vite configuration and add sass and ts

---
 .gitignore                           |  1 +
 assets/main.min.js                   |  1 -
 assets/ysw-styles.css                |  1 -
 package.json                         | 14 ++++++--
 src/js/README.md                     | 27 +++++++++++++++
 assets/ysw-main.js => src/js/base.ts |  0
 src/main.ts                          |  0
 src/sass/README.md                   | 34 +++++++++++++++++++
 src/sass/global/_remCalc.scss        |  5 +++
 src/sass/global/_variables.scss      |  2 ++
 src/sass/global/global.scss          |  2 ++
 tsconfig.json                        | 23 +++++++++++++
 vite.config.js                       | 51 +++++++++++++++++++++-------
 13 files changed, 143 insertions(+), 18 deletions(-)
 delete mode 100644 assets/main.min.js
 delete mode 100644 assets/ysw-styles.css
 create mode 100644 src/js/README.md
 rename assets/ysw-main.js => src/js/base.ts (100%)
 create mode 100644 src/main.ts
 create mode 100644 src/sass/README.md
 create mode 100644 src/sass/global/_remCalc.scss
 create mode 100644 src/sass/global/_variables.scss
 create mode 100644 src/sass/global/global.scss
 create mode 100644 tsconfig.json

diff --git a/.gitignore b/.gitignore
index 9155d99..5e0408d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,3 +18,4 @@ yarn.lock
 cypress/videos/
 cypress/screenshots/
 lighthouse-report.html
+assets/ysw-*.min.*
diff --git a/assets/main.min.js b/assets/main.min.js
deleted file mode 100644
index 8b13789..0000000
--- a/assets/main.min.js
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/assets/ysw-styles.css b/assets/ysw-styles.css
deleted file mode 100644
index e480e4d..0000000
--- a/assets/ysw-styles.css
+++ /dev/null
@@ -1 +0,0 @@
-.ysw-example {}
diff --git a/package.json b/package.json
index ec8c379..183ae2c 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,11 @@
   "description": "Shopify Boilerplate Template based on Dawn",
   "scripts": {
     "test": "shopify ",
-    "cy:open": "cypress open"
+    "cy:open": "cypress open",
+    "dev:vite": "nodemon --watch 'src/**/*' -e ts,scss --exec \"npm run build:vite\"",
+    "dev": "npm-run-all --parallel dev:*",
+    "build:vite": "vite build",
+    "build": "npm-run-all --parallel build:*"
   },
   "keywords": [
     "shopify"
@@ -14,6 +18,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.2.0",
     "@commitlint/config-conventional": "^17.2.0",
+    "@shopify/themekit": "^1.1.9",
     "cypress": "^10.11.0",
     "eslint": "^8.26.0",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -22,6 +27,8 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.1",
+    "nodemon": "^3.0.1",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "sass": "^1.55.0",
     "stylelint-config-prettier": "^9.0.3",
@@ -29,7 +36,8 @@
     "stylelint-config-standard": "^29.0.0",
     "stylelint-config-standard-scss": "^6.0.0",
     "stylelint-scss": "^4.3.0",
-    "vite": "^3.2.2",
-    "vite-plugin-singlefile": "^0.12.3"
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vite-plugin-sass-dts": "^1.3.9"
   }
 }
diff --git a/src/js/README.md b/src/js/README.md
new file mode 100644
index 0000000..2375976
--- /dev/null
+++ b/src/js/README.md
@@ -0,0 +1,27 @@
+# Javascript Guidelines
+
+Let's keep all the JS assets to this path.
+
+## Naming classes
+
+Use `PascalCase` for classes.
+
+```js
+class YswProduct {
+    constructor() {}
+}
+
+class YswGlobal {
+    constructor() {}
+}
+```
+
+## Naming functions, variables, methods, etc
+
+Use `camelCase` for functions, variables methods and others.
+
+```js
+function getProduct() {}
+
+const productPrice = () => {}
+```
diff --git a/assets/ysw-main.js b/src/js/base.ts
similarity index 100%
rename from assets/ysw-main.js
rename to src/js/base.ts
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/sass/README.md b/src/sass/README.md
new file mode 100644
index 0000000..a30a726
--- /dev/null
+++ b/src/sass/README.md
@@ -0,0 +1,34 @@
+# CSS Architecture
+
+Let's keep all the CSS assets to this path.
+
+If you want to add new CSS section, create the new file and be sure to add it to the list of folders in this path.
+
+- `sections` larger modules that can be used in multiple places.
+- `snippets` small pieces of reusable code that can be used in multiple places.
+- `utilities` helper utility classes.
+- `global` global functionalities, variables and colors.
+
+Follow the guide created by Brad Frost: https://bradfrost.com/blog/post/css-architecture-for-design-systems/.
+
+## Global namespace
+
+All classes associated with the design system are prefixed with a global namespace, which is the Company Name followed by a hyphen:
+
+```
+.ysw-
+```
+
+## Class prefixes
+
+`c-` for UI components, such as `.ysw-c-card` or `.ysw-c-header`.
+`l-` for layout-related styles, such as `.ysw-l-grid__item` or `.ysw-l--two-column`.
+`u-` for utilities, such as `.ysw-u-margin-bottom-double` or `.ysw-u-margin-bottom-double`.
+`is-` and `has-` for specific states, such as `.ysw-is-active` or `.ysw-is-disabled`. These state-based classes would apply to.
+`js-` for targeting JavaScript-specific functionality, such as `.js-modal-trigger`. No styles are bound to these classes; they’re reserved for behavior only. For most cases, these `js-` classes would toggle state-based classes to an element.
+
+## BEM syntax
+
+`Block` is the primary component block, such as `.ysw-c-card` or `.ysw-c-btn`.
+`Element` is a child of the primary block, such as `.ysw-c-card__title`.
+`Modifier` is a variation of a component style, such as `.ysw-c-alert--error`.
diff --git a/src/sass/global/_remCalc.scss b/src/sass/global/_remCalc.scss
new file mode 100644
index 0000000..ee268d7
--- /dev/null
+++ b/src/sass/global/_remCalc.scss
@@ -0,0 +1,5 @@
+$base-font-size: 14px;
+
+@function remCalc($value) {
+    @return calc($value / $base-font-size * 1rem);
+}
diff --git a/src/sass/global/_variables.scss b/src/sass/global/_variables.scss
new file mode 100644
index 0000000..27e639c
--- /dev/null
+++ b/src/sass/global/_variables.scss
@@ -0,0 +1,2 @@
+$ysw-color-black: #000000;
+$ysw-color-white: #ffffff;
diff --git a/src/sass/global/global.scss b/src/sass/global/global.scss
new file mode 100644
index 0000000..2c2e55e
--- /dev/null
+++ b/src/sass/global/global.scss
@@ -0,0 +1,2 @@
+@import 'remCalc';
+@import "variables";
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..75abdef
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/vite.config.js b/vite.config.js
index 8893559..b860b11 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,18 +1,43 @@
 import { defineConfig } from 'vite';
+import path from 'path';
+import fs from 'fs';
+
+function generateEntryPoints() {
+  const entryPoints = {};
+  const srcDir = './src';
+  const modulesDir = './src/modules';
+
+  const files = fs.readdirSync(srcDir);
+  const tsFiles = files.filter((file) => file.endsWith('.ts'));
+
+  if (fs.existsSync(modulesDir)) {
+    const moduleFiles = fs.readdirSync(modulesDir).filter((file) => file.endsWith('.ts'));
+
+    moduleFiles.forEach((file) => {
+      const fileName = path.basename(file, '.ts');
+      entryPoints[fileName] = path.resolve(modulesDir, file);
+    });
+  }
+
+  tsFiles.forEach((file) => {
+    const fileName = path.basename(file, '.ts');
+    entryPoints[fileName] = path.resolve(srcDir, file);
+  });
+
+  return entryPoints;
+}
 
 export default defineConfig({
-    build: {
-        outDir: './assets',
-        assetsDir: '',
-        rollupOptions: {
-            input: {
-                'main': './assets/ysw-main.js',
-            },
-            output: {
-                entryFileNames: '[name].min.js',
-                assetFileNames: '[name].min.[ext]',
-            },
-        },
-        emptyOutDir: false,
+  build: {
+    outDir: './assets',
+    assetsDir: '',
+    rollupOptions: {
+      input: generateEntryPoints(),
+      output: {
+        entryFileNames: 'ysw-[name].min.js',
+        assetFileNames: 'ysw-[name].min.[ext]',
+      },
     },
+    emptyOutDir: false,
+  },
 });

From 19d3240dbde181ee46837ab2b666f755d718612d Mon Sep 17 00:00:00 2001
From: Ines Montero <ines@minnekdigital.com>
Date: Tue, 12 Sep 2023 09:39:55 -0400
Subject: [PATCH 2/2] ci: modify setup for sass

---
 src/js/base.ts                                 |  0
 src/{js => modules}/README.md                  |  6 +++---
 src/sass/README.md                             |  2 +-
 src/sass/global/README.md                      | 18 ++++++++++++++++++
 .../global/{_remCalc.scss => _rem-calc.scss}   |  2 +-
 src/sass/global/_variables.scss                |  4 ++--
 src/sass/global/global.scss                    |  2 --
 src/sass/global/index.scss                     |  2 ++
 src/sass/sections/README.md                    |  3 +++
 src/sass/snippets/README.md                    |  3 +++
 src/sass/utilities/README.md                   |  3 +++
 11 files changed, 36 insertions(+), 9 deletions(-)
 delete mode 100644 src/js/base.ts
 rename src/{js => modules}/README.md (90%)
 create mode 100644 src/sass/global/README.md
 rename src/sass/global/{_remCalc.scss => _rem-calc.scss} (72%)
 delete mode 100644 src/sass/global/global.scss
 create mode 100644 src/sass/global/index.scss
 create mode 100644 src/sass/sections/README.md
 create mode 100644 src/sass/snippets/README.md
 create mode 100644 src/sass/utilities/README.md

diff --git a/src/js/base.ts b/src/js/base.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/js/README.md b/src/modules/README.md
similarity index 90%
rename from src/js/README.md
rename to src/modules/README.md
index 2375976..64517a8 100644
--- a/src/js/README.md
+++ b/src/modules/README.md
@@ -1,4 +1,4 @@
-# Javascript Guidelines
+# Typescript Guidelines
 
 Let's keep all the JS assets to this path.
 
@@ -6,7 +6,7 @@ Let's keep all the JS assets to this path.
 
 Use `PascalCase` for classes.
 
-```js
+```ts
 class YswProduct {
     constructor() {}
 }
@@ -20,7 +20,7 @@ class YswGlobal {
 
 Use `camelCase` for functions, variables methods and others.
 
-```js
+```ts
 function getProduct() {}
 
 const productPrice = () => {}
diff --git a/src/sass/README.md b/src/sass/README.md
index a30a726..d375877 100644
--- a/src/sass/README.md
+++ b/src/sass/README.md
@@ -27,7 +27,7 @@ All classes associated with the design system are prefixed with a global namespa
 `is-` and `has-` for specific states, such as `.ysw-is-active` or `.ysw-is-disabled`. These state-based classes would apply to.
 `js-` for targeting JavaScript-specific functionality, such as `.js-modal-trigger`. No styles are bound to these classes; they’re reserved for behavior only. For most cases, these `js-` classes would toggle state-based classes to an element.
 
-## BEM syntax
+## BEM syntax>
 
 `Block` is the primary component block, such as `.ysw-c-card` or `.ysw-c-btn`.
 `Element` is a child of the primary block, such as `.ysw-c-card__title`.
diff --git a/src/sass/global/README.md b/src/sass/global/README.md
new file mode 100644
index 0000000..1a47f5f
--- /dev/null
+++ b/src/sass/global/README.md
@@ -0,0 +1,18 @@
+
+## EXAMPLE of calls to the variables and functions on this carpet
+
+Using global `header.scss`
+```scss
+@use "../global";
+
+header {
+  width: global.rem-calc(10px);
+  color: global.$ysw-color-black;
+}
+```
+
+them create a file for it on `./src/sections/header.ts`
+
+```ts
+import "../sass/sections/header.scss";
+```
diff --git a/src/sass/global/_remCalc.scss b/src/sass/global/_rem-calc.scss
similarity index 72%
rename from src/sass/global/_remCalc.scss
rename to src/sass/global/_rem-calc.scss
index ee268d7..e7b529e 100644
--- a/src/sass/global/_remCalc.scss
+++ b/src/sass/global/_rem-calc.scss
@@ -1,5 +1,5 @@
 $base-font-size: 14px;
 
-@function remCalc($value) {
+@function rem-calc($value) {
     @return calc($value / $base-font-size * 1rem);
 }
diff --git a/src/sass/global/_variables.scss b/src/sass/global/_variables.scss
index 27e639c..f479341 100644
--- a/src/sass/global/_variables.scss
+++ b/src/sass/global/_variables.scss
@@ -1,2 +1,2 @@
-$ysw-color-black: #000000;
-$ysw-color-white: #ffffff;
+$ysw-color-black: #000;
+$ysw-color-white: #fff;
diff --git a/src/sass/global/global.scss b/src/sass/global/global.scss
deleted file mode 100644
index 2c2e55e..0000000
--- a/src/sass/global/global.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import 'remCalc';
-@import "variables";
diff --git a/src/sass/global/index.scss b/src/sass/global/index.scss
new file mode 100644
index 0000000..f0a0605
--- /dev/null
+++ b/src/sass/global/index.scss
@@ -0,0 +1,2 @@
+@forward "rem-calc";
+@forward "variables";
diff --git a/src/sass/sections/README.md b/src/sass/sections/README.md
new file mode 100644
index 0000000..2f8e569
--- /dev/null
+++ b/src/sass/sections/README.md
@@ -0,0 +1,3 @@
+## Folder description
+
+- In this the larger scss modules that can be used in multiple places will be set.
diff --git a/src/sass/snippets/README.md b/src/sass/snippets/README.md
new file mode 100644
index 0000000..9bd7f37
--- /dev/null
+++ b/src/sass/snippets/README.md
@@ -0,0 +1,3 @@
+## Folder description
+
+- In this folder the small pieces of reusable code that can be used in multiple place will be set.
diff --git a/src/sass/utilities/README.md b/src/sass/utilities/README.md
new file mode 100644
index 0000000..5e747d5
--- /dev/null
+++ b/src/sass/utilities/README.md
@@ -0,0 +1,3 @@
+## Folder description
+
+- In this folder the helper utility classes will be set.