feat(Sheet): new component

doc/sheet.md

@@ -0,0 +1,133 @@
+# Sheet
+
+Mística provides a sheet component that can be used to display a modal-like content from over the main content
+of the screen.
+
+## Basic usage
+
+You can show any content you want inside the sheet by passing it as a child of the component.
+
+```jsx
+import {Sheet} from 'mistica';
+
+const MyComponent = () => {
+  const [showSheet, setShowSheet] = useState(false);
+  return (
+    <>
+      <ButtonPrimary onPress={() => setShowSheet(true)}>show sheet</ButtonPrimary>
+      {showSheet && (
+        <Sheet onClose={() => setShowSheet(false)}>
+          <Placeholder />
+        </Sheet>
+      )}
+    </>
+  );
+};
+```
+
+The sheet will close when the user does the swipe down gesture or when the background overlay is touched. The
+`onClose` callback is called when the closing animation finishes, that's the right place to unmount the sheet
+as shown in the example above.
+
+You can also close the sheet programmatically using the render prop:
+
+```jsx
+import {Sheet} from 'mistica';
+
+const MyComponent = () => {
+  const [showSheet, setShowSheet] = useState(false);
+  return (
+    <>
+      <ButtonPrimary onPress={() => setShowSheet(true)}>show sheet</ButtonPrimary>
+      {showSheet && (
+        <Sheet onClose={() => setShowSheet(false)}>
+          {({closeModal, modalTitleId}) => (
+            <>
+              <Title1 id={modalTitleId}>My sheet</Title1>
+              <Placeholder />
+              <ButtonPrimary onPress={closeModal}>Close</ButtonPrimary>
+            </>
+          )}
+        </Sheet>
+      )}
+    </>
+  );
+};
+```
+
+## Sheet with predefined content
+
+Mística predefines some common sheet patterns for you to use: `RadioListSheet`, `ActionsListSheet`,
+`InfoSheet` and `ActionsSheet`. You can see examples in the storybook.
+
+## `showSheet` imperative api
+
+Instead of using React components, there is an alternative way to show a sheet: using the `showSheet`
+function. For this to work, you need to render a `<SheetRoot/>` somewhere in your app, typically where you
+render the mistica `<ThemeContextProvider/>`, but it could be anywhere.
+
+```jsx
+import {SheetRoot} from '@telefonica/mistica';
+
+export const App = () => {
+  return (
+    <>
+      <SheetRoot />
+      <RestOfYourApp />
+    </>
+  );
+};
+```
+
+Then you can call `showSheet` from anywhere:
+
+```jsx
+import {showSheet} from '@telefonica/mistica';
+
+const MyComponent = () => {
+  return (
+    <ButtonPrimary
+      onPress={() =>
+        showSheet({
+          type: 'RADIO_LIST',
+          props: {
+            title: 'Select an fruit',
+            items: [
+              {id: '1', title: 'Apple'},
+              {id: '2', title: 'Banana'},
+              {id: '3', title: 'Orange'},
+            ],
+          },
+        }).then((result) => {
+          // The promise is resolved when the sheet is closed
+          console.log(result);
+        })
+      }
+    >
+      show sheet
+    </ButtonPrimary>
+  );
+};
+```
+
+### Native implementation
+
+If you are using mistica inside Novum app, you can configure `showSheet` to use the native sheet
+implementation with the webview bridge.
+
+```jsx
+import {SheetRoot} from '@telefonica/mistica';
+import {bottomSheet, isWebViewBridgeAvailable} from '@tef-novum/webview-bridge';
+
+export const App = () => {
+  return (
+    <>
+      <SheetRoot nativeImplementation={isWebViewBridgeAvailable() ? bottomSheet : undefined} />
+      <RestOfYourApp />
+    </>
+  );
+};
+```
+
+Then when you call `showSheet`, if the code is running inside a webview, it will use the native implementation
+instead of the web one.

package.json

@@ -83,7 +83,7 @@
         "@swc/core": "^1.3.61",
         "@swc/jest": "^0.2.26",
         "@telefonica/acceptance-testing": "2.13.0",
-        "@telefonica/eslint-config": "^1.6.0",
+        "@telefonica/eslint-config": "^1.7.0",
         "@telefonica/prettier-config": "^1.1.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
@@ -143,7 +143,7 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.3.1",
-        "@tef-novum/webview-bridge": "^3.8.0",
+        "@tef-novum/webview-bridge": "^3.27.0",
         "@telefonica/libphonenumber": "^2.8.1",
         "@vanilla-extract/css": "^1.9.5",
         "@vanilla-extract/dynamic": "^2.0.3",

playroom/frame-component.tsx

@@ -6,6 +6,7 @@ import '../css/reset.css';
 import * as React from 'react';
 import {
     ThemeContextProvider,
+    SheetRoot,
     useModalState,
     OverscrollColorProvider,
     skinVars,
@@ -64,6 +65,7 @@ const FrameComponent = ({children, theme}: Props): React.ReactNode => (
     <ThemeOverriderContextProvider>
         {(overridenTheme) => (
             <ThemeContextProvider theme={overridenTheme ?? theme}>
+                <SheetRoot />
                 <OverscrollColorProvider>
                     <App skinName={(overridenTheme ?? theme).skin.name}>{children}</App>
                 </OverscrollColorProvider>