OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

upgrade to Chakra v1

Browse source 
it's a preview version, but it has a feature I want, so let's get ahead of the curve!
This commit is contained in:
Emi Matchu 2020-07-20 21:32:42 -07:00
parent ac12f6bb55
commit 419a270df9
10 changed files with 743 additions and 273 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
package.json
View file

@ -5,9 +5,9 @@
"dependencies": {
"@apollo/react-hooks": "^3.1.5",
"@apollographql/graphql-playground-html": "^1.6.24",
"@chakra-ui/core": "^0.7.0",
"@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27",
"@chakra-ui/core": "^1.0.0-next.6",
"@chakra-ui/icons": "^1.0.0-next.6",
"@chakra-ui/theme": "^1.0.0-next.6",
"@loadable/component": "^5.12.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
@ -19,7 +19,6 @@
"apollo-server-env": "^2.4.3",
"dataloader": "^2.0.0",
"emotion": "^10.0.27",
"emotion-theming": "^10.0.27",
"graphql": "^15.0.0",
"immer": "^6.0.3",
"mysql2": "^2.1.0",

7
src/app/App.js
View file

@ -1,6 +1,7 @@
import React from "react";
import { ApolloProvider } from "@apollo/react-hooks";
import { CSSReset, ThemeProvider, theme } from "@chakra-ui/core";
import { CSSReset, ChakraProvider } from "@chakra-ui/core";
import theme from "@chakra-ui/theme";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import loadable from "@loadable/component";
@ -19,7 +20,7 @@ function App() {
return (
<Router>
<ApolloProvider client={apolloClient}>
<ThemeProvider theme={theme}>
<ChakraProvider theme={theme}>
<CSSReset />
<Switch>
<Route path="/outfits/new">
@ -29,7 +30,7 @@ function App() {
<HomePage />
</Route>
</Switch>
</ThemeProvider>
</ChakraProvider>
</ApolloProvider>
</Router>
);

6
src/app/HomePage.js
View file

@ -30,7 +30,7 @@ function HomePage() {
alt=""
width="200px"
height="200px"
rounded="lg"
borderRadius="lg"
boxShadow="md"
/>
<Box height="4" />
@ -94,7 +94,7 @@ function StartOutfitForm() {
<Box width="4" />
<Button
type="submit"
variantColor="green"
colorScheme="green"
disabled={!isValid}
backgroundColor="green.600" // for AA contrast
_hover={{ backgroundColor: "green.700" }}
@ -189,7 +189,7 @@ function SubmitPetForm() {
<Box width="4" />
<Button
type="submit"
variantColor="green"
colorScheme="green"
isDisabled={!petName}
isLoading={loading}
backgroundColor="green.600" // for AA contrast

9
src/app/Item.js
View file

@ -9,6 +9,7 @@ import {
Tooltip,
useTheme,
} from "@chakra-ui/core";
import { DeleteIcon, InfoIcon } from "@chakra-ui/icons";
import { safeImageUrl } from "./util";
@ -42,7 +43,7 @@ export function Item({ item, itemNameId, outfitState, dispatchToOutfit }) {
<Box flexGrow="1" />
<Box>
<ItemActionButton
icon="info"
icon={<InfoIcon />}
label="More info"
href={`http://impress.openneo.net/items/${
item.id
@ -50,7 +51,7 @@ export function Item({ item, itemNameId, outfitState, dispatchToOutfit }) {
/>
{isInOutfit && (
<ItemActionButton
icon="delete"
icon={<DeleteIcon />}
label="Remove"
onClick={() =>
dispatchToOutfit({ type: "removeItem", itemId: item.id })
@ -89,7 +90,7 @@ function ItemContainer({ children }) {
<Box
p="1"
my="1"
rounded="lg"
borderRadius="lg"
d="flex"
alignItems="center"
cursor="pointer"
@ -126,7 +127,7 @@ function ItemThumbnail({ src, isWorn }) {
const theme = useTheme();
return (
<Box
rounded="lg"
borderRadius="lg"
boxShadow="md"
border="1px"
width="50px"

8
src/app/ItemsAndSearchPanels.js
View file

@ -2,13 +2,13 @@ import React from "react";
import {
Box,
Flex,
Icon,
IconButton,
Input,
InputGroup,
InputLeftElement,
InputRightElement,
} from "@chakra-ui/core";
import { CloseIcon, SearchIcon } from "@chakra-ui/icons";
import ItemsPanel from "./ItemsPanel";
import SearchPanel from "./SearchPanel";
@ -106,7 +106,7 @@ function SearchToolbar({
return (
<InputGroup>
<InputLeftElement>
<Icon name="search" color="gray.400" />
<SearchIcon color="gray.400" />
</InputLeftElement>
<Input
placeholder="Search for items to add…"
@ -128,10 +128,10 @@ function SearchToolbar({
{query && (
<InputRightElement>
<IconButton
icon="close"
icon={<CloseIcon />}
color="gray.400"
variant="ghost"
variantColor="green"
colorScheme="green"
aria-label="Clear search"
onClick={() => onChange("")}
// Big style hacks here!

16
src/app/ItemsPanel.js
View file

@ -7,10 +7,10 @@ import {
EditableInput,
Flex,
IconButton,
PseudoBox,
Skeleton,
VisuallyHidden,
} from "@chakra-ui/core";
import { EditIcon } from "@chakra-ui/icons";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import { Delay, Heading1, Heading2 } from "./util";
@ -178,7 +178,7 @@ function ItemZoneGroupSkeleton({ itemCount }) {
function OutfitHeading({ outfitState, dispatchToOutfit }) {
return (
<Box>
<PseudoBox role="group" d="inline-block" position="relative" width="100%">
<Box role="group" d="inline-block" position="relative" width="100%">
<Heading1 mb="6">
<Editable
value={outfitState.name}
@ -187,31 +187,31 @@ function OutfitHeading({ outfitState, dispatchToOutfit }) {
dispatchToOutfit({ type: "rename", outfitName: value })
}
>
{({ isEditing, onRequestEdit }) => (
{({ isEditing, onEdit }) => (
<Flex align="flex-top">
<EditablePreview />
<EditableInput />
{!isEditing && (
<PseudoBox
<Box
opacity="0"
transition="opacity 0.5s"
_groupHover={{ opacity: "1" }}
onClick={onRequestEdit}
onClick={onEdit}
>
<IconButton
icon="edit"
icon={<EditIcon />}
variant="link"
color="green.600"
aria-label="Edit outfit name"
title="Edit outfit name"
/>
</PseudoBox>
</Box>
)}
</Flex>
)}
</Editable>
</Heading1>
</PseudoBox>
</Box>
</Box>
);
}

17
src/app/OutfitControls.js
View file

@ -4,12 +4,17 @@ import {
Box,
Flex,
IconButton,
PseudoBox,
Stack,
Tooltip,
useClipboard,
useToast,
} from "@chakra-ui/core";
import {
ArrowBackIcon,
CheckIcon,
DownloadIcon,
LinkIcon,
} from "@chakra-ui/icons";
import PosePicker from "./PosePicker";
import SpeciesColorPicker from "./SpeciesColorPicker";
@ -25,7 +30,7 @@ function OutfitControls({ outfitState, dispatchToOutfit }) {
const toast = useToast();
return (
<PseudoBox
<Box
role="group"
pos="absolute"
left="0"
@ -58,7 +63,7 @@ function OutfitControls({ outfitState, dispatchToOutfit }) {
<ControlButton
as={Link}
to="/"
icon="arrow-back"
icon={<ArrowBackIcon />}
aria-label="Leave this outfit"
d="inline-flex" // Not sure why <a> requires this to style right! ^^`
/>
@ -115,7 +120,7 @@ function OutfitControls({ outfitState, dispatchToOutfit }) {
/>
</Flex>
</Flex>
</PseudoBox>
</Box>
);
}
@ -133,7 +138,7 @@ function DownloadButton({ outfitState }) {
<Tooltip label="Download" placement="left">
<Box>
<ControlButton
icon="download"
icon={<DownloadIcon />}
aria-label="Download"
as="a"
// eslint-disable-next-line no-script-url
@ -163,7 +168,7 @@ function CopyLinkButton({ outfitState }) {
<Tooltip label={hasCopied ? "Copied!" : "Copy link"} placement="left">
<Box>
<ControlButton
icon={hasCopied ? "check" : "link"}
icon={hasCopied ? <CheckIcon /> : <LinkIcon />}
aria-label="Copy link"
onClick={onCopy}
/>

5
src/app/OutfitPreview.js
View file

@ -2,7 +2,8 @@ import React from "react";
import { css, cx } from "emotion";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import { Box, Flex, Icon, Spinner, Text } from "@chakra-ui/core";
import { Box, Flex, Spinner, Text } from "@chakra-ui/core";
import { WarningIcon } from "@chakra-ui/icons";
import useOutfitAppearance from "./useOutfitAppearance";
@ -24,7 +25,7 @@ function OutfitPreview({ outfitState }) {
return (
<FullScreenCenter>
<Text color="gray.50" d="flex" alignItems="center">
<Icon name="warning" />
<WarningIcon />
<Box width={2} />
Could not load preview. Try again?
</Text>

4
src/app/PosePicker.js
View file

@ -255,7 +255,7 @@ function PoseOption({ poseInfo, onChange, inputRef }) {
/>
<Box
aria-hidden
rounded="full"
borderRadius="full"
boxShadow="md"
overflow="hidden"
width="50px"
@ -281,7 +281,7 @@ function PoseOption({ poseInfo, onChange, inputRef }) {
`}
>
<Box
rounded="full"
borderRadius="full"
position="absolute"
top="0"
bottom="0"

937
yarn.lock
View file

File diff suppressed because it is too large Load diff