@abtnode/ux 1.16.16 → 1.16.17-beta-7ec31a60

package/es/blocklet/publish/create-release.js

@@ -0,0 +1,643 @@
+import { useState, useEffect, lazy, useRef } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import styled from '@emotion/styled';
+import useSetState from 'react-use/lib/useSetState';
+import pick from 'lodash/pick';
+import joinUrl from 'url-join';
+import semver from 'semver';
+import Avatar from '@mui/material/Avatar';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import Toast from '@arcblock/ux/lib/Toast';
+import Tabs from '@arcblock/ux/lib/Tabs';
+import Empty from '@arcblock/ux/lib/Empty';
+import { PROJECT } from '@blocklet/constant';
+import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
+import BlockletBundleAvatar from '../bundle-avatar';
+import { useNodeContext } from '../../contexts/node';
+import { useBlockletContext } from '../../contexts/blocklet';
+import EmptySpinner from '../../empty-spinner';
+import Resource from './resource';
+
+// eslint-disable-next-line import/no-unresolved
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const UploaderComponent = /*#__PURE__*/lazy(() => import('@blocklet/uploader/react').then(res => ({
+  default: res.Uploader
+})));
+const addComponentTabs = ({
+  tabs,
+  blocklet,
+  ancestors = []
+}) => {
+  const key = blocklet.meta.did;
+  tabs.push({
+    label: /*#__PURE__*/_jsxs(Box, {
+      ml: -4,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      children: [/*#__PURE__*/_jsx(BlockletBundleAvatar, {
+        size: 24,
+        blocklet: blocklet,
+        ancestors: ancestors
+      }), /*#__PURE__*/_jsx(Box, {
+        ml: "16px",
+        className: "text",
+        children: /*#__PURE__*/_jsx(Box, {
+          children: blocklet.meta.title
+        })
+      })]
+    }, key),
+    value: key
+  });
+};
+const pickParams = release => pick(release, ['blockletVersion', 'blockletTitle', 'blockletDescription', 'blockletLogo', 'blockletIntroduction', 'blockletScreenshots', 'note']);
+export default function CreateRelease({
+  ...rest
+}) {
+  const navigate = useNavigate();
+  const {
+    projectId,
+    releaseId: inputReleaseId
+  } = useParams();
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    blocklet
+  } = useBlockletContext();
+  const [params, setParams] = useSetState(null);
+  const [loading, setLoading] = useState(false);
+  const [release, setRelease] = useState(null);
+  const {
+    api
+  } = useNodeContext();
+  const uploaderLogoRef = useRef(null);
+  const uploaderScreenshotRef = useRef(null);
+  const releaseId = inputReleaseId === 'create' ? '' : inputReleaseId;
+  const mode = inputReleaseId === 'create' ? 'create' : 'edit';
+  const tabs = [];
+  const resourceComponents = (blocklet?.children || []).filter(x => x.meta.capabilities.resourceExportPage);
+  resourceComponents.forEach(item => {
+    addComponentTabs({
+      tabs,
+      blocklet: item,
+      t,
+      ancestors: [blocklet]
+    });
+  });
+  const [tab, setTab] = useState(tabs[0]?.value);
+  const isPublished = release?.status === 'published';
+  const readOnly = isPublished;
+  const getProject = () => {
+    api.getProject({
+      input: {
+        did: blocklet.meta.did,
+        projectId
+      }
+    }).then(res => {
+      setLoading(false);
+      const data = res.project || {};
+      if (!data.blockletVersion) {
+        data.blockletVersion = '1.0.0';
+      } else if (semver.valid(data.blockletVersion)) {
+        data.blockletVersion = semver.inc(data.blockletVersion, 'patch');
+      }
+      setParams(pickParams(data));
+    }).catch(err => {
+      setLoading(false);
+      Toast.error(err.message);
+    });
+  };
+  const getRelease = () => {
+    api.getRelease({
+      input: {
+        did: blocklet.meta.did,
+        projectId,
+        releaseId
+      }
+    }).then(res => {
+      setLoading(false);
+      setParams(pickParams(res?.release));
+      setRelease(res?.release);
+    }).catch(err => {
+      setLoading(false);
+      Toast.error(err.message);
+    });
+  };
+  const getData = () => {
+    if (mode === 'edit') {
+      if (!releaseId) {
+        Toast.error('Empty release id');
+        return;
+      }
+      getRelease();
+    }
+    if (mode === 'create') {
+      getProject();
+    }
+  };
+  useEffect(() => {
+    getData();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onRelease = status => {
+    if (!params.blockletTitle) {
+      Toast.error(t('blocklet.publish.errorTip.noTitle'));
+      return;
+    }
+    if (!params.blockletVersion) {
+      Toast.error(t('blocklet.publish.errorTip.noVersion'));
+      return;
+    }
+    if (status === PROJECT.RELEASE_STATUS.published) {
+      if (!params.blockletDescription) {
+        Toast.error(t('blocklet.publish.errorTip.noDescription'));
+        return;
+      }
+      if (!params.note) {
+        Toast.error(t('blocklet.publish.errorTip.noNote'));
+        return;
+      }
+    }
+    const _params = {
+      ...params
+    };
+    _params.blockletVersion = semver.valid(_params.blockletVersion);
+    if (!_params.blockletVersion) {
+      Toast.error('Invalid Blocklet Version');
+      return;
+    }
+    _params.blockletTitle = (_params.blockletTitle || '').trim();
+    _params.blockletDescription = (_params.blockletDescription || '').trim();
+    _params.blockletIntroduction = (_params.blockletIntroduction || '').trim();
+    _params.note = (_params.note || '').trim();
+    api.createRelease({
+      input: {
+        ..._params,
+        did: blocklet.meta.did,
+        projectId,
+        releaseId,
+        status
+      }
+    }).then(() => {
+      if (status === 'draft') {
+        Toast.success('Save draft success');
+        if (mode === 'create') {
+          navigate(`../${projectId}`, {
+            replace: true
+          });
+        }
+      } else {
+        Toast.success('Create Release success');
+        navigate(`../${projectId}`, {
+          replace: true
+        });
+      }
+    }).catch(err => {
+      Toast.error(err.message);
+    });
+  };
+  if (!params && loading) {
+    return /*#__PURE__*/_jsx(EmptySpinner, {});
+  }
+  if (!params) {
+    return null;
+  }
+  const uploadLogoPrefix = `${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${projectId}/logo/upload`;
+  const uploadScreenshotPrefix = `${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${projectId}/screenshot/upload`;
+  const logoUrl = params?.blockletLogo ? `${uploadLogoPrefix}/${params.blockletLogo}` : `${WELLKNOWN_SERVICE_PATH_PREFIX}/static/images/logo.png`;
+  const screenshotUrls = (params?.blockletScreenshots || []).filter(Boolean).map(x => `${uploadScreenshotPrefix}/${x}`);
+  const item = resourceComponents.find(x => x.meta.did === tab);
+  const resourceContent = item ? /*#__PURE__*/_jsx(Box, {
+    children: /*#__PURE__*/_jsx(Resource, {
+      app: blocklet,
+      component: item,
+      projectId: projectId,
+      release: {
+        ...release,
+        id: releaseId
+      }
+    })
+  }) : /*#__PURE__*/_jsx(Box, {
+    display: "flex",
+    mt: -3,
+    children: /*#__PURE__*/_jsx(Empty, {
+      children: t('common.empty')
+    })
+  });
+  const onTabChange = x => {
+    setTab(x);
+  };
+  return /*#__PURE__*/_jsxs(Main, {
+    ...rest,
+    children: [/*#__PURE__*/_jsxs(Box, {
+      className: "sticky-header",
+      children: [/*#__PURE__*/_jsxs(Breadcrumbs, {
+        className: "breadcrumbs",
+        "aria-label": "breadcrumb",
+        children: [/*#__PURE__*/_jsx(Link, {
+          to: "../",
+          children: t('common.publish')
+        }), /*#__PURE__*/_jsx(Link, {
+          to: `../${projectId}`,
+          children: params?.blockletTitle || 'Blocklet'
+        }), /*#__PURE__*/_jsx(Typography, {
+          color: "text.primary",
+          children: mode === 'create' ? t('common.create') : params?.blockletVersion || t('common.edit')
+        })]
+      }), /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        children: [!isPublished && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Button, {
+            variant: "outlined",
+            disabled: loading,
+            onClick: () => onRelease(PROJECT.RELEASE_STATUS.draft),
+            style: {
+              marginRight: 12
+            },
+            children: t('blocklet.publish.saveDraft')
+          }), /*#__PURE__*/_jsx(Button, {
+            variant: "contained",
+            disabled: loading,
+            onClick: () => onRelease(PROJECT.RELEASE_STATUS.published),
+            children: t('common.release')
+          })]
+        }), isPublished && /*#__PURE__*/_jsx(Button, {
+          variant: "contained",
+          children: /*#__PURE__*/_jsx("a", {
+            href: joinUrl(`${WELLKNOWN_SERVICE_PATH_PREFIX}/api/project/${blocklet.meta.did}/${projectId}/${releaseId}/download/${(release.files || [])[0]}`),
+            children: t('common.download')
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(Box, {
+      pt: 3,
+      children: [/*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        className: "section",
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "h3",
+          className: "left",
+          children: t('blocklet.publish.productTitle')
+        }), /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            flex: 1
+          },
+          children: [/*#__PURE__*/_jsx(TextField, {
+            label: `Blocklet ${t('common.title')}`,
+            placeholder: `Blocklet ${t('common.title')}`,
+            inputProps: {
+              'data-cy': 'blocklet-title',
+              readOnly
+            },
+            autoComplete: "off",
+            variant: "outlined",
+            fullWidth: true,
+            value: params.blockletTitle || '',
+            onChange: e => {
+              setParams({
+                blockletTitle: e.target.value
+              });
+            }
+          }), /*#__PURE__*/_jsx(TextField, {
+            label: `Blocklet ${t('common.description')}`,
+            placeholder: `Blocklet ${t('common.description')}`,
+            inputProps: {
+              'data-cy': 'blocklet-description',
+              readOnly
+            },
+            autoComplete: "off",
+            variant: "outlined",
+            fullWidth: true,
+            value: params.blockletDescription || '',
+            onChange: e => {
+              setParams({
+                blockletDescription: e.target.value
+              });
+            },
+            sx: {
+              mt: 3
+            }
+          }), /*#__PURE__*/_jsx(TextField, {
+            label: `Blocklet ${t('common.introduction')}`,
+            placeholder: `Blocklet ${t('common.introduction')}`,
+            inputProps: {
+              'data-cy': 'export-blocklet-introduction',
+              readOnly
+            },
+            autoComplete: "off",
+            variant: "outlined",
+            fullWidth: true,
+            multiline: true,
+            rows: 4,
+            value: params.blockletIntroduction || '',
+            onChange: e => {
+              setParams({
+                blockletIntroduction: e.target.value
+              });
+            },
+            sx: {
+              mt: 3
+            }
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        mt: 3,
+        className: "section",
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "h3",
+          className: "left",
+          children: t('blocklet.publish.versionTitle')
+        }), /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            flex: 1
+          },
+          children: [/*#__PURE__*/_jsx(TextField, {
+            label: `Blocklet ${t('common.version')}`,
+            placeholder: `Blocklet ${t('common.version')}`,
+            inputProps: {
+              'data-cy': 'blocklet-version',
+              readOnly
+            },
+            autoComplete: "off",
+            variant: "outlined",
+            fullWidth: true,
+            value: params.blockletVersion,
+            onChange: e => {
+              setParams({
+                blockletVersion: e.target.value
+              });
+            }
+          }), /*#__PURE__*/_jsx(TextField, {
+            label: t('blocklet.publish.releaseNote'),
+            autoComplete: "off",
+            variant: "outlined",
+            inputProps: {
+              'data-cy': 'release-note',
+              readOnly
+            },
+            fullWidth: true,
+            multiline: true,
+            rows: 4,
+            value: params.note,
+            onChange: e => {
+              setParams({
+                note: e.target.value
+              });
+            },
+            sx: {
+              mt: 3
+            }
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        mt: 3,
+        className: "section full-width",
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "h3",
+          className: "left",
+          children: t('blocklet.publish.imgTitle')
+        }), /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            flex: 1
+          },
+          children: [/*#__PURE__*/_jsxs(Box, {
+            display: "flex",
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "subtitle1",
+              sx: {
+                mr: 2
+              },
+              children: t('common.logo')
+            }), /*#__PURE__*/_jsx(Box, {
+              sx: {
+                flex: 1,
+                cursor: readOnly ? 'default' : 'pointer'
+              },
+              children: /*#__PURE__*/_jsx(Avatar, {
+                variant: "square",
+                sx: {
+                  width: 80,
+                  height: 80
+                },
+                alt: "Blocklet Logo",
+                src: logoUrl,
+                onClick: () => !readOnly && uploaderLogoRef.current.open()
+              })
+            })]
+          }), /*#__PURE__*/_jsxs(Box, {
+            display: "flex",
+            mt: 3,
+            children: [/*#__PURE__*/_jsx(Typography, {
+              variant: "subtitle1",
+              sx: {
+                mr: 2
+              },
+              children: t('common.screenshot')
+            }), /*#__PURE__*/_jsxs(Box, {
+              display: "flex",
+              alignItems: "center",
+              sx: {
+                flex: 1,
+                flexWrap: 'wrap'
+              },
+              children: [screenshotUrls.map((x, index) => /*#__PURE__*/_jsxs(Box, {
+                className: "screenshot",
+                children: [/*#__PURE__*/_jsx("img", {
+                  alt: "screenshot",
+                  src: x
+                }), !readOnly && /*#__PURE__*/_jsx(IconButton, {
+                  className: "action",
+                  onClick: () => {
+                    const arr = [...params.blockletScreenshots];
+                    arr.splice(index, 1);
+                    setParams({
+                      blockletScreenshots: arr
+                    });
+                  },
+                  children: /*#__PURE__*/_jsx(DeleteOutlineIcon, {})
+                })]
+              })), screenshotUrls.length < 5 && /*#__PURE__*/_jsx(Box, {
+                sx: {
+                  width: 200,
+                  height: 140,
+                  background: '#eee',
+                  cursor: readOnly ? 'default' : 'pointer',
+                  color: '#999',
+                  mb: 2
+                },
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                fontSize: 40,
+                onClick: () => !readOnly && uploaderScreenshotRef.current.open(),
+                children: "+"
+              })]
+            })]
+          })]
+        }), /*#__PURE__*/_jsx(UploaderComponent, {
+          id: "\u200Buploader-logo",
+          ref: uploaderLogoRef,
+          popup: true,
+          onUploadFinish: result => {
+            setParams({
+              blockletLogo: result.data.filename
+            });
+          },
+          plugins: ['ImageEditor', 'Url', 'Webcam'],
+          apiPathProps: {
+            uploader: uploadLogoPrefix,
+            disableMediaKitPrefix: true
+          }
+        }, "uploader-screenshot"), /*#__PURE__*/_jsx(UploaderComponent, {
+          id: "\u200Buploader-screenshot",
+          ref: uploaderScreenshotRef,
+          popup: true,
+          onUploadFinish: result => {
+            const blockletScreenshots = params.blockletScreenshots || [];
+            blockletScreenshots.push(result.data?.filename);
+            setParams({
+              blockletScreenshots
+            });
+          },
+          plugins: ['ImageEditor', 'Url', 'Webcam'],
+          apiPathProps: {
+            uploader: uploadScreenshotPrefix,
+            disableMediaKitPrefix: true
+          }
+        }, "uploader-screenshot")]
+      }), /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        mt: 3,
+        className: "section full-width",
+        children: [/*#__PURE__*/_jsxs(Box, {
+          className: "left",
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "h3",
+            children: t('blocklet.publish.resourceTitle')
+          }), /*#__PURE__*/_jsx(Tabs, {
+            tabs: tabs,
+            current: tab,
+            orientation: "vertical",
+            onChange: onTabChange,
+            sx: {
+              width: '100%'
+            }
+          })]
+        }), /*#__PURE__*/_jsx(Box, {
+          sx: {
+            flex: 1
+          },
+          children: /*#__PURE__*/_jsx(Box, {
+            children: resourceContent
+          })
+        })]
+      })]
+    })]
+  });
+}
+CreateRelease.propTypes = {};
+CreateRelease.defaultProps = {};
+const Main = styled.div`
+  .sticky-header {
+    margin-top: -12px;
+    padding: 12px 0;
+    position: sticky;
+    top: 0;
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #fff;
+    padding-bottom: 12px;
+    border-bottom: ${({
+  theme
+}) => `1px solid ${theme.palette.divider}`};
+  }
+  .screenshot {
+    margin-bottom: 16px;
+    max-width: 200px;
+    max-height: 140px;
+    width: 200px;
+    height: 140px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #eee;
+    margin-right: 16px;
+    position: relative;
+    .action {
+      visibility: hidden;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      background-color: rgba(0, 0, 0, 0.2);
+      color: rgba(255, 255, 255, 0.8);
+    }
+    &:hover .action {
+      visibility: visible;
+    }
+  }
+  .screenshot img {
+    width: 100%; /* 图像宽度填充容器 */
+    height: auto; /* 图像高度自适应 */
+  }
+  .section {
+    max-width: 800px;
+    &.full-width {
+      max-width: 100%;
+    }
+    .MuiTypography-h3 {
+      font-size: 1.1rem;
+      font-weight: 700;
+    }
+    .left {
+      flex-shrink: 0;
+      width: 140px;
+    }
+    .MuiTabs-root {
+      margin-top: 8px;
+      transform: translateX(-16px);
+      .MuiButtonBase-root .text {
+        color: ${({
+  theme
+}) => theme.palette.text.primary};
+      }
+      .MuiButtonBase-root.Mui-selected .text {
+        color: ${({
+  theme
+}) => theme.palette.primary.main};
+      }
+    }
+    .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;
+    }
+  }
+`;

package/es/blocklet/publish/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Routes, Route } from 'react-router-dom';
+import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+import ProjectList from './project-list';
+import CreateProject from './create-project';
+import ReleasesList from './release-list';
+import CreateRelease from './create-release';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function BlockletPublish() {
+  return /*#__PURE__*/_jsx(Main, {
+    children: /*#__PURE__*/_jsxs(Routes, {
+      children: [/*#__PURE__*/_jsx(Route, {
+        path: "/",
+        element: /*#__PURE__*/_jsx(ProjectList, {})
+      }), /*#__PURE__*/_jsx(Route, {
+        path: "/create",
+        element: /*#__PURE__*/_jsx(CreateProject, {})
+      }), /*#__PURE__*/_jsx(Route, {
+        path: "/:projectId",
+        element: /*#__PURE__*/_jsx(ReleasesList, {})
+      }), /*#__PURE__*/_jsx(Route, {
+        path: "/:projectId/:releaseId",
+        element: /*#__PURE__*/_jsx(CreateRelease, {})
+      })]
+    })
+  });
+}
+BlockletPublish.propTypes = {};
+const Main = styled(Box)`
+  a {
+    color: ${({
+  theme
+}) => theme.palette.primary.main};
+  }
+`;