@blocklet/did-space-react 0.5.57

package/.turbo/turbo-build.log

@@ -0,0 +1,50 @@
+
+> @blocklet/did-space-react@0.5.53 build /home/runner/work/did-spaces/did-spaces/packages/react
+> unbuild && node tools/auto-exports.js && npm run cpfiles && node tools/build-types.js
+
+[info] Building did-space-react
+[info] Cleaning dist directory: `./lib`
+[success] Build succeeded for did-space-react
+[log]   dist/index.js (total size: 1.35 kB, chunk size: 1.35 kB, exports: ConnectTo, PreviewNFT, SpaceCard, SpaceStatus, api, classNames, extraDIDSpacesCoreUrl, getDIDSpaceDidFromEndpoint, getDIDSpaceUrlFromEndpoint, getSpaceDidFromEndpoint, getSpaceDidFromGatewayUrl, getSpaceGatewayUrlFromEndpoint, getSpaceNftDisplayUrlFromEndpoint, translations, useLocale, useMobile, useSpaceInfo)
+  └─ dist/libs/api.js
+  └─ dist/hooks/use-mobile.js
+  └─ dist/hooks/use-space-info.js
+  └─ dist/hooks/use-locale.js
+  └─ dist/components/SpaceCard/index.js
+  └─ dist/components/PreviewNFT/index.js
+  └─ dist/components/ConnectTo/index.js
+  └─ dist/libs/util.js
+  └─ dist/locales/index.js
+  └─ dist/types/index.js
+
+Σ Total dist size (byte size): 1.35 kB
+[warn] Build is done with some warnings:
+[log]
+[info] Building did-space-react
+
+[info] Cleaning dist directory: `./es`
+- Potential missing package.json files: es/index.js, es/hooks, es/components/ConnectTo/index.js, es/components/PreviewNFT/index.js, es/components/SpaceCard/index.js, es/icons/index.js, lib/icons/index.js, es/locales/index.js, es/types/index.js
+[success] Build succeeded for did-space-react
+[log]   dist/index.js (total size: 801 B, chunk size: 801 B, exports: ConnectTo, PreviewNFT, SpaceCard, SpaceStatus, api, classNames, extraDIDSpacesCoreUrl, getDIDSpaceDidFromEndpoint, getDIDSpaceUrlFromEndpoint, getSpaceDidFromEndpoint, getSpaceDidFromGatewayUrl, getSpaceGatewayUrlFromEndpoint, getSpaceNftDisplayUrlFromEndpoint, translations, useLocale, useMobile, useSpaceInfo)
+  └─ dist/libs/api.js
+  └─ dist/hooks/use-mobile.js
+  └─ dist/hooks/use-space-info.js
+  └─ dist/hooks/use-locale.js
+  └─ dist/components/SpaceCard/index.js
+  └─ dist/components/PreviewNFT/index.js
+  └─ dist/components/ConnectTo/index.js
+  └─ dist/libs/util.js
+  └─ dist/locales/index.js
+  └─ dist/types/index.js
+
+Σ Total dist size (byte size): 801 B
+[log]
+[warn] Build is done with some warnings:
+
+- Potential missing package.json files: es/icons/index.js, lib/icons/index.js
+
+> @blocklet/did-space-react@0.5.53 cpfiles
+> copyfiles -u 1 './src/**/*.css' lib/ && copyfiles -u 1 './src/**/*.css' es/
+
+tsc --declaration --emitDeclarationOnly --outDir lib --rootDir /home/runner/work/did-spaces/did-spaces/packages/react/src
+tsc --declaration --emitDeclarationOnly --outDir es --rootDir /home/runner/work/did-spaces/did-spaces/packages/react/src

package/.turbo/turbo-lint$colon$fix.log

@@ -0,0 +1,8 @@
+
+> @blocklet/did-space-react@0.5.57 lint:fix /home/runner/work/did-spaces/did-spaces/packages/react
+> npm run lint -- --fix
+
+
+> @blocklet/did-space-react@0.5.57 lint
+> tsc --noEmit && eslint src tests --ext js --ext jsx --ext ts --ext tsx --fix
+

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2018-2024 ArcBlock
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,52 @@
+# DID Space Components
+
+## SpaceCard
+
+```tsx
+const endpoint = "https://${spaceDomain}/app/api/space/${spaceDid}/app/${appDid}/object/"
+
+// Basic Use
+<SpaceCard endpoint={endpoint} />
+
+// With Action
+<SpaceCard endpoint={endpoint} action={
+  <IconButton
+    size="small"
+    LinkComponent={Link}
+    href={getSpaceHomeUrl(spaceGateway.endpoint)}
+    target="_blank">
+    <OpenInNewIcon />
+  </IconButton>
+}/>
+
+// With Render Action
+<SpaceCard
+  sx={{ marginTop: '12px', '&.selected': { borderColor: 'primary.main' } }}
+  key={x.endpoint}
+  endpoint={x.endpoint}
+  selected={x.endpoint === backupEndpoint}
+  action={({ spaceGateway, selected, compat, refresh }) => (
+    <MoreAction
+      spaceGateway={x}
+      onConnected={() => refresh()}
+      onBackedUp={() => refresh()}
+    />
+  )}
+/>
+```
+
+## ConnectTo
+
+```tsx
+// trigger when click 'Connect with DID Wallet'
+const onWalletConnect = () => {
+  // ...rest
+};
+
+// trigger when use 'Connect using the DID Spaces gateway'
+const onGatewayConnect = ({ spaceDid, spaceGatewayUrl }: { spaceDid: string; spaceGatewayUrl: string }) => {
+  // ...rest
+};
+
+<ConnectTo onWalletConnect={onWalletConnect} onGatewayConnect={onGatewayConnect} />;
+```

package/build.config.ts

@@ -0,0 +1,47 @@
+import { defineBuildConfig } from 'unbuild';
+import svgr from '@svgr/rollup';
+import type { BuildConfig } from 'unbuild';
+
+const createConfig = (format: 'cjs' | 'esm'): BuildConfig => ({
+  failOnWarn: false,
+  entries: [
+    {
+      builder: 'rollup',
+      input: './src/index',
+      outDir: format === 'cjs' ? './lib' : './es',
+    },
+  ],
+  clean: true,
+  externals: ['@abtnode/client'],
+  rollup: {
+    esbuild: {
+      jsx: 'automatic',
+    },
+    output: {
+      dir: format === 'cjs' ? './lib' : './es',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+      entryFileNames: '[name].js',
+      format,
+    },
+  },
+  hooks: {
+    'rollup:options'(_ctx, options) {
+      // @ts-ignore
+      options.plugins.push(
+        svgr({
+          svgoConfig: {
+            plugins: [
+              {
+                name: 'removeViewBox',
+                active: false,
+              },
+            ],
+          },
+        })
+      );
+    },
+  },
+});
+
+export default defineBuildConfig([createConfig('cjs'), createConfig('esm')]);

package/es/components/ConnectTo/connect-to.stories.d.ts

@@ -0,0 +1,10 @@
+import Basic from './stories/basic';
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default _default;
+export { Basic };

package/es/components/ConnectTo/index.d.ts

@@ -0,0 +1,10 @@
+import { SplitButtonProps } from '@arcblock/ux/lib/SplitButton';
+export interface ConnectToProps extends Omit<SplitButtonProps, 'menu' | 'onClick'> {
+    onWalletConnect?: () => void;
+    onGatewayConnect?: (params: {
+        spaceDid: string;
+        spaceGatewayUrl: string;
+    }) => void;
+}
+declare function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }: ConnectToProps): import("react/jsx-runtime").JSX.Element;
+export default ConnectTo;

package/es/components/ConnectTo/index.js

@@ -0,0 +1,138 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { isValid } from '@arcblock/did';
+import { Typography, CircularProgress, DialogContentText, TextField } from '@mui/material';
+import Button from '@arcblock/ux/lib/Button';
+import SplitButton from '@arcblock/ux/lib/SplitButton';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { extraDIDSpacesCoreUrl, getSpaceDidFromGatewayUrl } from '../../libs/util.js';
+import { getSpaceGatewayUrl, isValidSpaceGatewayUrl } from '../../libs/gateway.js';
+import useLocale from '../../hooks/use-locale.js';
+
+function ConnectTo({ style, onWalletConnect, onGatewayConnect, ...rest }) {
+  const { t } = useLocale();
+  const [url, setUrl] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+  const handleUseSpaceGatewayConnect = async () => {
+    try {
+      setLoading(true);
+      const spaceGatewayUrl = await getSpaceGatewayUrl(url);
+      const didSpacesCoreUrl = extraDIDSpacesCoreUrl(spaceGatewayUrl);
+      const spaceDid = getSpaceDidFromGatewayUrl(url);
+      if (!isValid(spaceDid) || !await isValidSpaceGatewayUrl(didSpacesCoreUrl)) {
+        throw new Error(t("storage.spaces.gateway.add.invalidUrl"));
+      }
+      onGatewayConnect?.({
+        spaceDid,
+        spaceGatewayUrl: didSpacesCoreUrl
+      });
+      setOpen(false);
+    } catch (err) {
+      console.error(err);
+      setErrorMessage(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const openGatewayInput = () => {
+    setErrorMessage("");
+    setUrl("");
+    setOpen(true);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SplitButton,
+      {
+        menu: [
+          // @ts-expect-error
+          /* @__PURE__ */ jsx(
+            SplitButton.Item,
+            {
+              sx: {
+                textTransform: "none"
+              },
+              onClick: openGatewayInput,
+              size: "small",
+              ...rest,
+              children: t("storage.spaces.connect.useSpaceGateway")
+            },
+            "1"
+          )
+        ],
+        onClick: onWalletConnect,
+        color: "primary",
+        style: { textTransform: "none !important", fontSize: "1rem", ...style },
+        size: "small",
+        ...rest,
+        children: /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: "bold", textTransform: "none" }, children: t("storage.spaces.connect.useWallet") })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        title: t("storage.spaces.gateway.add.title"),
+        fullWidth: true,
+        maxWidth: "md",
+        open,
+        onClose: () => setOpen(false),
+        PaperProps: { style: { minHeight: "auto" } },
+        actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outlined",
+              onClick: (e) => {
+                e.stopPropagation();
+                setOpen(false);
+              },
+              color: "inherit",
+              children: t("common.cancel")
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              onClick: handleUseSpaceGatewayConnect,
+              color: "primary",
+              disabled: loading || !url,
+              variant: "contained",
+              autoFocus: true,
+              children: [
+                loading && /* @__PURE__ */ jsx(CircularProgress, { size: 16 }),
+                t("common.confirm")
+              ]
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsx("div", { style: { paddingTop: 12, overflowY: "hidden" }, children: /* @__PURE__ */ jsx(DialogContentText, { component: "div", children: /* @__PURE__ */ jsx(Typography, { component: "div", children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: t("storage.spaces.gateway.add.label"),
+            autoComplete: "off",
+            variant: "outlined",
+            name: "url",
+            fullWidth: true,
+            value: url,
+            onChange: (e) => {
+              setErrorMessage("");
+              setUrl(e.target.value);
+            },
+            disabled: loading,
+            error: Boolean(errorMessage),
+            helperText: errorMessage,
+            onKeyDown: async (e) => {
+              if (e.key === "Enter") {
+                await handleUseSpaceGatewayConnect();
+              }
+            },
+            autoFocus: true
+          }
+        ) }) }) })
+      }
+    )
+  ] });
+}
+
+export { ConnectTo as default };

package/es/components/PreviewNFT/index.d.ts

@@ -0,0 +1,6 @@
+declare function PreviewSpaceNft({ src, width, height }: {
+    src: string;
+    width?: string;
+    height?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export default PreviewSpaceNft;

package/es/components/PreviewNFT/index.js

@@ -0,0 +1,79 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Dialog, DialogContent, IconButton } from '@mui/material';
+import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
+import SvgEmptySpaceNft from '../../icons/empty-space-nft.svg.js';
+
+function PreviewSpaceNft({ src, width = "58px", height = "58px" }) {
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, onClick: handleOpen, children: [
+      /* @__PURE__ */ jsx("object", { data: src, width, height, children: /* @__PURE__ */ jsx(SvgEmptySpaceNft, { viewBox: "0 0 228 258", style: { cursor: "pointer", width: "64px", height: "64px" } }) }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            zIndex: "1",
+            cursor: "pointer"
+          },
+          onClick: handleOpen
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open,
+        onClose: handleClose,
+        "aria-labelledby": "preview-space-nft-display",
+        "aria-describedby": "preview space nft display",
+        fullWidth: true,
+        maxWidth: "md",
+        children: /* @__PURE__ */ jsxs(DialogContent, { style: { padding: "8px 8px", backgroundColor: "rgba(0,0,0,0.8)" }, children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              color: "inherit",
+              onClick: handleClose,
+              "aria-label": "close",
+              style: { position: "absolute", top: 8, right: 8, color: "white" },
+              children: /* @__PURE__ */ jsx(CloseOutlinedIcon, {})
+            }
+          ),
+          "(",
+          /* @__PURE__ */ jsx(
+            "object",
+            {
+              data: src,
+              style: {
+                width: "100%",
+                height: "75vh",
+                objectFit: "contain"
+              },
+              children: /* @__PURE__ */ jsx(
+                SvgEmptySpaceNft,
+                {
+                  viewBox: "0 0 228 258",
+                  style: {
+                    width: "100%",
+                    height: "75vh"
+                  }
+                }
+              )
+            }
+          ),
+          ")"
+        ] })
+      }
+    )
+  ] });
+}
+
+export { PreviewSpaceNft as default };

package/es/components/SpaceCard/index.d.ts

@@ -0,0 +1,18 @@
+import { BoxProps } from '@mui/material';
+import { SpaceGateway, SpaceStatus } from '../../types';
+export type Action = React.ReactNode | ((props: {
+    spaceGateway: SpaceGateway;
+    spaceStatus: SpaceStatus;
+    selected: boolean;
+    compat: boolean;
+    refresh: () => void;
+}) => React.ReactNode);
+export interface SpaceCardProps extends BoxProps {
+    endpoint: string;
+    selected?: boolean;
+    compat?: boolean;
+    action?: Action;
+    deps?: any[];
+}
+declare function SpaceCard({ endpoint, selected, compat, action, className, deps, ...rest }: SpaceCardProps): import("react/jsx-runtime").JSX.Element;
+export default SpaceCard;

package/es/components/SpaceCard/index.js

@@ -0,0 +1,198 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import isUndefined from 'lodash/isUndefined';
+import { withQuery, joinURL } from 'ufo';
+import { Box, Stack, Link } from '@mui/material';
+import DidAddress from '@arcblock/ux/lib/DID';
+import { styled } from '@arcblock/ux/lib/Theme';
+import { useState, useRef, useEffect } from 'react';
+import useMobile from '../../hooks/use-mobile.js';
+import useSpaceInfo from '../../hooks/use-space-info.js';
+import useLocale from '../../hooks/use-locale.js';
+import { getDIDSpaceDidFromEndpoint, getDIDSpaceUrlFromEndpoint, getSpaceGatewayUrlFromEndpoint, classNames, getSpaceNftDisplayUrlFromEndpoint } from '../../libs/util.js';
+import { SpaceStatus } from '../../types/index.js';
+import SvgSpaceConnected from '../../icons/space-connected.svg.js';
+import SvgSpaceDisconnect from '../../icons/space-disconnect.svg.js';
+import SvgSpaceConnectError from '../../icons/space-connect-error.svg.js';
+import PreviewSpaceNft from '../PreviewNFT/index.js';
+
+function Status({
+  spaceUrl,
+  status,
+  refresh,
+  sx,
+  ...rest
+}) {
+  const { t } = useLocale();
+  const iconStyle = { marginLeft: "8px", marginRight: "4px" };
+  let icon = null;
+  let text = null;
+  if (status === SpaceStatus.CONNECTED) {
+    icon = /* @__PURE__ */ jsx(SvgSpaceConnected, { style: iconStyle });
+    text = /* @__PURE__ */ jsx("span", { style: { color: "#047857" }, children: t("storage.spaces.connected.tag") });
+  }
+  if (status === SpaceStatus.DISCONNECTED) {
+    icon = /* @__PURE__ */ jsx(SvgSpaceDisconnect, { style: iconStyle });
+    text = /* @__PURE__ */ jsx("span", { style: { color: "#626a77" }, children: t("storage.spaces.disconnected.tag") });
+  }
+  if (status === SpaceStatus.EXPIRED) {
+    icon = /* @__PURE__ */ jsx(SvgSpaceConnectError, { style: iconStyle });
+    text = /* @__PURE__ */ jsxs(Box, { component: "span", sx: { display: "flex", alignItems: "center", color: "error.main" }, children: [
+      /* @__PURE__ */ jsx("span", { children: t("storage.spaces.expired.guide") }),
+      /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: withQuery(joinURL(spaceUrl, "overview"), { guide: 1 }),
+          target: "_blank",
+          underline: "always",
+          color: "error",
+          sx: { ml: 0.5 },
+          children: [
+            "[",
+            t("common.open"),
+            "]"
+          ]
+        }
+      )
+    ] });
+  }
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (!document.hidden) {
+        refresh();
+      }
+    };
+    if (status === SpaceStatus.EXPIRED) {
+      document.addEventListener("visibilitychange", handleVisibilityChange);
+    } else {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    }
+    return () => document.removeEventListener("visibilitychange", handleVisibilityChange);
+  }, [status, refresh]);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "span",
+      sx: { display: "flex", alignItems: "center", color: "primary.main", fontSize: 14, ...sx },
+      ...rest,
+      children: [
+        icon,
+        " ",
+        text
+      ]
+    }
+  );
+}
+function SpaceCard({ endpoint, selected = false, compat, action, className, deps, ...rest }) {
+  const isMobile = useMobile();
+  let isCompact = compat;
+  if (isUndefined(isCompact)) {
+    isCompact = isMobile;
+  }
+  const spaceDid = getDIDSpaceDidFromEndpoint(endpoint);
+  const spaceUrl = getDIDSpaceUrlFromEndpoint(endpoint);
+  const gatewayUrl = getSpaceGatewayUrlFromEndpoint(endpoint);
+  const [refreshSpaceInfo, setRefreshSpaceInfo] = useState(false);
+  const refresh = () => setRefreshSpaceInfo((p) => !p);
+  const { data: spaceInfo, loading } = useSpaceInfo({
+    endpoint,
+    deps: [refreshSpaceInfo].concat(deps ?? [])
+  });
+  const spaceName = spaceInfo?.spaceName ?? "";
+  const hasPermission = spaceInfo?.hasPermission ?? false;
+  const isAvailable = spaceInfo?.isAvailable ?? false;
+  const spaceStatus = useRef(SpaceStatus.UNKNOWN);
+  if (spaceInfo && !loading) {
+    if (!isAvailable) {
+      spaceStatus.current = SpaceStatus.EXPIRED;
+    } else if (hasPermission) {
+      spaceStatus.current = SpaceStatus.CONNECTED;
+    } else {
+      spaceStatus.current = SpaceStatus.DISCONNECTED;
+    }
+  }
+  const renderAction = () => {
+    if (loading)
+      return null;
+    if (typeof action === "function") {
+      return action({
+        spaceGateway: {
+          did: spaceDid,
+          name: spaceName,
+          url: gatewayUrl,
+          endpoint
+        },
+        spaceStatus: spaceStatus.current,
+        selected,
+        compat: isCompact,
+        refresh
+      });
+    }
+    return action;
+  };
+  return /* @__PURE__ */ jsxs(
+    BoxContainer,
+    {
+      className: classNames(className, {
+        selected,
+        error: spaceStatus.current === SpaceStatus.EXPIRED || spaceStatus.current === SpaceStatus.DISCONNECTED
+      }),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", children: [
+          /* @__PURE__ */ jsx(PreviewSpaceNft, { src: getSpaceNftDisplayUrlFromEndpoint(endpoint), width: "72px", height: "72px" }),
+          /* @__PURE__ */ jsxs(Stack, { ml: 2, flex: 1, spacing: 1, minWidth: 0, children: [
+            /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", sx: { whiteSpace: "nowrap" }, children: [
+              /* @__PURE__ */ jsx(Box, { className: "space-name", children: spaceName }),
+              !isCompact && selected && /* @__PURE__ */ jsx(Status, { spaceUrl, status: spaceStatus.current, refresh, sx: { mr: 1 } })
+            ] }),
+            /* @__PURE__ */ jsx(
+              DidAddress,
+              {
+                copyable: false,
+                size: 14,
+                compact: true,
+                responsive: false,
+                did: spaceDid,
+                sx: {
+                  ".did-address-text": {
+                    color: "text.secondary"
+                  }
+                }
+              }
+            )
+          ] }),
+          !isCompact && renderAction()
+        ] }),
+        isCompact && /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", marginTop: 0.5, children: [
+          selected && /* @__PURE__ */ jsx(Status, { spaceUrl, status: spaceStatus.current, refresh, flex: 1 }),
+          /* @__PURE__ */ jsx(Box, { flex: 1 }),
+          renderAction()
+        ] })
+      ]
+    }
+  );
+}
+const BoxContainer = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  box-sizing: border-box;
+  position: relative;
+  border: 1px solid ${({ theme }) => theme.palette.grey["200"] || "#f8f8f8"};
+  border-radius: 8px;
+
+  &.selected {
+    border-color: ${({ theme }) => theme.palette.primary.main || "#3b82f6"};
+    &.error {
+      border-color: ${({ theme }) => theme.palette.error.main || "#d32f2f"};
+    }
+  }
+
+  .space-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+export { SpaceCard as default };

package/es/components/SpaceCard/space-card.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryFn } from '@storybook/react';
+import Basic from './stories/basic';
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    decorators: ((Story: StoryFn) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default _default;
+export { Basic };

package/es/hooks/use-locale.d.ts

@@ -0,0 +1,5 @@
+declare function useLocale(): {
+    t: (this: any, key: any, data?: any) => any;
+    locale: any;
+};
+export default useLocale;

package/es/hooks/use-locale.js

@@ -0,0 +1,14 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useMemoizedFn } from 'ahooks';
+import { translations } from '../locales/index.js';
+
+function useLocale() {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
+  return { t, locale };
+}
+
+export { useLocale as default };

package/es/hooks/use-mobile.d.ts

@@ -0,0 +1,4 @@
+import { type Breakpoint } from '@mui/material/styles';
+export default function useMobile({ key }?: {
+    key: Breakpoint | number;
+}): boolean;