@elliemae/ds-legacy-uploader 1.0.0-rc.1

package/dist/esm/styled.js

@@ -0,0 +1,141 @@
+import * as React from "react";
+import { styled, xStyledCommonProps } from "@elliemae/ds-legacy-system";
+import { DSUploaderName, DSUploaderSlots } from "./constants.js";
+const StyledUploaderWrapper = styled("div", {
+  name: DSUploaderName,
+  slot: DSUploaderSlots.ROOT
+})`
+  display: inline-flex;
+  flex-direction: column;
+  ${xStyledCommonProps}
+`;
+const StyledDividerVertical = styled("div", {
+  name: DSUploaderName,
+  slot: DSUploaderSlots.DIVIDER_VERTICAL
+})`
+  border-right: 1px solid ${({ theme }) => theme.colors.neutral[100]};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[100]};
+  height: ${({ theme }) => theme.space.s};
+  margin: 0 ${({ theme }) => theme.space.xs};
+`;
+const StyledDividerVerticalActions = styled(StyledDividerVertical, {
+  name: DSUploaderName,
+  slot: DSUploaderSlots.ACTIONS_DIVIDER_VERTICAL
+})`
+  height: initial;
+  margin: 2px ${({ theme }) => theme.space.xxxs};
+`;
+const StyledUploaderIconArea = styled("div", {
+  name: DSUploaderName,
+  slot: DSUploaderSlots.ICON_AREA
+})`
+  position: relative;
+  & svg {
+    fill: ${({ theme }) => theme.colors.neutral["500"]};
+  }
+`;
+const StyledUploaderDragActive = styled("div", {
+  name: DSUploaderName,
+  slot: DSUploaderSlots.UPLOADER_DRAG_ACTIVE
+})`
+  visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: ${({ theme }) => theme.colors.brand[500]};
+  color: ${({ theme }) => theme.colors.neutral["000"]};
+  border: 1px ${({ theme }) => theme.colors.brand[500]};
+  border-radius: 4px;
+  font-weight: ${({ theme }) => theme.fontWeights.bold};
+  justify-content: center;
+  align-items: center;
+`;
+const StyledUploader = styled("div", {
+  name: DSUploaderName,
+  slot: DSUploaderSlots.UPLOADER
+})`
+  position: relative;
+  display: inline-flex;
+  border: 1px solid
+    ${({ theme, isDragActive, disabledAll }) => isDragActive && !disabledAll ? "transparent" : theme.colors.neutral["200"]};
+  padding: 6px ${({ theme }) => theme.space.xs};
+  border-radius: 4px;
+  align-items: center;
+  outline: none;
+
+  &:hover,
+  &:focus {
+    background-color: ${({ theme }) => theme.colors.brand["100"]};
+    border: 1px dashed ${({ theme }) => theme.colors.brand["500"]};
+    ${StyledDividerVertical} {
+      border-color: ${({ theme }) => theme.colors.brand["300"]};
+    }
+    ${StyledUploaderIconArea} {
+      & svg {
+        fill: ${({ theme }) => theme.colors.brand["500"]};
+      }
+    }
+  }
+
+  &:focus {
+    // in replace of @include dsFocus();
+    outline: none;
+    box-shadow: inset 0 0 0 1px #8cc2ed;
+    border-radius: 2px;
+  }
+
+  ${StyledUploaderDragActive} {
+    ${({ isDragActive, disabledAll }) => {
+  if (isDragActive && !disabledAll) {
+    return `
+          visibility: visible;
+          display: flex;
+
+        `;
+  }
+}}
+  }
+`;
+const StyledUploaderInfo = styled("div", {
+  name: DSUploaderName,
+  slot: DSUploaderSlots.UPLOADER_INFO
+})``;
+const StyledInfoText = styled("span", {
+  name: DSUploaderName,
+  slot: DSUploaderSlots.INFO_TEXT
+})`
+  font-size: 1rem;
+  font-weight: ${({ theme }) => theme.fontWeights.regular};
+  color: ${({ theme }) => theme.colors.neutral[700]};
+`;
+const StyledAcceptedTypes = styled("div", {
+  name: DSUploaderName,
+  slot: DSUploaderSlots.ACCEPTED_TYPES
+})`
+  margin-top: 2px;
+  color: ${({ theme }) => theme.colors.neutral[500]};
+  text-transform: uppercase;
+  text-align: right;
+  font-size: ${({ theme }) => theme.fontSizes.label[200]};
+`;
+const StyledUploaderActions = styled("div", {
+  name: DSUploaderName,
+  slot: DSUploaderSlots.UPLOADER_ACTIONS
+})`
+  display: flex;
+`;
+export {
+  StyledAcceptedTypes,
+  StyledDividerVertical,
+  StyledDividerVerticalActions,
+  StyledInfoText,
+  StyledUploader,
+  StyledUploaderActions,
+  StyledUploaderDragActive,
+  StyledUploaderIconArea,
+  StyledUploaderInfo,
+  StyledUploaderWrapper
+};
+//# sourceMappingURL=styled.js.map

package/dist/esm/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-legacy-system';\nimport { DSUploaderName, DSUploaderSlots } from './constants.js';\n\nexport const StyledUploaderWrapper = styled('div', {\n  name: DSUploaderName,\n  slot: DSUploaderSlots.ROOT,\n})`\n  display: inline-flex;\n  flex-direction: column;\n  ${xStyledCommonProps}\n`;\n\nexport const StyledDividerVertical = styled('div', {\n  name: DSUploaderName,\n  slot: DSUploaderSlots.DIVIDER_VERTICAL,\n})`\n  border-right: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n  height: ${({ theme }) => theme.space.s};\n  margin: 0 ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledDividerVerticalActions = styled(StyledDividerVertical, {\n  name: DSUploaderName,\n  slot: DSUploaderSlots.ACTIONS_DIVIDER_VERTICAL,\n})`\n  height: initial;\n  margin: 2px ${({ theme }) => theme.space.xxxs};\n`;\n\nexport const StyledUploaderIconArea = styled('div', {\n  name: DSUploaderName,\n  slot: DSUploaderSlots.ICON_AREA,\n})`\n  position: relative;\n  & svg {\n    fill: ${({ theme }) => theme.colors.neutral['500']};\n  }\n`;\n\nexport const StyledUploaderDragActive = styled('div', {\n  name: DSUploaderName,\n  slot: DSUploaderSlots.UPLOADER_DRAG_ACTIVE,\n})`\n  visibility: hidden;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: ${({ theme }) => theme.colors.brand[500]};\n  color: ${({ theme }) => theme.colors.neutral['000']};\n  border: 1px ${({ theme }) => theme.colors.brand[500]};\n  border-radius: 4px;\n  font-weight: ${({ theme }) => theme.fontWeights.bold};\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const StyledUploader = styled('div', {\n  name: DSUploaderName,\n  slot: DSUploaderSlots.UPLOADER,\n})<{ isDragActive: boolean; disabledAll: boolean }>`\n  position: relative;\n  display: inline-flex;\n  border: 1px solid\n    ${({ theme, isDragActive, disabledAll }) =>\n      isDragActive && !disabledAll ? 'transparent' : theme.colors.neutral['200']};\n  padding: 6px ${({ theme }) => theme.space.xs};\n  border-radius: 4px;\n  align-items: center;\n  outline: none;\n\n  &:hover,\n  &:focus {\n    background-color: ${({ theme }) => theme.colors.brand['100']};\n    border: 1px dashed ${({ theme }) => theme.colors.brand['500']};\n    ${StyledDividerVertical} {\n      border-color: ${({ theme }) => theme.colors.brand['300']};\n    }\n    ${StyledUploaderIconArea} {\n      & svg {\n        fill: ${({ theme }) => theme.colors.brand['500']};\n      }\n    }\n  }\n\n  &:focus {\n    // in replace of @include dsFocus();\n    outline: none;\n    box-shadow: inset 0 0 0 1px #8cc2ed;\n    border-radius: 2px;\n  }\n\n  ${StyledUploaderDragActive} {\n    ${({ isDragActive, disabledAll }) => {\n      if (isDragActive && !disabledAll) {\n        return `\n          visibility: visible;\n          display: flex;\n\n        `;\n      }\n    }}\n  }\n`;\n\nexport const StyledUploaderInfo = styled('div', {\n  name: DSUploaderName,\n  slot: DSUploaderSlots.UPLOADER_INFO,\n})``;\nexport const StyledInfoText = styled('span', {\n  name: DSUploaderName,\n  slot: DSUploaderSlots.INFO_TEXT,\n})`\n  font-size: 1rem;\n  font-weight: ${({ theme }) => theme.fontWeights.regular};\n  color: ${({ theme }) => theme.colors.neutral[700]};\n`;\n\nexport const StyledAcceptedTypes = styled('div', {\n  name: DSUploaderName,\n  slot: DSUploaderSlots.ACCEPTED_TYPES,\n})`\n  margin-top: 2px;\n  color: ${({ theme }) => theme.colors.neutral[500]};\n  text-transform: uppercase;\n  text-align: right;\n  font-size: ${({ theme }) => theme.fontSizes.label[200]};\n`;\n\nexport const StyledUploaderActions = styled('div', {\n  name: DSUploaderName,\n  slot: DSUploaderSlots.UPLOADER_ACTIONS,\n})`\n  display: flex;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA,IAGG;AAAA;AAGG,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA,4BAC2B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,6BACtC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,YACxD,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,cACzB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAGlC,MAAM,+BAA+B,OAAO,uBAAuB;AAAA,EACxE,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA,gBAEe,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAGpC,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA,YAGW,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAI9C,MAAM,2BAA2B,OAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOqB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,WAChD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,gBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,iBAEpC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAK3C,MAAM,iBAAiB,OAAO,OAAO;AAAA,EAC1C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;AAAA;AAAA,MAIK,CAAC,EAAE,OAAO,cAAc,YAAY,MACpC,gBAAgB,CAAC,cAAc,gBAAgB,MAAM,OAAO,QAAQ,KAAK;AAAA,iBAC9D,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOpB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA,yBACtC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA,MAC1D;AAAA,sBACgB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA,MAEvD;AAAA;AAAA,gBAEU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYnD;AAAA,MACE,CAAC,EAAE,cAAc,YAAY,MAAM;AACnC,MAAI,gBAAgB,CAAC,aAAa;AAChC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AAAA;AAAA;AAIG,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AACM,MAAM,iBAAiB,OAAO,QAAQ;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA,iBAEgB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG3C,MAAM,sBAAsB,OAAO,OAAO;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA,WAEU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA,eAGnC,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA;AAGhD,MAAM,wBAAwB,OAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,gBAAgB;AACxB,CAAC;AAAA;AAAA;",
+  "names": []
+}

package/dist/types/DSUploader.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentType } from 'react';
+import { type DSUploaderT } from './react-desc-prop-types.js';
+declare const DSUploader: ComponentType<DSUploaderT.DefaultProps>;
+declare const UploaderWithSchema: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSUploaderT.DefaultProps>;
+export { UploaderWithSchema, DSUploader };
+export default DSUploader;

package/dist/types/constants.d.ts

@@ -0,0 +1,18 @@
+export declare const DSUploaderName = "DSUploader";
+export declare const DSUploaderSlots: {
+    ROOT: string;
+    UPLOADER: string;
+    ICON_AREA: string;
+    DIVIDER_VERTICAL: string;
+    ACTIONS_DIVIDER_VERTICAL: string;
+    UPLOADER_INFO: string;
+    INFO_TEXT: string;
+    UPLOADER_DRAG_ACTIVE: string;
+    ACCEPTED_TYPES: string;
+    UPLOADER_ACTIONS: string;
+};
+export declare const defaultActions: {
+    readonly defaultAction: "LOCAL DRIVE";
+    readonly altAction: "DOCUMENTS";
+};
+export declare const DSUploaderDataTestIds: Record<string, string>;

package/dist/types/index.d.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import type { DropzoneOptions } from 'react-dropzone';
+export interface DSUploaderPropsT extends DropzoneOptions {
+    containerProps?: Record<string, unknown>;
+    label?: string;
+    icon?: React.FC<{
+        size: string;
+    }>;
+    defaultActionLabel?: string;
+    dragActiveInstructionalText?: string;
+    dragActiveIcon?: React.FC;
+    altActionLabel?: string;
+    acceptedTypesText?: string;
+    disabledDefault?: boolean;
+    disabledAlt?: boolean;
+    onDefaultHandlerClick?: () => void | null;
+    onAltHandlerClick?: () => void | null;
+    actions?: Record<string, unknown>;
+    showAltAction?: boolean;
+    defaultActionTooltipText: string;
+    altActionTooltipText: string;
+}
+export interface ActionButtonPropsT {
+    labelText: string;
+    variant: undefined | 'variant-disabled';
+    onClick: () => void | null;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { default, DSUploader, UploaderWithSchema } from './DSUploader.js';
+export * from './constants.js';

package/dist/types/react-desc-prop-types.d.ts

@@ -0,0 +1,30 @@
+import { type WeakValidationMap } from 'react';
+/** Inherits the props of react-dropzone https://react-dropzone.netlify.com/ */
+export declare namespace DSUploaderT {
+    interface DefaultProps {
+        containerProps: Record<string, unknown>;
+        label: string;
+        icon: React.FC;
+        defaultActionLabel?: string;
+        dragActiveInstructionalText?: string;
+        dragActiveIcon: React.FC;
+        altActionLabel: string;
+        acceptedTypesText: string;
+        disabledDefault: boolean;
+        disabledAlt: boolean;
+        onDefaultHandlerClick: () => void | null;
+        onAltHandlerClick: () => void | null;
+        actions: Record<string, unknown>;
+        showAltAction: boolean;
+        defaultActionTooltipText: string;
+        altActionTooltipText: string;
+    }
+    type ActionsT = Record<string, unknown>;
+}
+export interface ActionButtonPropsT {
+    labelText: string;
+    variant: undefined | 'variant-disabled';
+    onClick: () => void | null;
+}
+export declare const propTypes: WeakValidationMap<DSUploaderT.DefaultProps>;
+export declare const defaultProps: DSUploaderT.DefaultProps;

package/dist/types/tests/DSUploader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@elliemae/ds-legacy-uploader",
+  "version": "1.0.0-rc.1",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - Uploader",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./propTypes": {
+      "import": "./dist/esm/propTypes.js",
+      "require": "./dist/cjs/propTypes.js"
+    },
+    "./DSUploader": {
+      "import": "./dist/esm/DSUploader.js",
+      "require": "./dist/cjs/DSUploader.js"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum-legacy.git"
+  },
+  "engines": {
+    "pnpm": ">=6",
+    "node": ">=16"
+  },
+  "author": "ICE MT",
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
+  },
+  "dependencies": {
+    "react-dropzone": "~10.2.2",
+    "@elliemae/ds-legacy-button": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-classnames": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-props-helpers": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-icons": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-system": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-utilities": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-tooltip": "1.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@elliemae/pui-cli": "~9.0.0-next.31",
+    "@elliemae/pui-theme": "~2.7.0",
+    "@elliemae/ds-legacy-monorepo-devops": "1.0.0-rc.1"
+  },
+  "peerDependencies": {
+    "lodash": "^4.17.21",
+    "react": "~17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "publishConfig": {
+    "access": "public",
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
+    "test": "pui-cli test --passWithNoTests",
+    "lint": "node ../../../scripts/lint.mjs",
+    "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
+    "dts": "node ../../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
+    "dev:build": "pnpm --filter {.}... build",
+    "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
+    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}