Merge pull request #63 from Koniverse/issue-10

[Issue-6,9,10] Update file upload, icon components, switch storybook

Author: saltict

components/icon/index.tsx

@@ -14,9 +14,11 @@ export interface SWIconProps {
   antDesignIcon?: AntIconType;
   weight?: IconWeight;
   iconColor?: string;
+  className?: string;
 }
 
 const Icon: React.FC<SWIconProps> = ({
+  className,
   type = 'phosphor',
   size,
   phosphorIcon: PhosphorIcon,
@@ -31,19 +33,21 @@ const Icon: React.FC<SWIconProps> = ({
     }
 
     if (size === 'xs') {
-      return 12;
+      return 16;
     }
     if (size === 'sm') {
-      return 16;
+      return 24;
     }
 
-    return 24;
+    return 32;
   };
 
+  const wrapperClass = className ? `anticon ${className}` : 'anticon';
+
   if (type === 'fontAwesome' && fontawesomeIcon) {
     return (
       <span
-        className='anticon'
+        className={wrapperClass}
         style={{
           fontSize: getIconSize(),
           color: iconColor,
@@ -61,7 +65,7 @@ const Icon: React.FC<SWIconProps> = ({
   if (type === 'phosphor' && PhosphorIcon) {
     return (
       <span
-        className='anticon'
+        className={wrapperClass}
         style={{
           fontSize: getIconSize(),
           color: iconColor,
@@ -75,6 +79,7 @@ const Icon: React.FC<SWIconProps> = ({
   if (type === 'antDesignIcon' && AntDesignIcon) {
     return (
       <AntDesignIcon
+        className={className}
         style={{
           fontSize: getIconSize(),
           color: iconColor,

components/switch/stories/switch.stories.tsx

@@ -8,10 +8,6 @@ export default {
   component: Switch,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
-    checked: {
-      control: 'boolean',
-      defaultValue: false,
-    },
     disabled: {
       control: 'boolean',
       defaultValue: false,
@@ -30,12 +26,6 @@ export const Default = Template.bind({});
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 Default.args = {};
 
-export const Checked = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Checked.args = {
-  checked: true,
-};
-
 export const Loading = Template.bind({});
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
 Loading.args = {

components/theme/themes/dark/colors.ts

@@ -53,7 +53,7 @@ export const generateNeutralColorPalettes: GenerateNeutralColorMap = (
     colorBorder: getSolidColor(colorBgBase, 26),
     colorBorderSecondary: getSolidColor(colorBgBase, 19),
 
-    colorBgDefault: colorBgBase,
+    colorBgDefault: '#0C0C0C',
     colorBgSecondary: '#1A1A1A',
     colorBgInput: '#252525',
     colorBgBorder: '#212121',

components/upload/SingleFileDragger.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { UploadProps } from './interface';
+import Upload from './Upload';
+
+export type SingleFileDraggerProps = Omit<UploadProps, 'type' | 'multiple'>;
+
+const SingleFileDragger = React.forwardRef<unknown, SingleFileDraggerProps>(
+  ({ ...restProps }, ref) => (
+    <Upload ref={ref} {...restProps} type="single-file-drag" multiple={false} maxCount={1} />
+  ),
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  SingleFileDragger.displayName = 'SingleFileDragger';
+}
+
+export default SingleFileDragger;

components/upload/Upload.tsx

@@ -4,6 +4,7 @@ import RcUpload from 'rc-upload';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import * as React from 'react';
 import { flushSync } from 'react-dom';
+import { Eraser, UploadSimple } from 'phosphor-react';
 import { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
 import LocaleReceiver from '../locale/LocaleReceiver';
@@ -13,13 +14,17 @@ import type { RcFile, ShowUploadListInterface, UploadChangeParam, UploadFile } f
 import { UploadProps } from './interface';
 import UploadList from './UploadList';
 import { file2Obj, getFileItem, removeFileItem, updateFileList } from './utils';
+import Icon from '../icon';
 
 import useStyle from './style';
 
 export const LIST_IGNORE = `__LIST_IGNORE_${Date.now()}__`;
 
 export { UploadProps };
 
+// todo: i18n this
+const ClickOrDragToReplaceFile = 'Click or Drag to replace file';
+
 const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (props, ref) => {
   const {
     fileList,
@@ -49,6 +54,8 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
     action = '',
     accept = '',
     supportServerRender = true,
+    title = 'Drag title',
+    hint = 'Drag hint',
   } = props;
 
   // ===================== Disabled =====================
@@ -416,6 +423,53 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
     );
   }
 
+  if (type === 'single-file-drag') {
+    const dragCls = classNames(
+      prefixCls,
+      `${prefixCls}-drag-single`,
+      {
+        '-drag-uploading': mergedFileList.some((file) => file.status === 'uploading'),
+        '-drag-hover': dragState === 'dragover',
+        '-disabled': mergedDisabled,
+        '-uploaded': mergedFileList.length,
+      },
+      hashId,
+    );
+
+    return wrapSSR(
+      <div className={classNames(`${prefixCls}-wrapper`, rtlCls, className, hashId)}>
+        <div
+          className={dragCls}
+          onDrop={onFileDrop}
+          onDragOver={onFileDrop}
+          onDragLeave={onFileDrop}
+        >
+          <RcUpload {...rcUploadProps} ref={upload} className={`${prefixCls}-btn`}>
+            <div className={`${prefixCls}-drag-container`}>
+              {!mergedFileList.length ? (
+                <>
+                  <Icon
+                    type='phosphor'
+                    phosphorIcon={UploadSimple}
+                    className='ant-upload-drag__icon'
+                  />
+                  <div className={`${prefixCls}-drag__title`}>{title}</div>
+                  <div className={`${prefixCls}-drag__hint`}>{hint}</div>
+                </>
+              ) : (
+                <>
+                  <Icon type='phosphor' phosphorIcon={Eraser} className='ant-upload-drag__icon' />
+                  <div className={`${prefixCls}-drag__title`}>{ClickOrDragToReplaceFile}</div>
+                  <div className={`${prefixCls}-drag__hint`}>{mergedFileList[0].name}</div>
+                </>
+              )}
+            </div>
+          </RcUpload>
+        </div>
+      </div>,
+    );
+  }
+
   const uploadButtonCls = classNames(prefixCls, `${prefixCls}-select`, {
     [`${prefixCls}-disabled`]: mergedDisabled,
   });

components/upload/index.tsx

@@ -1,4 +1,5 @@
 import Dragger from './Dragger';
+import SingleFileDragger from './SingleFileDragger';
 import type { UploadProps } from './Upload';
 import InternalUpload, { LIST_IGNORE } from './Upload';
 
@@ -17,11 +18,13 @@ type CompoundedComponent<T = any> = InternalUploadType & {
     props: React.PropsWithChildren<UploadProps<U>> & React.RefAttributes<any>,
   ): React.ReactElement;
   Dragger: typeof Dragger;
+  SingleFileDragger: typeof SingleFileDragger;
   LIST_IGNORE: string;
 };
 
 const Upload = InternalUpload as CompoundedComponent;
 Upload.Dragger = Dragger;
+Upload.SingleFileDragger = SingleFileDragger;
 Upload.LIST_IGNORE = LIST_IGNORE;
 
 export default Upload;

components/upload/interface.tsx

@@ -65,7 +65,7 @@ export interface UploadLocale {
   previewFile?: string;
 }
 
-export type UploadType = 'drag' | 'select';
+export type UploadType = 'single-file-drag' | 'drag' | 'select';
 export type UploadListType = 'text' | 'picture' | 'picture-card';
 export type UploadListProgressProps = Omit<ProgressProps, 'percent' | 'type'>;
 
@@ -89,6 +89,8 @@ type BeforeUploadValueType = void | boolean | string | Blob | File;
 export interface UploadProps<T = any> extends Pick<RcUploadProps, 'capture'> {
   type?: UploadType;
   name?: string;
+  title?: string;
+  hint?: string;
   defaultFileList?: Array<UploadFile<T>>;
   fileList?: Array<UploadFile<T>>;
   action?: string | ((file: RcFile) => string) | ((file: RcFile) => PromiseLike<string>);

components/upload/stories/singleFileDragger.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import Upload from '..';
+
+const { SingleFileDragger } = Upload;
+
+export default {
+  title: 'Core/SingleFileDragger',
+  component: SingleFileDragger,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+} as ComponentMeta<typeof SingleFileDragger>;
+
+const Template: ComponentStory<typeof SingleFileDragger> = (args) => (
+  <SingleFileDragger {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Import from Polkadot.js',
+  hint: 'Please drag an drop the .json file you  exported  from Polkadot.js',
+};

components/upload/style/dragger.ts

@@ -70,6 +70,48 @@ const genDraggerStyle: GenerateStyle<UploadToken> = (token) => {
         },
       },
     },
+    [`${componentCls}-drag-single`]: {
+      textAlign: 'center',
+      cursor: 'pointer',
+      background: token.colorBgSecondary,
+      border: `2px dotted ${token.colorBgDivider}`,
+      transition: `border-color ${token.motionDurationSlow}`,
+      borderRadius: token.borderRadiusLG,
+      padding: '32px 16px 10px 16px',
+
+      [`${componentCls}-btn`]: {
+        display: 'block',
+        outline: 'none',
+      },
+      [`${componentCls}-drag__icon`]: {
+        fontSize: 32,
+        marginBottom: 8,
+      },
+      [`${componentCls}-drag__title`]: {
+        fontWeight: '600',
+        marginBottom: 8,
+      },
+      [`${componentCls}-drag__hint`]: {
+        fontWeight: '500',
+        color: token.colorTextLight4,
+        wordBreak: 'break-word',
+      },
+      '&.-drag-hover': {
+        paddingBottom: 32,
+        borderColor: token['geekblue-6'],
+      },
+      '&.-uploaded': {
+        paddingBottom: 32,
+
+        [`${componentCls}-drag__icon`]: {
+          color: token.colorWarning,
+        },
+      },
+
+      '&:hover': {
+        borderColor: token['geekblue-4'],
+      },
+    },
   };
 };