@arcblock/ux 2.1.66 → 2.1.69

package/src/Blocklet/demo/basic.js

@@ -1,102 +0,0 @@
-/* eslint-disable react/jsx-no-bind */
-import styled from 'styled-components';
-import { Grid, Box } from '@mui/material';
-import withTheme from '../../withTheme';
-import Button from '../../Button';
-import Blocklet, { ActionButton } from '..';
-
-const TempBlocklet = withTheme(Blocklet);
-const ThemedBlocklet = styled(TempBlocklet)`
-  .arcblock-blocklet__button {
-    color: blue;
-  }
-`;
-const StyledButton = styled(Button)`
-  &.MuiButton-root {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 86px;
-    display: inline-block;
-  }
-`;
-function echoMsg(msg) {
-  // eslint-disable-next-line no-alert
-  alert(msg);
-}
-
-export default function Basic() {
-  function onButtonClick(e) {
-    if (e) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-    echoMsg('click button');
-  }
-  function onClick() {
-    echoMsg('click main');
-  }
-  function onClickLink(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    echoMsg('click link');
-    return false;
-  }
-  return (
-    <Box>
-      <Grid container>
-        <Grid item lg={4} md={6} sm={6} xs={12}>
-          <ThemedBlocklet
-            title="default blocklet"
-            description="中文自私不是一个人按照他自己的意愿生活，而是要求别人按照他的意愿生活。"
-            buttonText="99999.99 ABT"
-            onButtonClick={onButtonClick}
-            onMainClick={onClick}
-            version="1.0.0"
-            did="z8iZasdfMgmMHWgbhZuVDZgRPAa9Ktido123"
-          />
-        </Grid>
-        <Grid item lg={4} md={6} sm={6} xs={12}>
-          <ThemedBlocklet
-            title="default blocklet"
-            description="中文自私]。"
-            buttonText="99999.99 ABT"
-            did="z8iZasdfMgmMHWgbhZuVDZgRPAa9Ktido124"
-            onButtonClick={onButtonClick}
-            onMainClick={onClick}
-            version="1.0.0"
-          />
-        </Grid>
-        <Grid item lg={4} md={6} sm={6} xs={12}>
-          <ThemedBlocklet
-            title="did logo for blocklet loogggggggggggggggggggggggashdahsjdkhasdhajkshk"
-            description="This is a blocklet card demo, this is very long. So it have to be ellipsis, it should works well"
-            did="z8iZasdfMgmMHWgbhZuVDZgRPAa9Ktido125"
-            buttonText="Purchase"
-            onButtonClick={onButtonClick}
-            onMainClick={onClick}
-            version="1.0.0"
-          />
-        </Grid>
-        <Grid item lg={4} md={6} sm={6} xs={12}>
-          <a href="/" onClick={onClickLink} style={{ color: 'initial' }}>
-            <ThemedBlocklet
-              title="custom button for blocklet"
-              description="This is a blocklet card demo, this is very long. So it have to be ellipsis, it should works well"
-              cover="https://temp.im/80x80"
-              button={
-                <ActionButton>
-                  <StyledButton title={8888.88} color="primary" variant="outlined" size="small" onClick={onButtonClick}>
-                    8888.88 ABT + 1000 Play3
-                  </StyledButton>
-                </ActionButton>
-              }
-              onMainClick={onClick}
-              version="1.0.0"
-            />
-          </a>
-        </Grid>
-      </Grid>
-    </Box>
-  );
-}

package/src/BlockletNFT/BlockletNFT.stories.js

@@ -1,17 +0,0 @@
-import Basic from './demo/basic';
-
-export default {
-  title: 'UX/BlockletNFT',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'BlockletNFT component is used to display Blocklet NFT Information',
-      },
-    },
-  },
-};
-
-Basic.storyName = 'BlockletNFT';
-
-export { Basic };

package/src/BlockletNFT/demo/basic.js

@@ -1,131 +0,0 @@
-/* eslint-disable react/jsx-no-bind */
-import styled from 'styled-components';
-
-import withTheme from '../../withTheme';
-import { ActionButton } from '../../Blocklet';
-import BlockletNFT from '..';
-import Button from '../../Button';
-
-const TempBlockletNFT = withTheme(BlockletNFT);
-const Container = styled.div`
-  margin-bottom: 40px;
-`;
-
-const StyledButton = styled(Button)`
-  &.MuiButton-root {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 86px;
-    display: inline-block;
-  }
-`;
-
-function echoMsg(msg) {
-  // eslint-disable-next-line no-alert
-  alert(msg);
-}
-
-export default function Basic() {
-  function onButtonClick(e) {
-    if (e) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-    echoMsg('click button');
-  }
-  function onClick() {
-    echoMsg('click main');
-  }
-  function onClickLink(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    echoMsg('click link');
-    return false;
-  }
-  return (
-    <div style={{ padding: '30px', maxWidth: 480 }}>
-      <Container>
-        <h2>size-auto（NFT）</h2>
-        <a href="/" onClick={onClickLink} style={{ color: 'initial' }}>
-          <TempBlockletNFT
-            title="Blocklet Card (I'm loooooooong)"
-            description="This is a blocklet card demo, this is very long. So it have to be ellipsis, it should works well"
-            cover="https://temp.im/100x100"
-            buttonText="Open"
-            addons={[
-              { icon: 'clock', value: '2021-04-29' },
-              { icon: 'store', value: 123456, pretty: true },
-              { icon: 'shopping-bag', value: 123456, pretty: true },
-            ]}
-            button={
-              <Button variant="contained" color="error" size="small" rounded disabled onClick={onButtonClick}>
-                Custom
-              </Button>
-            }
-            onMainClick={onClick}
-            isStickyButton
-          />
-        </a>
-      </Container>
-      <Container>
-        <h2>size-auto（NFT）outter link (现在应该没有这种情况了)</h2>
-        <a href="/" onClick={onClickLink} style={{ color: 'initial' }}>
-          <TempBlockletNFT
-            title="Blocklet Card (I'm loooooooong)"
-            description="This is a blocklet card demo, this is very long. So it have to be ellipsis, it should works well"
-            type="nft"
-            buttonText="Open"
-            addons={[
-              { icon: 'clock', value: '2021-04-29' },
-              { icon: 'store', value: 123456, pretty: true },
-              { icon: 'shopping-bag', value: 123456, pretty: true },
-            ]}
-            onButtonClick={onButtonClick}
-            isStickyButton
-            buttonLoading
-          />
-        </a>
-      </Container>
-      <Container>
-        <h2>size-auto（NFT）disabled</h2>
-        <TempBlockletNFT
-          title="Blocklet Card (I'm loooooooong)"
-          description="This is a blocklet card demo, this is very long. So it have to be ellipsis, it should works well"
-          type="nft"
-          buttonText="Open"
-          did="z8iZasdfMgmMHWgbhZuVDZgRPAa9Ktido123"
-          addons={[{ icon: 'clock', value: '2021-04-29' }, { empty: true }, { empty: true }]}
-          onButtonClick={onButtonClick}
-          onMainClick={onClick}
-          buttonDisabled
-          isStickyButton
-        />
-      </Container>
-      <Container>
-        <h2>custom button</h2>
-        <a href="/" onClick={onClickLink} style={{ color: 'initial' }}>
-          <TempBlockletNFT
-            title="Blocklet Card (I'm loooooooong)"
-            description="This is a blocklet card demo, this is very long. So it have to be ellipsis, it should works well"
-            cover="https://temp.im/64x64"
-            addons={[
-              { icon: 'clock', value: '2021-04-29' },
-              { icon: 'store', value: 123456, pretty: true },
-              { icon: 'shopping-bag', value: 123456, pretty: true },
-            ]}
-            button={
-              <ActionButton>
-                <StyledButton title={8888.88} color="primary" variant="outlined" size="small" onClick={onButtonClick}>
-                  8888.88 ABT + 1000 Play3
-                </StyledButton>
-              </ActionButton>
-            }
-            onMainClick={onClick}
-            version="1.0.0"
-          />
-        </a>
-      </Container>
-    </div>
-  );
-}

package/src/ClickToCopy/ClickToCopy.stories.js

@@ -1,23 +0,0 @@
-import Basic from './demo/basic';
-import WithComplexChild from './demo/with-complex-child';
-import WithCustomParentFontColor from './demo/with-custom-parent-font-color';
-import CopyButton from './demo/copy-button';
-
-export default {
-  title: 'UX/ClickToCopy',
-
-  parameters: {
-    docs: {
-      description: {
-        component: 'ClickToCopy allows the content that is wrapped in it to be copied with a single click.',
-      },
-    },
-  },
-};
-
-Basic.argTypes = {
-  locale: { control: 'select', options: ['en', 'zh'] },
-  tip: { control: 'text' },
-};
-
-export { Basic, WithComplexChild, WithCustomParentFontColor, CopyButton };

package/src/ClickToCopy/demo/basic.js

@@ -1,9 +0,0 @@
-import ClickToCopy from '..';
-
-export default function Demo(props) {
-  return (
-    <ClickToCopy locale="en" tip="custom tooltip message" {...props}>
-      copy this message
-    </ClickToCopy>
-  );
-}

package/src/ClickToCopy/demo/copy-button.js

@@ -1,28 +0,0 @@
-import Box from '@mui/material/Box';
-import Divider from '@mui/material/Divider';
-import { CopyButton } from '..';
-
-export default function Demo() {
-  const text = 'copy this message';
-  return (
-    <div>
-      <Box display="flex" alignItems="center" style={{ color: '#999' }}>
-        <span>{text}</span>
-        <CopyButton locale="en" content={text} style={{ marginLeft: 4 }} />
-      </Box>
-
-      <Divider sx={{ my: 2 }} />
-
-      <CopyButton
-        locale="zh"
-        style={{ marginLeft: 4 }}
-        render={({ copyButton, containerRef }) => (
-          <Box ref={containerRef} display="flex" alignItems="center" style={{ color: '#999' }}>
-            <span>{text} (CopyButton#render prop)</span>
-            {copyButton}
-          </Box>
-        )}
-      />
-    </div>
-  );
-}

package/src/ClickToCopy/demo/with-complex-child.js

@@ -1,9 +0,0 @@
-import ClickToCopy from '..';
-
-export default function Demo() {
-  return (
-    <ClickToCopy>
-      <span>I am the content from inner span</span>
-    </ClickToCopy>
-  );
-}

package/src/ClickToCopy/demo/with-custom-parent-font-color.js

@@ -1,9 +0,0 @@
-import ClickToCopy from '..';
-
-export default function Demo() {
-  return (
-    <div style={{ color: 'red' }}>
-      <ClickToCopy>custom tooltip message</ClickToCopy>
-    </div>
-  );
-}

package/src/ContactForm/ContactForm.stories.js

@@ -1,32 +0,0 @@
-import ContactForm from '.';
-import withTheme from '../withTheme';
-
-const ThemedContactForm = withTheme(ContactForm);
-
-export default {
-  title: 'Deprecated/ContactForm',
-};
-
-export function VerticalLayout() {
-  return <ThemedContactForm />;
-}
-
-VerticalLayout.storyName = 'vertical layout';
-
-export function HorizontalLayout() {
-  return <ThemedContactForm layout="horizontal" />;
-}
-
-HorizontalLayout.storyName = 'horizontal layout';
-
-export function WithoutTitle() {
-  return <ThemedContactForm layout="vertical" title="" />;
-}
-
-WithoutTitle.storyName = 'without title';
-
-export function CustomizeFields() {
-  return <ThemedContactForm layout="horizontal" fields={['Email', 'Name']} />;
-}
-
-CustomizeFields.storyName = 'customize fields';

package/src/Earth/Earth.stories.js

@@ -1,39 +0,0 @@
-import AsyncComponent from '../Async';
-
-const Earth = AsyncComponent(() => import('.'));
-
-export default {
-  title: 'Deprecated/Earth',
-
-  parameters: {
-    readme: {
-      sidebar: '<!-- PROPS -->',
-    },
-  },
-};
-
-export function DarkMode() {
-  return (
-    <div
-      style={{
-        background: '#222',
-      }}>
-      <Earth theme="dark" width={600} enableRotation />
-    </div>
-  );
-}
-
-DarkMode.storyName = 'dark mode';
-
-export function LightMode() {
-  return (
-    <div
-      style={{
-        background: 'transparent',
-      }}>
-      <Earth theme="light" width={600} enableRotation />
-    </div>
-  );
-}
-
-LightMode.storyName = 'light mode';

package/src/Empty/Empty.stories.js

@@ -1,23 +0,0 @@
-import Empty from './index';
-
-import Basic from './demo/basic';
-import CustomMessage from './demo/custom-message';
-import ComplexMessage from './demo/complex-message';
-
-export default {
-  title: 'UX/Empty',
-  component: Empty,
-  parameters: {
-    docs: {
-      description: {
-        component: 'Empty provides a generic "Empty Content" placeholder.',
-      },
-    },
-  },
-};
-
-Basic.parameters = {
-  layout: 'fullscreen',
-};
-
-export { Basic, CustomMessage, ComplexMessage };

package/src/Empty/demo/basic.js

@@ -1,5 +0,0 @@
-import Empty from '..';
-
-export default function Basic() {
-  return <Empty />;
-}

package/src/Empty/demo/complex-message.js

@@ -1,13 +0,0 @@
-import Button from '@mui/material/Button';
-import Empty from '..';
-
-export default function ComplexMessage() {
-  return (
-    <Empty>
-      {/* eslint-disable-next-line no-alert */}
-      <Button color="primary" variant="outlined" size="small" onClick={() => alert('click button')}>
-        点击刷新
-      </Button>
-    </Empty>
-  );
-}

package/src/Empty/demo/custom-message.js

@@ -1,5 +0,0 @@
-import Empty from '..';
-
-export default function CustomMessage() {
-  return <Empty>no more data</Empty>;
-}

package/src/Icon/Icon.stories.js

@@ -1,45 +0,0 @@
-import Icon from '.';
-
-export default {
-  title: 'Deprecated/Icon',
-
-  parameters: {
-    readme: {
-      sidebar: '<!-- PROPS -->',
-    },
-  },
-};
-
-export function WithDifferentNames() {
-  return (
-    <div style={{ display: 'flex', width: '300px', justifyContent: 'space-between' }}>
-      <Icon name="box" />
-      <Icon name="cut" />
-      <Icon name="copy" />
-      <Icon name="file" />
-    </div>
-  );
-}
-
-WithDifferentNames.storyName = 'with different names';
-
-export function WithDifferentSizes() {
-  return (
-    <div style={{ display: 'flex', width: '300px', justifyContent: 'space-between' }}>
-      <Icon name="box" />
-      <Icon name="box" size={50} />
-    </div>
-  );
-}
-
-WithDifferentSizes.storyName = 'with different sizes';
-
-export function WithRounded() {
-  return (
-    <div style={{ display: 'flex', width: '300px', justifyContent: 'space-between' }}>
-      <Icon name="box" rounded />
-    </div>
-  );
-}
-
-WithRounded.storyName = 'with rounded';

package/src/NFTDisplay/NFTDisplay.stories.js

@@ -1,16 +0,0 @@
-export { default as Basic } from './demo/basic';
-export { default as FixedSize } from './demo/fixed-size';
-export { default as Inset } from './demo/inset';
-export { default as AspectRatio } from './demo/aspect-ratio';
-export { default as NftTypeUrl } from './demo/nft-type-url';
-export { default as MinimumLoadingTime } from './demo/minimum-loading-time';
-export { default as WithForeignObject } from './demo/with-foreign-object';
-export { default as NftTypeSvg } from './demo/nft-type-svg';
-export { default as CustomLoading } from './demo/custom-loading';
-export { default as SvgValidation } from './demo/svg-validation';
-export { default as BrokenImage } from './demo/broken-image';
-export { default as PreferredSvgEmbedderProp } from './demo/preferred-svg-embedder-prop';
-
-export default {
-  title: 'UX/NFTDisplay',
-};

package/src/NFTDisplay/demo/aspect-ratio.js

@@ -1,33 +0,0 @@
-import Box from '@mui/material/Box';
-import NFTDisplay, { getNFTData } from '..';
-// test data: svg 宽高比 374:130
-import ASSET_STATE_GZIPPED_SVG_374_130 from './data/asset-state-gzipped-svg-374-130.json';
-import ASSET_STATE_DISPLAY_URL from './data/asset-state-display-url.json';
-
-export default function AspectRatio() {
-  const data = ASSET_STATE_GZIPPED_SVG_374_130.data.value;
-  const { address } = ASSET_STATE_GZIPPED_SVG_374_130;
-  return (
-    <Box p={2}>
-      <h5>1:1</h5>
-      <Box width={300} border={1}>
-        <NFTDisplay data={data} address={address} aspect={1} />
-      </Box>
-
-      <h5>4:3</h5>
-      <Box width={300} border={1}>
-        <NFTDisplay data={data} address={address} aspect={4 / 3} />
-      </Box>
-
-      <h5>16：9</h5>
-      <Box width={300} border={1}>
-        <NFTDisplay data={data} address={address} aspect={16 / 9} />
-      </Box>
-
-      <h5>keep image aspect ratio</h5>
-      <Box width={300} height={300} minHeight={100} p={1} border={1} overflow="auto" style={{ resize: 'both' }}>
-        <NFTDisplay data={getNFTData(ASSET_STATE_DISPLAY_URL)} address={ASSET_STATE_DISPLAY_URL.address} inset />
-      </Box>
-    </Box>
-  );
-}

package/src/NFTDisplay/demo/basic.js

@@ -1,15 +0,0 @@
-import Box from '@mui/material/Box';
-import NFTDisplay from '..';
-// test data: svg 宽高比 1:1
-import ASSET_STATE_GZIPPED_SVG_1_1 from './data/asset-state-gzipped-svg-1-1.json';
-// test data: svg 宽高比 374:130
-import ASSET_STATE_GZIPPED_SVG_374_130 from './data/asset-state-gzipped-svg-374-130.json';
-
-export default function Basic() {
-  return (
-    <Box width={300} height={300} p={2}>
-      <NFTDisplay data={ASSET_STATE_GZIPPED_SVG_1_1.data.value} address={ASSET_STATE_GZIPPED_SVG_1_1.address} />
-      <NFTDisplay data={ASSET_STATE_GZIPPED_SVG_374_130.data.value} address={ASSET_STATE_GZIPPED_SVG_374_130.address} />
-    </Box>
-  );
-}

package/src/NFTDisplay/demo/broken-image.js

@@ -1,84 +0,0 @@
-import Box from '@mui/material/Box';
-import styled from 'styled-components';
-import NFTDisplay from '..';
-import ASSET_STATE_URL from './data/asset-state-url.json';
-
-const StyledBox = styled(Box)`
-  && svg.nft-display-broken {
-    max-width: 300px;
-    fill: #f38b8b;
-  }
-`;
-
-export default function BrokenImage() {
-  const data = ASSET_STATE_URL.data.value;
-  const { address } = ASSET_STATE_URL;
-
-  // 将 url 改为无效地址
-  const parsed = JSON.parse(data);
-  parsed.credentialSubject.display.content = 'https://invalid-url';
-
-  const boxProps = {
-    border: 1,
-    borderTop: 0,
-    borderBottom: 0,
-    borderLeft: 0,
-    borderColor: 'grey.300',
-    p: 4,
-  };
-
-  const renderError = () => (
-    <Box
-      component="span"
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
-      height={1}
-      width={1}
-      bgcolor="grey.400"
-      color="grey.600">
-      <span>加载封面失败</span>
-    </Box>
-  );
-
-  return (
-    <Box p={2} display="flex">
-      <Box {...boxProps}>
-        <h5>invalid asset data</h5>
-        <Box width={100} height={100} border={1} mt={1} ml={1} borderColor="#eee">
-          <NFTDisplay inset />
-        </Box>
-      </Box>
-
-      <Box {...boxProps}>
-        <h5>invalid url</h5>
-        <Box width={100} height={100} border={1} mt={1} ml={1} borderColor="#eee">
-          <NFTDisplay data={parsed} address={address} inset />
-        </Box>
-      </Box>
-
-      <Box {...boxProps}>
-        <h5>broken image style customization</h5>
-        <StyledBox
-          width={300}
-          height={300}
-          p={1}
-          border={1}
-          mt={1}
-          ml={1}
-          borderColor="#eee"
-          overflow="auto"
-          style={{ resize: 'both' }}>
-          <NFTDisplay data={parsed} address={address} inset />
-        </StyledBox>
-      </Box>
-
-      <Box {...boxProps}>
-        <h5>broken image customization (renderError)</h5>
-        <Box width={200} height={200} border={1} mt={1} ml={1} borderColor="#eee">
-          <NFTDisplay data={parsed} address={address} inset renderError={renderError} />
-        </Box>
-      </Box>
-    </Box>
-  );
-}