Skip to content
This repository has been archived by the owner on Apr 25, 2023. It is now read-only.

Commit

Permalink
feat: add plugin settings extension support (#293)
Browse files Browse the repository at this point in the history 
* initial commit

* add accesstoken  and update plugin extension types

* add query param to plugin for marketplace

* translations

* Update src/i18n/translations/ja.yml

Co-authored-by: rot1024 <aayhrot@gmail.com>

* Update src/components/molecules/Settings/Project/Plugin/PluginSection/index.tsx

Co-authored-by: rot1024 <aayhrot@gmail.com>

* Update src/components/molecules/Settings/Project/Plugin/PluginSection/index.tsx

Co-authored-by: rot1024 <aayhrot@gmail.com>

* Update src/components/molecules/Settings/Project/Plugin/PluginSection/index.tsx

Co-authored-by: rot1024 <aayhrot@gmail.com>

* Update src/components/molecules/Settings/Project/Plugin/PluginSection/index.tsx

Co-authored-by: rot1024 <aayhrot@gmail.com>

* Update src/components/organisms/Settings/Project/Plugin/hooks.ts

Co-authored-by: rot1024 <aayhrot@gmail.com>

* fix formatting issue

* add install by marketplace

* refactor, update style, add mplace plugin ids

* change text color

* Add marketplace publish button, update styles

* fix spacing

* update plugin card ui, add version

* update story to fix ci error

* update i18n

Co-authored-by: rot1024 <aayhrot@gmail.com>
  • Loading branch information
@KaWaite @rot1024
KaWaite and rot1024 committed Aug 25, 2022
1 parent a0a03ef commit abd1c24
Show file tree
Hide file tree
Showing 20 changed files with 578 additions and 126 deletions.
5 changes: 3 additions & 2 deletions src/components/atoms/Accordion/AccordionItem.tsx
View file
Expand Up @@ -24,7 +24,7 @@ export type Props = {
const AccordionItem: React.FC<Props> = ({ className, id, heading, content, bg }) => {
const theme = useTheme();
return (
<Box m="2xl" key={id} className={className} bg={bg} data-testid="atoms-accordion-item">
<Box mv="2xl" key={id} className={className} bg={bg} data-testid="atoms-accordion-item">
<AccordionItemComponent>
<AccordionItemHeading>
<StyledAccordionItemButton data-testid="atoms-accordion-item-header">
Expand All @@ -34,7 +34,7 @@ const AccordionItem: React.FC<Props> = ({ className, id, heading, content, bg })
{({ expanded }) => (
<>
<StyledIcon
color={theme.main.text}
color={theme.text.pale}
icon="arrowToggle"
size={16}
open={!!expanded}
Expand All @@ -58,6 +58,7 @@ const AccordionItem: React.FC<Props> = ({ className, id, heading, content, bg })
const StyledIcon = styled(Icon)<{ open: boolean }>`
transition: transform 0.15s ease;
transform: ${({ open }) => open && "translateY(10%) rotate(90deg)"};
margin-right: 24px;
`;

const StyledAccordionItemButton = styled(AccordionItemButton)`
Expand Down
11 changes: 11 additions & 0 deletions src/components/atoms/Icon/Icons/marketplace.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/components/atoms/Icon/icons.ts
View file
Expand Up @@ -131,6 +131,7 @@ import Plugin from "./Icons/plugin.svg";
import UploadZipPlugin from "./Icons/uploadZipPlugin.svg";
import PublicGitHubRepo from "./Icons/publicGitHubRepo.svg";
import PrivateGitHubRepo from "./Icons/privateGitHubRepo.svg";
import Marketplace from "./Icons/marketplace.svg";

// Indicator
import Crosshair from "./Icons/crosshair.svg";
Expand Down Expand Up @@ -250,6 +251,7 @@ export default {
uploadZipPlugin: UploadZipPlugin,
privateGitHubRepo: PrivateGitHubRepo,
publicGitHubRepo: PublicGitHubRepo,
marketplace: Marketplace,
menuForDevice: MenuForDevice,
plugin: Plugin,
tag: Tag,
Expand Down
21 changes: 13 additions & 8 deletions src/components/atoms/TabSection/index.tsx
View file
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from "react";

import Text from "@reearth/components/atoms/Text";
import { styled, useTheme } from "@reearth/theme";
import { styled } from "@reearth/theme";

import Divider from "../Divider";

Expand Down Expand Up @@ -36,8 +36,6 @@ const TabSection = <T extends string>({
select(selected);
}, [selected]);

const theme = useTheme();

return (
<Wrapper className={className} menuAlignment={menuAlignment}>
<TabHeader>
Expand All @@ -49,9 +47,13 @@ const TabSection = <T extends string>({
select(m);
onChange?.(m);
}}>
<Text size="m" color={selectedTab === m ? theme.main.select : theme.main.text}>
<StyledText
size="m"
selected={selectedTab === m}
customColor
otherProperties={{ marginBottom: "12px" }}>
{headers?.[m] ?? m}
</Text>
</StyledText>
</TabTitle>
))}
{<ActionWrapper expanded={true}>{headerAction}</ActionWrapper>}
Expand All @@ -73,7 +75,6 @@ const TabHeader = styled.div<{ menuAlignment?: MenuAlignment }>`
display: flex;
flex-flow: ${({ menuAlignment }) => (menuAlignment === "top" ? "column" : "row")} nowrap;
align-items: space-between;
gap: 24px;
padding: 0px;
width: 100%;
height: 100%;
Expand All @@ -82,8 +83,12 @@ const TabHeader = styled.div<{ menuAlignment?: MenuAlignment }>`
const TabTitle = styled.div<{ selected?: boolean }>`
cursor: pointer;
user-select: none;
border-bottom: 2px solid ${({ selected, theme }) => (selected ? theme.main.select : "none")};
opacity: ${({ selected }) => (selected ? "1" : "0.7")};
border-bottom: 1px solid ${({ selected, theme }) => (selected ? theme.main.select : "none")};
padding: 0 12px;
`;

const StyledText = styled(Text)<{ selected?: boolean }>`
color: ${({ theme, selected }) => (selected ? theme.main.select : theme.main.text)};
`;

const ActionWrapper = styled.div<{ expanded?: boolean }>`
Expand Down
28 changes: 20 additions & 8 deletions ...ents/molecules/Settings/Project/Plugin/PluginAccordion/PluginAccordionItem/itemHeader.tsx
View file
Expand Up @@ -13,6 +13,7 @@ export type PluginItemProps = {
className?: string;
thumbnail?: string;
title?: string;
version?: string;
isInstalled?: boolean;
onUninstall: () => void;
};
Expand All @@ -21,6 +22,7 @@ const PluginAccordionItemHeader: React.FC<PluginItemProps> = ({
className,
thumbnail,
title,
version,
isInstalled,
onUninstall,
}) => {
Expand All @@ -36,14 +38,17 @@ const PluginAccordionItemHeader: React.FC<PluginItemProps> = ({
return (
<Wrapper align="center" justify="space-between" className={className}>
<Flex align="center">
{thumbnail && (
<Box borderRadius={8} mh="m">
<Thumbnail src={thumbnail} alt="plugin thumbnail" />
</Box>
)}
<Text size="l" weight="bold">
{title}
</Text>
<TitleWrapper>
{thumbnail && (
<Box borderRadius={8} mh="m">
<Thumbnail src={thumbnail} alt="plugin thumbnail" />
</Box>
)}
<Text size="m" weight="bold" otherProperties={{ marginRight: "20px", maxWidth: "200px" }}>
{title}
</Text>
</TitleWrapper>
<Text size="m">v{version}</Text>
</Flex>
<StyledButton
buttonType={isInstalled && hovered ? "danger" : "secondary"}
Expand All @@ -70,6 +75,11 @@ const Wrapper = styled(Flex)`
padding: ${props => `${props.theme.metrics.xl}px 0`};
`;

const TitleWrapper = styled(Flex)`
width: 250px;
margin-right: 32px;
`;

const Thumbnail = styled.img`
border-radius: 8px;
width: 64px;
Expand All @@ -78,8 +88,10 @@ const Thumbnail = styled.img`

const StyledButton = styled(Button)`
font-weight: ${fonts.weight.bold};
width: 153px;
border-radius: ${props => props.theme.metrics.s}px;
padding: ${({ theme }) => `${theme.metrics.s}px ${theme.metrics["2xl"]}`};
transition: all 0.3s;
`;

export default PluginAccordionItemHeader;
2 changes: 1 addition & 1 deletion src/components/molecules/Settings/Project/Plugin/PluginAccordion/index.stories.tsx
View file
Expand Up @@ -10,7 +10,7 @@ export default {
export const Default: Story<PluginAccordionProps> = args => <Component {...args} />;

Default.args = {
items: [
plugins: [
{
thumbnailUrl: `/sample.svg`,
title: "Sample",
Expand Down
24 changes: 15 additions & 9 deletions src/components/molecules/Settings/Project/Plugin/PluginAccordion/index.tsx
View file
Expand Up @@ -17,29 +17,35 @@ export type PluginItem = {

export type PluginAccordionProps = {
className?: string;
items?: PluginItem[];
plugins?: PluginItem[];
uninstallPlugin: (pluginId: string) => void;
};

const PluginAccordion: React.FC<PluginAccordionProps> = ({ className, items, uninstallPlugin }) => {
const PluginAccordion: React.FC<PluginAccordionProps> = ({
className,
plugins,
uninstallPlugin,
}) => {
const theme = useTheme();
return items ? (
return plugins ? (
<Accordion
className={className}
allowMultipleExpanded
itemBgColor={theme.main.lighterBg}
items={items?.map(item => {
items={plugins?.map(p => {
const version = p.pluginId.split("~")[2] ?? "x.x.x";
return {
id: item.title,
id: p.title,
heading: (
<PluginAccordionItemHeader
// thumbnail={item.thumbnailUrl}
title={item.title}
isInstalled={item.isInstalled}
onUninstall={() => uninstallPlugin(item.pluginId)}
title={p.title}
version={version}
isInstalled={p.isInstalled}
onUninstall={() => uninstallPlugin(p.pluginId)}
/>
),
content: <PluginAccordionItemBody>{item.bodyMarkdown}</PluginAccordionItemBody>,
content: <PluginAccordionItemBody>{p.bodyMarkdown}</PluginAccordionItemBody>,
};
})}
/>
Expand Down
67 changes: 67 additions & 0 deletions ...olecules/Settings/Project/Plugin/PluginSection/PluginInstall/MarketplacePublish/index.tsx
View file
@@ -0,0 +1,67 @@
import Flex from "@reearth/components/atoms/Flex";
import Icon, { Icons } from "@reearth/components/atoms/Icon";
import Text from "@reearth/components/atoms/Text";
import { styled } from "@reearth/theme";
import { metricsSizes } from "@reearth/theme/metrics";

export type Props = {
className?: string;
icon: Icons;
buttonText: string;
loading?: boolean;
};

const MarketplacePublish: React.FC<Props> = ({ className, icon, buttonText }) => {
return (
<StyledFlex
className={className}
onClick={() => alert("going to the marketplace")}
justify="center"
align="center">
<StyledIcon icon={icon} size={91} />
<Text size="l" customColor>
{buttonText}
</Text>
</StyledFlex>
);
};

const StyledFlex = styled(Flex)`
position: relative;
z-index: ${({ theme }) => theme.zIndexes.base};
overflow: hidden;
flex: 0 0 auto;
box-sizing: border-box;
width: 100%;
color: ${({ theme }) => theme.main.text};
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: ${({ theme }) => theme.metrics.l}px;
padding: ${metricsSizes["m"]}px;
cursor: pointer;
transition: color 0.3s;
&:hover {
color: ${({ theme }) => theme.main.strongText};
}
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 150%;
height: 100%;
background: linear-gradient(10.66deg, #232226 30%, #1e2086 70%);
transition: transform 0.3s;
z-index: ${({ theme }) => theme.zIndexes.hidden};
}
&:hover: :before {
transform: translateX(-15%);
}
`;

const StyledIcon = styled(Icon)`
margin-right: ${metricsSizes["l"]}px;
`;

export default MarketplacePublish;
44 changes: 20 additions & 24 deletions ...molecules/Settings/Project/Plugin/PluginSection/PluginInstall/PluginInstallCardButton.tsx
View file
Expand Up @@ -3,45 +3,41 @@ import React from "react";
import Flex from "@reearth/components/atoms/Flex";
import Icon, { Icons } from "@reearth/components/atoms/Icon";
import Text from "@reearth/components/atoms/Text";
import { styled, useTheme } from "@reearth/theme";
import { styled } from "@reearth/theme";
import { metricsSizes } from "@reearth/theme/metrics";

export type Props = {
className?: string;
onClick?: () => void;
icon: Icons;
text: string;
onClick?: () => void;
};

const PluginInstallCardButton: React.FC<Props> = ({ className, onClick, icon, text }) => {
const theme = useTheme();
return (
<StyledButton onClick={onClick} className={className}>
<Flex direction="column" align="center">
<StyledIcon icon={icon} size={126} color={theme.main.strongText} />
<Text size="l" color={theme.main.strongText} otherProperties={{ textAlign: "center" }}>
{text}
</Text>
</Flex>
</StyledButton>
);
};
const PluginInstallCardButton: React.FC<Props> = ({ className, icon, text, onClick }) => (
<StyledButton onClick={onClick} className={className}>
<Flex direction="column" align="center">
<Icon icon={icon} size={126} />
<Text size="l" customColor otherProperties={{ textAlign: "center" }}>
{text}
</Text>
</Flex>
</StyledButton>
);

const StyledButton = styled.div`
box-sizing: border-box;
min-width: 375px;
background-color: ${props => props.theme.main.lighterBg};
min-width: 280px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: ${props => props.theme.metrics.l}px;
color: ${({ theme }) => theme.main.text};
cursor: pointer;
padding: 0 ${metricsSizes["3xl"]}px ${metricsSizes["3xl"]}px;
&:hover {
background-color: ${props => props.theme.main.paleBg};
color: ${({ theme }) => theme.main.strongText};
}
cursor: pointer;
box-sizing: border-box;
padding: ${metricsSizes["3xl"]}px;
`;

const StyledIcon = styled(Icon)`
stroke: ${({ theme }) => theme.main.strongText};
fill: ${({ theme }) => theme.main.strongText};
transition: all 0.3s;
`;

export default PluginInstallCardButton;

0 comments on commit abd1c24

Please sign in to comment.