refactor: drawer [SFUI2-649] (#619)

apps/docs/components/components/drawer.md

@@ -0,0 +1,85 @@
+---
+layout: AtomLayout
+hideBreadcrumbs: true
+description: VsfDrawer is surface containing supplementary content that is anchored to the left, right, top or bottom edge of the screen.
+---
+# Drawer
+
+::: slot usage
+
+{{ $frontmatter.description }}
+
+## Examples
+
+### Drawer placement
+
+Drawer supports 4 different placements that can be set via `placement` prop: `top`, `right`, `bottom`, `left`.
+<Showcase showcase-name="Drawer/Placement" style="min-height: 400px;">
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/Drawer/Placement.vue
+<!-- end vue -->
+<!-- react -->
+<<<../../preview/next/pages/showcases/Drawer/Placement.tsx
+<!-- end react -->
+</Showcase>
+
+### Drawer transition and trap focus
+
+Component can be wrapped in <!-- vue -->[`<transition>`](https://vuejs.org/guide/built-ins/transition.html#the-transition-component)<!-- end vue --><!-- react -->[`<CSSTransition>`](https://reactcommunity.org/react-transition-group/css-transition)<!-- end react --> component for animated showing and hiding. Drawer as well can use `useTrapFocus`  <!-- vue -->`composable`<!-- end vue --><!-- react -->`hook`<!-- end react --> for better control of focusable elements inside.
+<Showcase showcase-name="Drawer/TransitionAndCloseButton" style="min-height: 400px;">
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/Drawer/TransitionAndCloseButton.vue
+<!-- end vue -->
+<!-- react -->
+<<<../../preview/next/pages/showcases/Drawer/TransitionAndCloseButton.tsx
+<!-- end react -->
+</Showcase>
+
+## Playground
+
+<Generate style="height: 600px"/>
+:::
+
+::: slot api
+
+| Prop name             | Type                       | Default value | Possible values                        |
+|-----------------------|----------------------------|---------------|----------------------------------------|
+<!-- vue -->
+| modelValue            | boolean                    | false         |                                        |
+| tag                   | string                     | aside         |                                        |
+<!-- end vue -->
+<!-- react -->
+| open                  | boolean                    | false         |                                        |
+| as                    | ReactElement               | aside         |                                        |
+<!-- end react -->
+|  placement            | VsfDrawerPlacement         | VsfDrawerPlacement.left        |                                        |
+|  disableClickAway     | boolean                    | false        |                                        |
+|  disableEsc           |  boolean                   | false        |                                        |
+<!-- react -->
+|  children             |  ReactNode                 |               |                                        |
+|  onClose              |  Function                  |               |                                        |
+<!-- end react -->
+<!-- vue -->
+
+## Slots
+
+| Slot name       |            Description            |
+| ---------       | :-------------------------------: |
+|  default        |  place content of drawer      |
+
+## Events
+
+| Event name |            Trigger               |
+| ---------- | :----------------------------:   |
+| update:modelValue     |  emits on clicking close button  |
+<!-- end vue -->
+:::
+
+::: slot source
+<!-- vue -->
+<<<../../../packages/sfui/frameworks/vue/components/VsfDrawer/VsfDrawer.vue
+<!-- end vue -->
+<!-- react -->
+<<<../../../packages/sfui/frameworks/react/components/VsfDrawer/VsfDrawer.tsx
+<!-- end react -->
+:::

apps/preview/next/package.json

@@ -15,7 +15,7 @@
     "prepare-coverage-report": "frs-replace \"/apps/preview/next/sfui/react/\" \"/packages/sfui/frameworks/react/\" -i ./.nyc_output/out.json -o ../../../packages/sfui/frameworks/react/.nyc_output/out.json",
     "sync-test": "cpy . ../../apps/preview/next/sfui/tests --cwd=../../../packages/tests/",
     "sync-components": "cpy . !dist ../../../../apps/preview/next/sfui/react --cwd=../../../packages/sfui/frameworks/react/",
-    "sync:watch-test": "chokidar --silent \"../../../packages/tests/**/*.{cy.tsx,ts,png,jpg,jpeg,json}\" -c \"yarn sync-test\"",
+    "sync:watch-test": "chokidar --silent \"../../../packages/tests/**/*.{cy.tsx,tsx,ts,png,jpg,jpeg,json}\" -c \"yarn sync-test\"",
     "test": "TEST=true && yarn clean && yarn sync-test && concurrently \"yarn sync:watch-test\" \"yarn cypress open --component\"",
     "test:ci": "TEST=true && yarn clean && yarn clean-coverage && yarn sync-test && yarn sync-components && CYPRESS_COVERAGE=true yarn percy exec -- cypress run --component && yarn prepare-coverage-report && yarn display-coverage",
     "test:ci:react": "yarn test:ci"

apps/preview/next/pages/examples/VsfAccordionItem.tsx

@@ -51,6 +51,7 @@ function Example() {
   );
 
   const onToggle = () => {
+    // eslint-disable-next-line no-console
     console.log('toggle handler');
   };
 

apps/preview/next/pages/examples/VsfChip.tsx

@@ -63,6 +63,7 @@ function Example() {
       ...state.get,
       selected: !state.get.selected,
     });
+    // eslint-disable-next-line no-console
     console.log('changed!');
   };
   return (

apps/preview/next/pages/examples/VsfDrawer.tsx

@@ -0,0 +1,94 @@
+import { VsfDrawer, VsfDrawerPlacement } from '@storefront-ui/react/components/VsfDrawer';
+import { VsfButton } from '@storefront-ui/react/components/VsfButton';
+import { prepareControls } from '../../components/utils/Controls';
+import ComponentExample from '../../components/utils/ComponentExample';
+import { ExamplePageLayout } from '../examples';
+
+function Example() {
+  const { state, controls } = prepareControls(
+    [
+      {
+        type: 'text',
+        modelName: 'children',
+        description: 'Only for demonstration purposes. Default slot, replaces example drawer content',
+      },
+      {
+        type: 'boolean',
+        modelName: 'open',
+        propType: 'boolean',
+        propDefaultValue: false,
+        description: 'If true drawer is visible',
+      },
+      {
+        type: 'select',
+        modelName: 'placement',
+        options: Object.keys(VsfDrawerPlacement),
+        propType: 'enum',
+        propDefaultValue: VsfDrawerPlacement.left,
+        description: 'Placement of drawer',
+      },
+      {
+        type: 'text',
+        modelName: 'as',
+        propType: 'string',
+        propDefaultValue: 'aside',
+        description: 'Tag of drawer HTML element',
+      },
+      {
+        type: 'boolean',
+        modelName: 'disableClickAway',
+        propType: 'boolean',
+        propDefaultValue: false,
+        description: "If true can't close drawer when clicking outside drawer",
+      },
+      {
+        type: 'boolean',
+        modelName: 'disableEsc',
+        propType: 'boolean',
+        propDefaultValue: false,
+        description: "If true can't close drawer when using ESC keyboard button",
+      },
+    ],
+    {
+      children: undefined,
+      open: false,
+      placement: VsfDrawerPlacement.left,
+      as: undefined,
+      disableClickAway: undefined,
+      disableEsc: undefined,
+    },
+  );
+
+  return (
+    <ComponentExample controls={{ state, controls }}>
+      <VsfButton onClick={() => state.set({ ...state.get, open: !state.get.open })} type="button">
+        Open Drawer
+      </VsfButton>
+
+      <VsfDrawer
+        {...state.get}
+        onClose={(isOpen: boolean) => state.set({ ...state.get, open: isOpen })}
+        className="bg-neutral-50 p-3"
+        style={{
+          ...(state.get.placement === VsfDrawerPlacement.left || state.get.placement === VsfDrawerPlacement.right
+            ? { maxWidth: '300px' }
+            : {}),
+        }}
+      >
+        {state.get.children || (
+          <div>
+            <p className="mb-2">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam consequatur repellat, odit
+              voluptatibus deserunt eligendi nemo perspiciatis tenetur vero repellendus facere? Dolores sit maiores ut
+              labore facilis minima debitis dolore.
+            </p>
+            <strong>You can close Drawer by clicking outside or focus and use ESC button</strong>
+          </div>
+        )}
+      </VsfDrawer>
+    </ComponentExample>
+  );
+}
+
+Example.getLayout = ExamplePageLayout;
+export default Example;

apps/preview/next/pages/examples/VsfDropdownMenu.tsx

@@ -49,6 +49,7 @@ function Example() {
     setTimeout(() => {
       setLoadingState(state.get.loading);
     }, 3000);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (