Merge pull request #136 from buildo/showcase

Add utility for creating a showcase

Author: gabro

Diff for: packages/bento-design-system/src/AreaLoader/createAreaLoader.tsx

@@ -33,6 +33,8 @@ type Props = {
   message?: LocalizedString;
 };
 
+export type { Props as AreaLoaderProps };
+
 export function createAreaLoader(config: AreaLoaderConfig) {
   /**
    *  `Loader` fills the parent container with an overlay and renders an animated indefinite loader

Diff for: packages/bento-design-system/src/Avatar/createAvatar.tsx

@@ -18,6 +18,8 @@ type Props = {
     | "pink";
 };
 
+export type { Props as AvatarProps };
+
 export function createAvatar(config: AvatarConfig) {
   return function Avatar({ color, name }: Props) {
     const initial = name?.trim()[0];

Diff for: packages/bento-design-system/src/DisclosureGroup/createDisclosureGroup.tsx

@@ -14,6 +14,8 @@ function isLeaf(item: NodeItem | LeafItem): item is LeafItem {
   return !("items" in item);
 }
 
+export type { Props as DisclosureGroupProps };
+
 export function createDisclosureGroup(
   config: DisclosureGroupConfig,
   {

Diff for: packages/bento-design-system/src/Field/createFormFields.tsx

@@ -75,3 +75,4 @@ export type {
 } from "../CheckboxGroupField/createCheckboxGroupField";
 export type { NumberFieldProps } from "../NumberField/createNumberField";
 export type { SliderFieldProps } from "../SliderField/createSliderField";
+export type { CheckboxFieldProps } from "../CheckboxField/createCheckboxField";

Diff for: packages/bento-design-system/src/Stepper/createStepper.tsx

@@ -14,6 +14,8 @@ type Props = {
 
 type StepStatus = "todo" | "inProgress" | "done";
 
+export type { Props as StepperProps };
+
 export function createStepper(config: StepperConfig) {
   return function Stepper({ currentStep, steps }: Props) {
     return (

Diff for: packages/bento-design-system/src/createBentoComponents.ts

@@ -62,6 +62,7 @@ import { bentoSprinkles } from "./internal";
 import { createProgressBar } from "./ProgressBar/createProgressBar";
 import merge from "ts-deepmerge";
 import { createSwitch } from "./Switch/createSwitch";
+import { createUseComponentsShowcase } from "./createUseComponentsShowcase";
 
 export function createBentoComponents<
   AtomsFn extends typeof bentoSprinkles,
@@ -100,7 +101,7 @@ export function createBentoComponents<
 
   const Card = createCard(merge(defaultConfigs.card, config.card ?? {}));
 
-  // TODO(gabro): investigate as any here
+  // NOTE(gabro): as any here because merge chokes up on the ChipConfig generic
   const Chip = createChip(merge(defaultConfigs.chip, config.chip ?? {}) as any, {
     Box,
     IconButton,
@@ -212,7 +213,7 @@ export function createBentoComponents<
     IllustrationSearch,
   };
 
-  return {
+  const components = {
     ...icons,
     ...illustrations,
     Actions,
@@ -275,4 +276,11 @@ export function createBentoComponents<
     Tooltip,
     TextField,
   };
+
+  const useComponentsShowcase = createUseComponentsShowcase(components);
+
+  return {
+    ...components,
+    useComponentsShowcase,
+  };
 }