diff --git a/frontend/.storybook/decorators.jsx b/frontend/.storybook/decorators.jsx
index eee828eccf..e72f6af4f7 100644
--- a/frontend/.storybook/decorators.jsx
+++ b/frontend/.storybook/decorators.jsx
@@ -1,14 +1,19 @@
// storybookDecorators.js
-import React from 'react';
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
export function withColorScheme(story, context) {
- const darkMode = context?.globals?.backgrounds?.value === '#333333'; // Access theme mode from globals
- const className = darkMode ? 'dark-theme' : '';
+ const darkMode = context?.globals?.backgrounds?.value === "#333333"; // Access theme mode from globals
+ const className = darkMode ? "dark-theme" : "";
return (
-
+
{story()}
);
}
+
+export function withRouter(story) {
+ return
{story()};
+}
diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js
index c6ea9f6f9e..044b57df4e 100644
--- a/frontend/.storybook/main.js
+++ b/frontend/.storybook/main.js
@@ -1,32 +1,77 @@
-import customWebpackConfig from '../webpack.config';
-import path from 'path';
+import customWebpackConfig from "../webpack.config";
+import path from "path";
const config = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+
addons: [
"@storybook/addon-links",
- "@storybook/addon-essentials",
"@storybook/addon-onboarding",
- "@storybook/addon-interactions",
+ "@storybook/addon-docs",
],
+
framework: {
name: "@storybook/react-webpack5",
options: {},
},
- docs: {
- autodocs: "tag",
- },
+
webpackFinal: async (storybookConfig) => {
+ // Filter out the babel-loader rule from custom config to avoid conflicts
+ const customRules = customWebpackConfig.module.rules.filter((rule) => {
+ if (rule.test && rule.test.toString().includes("js|jsx")) {
+ return false; // Skip the babel-loader rule that includes react-refresh
+ }
+ return true;
+ });
+
+ // Add a custom babel-loader rule for JSX files without react-refresh
+ const babelRule = {
+ test: /\.(js|jsx)$/,
+ exclude: /node_modules/,
+ use: {
+ loader: "babel-loader",
+ options: {
+ presets: ["@babel/preset-env", "@babel/preset-react"],
+ plugins: [
+ [
+ "import",
+ {
+ libraryName: "lodash",
+ libraryDirectory: "",
+ camel2DashComponentName: false,
+ },
+ "lodash",
+ ],
+ ],
+ },
+ },
+ };
+
return {
...storybookConfig,
- module: { ...storybookConfig.module, rules: [...storybookConfig.module.rules, ...customWebpackConfig.module.rules] },
+ module: {
+ ...storybookConfig.module,
+ rules: [...storybookConfig.module.rules, ...customRules, babelRule],
+ },
resolve: {
...storybookConfig.resolve,
alias: {
...storybookConfig.resolve.alias,
- '@': path.resolve(__dirname, '../src/')
- }
- }
+ "@": path.resolve(__dirname, "../src/"),
+ "@ee": path.resolve(__dirname, "../ee/"),
+ "@cloud": path.resolve(__dirname, "../cloud/"),
+ "@assets": path.resolve(__dirname, "../assets/"),
+ "@white-label": path.resolve(
+ __dirname,
+ "../src/_helpers/white-label"
+ ),
+ },
+ fallback: {
+ ...storybookConfig.resolve.fallback,
+ process: require.resolve("process/browser.js"),
+ path: require.resolve("path-browserify"),
+ },
+ },
};
},
};
diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js
index 1d083f674a..93f1ec4603 100644
--- a/frontend/.storybook/preview.js
+++ b/frontend/.storybook/preview.js
@@ -1,8 +1,8 @@
-/** @type { import('@storybook/react').Preview } */
+/** @type { import('@storybook/react-webpack5').Preview } */
-import '../src/_styles/theme.scss';
-import './preview.scss';
-import { withColorScheme } from './decorators'; // Import the decorator
+import "../src/_styles/theme.scss";
+import "./preview.scss";
+import { withColorScheme, withRouter } from "./decorators"; // Import the decorators
const preview = {
parameters: {
@@ -14,7 +14,7 @@ const preview = {
},
},
},
- decorators: [withColorScheme], // Adding the decorator to the decorators array
+ decorators: [withRouter, withColorScheme], // Adding the decorators to the decorators array
};
export default preview;
diff --git a/frontend/.storybook/preview.scss b/frontend/.storybook/preview.scss
index 5d2b1b09e6..07e09e71ce 100644
--- a/frontend/.storybook/preview.scss
+++ b/frontend/.storybook/preview.scss
@@ -1,2 +1,6 @@
@import '~bootstrap/scss/bootstrap';
-@import '../src/_styles/componentdesign.scss'
\ No newline at end of file
+@import '../src/_styles/componentdesign.scss';
+
+body {
+ overflow-y: scroll !important;
+}
\ No newline at end of file
diff --git a/frontend/.version b/frontend/.version
index c99dce2c22..4e9c0a8fb9 100644
--- a/frontend/.version
+++ b/frontend/.version
@@ -1 +1 @@
-3.16.1-lts
+3.20.74-lts
diff --git a/frontend/assets/images/dynamic-height-info.svg b/frontend/assets/images/dynamic-height-info.svg
new file mode 100644
index 0000000000..af3c39929c
--- /dev/null
+++ b/frontend/assets/images/dynamic-height-info.svg
@@ -0,0 +1,9 @@
+
diff --git a/frontend/assets/images/icons/warning-icon.svg b/frontend/assets/images/icons/warning-icon.svg
new file mode 100644
index 0000000000..45d7f5824c
--- /dev/null
+++ b/frontend/assets/images/icons/warning-icon.svg
@@ -0,0 +1,3 @@
+
diff --git a/frontend/assets/images/icons/widgets/audiorecorder.jsx b/frontend/assets/images/icons/widgets/audiorecorder.jsx
new file mode 100644
index 0000000000..3c6a955204
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/audiorecorder.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const AudioRecorder = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 18 20' }) => (
+
+);
+
+export default AudioRecorder;
diff --git a/frontend/assets/images/icons/widgets/camera.jsx b/frontend/assets/images/icons/widgets/camera.jsx
new file mode 100644
index 0000000000..a0c81f340d
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/camera.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Camera = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 20 18' }) => (
+
+);
+
+export default Camera;
diff --git a/frontend/assets/images/icons/widgets/currencyinput.jsx b/frontend/assets/images/icons/widgets/currencyinput.jsx
new file mode 100644
index 0000000000..68a5a34d84
--- /dev/null
+++ b/frontend/assets/images/icons/widgets/currencyinput.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+const CurrencyInput = ({ fill = '#D7DBDF', width = 24, className = '', viewBox = '0 0 49 48' }) => (
+
+);
+
+export default CurrencyInput;
diff --git a/frontend/assets/images/icons/widgets/downstatistics.jsx b/frontend/assets/images/icons/widgets/downstatistics.jsx
index 48ad5b1917..fd14361535 100644
--- a/frontend/assets/images/icons/widgets/downstatistics.jsx
+++ b/frontend/assets/images/icons/widgets/downstatistics.jsx
@@ -1,12 +1,29 @@
import React from 'react';
-const Downstatistics = () => (
-