Remove console for every sandbox file and add colors to sandbox creat…

…e success and fail

packages/embla-carousel-docs/src/components/CodeSandbox/Compilation/build-after.ts

@@ -1,24 +1,37 @@
 import fs from 'fs'
-import { readFiles, PATHS_TO_SANDBOX_FILES } from './build-utils'
+import {
+  readFiles,
+  PATHS_TO_SANDBOX_FILES,
+  CONSOLE_FONT_COLOR_RED,
+  CONSOLE_FONT_COLOR_GREEN,
+} from './build-utils'
 
 PATHS_TO_SANDBOX_FILES.forEach((path) => {
-  readFiles(
-    `${path}/`,
-    (filename, content) => {
-      fs.writeFile(
-        filename,
-        content.replace(
-          /\/\* The TypeScript compiler won't clear this empty line! \*\//gm,
-          '',
-        ),
-        (error) => {
-          if (error) return console.log(error)
-          console.log('The file was saved!')
-        },
-      )
-    },
-    (error) => {
-      throw error
-    },
-  )
+  try {
+    readFiles(
+      `${path}/`,
+      (filename, content) => {
+        fs.writeFile(
+          filename,
+          content.replace(
+            /\/\* The TypeScript compiler won't clear this empty line! \*\//gm,
+            '',
+          ),
+          (error) => {
+            if (error) return console.log(error)
+          },
+        )
+      },
+      (error) => {
+        throw error
+      },
+    )
+
+    console.log(
+      CONSOLE_FONT_COLOR_GREEN,
+      `Sandboxes created succesfully: ${path}`,
+    )
+  } catch (error) {
+    console.log(CONSOLE_FONT_COLOR_RED, error)
+  }
 })

packages/embla-carousel-docs/src/components/CodeSandbox/Compilation/build-before.ts

@@ -3,26 +3,33 @@ import {
   readFiles,
   PATHS_TO_SANDBOX_FILES,
   EMPTY_LINE_REGEX,
+  CONSOLE_FONT_COLOR_RED,
+  CONSOLE_FONT_COLOR_CYAN,
 } from './build-utils'
 
 PATHS_TO_SANDBOX_FILES.forEach((path) => {
-  readFiles(
-    `${path}/`,
-    (filename, content) => {
-      fs.writeFile(
-        filename,
-        content.replace(
-          EMPTY_LINE_REGEX,
-          `/* The TypeScript compiler won't clear this empty line! */ \n`,
-        ),
-        (error) => {
-          if (error) return console.log(error)
-          console.log('The file was saved!')
-        },
-      )
-    },
-    (error) => {
-      throw error
-    },
-  )
+  console.log(CONSOLE_FONT_COLOR_CYAN, `Compiling sandboxes: ${path} ...`)
+
+  try {
+    readFiles(
+      `${path}/`,
+      (filename, content) => {
+        fs.writeFile(
+          filename,
+          content.replace(
+            EMPTY_LINE_REGEX,
+            `/* The TypeScript compiler won't clear this empty line! */ \n`,
+          ),
+          (error) => {
+            if (error) return console.log(error)
+          },
+        )
+      },
+      (error) => {
+        throw error
+      },
+    )
+  } catch (error) {
+    console.log(CONSOLE_FONT_COLOR_RED, error)
+  }
 })

packages/embla-carousel-docs/src/components/CodeSandbox/Compilation/build-utils.ts

@@ -6,6 +6,9 @@ export const PATHS_TO_SANDBOX_FILES = [
 ]
 
 export const EMPTY_LINE_REGEX = /^\s*\n/gm
+export const CONSOLE_FONT_COLOR_RED = '\x1b[31m'
+export const CONSOLE_FONT_COLOR_GREEN = '\x1b[32m'
+export const CONSOLE_FONT_COLOR_CYAN = '\x1b[36m%s\x1b[0m'
 
 export const readFiles = (
   dirname: string,

packages/embla-carousel-docs/src/components/Examples/Miscellaneous/LazyLoadSandboxes.tsx

@@ -21,11 +21,9 @@ import {
   SANDBOX_LABELS,
 } from 'components/CodeSandbox/sandboxLabels'
 
-// TODO: Add sandboxVanillaFolders.ts and sandboxReactFolders.ts constants
 // TODO: Add React.FC to all components!
 // TODO: Make plugins a constant
 // TODO: Fix Y-axis badges
-// TODO: Remove "The file was saved!" from node script
 
 const SHARED_CONFIG = {
   slides: SLIDES,