feat: add did-box and organizations components for profile page (#114)

* feat: add did-box to render did id * feat: add organizations component
ForkbombEu · Jul 10, 2024 · b71cd09 · b71cd09
1 parent 4ce41ca
commit b71cd09
Show file tree

Hide file tree

Showing 17 changed files with 291 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -31,7 +31,8 @@
   },
   "dependencies": {
     "@stencil/core": "^4.11.0",
-    "@tailwindcss/line-clamp": "^0.4.4"
+    "@tailwindcss/line-clamp": "^0.4.4",
+    "did-resolver": "^4.1.0"
   },
   "devDependencies": {
     "@ionic/core": "^7.6.6",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -61,6 +61,9 @@ export namespace Components {
         "hidable": boolean;
         "title": string;
     }
+    interface DDidBox {
+        "did": string;
+    }
     interface DEmptyState {
         "buttonText": string | undefined;
         "heading": string;
@@ -100,6 +103,10 @@ export namespace Components {
     }
     interface DLogo {
     }
+    interface DOrganizations {
+        "empty": boolean;
+        "heading": string;
+    }
     interface DPageDescription {
         "description"?: string;
         "title": string;
@@ -204,6 +211,12 @@ declare global {
         prototype: HTMLDDefinitionElement;
         new (): HTMLDDefinitionElement;
     };
+    interface HTMLDDidBoxElement extends Components.DDidBox, HTMLStencilElement {
+    }
+    var HTMLDDidBoxElement: {
+        prototype: HTMLDDidBoxElement;
+        new (): HTMLDDidBoxElement;
+    };
     interface HTMLDEmptyStateElement extends Components.DEmptyState, HTMLStencilElement {
     }
     var HTMLDEmptyStateElement: {
@@ -269,6 +282,12 @@ declare global {
         prototype: HTMLDLogoElement;
         new (): HTMLDLogoElement;
     };
+    interface HTMLDOrganizationsElement extends Components.DOrganizations, HTMLStencilElement {
+    }
+    var HTMLDOrganizationsElement: {
+        prototype: HTMLDOrganizationsElement;
+        new (): HTMLDOrganizationsElement;
+    };
     interface HTMLDPageDescriptionElement extends Components.DPageDescription, HTMLStencilElement {
     }
     var HTMLDPageDescriptionElement: {
@@ -320,13 +339,15 @@ declare global {
         "d-credential-detail": HTMLDCredentialDetailElement;
         "d-credential-service": HTMLDCredentialServiceElement;
         "d-definition": HTMLDDefinitionElement;
+        "d-did-box": HTMLDDidBoxElement;
         "d-empty-state": HTMLDEmptyStateElement;
         "d-feedback": HTMLDFeedbackElement;
         "d-header": HTMLDHeaderElement;
         "d-heading": HTMLDHeadingElement;
         "d-info-led": HTMLDInfoLedElement;
         "d-input": HTMLDInputElement;
         "d-logo": HTMLDLogoElement;
+        "d-organizations": HTMLDOrganizationsElement;
         "d-page-description": HTMLDPageDescriptionElement;
         "d-scan-button": HTMLDScanButtonElement;
         "d-session-card": HTMLDSessionCardElement;
@@ -392,6 +413,9 @@ declare namespace LocalJSX {
         "hidable"?: boolean;
         "title"?: string;
     }
+    interface DDidBox {
+        "did"?: string;
+    }
     interface DEmptyState {
         "buttonText"?: string | undefined;
         "heading"?: string;
@@ -434,6 +458,10 @@ declare namespace LocalJSX {
     }
     interface DLogo {
     }
+    interface DOrganizations {
+        "empty"?: boolean;
+        "heading"?: string;
+    }
     interface DPageDescription {
         "description"?: string;
         "title"?: string;
@@ -473,13 +501,15 @@ declare namespace LocalJSX {
         "d-credential-detail": DCredentialDetail;
         "d-credential-service": DCredentialService;
         "d-definition": DDefinition;
+        "d-did-box": DDidBox;
         "d-empty-state": DEmptyState;
         "d-feedback": DFeedback;
         "d-header": DHeader;
         "d-heading": DHeading;
         "d-info-led": DInfoLed;
         "d-input": DInput;
         "d-logo": DLogo;
+        "d-organizations": DOrganizations;
         "d-page-description": DPageDescription;
         "d-scan-button": DScanButton;
         "d-session-card": DSessionCard;
@@ -501,13 +531,15 @@ declare module "@stencil/core" {
             "d-credential-detail": LocalJSX.DCredentialDetail & JSXBase.HTMLAttributes<HTMLDCredentialDetailElement>;
             "d-credential-service": LocalJSX.DCredentialService & JSXBase.HTMLAttributes<HTMLDCredentialServiceElement>;
             "d-definition": LocalJSX.DDefinition & JSXBase.HTMLAttributes<HTMLDDefinitionElement>;
+            "d-did-box": LocalJSX.DDidBox & JSXBase.HTMLAttributes<HTMLDDidBoxElement>;
             "d-empty-state": LocalJSX.DEmptyState & JSXBase.HTMLAttributes<HTMLDEmptyStateElement>;
             "d-feedback": LocalJSX.DFeedback & JSXBase.HTMLAttributes<HTMLDFeedbackElement>;
             "d-header": LocalJSX.DHeader & JSXBase.HTMLAttributes<HTMLDHeaderElement>;
             "d-heading": LocalJSX.DHeading & JSXBase.HTMLAttributes<HTMLDHeadingElement>;
             "d-info-led": LocalJSX.DInfoLed & JSXBase.HTMLAttributes<HTMLDInfoLedElement>;
             "d-input": LocalJSX.DInput & JSXBase.HTMLAttributes<HTMLDInputElement>;
             "d-logo": LocalJSX.DLogo & JSXBase.HTMLAttributes<HTMLDLogoElement>;
+            "d-organizations": LocalJSX.DOrganizations & JSXBase.HTMLAttributes<HTMLDOrganizationsElement>;
             "d-page-description": LocalJSX.DPageDescription & JSXBase.HTMLAttributes<HTMLDPageDescriptionElement>;
             "d-scan-button": LocalJSX.DScanButton & JSXBase.HTMLAttributes<HTMLDScanButtonElement>;
             "d-session-card": LocalJSX.DSessionCard & JSXBase.HTMLAttributes<HTMLDSessionCardElement>;

diff --git a/src/components/d-did-box/d-did-box.css b/src/components/d-did-box/d-did-box.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/src/components/d-did-box/d-did-box.tsx b/src/components/d-did-box/d-did-box.tsx
@@ -0,0 +1,50 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+import { parse } from 'did-resolver';
+
+@Component({
+  tag: 'd-did-box',
+  styleUrl: 'd-did-box.css',
+  shadow: true,
+})
+export class DDidBox {
+  @Prop() did: string;
+
+  render() {
+    if (!this.did) {
+      return;
+    }
+    const { method, id: fullId } = parse(this.did)!;
+    const [submethod, id] = fullId.split(':');
+    return (
+      <Host>
+        <d-text size="s" class="text-gray">
+          <a class="flex" href={`https://explorer.did.dyne.org/details/did:${fullId}`}>
+            <d-text size="s" class="w-full flex justify-center flex-wrap space-y-0.5">
+              <span class="w-5 h-5 flex mr-1">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                  <g id="icon-key">
+                    <path
+                      id="Shape"
+                      fill-rule="evenodd"
+                      clip-rule="evenodd"
+                      d="M21.707 2.70711C22.0975 2.31658 22.0975 1.68342 21.707 1.29289C21.3165 0.902369 20.6833 0.902369 20.2928 1.29289L11.3238 10.2619C10.2168 9.47817 8.88443 9.0554 7.51163 9.06733C5.80736 9.08214 4.17707 9.76574 2.97192 10.9709C1.76677 12.176 1.08317 13.8063 1.06836 15.5106C1.05355 17.2149 1.70871 18.8568 2.89274 20.0827L2.9002 20.0904C3.5023 20.7006 4.21916 21.1857 5.0095 21.5177C5.79984 21.8497 6.64806 22.0221 7.50531 22.025C8.36256 22.0279 9.21192 21.8612 10.0045 21.5344C10.797 21.2077 11.5171 20.7274 12.1233 20.1213C12.7295 19.5151 13.2097 18.795 13.5365 18.0024C13.8632 17.2099 14.0299 16.3605 14.0271 15.5033C14.0242 14.646 13.8518 13.7978 13.5197 13.0075C13.3185 12.5285 13.061 12.0764 12.7535 11.6606L15.4999 8.91421L17.7928 11.2071C18.1833 11.5976 18.8165 11.5976 19.207 11.2071L22.707 7.70711C23.0975 7.31658 23.0975 6.68342 22.707 6.29289L20.4141 4L21.707 2.70711ZM10.6861 12.3224C10.6982 12.3343 10.7105 12.3458 10.723 12.357C11.1289 12.7665 11.4524 13.2503 11.6758 13.7821C11.9057 14.3293 12.0251 14.9165 12.0271 15.51C12.0291 16.1035 11.9136 16.6915 11.6874 17.2402C11.4612 17.7889 11.1287 18.2874 10.7091 18.707C10.2894 19.1267 9.79089 19.4592 9.2422 19.6854C8.69351 19.9116 8.10549 20.027 7.51201 20.025C6.91853 20.023 6.3313 19.9037 5.78414 19.6738C5.23861 19.4446 4.74366 19.1101 4.32759 18.6894C3.51023 17.8411 3.05805 16.7061 3.06829 15.528C3.07854 14.3481 3.5518 13.2194 4.38613 12.3851C5.22047 11.5508 6.34913 11.0775 7.52901 11.0673C8.70509 11.057 9.83827 11.5077 10.6861 12.3224ZM18.4999 9.08579L16.9141 7.5L18.9999 5.41421L20.5857 7L18.4999 9.08579Z"
+                      fill="currentColor"
+                    />
+                  </g>
+                </svg>
+              </span>
+              <span>{'did'}</span>
+              <span class="text-gray-400">:</span>
+              <span class="text-warning">{method}</span>
+              <span class="text-gray-400">:</span>
+              <span class="text-on-alt">{submethod}</span>
+              <span class="text-gray-400">:</span>
+              <br />
+              <span>{id}</span>
+            </d-text>
+          </a>
+        </d-text>
+      </Host>
+    );
+  }
+}
diff --git a/src/components/d-did-box/did-box.stories.ts b/src/components/d-did-box/did-box.stories.ts
@@ -0,0 +1,20 @@
+import { DDidBox } from './d-did-box';
+import { Meta, StoryObj } from '@storybook/html';
+
+const meta = {
+  title: 'Design System/Atoms/DidBox',
+  render: args =>
+    `<d-did-box 
+    did="${args.did}" 
+    </d-did-box>`,
+} satisfies Meta<DDidBox>;
+
+export default meta;
+type Story = StoryObj<DDidBox>;
+
+export const Default: Story = {
+  args: {
+    did: 'did:dyne:sandbox.signroom:JAomV7KF3NjjagBEnTrRNG28DjepXM9XHEyGNYwJS7ke',
+  },
+};
+
diff --git a/src/components/d-did-box/readme.md b/src/components/d-did-box/readme.md
@@ -0,0 +1,30 @@
+# d-did-box
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type     | Default     |
+| -------- | --------- | ----------- | -------- | ----------- |
+| `did`    | `did`     |             | `string` | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [d-text](../text)
+
+### Graph
+```mermaid
+graph TD;
+  d-did-box --> d-text
+  style d-did-box fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/d-did-box/test/d-did-box.e2e.ts b/src/components/d-did-box/test/d-did-box.e2e.ts
@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('d-did-box', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<d-did-box></d-did-box>');
+
+    const element = await page.find('d-did-box');
+    expect(element).toHaveClass('hydrated');
+  });
+});
diff --git a/src/components/d-did-box/test/d-did-box.spec.tsx b/src/components/d-did-box/test/d-did-box.spec.tsx
@@ -0,0 +1,16 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { DDidBox } from '../d-did-box';
+
+describe('d-did-box', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [DDidBox],
+      html: `<d-did-box></d-did-box>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <d-did-box>
+        <mock:shadow-root></mock:shadow-root>
+      </d-did-box>
+    `);
+  });
+});
diff --git a/src/components/d-organizations/d-organizations.css b/src/components/d-organizations/d-organizations.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/src/components/d-organizations/d-organizations.tsx b/src/components/d-organizations/d-organizations.tsx
@@ -0,0 +1,27 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'd-organizations',
+  styleUrl: 'd-organizations.css',
+  shadow: true,
+})
+export class DOrganizations {
+  @Prop() heading: string;
+  @Prop() empty: boolean = false;
+
+  render() {
+    if (this.empty) {
+      return;
+    }
+    return (
+      <Host class="flex flex-col items-center">
+        <d-heading size="xs" class="w-full block text-center">
+          {this.heading}
+        </d-heading>
+        <div class="mx-auto mt-8 flex w-11/12 flex-wrap items-center justify-between gap-2">
+          <slot />
+        </div>
+      </Host>
+    );
+  }
+}
diff --git a/src/components/d-organizations/organizations.stories.ts b/src/components/d-organizations/organizations.stories.ts
@@ -0,0 +1,23 @@
+import { DOrganizations } from './d-organizations';
+import { Meta, StoryObj } from '@storybook/html';
+
+const meta = {
+  title: 'Design System/Molecule/Organizations',
+  render: args =>
+    `<d-organizations 
+    heading="${args.heading}">
+    <d-avatar alt="Test didroom flow" size="xl" shape="round" src="https://admin.didroom.com/api/files/aako88kt3br4npt/41ns8uk7jo2n5l7/test_9aIWfYm3RD.webp" class="hydrated"></d-avatar>
+    <d-avatar alt="Didroom" size="xl" shape="round" src="https://admin.didroom.com/api/files/aako88kt3br4npt/6snnqkixx6eszue/property_1_default_iRzoiR096R.png" class="hydrated"></d-avatar>
+    <d-avatar alt="Pirate's organization" size="xl" shape="round" src="https://admin.didroom.com/api/files/aako88kt3br4npt/pyehb0lzjfws88i/rune3_cap4_1_ikjaXVCMMd.png" class="hydrated"></d-avatar>
+    <d-avatar alt="Foundamick" size="xl" shape="round" src="https://admin.didroom.com/api/files/aako88kt3br4npt/ioyqa5sjn2o9xut/screenshot_2023_10_12_alle_18_53_32_km4Wsu4ggw.png" class="hydrated"></d-avatar>
+    </d-organizations>`,
+} satisfies Meta<DOrganizations>;
+
+export default meta;
+type Story = StoryObj<DOrganizations>;
+
+export const Default: Story = {
+  args: {
+    heading: 'Badges',
+  },
+};
diff --git a/src/components/d-organizations/readme.md b/src/components/d-organizations/readme.md
@@ -0,0 +1,31 @@
+# d-organizations
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property  | Attribute | Description | Type      | Default     |
+| --------- | --------- | ----------- | --------- | ----------- |
+| `empty`   | `empty`   |             | `boolean` | `false`     |
+| `heading` | `heading` |             | `string`  | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [d-heading](../heading)
+
+### Graph
+```mermaid
+graph TD;
+  d-organizations --> d-heading
+  style d-organizations fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/d-organizations/test/d-organizations.e2e.ts b/src/components/d-organizations/test/d-organizations.e2e.ts
@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('d-organizations', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<d-organizations></d-organizations>');
+
+    const element = await page.find('d-organizations');
+    expect(element).toHaveClass('hydrated');
+  });
+});