Merge pull request #18 from wpdas/staging

Staging: News from beta 26, added collapse list component, docs updated

package.json

@@ -13,7 +13,7 @@
     "deploy:testnet": "npm run build; alem deploy --network testnet"
   },
   "dependencies": {
-    "alem": "1.0.0-beta.22"
+    "alem": "1.0.0-beta.26"
   },
   "devDependencies": {
     "@types/styled-components": "^5.1.26",

src/components/CollapseList.tsx

@@ -0,0 +1,57 @@
+import { useState } from "alem";
+import styled from "styled-components";
+
+type Props = {
+  title: string;
+  children: React.ReactElement;
+  initialState?: "open" | "closed";
+  onClick?: (isOpen: boolean) => void;
+};
+
+const CollapseList = ({ title, children, initialState, onClick }: Props) => {
+  const Content = styled.div<{ open: boolean }>`
+    overflow: hidden;
+    height: ${(props) => (props.open ? "fit-content" : "0px")};
+  `;
+
+  const TitleButton = styled.button`
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+    border: none;
+    margin: 0;
+    padding: 0;
+
+    h3:hover,
+    :hover {
+      color: rgb(68, 152, 224);
+    }
+
+    span {
+      margin-top: 6px;
+    }
+  `;
+
+  const [open, setOpen] = useState(initialState === "open");
+
+  return (
+    <>
+      <TitleButton
+        onClick={() => {
+          if (onClick) onClick(!open);
+          setOpen(!open);
+        }}
+      >
+        <h3>{title}</h3>
+        {open ? (
+          <span className="material-symbols-outlined">arrow_drop_up</span>
+        ) : (
+          <span className="material-symbols-outlined">arrow_drop_down</span>
+        )}
+      </TitleButton>
+      <Content open={open}>{children}</Content>
+    </>
+  );
+};
+
+export default CollapseList;

src/components/Sidebar/index.tsx

@@ -1,9 +1,15 @@
-import { useEffect, getLocation, useState, useRoutes, props } from "alem";
+import { useEffect, getLocation, useState, useRoutes, Storage } from "alem";
 import { SidebarAboutLogo, Container } from "./styles";
 import getLinksByCategory from "../../utils/getLinksByCategory";
+import CollapseList from "../CollapseList";
+import { Categories, RoutesPath } from "@app/routes/routeProps";
 
 const Sidebar = () => {
   const { pathname } = getLocation();
+  const entries = Object.entries(RoutesPath);
+  const routePropsEntry = entries.find((entry) => entry[1].path === pathname);
+  const routeProps = routePropsEntry ? routePropsEntry[1] : null;
+
   const { routeParameterName } = useRoutes();
 
   const [gettingStartedItems, setGettingStartedItems] = useState<(JSX.Element | undefined)[]>([]);
@@ -29,6 +35,40 @@ const Sidebar = () => {
     setBosItems(_bosItems);
   }, [pathname, routeParameterName]);
 
+  const [openCategories, setOpenCategories] = useState<string[]>([]);
+
+  const handleOpenRegister = (isOpen: boolean, category: string) => {
+    if (!isOpen) {
+      const updatedOpenCategories = openCategories.filter((item) => item !== category);
+      setOpenCategories(updatedOpenCategories);
+    } else {
+      if (!openCategories.includes(category)) {
+        const updatedOpenCategories = [...openCategories, category];
+        setOpenCategories(updatedOpenCategories);
+      }
+    }
+  };
+
+  // Read previous openCategories
+  useEffect(() => {
+    const previousOpenCategories = Storage.get("openCategories");
+    if (previousOpenCategories) {
+      setOpenCategories(previousOpenCategories);
+    }
+  }, []);
+
+  // On change openCategories: store on storage
+  useEffect(() => {
+    Storage.set("openCategories", openCategories);
+  }, [openCategories]);
+
+  // Handle the routeProps
+  useEffect(() => {
+    if (routeProps) {
+      handleOpenRegister(true, routeProps.category);
+    }
+  }, [routeProps]);
+
   return (
     <Container>
       <SidebarAboutLogo
@@ -38,33 +78,59 @@ const Sidebar = () => {
       />
 
       <div>
-        <h3>Getting Started</h3>
-        {gettingStartedItems}
+        <CollapseList title="Getting Started" initialState="open">
+          <>{gettingStartedItems}</>
+        </CollapseList>
       </div>
 
       <div>
-        <h3>Modules</h3>
-        {modulesItems}
+        <CollapseList
+          title="Modules"
+          initialState={openCategories.includes(Categories.modules) ? "open" : "closed"}
+          onClick={(isOpen) => handleOpenRegister(isOpen, Categories.modules)}
+        >
+          <>{modulesItems}</>
+        </CollapseList>
       </div>
 
       <div>
-        <h3>Routes</h3>
-        {routerItems}
+        <CollapseList
+          title="Routes"
+          initialState={openCategories.includes(Categories.router) ? "open" : "closed"}
+          onClick={(isOpen) => handleOpenRegister(isOpen, Categories.router)}
+        >
+          <>{routerItems}</>
+        </CollapseList>
       </div>
 
       <div>
-        <h3>Context</h3>
-        {contextItems}
+        <CollapseList
+          title="Context"
+          initialState={openCategories.includes(Categories.context) ? "open" : "closed"}
+          onClick={(isOpen) => handleOpenRegister(isOpen, Categories.context)}
+        >
+          <>{contextItems}</>
+        </CollapseList>
       </div>
 
       <div>
-        <h3>Utils</h3>
-        {apisItems}
+        <CollapseList
+          title="Utils"
+          initialState={openCategories.includes(Categories.apis) ? "open" : "closed"}
+          onClick={(isOpen) => handleOpenRegister(isOpen, Categories.apis)}
+        >
+          <>{apisItems}</>
+        </CollapseList>
       </div>
 
       <div>
-        <h3>NEAR VM (BOS)</h3>
-        {bosItems}
+        <CollapseList
+          title="NEAR VM (BOS)"
+          initialState={openCategories.includes(Categories.bos) ? "open" : "closed"}
+          onClick={(isOpen) => handleOpenRegister(isOpen, Categories.bos)}
+        >
+          <>{bosItems}</>
+        </CollapseList>
       </div>
     </Container>
   );

src/md/Environment.tsx

@@ -1,7 +1,7 @@
 import { Markdown } from 'alem';
 
 const Environment = () => {
-   const mdContent = Buffer.from(`IyBFbnZpcm9ubWVudAoKQ3JlYXRlIGEgYC5lbnZgIGZpbGUgdG8gc2V0IHVwIHRoZSBwcm9qZWN0J3MgZW52aXJvbm1lbnQgYW5kIG90aGVyIHZhcnMuCgoqKmRldmVsb3BtZW50OioqIGFkZCBgTk9ERV9FTlY9ZGV2ZWxvcG1lbnRgIHRvIHlvdXIgYC5lbnZgIGZpbGUuIFRoaXMgd2lsbCBzZXQgdGhlIHByb2plY3QgZW52IGFzIGBkZXZlbG9wbWVudGAuCgpUaGUgYWJzZW5jZSBvZiB0aGUgYC5lbnZgIGZpbGUgbWVhbnMgdGhhdCBgTk9ERV9FTlY9cHJvZHVjdGlvbmAuCg==`, "base64").toString("utf-8");
+   const mdContent = Buffer.from(`IyBFbnZpcm9ubWVudAoKQ3JlYXRlIGEgYC5lbnZgIGZpbGUgdG8gc2V0IHVwIHRoZSBwcm9qZWN0J3MgZW52aXJvbm1lbnQgYW5kIG90aGVyIHZhcnMuCgoqKmUuZzoqKiBpZiB5b3UgYWRkIGBOT0RFX0VOVj1kZXZlbG9wbWVudGAgdG8geW91ciBgLmVudmAgZmlsZS4gVGhpcyB3aWxsIHNldCB0aGUgcHJvamVjdCBlbnYgYXMgYGRldmVsb3BtZW50YC4KClRoZSBhYnNlbmNlIG9mIHRoZSBgLmVudmAgZmlsZSBtZWFucyB0aGF0IGBOT0RFX0VOVj1wcm9kdWN0aW9uYC4KCllvdSBjYW4gdXNlIGBnZXRBbGVtRW52aXJvbm1lbnQoKWAgcHJvdmlkZWQgYnkgQWzDqW0gdG8gYWNjZXNzIHRoZSBjdXJyZW50IGVudmlyb25tZW50IHZhbHVlLgo=`, "base64").toString("utf-8");
    return <Markdown text={mdContent} />
 }
 

src/md/api/GetAlemEnvironment.tsx

@@ -0,0 +1,8 @@
+import { Markdown } from 'alem';
+
+const GetAlemEnvironment = () => {
+   const mdContent = Buffer.from(`IyBHZXQgQWxlbSBFbnZpcm9ubWVudAoKVXNlZnVsIGZlYXR1cmUgdG8gZ2V0IHRoZSBjdXJyZW50IGVudmlyb25tZW50IHZhbHVlLiBVc2UgYC5lbnZgIHRvIHNldCB0aGUgZW52aXJvbm1lbnQuCgpgYGBzaAojIHNldCB0aGUgcHJvamVjdCdzIGVudmlyb25tZW50Ck5PREVfRU5WPXN0YWdpbmcKYGBgCgpgYGB0c3gKaW1wb3J0IHsgZ2V0QWxlbUVudmlyb25tZW50IH0gZnJvbSAiYWxlbSI7Cgpjb25zb2xlLmxvZyhnZXRBbGVtRW52aXJvbm1lbnQoKSk7IC8vIHN0YWdpbmcKYGBgCg==`, "base64").toString("utf-8");
+   return <Markdown text={mdContent} />
+}
+
+export default GetAlemEnvironment;

src/md/api/IsDevelopment.tsx

@@ -1,7 +1,7 @@
 import { Markdown } from 'alem';
 
 const IsDevelopment = () => {
-   const mdContent = Buffer.from(`IyBpc0RldmVsb3BtZW50CgpVc2VmdWwgZmVhdHVyZSB0byBrbm93IGlmIHRoZSBlbnZpcm9ubWVudCBpcyBkZXZlbG9wbWVudCBvciBwcm9kdWN0aW9uLiBVc2UgYC5lbnZgIHRvIHNldCB0aGUgZW52aXJvbm1lbnQuCgpgYGBzaAojIHNldCB0aGUgcHJvamVjdCdzIGVudmlyb25tZW50Ck5PREVfRU5WPWRldmVsb3BtZW50CmBgYAoKYGBgdHN4CmltcG9ydCB7IGlzRGV2ZWxvcG1lbnQgfSBmcm9tICJhbGVtIjsKCmNvbnN0IGFuc3dlciA9IGlzRGV2ZWxvcG1lbnQgPyAiWWVwIiA6ICJOb3BlIjsKYGBgCg==`, "base64").toString("utf-8");
+   const mdContent = Buffer.from(`IyBpc0RldmVsb3BtZW50CgpVc2VmdWwgZmVhdHVyZSB0byBrbm93IGlmIHRoZSBlbnZpcm9ubWVudCBpcyBkZXZlbG9wbWVudCBvciBwcm9kdWN0aW9uLiBVc2UgYC5lbnZgIHRvIHNldCB0aGUgZW52aXJvbm1lbnQuCgpgYGBzaAojIHNldCB0aGUgcHJvamVjdCdzIGVudmlyb25tZW50Ck5PREVfRU5WPWRldmVsb3BtZW50CmBgYAoKYGBgdHN4CmltcG9ydCB7IGlzRGV2ZWxvcG1lbnQgfSBmcm9tICJhbGVtIjsKCmNvbnN0IGFuc3dlciA9IGlzRGV2ZWxvcG1lbnQgPyAiWWVwIiA6ICJOb3BlIjsKYGBgCgpZb3UgbWF5IHdhbnQgdG8gdXNlIGBnZXRBbGVtRW52aXJvbm1lbnQoKWAgYXMgaXQgcmV0dXJucyB0aGUgdmFsdWUgZm9yIHRoZSBjdXJyZW50IGVudmlyb25tZW50Lgo=`, "base64").toString("utf-8");
    return <Markdown text={mdContent} />
 }
 

src/md/api/get-alem-environment.md

@@ -0,0 +1,14 @@
+# Get Alem Environment
+
+Useful feature to get the current environment value. Use `.env` to set the environment.
+
+```sh
+# set the project's environment
+NODE_ENV=staging
+```
+
+```tsx
+import { getAlemEnvironment } from "alem";
+
+console.log(getAlemEnvironment()); // staging
+```

src/md/api/is-development.md

@@ -12,3 +12,5 @@ import { isDevelopment } from "alem";
 
 const answer = isDevelopment ? "Yep" : "Nope";
 ```
+
+You may want to use `getAlemEnvironment()` as it returns the value for the current environment.

src/md/environment.md

@@ -2,6 +2,8 @@
 
 Create a `.env` file to set up the project's environment and other vars.
 
-**development:** add `NODE_ENV=development` to your `.env` file. This will set the project env as `development`.
+**e.g:** if you add `NODE_ENV=development` to your `.env` file. This will set the project env as `development`.
 
 The absence of the `.env` file means that `NODE_ENV=production`.
+
+You can use `getAlemEnvironment()` provided by Além to access the current environment value.

src/md/feature-overview.md

@@ -237,6 +237,8 @@ const SomeComponent = () => {
 
 The use of the `import * foo from './foo'` signature is not supported. This is intentional, as the idea is to import only the necessary fragments into the Widget.
 
+## Internal Duplicate Items
+
 Além fixes duplicate item names being exported by the application automatically, but you should avoid importing a resource that has the same name as any variable within your component. E.g.:
 
 ✅ **- Right**

src/routes/Routes.tsx

@@ -25,6 +25,7 @@ import CssFiles from "@app/md/CssFiles";
 import InstallingModules from "@app/md/modules/InstallingModules";
 import HowToUseModules from "@app/md/modules/HowToUseModules";
 import Environment from "@app/md/Environment";
+import GetAlemEnvironment from "@app/md/api/GetAlemEnvironment";
 
 const Routes = () => {
   const urlParams = useParams();
@@ -64,6 +65,7 @@ const Routes = () => {
     createRoute(RoutesPath.promisify.path, Promisify),
     createRoute(RoutesPath.isDevelopment.path, IsDevelopment),
     createRoute(RoutesPath.createDebounce.path, CreateDebounce),
+    createRoute(RoutesPath.getAlemEnvironment.path, GetAlemEnvironment),
 
     // BOS API
     createRoute(RoutesPath.bosProps.path, BosOverview),

src/routes/nextPrevRoutes.ts

@@ -93,12 +93,16 @@ const nextPrevRoutes = () => ({
   },
   [RoutesPath.createDebounce.path]: {
     prev: RoutesPath.isDevelopment.path,
+    next: RoutesPath.getAlemEnvironment.path,
+  },
+  [RoutesPath.getAlemEnvironment.path]: {
+    prev: RoutesPath.createDebounce.path,
     next: RoutesPath.bosProps.path,
   },
 
   // NEAR VM (BOS)
   [RoutesPath.bosProps.path]: {
-    prev: RoutesPath.createDebounce.path,
+    prev: RoutesPath.getAlemEnvironment.path,
   },
 });
 

src/routes/routeProps.ts

@@ -126,6 +126,11 @@ export const RoutesPath = {
     title: "Create Debounce",
     category: Categories.apis,
   },
+  getAlemEnvironment: {
+    path: "get-environment",
+    title: "Get Environment",
+    category: Categories.apis,
+  },
 
   // BOS API
   bosProps: {