@antify/ui 2.2.0 → 2.2.1

package/dist/components/inputs/AntCheckbox.vue

@@ -140,6 +140,7 @@ onMounted(() => {
 
 <template>
   <AntField
+    data-e2e="checkbox"
     :label="label"
     :description="description"
     :skeleton="skeleton"

package/dist/components/inputs/AntCheckboxGroup.vue

@@ -86,6 +86,7 @@ onMounted(() => {
 
 <template>
   <AntField
+    data-e2e="checkbox-group"
     :label="label"
     :description="description"
     :skeleton="skeleton"

package/dist/components/inputs/AntSwitch.vue

@@ -130,6 +130,7 @@ function onBlur(e: FocusEvent) {
 
 <template>
   <AntField
+    data-e2e="switch"
     :label="label"
     :size="size"
     :description="description"

package/dist/components/table/AntTable.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
 import {AntTableSize, AntTableSortDirection, type TableHeader} from './__types/TableHeader.types';
-import {computed, ref, type Ref, watch} from 'vue';
+import {computed, onMounted, ref, type Ref, watch} from 'vue';
 import {useVModel} from '@vueuse/core';
 import {Size, State} from '../../enums';
 import AntTh from './AntTh.vue';
 import AntTd from './AntTd.vue';
 import AntSpinner from '../AntSpinner.vue';
 import AntSkeleton from '../AntSkeleton.vue';
-import {hasSlotContent} from "@/utils";
+import {hasSlotContent} from "../../utils";
 import AntCollapsibleTableRowContent from "./AntCollapsibleTableRowContent.vue";
-import {CollapseStrategy} from "@/components/table/__types";
+import {CollapseStrategy} from "../../types";
 import {faAngleDown, faAngleUp} from "@fortawesome/free-solid-svg-icons";
 import AntButton from "../buttons/AntButton.vue";
 import AntIcon from "../AntIcon.vue";
@@ -96,9 +96,7 @@ function sortTable(header: TableHeader, newDirection: AntTableSortDirection) {
   emits('updateSort', header, newDirection);
 }
 
-function rowClick(e: MouseEvent, elem: Record<string, unknown>): void {
-  e.preventDefault();
-
+function rowClick(elem: Record<string, unknown>): void {
   selected.value = elem;
 
   emits('rowClick', elem);
@@ -108,7 +106,7 @@ function toggleRowContent(index: number) {
   const isOpen = openItems.value.includes(index);
 
   if (isOpen) {
-    openItems.value = props.collapseStrategy === CollapseStrategy.single && props.rowsCollapsed
+    openItems.value = props.collapseStrategy === CollapseStrategy.single
       ? []
       : openItems.value.filter(item => item !== index);
   } else {
@@ -118,10 +116,27 @@ function toggleRowContent(index: number) {
   }
 }
 
-// Open all row contents by default
-if (!props.rowsCollapsed) {
-  props.data.map((_, index) => openItems.value.push(index));
+function openRowsByDefault() {
+  if (!props.rowsCollapsed && props.data.length > 0) {
+    openItems.value = props.data.map((_, index) => index);
+  }
 }
+
+watch(() => props.data, (currVal, prevVal) => {
+  if (currVal.length > prevVal.length) {
+    // Add newest element to the list of open items so it is open by default
+    // Necessary when table content is changed dynamically
+    if (props.collapseStrategy === CollapseStrategy.single) {
+      openItems.value = [currVal.length - 1];
+    } else {
+      openItems.value = [...openItems.value, currVal.length - 1];
+    }
+  }
+})
+
+onMounted(() => {
+  openRowsByDefault();
+});
 </script>
 
 <template>
@@ -170,6 +185,7 @@ if (!props.rowsCollapsed) {
           v-for="(elem, rowIndex) in data" :key="`table-row-${elem[rowKey]}-${rowIndex}`"
         >
           <tr
+            data-e2e="table-row"
             :id="elem[rowKey] as string"
             :class="{
               'bg-primary-200 text-primary-200-font transition-colors': elem === selected,
@@ -187,12 +203,13 @@ if (!props.rowsCollapsed) {
             <template v-for="(header, colIndex) in _headers">
               <AntTd
                 v-if="!_showLightVersion || (_showLightVersion && header.lightVersion)"
-                :key="`table-cell-${header.identifier}-${colIndex}`"
+                :key="`table-cell-${header.identifier}-${rowIndex}-${colIndex}`"
+                :data-e2e="`table-cell-${header.identifier}`"
                 :header="header"
                 :element="elem"
                 :align="header.align"
                 :size="size"
-                @click="(e) => rowClick(e, elem)"
+                @click="rowClick(elem)"
               >
                 <template #beforeCellContent="props">
                   <slot
@@ -219,7 +236,7 @@ if (!props.rowsCollapsed) {
 
             <template v-if="!!$slots.afterRowContent">
               <td class="whitespace-nowrap text-sm font-medium relative px-2 py-0 h-9 text-right"
-                  @click="(e) => rowClick(e, elem)">
+                  @click="rowClick(elem)">
                 <AntButton @click="toggleRowContent(rowIndex)" :size="Size.xs2">
                   <AntIcon :icon="openItems.includes(rowIndex) ? faAngleUp : faAngleDown"/>
                 </AntButton>
@@ -233,7 +250,7 @@ if (!props.rowsCollapsed) {
           </tr>
 
           <template v-if="!!$slots.afterRowContent">
-            <tr>
+            <tr data-e2e="table-after-row-content">
               <td :colspan="maxColSpan + 1" class="p-0">
                 <AntCollapsibleTableRowContent :is-open="openItems.includes(rowIndex)"
                 >

package/dist/components/table/__stories/AntTable.stories.js

@@ -5,12 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 module.exports = exports.Skeleton = exports.MultipleCollapseStrategy = exports.Loading = exports.Empty = exports.Docs = exports.DefaultCollapseOpen = exports.Collapsible = void 0;
 var _AntTable = _interopRequireDefault(require("../AntTable.vue"));
+var _AntButton = _interopRequireDefault(require("../../buttons/AntButton.vue"));
+var _AntSelect = _interopRequireDefault(require("../../inputs/AntSelect.vue"));
+var _AntCheckboxGroup = _interopRequireDefault(require("../../inputs/AntCheckboxGroup.vue"));
 var _TableHeader = require("../__types/TableHeader.types");
 var _vue = require("vue");
 var _faker = require("@faker-js/faker");
 var _AntSwitch = _interopRequireDefault(require("../../inputs/AntSwitch.vue"));
+var _test = require("@storybook/test");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
+  components: {
+    AntSelect: _AntSelect.default,
+    AntCheckboxGroup: _AntCheckboxGroup.default
+  },
   title: "Components/Table",
   component: _AntTable.default,
   parameters: {
@@ -137,7 +145,7 @@ const meta = {
 };
 module.exports = meta;
 const testData = (0, _vue.ref)([]);
-for (let i = 0; i < 100; i++) {
+function getRandomEntry() {
   const randomName = _faker.faker.person.firstName() + " " + _faker.faker.person.lastName();
   const randomNumber = _faker.faker.number.int({
     min: 18,
@@ -145,24 +153,41 @@ for (let i = 0; i < 100; i++) {
   });
   const randomEmail = _faker.faker.internet.email();
   const randomBoolean = _faker.faker.datatype.boolean();
-  testData.value.push({
+  const randomPermissions = _faker.faker.helpers.arrayElements(["read", "write"], {
+    min: 0,
+    max: 2
+  });
+  return {
     name: randomName,
     age: randomNumber,
     email: randomEmail,
-    employed: randomBoolean
-  });
+    employed: randomBoolean,
+    permissions: randomPermissions
+  };
+}
+for (let i = 0; i < 100; i++) {
+  testData.value.push(getRandomEntry());
 }
 const Docs = exports.Docs = {
   render: args => ({
     components: {
       AntTable: _AntTable.default,
-      AntSwitch: _AntSwitch.default
+      AntSwitch: _AntSwitch.default,
+      AntCheckboxGroup: _AntCheckboxGroup.default
     },
     setup() {
       const selected = (0, _vue.ref)();
+      const checkboxes = [{
+        label: "Read",
+        value: "read"
+      }, {
+        label: "Write",
+        value: "write"
+      }];
       return {
         args,
-        selected
+        selected,
+        checkboxes
       };
     },
     template: `
@@ -172,11 +197,52 @@ const Docs = exports.Docs = {
             <div v-if="header.identifier === 'employed'">
               <AntSwitch v-model="entry.employed"/>
             </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
+            </div>
           </template>
         </AntTable>
       </div>
     `
   }),
+  play: async ({
+    step
+  }) => {
+    const firstRow = document.querySelectorAll('[data-e2e="table-row"]')[0];
+    const employedCell = firstRow.querySelector('[data-e2e="table-cell-employed"]');
+    const employedSwitch = employedCell?.querySelector('[data-e2e="switch"]')?.querySelector("button");
+    const permissionsCell = firstRow.querySelector('[data-e2e="table-cell-permissions"]');
+    const permissionCheckboxWithLabel = permissionsCell?.querySelector('[data-e2e="checkbox"]');
+    const permissionCheckbox = permissionCheckboxWithLabel?.querySelector('[type="checkbox"]');
+    const permissionLabel = permissionCheckboxWithLabel?.querySelector("label");
+    await step("Click on a table cell and expect the row to be selected", async () => {
+      await _test.userEvent.click(employedCell);
+      await (0, _test.waitFor)(() => (0, _test.expect)(firstRow).toHaveClass("bg-primary-200"), {
+        timeout: 600
+      });
+    });
+    await step("Click on employed switch and expect the value to toggle", async () => {
+      const initialAriaChecked = JSON.parse(employedSwitch?.getAttribute("aria-checked"));
+      await _test.userEvent.click(employedSwitch);
+      await (0, _test.waitFor)(() => {
+        const toggledAriaChecked = JSON.parse(employedSwitch?.getAttribute("aria-checked"));
+        (0, _test.expect)(toggledAriaChecked).toBe(!initialAriaChecked);
+      }, {
+        timeout: 600
+      });
+    });
+    await step("Click on one of the permissions and expect the value to toggle", async () => {
+      const initialAriaChecked = JSON.parse(permissionCheckbox?.getAttribute("aria-checked"));
+      await _test.userEvent.click(permissionLabel);
+      await (0, _test.waitFor)(() => {
+        const toggledAriaChecked = JSON.parse(permissionCheckbox?.getAttribute("aria-checked"));
+        (0, _test.expect)(toggledAriaChecked).toBe(!initialAriaChecked);
+      }, {
+        timeout: 600
+      });
+    });
+  },
   args: {
     headers: [{
       title: "Name",
@@ -200,6 +266,11 @@ const Docs = exports.Docs = {
       identifier: "employed",
       rowClassList: "",
       type: _TableHeader.AntTableRowTypes.slot
+    }, {
+      title: "Permissions",
+      identifier: "permissions",
+      rowClassList: "",
+      type: _TableHeader.AntTableRowTypes.slot
     }],
     data: testData.value
   }
@@ -338,13 +409,22 @@ const Collapsible = exports.Collapsible = {
   render: args => ({
     components: {
       AntTable: _AntTable.default,
-      AntSwitch: _AntSwitch.default
+      AntSwitch: _AntSwitch.default,
+      AntCheckboxGroup: _AntCheckboxGroup.default
     },
     setup() {
       const selected = (0, _vue.ref)();
+      const checkboxes = [{
+        label: "Read",
+        value: "read"
+      }, {
+        label: "Write",
+        value: "write"
+      }];
       return {
         args,
-        selected
+        selected,
+        checkboxes
       };
     },
     template: `
@@ -354,6 +434,10 @@ const Collapsible = exports.Collapsible = {
             <div v-if="header.identifier === 'employed'">
               <AntSwitch v-model="entry.employed"/>
             </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
+            </div>
           </template>
 
           <template #afterRowContent="{element, rowIndex}">
@@ -373,13 +457,22 @@ const MultipleCollapseStrategy = exports.MultipleCollapseStrategy = {
   render: args => ({
     components: {
       AntTable: _AntTable.default,
-      AntSwitch: _AntSwitch.default
+      AntSwitch: _AntSwitch.default,
+      AntCheckboxGroup: _AntCheckboxGroup.default
     },
     setup() {
       const selected = (0, _vue.ref)();
+      const checkboxes = [{
+        label: "Read",
+        value: "read"
+      }, {
+        label: "Write",
+        value: "write"
+      }];
       return {
         args,
-        selected
+        selected,
+        checkboxes
       };
     },
     template: `
@@ -389,6 +482,10 @@ const MultipleCollapseStrategy = exports.MultipleCollapseStrategy = {
             <div v-if="header.identifier === 'employed'">
               <AntSwitch v-model="entry.employed"/>
             </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
+            </div>
           </template>
 
           <template #afterRowContent="{element, rowIndex}">
@@ -408,22 +505,43 @@ const DefaultCollapseOpen = exports.DefaultCollapseOpen = {
   render: args => ({
     components: {
       AntTable: _AntTable.default,
-      AntSwitch: _AntSwitch.default
+      AntSwitch: _AntSwitch.default,
+      AntCheckboxGroup: _AntCheckboxGroup.default,
+      AntButton: _AntButton.default
     },
     setup() {
       const selected = (0, _vue.ref)();
+      const data = (0, _vue.ref)(args.data.splice(0, 5));
+      const checkboxes = [{
+        label: "Read",
+        value: "read"
+      }, {
+        label: "Write",
+        value: "write"
+      }];
+      function addRandomEntry() {
+        data.value = [...data.value, getRandomEntry()];
+      }
       return {
         args,
-        selected
+        data,
+        selected,
+        checkboxes,
+        addRandomEntry
       };
     },
     template: `
-      <div class="h-96 border border-dashed border-base-300">
-        <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" :rows-collapsed="false">
+      <div class="h-96 border border-dashed border-base-300 flex flex-col gap-2">
+        <AntButton state="primary" @click="addRandomEntry" filled>Add Random Entry</AntButton>
+        <AntTable v-bind="args" :data="data" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" :rows-collapsed="false" collapse-strategy="multiple">
           <template #cellContent="{element: entry, header}">
             <div v-if="header.identifier === 'employed'">
               <AntSwitch v-model="entry.employed"/>
             </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
+            </div>
           </template>
 
           <template #afterRowContent="{element, rowIndex}">

package/dist/components/table/__stories/AntTable.stories.mjs

@@ -1,9 +1,14 @@
 import AntTable from "../AntTable.vue";
+import AntButton from "../../buttons/AntButton.vue";
+import AntSelect from "../../inputs/AntSelect.vue";
+import AntCheckboxGroup from "../../inputs/AntCheckboxGroup.vue";
 import { AntTableAlign, AntTableRowTypes, AntTableSize } from "../__types/TableHeader.types.mjs";
 import { ref } from "vue";
 import { faker } from "@faker-js/faker";
 import AntSwitch from "../../inputs/AntSwitch.vue";
+import { expect, userEvent, waitFor } from "@storybook/test";
 const meta = {
+  components: { AntSelect, AntCheckboxGroup },
   title: "Components/Table",
   component: AntTable,
   parameters: { controls: { sort: "requiredFirst" } },
@@ -90,24 +95,36 @@ const meta = {
 };
 export default meta;
 const testData = ref([]);
-for (let i = 0; i < 100; i++) {
+function getRandomEntry() {
   const randomName = faker.person.firstName() + " " + faker.person.lastName();
   const randomNumber = faker.number.int({ min: 18, max: 60 });
   const randomEmail = faker.internet.email();
   const randomBoolean = faker.datatype.boolean();
-  testData.value.push({
+  const randomPermissions = faker.helpers.arrayElements(["read", "write"], { min: 0, max: 2 });
+  return {
     name: randomName,
     age: randomNumber,
     email: randomEmail,
-    employed: randomBoolean
-  });
+    employed: randomBoolean,
+    permissions: randomPermissions
+  };
+}
+for (let i = 0; i < 100; i++) {
+  testData.value.push(getRandomEntry());
 }
 export const Docs = {
   render: (args) => ({
-    components: { AntTable, AntSwitch },
+    components: { AntTable, AntSwitch, AntCheckboxGroup },
     setup() {
       const selected = ref();
-      return { args, selected };
+      const checkboxes = [{
+        label: "Read",
+        value: "read"
+      }, {
+        label: "Write",
+        value: "write"
+      }];
+      return { args, selected, checkboxes };
     },
     template: `
       <div class="h-96 border border-dashed border-base-300">
@@ -116,11 +133,44 @@ export const Docs = {
             <div v-if="header.identifier === 'employed'">
               <AntSwitch v-model="entry.employed"/>
             </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
+            </div>
           </template>
         </AntTable>
       </div>
     `
   }),
+  play: async ({ step }) => {
+    const firstRow = document.querySelectorAll('[data-e2e="table-row"]')[0];
+    const employedCell = firstRow.querySelector('[data-e2e="table-cell-employed"]');
+    const employedSwitch = employedCell?.querySelector('[data-e2e="switch"]')?.querySelector("button");
+    const permissionsCell = firstRow.querySelector('[data-e2e="table-cell-permissions"]');
+    const permissionCheckboxWithLabel = permissionsCell?.querySelector('[data-e2e="checkbox"]');
+    const permissionCheckbox = permissionCheckboxWithLabel?.querySelector('[type="checkbox"]');
+    const permissionLabel = permissionCheckboxWithLabel?.querySelector("label");
+    await step("Click on a table cell and expect the row to be selected", async () => {
+      await userEvent.click(employedCell);
+      await waitFor(() => expect(firstRow).toHaveClass("bg-primary-200"), { timeout: 600 });
+    });
+    await step("Click on employed switch and expect the value to toggle", async () => {
+      const initialAriaChecked = JSON.parse(employedSwitch?.getAttribute("aria-checked"));
+      await userEvent.click(employedSwitch);
+      await waitFor(() => {
+        const toggledAriaChecked = JSON.parse(employedSwitch?.getAttribute("aria-checked"));
+        expect(toggledAriaChecked).toBe(!initialAriaChecked);
+      }, { timeout: 600 });
+    });
+    await step("Click on one of the permissions and expect the value to toggle", async () => {
+      const initialAriaChecked = JSON.parse(permissionCheckbox?.getAttribute("aria-checked"));
+      await userEvent.click(permissionLabel);
+      await waitFor(() => {
+        const toggledAriaChecked = JSON.parse(permissionCheckbox?.getAttribute("aria-checked"));
+        expect(toggledAriaChecked).toBe(!initialAriaChecked);
+      }, { timeout: 600 });
+    });
+  },
   args: {
     headers: [
       {
@@ -148,6 +198,12 @@ export const Docs = {
         identifier: "employed",
         rowClassList: "",
         type: AntTableRowTypes.slot
+      },
+      {
+        title: "Permissions",
+        identifier: "permissions",
+        rowClassList: "",
+        type: AntTableRowTypes.slot
       }
     ],
     data: testData.value
@@ -294,10 +350,17 @@ export const Loading = {
 };
 export const Collapsible = {
   render: (args) => ({
-    components: { AntTable, AntSwitch },
+    components: { AntTable, AntSwitch, AntCheckboxGroup },
     setup() {
       const selected = ref();
-      return { args, selected };
+      const checkboxes = [{
+        label: "Read",
+        value: "read"
+      }, {
+        label: "Write",
+        value: "write"
+      }];
+      return { args, selected, checkboxes };
     },
     template: `
       <div class="h-96 border border-dashed border-base-300">
@@ -306,6 +369,10 @@ export const Collapsible = {
             <div v-if="header.identifier === 'employed'">
               <AntSwitch v-model="entry.employed"/>
             </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
+            </div>
           </template>
 
           <template #afterRowContent="{element, rowIndex}">
@@ -323,10 +390,17 @@ export const Collapsible = {
 };
 export const MultipleCollapseStrategy = {
   render: (args) => ({
-    components: { AntTable, AntSwitch },
+    components: { AntTable, AntSwitch, AntCheckboxGroup },
     setup() {
       const selected = ref();
-      return { args, selected };
+      const checkboxes = [{
+        label: "Read",
+        value: "read"
+      }, {
+        label: "Write",
+        value: "write"
+      }];
+      return { args, selected, checkboxes };
     },
     template: `
       <div class="h-96 border border-dashed border-base-300">
@@ -335,6 +409,10 @@ export const MultipleCollapseStrategy = {
             <div v-if="header.identifier === 'employed'">
               <AntSwitch v-model="entry.employed"/>
             </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
+            </div>
           </template>
 
           <template #afterRowContent="{element, rowIndex}">
@@ -352,18 +430,34 @@ export const MultipleCollapseStrategy = {
 };
 export const DefaultCollapseOpen = {
   render: (args) => ({
-    components: { AntTable, AntSwitch },
+    components: { AntTable, AntSwitch, AntCheckboxGroup, AntButton },
     setup() {
       const selected = ref();
-      return { args, selected };
+      const data = ref(args.data.splice(0, 5));
+      const checkboxes = [{
+        label: "Read",
+        value: "read"
+      }, {
+        label: "Write",
+        value: "write"
+      }];
+      function addRandomEntry() {
+        data.value = [...data.value, getRandomEntry()];
+      }
+      return { args, data, selected, checkboxes, addRandomEntry };
     },
     template: `
-      <div class="h-96 border border-dashed border-base-300">
-        <AntTable v-bind="args" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" :rows-collapsed="false">
+      <div class="h-96 border border-dashed border-base-300 flex flex-col gap-2">
+        <AntButton state="primary" @click="addRandomEntry" filled>Add Random Entry</AntButton>
+        <AntTable v-bind="args" :data="data" v-model="selected" :selected-row="selected" @row-click="(val) => selected = val" :rows-collapsed="false" collapse-strategy="multiple">
           <template #cellContent="{element: entry, header}">
             <div v-if="header.identifier === 'employed'">
               <AntSwitch v-model="entry.employed"/>
             </div>
+
+            <div v-if="header.identifier === 'permissions'">
+              <AntCheckboxGroup v-model="entry.permissions" :checkboxes="checkboxes" direction="row"/>
+            </div>
           </template>
 
           <template #afterRowContent="{element, rowIndex}">

package/dist/components/table/__types/index.d.ts

@@ -1,2 +1 @@
 export * from './TableHeader.types';
-export * from './AntCollapsibleTable.types';

package/dist/components/table/__types/index.js

@@ -13,15 +13,4 @@ Object.keys(_TableHeader).forEach(function (key) {
       return _TableHeader[key];
     }
   });
-});
-var _AntCollapsibleTable = require("./AntCollapsibleTable.types");
-Object.keys(_AntCollapsibleTable).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _AntCollapsibleTable[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _AntCollapsibleTable[key];
-    }
-  });
 });

package/dist/components/table/__types/index.mjs

@@ -1,2 +1 @@
 export * from "./TableHeader.types.mjs";
-export * from "./AntCollapsibleTable.types.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "private": false,
   "type": "module",
   "exports": {