chore: more strict type illusterationkind and prop drill classname an… (#367)

* chore: more strict typing for illusterationkind and prop drill classname and style

Author: axis-d0op

components/empty-view/src/constants.ts

@@ -14,6 +14,8 @@ import {
   EmptySpaceLight,
   FileMissingDark,
   FileMissingLight,
+  MediaDark,
+  MediaLight,
   NoAccessDark,
   NoAccessLight,
   NoConnectionDark,
@@ -35,9 +37,10 @@ import {
   UnderConstructionDark,
   UnderConstructionLight,
 } from "@axiscommunications/fluent-illustrations";
+import { IllustrationKind } from "./types";
 
 export const Illustration: Record<
-  string,
+  IllustrationKind,
   ReturnType<typeof bundleIllustrationSmart>
 > = {
   "add-user-profile": bundleIllustrationSmart(
@@ -50,6 +53,7 @@ export const Illustration: Record<
   "empty-space": bundleIllustrationSmart(EmptySpaceDark, EmptySpaceLight),
   "file-missing": bundleIllustrationSmart(FileMissingDark, FileMissingLight),
   general: bundleIllustrationSmart(EmptyGeneralDark, EmptyGeneralLight),
+  media: bundleIllustrationSmart(MediaDark, MediaLight),
   "no-access": bundleIllustrationSmart(NoAccessDark, NoAccessLight),
   "no-connection": bundleIllustrationSmart(NoConnectionDark, NoConnectionLight),
   "no-content": bundleIllustrationSmart(NoContentDark, NoContentLight),

components/empty-view/src/styles.ts

@@ -1,4 +1,10 @@
-import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
+import {
+  makeStyles,
+  mergeClasses,
+  shorthands,
+  tokens,
+} from "@fluentui/react-components";
+import { HtmlDivAttributesRestProps } from "./types";
 
 export const useStyles = makeStyles({
   container: {
@@ -48,3 +54,10 @@ export const useStyles = makeStyles({
     verticalAlign: "middle",
   },
 });
+
+export function useContainerStyle({ className }: HtmlDivAttributesRestProps) {
+  const styles = useStyles();
+  const containerStyle = mergeClasses(styles.container, className);
+
+  return containerStyle;
+}

components/empty-view/src/types.ts

@@ -1,17 +1,40 @@
-import { PropsWithChildren, ReactNode } from "react";
+import { HTMLAttributes, PropsWithChildren, ReactNode } from "react";
 
-import { Illustration } from "./constants";
-
-export type IllustrationKind = keyof typeof Illustration;
+export type IllustrationKind =
+  | "add-user-profile"
+  | "data"
+  | "devices"
+  | "empty-folder"
+  | "empty-space"
+  | "file-missing"
+  | "general"
+  | "media"
+  | "no-access"
+  | "no-connection"
+  | "no-content"
+  | "no-match"
+  | "no-sites"
+  | "not-found"
+  | "settings"
+  | "success"
+  | "team"
+  | "under-construction";
 
 export interface ContentProps {
   readonly body: ReactNode;
   readonly illustration: IllustrationKind;
   readonly title: string;
 }
 
-export type EmptyViewProps = PropsWithChildren<{
-  readonly after?: ReactNode;
-  readonly illustration: IllustrationKind;
-  readonly title: string;
-}>;
+export type EmptyViewProps = PropsWithChildren<
+  {
+    readonly after?: ReactNode;
+    readonly illustration: IllustrationKind;
+    readonly title: string;
+  } & HtmlDivAttributesRestProps
+>;
+
+export type HtmlDivAttributesRestProps = Pick<
+  HTMLAttributes<HTMLDivElement>,
+  "className" | "style"
+>;

components/empty-view/src/view.tsx

@@ -11,38 +11,60 @@ import {
 
 import { useMediaQuery } from "@axiscommunications/fluent-hooks";
 
-import { useStyles } from "./styles";
-import { ContentProps, EmptyViewProps } from "./types";
+import { useContainerStyle, useStyles } from "./styles";
+import {
+  ContentProps,
+  EmptyViewProps,
+  HtmlDivAttributesRestProps,
+} from "./types";
 import { Illustration } from "./constants";
 
-function ContainerSpacious({ children }: PropsWithChildren) {
-  const screenStyles = useStyles();
+function ContainerSpacious(
+  { children, className, ...rest }: PropsWithChildren<
+    HtmlDivAttributesRestProps
+  >
+) {
+  const styles = useStyles();
+  const containerStyle = useContainerStyle({ className });
+
   return (
-    <div className={screenStyles.container}>
-      <div className={screenStyles.spacer} />
+    <div className={containerStyle} {...rest}>
+      <div className={styles.spacer} />
       {children}
-      <div className={screenStyles.spacer} />
-      <div className={screenStyles.spacer} />
+      <div className={styles.spacer} />
+      <div className={styles.spacer} />
     </div>
   );
 }
 
-function ContainerCompact({ children }: PropsWithChildren) {
-  const screenStyles = useStyles();
+function ContainerCompact(
+  { children, className, ...rest }: PropsWithChildren<
+    HtmlDivAttributesRestProps
+  >
+) {
+  const styles = useStyles();
+  const containerStyle = useContainerStyle({ className });
+
   return (
-    <div className={screenStyles.container}>
-      <div className={screenStyles.spacer} />
+    <div className={containerStyle} {...rest}>
+      <div className={styles.spacer} />
       {children}
-      <div className={screenStyles.spacer} />
+      <div className={styles.spacer} />
     </div>
   );
 }
 
-function ContainerTop({ children }: PropsWithChildren) {
-  const screenStyles = useStyles();
+function ContainerTop(
+  { children, className, ...rest }: PropsWithChildren<
+    HtmlDivAttributesRestProps
+  >
+) {
+  const styles = useStyles();
+  const containerStyle = useContainerStyle({ className });
+
   return (
-    <div className={screenStyles.container}>
-      <div className={screenStyles.fixedSpacer} />
+    <div className={containerStyle} {...rest}>
+      <div className={styles.fixedSpacer} />
       {children}
     </div>
   );
@@ -97,12 +119,12 @@ function ContentExtraSmall(
 }
 
 export function MainEmptyView(
-  { after, illustration, title, children }: EmptyViewProps
+  { after, illustration, title, children, ...rest }: EmptyViewProps
 ) {
   const screenStyles = useStyles();
   const media = useMediaQuery();
   return (
-    <ContainerSpacious>
+    <ContainerSpacious {...rest}>
       {media === "small"
         ? (
           <ContentMedium
@@ -124,11 +146,11 @@ export function MainEmptyView(
 }
 
 export function PanelEmptyView(
-  { after, illustration, title, children }: EmptyViewProps
+  { after, illustration, title, children, ...rest }: EmptyViewProps
 ) {
   const screenStyles = useStyles();
   return (
-    <ContainerTop>
+    <ContainerTop {...rest}>
       <ContentMedium
         illustration={illustration}
         title={title}
@@ -140,10 +162,10 @@ export function PanelEmptyView(
 }
 
 export function SubmenuEmptyView(
-  { illustration, title, children }: Omit<EmptyViewProps, "after">
+  { illustration, title, children, ...rest }: Omit<EmptyViewProps, "after">
 ) {
   return (
-    <ContainerTop>
+    <ContainerTop {...rest}>
       <ContentSmall illustration={illustration} title={title} body={children} />
     </ContainerTop>
   );
@@ -163,11 +185,11 @@ export function SubmenuEmptyView(
  * ```
  */
 export function DialogEmptyView(
-  { after, title, children }: Omit<EmptyViewProps, "illustration">
+  { after, title, children, ...rest }: Omit<EmptyViewProps, "illustration">
 ) {
   const screenStyles = useStyles();
   return (
-    <ContainerCompact>
+    <ContainerCompact {...rest}>
       <ContentExtraSmall title={title} body={children} />
       <div className={screenStyles.after}>{after}</div>
     </ContainerCompact>