-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
61 changed files
with
4,000 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| { | ||
| "StyledTheme": { | ||
| "prefix": "theme-interpolation", | ||
| "body": [ | ||
| "${p => p.theme.${1:colors}.$2};" | ||
| ], | ||
| "description": "Insert Theme interpolation in styled-component" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import React from 'react'; | ||
| import * as RadixPopover from '@radix-ui/react-popover'; | ||
| import { FaEdit, FaTimes } from 'react-icons/fa'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| export interface PopoverProps { | ||
| label: string; | ||
| open?: boolean; | ||
| onOpenChange: (open: boolean) => void; | ||
| } | ||
|
|
||
| export function Popover({ | ||
| children, | ||
| open, | ||
| onOpenChange, | ||
| label, | ||
| }: React.PropsWithChildren<PopoverProps>): JSX.Element { | ||
| return ( | ||
| <RadixPopover.Root open={open} onOpenChange={onOpenChange}> | ||
| <Trigger> | ||
| <FaEdit /> {label} | ||
| </Trigger> | ||
| <RadixPopover.Portal> | ||
| <Content sideOffset={5}> | ||
| {children} | ||
| <Close> | ||
| <FaTimes /> | ||
| </Close> | ||
| <Arrow /> | ||
| </Content> | ||
| </RadixPopover.Portal> | ||
| </RadixPopover.Root> | ||
| ); | ||
| } | ||
|
|
||
| const Trigger = styled(RadixPopover.Trigger)` | ||
| max-width: 100%; | ||
| `; | ||
|
|
||
| const Content = styled(RadixPopover.Content)` | ||
| --popover-close-offset: ${p => p.theme.margin}rem; | ||
| --popover-close-size: 25px; | ||
| --popover-close-safe-area: calc( | ||
| var(--popover-close-size) + (var(--popover-close-offset) * 2) - | ||
| ${p => p.theme.margin}rem | ||
| ); | ||
| background-color: ${p => p.theme.colors.bgBody}; | ||
| border: 1px solid ${p => p.theme.colors.bg2}; | ||
| padding: ${p => p.theme.margin}rem; | ||
| box-shadow: ${p => p.theme.boxShadowSoft}; | ||
| border-radius: ${p => p.theme.radius}; | ||
| position: relative; | ||
| `; | ||
|
|
||
| const Arrow = styled(RadixPopover.Arrow)` | ||
| fill: ${p => p.theme.colors.bg2}; | ||
| `; | ||
|
|
||
| const Close = styled(RadixPopover.Close)` | ||
| border: none; | ||
| background-color: ${p => p.theme.colors.main}; | ||
| color: white; | ||
| appearance: none; | ||
| font-family: inherit; | ||
| border-radius: 100%; | ||
| height: var(--popover-close-size); | ||
| width: var(--popover-close-size); | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| position: absolute; | ||
| top: var(--popover-close-offset); | ||
| right: var(--popover-close-offset); | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import React from 'react'; | ||
| import * as RadixScrollArea from '@radix-ui/react-scroll-area'; | ||
| import styled from 'styled-components'; | ||
| import { transparentize } from 'polished'; | ||
|
|
||
| const SIZE = '0.8rem'; | ||
|
|
||
| export interface ScrollAreaProps { | ||
| className?: string; | ||
| } | ||
|
|
||
| export const ScrollArea = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.PropsWithChildren<ScrollAreaProps> | ||
| >(({ children, className }, ref): JSX.Element => { | ||
| return ( | ||
| <RadixScrollArea.Root type='scroll'> | ||
| <RadixScrollArea.Viewport className={className} ref={ref}> | ||
| {children} | ||
| </RadixScrollArea.Viewport> | ||
| <ScrollBar orientation='horizontal'> | ||
| <Thumb /> | ||
| </ScrollBar> | ||
| <ScrollBar orientation='vertical'> | ||
| <Thumb /> | ||
| </ScrollBar> | ||
| <RadixScrollArea.Corner /> | ||
| </RadixScrollArea.Root> | ||
| ); | ||
| }); | ||
|
|
||
| ScrollArea.displayName = 'ScrollArea'; | ||
|
|
||
| const ScrollBar = styled(RadixScrollArea.Scrollbar)` | ||
| display: flex; | ||
| /* ensures no selection */ | ||
| user-select: none; | ||
| /* disable browser handling of all panning and zooming gestures on touch devices */ | ||
| touch-action: none; | ||
| padding: 2px; | ||
| background-color: transparent; | ||
| transition: background-color ${p => p.theme.animation.duration} ease-out; | ||
| &[data-orientation='horizontal'] { | ||
| flex-direction: column; | ||
| height: ${() => SIZE}; | ||
| } | ||
| `; | ||
|
|
||
| const Thumb = styled(RadixScrollArea.Thumb)` | ||
| position: relative; | ||
| bottom: 1px; | ||
| flex: 1; | ||
| background-color: ${p => transparentize(0.25, p.theme.colors.bg2)}; | ||
| border-radius: ${() => SIZE}; | ||
| backdrop-filter: blur(10px); | ||
| z-index: 2; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.