-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(web): move visualizer to beta (#460)
- Loading branch information
Showing
340 changed files
with
37,820 additions
and
15 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,12 @@ | ||
import { Story, Meta } from "@storybook/react"; | ||
import { Component } from "react"; | ||
|
||
import AdditionButton, { Props } from "."; | ||
|
||
export default { | ||
component: AdditionButton, | ||
} as Meta; | ||
|
||
export const Default: Story<Props> = args => <Component {...args} />; | ||
|
||
Default.args = {}; |
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,109 @@ | ||
import React, { useRef, useCallback, useEffect } from "react"; | ||
import { usePopper } from "react-popper"; | ||
|
||
import Icon from "@reearth/beta/components/Icon"; | ||
import { styled } from "@reearth/services/theme"; | ||
|
||
import Portal from "../Portal"; | ||
|
||
export interface Props { | ||
className?: string; | ||
disabled?: boolean; | ||
onClick?: () => void; | ||
children?: React.ReactNode; | ||
} | ||
|
||
const AdditionButton: React.FC<Props> = ({ className, children, disabled, onClick }) => { | ||
const referenceElement = useRef<HTMLDivElement>(null); | ||
const popperElement = useRef<HTMLDivElement>(null); | ||
const { | ||
styles, | ||
attributes, | ||
update: updatePopper, | ||
} = usePopper(referenceElement.current, popperElement.current, { | ||
placement: "bottom", | ||
strategy: "fixed", | ||
modifiers: [ | ||
{ | ||
name: "eventListeners", | ||
enabled: false, | ||
options: { | ||
scroll: false, | ||
resize: false, | ||
}, | ||
}, | ||
], | ||
}); | ||
|
||
const handleClick = useCallback(() => { | ||
if (disabled) return; | ||
onClick?.(); | ||
}, [disabled, onClick]); | ||
|
||
// TODO: わかりずらい。もっといい方法ありそう。 | ||
useEffect(() => { | ||
if (children) { | ||
updatePopper?.(); | ||
} | ||
}, [children, updatePopper]); | ||
|
||
return ( | ||
<Wrapper> | ||
<InsertArea onClick={handleClick}> | ||
<Line /> | ||
<Button className={className} ref={referenceElement}> | ||
<StyledIcon icon="plusSquare" size={13} /> | ||
</Button> | ||
<Line /> | ||
</InsertArea> | ||
<Portal> | ||
<div ref={popperElement} style={{ ...styles.popper, zIndex: 1000 }} {...attributes.popper}> | ||
{children} | ||
</div> | ||
</Portal> | ||
</Wrapper> | ||
); | ||
}; | ||
|
||
const Wrapper = styled.div` | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
cursor: pointer; | ||
&:hover { | ||
* { | ||
visibility: visible; | ||
opacity: 1; | ||
} | ||
} | ||
`; | ||
|
||
const InsertArea = styled.div` | ||
width: 100%; | ||
padding: 0 0 30px 0; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
visibility: hidden; | ||
opacity: 0; | ||
transition: all 0.5s; | ||
`; | ||
|
||
const StyledIcon = styled(Icon)` | ||
color: ${props => props.theme.infoBox.accent}; | ||
`; | ||
|
||
const Button = styled.div` | ||
color: ${props => props.theme.infoBox.accent}; | ||
margin: 0 3px; | ||
`; | ||
|
||
const Line = styled.div` | ||
width: 43%; | ||
background-color: ${props => props.theme.main.accent}; | ||
height: 2px; | ||
margin-top: -2px; | ||
`; | ||
|
||
export default AdditionButton; |
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,11 @@ | ||
# Contents Picker | ||
[![Generic badge](https://img.shields.io/badge/GROUP-infobox-blue.svg)]() | ||
[![Generic badge](https://img.shields.io/badge/SIZE-molecules-orange.svg)]() | ||
|
||
Contents Picker Modal for InfoBox | ||
|
||
## Usage | ||
|
||
## Properties | ||
|
||
## Screenshots |
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 @@ | ||
import { Meta } from "@storybook/react"; | ||
|
||
import ContentPicker from "."; | ||
|
||
export default { | ||
component: ContentPicker, | ||
} as Meta; | ||
|
||
export const Default = () => <ContentPicker />; |
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,115 @@ | ||
import React, { useRef } from "react"; | ||
import { useClickAway } from "react-use"; | ||
|
||
import Icon from "@reearth/beta/components/Icon"; | ||
import Text from "@reearth/beta/components/Text"; | ||
import { styled } from "@reearth/services/theme"; | ||
|
||
export interface Item { | ||
id: string; | ||
name: string; | ||
icon?: string; | ||
} | ||
|
||
export interface ContentsPickerProps { | ||
className?: string; | ||
items?: Item[]; | ||
onClickAway?: () => void; | ||
onSelect?: (index: number) => void; | ||
} | ||
|
||
const ContentPicker: React.FC<ContentsPickerProps> = ({ | ||
className, | ||
items: items, | ||
onSelect, | ||
onClickAway, | ||
}) => { | ||
const ref = useRef(null); | ||
useClickAway(ref, () => onClickAway?.()); | ||
return ( | ||
<Wrapper className={className} ref={ref}> | ||
<ContentsList> | ||
{items?.map((item, i) => ( | ||
<ContentItem key={item.id}> | ||
<ContentButton onClick={() => onSelect?.(i)}> | ||
<StyledIcon icon={item.icon} size={20} /> | ||
<ButtonText size="xs">{item.name}</ButtonText> | ||
</ContentButton> | ||
</ContentItem> | ||
))} | ||
{new Array((items ?? []).length % 3).fill(undefined).map((_, i) => ( | ||
<GhostButton key={i} /> | ||
))} | ||
</ContentsList> | ||
</Wrapper> | ||
); | ||
}; | ||
|
||
const Wrapper = styled.div` | ||
background: ${props => props.theme.infoBox.bg}; | ||
margin-top: 5px; | ||
padding: 10px; | ||
box-sizing: border-box; | ||
border-radius: 3px; | ||
width: 288px; | ||
color: ${props => props.theme.infoBox.mainText}; | ||
box-shadow: 0 0 5px ${props => props.theme.infoBox.deepBg}; | ||
&:after { | ||
content: ""; | ||
position: absolute; | ||
right: 0; | ||
top: -5px; | ||
left: 0; | ||
width: 0px; | ||
height: 0px; | ||
margin: auto; | ||
border-style: solid; | ||
border-color: transparent transparent ${props => props.theme.infoBox.bg} transparent; | ||
border-width: 0 10px 10px 10px; | ||
} | ||
`; | ||
|
||
const ContentsList = styled.div` | ||
display: flex; | ||
flex-wrap: wrap; | ||
height: 100%; | ||
max-height: 200px; | ||
overflow: auto; | ||
`; | ||
|
||
const ContentItem = styled.div` | ||
flex: 0 0 33.33333%; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
`; | ||
|
||
const ContentButton = styled.div` | ||
padding: 5px; | ||
width: 60px; | ||
border: solid 0.5px transparent; | ||
box-sizing: border-box; | ||
text-align: center; | ||
cursor: pointer; | ||
&:hover { | ||
border-radius: 6px; | ||
border: solid 0.5px ${props => props.theme.main.select}; | ||
} | ||
`; | ||
|
||
const GhostButton = styled.div` | ||
width: 30%; | ||
`; | ||
|
||
const ButtonText = styled(Text)` | ||
margin: 3px 0; | ||
user-select: none; | ||
`; | ||
|
||
const StyledIcon = styled(Icon)` | ||
display: block; | ||
margin: 0 auto; | ||
`; | ||
|
||
export default ContentPicker; |
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,39 @@ | ||
import React from "react"; | ||
|
||
import { useT } from "@reearth/services/i18n"; | ||
import { styled } from "@reearth/services/theme"; | ||
|
||
export interface Props { | ||
className?: string; | ||
} | ||
|
||
const DropHolder: React.FC<Props> = ({ className }) => { | ||
const t = useT(); | ||
|
||
return ( | ||
<DraggableView className={className}> | ||
<DragMessage>{t("Drop here")}</DragMessage> | ||
</DraggableView> | ||
); | ||
}; | ||
|
||
const DraggableView = styled.div` | ||
position: absolute; | ||
z-index: ${props => props.theme.zIndexes.dropDown}; | ||
top: 0; | ||
left: 0; | ||
width: 100%; | ||
height: 100%; | ||
background: ${props => props.theme.main.accent}; | ||
opacity: 0.5; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
`; | ||
|
||
const DragMessage = styled.p` | ||
color: ${props => props.theme.main.text}; | ||
opacity: 1; | ||
`; | ||
|
||
export default DropHolder; |
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,10 @@ | ||
import { styled } from "@reearth/services/theme"; | ||
|
||
const Filled = styled.div` | ||
width: 100%; | ||
height: 100%; | ||
position: relative; | ||
overflow: hidden; | ||
`; | ||
|
||
export default Filled; |
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,43 @@ | ||
import { Meta, Story } from "@storybook/react"; | ||
|
||
import Component, { Props } from "."; | ||
|
||
export default { | ||
component: Component, | ||
} as Meta; | ||
|
||
const ExampleDiv = () => ( | ||
<> | ||
<div>hoge</div> | ||
<div>fuga</div> | ||
</> | ||
); | ||
|
||
export const SpaceBetween: Story<Props> = args => ( | ||
<Component {...args}> | ||
<ExampleDiv /> | ||
</Component> | ||
); | ||
export const GapChildren: Story<Props> = args => ( | ||
<Component {...args}> | ||
<div>hoge</div> | ||
<div>fuga</div> | ||
</Component> | ||
); | ||
export const DirectionVertical: Story<Props> = args => ( | ||
<Component {...args}> | ||
<ExampleDiv /> | ||
</Component> | ||
); | ||
|
||
SpaceBetween.args = { | ||
justify: "space-between", | ||
}; | ||
|
||
GapChildren.args = { | ||
gap: "20px", | ||
}; | ||
|
||
DirectionVertical.args = { | ||
direction: "column", | ||
}; |
Oops, something went wrong.