Add getState, setState, resetState and showToast to Playroom

lib/components/Autosuggest/Autosuggest.playroom.tsx

@@ -26,7 +26,18 @@ export function Autosuggest<Value>({
       id={id ?? fallbackId}
       value={value ?? fallbackValue}
       onChange={onChange ?? setFallbackValue}
-      onClear={onClear ?? (() => setFallbackValue({ text: '' }))}
+      onClear={
+        onClear ??
+        (() => {
+          const blankValue = { text: '' };
+
+          if (onChange) {
+            onChange(blankValue);
+          } else {
+            setFallbackValue(blankValue);
+          }
+        })
+      }
       {...restProps}
     />
   );

lib/components/Dialog/Dialog.docs.tsx

@@ -541,7 +541,7 @@ const docs: ComponentDocs = {
     {
       name: 'Standard',
       code: (
-        <PlayroomDialog title="Dialog Heading">
+        <PlayroomDialog title="Dialog Heading" open={true}>
           <Placeholder width={250} height={100} />
         </PlayroomDialog>
       ),
@@ -551,6 +551,7 @@ const docs: ComponentDocs = {
       code: (
         <PlayroomDialog
           title="Illustrated Dialog"
+          open={true}
           illustration={
             <Box style={{ height: 100, width: 100 }}>
               <IconMail size="fill" />
@@ -570,31 +571,31 @@ const docs: ComponentDocs = {
     {
       name: 'Xsmall',
       code: (
-        <PlayroomDialog title="Dialog Heading" width="xsmall">
+        <PlayroomDialog title="Dialog Heading" width="xsmall" open={true}>
           <Placeholder width="100%" height={100} />
         </PlayroomDialog>
       ),
     },
     {
       name: 'Small',
       code: (
-        <PlayroomDialog title="Dialog Heading" width="small">
+        <PlayroomDialog title="Dialog Heading" width="small" open={true}>
           <Placeholder width="100%" height={100} />
         </PlayroomDialog>
       ),
     },
     {
       name: 'Medium',
       code: (
-        <PlayroomDialog title="Dialog Heading" width="medium">
+        <PlayroomDialog title="Dialog Heading" width="medium" open={true}>
           <Placeholder width="100%" height={100} />
         </PlayroomDialog>
       ),
     },
     {
       name: 'Large',
       code: (
-        <PlayroomDialog title="Dialog Heading" width="large">
+        <PlayroomDialog title="Dialog Heading" width="large" open={true}>
           <Placeholder width="100%" height={100} />
         </PlayroomDialog>
       ),

lib/components/Dialog/Dialog.playroom.tsx

@@ -9,19 +9,19 @@ const noop = () => {};
 
 export const Dialog = ({
   id,
-  open,
-  onClose = noop,
+  open = false,
+  onClose,
   ...restProps
 }: PlayroomDialogProps) => {
   const fallbackId = useFallbackId();
 
   return (
-    <AllowCloseContext.Provider value={false}>
+    <AllowCloseContext.Provider value={onClose !== undefined}>
       <BraidDialog
         id={id ?? fallbackId}
         {...restProps}
-        open={open ?? true}
-        onClose={onClose}
+        open={open}
+        onClose={onClose ?? noop}
       />
     </AllowCloseContext.Provider>
   );

lib/components/Drawer/Drawer.docs.tsx

@@ -344,31 +344,31 @@ const docs: ComponentDocs = {
     {
       name: 'Default',
       code: (
-        <PlayroomDrawer title="Drawer Heading">
+        <PlayroomDrawer title="Drawer Heading" open={true}>
           <Placeholder width="100%" height={100} />
         </PlayroomDrawer>
       ),
     },
     {
       name: 'Small',
       code: (
-        <PlayroomDrawer title="Drawer Heading" width="small">
+        <PlayroomDrawer title="Drawer Heading" width="small" open={true}>
           <Placeholder width="100%" height={100} />
         </PlayroomDrawer>
       ),
     },
     {
       name: 'Medium',
       code: (
-        <PlayroomDrawer title="Drawer Heading" width="medium">
+        <PlayroomDrawer title="Drawer Heading" width="medium" open={true}>
           <Placeholder width="100%" height={100} />
         </PlayroomDrawer>
       ),
     },
     {
       name: 'Large',
       code: (
-        <PlayroomDrawer title="Drawer Heading" width="large">
+        <PlayroomDrawer title="Drawer Heading" width="large" open={true}>
           <Placeholder width="100%" height={100} />
         </PlayroomDrawer>
       ),

lib/components/Drawer/Drawer.playroom.tsx

@@ -12,19 +12,19 @@ const noop = () => {};
 
 export const Drawer = ({
   id,
-  open,
-  onClose = noop,
+  open = false,
+  onClose,
   ...restProps
 }: PlayroomDrawerProps) => {
   const fallbackId = useFallbackId();
 
   return (
-    <AllowCloseContext.Provider value={false}>
+    <AllowCloseContext.Provider value={onClose !== undefined}>
       <BraidDrawer
         id={id ?? fallbackId}
         {...restProps}
-        open={open ?? true}
-        onClose={onClose}
+        open={open}
+        onClose={onClose ?? noop}
       />
     </AllowCloseContext.Provider>
   );

lib/components/TextField/TextField.playroom.tsx

@@ -6,7 +6,9 @@ import { TextField as BraidTextField, TextFieldProps } from './TextField';
 type PlayroomTextFieldProps = Optional<
   TextFieldProps,
   'id' | 'value' | 'onChange'
->;
+> & {
+  onChange?: (fakeEvent: { currentTarget: { value: string } }) => void;
+};
 
 export const TextField = ({
   id,
@@ -27,7 +29,13 @@ export const TextField = ({
           ? onChange
           : (event) => setFallbackValue(event.currentTarget.value)
       }
-      onClear={onClear ?? (() => setFallbackValue(''))}
+      onClear={
+        onClear ??
+        (() =>
+          onChange
+            ? onChange({ currentTarget: { value: '' } })
+            : setFallbackValue(''))
+      }
       {...restProps}
     />
   );

lib/playroom/FrameComponent.tsx

@@ -1,6 +1,6 @@
 import '../reset';
 import React, { Fragment, ReactNode } from 'react';
-import { BraidProvider } from '../components';
+import { BraidProvider, ToastProvider } from '../components';
 import { BraidTheme } from '../themes/BraidTheme.d';
 
 interface Props {
@@ -16,7 +16,9 @@ export default ({ theme, children }: Props) => (
       }}
     />
     <BraidProvider theme={theme}>
-      <Fragment>{children}</Fragment>
+      <ToastProvider>
+        <Fragment>{children}</Fragment>
+      </ToastProvider>
     </BraidProvider>
   </Fragment>
 );

lib/playroom/usePlayroomState.ts

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import curry from 'lodash/curry';
+
+export const usePlayroomState = () => {
+  const [store, setStore] = useState(new Map<string, any>());
+
+  const getState = (key: string, defaultValue?: any) =>
+    store.get(key) ?? defaultValue;
+
+  const setState = curry((key: string, value: any) => {
+    let actualValue = value;
+
+    if (
+      typeof value === 'object' &&
+      value !== null &&
+      'currentTarget' in value
+    ) {
+      const { currentTarget } = value;
+
+      actualValue =
+        currentTarget.type === 'checkbox'
+          ? currentTarget.checked
+          : currentTarget.value;
+    }
+
+    setStore(new Map(store.set(key, actualValue)));
+  });
+
+  const resetState = (...keys: string[]) => {
+    if (keys.length) {
+      keys.forEach((key) => {
+        store.delete(key);
+      });
+      setStore(new Map(store));
+    } else {
+      setStore(new Map());
+    }
+  };
+
+  return {
+    getState,
+    setState,
+    resetState,
+  };
+};

lib/playroom/useScope.ts

@@ -0,0 +1,10 @@
+import '../reset';
+import { useToast } from '../components';
+import { usePlayroomState } from './usePlayroomState';
+
+export default function useScope() {
+  return {
+    showToast: useToast(),
+    ...usePlayroomState(),
+  };
+}

package.json

@@ -119,13 +119,13 @@
     "react-use": "^13.27.0",
     "renovate-config-seek": "0.4.0",
     "sanitize-html": "^1.22.1",
-    "sku": "10.6.0",
+    "sku": "10.7.0",
     "surge": "^0.20.1",
     "ts-node": "^8.2.0",
     "uuid": "^3.3.3"
   },
   "resolutions": {
-    "playroom": "0.22.0"
+    "playroom": "0.22.2"
   },
   "volta": {
     "node": "12.14.1",

sku.config.js

@@ -36,6 +36,7 @@ module.exports = {
   playroomSnippets: './lib/playroom/snippets.ts',
   playroomThemes: './lib/themes/index.ts',
   playroomFrameComponent: './lib/playroom/FrameComponent.tsx',
+  playroomScope: './lib/playroom/useScope.ts',
   playroomTarget: './site/dist/playroom',
   playroomWidths: [320, 768, 1024, 1400],
   dangerouslySetWebpackConfig: (config) => {

yarn.lock

@@ -12265,10 +12265,10 @@ pkginfo@0.x.x:
   resolved "https://registry.yarnpkg.com/pkginfo/-/pkginfo-0.4.1.tgz#b5418ef0439de5425fc4995042dced14fb2a84ff"
   integrity sha1-tUGO8EOd5UJfxJlQQtztFPsqhP8=
 
-playroom@0.22.0, playroom@^0.21.1:
-  version "0.22.0"
-  resolved "https://registry.yarnpkg.com/playroom/-/playroom-0.22.0.tgz#719f34e4691b3da5c219b4ee8be692c5efa5ae1c"
-  integrity sha512-PozSTbKiu+FwsOebtOBGGhcwOuTkqubnBP/DaCXreHpunriHLXuWvQLoTlI1fpNgE4M2wYM2Mne4XZ6N17xGjg==
+playroom@0.22.1, playroom@^0.22.0:
+  version "0.22.1"
+  resolved "https://registry.yarnpkg.com/playroom/-/playroom-0.22.1.tgz#8ac7359e19ec951e8992734a0a48e8c8e6b40f2c"
+  integrity sha512-x7G2aaRwtjRG94L6lQ/PW2aFPZGmvkn+JKE2l/g2yFRF4x0bJN1ZRUg1LYk8TXgbsk6O/0JNdhZMZbMzNhKlpQ==
   dependencies:
     "@babel/cli" "^7.8.3"
     "@babel/core" "^7.8.3"
@@ -14525,10 +14525,10 @@ sisteransi@^1.0.4:
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
   integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
 
-sku@10.6.0:
-  version "10.6.0"
-  resolved "https://registry.yarnpkg.com/sku/-/sku-10.6.0.tgz#5699017076a4a03b49fb3d926908666723a5ffda"
-  integrity sha512-wT5y3AvruxDG9E8hrTLWO1sRtB59tvaRFi1KSZej+It2jK6atl7TeD1hH5SCHBILcPkBNEXVdkgYWF60B8L06A==
+sku@10.7.0:
+  version "10.7.0"
+  resolved "https://registry.yarnpkg.com/sku/-/sku-10.7.0.tgz#ecc55c6767b4fc949d80929ec4c3d49939925fa0"
+  integrity sha512-DEMmaQw6JPcmTTzEtKK2QcpkT1jCMQmWsK9+Y9bzKblsWS0O+X4v7tEdUMd7LcrWI4l+iS0eGUgUjqU3A4XxoA==
   dependencies:
     "@babel/core" "^7.9.0"
     "@babel/plugin-proposal-class-properties" "^7.8.3"
@@ -14612,7 +14612,7 @@ sku@10.6.0:
     node-html-parser "^1.2.16"
     open "^7.0.0"
     path-to-regexp "^6.0.0"
-    playroom "^0.21.1"
+    playroom "^0.22.0"
     postcss-js "^2.0.2"
     postcss-loader "^3.0.0"
     prettier "2.0.2"