Merge pull request #120 from ensdomains/action-sheet

Action sheet

.github/workflows/main.yml

@@ -49,7 +49,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'
 
-      - run: pnpm install --frozen-lockfile
+      - run: pnpm install -no-frozen-lockfile
 
       - name: build
         run: pnpm -F @ensdomains/thorin build
@@ -79,7 +79,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'
 
-      - run: pnpm install --frozen-lockfile
+      - run: pnpm install -no-frozen-lockfile
 
       - name: Test
         run: pnpm run test --coverage

.github/workflows/publish.yml

@@ -26,7 +26,7 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'
 
-      - run: pnpm install --frozen-lockfile
+      - run: pnpm install -no-frozen-lockfile
 
       - name: Test
         run: pnpm test

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-pnpm lint-staged
+pnpm lint

components/.eslintignore

@@ -0,0 +1,7 @@
+dist
+coverage
+src/components/icons/generated
+
+node_modules
+pnpm-lock.yaml
+pnpm-workspace.yaml

.eslintrc.js → components/.eslintrc.js

@@ -73,18 +73,6 @@ module.exports = {
     'react/self-closing-comp': 'warn',
   },
   overrides: [
-    {
-      files: ['docs/**/*'],
-      extends: ['plugin:@next/next/recommended', 'next/core-web-vitals'],
-      settings: {
-        next: {
-          rootDir: 'docs/',
-        },
-      },
-      rules: {
-        'import/no-unresolved': 'off',
-      },
-    },
     {
       files: ['*.mdx'],
       extends: ['plugin:mdx/recommended'],

components/package.json

@@ -27,6 +27,8 @@
   "license": "MIT",
   "scripts": {
     "build": "vite build",
+    "lint": "eslint .",
+    "lint:fix": "eslint .  --fix",
     "clean": "rimraf dist src/components/icons/generated/",
     "lint:types": "tsc --noEmit",
     "prepack": "pnpm build",
@@ -36,7 +38,8 @@
   "dependencies": {
     "clsx": "^1.1.1",
     "focus-visible": "^5.2.0",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "ts-pattern": "^4.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.5",

components/src/components/molecules/Dropdown/ActionSheet.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react'
+import styled, { css } from 'styled-components'
+
+import { breakpoints } from '@/src/tokens'
+
+import { Button, Modal, Typography } from '../..'
+import type { DropdownItem, DropdownItemObject } from './Dropdown'
+
+const ActionSheetContent = styled.div(
+  ({ theme }) => css`
+    width: 100%;
+    flex-direction: column;
+    padding: ${theme.space['2.5']};
+    gap: ${theme.space['2.5']};
+    display: flex;
+  `,
+)
+
+const ActionSheetOptions = styled.div(
+  ({ theme }) => css`
+    border-radius: ${theme.radii['large']};
+    width: ${theme.space['full']};
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.px};
+  `,
+)
+
+const ActionSheetItem = styled.div(
+  ({ theme }) => css`
+    width: 100%;
+    padding: 20px;
+    position: relative;
+    background: ${theme.colors.backgroundPrimary};
+
+    &:first-child {
+      border-top-left-radius: ${theme.radii['large']};
+      border-top-right-radius: ${theme.radii['large']};
+    }
+    &:last-child {
+      border-bottom-left-radius: ${theme.radii['large']};
+      border-bottom-right-radius: ${theme.radii['large']};
+    }
+  `,
+)
+
+type Props = {
+  isOpen: boolean
+  screenSize: number
+  items: DropdownItem[]
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
+  DropdownChild: React.FC<{
+    setIsOpen: (isOpen: boolean) => void
+    item: React.ReactElement<React.PropsWithRef<any>>
+  }>
+  cancelLabel?: string
+}
+export const ActionSheet = React.forwardRef<HTMLDivElement, Props>(
+  (
+    { isOpen, screenSize, items, setIsOpen, DropdownChild, cancelLabel },
+    ref,
+  ) => (
+    <Modal
+      mobileOnly
+      open={isOpen}
+      onDismiss={
+        screenSize < breakpoints.sm ? () => setIsOpen(false) : undefined
+      }
+    >
+      <ActionSheetContent ref={ref}>
+        <ActionSheetOptions>
+          {items?.map((item) => {
+            if (React.isValidElement(item)) {
+              return DropdownChild({ item, setIsOpen })
+            }
+
+            return (
+              <ActionSheetItem
+                key={(item as DropdownItemObject).label}
+                onClick={() => {
+                  ;(item as DropdownItemObject)?.onClick?.(
+                    (item as DropdownItemObject).value,
+                  )
+                  setIsOpen(false)
+                }}
+              >
+                <Typography>{(item as DropdownItemObject).label}</Typography>
+              </ActionSheetItem>
+            )
+          })}
+        </ActionSheetOptions>
+        <Button colorStyle="greySecondary" onClick={() => setIsOpen(false)}>
+          {cancelLabel}
+        </Button>
+      </ActionSheetContent>
+    </Modal>
+  ),
+)