feat:adding sheet element

apps/playground/pages/web3-elements/index.tsx

@@ -14,6 +14,9 @@ import {
   DropdownMenuLabel,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
+  Sheet,
+  SheetTrigger,
+  SheetContent,
 } from '@web3-ui/components/src';
 
 const Web3ComponentsPage: NextPage = () => {
@@ -23,6 +26,8 @@ const Web3ComponentsPage: NextPage = () => {
         <Text size={`xl`} as={`h3`} weight={'bold'} css={{ padding: '$2' }}>
           Elements
         </Text>
+
+        {/* Button Element */}
         <div className={`item`}>
           <Text
             size={`lg`}
@@ -34,6 +39,8 @@ const Web3ComponentsPage: NextPage = () => {
           </Text>
           <Button>testing</Button>
         </div>
+
+        {/* Badge Element */}
         <div className={`item`}>
           <Text
             size={`lg`}
@@ -46,6 +53,7 @@ const Web3ComponentsPage: NextPage = () => {
           <Badge variant="lime">testing</Badge>
         </div>
 
+        {/* Checkbox Element */}
         <div className={`item`}>
           <Text
             size={`lg`}
@@ -58,6 +66,7 @@ const Web3ComponentsPage: NextPage = () => {
           <Checkbox size="2" defaultChecked />
         </div>
 
+        {/* Dropdown Element */}
         <div className={`item`}>
           <Text
             size={`lg`}
@@ -99,6 +108,30 @@ const Web3ComponentsPage: NextPage = () => {
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
+
+        {/* Sheet Element */}
+        <div className={`item`}>
+          <Text
+            size={`lg`}
+            as={`p`}
+            weight={'semibold'}
+            css={{ padding: '$4' }}
+          >
+            Sheet
+          </Text>
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button>Open Left</Button>
+            </SheetTrigger>
+            <SheetContent side="left"></SheetContent>
+          </Sheet>
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button>Open Right</Button>
+            </SheetTrigger>
+            <SheetContent side="right"></SheetContent>
+          </Sheet>
+        </div>
       </div>
     </main>
   );

packages/components/src/common/Overlay.tsx

@@ -0,0 +1,7 @@
+import { styled, css } from '../theme/stitches.config';
+
+export const overlayStyles = css({
+  backgroundColor: 'rgba(0, 0, 0, .15)',
+});
+
+export const Overlay = styled('div', overlayStyles);

packages/components/src/common/index.ts

@@ -3,5 +3,6 @@ export * from './Container';
 export * from './Flex';
 export * from './Grid';
 export * from './Menu';
+export * from './Overlay';
 export * from './Panel';
 export * from './Text';

packages/components/src/elements/Checkbox/Checkbox.tsx

@@ -83,3 +83,4 @@ export const Checkbox = React.forwardRef<
     </StyledIndicator>
   </StyledCheckbox>
 ));
+Checkbox.displayName = 'Checkbox';

packages/components/src/elements/DropdownMenu/DropdownMenu.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 import {

packages/components/src/elements/DropdownMenu/DropdownMenu.tsx

@@ -39,6 +39,7 @@ const DropdownMenuContent = React.forwardRef<
     <StyledContent {...props} ref={forwardedRef} />
   </DropdownMenuPrimitive.Portal>
 ));
+DropdownMenuContent.displayName = 'DropdownMenuContent';
 
 const DropdownMenuItem = styled(DropdownMenuPrimitive.Item, itemCss);
 const DropdownMenuGroup = styled(DropdownMenuPrimitive.Group, {});
@@ -73,6 +74,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     {children}
   </StyledDropdownMenuCheckboxItem>
 ));
+DropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem';
 
 const DropdownMenuRadioGroup = styled(DropdownMenuPrimitive.RadioGroup, {});
 const StyledDropdownMenuRadioItem = styled(
@@ -116,6 +118,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     {children}
   </StyledDropdownMenuRadioItem>
 ));
+DropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem';
 
 export {
   DropdownMenu,

packages/components/src/elements/Sheet/Sheet.stories.tsx

@@ -0,0 +1,24 @@
+import { Sheet, SheetTrigger, SheetContent } from './Sheet';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Button } from '../Button';
+
+export default {
+  title: 'Elements/Sheet',
+  component: Sheet,
+  argTypes: {},
+} as ComponentMeta<typeof Sheet>;
+
+const Template: ComponentStory<typeof Sheet> = (args) => (
+  <Sheet {...args}>
+    <SheetTrigger asChild>
+      <Button>Open Left</Button>
+    </SheetTrigger>
+    <SheetContent side="left">content here</SheetContent>
+  </Sheet>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Sheet',
+};

packages/components/src/elements/Sheet/Sheet.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import { Sheet } from './Sheet';
+
+describe('Sheet', () => {
+  it('renders without throwing', () => {
+    const { container } = render(<Sheet />);
+    expect(container).toBeInTheDocument();
+  });
+});

packages/components/src/elements/Sheet/Sheet.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import {
+  styled,
+  keyframes,
+  VariantProps,
+  CSS,
+} from '../../theme/stitches.config';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Cross1Icon } from '@radix-ui/react-icons';
+import { overlayStyles } from '../../common/Overlay';
+import { Button } from '../Button';
+
+const Sheet = DialogPrimitive.Root;
+const SheetTrigger = DialogPrimitive.Trigger;
+
+const fadeIn = keyframes({
+  from: { opacity: '0' },
+  to: { opacity: '1' },
+});
+
+const fadeOut = keyframes({
+  from: { opacity: '1' },
+  to: { opacity: '0' },
+});
+
+const StyledOverlay = styled(DialogPrimitive.Overlay, overlayStyles, {
+  position: 'fixed',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+
+  '&[data-state="open"]': {
+    animation: `${fadeIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
+  },
+
+  '&[data-state="closed"]': {
+    animation: `${fadeOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
+  },
+});
+
+const slideIn = keyframes({
+  from: { transform: '$$transformValue' },
+  to: { transform: 'translate3d(0,0,0)' },
+});
+
+const slideOut = keyframes({
+  from: { transform: 'translate3d(0,0,0)' },
+  to: { transform: '$$transformValue' },
+});
+
+const StyledContent = styled(DialogPrimitive.Content, {
+  backgroundColor: '$panel',
+  boxShadow:
+    '$colors$shadowLight 0 0 38px -10px, $colors$shadowDark 0 0 35px -15px',
+  position: 'fixed',
+  top: 0,
+  bottom: 0,
+  width: 250,
+
+  // Among other things, prevents text alignment inconsistencies when dialog can't be centered in the viewport evenly.
+  // Affects animated and non-animated dialogs alike.
+  willChange: 'transform',
+
+  // '&:focus': {
+  //   outline: 'none',
+  // },
+
+  '&[data-state="open"]': {
+    animation: `${slideIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
+  },
+
+  '&[data-state="closed"]': {
+    animation: `${slideOut} 150ms cubic-bezier(0.22, 1, 0.36, 1)`,
+  },
+
+  variants: {
+    side: {
+      top: {
+        $$transformValue: 'translate3d(0,-100%,0)',
+        width: '100%',
+        height: 300,
+        bottom: 'auto',
+      },
+      right: {
+        $$transformValue: 'translate3d(100%,0,0)',
+        right: 0,
+      },
+      bottom: {
+        $$transformValue: 'translate3d(0,100%,0)',
+        width: '100%',
+        height: 300,
+        bottom: 0,
+        top: 'auto',
+      },
+      left: {
+        $$transformValue: 'translate3d(-100%,0,0)',
+        left: 0,
+      },
+    },
+  },
+
+  defaultVariants: {
+    side: 'right',
+  },
+});
+
+const StyledCloseButton = styled(DialogPrimitive.Close, {
+  position: 'absolute',
+  top: '$2',
+  right: '$2',
+});
+
+type SheetContentVariants = VariantProps<typeof StyledContent>;
+type DialogContentPrimitiveProps = React.ComponentProps<
+  typeof DialogPrimitive.Content
+>;
+type SheetContentProps = DialogContentPrimitiveProps &
+  SheetContentVariants & { css?: CSS };
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof StyledContent>,
+  SheetContentProps
+>(({ children, ...props }, forwardedRef) => (
+  <DialogPrimitive.Portal>
+    <StyledOverlay />
+    <StyledContent {...props} ref={forwardedRef}>
+      {children}
+      <StyledCloseButton asChild>
+        <Button>
+          <Cross1Icon />
+        </Button>
+      </StyledCloseButton>
+    </StyledContent>
+  </DialogPrimitive.Portal>
+));
+SheetContent.displayName = 'SheetContent';
+
+const SheetClose = DialogPrimitive.Close;
+const SheetTitle = DialogPrimitive.Title;
+const SheetDescription = DialogPrimitive.Description;
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetClose,
+  SheetTitle,
+  SheetDescription,
+};

packages/components/src/elements/Sheet/index.ts

@@ -0,0 +1 @@
+export * from './Sheet';

packages/components/src/elements/index.ts

@@ -2,3 +2,4 @@ export * from './Button';
 export * from './Badge';
 export * from './Checkbox';
 export * from './DropdownMenu';
+export * from './Sheet';