reorganize FluentUI component files

packages/fluentui/src/components/fAccordion/fAccordionPanel.ts → packages/fluentui/src/components/accordionPanel/index.ts

@@ -1,6 +1,6 @@
 import { Content } from "refina";
 import FluentUI from "../../plugin";
-import styles from "./panel.styles";
+import styles from "./styles";
 
 declare module "refina" {
   interface Components {

packages/fluentui/src/components/fButton/fButton.ts → packages/fluentui/src/components/button/index.ts

@@ -1,6 +1,6 @@
 import { Content } from "refina";
 import FluentUI from "../../plugin";
-import styles from "./fButton.styles";
+import styles from "./styles";
 import { FButtonApperance, FButtonShape } from "./types";
 
 declare module "refina" {
@@ -65,3 +65,5 @@ FluentUI.triggerComponents.fCircularButton = function (_) {
   return (inner, disabled, appearance) =>
     _.fButton(inner, disabled, "circular", appearance) && this.$fire();
 };
+
+export * from "./types";

packages/fluentui/src/components/fButton/fButton.styles.ts → packages/fluentui/src/components/button/styles.ts

@@ -6,7 +6,7 @@ import {
   mergeClasses,
 } from "@refina/griffel";
 import { createCustomFocusIndicatorStyle } from "../../focus";
-import { FButtonApperance, FButtonShape } from ".";
+import { FButtonApperance, FButtonShape } from "./types";
 
 export const buttonClassNames = {
   root: "fui-Button",

packages/fluentui/src/components/fCheckbox/fCheckbox.ts → packages/fluentui/src/components/checkbox/index.ts

@@ -1,11 +1,9 @@
 import "@refina/fluentui-icons/checkmark.ts";
 import "@refina/fluentui-icons/square.ts";
-import { DOMElementComponent, Model, valueOf, ref } from "refina";
+import { DOMElementComponent, Model, ref, valueOf } from "refina";
 import FluentUI from "../../plugin";
-import "../fLabel";
-import styles from "./fCheckbox.styles";
-
-export type FCheckboxState = true | false | "mixed";
+import styles from "./styles";
+import { FCheckboxState } from "./types";
 
 declare module "refina" {
   interface Components {
@@ -59,3 +57,6 @@ FluentUI.triggerComponents.fCheckbox = function (_) {
     );
   };
 };
+
+export * from "./types";
+export * from "./utils";

packages/fluentui/src/components/checkbox/types.ts

@@ -0,0 +1 @@
+export type FCheckboxState = true | false | "mixed";

packages/fluentui/src/components/fCheckbox/utils.ts → packages/fluentui/src/components/checkbox/utils.ts

@@ -1,4 +1,4 @@
-import type { FCheckboxState } from "./fCheckbox";
+import type { FCheckboxState } from "./types";
 
 /**
  * @returns the mixed state if any of the sources is mixed, true if any of the sources is true and none is false, false otherwise

packages/fluentui/src/components/fCombobox/fDropdown.ts → packages/fluentui/src/components/combobox/index.ts

@@ -10,12 +10,10 @@ import {
   valueOf,
 } from "refina";
 import FluentUI from "../../plugin";
-import "../../positioning";
-import "../fPortal";
-import dropdownStyles from "./fDropdown.styles";
-import { DropdownAppearance } from "./fDropdown.types";
 import listboxStyles from "./listbox.styles";
 import optionStyles from "./option.styles";
+import dropdownStyles from "./styles";
+import { FDropdownAppearance } from "./types";
 
 /**
  * enum of actions available in any type of managed dropdown control
@@ -144,7 +142,7 @@ declare module "refina" {
       options: OptionValue[],
       disabled?: boolean | boolean[],
       placeholder?: string,
-      appearance?: DropdownAppearance,
+      appearance?: FDropdownAppearance,
     ): this is {
       $ev: OptionValue;
     };
@@ -395,3 +393,5 @@ FluentUI.triggerComponents.fUnderlineDropdown = function (_) {
       this.$fire(_.$ev);
   };
 };
+
+export * from "./types";

packages/fluentui/src/components/fCombobox/fDropdown.styles.ts → packages/fluentui/src/components/combobox/styles.ts

@@ -1,6 +1,6 @@
 import { tokens, typographyStyles } from "@fluentui/tokens";
 import { makeStyles, mergeClasses, shorthands } from "@refina/griffel";
-import { DropdownAppearance } from "./fDropdown.types";
+import { FDropdownAppearance } from "./types";
 import { iconSizes } from "./tokens";
 
 export const dropdownClassNames = {
@@ -234,7 +234,11 @@ const iconStyles = makeStyles({
 });
 
 export default {
-  root: (appearance: DropdownAppearance, disabled: boolean, invalid: boolean) =>
+  root: (
+    appearance: FDropdownAppearance,
+    disabled: boolean,
+    invalid: boolean,
+  ) =>
     mergeClasses(
       dropdownClassNames.root,
       styles.root,

packages/fluentui/src/components/fCombobox/fDropdown.types.ts → packages/fluentui/src/components/combobox/types.ts

@@ -1,4 +1,4 @@
-export type DropdownAppearance =
+export type FDropdownAppearance =
   | "filled-darker"
   | "filled-lighter"
   | "outline"

packages/fluentui/src/components/fDialog/fDialog.ts → packages/fluentui/src/components/dialog/index.ts

@@ -1,7 +1,5 @@
 import { Content, Model, View, model, valueOf } from "refina";
 import FluentUI from "../../plugin";
-import "./fDialogBody";
-import "./fDialogSurface";
 
 declare module "refina" {
   interface Components {

packages/fluentui/src/components/fDialog/fDialogBody.ts → packages/fluentui/src/components/dialogBody/index.ts

@@ -1,10 +1,10 @@
 import "@refina/fluentui-icons/dismiss.js";
 import { Content, Context } from "refina";
 import FluentUI from "../../plugin";
-import dialogActionsStyles from "./dialogActions.styles";
-import dialogBodyStyles from "./dialogBody.styles";
-import dialogContentStyles from "./dialogContent.styles";
-import dialogTitleStyles from "./dialogTitle.styles";
+import dialogActionsStyles from "./actions.styles";
+import dialogBodyStyles from "./body.styles";
+import dialogContentStyles from "./content.styles";
+import dialogTitleStyles from "./title.styles";
 
 export const fromCloseButtonSym = Symbol("fDialogCloseEventFromCloseButton");
 export type FDialogBodyEventData =

packages/fluentui/src/components/fDialog/fDialogSurface.ts → packages/fluentui/src/components/dialogSurface/index.ts

@@ -1,7 +1,6 @@
 import { Content } from "refina";
 import FluentUI from "../../plugin";
-import "../fPortal";
-import dialogSurfaceStyles from "./dialogSurface.styles";
+import dialogSurfaceStyles from "./styles";
 
 declare module "refina" {
   interface Components {

packages/fluentui/src/components/fDialog/dialogSurface.styles.ts → packages/fluentui/src/components/dialogSurface/styles.ts

@@ -10,7 +10,7 @@ import {
   SURFACE_PADDING,
   SURFACE_BORDER_WIDTH,
   MEDIA_QUERY_BREAKPOINT_SELECTOR,
-} from "./constants";
+} from "../dialogBody/constants";
 
 export const dialogSurfaceClassNames = {
   root: "fui-DialogSurface",

packages/fluentui/src/components/fDivider/fDivider.ts → packages/fluentui/src/components/divider/index.ts

@@ -1,6 +1,6 @@
 import { Content } from "refina";
 import FluentUI from "../../plugin";
-import styles from "./fDivider.styles";
+import styles from "./styles";
 import { DividerContentAlignment } from "./types";
 
 declare module "refina" {
@@ -17,3 +17,5 @@ FluentUI.outputComponents.fDivider = function (_) {
     _._div({}, _ => styles.wrapper(_) && _._div({}, inner));
   };
 };
+
+export * from "./types";