initial reusable component docs

establishing using of children property in reusable components.

connected to #125

README.md

@@ -7,6 +7,18 @@ This is the repository of the BOS components for the NEAR DevHub trustees dashbo
 
 Please refer to [NEAR DevHub](https://github.com/NEAR-DevHub/neardevhub-bos/blob/main/CONTRIBUTING.md) for general contribution guidelines. Details specific for this repository will be added later.
 
+## Running tests
+
+This project has many [playwright-tests](./playwright-tests/), which covers most of the functionality.
+
+Some of the tests depend on the NEAR sandbox. The NEAR sandbox is a local blockchain for testing, and allows simulating the interaction with smart contracts.
+
+To build the sandbox type the following:
+
+`npm run build:sandbox`
+
+Then you can run the tests using `npm run test` or `npm run test:watch:codespaces`. You can also add flags such as `--ui` for UI mode, or inspect the test configuration in [playwright.config.js](./playwright.config.js).
+
 ## Creating test videos
 
 Creating videos of your automated tests is a great way of showcasing the changes in your contribution. Video recording of your test can be enabled in the [playwright.config.js](./playwright.config.js) under the `use` section where there is the `video` property that you should set to `on` ( Remember to NOT commit it with the `on` setting, as we don't want to waste github action resources on recording videos).

docs/developer/ui-component-library.md

@@ -0,0 +1,32 @@
+UI component library
+====================
+
+To ensure a consistent look and feel across the application, developers should reuse standard components, and avoid applying specific styling on pages.
+
+# Implementing components
+
+An example of a reusable component is the [Modal](../../instances/treasury-devdao.near/widget/lib/modal.jsx).
+
+To implement a reusable component, we can create a function that takes `children` as a parameter. Here's an example:
+
+```jsx
+const ModalFooter = ({ children }) => 
+  <div className="modalfooter d-flex gap-2 align-items-center justify-content-end mt-2">
+    {children}
+  </div>
+;
+```
+
+We can then use it in another widget like this:
+
+```jsx
+const { Modal, ModalBackdrop, ModalContent, ModalDialog, ModalHeader, ModalFooter } =
+  VM.require("${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/lib.modal");
+
+return <ModalFooter>
+    <button>Dismiss</button>
+</ModalFooter>
+;
+```
+
+This way, we can have custom jsx inside the resuable component. The styles and classes of the reusable component will be applied to the custom jsx content.

instances/treasury-devdao.near/widget/lib/modal.jsx

@@ -62,14 +62,6 @@ const ModalHeader = styled.div`
   padding-bottom: 4px;
 `;
 
-const ModalFooter = styled.div`
-  padding-top: 4px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: items-center;
-`;
-
 const CloseButton = styled.button`
   display: flex;
   align-items: center;
@@ -106,4 +98,10 @@ const NoButton = styled.button`
   box-shadow: none;
 `;
 
-return { Modal, ModalBackdrop, ModalContent, ModalDialog, ModalHeader };
+const ModalFooter = ({ children }) => 
+  <div className="modalfooter d-flex gap-2 align-items-center justify-content-end mt-2">
+    {children}
+  </div>
+;
+
+return { Modal, ModalBackdrop, ModalContent, ModalDialog, ModalHeader, ModalFooter };

instances/treasury-devdao.near/widget/pages/settings/VotingDurationPage.jsx

@@ -8,7 +8,7 @@ if (!instance) {
 }
 
 const { treasuryDaoID } = VM.require(`${instance}/widget/config.data`);
-const { Modal, ModalBackdrop, ModalContent, ModalDialog, ModalHeader } =
+const { Modal, ModalBackdrop, ModalContent, ModalDialog, ModalHeader, ModalFooter } =
   VM.require("${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/lib.modal");
 
 const daoPolicy = Near.view(treasuryDaoID, "get_policy", {});
@@ -397,6 +397,7 @@ return (
                 </ul>
                 {showImpactedRequests ? (
                   <>
+
                     <h4>Summary of changes</h4>
                     <table className="table table-sm">
                       <thead>
@@ -466,7 +467,7 @@ return (
                   ""
                 )}
               </ModalContent>
-              <div className="modalfooter d-flex gap-2 align-items-center justify-content-end mt-2">
+              <ModalFooter>
                 <Widget
                   src={
                     "${REPL_DEVHUB}/widget/devhub.components.molecule.Button"
@@ -487,7 +488,7 @@ return (
                     onClick: submitChangeRequest,
                   }}
                 />
-              </div>
+              </ModalFooter>
             </ModalDialog>
           </Modal>
         ) : (

playwright-tests/tests/settings/voting-duration.spec.js

@@ -317,6 +317,7 @@ test.describe("admin connected", function () {
               proposal.id.toString()
             )
           );
+          await expect(await page.locator(".modalfooter")).toBeVisible();
           await page
             .locator(".modalfooter button", { hasText: "Cancel" })
             .click();