@zat-design/sisyphus-react 3.1.4 → 3.1.5-beta.10

package/.dumi/theme/builtins/Alert.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { InfoCircleFilled } from '@ant-design/icons'
+
+export default function MyAlert(props: any) {
+  return (
+    <span
+      style={{
+        display: 'block',
+        backgroundColor: '#e6f7ff',
+        border: '1px solid #91d5ff',
+        borderRadius: 2,
+        padding: '8px 15px'
+      }}
+    >
+      <InfoCircleFilled style={{ color: '#1890ff', marginRight: 8 }} />
+      {props.children}
+    </span>
+  )
+}

package/.dumi/theme/builtins/Previewer.tsx

@@ -0,0 +1,232 @@
+import React, { useState, useContext, useRef, useEffect } from 'react'
+import Tabs, { TabPane } from 'rc-tabs'
+// @ts-ignore
+import { history } from 'dumi'
+import { IPreviewerComponentProps } from 'dumi/theme'
+import {
+  context,
+  useRiddle,
+  useMotions,
+  useCopy,
+  useLocaleProps,
+  useDemoUrl,
+  useTSPlaygroundUrl,
+  Link,
+  AnchorLink,
+  usePrefersColor
+} from 'dumi/theme'
+import { ICodeBlockProps } from './SourceCode'
+import SourceCode from './SourceCode'
+import 'dumi-theme-default/src/builtins/Previewer.less'
+import useCodeSandbox from '../hooks/useCodeSandbox'
+
+export interface IPreviewerProps extends IPreviewerComponentProps {
+  /**
+   * enable transform to change CSS containing block for demo
+   */
+  transform?: boolean
+  /**
+   * modify background for demo area
+   */
+  background?: string
+  /**
+   * collapse padding of demo area
+   */
+  compact?: boolean
+  /**
+   * configurations for action button
+   */
+  hideActions?: ('CSB' | 'EXTERNAL' | 'RIDDLE')[]
+  /**
+   * show source code by default
+   */
+  defaultShowCode?: boolean
+  /**
+   * use iframe mode for this demo
+   */
+  iframe?: true | number
+  /**
+   * replace builtin demo url
+   */
+  demoUrl?: string
+}
+
+/**
+ * get source code type for file
+ * @param file    file path
+ * @param source  file source object
+ */
+function getSourceType(file: string, source: IPreviewerComponentProps['sources']['_']) {
+  // use file extension as source type first
+  let type = file.match(/\.(\w+)$/)?.[1]
+
+  if (!type) {
+    type = source.tsx ? 'tsx' : 'jsx'
+  }
+
+  return type as ICodeBlockProps['lang']
+}
+
+const Previewer: React.FC<IPreviewerProps> = oProps => {
+  const demoRef = useRef()
+  const { locale } = useContext(context)
+  const props = useLocaleProps<IPreviewerProps>(locale, oProps)
+  const builtinDemoUrl = useDemoUrl(props.identifier)
+  const demoUrl = props.demoUrl || builtinDemoUrl
+  const isActive = history?.location.hash === `#${props.identifier}`
+  const isSingleFile = Object.keys(props.sources).length === 1
+  const openCSB = useCodeSandbox(props.hideActions?.includes('CSB') ? null : props)
+  const openRiddle = useRiddle(props.hideActions?.includes('RIDDLE') ? null : props)
+  const [execMotions, isMotionRunning] = useMotions(props.motions || [], demoRef.current)
+  const [copyCode, copyStatus] = useCopy()
+  const [currentFile, setCurrentFile] = useState('_')
+  const [sourceType, setSourceType] = useState(getSourceType(currentFile, props.sources[currentFile]))
+  const [showSource, setShowSource] = useState(Boolean(props.defaultShowCode))
+  const [iframeKey, setIframeKey] = useState(Math.random())
+  const currentFileCode = props.sources[currentFile][sourceType] || props.sources[currentFile].content
+  const playgroundUrl = useTSPlaygroundUrl(locale, currentFileCode)
+  const iframeRef = useRef<HTMLIFrameElement>()
+  const [color] = usePrefersColor()
+
+  // re-render iframe if prefers color changed
+  useEffect(() => {
+    setIframeKey(Math.random())
+  }, [color])
+
+  function handleFileChange(filename: string) {
+    setCurrentFile(filename)
+    setSourceType(getSourceType(filename, props.sources[filename]))
+  }
+
+  return (
+    <div
+      style={props.style}
+      className={[props.className, '__dumi-default-previewer', isActive ? '__dumi-default-previewer-target' : '']
+        .filter(Boolean)
+        .join(' ')}
+      id={props.identifier}
+      data-debug={props.debug || undefined}
+      data-iframe={props.iframe || undefined}
+    >
+      {props.iframe && <div className="__dumi-default-previewer-browser-nav" />}
+      <div
+        ref={demoRef}
+        className="__dumi-default-previewer-demo"
+        style={{
+          transform: props.transform ? 'translate(0, 0)' : undefined,
+          padding: props.compact || (props.iframe && props.compact !== false) ? '0' : undefined,
+          background: props.background
+        }}
+      >
+        {props.iframe ? (
+          <iframe
+            title="dumi-previewer"
+            style={{
+              // both compatible with unit or non-unit, such as 100, 100px, 100vh
+              height: String(props.iframe).replace(/(\d)$/, '$1px')
+            }}
+            key={iframeKey}
+            src={demoUrl}
+            ref={iframeRef}
+          />
+        ) : (
+          props.children
+        )}
+      </div>
+      <div className="__dumi-default-previewer-desc" data-title={props.title}>
+        {props.title && <AnchorLink to={`#${props.identifier}`}>{props.title}</AnchorLink>}
+        {props.description && (
+          <div
+            // eslint-disable-next-line
+            dangerouslySetInnerHTML={{ __html: props.description }}
+          />
+        )}
+      </div>
+      <div className="__dumi-default-previewer-actions">
+        {openCSB && (
+          <button
+            title="Open demo on CodeSandbox.io"
+            className="__dumi-default-icon"
+            role="codesandbox"
+            onClick={openCSB}
+          />
+        )}
+        {openRiddle && (
+          <button title="Open demo on Riddle" className="__dumi-default-icon" role="riddle" onClick={openRiddle} />
+        )}
+        {props.motions && (
+          <button
+            title="Execute motions"
+            className="__dumi-default-icon"
+            role="motions"
+            disabled={isMotionRunning}
+            onClick={() => execMotions()}
+          />
+        )}
+        {props.iframe && (
+          <button
+            title="Reload demo iframe page"
+            className="__dumi-default-icon"
+            role="refresh"
+            onClick={() => setIframeKey(Math.random())}
+          />
+        )}
+        {!props.hideActions?.includes('EXTERNAL') && (
+          <Link target="_blank" to={demoUrl}>
+            <button title="Open demo in new tab" className="__dumi-default-icon" role="open-demo" type="button" />
+          </Link>
+        )}
+        <span />
+        <button
+          title="Copy source code"
+          className="__dumi-default-icon"
+          role="copy"
+          data-status={copyStatus}
+          onClick={() => copyCode(currentFileCode)}
+        />
+        {sourceType === 'tsx' && showSource && (
+          <Link target="_blank" to={playgroundUrl}>
+            <button
+              title="Get JSX via TypeScript Playground"
+              className="__dumi-default-icon"
+              role="change-tsx"
+              type="button"
+            />
+          </Link>
+        )}
+        <button
+          title="Toggle source code panel"
+          className={`__dumi-default-icon${showSource ? ' __dumi-default-btn-expand' : ''}`}
+          role="source"
+          type="button"
+          onClick={() => setShowSource(!showSource)}
+        />
+      </div>
+      {showSource && (
+        <div className="__dumi-default-previewer-source-wrapper">
+          {!isSingleFile && (
+            <Tabs
+              className="__dumi-default-previewer-source-tab"
+              prefixCls="__dumi-default-tabs"
+              moreIcon="···"
+              defaultActiveKey={currentFile}
+              onChange={handleFileChange}
+            >
+              {Object.keys(props.sources).map(filename => (
+                <TabPane
+                  tab={filename === '_' ? `index.${getSourceType(filename, props.sources[filename])}` : filename}
+                  key={filename}
+                />
+              ))}
+            </Tabs>
+          )}
+          <div className="__dumi-default-previewer-source">
+            <SourceCode code={currentFileCode} lang={sourceType} showCopy={false} />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Previewer

package/.dumi/theme/builtins/SourceCode.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+// import styled from 'styled-components'
+import { Language } from 'prism-react-renderer'
+import Highlight, { defaultProps } from 'prism-react-renderer'
+import { useCopy } from 'dumi/theme'
+import 'prismjs/themes/prism.css'
+import 'dumi-theme-default/src/builtins/SourceCode.less'
+
+export interface ICodeBlockProps {
+  code: string
+  lang: Language
+  showCopy?: boolean
+}
+
+// const Line = styled.div`
+//   display: table-row;
+// `
+
+// const LineNo = styled.span`
+//   display: table-cell;
+//   text-align: right;
+//   padding-right: 1em;
+//   min-width: 4em;
+//   user-select: none;
+//   opacity: 0.5;
+// `
+
+// const LineContent = styled.span`
+//   display: table-cell;
+// `
+
+export default ({ code, lang, showCopy = true }: ICodeBlockProps) => {
+  const [copyCode, copyStatus] = useCopy()
+
+  return (
+    <div className="__dumi-default-code-block">
+      <Highlight {...defaultProps} code={code} language={lang} theme={undefined}>
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          <pre className={className} style={style}>
+            {showCopy && (
+              <button
+                className="__dumi-default-icon __dumi-default-code-block-copy-btn"
+                data-status={copyStatus}
+                onClick={() => copyCode(code)}
+              />
+            )}
+            {tokens.map((line, i) => (
+              <div {...getLineProps({ line, key: i })}>
+                <div key={i} {...getLineProps({ line, key: i })}>
+                  {/* <div>{i + 1}</div> */}
+                  <div>
+                    {line.map((token, key) => (
+                      <span key={key} {...getTokenProps({ token, key })} />
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </pre>
+        )}
+      </Highlight>
+    </div>
+  )
+}

package/.dumi/theme/hooks/useCodeSandbox.tsx

@@ -0,0 +1,197 @@
+import { useState, useEffect } from 'react'
+import LZString from 'lz-string'
+import { linkList } from './useTheme'
+
+interface IPreviewerComponentProps {
+  title?: string
+  description?: string
+  sources:
+    | {
+        /**
+         * self source code for demo
+         * @note  jsx exsits definitely, tsx exists when the source code language is tsx
+         */
+        _: { jsx: string; tsx?: string }
+      }
+    | Record<
+        string,
+        {
+          import: string
+          content: string
+          path?: string
+          tsx?: string
+        }
+      >
+  /**
+   * third-party dependencies of demo
+   */
+  dependencies: any
+  /**
+   * global identifier for demo
+   */
+  identifier: string
+  /**
+   * the component which demo belongs to
+   */
+  componentName?: string
+  /**
+   * motions of current demo, for snapshot or preview
+   */
+  motions?: string[]
+  /**
+   * mark demo as debug demo, will be discarded in production mode
+   */
+  debug?: true
+  [key: string]: any
+}
+
+const CSB_API_ENDPOINT = 'https://codesandbox.io/api/v1/sandboxes/define'
+
+// ref: https://github.com/codesandbox/codesandbox-importers/blob/master/packages/import-utils/src/api/define.ts
+function serialize(data: Record<string, any>) {
+  return LZString.compressToBase64(JSON.stringify(data))
+    .replace(/\+/g, '-') // Convert '+' to '-'
+    .replace(/\//g, '_') // Convert '/' to '_'
+    .replace(/=+$/, '') // Remove ending '='
+}
+
+function getTextContent(raw: string) {
+  const elm = document.createElement('span')
+
+  elm.innerHTML = raw
+  const text = elm.textContent
+  elm.remove()
+
+  return text
+}
+
+/**
+ * get serialized data that use to submit to codesandbox.io
+ * @param opts  previewer props
+ */
+function getCSBData(opts: IPreviewerComponentProps) {
+  const isTSX = Boolean(opts.sources._.tsx)
+  const ext = isTSX ? '.tsx' : '.jsx'
+  const files: Record<string, { content: string }> = {}
+  const deps: Record<string, string> = {}
+  const CSSDeps = Object.values(opts.dependencies).filter((dep: any) => dep.css)
+  const appFileName = `App${ext}`
+  const entryFileName = `index${ext}`
+
+  // generate dependencies
+  Object.entries(opts.dependencies).forEach(([dep, { version }]: any) => {
+    deps[dep] = version
+  })
+
+  deps.tslib = '2.3.1'
+
+  // add react-dom dependency
+  if (!deps['react-dom']) {
+    deps['react-dom'] = deps.react || 'latest'
+  }
+
+  // append sandbox.config.json
+  files['sandbox.config.json'] = {
+    content: JSON.stringify(
+      {
+        template: isTSX ? 'create-react-app-typescript' : 'create-react-app'
+      },
+      null,
+      2
+    )
+  }
+
+  // append package.json
+  files['package.json'] = {
+    content: JSON.stringify(
+      {
+        name: opts.title,
+        description: getTextContent(opts.description) || 'Amiya Demo',
+        main: entryFileName,
+        dependencies: deps,
+        // add TypeScript dependency if required, must in devDeps to avoid csb compile error
+        devDependencies: isTSX ? { typescript: '^3' } : {}
+      },
+      null,
+      2
+    )
+  }
+
+  let name = localStorage.getItem('AMIYA_COLOR')
+
+  if (!name) {
+    name = 'default'
+  }
+
+  let color = linkList.find(item => item.name === name)
+
+  let link = color.link
+
+  // append index.html
+  files['index.html'] = {
+    content: `<link rel="stylesheet" href="${link}" class="amiya-theme"><div style="margin: 16px;" id="root"></div>`
+  }
+
+  // append entry file
+  files[entryFileName] = {
+    content: `/**
+* This is an auto-generated demo by amiya
+* if you think it is not working as expected,
+* please report the issue at
+* https://github.com/viewweiwu/amiya/issues
+**/
+import React from 'react';
+import ReactDOM from 'react-dom';
+${CSSDeps.map(({ css }: any) => `import '${css}';`).join('\n')}
+import App from './App';
+ReactDOM.render(
+  <App />,
+  document.getElementById('root'),
+);`
+  }
+
+  // append other imported local files
+  Object.entries(opts.sources).forEach(([filename, { tsx, jsx, content }]) => {
+    // handle primary content
+    files[filename === '_' ? appFileName : filename] = {
+      content: tsx || jsx || content
+    }
+  })
+
+  return serialize({ files })
+}
+
+/**
+ * use CodeSandbox.io
+ * @param opts  previewer opts
+ * @note  return a open function for open demo on codesandbox.io
+ */
+export default (opts: IPreviewerComponentProps | null, api: string = CSB_API_ENDPOINT) => {
+  const [handler, setHandler] = useState<(...args: any) => void | undefined>()
+
+  useEffect(() => {
+    if (opts) {
+      const form = document.createElement('form')
+      const input = document.createElement('input')
+      const data = getCSBData(opts)
+
+      form.method = 'POST'
+      form.target = '_blank'
+      form.style.display = 'none'
+      form.action = api
+      form.appendChild(input)
+      form.setAttribute('data-demo', opts.title || '')
+
+      input.name = 'parameters'
+      input.value = data
+
+      document.body.appendChild(form)
+
+      setHandler(() => () => form.submit())
+
+      return () => form.remove()
+    }
+  }, [opts])
+
+  return handler
+}