++ new menu

package.json

@@ -8,7 +8,8 @@
     "start": "next start",
     "lint": "next lint",
     "post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest",
-    "symlink": "npm link ../metaeditor_src/pixel-streaming"
+    "symlink": "npm link ../metaeditor_src/pixel-streaming",
+    "build:icons": "tsc -b src/iconify-bundle && node src/iconify-bundle/bundle-icons-react.js"
   },
   "dependencies": {
     "@emotion/cache": "latest",
@@ -35,7 +36,7 @@
   "workspaces": {
     "packages": [
       "src/@core/**",
-      "src/components/**/**"
+      "src/@core/components/**/**"
     ],
     "nohoist": []
   }

src/components/Carousel/index.tsx → src/@core/components/Carousel/index.tsx

@@ -3,33 +3,33 @@ import { styled, alpha, lighten } from '@mui/system';
 import { ButtonBase } from "@mui/material";
 
 // libs
-import { Splide, SplideSlide } from '@splidejs/react-splide';
+import { Splide, SplideSlide, Options } from '@splidejs/react-splide';
 import '@splidejs/react-splide/css';
 
 
 const Card = styled((props: any) => <ButtonBase component="div" {...props} />)(({ theme }: any) => ({
-  borderRadius: theme.shape.borderRadius,
+  // borderRadius: theme.shape.borderRadius,
   width: '100%',
 
-  transition: theme.transitions.create(['background-color', 'border-color']),
-  overflow: 'hidden',
-  border: `solid 1px rgba(255,255,255, .2)`,
-  backgroundColor: 'rgba(0,0,0,.2)',
-  backdropFilter: 'blur(4px)',
-  '&:hover': {
-    borderColor: 'rgba(255,255,255, .5)',
-    backgroundColor: 'rgba(0,0,0,1)',
-  },
+  // transition: theme.transitions.create(['background-color', 'border-color']),
+  // overflow: 'hidden',
+  // border: `solid 1px rgba(255,255,255, .2)`,
+  // backgroundColor: 'rgba(0,0,0,.2)',
+  // backdropFilter: 'blur(4px)',
+  // '&:hover': {
+  //   borderColor: 'rgba(255,255,255, .5)',
+  //   backgroundColor: 'rgba(0,0,0,1)',
+  // },
   '& > *': {
     width: '100%',
   }
 }));
 
-interface Props {
+interface Props extends Options {
   items: JSX.Element[]
 }
 
-export default function Slider({ items }: Props) {
+export default function Slider({ items, ...props }: Props) {
 
   return (
     <Splide options={{
@@ -58,6 +58,7 @@ export default function Slider({ items }: Props) {
         //   height: '15rem',
         // },
       },
+      ...props,
     }}>
       {items.map((item, index) => (
         <SplideSlide key={index}>

src/@core/components/IconifyIcon/index.tsx

@@ -0,0 +1,11 @@
+// ** Icon Imports
+import { Icon, IconProps } from '@iconify/react'
+
+// Icons:
+// https://icon-sets.iconify.design/mdi/
+
+export default function IconifyIcon({ icon, ...rest }: IconProps) {
+  return (
+    <Icon icon={icon} fontSize='1.5rem' {...rest} />
+  )
+}

src/@core/components/IconifyIcon/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@components/IconifyIcon",
+  "version": "0.0.1",
+  "private": true,
+  "dependencies": {
+    "@iconify/react": "4.0.0"
+  },
+  "devDependencies": {
+    "@iconify/iconify": "3.0.0",
+    "@iconify/json": "2.1.131",
+    "@iconify/tools": "2.1.1",
+    "@iconify/types": "2.0.0",
+    "@iconify/utils": "2.0.1"
+  }
+}

src/iconify-bundle/bundle-icons-react.d.ts

@@ -0,0 +1 @@
+export {};

src/iconify-bundle/bundle-icons-react.js

@@ -0,0 +1,201 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * This is an advanced example for creating icon bundles for Iconify SVG Framework.
+ *
+ * It creates a bundle from:
+ * - All SVG files in a directory.
+ * - Custom JSON files.
+ * - Iconify icon sets.
+ * - SVG framework.
+ *
+ * This example uses Iconify Tools to import and clean up icons.
+ * For Iconify Tools documentation visit https://docs.iconify.design/tools/tools2/
+ */
+const fs_1 = require("fs");
+const path_1 = require("path");
+// Installation: npm install --save-dev @iconify/tools @iconify/utils @iconify/json @iconify/iconify
+const tools_1 = require("@iconify/tools");
+const utils_1 = require("@iconify/utils");
+/* eslint-enable */
+const sources = {
+    json: [
+        // Iconify JSON file (@iconify/json is a package name, /json/ is directory where files are, then filename)
+        require.resolve('@iconify/json/json/mdi.json'),
+        // Custom file with only few icons
+        {
+            filename: require.resolve('@iconify/json/json/line-md.json'),
+            icons: ['home-twotone-alt', 'github', 'document-list', 'document-code', 'image-twotone']
+        }
+        // Custom JSON file
+        // 'json/gg.json'
+    ],
+    icons: [
+        'bx:basket',
+        'bi:airplane-engines',
+        'tabler:anchor',
+        'uit:adobe-alt',
+        'fa6-regular:comment',
+        'twemoji:auto-rickshaw'
+    ],
+    svg: [
+        {
+            dir: 'src/iconify-bundle/svg',
+            monotone: false,
+            prefix: 'custom'
+        }
+        /* {
+          dir: 'src/iconify-bundle/emojis',
+          monotone: false,
+          prefix: 'emoji'
+        } */
+    ]
+};
+// Iconify component (this changes import statement in generated file)
+// Available options: '@iconify/react' for React, '@iconify/vue' for Vue 3, '@iconify/vue2' for Vue 2, '@iconify/svelte' for Svelte
+const component = '@iconify/react';
+// Set to true to use require() instead of import
+const commonJS = false;
+// File to save bundle to
+const target = 'src/iconify-bundle/icons-bundle-react.js';
+(async function () {
+    let bundle = commonJS
+        ? "const { addCollection } = require('" + component + "');\n\n"
+        : "import { addCollection } from '" + component + "';\n\n";
+    // Create directory for output if missing
+    const dir = (0, path_1.dirname)(target);
+    try {
+        await fs_1.promises.mkdir(dir, {
+            recursive: true
+        });
+    }
+    catch (err) {
+        //
+    }
+    /**
+     * Convert sources.icons to sources.json
+     */
+    if (sources.icons) {
+        const sourcesJSON = sources.json ? sources.json : (sources.json = []);
+        // Sort icons by prefix
+        const organizedList = organizeIconsList(sources.icons);
+        for (const prefix in organizedList) {
+            const filename = require.resolve(`@iconify/json/json/${prefix}.json`);
+            sourcesJSON.push({
+                filename,
+                icons: organizedList[prefix]
+            });
+        }
+    }
+    /**
+     * Bundle JSON files
+     */
+    if (sources.json) {
+        for (let i = 0; i < sources.json.length; i++) {
+            const item = sources.json[i];
+            // Load icon set
+            const filename = typeof item === 'string' ? item : item.filename;
+            let content = JSON.parse(await fs_1.promises.readFile(filename, 'utf8'));
+            // Filter icons
+            if (typeof item !== 'string' && item.icons?.length) {
+                const filteredContent = (0, utils_1.getIcons)(content, item.icons);
+                if (!filteredContent) {
+                    throw new Error(`Cannot find required icons in ${filename}`);
+                }
+                content = filteredContent;
+            }
+            // Remove metadata and add to bundle
+            removeMetaData(content);
+            (0, utils_1.minifyIconSet)(content);
+            bundle += 'addCollection(' + JSON.stringify(content) + ');\n';
+            console.log(`Bundled icons from ${filename}`);
+        }
+    }
+    /**
+     * Custom SVG
+     */
+    if (sources.svg) {
+        for (let i = 0; i < sources.svg.length; i++) {
+            const source = sources.svg[i];
+            // Import icons
+            const iconSet = await (0, tools_1.importDirectory)(source.dir, {
+                prefix: source.prefix
+            });
+            // Validate, clean up, fix palette and optimise
+            await iconSet.forEach(async (name, type) => {
+                if (type !== 'icon') {
+                    return;
+                }
+                // Get SVG instance for parsing
+                const svg = iconSet.toSVG(name);
+                if (!svg) {
+                    // Invalid icon
+                    iconSet.remove(name);
+                    return;
+                }
+                // Clean up and optimise icons
+                try {
+                    // Clean up icon code
+                    await (0, tools_1.cleanupSVG)(svg);
+                    if (source.monotone) {
+                        // Replace color with currentColor, add if missing
+                        // If icon is not monotone, remove this code
+                        await (0, tools_1.parseColors)(svg, {
+                            defaultColor: 'currentColor',
+                            callback: (attr, colorStr, color) => {
+                                return !color || (0, tools_1.isEmptyColor)(color) ? colorStr : 'currentColor';
+                            }
+                        });
+                    }
+                    // Optimise
+                    await (0, tools_1.runSVGO)(svg);
+                }
+                catch (err) {
+                    // Invalid icon
+                    console.error(`Error parsing ${name} from ${source.dir}:`, err);
+                    iconSet.remove(name);
+                    return;
+                }
+                // Update icon from SVG instance
+                iconSet.fromSVG(name, svg);
+            });
+            console.log(`Bundled ${iconSet.count()} icons from ${source.dir}`);
+            // Export to JSON
+            const content = iconSet.export();
+            bundle += 'addCollection(' + JSON.stringify(content) + ');\n';
+        }
+    }
+    // Save to file
+    await fs_1.promises.writeFile(target, bundle, 'utf8');
+    console.log(`Saved ${target} (${bundle.length} bytes)`);
+})().catch(err => {
+    console.error(err);
+});
+/**
+ * Remove metadata from icon set
+ */
+function removeMetaData(iconSet) {
+    const props = ['info', 'chars', 'categories', 'themes', 'prefixes', 'suffixes'];
+    props.forEach(prop => {
+        delete iconSet[prop];
+    });
+}
+/**
+ * Sort icon names by prefix
+ */
+function organizeIconsList(icons) {
+    const sorted = Object.create(null);
+    icons.forEach(icon => {
+        const item = (0, utils_1.stringToIcon)(icon);
+        if (!item) {
+            return;
+        }
+        const prefix = item.prefix;
+        const prefixList = sorted[prefix] ? sorted[prefix] : (sorted[prefix] = []);
+        const name = item.name;
+        if (prefixList.indexOf(name) === -1) {
+            prefixList.push(name);
+        }
+    });
+    return sorted;
+}