diff --git a/apps/potlock/widget/Components/Icons.jsx b/apps/potlock/widget/Components/Icons.jsx new file mode 100644 index 0000000..d6b1d0a --- /dev/null +++ b/apps/potlock/widget/Components/Icons.jsx @@ -0,0 +1,6 @@ +const { Volunteer } = VM.require("potlock.near/widget/Components.Icons.Volunteer"); +const { Component } = VM.require("potlock.near/widget/Components.Icons.Component"); +return { + Volunteer, + Component, +}; diff --git a/apps/potlock/widget/Components/Icons/Component.jsx b/apps/potlock/widget/Components/Icons/Component.jsx new file mode 100644 index 0000000..89120a0 --- /dev/null +++ b/apps/potlock/widget/Components/Icons/Component.jsx @@ -0,0 +1,14 @@ +const Component = () => { + return ( + + + + ); +}; + +return { Component }; diff --git a/apps/potlock/widget/Components/Icons/Volunteer.jsx b/apps/potlock/widget/Components/Icons/Volunteer.jsx new file mode 100644 index 0000000..93b65e4 --- /dev/null +++ b/apps/potlock/widget/Components/Icons/Volunteer.jsx @@ -0,0 +1,16 @@ +const Volunteer = () => { + return ( + + + + + ); +}; + +return { Volunteer }; diff --git a/apps/potlock/widget/Components/ui/Button.jsx b/apps/potlock/widget/Components/ui/Button.jsx new file mode 100644 index 0000000..e2063fd --- /dev/null +++ b/apps/potlock/widget/Components/ui/Button.jsx @@ -0,0 +1,246 @@ +const { Volunteer } = VM.require("potlock.near/widget/Components.Icons") || { + Volunteer: () => <>, +}; + +const StyledButton = styled.button` + all: unset; + width: 120px; + height: 22px; + border-radius: 6px; + padding: 9px 16px 9px 12px; + justify-content: center; + align-items: center; + display: inline-flex; + gap: 8px; + font-size: 14px; + font-weight: 500; + // font-family: "Mona Sans", sans-serif; + line-height: 22px; + text-align: center; + font-feature-settings: "ss01" on, "salt" on; + /* Mona sans/Text sm/14px:Medium */ + + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 22px; /* 157.143% */ + flex-shrink: 0; + transition: all 200ms cubic-bezier(0.17, 0.67, 0.83, 0.67); + + flex-direction: ${(props) => { + if (props.direction === "right") { + return "row"; + } else if (props.direction === "left") { + return "row-reverse"; + } + }}; + + svg path { + fill: ${(props) => { + switch (props.variant) { + case "outline": + return "rgba(123, 123, 123, 1)"; + case "tonal": + return "#656565"; + case "standard": + return "#FFFFFF"; + case "primary": + return "#FFFFFF"; + case "brand-outline": + return "hsla(358, 88%, 71%, 1)"; + } + }}; + } + + background: ${(props) => { + switch (props.variant) { + case "outline": + return "var(--button-outline-bg, Neutral/White)"; + case "tonal": + return "var(--button-tonal-bg,#FEF6EE) "; + case "standard": + return "var(--button-standard-bg, #3D3D3D)"; + case "primary": + return "var(--button-primary-bg, #DD3345)"; + case "brand-outline": + return "hsla(0, 0%, 100%, 0.01)"; + } + }}; + + color: ${(props) => { + switch (props.variant) { + case "outline": + return "var(--button-outline-color, #292929)"; + case "tonal": + return "var(--button-tonal-color,#292929) "; + case "standard": + return "var(--button-standard-color, #FFFFFF)"; + case "primary": + return "var(--button-primary-color, #FFFFFF)"; + case "brand-outline": + return "hsla(354, 71%, 53%, 1)"; + } + }}; + + box-shadow: ${(props) => { + switch (props.variant) { + case "outline": + return "0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset, 0px -1px 0px 0px rgba(15, 15, 15, 0.15) inset, 0px 1px 2px -0.5px rgba(5, 5, 5, 0.08);"; + case "tonal": + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #FFF inset, 0px 0px 0px 2px #FFF inset, 0px 1.5px 0px 0px rgba(0, 0, 0, 0.84);"; + case "standard": + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(166, 166, 166, 0.40) inset, 0px 0px 0px 2px rgba(166, 166, 166, 0.40) inset, 0px 1px 2px 0px rgba(15, 15, 15, 0.15), 0px 1px 3px -1px rgba(5, 5, 5, 0.08);"; + case "primary": + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(246, 118, 122, 0.50) inset, 0px 0px 0px 2px rgba(246, 118, 122, 0.50) inset, 0px 1.5px 0px 0px rgba(0, 0, 0, 0.84);"; + case "brand-outline": + return "0px 0px 0px 1px rgba(243, 78, 95, 0.78) inset, 0px -1px 0px 0px rgba(73, 8, 19, 0.50) inset, 0px 1px 2px -0.5px rgba(73, 8, 19, 0.20);"; + } + }}; + + &:hover:not(:disabled) { + transform: ${(props) => { + switch (props.variant) { + case "primary": + case "tonal": + return "translateY(1px)"; + } + }}; + box-shadow: ${(props) => { + switch (props.variant) { + case "primary": + return " 0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #ED464F inset;"; + case "outline": + return " 0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset, 0px -1px 0px 0px rgba(15, 15, 15, 0.15) inset, 0px 1px 2px -0.5px rgba(5, 5, 5, 0.08);"; + case "standard": + return " 0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(166, 166, 166, 0.40) inset, 0px 0px 0px 2px rgba(166, 166, 166, 0.40) inset, 0px 1px 2px 0px rgba(15, 15, 15, 0.15), 0px 1px 3px -1px rgba(5, 5, 5, 0.08);"; + case "tonal": + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #FFF inset;"; + case "brand-outline": + return "0px 0px 0px 1px rgba(243, 78, 95, 0.78) inset, 0px -1px 0px 0px rgba(73, 8, 19, 0.50) inset, 0px 1px 2px -0.5px rgba(73, 8, 19, 0.20);"; + } + }}; + background: ${(props) => { + switch (props.variant) { + case "primary": + return " #DD3345"; + case "outline": + return "Neutral/50"; + case "standard": + return " #525252"; + case "tonal": + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px #FFF inset;"; + case "brand-outline": + return "#FEF3F2"; + } + }}; + } + + &:focus:not(:disabled) { + box-shadow: ${(props) => { + switch (props.variant) { + case "outline": + return "0px 0px 0px 1px rgba(0, 0, 0, 0.22) inset, 0px -1px 0px 0px rgba(15, 15, 15, 0.15) inset, 0px 1px 2px -0.5px rgba(5, 5, 5, 0.08), 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);"; + case "primary": + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);"; + case "standard": + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 1px 1px 1px rgba(166, 166, 166, 0.30) inset, 0px 0px 0px 2px rgba(166, 166, 166, 0.30) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);"; + case "tonal": + return "0px 0px 0px 1px rgba(0, 0, 0, 0.84) inset, 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);"; + case "brand-outline": + return "0px 0px 0px 1px rgba(243, 78, 95, 0.78) inset, 0px -1px 0px 0px rgba(73, 8, 19, 0.50) inset, 0px 1px 2px -0.5px rgba(5, 5, 5, 0.08), 0px 0px 0px 2px #FFF, 0px 0px 0px 4px rgba(0, 0, 0, 0.84);"; + } + }}; + } + + &:disabled { + color: ${(props) => { + switch (props.variant) { + case "outline": + return "hsla(0, 0%, 78%, 1)"; // Adjust color value + case "standard": + return "hsla(0, 0%, 65%, 1)"; // Use CSS variable for color or specify a fallback + default: + return "inherit"; // Fallback to default color + } + }}; + + box-shadow: ${(props) => { + switch (props.variant) { + case "outline": + return "0px 0px 0px 1px rgba(15, 15, 15, 0.15) inset;"; // Adjust box-shadow value + case "standard": + return "0px 0px 0px 1px rgba(15, 15, 15, 0.15) inset;"; // Adjust box-shadow value + default: + return "none"; // No box-shadow for other variants + } + }}; + background: ${(props) => { + switch (props.variant) { + case "outline": + return "var(--button-outline-bg-disabled, #fff)"; // Use CSS variable for background or specify a fallback + case "standard": + return "var(--button-standard-bg-disabled, #EBEBEB)"; // Use CSS variable for background or specify a fallback + default: + return "inherit"; // Fallback to default background + } + }}; + } +`; + +const TipOnPotlock = ({ direction, variant, onClick, href, ...restProps }) => { + if (href) { + return ( + + + + Tip on Potlock + + + ); + } + return ( + + + Tip on Potlock + + ); +}; + +const Button = ({ direction, disabled, children, onClick, href, ...restProps }) => { + if (href) { + return ( + + + {children} + + + ); + } + return ( + + {children} + + ); +}; + +return { Button, TipOnPotlock }; diff --git a/apps/potlock/widget/Library.jsx b/apps/potlock/widget/Library.jsx new file mode 100644 index 0000000..358b11e --- /dev/null +++ b/apps/potlock/widget/Library.jsx @@ -0,0 +1,424 @@ +const { Button, TipOnPotlock } = VM.require("potlock.near/widget/Components.ui.Button") || { + Button: () => <>, + TipOnPotlock: () => <>, +}; + +const { Volunteer, Component } = VM.require("potlock.near/widget/Components.Icons") || { + Volunteer: () => <>, + Component: () => <>, +}; + +const ButtonPreview = ( +
+
+ + + + + +
+
+ + + + + +
+
+); + +const TipOnPotlockPreview = ( +
+
+ + + + + +
+
+); + +const components = [ + { + name: "Button", + category: "Buttons/Navigation", + widgetSrc: "potlock.near/widget/Components.ui.Button", + description: "Button component with four different variants, and icon support.", + requiredProps: { + children: "Button Text", + onClick: "Callback function to handle button click", + }, + optionalProps: { + id: "ID of the button", + variant: "Variant of the button (outline, primary, standard, tonal)", + className: "Additional classnames for button", + style: "Additional styles for button", + }, + preview: ButtonPreview, + embedCode: ` + const { Button } = VM.require("potlock.near/widget/Components.ui.Button"); + const { Volunteer } = VM.require("potlock.near/widget/Components.Icons"); + + return ( + + );`, + }, + { + name: "Public Goods Legos", + category: "Buttons/Navigation", + widgetSrc: "potlock.near/widget/Components.ui.Button", + description: "Button component with four different variants, and icon support.", + requiredProps: { + onClick: "Callback function to handle button click", + }, + optionalProps: { + id: "ID of the button", + variant: "Variant of the button (outline, primary, standard, tonal)", + + className: "Additional classnames for button", + style: "Additional styles for button", + }, + preview: TipOnPotlockPreview, + embedCode: ` + const { TipOnPotlock } = VM.require("potlock.near/widget/Components.ui.Button"); + return ( +
+ + + + +
+ );`, + }, +]; +const renderProps = (props, optional) => { + return Object.entries(props || {}).map(([key, desc]) => { + return ( + + + {key} + + + + + + ); + }); +}; +const renderComponent = (component, index) => { + const id = component.name.toLowerCase().replace(/ /g, "-"); + return ( +
+
+ +

{component.name}

+ +

{component.description}

+

Preview

+ {component.preview} +

Component

+
+
+ {state.copied ? "Copied!" : "Copy to clipboard"}} + > + { + clipboard.writeText(props.text).then(() => { + State.update({ copied: true }); + if (props.onCopy) { + props.onCopy(props.text); + } + }); + }} + src="mob.near/widget/CopyButton" + props={{ + text: component.widgetSrc, + label: component.widgetSrc, + }} + /> + +
+
+

Props

+ + + + + + + + + {renderProps(component.requiredProps)} + {renderProps(component.optionalProps, true)} + +
KeyDescription
+

Example

+
+ +
+ +
+
+
+
+ ); +}; +const Wrapper = styled.div` + h2, + h3, + label, + p { + color: black; + } + .component { + padding: 0.5em 12px; + padding-bottom: 0; + margin-bottom: 3em; + &:hover { + background: rgba(0, 0, 0, 0.03); + } + table, + th, + td { + background: #fff; + color: #000; + } + label { + font-size: 20px; + } + .code { + display: inline-flex; + line-height: normal; + border-radius: 0.3em; + padding: 0 4px; + border: 1px solid #ddd; + background: rgba(0, 0, 0, 0.03); + font-family: var(--bs-font-monospace); + } + .path { + } + .preview { + background-color: white; + padding: 12px; + border: 1px solid #eee; + border-radius: 12px; + pre { + margin-bottom: 0; + } + } + .props { + .prop-key { + background: #f7f7f7; + border: 1px solid #dddddd; + color: black; + border-radius: 8px; + padding: 2px 4px; + font-weight: 600; + &.optional { + font-weight: 400; + } + } + .prop-desc { + p { + margin-bottom: 0; + color: #000; + } + } + } + .embed-code { + position: relative; + .embed-copy { + position: absolute; + top: 18px; + right: 10px; + } + } + } +`; +const renderMenuItem = (c, i) => { + const prev = i ? components[i - 1] : null; + const res = []; + const id = c.name.toLowerCase().replaceAll(" ", "-"); + res.push( +
+ + + {c.name} + +
+ ); + return res; +}; +const Grid = styled.div` + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 1rem; + .main { + grid-column: span 4 / span 4; + } + .aside { + grid-column: span 1 / span 1; + border-radius: 16px; + border: 1px solid var(--stroke-color, rgba(154, 127, 127, 0.2)); + background: var(--bg-1, #fff); + width: 100%; + min-height: 80vh; + display: flex; + padding: 24px 12px; + flex-direction: column; + align-items: flex-start; + gap: 16px; + margin-bottom: 1rem; + .menu-item { + width: 100%; + display: flex; + } + a { + all: unset; + display: inline-flex; + padding: 8px 12px; + justify-content: flex-start; + align-items: center; + gap: 4px; + border-radius: 8px; + font-size: 14px; + font-weight: 500; + transition: all 300ms; + background: var(--button-outline-bg, #fff); + color: var(--button-outline-color, #000); + border: 1px solid var(--stroke-color, rgba(154, 127, 127, 0.2)) !important; + cursor: pointer; + align-self: stretch; + width: 100%; + text-align: left; + &:hover { + background: var(--button-outline-hover-bg, #cdcdcd); + color: var(--button-outline-hover-color, #000); + } + } + + svg path { + fill: #000; + } + } + .top { + grid-column: span 1 / span 1; + border-radius: 16px; + border: 1px solid var(--stroke-color, rgba(154, 127, 127, 0.2)); + background: var(--bg-1, #fff); + width: 100%; + display: flex; + padding: 24px 12px; + flex-direction: column; + align-items: flex-start; + gap: 16px; + margin-bottom: 1rem; + .menu-item { + width: 100%; + display: flex; + } + a { + all: unset; + display: inline-flex; + padding: 8px 12px; + justify-content: flex-start; + align-items: center; + gap: 4px; + border-radius: 8px; + font-size: 14px; + font-weight: 500; + transition: all 300ms; + background: var(--button-outline-bg, #fff); + color: var(--button-outline-color, #000); + border: 1px solid var(--stroke-color, rgba(154, 127, 127, 0.2)) !important; + cursor: pointer; + align-self: stretch; + width: 100%; + text-align: left; + &:hover { + background: var(--button-outline-hover-bg, #cdcdcd); + color: var(--button-outline-hover-color, #000); + } + } + + svg path { + fill: #000; + } + } + @media screen and (max-width: 768px) { + display: flex; + flex-direction: column; + gap: 1rem; + .aside { + flex-direction: row; + border: none; + overflow-x: auto; + min-height: auto; + gap: 2rem; + .menu-item { + width: max-content; + flex-shrink: 0; + a { + flex-shrink: 0; + } + } + } + } +`; +return ( + +
+ {components.map((component, index) => renderMenuItem(component, index))} +
+ +
+

+ Library +

+
+ {components.map((component, index) => renderComponent(component, index))} + + +);