Skip to content

Commit

Permalink
refactor(core): move file input stuff into separate folder
Browse files Browse the repository at this point in the history
  • Loading branch information
mlaursen committed Aug 28, 2024
1 parent 4f88455 commit e86c158
Show file tree
Hide file tree
Showing 20 changed files with 355 additions and 344 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";
import { box } from "@react-md/core/box/styles";
import { FileInput } from "@react-md/core/form/FileInput";
import { FileInput } from "@react-md/core/files/FileInput";
import { Form } from "@react-md/core/form/Form";
import { Typography } from "@react-md/core/typography/Typography";
import { useState, type ReactElement } from "react";
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { box } from "@react-md/core/box/styles";
import { FileInput } from "@react-md/core/form/FileInput";
import { FileInput } from "@react-md/core/files/FileInput";
import { Form } from "@react-md/core/form/Form";
import CloudUploadOutlinedIcon from "@react-md/material-icons/CloudUploadOutlinedIcon";
import { type ReactElement } from "react";
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { box } from "@react-md/core/box/styles";
import { FileInput } from "@react-md/core/form/FileInput";
import { FileInput } from "@react-md/core/files/FileInput";
import { Form } from "@react-md/core/form/Form";
import { SrOnly } from "@react-md/core/typography/SrOnly";
import { useId, type ReactElement } from "react";
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { box } from "@react-md/core/box/styles";
import { FileInput } from "@react-md/core/form/FileInput";
import { FileInput } from "@react-md/core/files/FileInput";
import { Form } from "@react-md/core/form/Form";
import { type ReactElement } from "react";

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { box } from "@react-md/core/box/styles";
import { FileInput } from "@react-md/core/form/FileInput";
import { FileInput } from "@react-md/core/files/FileInput";
import { Form } from "@react-md/core/form/Form";
import { type ReactElement } from "react";

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { MenuItemFileInput } from "@react-md/core/form/MenuItemFileInput";
import { useFileUpload } from "@react-md/core/form/useFileUpload";
import { useFileUpload } from "@react-md/core/files/useFileUpload";
import { DropdownMenu } from "@react-md/core/menu/DropdownMenu";
import { useState, type ReactElement } from "react";

Expand Down
92 changes: 46 additions & 46 deletions packages/codemod/transforms/v5-to-v6/coreExportMap.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1907,7 +1907,7 @@ export const EXPORT_MAP: Record<string, string> = {
BaseDialogProps: "@react-md/core/dialog/Dialog",
BaseDraggableOptions: "@react-md/core/draggable/useDraggable",
BaseDropdownMenuProps: "@react-md/core/menu/DropdownMenu",
BaseFileUploadStats: "@react-md/core/form/fileUtils",
BaseFileUploadStats: "@react-md/core/files/utils",
BaseFixedDialogProps: "@react-md/core/dialog/FixedDialog",
BaseInputToggleProps: "@react-md/core/form/InputToggle",
BaseIntersectionObserverHookOptions: "@react-md/core/useIntersectionObserver",
Expand Down Expand Up @@ -2090,7 +2090,7 @@ export const EXPORT_MAP: Record<string, string> = {
ComboboxTransitionOptions: "@react-md/core/form/useCombobox",
ComboboxWidgetPopupProps: "@react-md/core/form/useCombobox",
ComboboxWidgetProps: "@react-md/core/form/useCombobox",
CompletedFileUploadStats: "@react-md/core/form/fileUtils",
CompletedFileUploadStats: "@react-md/core/files/utils",
ConfigurableAutocompleteDropdownButtonProps:
"@react-md/core/autocomplete/AutocompleteDropdownButton",
ConfigurableComboboxMenuProps: "@react-md/core/form/useCombobox",
Expand Down Expand Up @@ -2375,28 +2375,28 @@ export const EXPORT_MAP: Record<string, string> = {
fieldset: "@react-md/core/form/Fieldset",
FieldsetClassNameOptions: "@react-md/core/form/Fieldset",
FieldsetProps: "@react-md/core/form/Fieldset",
FileAccessError: "@react-md/core/form/fileUtils",
FileExtensionError: "@react-md/core/form/fileUtils",
FileInput: "@react-md/core/form/FileInput",
fileInput: "@react-md/core/form/FileInput",
FileInputClassNameOptions: "@react-md/core/form/FileInput",
FileInputHTMLAttributes: "@react-md/core/form/FileInput",
FileInputProps: "@react-md/core/form/FileInput",
FileReaderParser: "@react-md/core/form/fileUtils",
FileReaderResult: "@react-md/core/form/fileUtils",
FileSizeError: "@react-md/core/form/fileUtils",
FilesValidationOptions: "@react-md/core/form/fileUtils",
FilesValidator: "@react-md/core/form/fileUtils",
FileUploadActions: "@react-md/core/form/useFileUpload",
FileUploadHandlers: "@react-md/core/form/fileUtils",
FileUploadHookReturnValue: "@react-md/core/form/useFileUpload",
FileUploadHookState: "@react-md/core/form/useFileUpload",
FileUploadOptions: "@react-md/core/form/useFileUpload",
FileUploadState: "@react-md/core/form/useFileUpload",
FileUploadStats: "@react-md/core/form/fileUtils",
FileUploadStatus: "@react-md/core/form/fileUtils",
FileValidationError: "@react-md/core/form/fileUtils",
FileValidationOptions: "@react-md/core/form/fileUtils",
FileAccessError: "@react-md/core/files/validation",
FileExtensionError: "@react-md/core/files/validation",
FileInput: "@react-md/core/files/FileInput",
fileInput: "@react-md/core/files/styles",
FileInputClassNameOptions: "@react-md/core/files/styles",
FileInputHTMLAttributes: "@react-md/core/files/FileInput",
FileInputProps: "@react-md/core/files/FileInput",
FileReaderParser: "@react-md/core/files/utils",
FileReaderResult: "@react-md/core/files/utils",
FileSizeError: "@react-md/core/files/validation",
FilesValidationOptions: "@react-md/core/files/validation",
FilesValidator: "@react-md/core/files/validation",
FileUploadActions: "@react-md/core/files/useFileUpload",
FileUploadHandlers: "@react-md/core/files/utils",
FileUploadHookReturnValue: "@react-md/core/files/useFileUpload",
FileUploadHookState: "@react-md/core/files/useFileUpload",
FileUploadOptions: "@react-md/core/files/useFileUpload",
FileUploadState: "@react-md/core/files/useFileUpload",
FileUploadStats: "@react-md/core/files/utils",
FileUploadStatus: "@react-md/core/files/utils",
FileValidationError: "@react-md/core/files/validation",
FileValidationOptions: "@react-md/core/files/validation",
FilterAutocompleteOptions:
"@react-md/core/autocomplete/FilterAutocompleteOptions",
FilterAutocompleteOptionsProps:
Expand Down Expand Up @@ -2473,7 +2473,7 @@ export const EXPORT_MAP: Record<string, string> = {
FuzzyMatchOptions: "@react-md/core/searching/useFuzzyMatch",
fuzzySearch: "@react-md/core/searching/fuzzy",
FuzzySearchOptions: "@react-md/core/searching/fuzzy",
GenericFileError: "@react-md/core/form/fileUtils",
GenericFileError: "@react-md/core/files/validation",
getAboveCoord: "@react-md/core/positioning/utils",
getAnchor: "@react-md/core/tooltip/utils",
getBelowCoord: "@react-md/core/positioning/utils",
Expand All @@ -2494,8 +2494,8 @@ export const EXPORT_MAP: Record<string, string> = {
GetErrorIconOptions: "@react-md/core/form/validation",
GetErrorMessage: "@react-md/core/form/validation",
GetExpansionPanelProps: "@react-md/core/expansion-panel/useExpansionPanels",
GetFileParser: "@react-md/core/form/fileUtils",
getFileParser: "@react-md/core/form/fileUtils",
GetFileParser: "@react-md/core/files/utils",
getFileParser: "@react-md/core/files/utils",
getFirstFocusableIndex: "@react-md/core/movement/utils",
getFixedPosition: "@react-md/core/positioning/getFixedPosition",
getFocusableElement: "@react-md/core/focus/utils",
Expand Down Expand Up @@ -2537,7 +2537,7 @@ export const EXPORT_MAP: Record<string, string> = {
getRippleStyle: "@react-md/core/interaction/utils",
getScrollbarWidth: "@react-md/core/scroll/getScrollbarWidth",
getSearchText: "@react-md/core/movement/utils",
getSplitFileUploads: "@react-md/core/form/fileUtils",
getSplitFileUploads: "@react-md/core/files/utils",
GetTabListScrollToOptions: "@react-md/core/tabs/getTabListScrollToOptions",
getTabListScrollToOptions: "@react-md/core/tabs/getTabListScrollToOptions",
getTabRoleOnly: "@react-md/core/tabs/utils",
Expand Down Expand Up @@ -2629,7 +2629,7 @@ export const EXPORT_MAP: Record<string, string> = {
IntersectionObserverRoot: "@react-md/core/useIntersectionObserver",
IntersectionObserverRootMargin: "@react-md/core/useIntersectionObserver",
IntersectionObserverThreshold: "@react-md/core/useIntersectionObserver",
isAudioFile: "@react-md/core/form/fileUtils",
isAudioFile: "@react-md/core/files/utils",
isCaseInsensitiveMatch: "@react-md/core/searching/caseInsensitive",
IsCaseInsensitiveMatchOptions: "@react-md/core/searching/caseInsensitive",
isChangeableHTMLElement: "@react-md/core/form/utils",
Expand All @@ -2640,27 +2640,27 @@ export const EXPORT_MAP: Record<string, string> = {
isElementVisible: "@react-md/core/utils/isElementVisible",
IsErrored: "@react-md/core/form/validation",
IsErroredOptions: "@react-md/core/form/validation",
isFileAccessError: "@react-md/core/form/fileUtils",
isFileExtensionError: "@react-md/core/form/fileUtils",
isFileSizeError: "@react-md/core/form/fileUtils",
isFileAccessError: "@react-md/core/files/validation",
isFileExtensionError: "@react-md/core/files/validation",
isFileSizeError: "@react-md/core/files/validation",
isFocusable: "@react-md/core/focus/utils",
IsFocusTypeDisabled: "@react-md/core/focus/useFocusContainer",
isGenericFileError: "@react-md/core/form/fileUtils",
isImageFile: "@react-md/core/form/fileUtils",
isMediaFile: "@react-md/core/form/fileUtils",
isGenericFileError: "@react-md/core/files/validation",
isImageFile: "@react-md/core/files/utils",
isMediaFile: "@react-md/core/files/utils",
isMouseDragStartEvent: "@react-md/core/draggable/utils",
isNotFocusable: "@react-md/core/movement/utils",
isSearchableEvent: "@react-md/core/movement/utils",
IsStickyTableSectionActive: "@react-md/core/table/types",
isTableFooterStickyActive: "@react-md/core/table/useStickyTableSection",
isTableHeaderStickyActive: "@react-md/core/table/useStickyTableSection",
isTextFile: "@react-md/core/form/fileUtils",
isTooManyFilesError: "@react-md/core/form/fileUtils",
isTextFile: "@react-md/core/files/utils",
isTooManyFilesError: "@react-md/core/files/validation",
isTouchDragStartEvent: "@react-md/core/draggable/utils",
isTypeEvent: "@react-md/core/movement/utils",
IsValidFileName: "@react-md/core/form/fileUtils",
isValidFileName: "@react-md/core/form/fileUtils",
isVideoFile: "@react-md/core/form/fileUtils",
IsValidFileName: "@react-md/core/files/validation",
isValidFileName: "@react-md/core/files/validation",
isVideoFile: "@react-md/core/files/utils",
isWithinViewport: "@react-md/core/positioning/utils",
KeyboardMovementBehavior: "@react-md/core/movement/types",
KeyboardMovementConfig: "@react-md/core/movement/types",
Expand Down Expand Up @@ -3027,7 +3027,7 @@ export const EXPORT_MAP: Record<string, string> = {
PreconfiguredTransitionOptions: "@react-md/core/transition/types",
PRESSED_CLASS_NAME: "@react-md/core/interaction/useElementInteraction",
primaryColorVar: "@react-md/core/theme/cssVars",
ProcessingFileUploadStats: "@react-md/core/form/fileUtils",
ProcessingFileUploadStats: "@react-md/core/files/utils",
PROGRAMMATICALLY_FOCUSABLE: "@react-md/core/focus/utils",
ProgressA11y: "@react-md/core/progress/getProgressA11y",
ProgressProps: "@react-md/core/progress/types",
Expand Down Expand Up @@ -3263,7 +3263,7 @@ export const EXPORT_MAP: Record<string, string> = {
SnackbarPosition: "@react-md/core/snackbar/snackbarStyles",
SnackbarProps: "@react-md/core/snackbar/Snackbar",
SortOrder: "@react-md/core/table/types",
SplitFileUploads: "@react-md/core/form/fileUtils",
SplitFileUploads: "@react-md/core/files/utils",
SrOnly: "@react-md/core/typography/SrOnly",
SrOnlyProps: "@react-md/core/typography/SrOnly",
SsrProvider: "@react-md/core/SsrProvider",
Expand Down Expand Up @@ -3487,7 +3487,7 @@ export const EXPORT_MAP: Record<string, string> = {
TooltipPositionHookReturnValue: "@react-md/core/tooltip/useTooltipPosition",
TooltipPositioningOptions: "@react-md/core/tooltip/useTooltip",
TooltipProps: "@react-md/core/tooltip/Tooltip",
TooManyFilesError: "@react-md/core/form/fileUtils",
TooManyFilesError: "@react-md/core/files/validation",
TOP_CENTER_ANCHOR: "@react-md/core/positioning/constants",
TOP_INNER_LEFT_ANCHOR: "@react-md/core/positioning/constants",
TOP_INNER_RIGHT_ANCHOR: "@react-md/core/positioning/constants",
Expand Down Expand Up @@ -3591,7 +3591,7 @@ export const EXPORT_MAP: Record<string, string> = {
useExpandableLayout: "@react-md/core/layout/useExpandableLayout",
useExpansionList: "@react-md/core/expansion-panel/useExpansionList",
useExpansionPanels: "@react-md/core/expansion-panel/useExpansionPanels",
useFileUpload: "@react-md/core/form/useFileUpload",
useFileUpload: "@react-md/core/files/useFileUpload",
useFixedPositioning: "@react-md/core/positioning/useFixedPositioning",
useFocusContainer: "@react-md/core/focus/useFocusContainer",
useFormReset: "@react-md/core/form/useFormReset",
Expand Down Expand Up @@ -3681,10 +3681,10 @@ export const EXPORT_MAP: Record<string, string> = {
"@react-md/core/interaction/UserInteractionModeProvider",
useWindowSize: "@react-md/core/useWindowSize",
useWindowSplitter: "@react-md/core/window-splitter/useWindowSplitter",
ValidatedFilesResult: "@react-md/core/form/fileUtils",
ValidatedFilesResult: "@react-md/core/files/validation",
ValidatedNumberFieldImplementation: "@react-md/core/form/useNumberField",
ValidatedTextFieldImplementation: "@react-md/core/form/useTextField",
validateFiles: "@react-md/core/form/fileUtils",
validateFiles: "@react-md/core/files/validation",
VerticalPosition: "@react-md/core/positioning/types",
VirtualFocusableIndexOptions: "@react-md/core/movement/utils",
wait: "@react-md/core/utils/wait",
Expand Down
4 changes: 4 additions & 0 deletions packages/core/src/_core.scss
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
@forward "expansion-panel/expansion-panel" as expansion-panel-*;
@forward "menu/menu" as menu-*;
@forward "form/form" as form-*;
@forward "files/files" as files-*;
@forward "autocomplete/autocomplete" as autocomplete-*;
@forward "layout/layout" as layout-*;
@forward "navigation/navigation" as navigation-*;
Expand Down Expand Up @@ -72,6 +73,7 @@
@use "window-splitter/window-splitter";
@use "menu/menu";
@use "form/form";
@use "files/files";
@use "layout/layout";
@use "navigation/navigation";
@use "object-fit";
Expand Down Expand Up @@ -106,6 +108,7 @@ $_layer-order: (
window-splitter,
menu,
form,
files,
autocomplete,
layout,
navigation,
Expand Down Expand Up @@ -402,6 +405,7 @@ $_layer-order: (
@include draggable.styles($disable-layer);
@include expansion-panel.styles($disable-layer);
@include form.styles($disable-layer);
@include files.styles($disable-layer);
@include icon.styles($disable-layer);
@include interaction.styles($disable-layer);
@include layout.styles($disable-layer);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,29 +1,17 @@
"use client";
import { cnb } from "cnbuilder";
import {
forwardRef,
type InputHTMLAttributes,
type LabelHTMLAttributes,
type ReactNode,
} from "react";
import {
button,
type ButtonClassNameOptions,
type ButtonClassNameThemeOptions,
} from "../button/buttonStyles.js";
import { type ButtonClassNameThemeOptions } from "../button/buttonStyles.js";
import { getIcon } from "../icon/iconConfig.js";
import { useElementInteraction } from "../interaction/useElementInteraction.js";
import { type PropsWithRef } from "../types.js";
import { SrOnly } from "../typography/SrOnly.js";
import { useEnsuredId } from "../useEnsuredId.js";

/** @since 6.0.0 */
export type FileInputClassNameOptions = ButtonClassNameOptions;

/** @since 6.0.0 */
export function fileInput(options: FileInputClassNameOptions = {}): string {
return cnb("rmd-file-input", button(options));
}
import { fileInput } from "./styles.js";

/** @since 6.0.0 */
export type FileInputHTMLAttributes = Omit<
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,8 @@ import {
screen,
userEvent,
} from "../../test-utils/index.js";

import { FileInput } from "../FileInput.js";
import { useFileUpload, type FileUploadOptions } from "../useFileUpload.js";
import { type FileUploadOptions, useFileUpload } from "../useFileUpload.js";

function createFile(name: string, bytes: number): File {
const content = new Uint8Array(bytes);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
import { describe, expect, it } from "@jest/globals";
import type { FileUploadStats } from "../fileUtils.js";
import {
FileAccessError,
FileExtensionError,
FileSizeError,
GenericFileError,
getFileParser,
getSplitFileUploads,
type FileUploadStats,
} from "../utils.js";
import {
isGenericFileError,
GenericFileError,
FileAccessError,
isFileAccessError,
isFileExtensionError,
isGenericFileError,
FileExtensionError,
validateFiles,
isValidFileName,
FileSizeError,
TooManyFilesError,
validateFiles,
} from "../fileUtils.js";
} from "../validation.js";

function createFile(name: string, bytes: number): File {
const content = new Uint8Array(bytes);
Expand Down
22 changes: 22 additions & 0 deletions packages/core/src/files/_files.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
@use "../utils";
@use "../interaction/interaction";

$disable-everything: false !default;

@mixin styles($disable-layer: false) {
@if not $disable-everything {
@include utils.optional-layer(files, $disable-layer) {
@if utils.$disable-has-selectors or utils.$disable-focus-visible {
.rmd-file-input:focus-within::before {
@include utils.keyboard-only {
@include interaction.focus-styles;
}
}
} @else {
.rmd-file-input:has(:focus-visible)::before {
@include interaction.focus-styles;
}
}
}
}
}
10 changes: 10 additions & 0 deletions packages/core/src/files/styles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { cnb } from "cnbuilder";
import { type ButtonClassNameOptions, button } from "../button/buttonStyles.js";

/** @since 6.0.0 */
export type FileInputClassNameOptions = ButtonClassNameOptions;

/** @since 6.0.0 */
export function fileInput(options: FileInputClassNameOptions = {}): string {
return cnb("rmd-file-input", button(options));
}
Loading

0 comments on commit e86c158

Please sign in to comment.