@licklist/design 0.78.5-gen.90 → 0.78.5-stage.1

package/.storybook/main.cjs

@@ -1,139 +1,44 @@
-const path = require('path');
-
 module.exports = {
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-scss',
+    '@storybook/addon-knobs',
     '@storybook/addon-a11y',
-    '@storybook/addon-docs',
   ],
-  framework: {
-    name: '@storybook/react-webpack5',
-    options: {},
-  },
-  staticDirs: ['../src/assets'],
-
-  webpackFinal: async (config) => {
-    const webpack = require('webpack');
-
-    // Define import.meta.env to prevent errors when accessing VITE_SENTRY_DSN
-    // This replaces import.meta.env at build time
-    // Note: DefinePlugin uses exact string matching, so we define both the object and the property
-    const envVars = {
-      VITE_SENTRY_DSN: process.env.VITE_SENTRY_DSN || '',
-      // add other env vars your components need here
-    };
-
-    // DefinePlugin with multiple patterns to catch different access patterns
-    // This replaces import.meta.env references at build time
-    config.plugins.push(
-      new webpack.DefinePlugin({
-        'import.meta.env': JSON.stringify(envVars),
-        'import.meta.env.VITE_SENTRY_DSN': JSON.stringify(envVars.VITE_SENTRY_DSN),
-        'import.meta.env["VITE_SENTRY_DSN"]': JSON.stringify(envVars.VITE_SENTRY_DSN),
-        'import.meta.env[\'VITE_SENTRY_DSN\']': JSON.stringify(envVars.VITE_SENTRY_DSN),
-      })
-    );
-
-    // Add resolve alias for 'src' imports
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      'src': path.resolve(__dirname, '../src'),
-    };
-
-    // Add fallback for import.meta.env if DefinePlugin doesn't catch it
-    config.resolve.fallback = {
-      ...config.resolve.fallback,
-    };
+  // Export a function. Accept the base config as the only param.
+  webpackFinal: async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+    const assetRule = config.module.rules.find(({ test }) => test.test('.svg'))
+    const gifRule = config.module.rules.find(({ test }) => test.test('.gif'))
+
+    const assetLoader = {
+      loader: assetRule.loader,
+      options: assetRule.options || assetRule.query,
+    }
 
-    // Add JSX/TSX support with Babel
-    config.module.rules.push({
-      test: /\.(js|jsx)$/,
-      exclude: /node_modules/,
-      use: {
-        loader: 'babel-loader',
-        options: {
-          presets: [
-            '@babel/preset-env',
-            ['@babel/preset-react', { runtime: 'automatic' }],
-          ],
-        },
-      },
-    });
+    const gifLoader = {
+      loader: gifRule.loader,
+      options: gifRule.options || gifRule.query,
+    }
 
-    // Add TypeScript support
-    config.module.rules.push({
-      test: /\.(ts|tsx)$/,
+    // Make whatever fine-grained changes you need
+    config.module.rules.unshift({
+      test: /\.gif$/,
       exclude: /node_modules/,
-      use: [
-        {
-          loader: require.resolve('ts-loader'),
-          options: {
-            transpileOnly: true,
-          },
-        },
-      ],
-    });
-
-    config.resolve.extensions.push('.ts', '.tsx', '.js', '.jsx');
-
-    // Add SCSS/SASS support
-    config.module.rules.push({
-      test: /\.scss$/,
-      use: [
-        'style-loader',
-        'css-loader',
-        {
-          loader: 'sass-loader',
-          options: {
-            implementation: require('sass'),
-          },
-        },
-      ],
-    });
+      use: ['url-loader', gifLoader],
+    })
 
-    // Handle SVG files with @svgr/webpack
-    // First, exclude SVG from the default file loader
-    const fileLoaderRule = config.module.rules.find(rule => rule.test?.test?.('.svg'));
-    if (fileLoaderRule) {
-      fileLoaderRule.exclude = /\.svg$/;
-    }
-
-    // Configure SVG handling
-    // CSS imports need URLs, JS/TS imports need ReactComponent
-    config.module.rules.push({
+    config.module.rules.unshift({
       test: /\.svg$/,
-      oneOf: [
-        // For imports with ?url query, provide URL
-        {
-          resourceQuery: /url/,
-          type: 'asset/resource',
-        },
-        // For CSS/SCSS files, provide URL (not React component)
-        {
-          issuer: /\.(css|scss|sass)$/,
-          type: 'asset/resource',
-        },
-        // For JS/TS files, use SVGR to export ReactComponent as named export
-        {
-          issuer: /\.(js|jsx|ts|tsx)$/,
-          use: [
-            {
-              loader: '@svgr/webpack',
-              options: {
-                exportType: 'named',
-                namedExport: 'ReactComponent',
-              },
-            },
-          ],
-        },
-        // Default fallback - provide URL
-        {
-          type: 'asset/resource',
-        },
-      ],
-    });
+      exclude: /node_modules/,
+      use: ['@svgr/webpack', assetLoader],
+    })
 
-    return config;
+    // Return the altered config
+    return config
   },
-};
+}

package/.storybook/manager.js

@@ -0,0 +1,4 @@
+import { withKnobs } from '@storybook/addon-knobs'
+import { addDecorator } from '@storybook/react'
+
+addDecorator(withKnobs())

package/.storybook/preview.js

@@ -0,0 +1,77 @@
+import React, { useEffect } from 'react'
+import { I18nextProvider } from 'react-i18next'
+import { BrowserRouter } from 'react-router-dom'
+import i18n, { IntlProvider } from '@licklist/core/dist/Translation'
+import AuthProvider from '@licklist/plugins/dist/context/user/providers/AuthProvider'
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+}
+
+const themeController = (() => {
+  const themes = ['bookedit', 'licklist']
+  const defaultTheme = themes[0]
+  let activeTheme
+
+  const styles = Object.fromEntries(
+    themes.map((theme) => [
+      theme,
+      require(
+        `!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!../src/styles/themes/${theme}/_index.scss`,
+      ).default,
+    ]),
+  )
+
+  const setTheme = (theme) => {
+    if (theme === activeTheme) return
+    styles[theme].use()
+    if (activeTheme) styles[activeTheme].unuse()
+    activeTheme = theme
+  }
+
+  setTheme(defaultTheme)
+
+  return { themes, defaultTheme, setTheme }
+})()
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: themeController.defaultTheme,
+    toolbar: {
+      icon: 'paintbrush',
+      items: themeController.themes,
+    },
+  },
+}
+
+const withI18n = (Story, context) => (
+  <I18nextProvider i18n={i18n}>
+    <IntlProvider>
+      <Story {...context} />
+    </IntlProvider>
+  </I18nextProvider>
+)
+
+const withTheme = (Story, context) => {
+  useEffect(() => {
+    themeController.setTheme(context.globals.theme)
+  }, [context.globals.theme])
+
+  return <Story {...context} />
+}
+
+const withRouter = (Story, context) => (
+  <BrowserRouter>
+    <Story {...context} />
+  </BrowserRouter>
+)
+
+const withAuth = (Story, context) => (
+  <AuthProvider>
+    <Story {...context} />
+  </AuthProvider>
+)
+
+export const decorators = [withI18n, withTheme, withRouter, withAuth]

package/.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+npmAlwaysAuth: true
+npmAuthToken: ${NPM_TOKEN}

package/bitbucket-pipelines.yml

@@ -21,24 +21,20 @@ definitions:
     - step: &build
         image: node:20.9.0-alpine3.18
         name: Build application
-        size: 2x
         script:
           - corepack enable
           - yarn set version 4.4.0
           - printf "NPM_TOKEN=`node -p \"require('url').parse(process.env.NPM_TOKEN).host\"`" >> ~/.env
-          - export NODE_OPTIONS="--max-old-space-size=4096"
           - CI=false yarn run build
         artifacts:
           - dist/**
     - step: &build_storybook
         image: node:20.9.0-alpine3.18
         name: Build Storybook
-        size: 2x
         script:
           - corepack enable
           - yarn set version 4.4.0
           - printf "NPM_TOKEN=`node -p \"require('url').parse(process.env.NPM_TOKEN).host\"`" >> ~/.env
-          - export NODE_OPTIONS="--max-old-space-size=4096"
           - yarn run build-storybook
         artifacts:
           - build/**
@@ -66,9 +62,9 @@ pipelines:
           name: Publish to NPM
           script:
             - printf "//`node -p \"require('url').parse(process.env.NPM_REGISTRY_URL || 'https://registry.npmjs.org').host\"`/:_authToken=${NPM_TOKEN}\nregistry=${NPM_REGISTRY_URL:-https://registry.npmjs.org}\n" >> ~/.npmrc
-            - pipe: atlassian/npm-publish:1.1.1
+            - pipe: atlassian/npm-publish:0.2.0
               variables:
-                NPM_TOKEN: $NPM_TOKEN 
+                NPM_TOKEN: $NPM_TOKEN
 
   branches:
     master:
@@ -90,4 +86,4 @@ pipelines:
   pull-requests:
     '**':
       - step: *install
-      - step: *build
+      - step: *build

package/dist/affiliate/card/AffiliateCard.d.ts

@@ -0,0 +1,12 @@
+import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission';
+export interface AffiliateCardProps extends HasPermissionProp {
+    name: string;
+    sales?: number | string;
+    views?: number | string;
+    onRemove?: () => void;
+    onClick?: () => void;
+    className?: string;
+    isHeader?: boolean;
+}
+export declare function AffiliateCard({ name, onRemove, onClick, hasPermission, sales, views, className, isHeader, }: AffiliateCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AffiliateCard.d.ts.map

package/dist/affiliate/card/AffiliateCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AffiliateCard.d.ts","sourceRoot":"","sources":["../../../src/affiliate/card/AffiliateCard.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA;AAKtF,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,aAAoB,EACpB,KAAK,EACL,KAAK,EACL,SAAc,EACd,QAAQ,GACT,EAAE,kBAAkB,2CA4FpB"}

package/dist/affiliate/card/AffiliateCard.js

@@ -0,0 +1,159 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { OverlayTrigger, Popover, ListGroup } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
+import { useId } from '@react-aria/utils';
+import { FaEye, FaTrashAlt, FaEllipsisH } from 'react-icons/fa';
+import { ConfirmModal } from '../../modals/confirmation/ConfirmModal.js';
+import { MenuButton } from '../../table/MenuButton.js';
+
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+function AffiliateCard(param) {
+    var name = param.name, onRemove = param.onRemove, onClick = param.onClick, _param_hasPermission = param.hasPermission, hasPermission = _param_hasPermission === void 0 ? true : _param_hasPermission, sales = param.sales, views = param.views, _param_className = param.className, className = _param_className === void 0 ? '' : _param_className, isHeader = param.isHeader;
+    var t = useTranslation('Design').t;
+    var popoverId = useId();
+    var _useState = _sliced_to_array(useState(false), 2), isOverlayVisibile = _useState[0], setIsOverlayVisible = _useState[1];
+    var affiliateClass = "affiliate-card ".concat(className);
+    return /*#__PURE__*/ jsx("div", {
+        role: "button",
+        tabIndex: 0,
+        "aria-disabled": isHeader,
+        className: [
+            'border-0 affiliate-card-wrapper w-100 pb-0',
+            isHeader ? 'disabled-div grey-text' : ''
+        ].join(' '),
+        onClick: onClick,
+        onKeyUp: onClick,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: affiliateClass,
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: "affiliate-card-link",
+                    children: name
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "d-flex",
+                    children: [
+                        (sales || sales === 0) && /*#__PURE__*/ jsx("div", {
+                            className: "affilates-statistic",
+                            children: sales
+                        }),
+                        (views || views === 0) && /*#__PURE__*/ jsx("div", {
+                            className: "affilates-statistic",
+                            children: views
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: [
+                                'd-flex',
+                                isHeader ? 'invisible' : ''
+                            ].join(' '),
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "affiliate-card-menu-eye-container",
+                                    children: /*#__PURE__*/ jsx(FaEye, {
+                                        color: "#0E8CE2",
+                                        size: 20
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(OverlayTrigger, {
+                                    trigger: "click",
+                                    placement: "bottom",
+                                    rootClose: true,
+                                    overlay: /*#__PURE__*/ jsx(Popover, {
+                                        id: popoverId,
+                                        className: clsx('affiliate-card-popover', !isOverlayVisibile && 'd-none'),
+                                        children: /*#__PURE__*/ jsx(Popover.Content, {
+                                            as: ListGroup,
+                                            className: "affiliate-card-menu",
+                                            variant: "flush",
+                                            children: !isHeader && hasPermission && /*#__PURE__*/ jsx(Fragment, {
+                                                children: /*#__PURE__*/ jsx(ListGroup.Item, {
+                                                    action: true,
+                                                    className: "text-danger",
+                                                    as: "div",
+                                                    children: Boolean(onRemove) && /*#__PURE__*/ jsx(ConfirmModal, {
+                                                        children: function(confirm) {
+                                                            return /*#__PURE__*/ jsx(MenuButton, {
+                                                                onClick: function() {
+                                                                    setIsOverlayVisible(false);
+                                                                    confirm(onRemove);
+                                                                },
+                                                                name: t('remove'),
+                                                                icon: /*#__PURE__*/ jsx(FaTrashAlt, {
+                                                                    size: 12
+                                                                }),
+                                                                className: "affiliate-card-menu-item-text d-flex w-100 align-items-center",
+                                                                rightIcon: true
+                                                            });
+                                                        }
+                                                    })
+                                                })
+                                            })
+                                        })
+                                    }),
+                                    children: /*#__PURE__*/ jsx("button", {
+                                        type: "button",
+                                        className: "affiliate-card-menu-button",
+                                        onClick: function(e) {
+                                            e.stopPropagation();
+                                            setIsOverlayVisible(true);
+                                        },
+                                        children: /*#__PURE__*/ jsx(FaEllipsisH, {})
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+
+export { AffiliateCard };

package/dist/affiliate/card/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AffiliateCard';
+//# sourceMappingURL=index.d.ts.map

package/dist/affiliate/card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/affiliate/card/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/dist/affiliate/form/AffiliateControl.d.ts

@@ -0,0 +1,8 @@
+import { GenerateLinkFunction } from '../types';
+interface AffiliateControlProps {
+    isLoading: boolean;
+    generateLink: GenerateLinkFunction;
+}
+export declare const AffiliateControl: ({ isLoading, generateLink, }: AffiliateControlProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AffiliateControl.d.ts.map

package/dist/affiliate/form/AffiliateControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AffiliateControl.d.ts","sourceRoot":"","sources":["../../../src/affiliate/form/AffiliateControl.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAuB,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAEpE,UAAU,qBAAqB;IAC7B,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,oBAAoB,CAAA;CACnC;AAED,eAAO,MAAM,gBAAgB,iCAG1B,qBAAqB,4CA6EvB,CAAA"}