feat: add file navigation, sass compilation and exporting (#6)

* feat: add sass compilation and virtual file management

Introduces the SassWorkspaceCompiler to allow SASS compilation and workspace management. This
utility facilitates the compilation of SASS files using a virtual file system, it allows the
inclusion of static resources.

The VirtualSassImporter, implementing the Importer interface, efficiently resolves import directives
within this virtual file system.

***Example***

```javascript
// Define your workspace
const workspace = [
  {
    name: 'main.scss',
    content: '@import "variables"; .body { color: $primaryColor; }',
    type: 'scss'
  },
  {
    name: 'variables.scss',
    content: '$primaryColor: blue;',
    type: 'scss'
  }
];

// Instantiate the compiler with the workspace
const compiler = new SassWorkspaceCompiler(testWorkspace, {}, 'main.scss');

// Compile the SCSS
const compiledCss = compiler.compile();
```

Additionally, a prebuild script has been introduced to automate the generation of the virtual
workspace structure directly from the `@srgssr/pillarbox-web` dependency's SCSS files.

* feat: add toggle pane button for theme editor file navigation

Introduces a new `TogglePaneButton` component, aimed at displaying a virtual file system in order to
edit the multiple `scss` files found in the pillarbox default theme. When a file in the tree view is
selected, its content is loaded into the theme editor for modification and previewing.

***Example***
```html
<toggle-pane-button label="Display a message">
  <span>Hello World!</span>
</toggle-pane-button>
```

* feat: add export button

Introduces a new `ZipWorkspace` service to allow the exporting of the current workspace as a zip.

***Example***

```javascript
// Define your workspace
const workspace = [
  {
    name: 'main.scss',
    content: '@import "variables"; .body { color: $primaryColor; }',
    type: 'scss'
  },
  {
    name: 'variables.scss',
    content: '$primaryColor: blue;',
    type: 'scss'
  }
];

// Instantiate the zip workspace and trigger the download
await new ZipWorkspace(testWorkspace).download('testWorkspace.zip');
```

* fix: remove prebuild from build step

npm offers `pre` and `post` scripts that will run automatically before or after a script.

Co-authored-by: André M. <[email protected]>

---------

Co-authored-by: André M. <[email protected]>

.gitignore

@@ -58,3 +58,6 @@ dist
 
 # Coverage
 coverage
+
+# Generated workspace
+src/assets/pillarbox-scss-workspace.json

.prebuild.js

@@ -0,0 +1,70 @@
+/**
+ * This script scans scss folder of the `@srgssr/pillarbox-web` dependency and
+ * recursively includes all the files and their content to create json
+ * representation of the workspace for the theme editor.
+ */
+import { mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from 'fs';
+import * as path from 'path';
+import { join } from 'path';
+
+const isDebugEnabled = process.argv.includes('--debug');
+
+/**
+ * Print a debug log.
+ * @param message the message to log.
+ */
+function debug(message) {
+  if (isDebugEnabled) {
+    console.debug(message);
+  }
+}
+
+/**
+ * Checks if the given file path is a directory.
+ *
+ * @param {string} filePath - The path to the file to check.
+ * @returns {boolean} True if the path is a directory, false otherwise.
+ */
+function isDirectory(filePath) {
+  return statSync(filePath).isDirectory();
+}
+
+/**
+ * Recursively generates a workspace structure of SCSS files and folders from a given directory.
+ *
+ * @param {string} dirPath - The path to the directory to generate the workspace from.
+ * @returns {Array} A structured array of objects representing the directory and file structure.
+ */
+function generateWorkspace(dirPath) {
+  return readdirSync(dirPath).map(name => {
+    const fullPath = join(dirPath, name);
+    if (isDirectory(fullPath)) {
+      return { name, type: 'folder', children: generateWorkspace(fullPath) };
+    } else {
+      debug(`Reading file: ${fullPath}`);
+      const content = readFileSync(fullPath, 'utf-8');
+      return { name, type: 'scss', content };
+    }
+  });
+}
+
+try {
+  console.log("Starting the generation of the SCSS workspace structure...");
+
+  // Specify the directory to generate the workspace from.
+  const structure = generateWorkspace('./node_modules/@srgssr/pillarbox-web/scss');
+
+  // Define the output path for the generated workspace structure JSON file.
+  const outputPath = './src/assets/pillarbox-scss-workspace.json';
+  const outputDir = path.dirname(outputPath);
+
+  // Write the structured workspace to a JSON file, pretty-printed.
+  console.log(`Writing the workspace structure to ${outputPath}...`);
+  mkdirSync(outputDir, { recursive: true });
+  writeFileSync(outputPath, JSON.stringify(structure, null, 2), 'utf-8');
+
+  console.log(`Successfully wrote the workspace structure to ${outputPath}`);
+} catch(error) {
+  console.error("Error occurred during the generation of the workspace:", error);
+  process.exit(1);
+}

index.html

@@ -19,7 +19,15 @@ <h1><img src="/pillarbox-logo.webp" class="logo" alt="Pillarbox logo"/> Pillarbo
 <main>
   <resizable-split-view>
     <section slot="left">
-      <h2>Craft your theme</h2>
+      <div class="craft-title-container">
+        <h2>Craft your theme</h2>
+        <toggle-pane-button title="Select a file to edit" id="navigation-button">
+          <tree-view id="navigation"></tree-view>
+        </toggle-pane-button>
+        <button id="download">
+          Export as .zip
+        </button>
+      </div>
       <css-editor id="editor"></css-editor>
     </section>
     <section slot="right">