Subida del módulo y tema de PrestaShop

themes/hummingbird/.storybook/main.js

@@ -0,0 +1,73 @@
+const path = require('path');
+
+module.exports = {
+  stories: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|ts|tsx)'
+  ],
+
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y',
+    '@storybook/addon-webpack5-compiler-swc'
+  ],
+
+  framework: {
+    name: '@storybook/html-webpack5',
+    options: {}
+  },
+
+  webpackFinal: (config) => {
+    // Add support for HTML
+    config.module.rules = config.module.rules.map((rule) => {
+      if (rule.test && rule.test.toString().includes('\\.html$')) {
+        return {
+          ...rule,
+          use: {
+            loader: 'html-loader',
+          }
+        };
+      }
+      return rule;
+    });
+
+    // Add support for SCSS
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: [
+        'style-loader',
+        'css-loader',
+        {
+          loader: 'sass-loader',
+          options: {
+            sassOptions: {
+              // Removes deprecation warnings from Bootstrap
+              quietDeps: true,
+            }
+          }
+        }
+      ],
+      include: path.resolve(__dirname, '../'),
+    });
+
+    // Add path aliases
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@js': path.resolve(__dirname, '../src/js'),
+      '@services': path.resolve(__dirname, '../src/js/services'),
+      '@constants': path.resolve(__dirname, '../src/js/constants'),
+      '@helpers': path.resolve(__dirname, '../src/js/helpers'),
+    };
+
+    // Define external libraries
+    config.externals = {
+      ...config.externals,
+      prestashop: 'prestashop',
+    };
+
+    return config;
+  },
+
+  docs: {}
+};

themes/hummingbird/.storybook/manager-head.html

@@ -0,0 +1,5 @@
+<style>
+  #panel-tab-content {
+    color: #272a2d;
+  }
+</style>

themes/hummingbird/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/preview-api';
+import psTheme from './ps-theme';
+
+addons.setConfig({
+  theme: psTheme,
+});

themes/hummingbird/.storybook/preview.js

@@ -0,0 +1,29 @@
+import '../src/scss/theme.scss';
+import 'bootstrap';
+import useToast from '../src/js/components/useToast';
+import useAlert from '../src/js/components/useAlert';
+import useProgressRing from '../src/js/components/useProgressRing';
+import selectors from '../src/js/constants/selectors-map';
+
+window.Theme = {
+  components: {
+    useToast,
+    useAlert,
+    useProgressRing
+  }
+}
+
+window.prestashop = {
+  themeSelectors: {
+    ...selectors
+  }
+}
+
+const preview = {
+  parameters: {
+    // Add parameters here
+  },
+
+  tags: ['autodocs']
+};
+export default preview;

themes/hummingbird/.storybook/ps-theme.js

@@ -0,0 +1,33 @@
+import {create} from '@storybook/theming';
+import logoUrl from './logo-prestashop.svg';
+
+export default create({
+  base: 'dark',
+  brandTitle: 'PrestaShop',
+  brandUrl: 'https://www.prestashop-project.org/',
+  brandImage: logoUrl,
+
+  colorPrimary: '#6c868e',
+  colorSecondary: '#25b9d7',
+
+  // UI
+  appBg: '#363a41',
+  appContentBg: 'white',
+  appBorderRadius: 4,
+
+  barTextColor: 'white',
+  barSelectedColor: '#25b9d7',
+  barBg: '#272a2d',
+
+  // Typography
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: 'white',
+  textInverseColor: 'rgba(255,255,255,0.9)',
+
+  // Form
+  inputTextColor: 'black',
+  inputBorderRadius: 4,
+});

themes/hummingbird/.storybook/style.css

@@ -0,0 +1,11 @@
+.sbdocs-preview > div:last-of-type code {
+  color: white;
+}
+
+body {
+  background-color: transparent;
+}
+
+.os-host {
+  color: red;
+}