diff --git a/.changeset/thick-bats-explain.md b/.changeset/thick-bats-explain.md new file mode 100644 index 00000000..c39c547f --- /dev/null +++ b/.changeset/thick-bats-explain.md @@ -0,0 +1,14 @@ +--- +"fogbender-react": minor +--- + +We're working on standardizing the naming of the widgets, therefore: + +- The nameless full-width widget is now known as Roomy (lots of room) +- The floating widget (Floatie) is now known as Floaty (to match the spelling of Roomy) +- We're exporting new names as aliases + +FogbenderWidget -> FogbenderRoomyWidget +FogbenderSimpleWidget -> FogbenderSimpleRoomyWidget +FogbenderFloatingWidget -> FogbenderFloatyWidget +FogbenderSimpleFloatie -> FogbenderSimpleFloatyWidget diff --git a/packages/fogbender-react/src/index.tsx b/packages/fogbender-react/src/index.tsx index 889b208d..266a9bd4 100644 --- a/packages/fogbender-react/src/index.tsx +++ b/packages/fogbender-react/src/index.tsx @@ -16,11 +16,14 @@ export { FogbenderIsConfigured, }; -export const FogbenderSimpleWidget: React.FC<{ +type RoomyWidgetProps = { clientUrl?: string; env?: Env; token: Token; -}> = ({ clientUrl, env, token }) => { +}; + +// old name; new name is FogbenderSimpleRoomyWidget +export const FogbenderSimpleWidget = ({ clientUrl, env, token }: RoomyWidgetProps) => { const [fogbender, setFogbender] = React.useState(undefined as Fogbender | undefined); React.useEffect(() => { const fb = createNewFogbender(); @@ -39,6 +42,7 @@ export const FogbenderSimpleWidget: React.FC<{ ); }; +// old name; new name is FogbenderRoomyWidget export const FogbenderWidget = () => { const divRef = React.useRef(null); useRenderIframe(divRef, false); @@ -64,13 +68,17 @@ const useRenderIframe = (divRef: React.RefObject, headles ); }; -export const FogbenderFloatingWidget: React.FC<{ +type FloatyWidgetProps = { verbose?: boolean; openInNewTab?: boolean; closeable?: boolean; defaultOpen?: boolean; -}> = ({ verbose, openInNewTab, closeable, defaultOpen }) => { - useCreateFloatingWidget({ verbose, openInNewTab, closeable, defaultOpen }); +}; + +// old name; new name is FogbenderFloatyWidget +export const FogbenderFloatingWidget = (props: FloatyWidgetProps) => { + useCreateFloatingWidget(props); + return null; }; @@ -79,12 +87,7 @@ const useCreateFloatingWidget = ({ openInNewTab, closeable, defaultOpen, -}: { - verbose?: boolean; - openInNewTab?: boolean; - closeable?: boolean; - defaultOpen?: boolean; -}) => { +}: FloatyWidgetProps) => { const fogbender = useFogbender(); useRenderComponent( React.useCallback(() => { @@ -147,13 +150,22 @@ function addVersion(token: Token | undefined) { return token; } -export const FogbenderSimpleFloatie: React.FC<{ +type SimpleFloatyWidgetProps = { token: Token; clientUrl?: string | undefined; verbose?: boolean; openInNewTab?: boolean; closeable?: boolean; -}> = ({ token, clientUrl, openInNewTab, verbose, closeable }) => { +}; + +// old name; new name is FogbenderSimpleFloatyWidget +export const FogbenderSimpleFloatie = ({ + token, + clientUrl, + openInNewTab, + verbose, + closeable, +}: SimpleFloatyWidgetProps) => { const fogbender = React.useMemo(createNewFogbender, []); return ( @@ -169,3 +181,8 @@ export const FogbenderSimpleFloatie: React.FC<{ ); }; + +export const FogbenderRoomyWidget = FogbenderWidget; +export const FogbenderSimpleRoomyWidget = FogbenderSimpleWidget; +export const FogbenderFloatyWidget = FogbenderFloatingWidget; +export const FogbenderSimpleFloatyWidget = FogbenderSimpleFloatie;