@fluentui-react-native/composition 0.6.9

package/src/__snapshots__/composeFactory.test.tsx.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`composeFactory test suite Base component render 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "black",
+      "borderColor": "green",
+      "borderWidth": 1,
+      "height": 20,
+      "width": 30,
+    }
+  }
+>
+  <Text
+    style={
+      Object {
+        "color": "white",
+      }
+    }
+  >
+    Hello
+  </Text>
+</View>
+`;
+
+exports[`composeFactory test suite Base component render 2`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "pink",
+      "borderColor": "green",
+      "borderWidth": 1,
+      "height": 20,
+      "width": 30,
+    }
+  }
+>
+  <Text
+    style={
+      Object {
+        "color": "white",
+      }
+    }
+  >
+    Hello
+  </Text>
+</View>
+`;

package/src/composeFactory.test.tsx

@@ -0,0 +1,94 @@
+/** @jsx withSlots */
+import { withSlots } from '@fluentui-react-native/use-slot';
+import * as renderer from 'react-test-renderer';
+import { composeFactory, UseStyledSlots } from './composeFactory';
+import { ViewProps, View, Text, TextProps, ColorValue } from 'react-native';
+import { ThemeHelper } from '@fluentui-react-native/use-styling';
+
+type Theme = {
+  values: {
+    backgroundColor?: ColorValue;
+    color?: ColorValue;
+  };
+  components: {
+    [key: string]: object;
+  };
+};
+
+const theme: Theme = {
+  values: {
+    backgroundColor: 'black',
+    color: 'white',
+  },
+  components: {},
+};
+
+type SlotProps = {
+  outer: ViewProps;
+  content: TextProps;
+};
+
+type Tokens = {
+  backgroundColor?: ColorValue;
+  color?: ColorValue;
+};
+
+const themeHelper: ThemeHelper<Theme> = {
+  useTheme: () => theme,
+  getComponentInfo: (theme: Theme, name: string) => {
+    return theme?.components ?? theme.components[name];
+  },
+};
+
+function mergeProps<T>(p1: T, p2: T): T {
+  return { ...p1, ...p2 };
+}
+
+const Base = composeFactory<ViewProps, SlotProps, Tokens, Theme>(
+  {
+    tokens: [
+      (t) => ({
+        backgroundColor: t.values.backgroundColor,
+        color: t.values.color,
+      }),
+    ],
+    slotProps: {
+      outer: (tokens) => ({ style: { backgroundColor: tokens.backgroundColor } }),
+      content: (tokens) => ({ style: { color: tokens.color } }),
+    },
+    slots: {
+      outer: View,
+      content: Text,
+    },
+    render: (props: ViewProps, useSlots: UseStyledSlots<ViewProps, SlotProps>) => {
+      const Slots = useSlots(props);
+      return (extra: ViewProps) => (
+        <Slots.outer {...mergeProps(props, extra)}>
+          <Slots.content>Hello</Slots.content>
+        </Slots.outer>
+      );
+    },
+  },
+  themeHelper,
+);
+
+const Customized = Base.customize({ backgroundColor: 'pink' });
+
+const mixinStyle = {
+  width: 30,
+  height: 20,
+  borderColor: 'green',
+  borderWidth: 1,
+};
+
+describe('composeFactory test suite', () => {
+  it('Base component render', () => {
+    const tree = renderer.create(<Base style={mixinStyle} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Base component render', () => {
+    const tree = renderer.create(<Customized style={mixinStyle} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/composeFactory.ts

@@ -0,0 +1,90 @@
+import { UseStylingOptions, TokenSettings, ThemeHelper, HasLayer, buildUseStyling } from '@fluentui-react-native/use-styling';
+import { ComposableFunction, stagedComponent } from '@fluentui-react-native/use-slot';
+import { UseSlotOptions, buildUseSlots, Slots } from '@fluentui-react-native/use-slots';
+import { immutableMergeCore, MergeOptions } from '@fluentui-react-native/immutable-merge';
+
+export type UseStyledSlots<TProps, TSlotProps> = (props: TProps, lookup?: HasLayer) => Slots<TSlotProps>;
+
+export type ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = UseStylingOptions<
+  TProps,
+  TSlotProps,
+  TTokens,
+  TTheme
+> &
+  UseSlotOptions<TSlotProps> & {
+    /**
+     * Includes from UseStylingOptions:
+     *
+     */
+    displayName?: string;
+
+    /**
+     * staged render function that takes props and a useSlots hook as an input
+     */
+    render: (props: TProps, useSlots: UseStyledSlots<TProps, TSlotProps>) => React.FunctionComponent<TProps>;
+
+    /**
+     * optional statics to attach to the component
+     */
+    statics?: TStatics;
+  };
+
+export type ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object> = ComposableFunction<TProps> & {
+  __options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+  customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+  compose: (
+    options: Partial<ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>>,
+  ) => ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+} & TStatics;
+
+/**
+ * options get deep merged except the tokens array gets appended
+ */
+const mergeOptions: MergeOptions = {
+  tokens: 'appendArray',
+  object: true,
+};
+
+export function composeFactory<TProps, TSlotProps, TTokens, TTheme, TStatics extends object = object>(
+  options: ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>,
+  themeHelper: ThemeHelper<TTheme>,
+  base?: ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>,
+): ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics> {
+  type LocalComponent = ComposeFactoryComponent<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+  type LocalOptions = ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>;
+
+  // merge options together if a base is specified
+  const baseOptions: LocalOptions = base?.__options as LocalOptions;
+  options = baseOptions ? immutableMergeCore<LocalOptions>(mergeOptions, baseOptions, options) : { ...options };
+
+  // build styling if styling options are specified
+  options.useStyling = options.slotProps || options.tokens ? buildUseStyling(options, themeHelper) : () => ({} as TSlotProps);
+
+  // build the slots hook, which will use the styling hook if it has been built
+  const useSlots = buildUseSlots(options) as UseStyledSlots<TProps, TSlotProps>;
+
+  // build the staged component
+  const component = stagedComponent<TProps>((props) => options.render(props, useSlots)) as LocalComponent;
+
+  // attach additional props to the returned component
+  component.displayName = options.displayName;
+  component.__options = options;
+  component.customize = (...tokens: LocalOptions['tokens']) =>
+    composeFactory<TProps, TSlotProps, TTokens, TTheme, TStatics>(
+      immutableMergeCore(mergeOptions, options, { tokens: tokens } as LocalOptions),
+      themeHelper,
+    );
+
+  component.compose = (customOptions: Partial<LocalOptions>) =>
+    composeFactory<TProps, TSlotProps, TTokens, TTheme, TStatics>(
+      immutableMergeCore(mergeOptions, options, customOptions) as LocalOptions,
+      themeHelper,
+    );
+
+  // attach statics if specified
+  if (options.statics) {
+    Object.assign(component, options.statics);
+  }
+
+  return component;
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './composeFactory';