@abtnode/ux 1.16.27-beta-74c4e335 → 1.16.27-beta-4022dde0

package/lib/blocklet/publish/create-release/index.js

@@ -0,0 +1,575 @@
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import useSetState from 'react-use/lib/useSetState';
+import pick from 'lodash/pick';
+import semver from 'semver';
+import { Box, Typography, useMediaQuery, Tooltip } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import Tabs from '@arcblock/ux/lib/Tabs';
+import { UNOWNED_DID } from '@abtnode/constant';
+import QuestionMarkIcon from '@arcblock/icons/lib/QuestionMarkCircle';
+import BlockletBundleAvatar from '../../bundle-avatar';
+import { useNodeContext } from '../../../contexts/node';
+import { useBlockletContext } from '../../../contexts/blocklet';
+import EmptySpinner from '../../../empty-spinner';
+import { formatError } from '../../../util';
+import Resources from './resources';
+import Blocklets from './blocklets';
+import StopBox from './stop-box';
+import Branding from './branding';
+import Version from './version';
+import Header from './header';
+import ReleaseStepper from './release-stepper';
+import Introduction from './introduction';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const addComponentTabs = ({
+  tabs,
+  blocklet,
+  ancestors = []
+}) => {
+  const key = blocklet.meta.did;
+  tabs.push({
+    label: /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      children: [/*#__PURE__*/_jsx(BlockletBundleAvatar, {
+        size: 24,
+        blocklet: blocklet,
+        ancestors: ancestors
+      }), /*#__PURE__*/_jsx(Box, {
+        ml: "4px",
+        className: "text",
+        children: /*#__PURE__*/_jsx(Box, {
+          children: blocklet.meta.title
+        })
+      })]
+    }, key),
+    value: key
+  });
+};
+const pickParams = (baseParams, app) => {
+  const params = pick(baseParams, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletScreenshots', 'connectedStores', 'blockletComponents', 'lastReleaseId', 'note']);
+  if (!params.blockletComponents) {
+    params.blockletComponents = (app.children || []).map(x => ({
+      did: x.meta.did,
+      included: false,
+      required: false
+    }));
+  } else {
+    params.blockletComponents = params.blockletComponents.map(x => ({
+      ...x,
+      included: true
+    }));
+  }
+  return params;
+};
+const stepsToLabel = {
+  0: 'branding',
+  1: 'introduction',
+  2: 'resources',
+  3: 'blocklets',
+  4: 'version'
+};
+const labelToStep = {
+  branding: 0,
+  introduction: 1,
+  resources: 2,
+  blocklets: 3,
+  version: 4
+};
+export default function CreateRelease({
+  initUrl,
+  ...rest
+}) {
+  const {
+    projectId,
+    mode,
+    releaseId: inputReleaseId,
+    componentDid = ''
+  } = useParams();
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    blocklet
+  } = useBlockletContext();
+  const [params, setParams] = useSetState({
+    blockletScreenshots: [],
+    publishedStoreIds: [],
+    connectedStores: []
+  });
+  const [paramsErrTip, setParamsErrTip] = useSetState({});
+  const [loading, setLoading] = useState(false);
+  const [release, setRelease] = useSetState(null);
+  const {
+    api
+  } = useNodeContext();
+  const isMobile = useMediaQuery(theme => theme.breakpoints.down('md'));
+  const [initialResources, setInitialResources] = useState({});
+  const [releaseUsedLast, setReleaseUsedLast] = useState(false);
+  const saveSelectedEventsRef = useRef({});
+  const [selectedResourceIds, _setSelectedResourceIds] = useSetState({});
+  const [initLogoUrl, setInitLogoUrl] = useState('');
+  const [resourceComponentsMap, _setResourceComponentsMap] = useSetState({});
+  const dependentComponentsMode = initUrl?.searchParams.get('dependentComponentsMode');
+  const disabledSelectComponents = dependentComponentsMode === 'readonly';
+  const setResourceComponentsMap = useCallback(setter => {
+    if (disabledSelectComponents) {
+      setParams({
+        blockletComponents: []
+      });
+    }
+    _setResourceComponentsMap(setter);
+  }, [disabledSelectComponents, _setResourceComponentsMap, setParams]);
+  const setSelectedResourceIds = useCallback((...args) => {
+    _setSelectedResourceIds(...args);
+    setParamsErrTip({
+      blockletResources: ''
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const releaseId = inputReleaseId === 'none' ? params?.lastReleaseId || '' : inputReleaseId;
+  const [activeStep, setActiveStep] = useState(mode === 'new-release' ? 4 : 0);
+  useEffect(() => {
+    if (projectId) {
+      setParamsErrTip({
+        projectId: ''
+      });
+    }
+  }, [projectId, setParamsErrTip]);
+  const projectType = useMemo(() => params?.blockletComponents?.some(x => x.included) ? 'pack' : 'resource', [params?.blockletComponents]);
+  const tabs = [];
+  const resourceComponents = (blocklet?.children || []).filter(x => x.meta.resource?.exportApi).filter(x => !componentDid || x.meta.did === componentDid);
+  resourceComponents.forEach(item => {
+    addComponentTabs({
+      tabs,
+      blocklet: item,
+      t,
+      ancestors: [blocklet]
+    });
+  });
+  const [tab, setTab] = useState(tabs[0]?.value);
+  const isPublished = !releaseUsedLast && release?.status === 'published';
+  const readOnly = isPublished;
+  const resourceRelateComponents = useMemo(() => {
+    const result = {};
+    Object.keys(resourceComponentsMap).forEach(key => {
+      const item = resourceComponentsMap[key];
+      if (item) {
+        item.forEach(k => {
+          result[k] = true;
+        });
+      }
+    });
+    return result;
+  }, [resourceComponentsMap]);
+  const getRelease = async () => {
+    if (!releaseId) {
+      return;
+    }
+    try {
+      const res = await api.getRelease({
+        input: {
+          did: blocklet.meta.did,
+          projectId,
+          releaseId
+        }
+      });
+      setLoading(false);
+      if (!res.release) {
+        Toast.error('Release not found');
+        return;
+      }
+      setParams(lastParams => pickParams({
+        ...lastParams,
+        ...res.release,
+        blockletVersion: mode === 'create' || mode === 'new-release' ? semver.inc(res.release.blockletVersion, 'patch') : res.release.blockletVersion
+      }, blocklet));
+      setRelease(res.release);
+    } catch (err) {
+      setLoading(false);
+      Toast.error(formatError(err));
+    }
+  };
+  const getProject = async () => {
+    if (projectId === UNOWNED_DID) {
+      setParams({
+        blockletVersion: '1.0.0',
+        blockletTitle: ''
+      });
+      return;
+    }
+    if (!projectId) {
+      Toast.error(t('blocklet.publish.errorTip.noDid'));
+      return;
+    }
+    try {
+      const res = await api.getProject({
+        input: {
+          did: blocklet.meta.did,
+          projectId
+        }
+      });
+      setLoading(false);
+      const data = res.project || {};
+      if (!data.blockletVersion) {
+        data.blockletVersion = '1.0.0';
+      } else if ((mode === 'create' || mode === 'new-release') && semver.valid(data.blockletVersion)) {
+        data.blockletVersion = semver.inc(data.blockletVersion, 'patch');
+      }
+      const theParams = pickParams(data, blocklet);
+      setParams(theParams);
+    } catch (err) {
+      setLoading(false);
+      Toast.error(formatError(err));
+    }
+  };
+  const getData = useCallback(async () => {
+    if (mode === 'view') {
+      if (!releaseId) {
+        Toast.error('Empty release id');
+        return;
+      }
+      await getProject();
+      await getRelease();
+      return;
+    }
+    await getProject();
+    if (releaseId) {
+      setReleaseUsedLast(true);
+      await getRelease();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode, releaseId]);
+  const handleChangeSelectedComponents = data => {
+    setParams({
+      blockletComponents: data
+    });
+  };
+  useEffect(() => {
+    getData();
+  }, [getData]);
+  useEffect(() => {
+    if (projectId === UNOWNED_DID && (mode === 'create' || mode === 'new-release') && initUrl) {
+      setInitLogoUrl(initUrl.searchParams.get('logo'));
+      setParams({
+        blockletTitle: initUrl.searchParams.get('title'),
+        blockletDescription: initUrl.searchParams.get('description'),
+        blockletIntroduction: initUrl.searchParams.get('introduction') || initUrl.searchParams.get('description'),
+        blockletComponents: JSON.parse(initUrl.searchParams.get('components') || '[]'),
+        note: initUrl.searchParams.get('note') || 'No note'
+      });
+      const resourcesString = initUrl.searchParams.get('resources');
+      try {
+        const resources = JSON.parse(resourcesString);
+        setInitialResources(resources);
+      } catch (_) {
+        //
+      }
+    }
+  }, [setParams, projectId, initUrl, mode]);
+  const isSelectedResources = useMemo(() => {
+    return !!Object.keys(selectedResourceIds).find(key => {
+      if (selectedResourceIds[key].length) {
+        return true;
+      }
+      return false;
+    });
+  }, [selectedResourceIds]);
+  if (!params && loading) {
+    return /*#__PURE__*/_jsx(EmptySpinner, {});
+  }
+  if (!params) {
+    return null;
+  }
+  const resourceItem = resourceComponents.find(x => x.meta.did === tab);
+  const allResourceComponentsStop = resourceComponents.every(x => x.status !== 'running');
+  if (allResourceComponentsStop) {
+    return /*#__PURE__*/_jsx(StopBox, {
+      children: t('blocklet.publish.allComponentsNotRunning')
+    });
+  }
+  const onTabChange = x => {
+    setTab(x);
+  };
+  const resourcesUrlTitle = initUrl?.searchParams.get('resourcesTitle');
+  const componentsUrlTitle = initUrl?.searchParams.get('componentsTitle');
+  const steps = [{
+    label: t('blocklet.publish.branding'),
+    description: t('blocklet.publish.steps.branding')
+  }, {
+    label: t('common.introduction'),
+    description: t('blocklet.publish.steps.introduction')
+  }, {
+    label: resourcesUrlTitle || t('blocklet.publish.resourceTitle'),
+    description: t('blocklet.publish.steps.resources')
+  }, {
+    label: componentsUrlTitle || t('common.components'),
+    description: t('blocklet.publish.steps.blocklets')
+  }, {
+    label: mode === 'create' || mode === 'new-version' ? t('blocklet.publish.newVersionTitle') : t('blocklet.publish.versionTitle'),
+    description: t('blocklet.publish.steps.version')
+  }];
+  const nowStep = steps[activeStep] || steps[steps.length - 1];
+  const nowStepLabel = stepsToLabel[activeStep];
+  return /*#__PURE__*/_jsxs(Main, {
+    ...rest,
+    children: [/*#__PURE__*/_jsx(Header, {
+      blocklet: blocklet,
+      release: release,
+      getRelease: getRelease,
+      mode: mode,
+      params: params,
+      setParams: setParams,
+      setParamsErrTip: setParamsErrTip,
+      readOnly: readOnly,
+      isPublished: isPublished,
+      loading: loading,
+      setLoading: setLoading,
+      releaseId: releaseId,
+      projectId: projectId,
+      resourceComponents: resourceComponents,
+      resourceComponentsMap: resourceComponentsMap,
+      resourceRelateComponents: resourceRelateComponents,
+      resourceItem: resourceItem,
+      saveSelectedEventsRef: saveSelectedEventsRef,
+      isSelectedResources: isSelectedResources,
+      releaseUsedLast: releaseUsedLast,
+      setReleaseUsedLast: setReleaseUsedLast,
+      setRelease: setRelease
+    }), /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      flexDirection: "column",
+      sx: {
+        width: '100%'
+      },
+      children: [/*#__PURE__*/_jsx(Box, {
+        pt: 3
+      }), /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          gap: 3
+        },
+        display: "flex",
+        flexDirection: isMobile ? 'column' : 'row',
+        children: [!isMobile && /*#__PURE__*/_jsx(ReleaseStepper, {
+          steps: steps,
+          viewMode: mode === 'view',
+          params: params,
+          isSelectedResources: isSelectedResources,
+          paramsErrTip: paramsErrTip,
+          activeStep: activeStep,
+          setActiveStep: setActiveStep,
+          projectId: projectId,
+          resourcesUrlTitle: resourcesUrlTitle,
+          componentsUrlTitle: componentsUrlTitle
+        }), /*#__PURE__*/_jsxs(Box, {
+          flex: "1",
+          maxWidth: "720px",
+          children: [!isMobile && nowStepLabel !== 'introduction' && /*#__PURE__*/_jsxs(Typography, {
+            variant: "h6",
+            fontWeight: "bold",
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            children: [nowStep.label, nowStepLabel === 'branding' && /*#__PURE__*/_jsx(Tooltip, {
+              title: t('blocklet.publish.brandingHelp'),
+              placement: "right",
+              children: /*#__PURE__*/_jsx(Box, {
+                component: "a",
+                target: "_blank",
+                href: "https://www.arcblock.io/docs/blocklet-store/en/blocklet-detail-page",
+                sx: {
+                  paddingTop: 1,
+                  marginLeft: 1
+                },
+                style: {
+                  color: 'gray'
+                },
+                children: /*#__PURE__*/_jsx(QuestionMarkIcon, {})
+              })
+            })]
+          }), (isMobile || nowStepLabel === 'branding') && /*#__PURE__*/_jsx(Box, {
+            flexDirection: "column",
+            children: /*#__PURE__*/_jsx(Branding, {
+              projectId: projectId,
+              setParams: setParams,
+              setParamsErrTip: setParamsErrTip,
+              params: params,
+              componentDid: componentDid,
+              blocklet: blocklet,
+              initUrl: initUrl,
+              loading: loading,
+              setLoading: setLoading,
+              paramsErrTip: paramsErrTip,
+              readOnly: readOnly,
+              initLogoUrl: initLogoUrl,
+              setInitLogoUrl: setInitLogoUrl
+            })
+          }), isMobile && /*#__PURE__*/_jsx(Box, {
+            flexDirection: "column",
+            children: /*#__PURE__*/_jsx(Version, {
+              loading: loading,
+              params: params,
+              paramsErrTip: paramsErrTip,
+              setParams: setParams,
+              setParamsErrTip: setParamsErrTip,
+              readOnly: readOnly
+            })
+          }), (isMobile || nowStepLabel === 'introduction') && /*#__PURE__*/_jsx(Box, {
+            display: "flex",
+            flexDirection: "column",
+            sx: {
+              mt: isMobile ? 5 : 0,
+              width: '100%'
+            },
+            children: /*#__PURE__*/_jsx(Introduction, {
+              loading: loading,
+              readOnly: readOnly,
+              params: params,
+              setParams: setParams,
+              paramsErrTip: paramsErrTip,
+              setParamsErrTip: setParamsErrTip
+            })
+          }), isMobile && /*#__PURE__*/_jsx(Typography, {
+            variant: "h6",
+            fontWeight: "bold",
+            mt: 5,
+            children: steps[labelToStep.resources].label
+          }), /*#__PURE__*/_jsx(Box, {
+            display: isMobile || nowStepLabel === 'resources' ? 'flex' : 'none',
+            sx: {
+              maxWidth: 720
+            },
+            flexDirection: "column",
+            children: /*#__PURE__*/_jsx(Box, {
+              display: "flex",
+              mt: 3,
+              className: "section full-width",
+              children: /*#__PURE__*/_jsxs(Box, {
+                sx: {
+                  flex: 1
+                },
+                children: [!componentDid && /*#__PURE__*/_jsx(Tabs, {
+                  tabs: tabs,
+                  current: tab,
+                  onChange: onTabChange,
+                  sx: {
+                    ml: -2,
+                    mt: -1.5
+                  }
+                }), /*#__PURE__*/_jsx(Box, {
+                  children: /*#__PURE__*/_jsx(Resources, {
+                    loading: loading,
+                    initialResources: initialResources,
+                    saveSelectedEventsRef: saveSelectedEventsRef,
+                    selectedResourceIds: selectedResourceIds,
+                    setSelectedResourceIds: setSelectedResourceIds,
+                    setResourceComponentsMap: setResourceComponentsMap,
+                    error: paramsErrTip.blockletResource,
+                    app: blocklet,
+                    readOnly: readOnly,
+                    component: resourceItem,
+                    componentDid: componentDid,
+                    initUrl: initUrl,
+                    projectId: projectId === UNOWNED_DID ? '' : projectId,
+                    releaseUsedLast: releaseUsedLast,
+                    release: {
+                      ...release,
+                      id: releaseId
+                    }
+                  })
+                })]
+              })
+            })
+          }), isMobile && /*#__PURE__*/_jsx(Typography, {
+            variant: "h6",
+            fontWeight: "bold",
+            mt: 5,
+            children: steps[labelToStep.blocklets].label
+          }), (isMobile || nowStepLabel === 'blocklets') && /*#__PURE__*/_jsx(Box, {
+            flexDirection: "column",
+            children: /*#__PURE__*/_jsx(Box, {
+              display: "flex",
+              mt: 3,
+              className: "section full-width",
+              children: /*#__PURE__*/_jsx(Box, {
+                sx: {
+                  flex: 1
+                },
+                children: /*#__PURE__*/_jsx(Blocklets, {
+                  projectType: projectType,
+                  disabled: loading || readOnly,
+                  app: blocklet,
+                  value: params?.blockletComponents || [],
+                  onChange: handleChangeSelectedComponents,
+                  resourceRelateComponents: resourceRelateComponents,
+                  dependentComponentsMode: dependentComponentsMode
+                })
+              })
+            })
+          }), !isMobile && nowStepLabel === 'version' && /*#__PURE__*/_jsx(Box, {
+            flexDirection: "column",
+            children: /*#__PURE__*/_jsx(Version, {
+              loading: loading,
+              params: params,
+              paramsErrTip: paramsErrTip,
+              setParams: setParams,
+              setParamsErrTip: setParamsErrTip,
+              readOnly: readOnly
+            })
+          })]
+        })]
+      })]
+    })]
+  });
+}
+CreateRelease.propTypes = {
+  initUrl: PropTypes.object
+};
+CreateRelease.defaultProps = {
+  initUrl: null
+};
+const Main = styled.div`
+  .section {
+    &.full-width {
+      max-width: 100%;
+    }
+    .MuiTypography-h3 {
+      font-size: 1.1rem;
+      font-weight: 700;
+    }
+    .left {
+      flex-shrink: 0;
+      width: 140px;
+    }
+    .MuiTabs-indicator {
+      display: none;
+    }
+    .MuiTypography-subtitle1 {
+      width: 120px;
+      font-weight: 700;
+      font-size: 1rem;
+      ${({
+  theme
+}) => theme.breakpoints.down('sm')} {
+        width: 80px;
+      }
+    }
+  }
+  .MuiButtonBase-root {
+    a {
+      color: inherit;
+    }
+  }
+  .MuiInputBase-multiline .MuiInputAdornment-positionEnd {
+    align-self: flex-end;
+    .MuiTypography-root {
+      font-size: 0.8rem;
+    }
+    font-size: 0.8rem;
+  }
+`;

package/lib/blocklet/publish/create-release/introduction-preview.js

@@ -0,0 +1,28 @@
+import MarkdownPreview from '@uiw/react-markdown-preview';
+import PropTypes from 'prop-types';
+import rehypeExternalLinks from 'rehype-external-links';
+import { EmptyIcon } from '@arcblock/icons';
+import StopBox from './stop-box';
+import { jsx as _jsx } from "react/jsx-runtime";
+function IntroductionPreview({
+  text
+}) {
+  if (!text) {
+    return /*#__PURE__*/_jsx(StopBox, {
+      Icon: EmptyIcon
+    });
+  }
+  return /*#__PURE__*/_jsx(MarkdownPreview, {
+    wrapperElement: {
+      'data-color-mode': 'light'
+    },
+    source: text,
+    rehypePlugins: [[rehypeExternalLinks, {
+      target: '_blank'
+    }]]
+  });
+}
+IntroductionPreview.propTypes = {
+  text: PropTypes.string.isRequired
+};
+export default IntroductionPreview;