Skip to content

Commit

Permalink
Merge pull request #696 from near/develop
Browse files Browse the repository at this point in the history
Off cycle release
  • Loading branch information
gabehamilton authored Mar 11, 2024
2 parents 4b865c8 + 2d0506d commit 6aa1da1
Show file tree
Hide file tree
Showing 5 changed files with 135 additions and 39 deletions.
53 changes: 53 additions & 0 deletions src/Entities/Template/EntityCreate.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
const { data, onSubmit, onCancel, cancelLabel, entityType, schema } = props;
const capitalize = (s) => (s ? s.charAt(0).toUpperCase() + s.slice(1) : s);
const capitalizedEntityType = capitalize(entityType);
if (!schema || !entityType) {
return <>Missing properties schema or entityType</>;
}
const displayedSchema = Object.keys(schema)
.filter((key) => schema[key]?.displayType !== "hidden")
.reduce((acc, key) => {
if (key) acc[key] = schema[key];
return acc;
}, {});
const onSubmitDefault = (formValues) => {
const { name, ...rest } = formValues;
const entity = { [name]: rest };
Social.set({ [entityType]: entity }, { force: true });
};
const onSubmitFunction = onSubmit ?? onSubmitDefault;

const inputsValidator = (formValues) =>
formValues !== null &&
typeof formValues === "object" &&
!Array.isArray(formValues) &&
Object.keys(schema).every((key) => {
const val = schema[key];
const required = val?.inputProps?.required;
return !required || typeof formValues[key] === "string";
});

const actionType = data ? (data.accountId == context.accountId ? "Edit" : "Fork") : "Create";

return (
<Widget
src="devhub.near/widget/devhub.components.organism.Configurator"
props={{
heading: `${actionType} ${capitalizedEntityType}`,
fullWidth: true,
isActive: true,
isUnlocked: true,
isValid: inputsValidator,
onSubmit: onSubmitFunction,
schema: displayedSchema,
submitIcon: {
type: "bootstrap_icon",
variant: "bi-rocket-takeoff-fill",
},
submitLabel: data ? "Save" : "Launch",
onCancel: onCancel,
cancelLabel: cancelLabel,
externalState: data,
}}
/>
);
60 changes: 46 additions & 14 deletions src/Entities/Template/EntityList.jsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,23 @@
const { fetchGraphQL, loadItems } = VM.require("${REPL_ACCOUNT}/widget/Entities.QueryApi.Client");
if (!fetchGraphQL || !loadItems) {
const loadItemsQueryApi = VM.require("${REPL_ACCOUNT}/widget/Entities.QueryApi.Client")?.loadItems;
if (!loadItemsQueryApi) {
return <p>Loading modules...</p>;
}
const loadItems = props.loadItems ?? loadItemsQueryApi;

const accountId = props.accountId || context.accountId;
const { entityType, description, buildQueries, queryName, collection, renderItem, createWidget } = props;

const finalCreateWidget = createWidget ?? "${REPL_ACCOUNT}" + `/widget/Entities.${entityType}.${entityType}Create`;
const {
entityType,
schema,
description,
buildQueries,
queryName,
collection,
renderItem,
createWidget,
createWidgetProps,
} = props;

const finalCreateWidget = createWidget ?? `${REPL_ACCOUNT}/widget/Entities.Template.EntityCreate`;

const [searchKey, setSearchKey] = useState("");
const [sort, setSort] = useState("");
Expand Down Expand Up @@ -37,6 +48,12 @@ useEffect(() => {
loadItemsUseState();
}, [sort, searchKey]);

const humanize = (str) => {
if (!str) return "";
return str.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase());
};
const humanizedEntityType = humanize(entityType);

const Wrapper = styled.div`
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -111,23 +128,27 @@ const dialogStyles = {
maxWidth: "800px",
borderRadius: "14px",
};
const ScrollBox = styled.div`
max-height: 80vh;
overflow-y: auto;
`;

return (
<Wrapper className="container-xl">
<Header>
<div className="row">
<div className="col">
<H2>
{totalItems} {entityType + (totalItems > 1 ? "s" : "")}
{totalItems} {humanizedEntityType + (totalItems > 1 ? "s" : "")}
</H2>
{description && <Text>{description}</Text>}
</div>
{context.accountId && (
<div className="col-2">
<div className="col-3">
<Widget
src="near/widget/DIG.Button"
props={{
label: "Create " + entityType,
label: "Create " + humanizedEntityType,
onClick: toggleModal,
iconLeft: "ph ph-plus-circle",
variant: "primary",
Expand All @@ -139,7 +160,14 @@ return (
src="${REPL_ACCOUNT}/widget/DIG.Dialog"
props={{
type: "dialog",
description: <Widget src={finalCreateWidget} props={{ onCancel: closeModal, data: activeItem }} />,
description: (
<ScrollBox>
<Widget
src={finalCreateWidget}
props={{ schema, entityType, onCancel: closeModal, data: activeItem, ...createWidgetProps }}
/>
</ScrollBox>
),
onOpenChange: closeModal,
open: showCreateModal,
contentStyles: dialogStyles,
Expand All @@ -165,11 +193,15 @@ return (
</div>
}
>
<Items>
{items.map((item) => (
<Item key={item.accountId + item.widgetName}>{renderItem(item, editFunction)}</Item>
))}
</Items>
{props.table ? (
items.map((item) => <div key={`${item.accountId}-${item.widgetName}`}>{renderItem(item, editFunction)}</div>)
) : (
<Items>
{items.map((item) => (
<Item key={`${item.accountId}-${item.widgetName}`}>{renderItem(item, editFunction)}</Item>
))}
</Items>
)}
</InfiniteScroll>
)}
</Wrapper>
Expand Down
2 changes: 1 addition & 1 deletion src/Entities/Template/EntityPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// You can either:
// A. Copy the Entity components and adapt them
// B. Use the Entity components as is, passing in properties, as this file does.
// You'll need to create a <Entity>Page but can reuse EntityList
// You'll need to create a <Entity>Page but can reuse EntityList, EntityCreate
// The entity type in this example is 'components'

const entityType = "Component";
Expand Down
10 changes: 5 additions & 5 deletions src/NearOrg/DataAvailabilityPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -323,9 +323,9 @@ return (
<Widget
src="${REPL_ACCOUNT}/widget/DIG.Button"
props={{
href: "https://forms.gle/LWJoTpTiCbSheUL26",
href: "https://${REPL_NEAR_URL}/blog/why-near-data-availability",
target: "_blank",
label: "Get Updates",
label: "Intro to NEAR DA",
variant: "primary",
size: "large",
}}
Expand All @@ -334,9 +334,9 @@ return (
<Widget
src="${REPL_ACCOUNT}/widget/DIG.Button"
props={{
href: "https://pages.near.org/blog/why-near-data-availability/",
href: "https://www.nearmodular.com",
target: "_blank",
label: "Intro to NEAR DA",
label: "Costs Dashboard",
variant: "secondary",
fill: "outline",
size: "large",
Expand Down Expand Up @@ -582,7 +582,7 @@ return (
<Widget
src="${REPL_ACCOUNT}/widget/DIG.Button"
props={{
href: "https://pages.near.org/blog/why-near-data-availability/",
href: "https://${REPL_NEAR_URL}/blog/why-near-data-availability",
target: "_blank",
label: "Intro to NEAR DA",
variant: "secondary",
Expand Down
49 changes: 30 additions & 19 deletions src/NearOrg/FoundersPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,24 @@ const Wrapper = styled.div`
--text-hero: 500 72px/1 "FK Grotesk", "Mona Sans", sans-serif;
margin-top: calc(var(--body-top-padding) * -1);
.darkButton {
color: #fff !important;
background: transparent !important;
border-color: #00ec97 !important;
&:focus {
border-color: var(--violet9) !important;
}
&:hover {
color: #000 !important;
background: #00ec97 !important;
}
&:active {
color: #000 !important;
background: var(--sand3) !important;
border-color: var(--sand3) !important;
}
}
@media (max-width: 900px) {
--section-gap: 80px;
}
Expand Down Expand Up @@ -147,22 +165,6 @@ const IconCircle = styled.div`
}
`;

const TextLink = styled("Link")`
font: var(--text-base);
font-weight: 600;
line-height: 150%;
color: var(--white);
background: transparent;
text-decoration: none;
padding: 16px 24px;
border-radius: 50px;
border: 1px solid var(--green10);
&:hover {
text-decoration: none;
}
`;

const Resource = ({ name, description, icon, url, target }) => (
<Widget
src="${REPL_ACCOUNT}/widget/NearOrg.Card"
Expand Down Expand Up @@ -325,9 +327,18 @@ return (
project to the next level.
</Text>
<Flex>
<TextLink href="https://www.hzn.xyz/hzn" target="_blank">
Apply Now
</TextLink>
<Widget
src="${REPL_ACCOUNT}/widget/DIG.Button"
props={{
href: "https://www.hzn.xyz/hzn",
target: "_blank",
label: "Apply Now",
variant: "affirmative",
fill: "outline",
size: "large",
className: "darkButton",
}}
/>
</Flex>
</Flex>
),
Expand Down

0 comments on commit 6aa1da1

Please sign in to comment.