Merge pull request #134 from ownego/dev

ResourceList & ResourceItem components

Author: juzser

.eslintrc.cjs

@@ -49,5 +49,12 @@ module.exports = {
         allowBlockStart: false,
       },
     ],
+    'max-len': ['error', {
+      code: 150,
+      ignoreTemplateLiterals: true,
+      ignoreStrings: true,
+      ignoreComments: true,
+      ignorePattern: 'd="([\\s\\S]*?)"',
+    }],
   },
 };

.storybook/stories/PolarisIcons.stories.mdx

@@ -26,7 +26,7 @@ So you don't have to install any additional packages.
 
 ### **Setup:**
 
-You have to use `vite-svg-loader` in your project. See [Icon Component](?path=/docs/components-images-and-icons-icon) for more details.
+You have to use `vite-svg-loader` in your project. See [Icon Component](./?path=/docs/components-images-and-icons-icon) for more details.
 
 Config in `vite.config.ts` if you are using `vite` to compile your project:
 

build/gen-component-declaration.js

@@ -11,12 +11,6 @@ const TYPE_ROOT = process.cwd();
 const packageName = '@ownego/polaris-vue';
 const fileName = 'volar.d.ts';
 
-const excludeComponents = [];
-
-function exist (path) {
-  return fs.existsSync(path);
-}
-
 function parseComponentsDeclaration (code) {
   if (!code) {
     return {};
@@ -28,8 +22,12 @@ function parseComponentsDeclaration (code) {
   );
 }
 
-async function generateComponentsType () {
-  const mainImports = await fs.readFile(path.resolve(TYPE_ROOT, 'src/components/index.ts'), 'utf-8');
+function generateImportString(key) {
+  return `typeof import('${packageName}')['${key}']`;
+}
+
+function generateComponentsType() {
+  const mainImports = fs.readFileSync(path.resolve(TYPE_ROOT, 'src/components/index.ts'), 'utf-8');
 
   const pattern = /\'\.\/(.*)\'/g;
 
@@ -39,14 +37,21 @@ async function generateComponentsType () {
   const componentList = mainImports.match(pattern).map((i) => i.replace(/[^\w]/g, ''));
 
   componentList.forEach((key) => {
-    const entry = `typeof import('${packageName}')['${key}']`
-    if (!excludeComponents.includes(key)) {
-      components[key] = entry;
+    const isSubComponentsExist = fs.existsSync(`src/components/${key}/components`);
+    const getSubComponentsPattern = /\s\w+\s}/g;
+    
+    if (isSubComponentsExist) {
+      const subImports = fs.readFileSync(path.resolve(TYPE_ROOT, `src/components/${key}/index.ts`), 'utf-8');
+      const subComponentList = subImports.match(getSubComponentsPattern).map((i) => i.replace(/}|\s/g, ''));
+
+      subComponentList.forEach((subKey) => components[subKey] = generateImportString(subKey));
+    } else {
+      components[key] = generateImportString(key);
     }
   });
 
-  const originalContent = exist(path.resolve(TYPE_ROOT, fileName))
-    ? await fs.readFile(path.resolve(TYPE_ROOT, fileName), 'utf-8')
+  const originalContent = fs.existsSync(path.resolve(TYPE_ROOT, fileName))
+    ? fs.readFileSync(path.resolve(TYPE_ROOT, fileName), 'utf-8')
     : '';
 
   const originImports = parseComponentsDeclaration(originalContent);
@@ -63,6 +68,7 @@ async function generateComponentsType () {
       }
       return `${name}: ${v}`
     });
+
   const code = `// Auto generated component declarations
 declare module 'vue' {
   export interface GlobalComponents {
@@ -72,8 +78,10 @@ declare module 'vue' {
 }
 export {}
 `;
+
   if (code !== originalContent) {
-    await fs.writeFile(path.resolve(TYPE_ROOT, fileName), code, 'utf-8');
+    fs.writeFileSync(path.resolve(TYPE_ROOT, fileName), code, 'utf-8');
   }
 }
-generateComponentsType()
+
+generateComponentsType();

src/classes/FullscreenBar.json

@@ -0,0 +1 @@
+{"FullscreenBar":"Polaris-FullscreenBar","BackAction":"Polaris-FullscreenBar__BackAction"}

src/classes/ResourceItem.json

@@ -0,0 +1 @@
+{"CheckboxWrapper":"Polaris-ResourceItem__CheckboxWrapper","ResourceItem":"Polaris-ResourceItem","persistActions":"Polaris-ResourceItem--persistActions","Actions":"Polaris-ResourceItem__Actions","ItemWrapper":"Polaris-ResourceItem__ItemWrapper","focusedInner":"Polaris-ResourceItem--focusedInner","focused":"Polaris-ResourceItem--focused","selected":"Polaris-ResourceItem--selected","Link":"Polaris-ResourceItem__Link","Button":"Polaris-ResourceItem__Button","Container":"Polaris-ResourceItem__Container","alignmentLeading":"Polaris-ResourceItem--alignmentLeading","alignmentTrailing":"Polaris-ResourceItem--alignmentTrailing","alignmentCenter":"Polaris-ResourceItem--alignmentCenter","alignmentFill":"Polaris-ResourceItem--alignmentFill","alignmentBaseline":"Polaris-ResourceItem--alignmentBaseline","Owned":"Polaris-ResourceItem__Owned","OwnedNoMedia":"Polaris-ResourceItem__OwnedNoMedia","Handle":"Polaris-ResourceItem__Handle","selectMode":"Polaris-ResourceItem--selectMode","selectable":"Polaris-ResourceItem--selectable","Media":"Polaris-ResourceItem__Media","Content":"Polaris-ResourceItem__Content","Disclosure":"Polaris-ResourceItem__Disclosure","ListItem":"Polaris-ResourceItem__ListItem"}

src/classes/ResourceList.json

@@ -0,0 +1 @@
+{"FiltersWrapper":"Polaris-ResourceList__FiltersWrapper","ResourceList":"Polaris-ResourceList","HeaderOuterWrapper":"Polaris-ResourceList__HeaderOuterWrapper","HeaderWrapper-disabled":"Polaris-ResourceList__HeaderWrapper--disabled","HeaderWrapper-overlay":"Polaris-ResourceList__HeaderWrapper--overlay","HeaderWrapper":"Polaris-ResourceList__HeaderWrapper","HeaderWrapper-isSticky":"Polaris-ResourceList__HeaderWrapper--isSticky","HeaderContentWrapper":"Polaris-ResourceList__HeaderContentWrapper","HeaderWrapper-inSelectMode":"Polaris-ResourceList__HeaderWrapper--inSelectMode","SortWrapper":"Polaris-ResourceList__SortWrapper","AlternateToolWrapper":"Polaris-ResourceList__AlternateToolWrapper","HeaderWrapper-hasSelect":"Polaris-ResourceList__HeaderWrapper--hasSelect","HeaderWrapper-hasAlternateTool":"Polaris-ResourceList__HeaderWrapper--hasAlternateTool","HeaderWrapper-hasSort":"Polaris-ResourceList__HeaderWrapper--hasSort","HeaderTitleWrapper":"Polaris-ResourceList__HeaderTitleWrapper","BulkActionsWrapper":"Polaris-ResourceList__BulkActionsWrapper","CheckableButtonWrapper":"Polaris-ResourceList__CheckableButtonWrapper","SelectButtonWrapper":"Polaris-ResourceList__SelectButtonWrapper","EmptySearchResultWrapper":"Polaris-ResourceList__EmptySearchResultWrapper","ResourceListWrapper":"Polaris-ResourceList__ResourceListWrapper","ItemWrapper":"Polaris-ResourceList__ItemWrapper","ItemWrapper-isLoading":"Polaris-ResourceList__ItemWrapper--isLoading","SpinnerContainer":"Polaris-ResourceList__SpinnerContainer","LoadingOverlay":"Polaris-ResourceList__LoadingOverlay","DisabledPointerEvents":"Polaris-ResourceList__DisabledPointerEvents","disableTextSelection":"Polaris-ResourceList--disableTextSelection"}

src/components/AppProvider/AppProvider.vue

@@ -16,6 +16,7 @@ import lang from 'polaris/polaris-react/locales/en.json';
 import { EventListener, CustomProperties } from '@/components';
 import { PortalManager } from '@/utilities/portal-manager';
 import { FocusManager } from '@/utilities/focus-manager';
+import { StickyManager } from '@/utilities/sticky-manager';
 import type { CustomPropertiesProps } from '../CustomProperties/utils';
 import { DEFAULT_COLOR_SCHEME } from '../CustomProperties/utils';
 
@@ -26,6 +27,8 @@ const props = defineProps({
   },
 });
 
+const stickyManager = new StickyManager();
+
 const scrollLockManager = new ScrollLockManager();
 
 const portalManager = new PortalManager();
@@ -66,12 +69,14 @@ watch(
 onMounted(() => {
   if (document !== null) {
     setBodyStyles();
+    stickyManager.setContainer(document);
   }
 });
 
 const i18n = new I18n(lang);
 
 provide('mediaQueryContext', { isNavigationCollapsed: isNavigationCollapsed.value });
+provide('stickyManagerContext', stickyManager);
 provide('scrollLockManager', scrollLockManager);
 provide('portalManager', portalManager);
 provide('uniqueIdFactory', uniqueIdFactory.value);

src/components/Avatar/Avatar.vue

@@ -17,7 +17,7 @@ span(
         text-anchor="middle",
       ) {{ initials }}
   Image(
-    v-if="source && status !== Status.Errored",
+    v-if="source && status !== 'ERRORED'",
     :class="imageClassName",
     :source="source",
     alt="",
@@ -32,11 +32,9 @@ import { computed, ref } from 'vue';
 import { classNames, variationName } from 'polaris/polaris-react/src/utilities/css';
 import styles from '@/classes/Avatar.json';
 import { styleClass } from './utils';
-import { Image } from '../Image';
+import { Image } from '@/components';
 import type { Size } from './utils';
 
-type Status = 'PENDING' | 'LOADED' | 'ERRORED';
-
 interface Props {
   /**
    * Size of avatar
@@ -66,7 +64,7 @@ const props = withDefaults(defineProps<Props>(),{
 
 const emit = defineEmits<{ (event: 'error'): void }>();
 
-const status = ref<Status>('PENDING');
+const status = ref<'PENDING' | 'LOADED' | 'ERRORED'>('PENDING');
 
 const svgPath = 'M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z';
 

src/components/BulkActions/BulkActions.vue

@@ -3,7 +3,7 @@ div(
   ref="containerNode",
   v-if="selectMode",
 )
-  div(v-if="smallScreen", ref="smallScreenGroupNode")
+  div(v-if="smallScreen")
     div(
       :class="smallScreenGroupClassName",
       ref="smallScreenGroupNode",
@@ -53,30 +53,30 @@ div(
         span(v-if="paginatedSelectAllText && paginatedSelectAllAction", aria-live="polite") {{ paginatedSelectAllText }}
         template(v-else) {{ paginatedSelectAllText }}
         Button(
-          v-if="paginatedSelectAllAction",
+          v-if="paginatedSelectAllAction && paginatedSelectAllAction.onAction",
           plain,
           :disabled="disabled",
           @click="paginatedSelectAllAction.onAction",
         ) {{ paginatedSelectAllAction.content }}
-  div(
-    v-else,
-    ref="largeScreenGroupNode",
-  )
+
+  div(v-else)
     div(
       :class="largeScreenGroupClassName",
       ref="largeScreenGroupNode",
     )
       EventListener(event="resize", :handler="handleResize")
       div(
         :class="styles.ButtonGroupWrapper",
-        ref="setLargeScreenButtonsNode",
+        ref="largeScreenButtonsNode",
       )
         ButtonGroup(
           v-if="(promotedActions && numberOfPromotedActionsToRender > 0) || hasActionsPopover",
           segmented,
+          no-item-wrap,
         )
-          CheckableButton(v-bind="checkableButtonProps", @toggle="emits('toggle-all')")
-          template(
+          ButtonGroupItem
+            CheckableButton(v-bind="checkableButtonProps", @toggle-all="emits('toggle-all')")
+          ButtonGroupItem(
             v-if="promotedActions && numberOfPromotedActionsToRender > 0"
             v-for="action, index in promotedActions.slice(0, numberOfPromotedActionsToRender)",
             :key="index",
@@ -92,64 +92,52 @@ div(
               v-bind="action",
               :handleMeasurement="handleMeasurement",
             )
-          div(
-            v-if="hasActionsPopover",
-            ref="moreActionsNode",
-          )
-            Popover(
-              :active="largeScreenPopoverVisible",
-              @close="toggleLargeScreenPopover",
-            )
-              template(#activator)
-                BulkActionButton(
-                  disclosure,
-                  :content="activatorLabel",
-                  :disabled="disabled",
-                  :indicator="isNewBadgeInBadgeActions",
-                  @action="toggleLargeScreenPopover",
-                )
-              template(#content)
-                ActionList(
-                  :sections="combinedActions",
-                  @action-any-item="toggleLargeScreenPopover",
-                )
-        CheckableButton(v-else, v-bind="checkableButtonProps")
+          ButtonGroupItem(v-if="hasActionsPopover")
+            div(ref="moreActionsNode")
+              Popover(
+                :active="largeScreenPopoverVisible",
+                @close="toggleLargeScreenPopover",
+              )
+                template(#activator)
+                  BulkActionButton(
+                    disclosure,
+                    :content="activatorLabel",
+                    :disabled="disabled",
+                    :indicator="isNewBadgeInBadgeActions",
+                    @action="toggleLargeScreenPopover",
+                  )
+                template(#content)
+                  ActionList(
+                    :sections="combinedActions",
+                    @action-any-item="toggleLargeScreenPopover",
+                  )
+        CheckableButton(v-else, v-bind="checkableButtonProps", @toggle-all="emits('toggle-all')")
       div(
         v-if="paginatedSelectAllAction",
         :class="styles.PaginatedSelectAll"
       )
         span(v-if="paginatedSelectAllText && paginatedSelectAllAction", aria-live="polite") {{ paginatedSelectAllText }}
         template(v-else) {{ paginatedSelectAllText }}
         Button(
-          v-if="paginatedSelectAllAction",
+          v-if="paginatedSelectAllAction && paginatedSelectAllAction.onAction",
           plain,
           :disabled="disabled",
           @click="paginatedSelectAllAction.onAction",
         ) {{ paginatedSelectAllAction.content }}
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { debounce } from 'polaris/polaris-react/src/utilities/debounce';
-import { tokens } from '@shopify/polaris-tokens';
 import { classNames } from 'polaris/polaris-react/src/utilities/css';
 import { clamp } from 'polaris/polaris-react/src/utilities/clamp';
 import type { MenuGroupDescriptor } from '@/components/ActionMenu/components/MenuGroup/utils';
-import type { ActionListSection } from '@/components/ActionList/utils';
 import type { Action } from '@/utilities/type';
-import type { DisableableAction, BadgeAction } from '@/utilities/interface';
 import { UseI18n } from '@/use';
 import styles from '@/classes/BulkActions.json';
-import { ActionList, Popover, Button, ButtonGroup, CheckableButton, EventListener } from '@/components';
+import { ActionList, Popover, Button, ButtonGroup, ButtonGroupItem, CheckableButton, EventListener } from '@/components';
 import { BulkActionButton, BulkActionMenu } from './components';
-
-type BulkAction = DisableableAction & BadgeAction;
-
-type BulkActionListSection = ActionListSection;
-
-type TransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited';
-
-const MAX_PROMOTED_ACTIONS = 2;
+import type { BulkAction, BulkActionListSection } from './utils';
 
 interface BulkActionsProps {
   /** Visually hidden text for screen readers */
@@ -250,13 +238,6 @@ const numberOfPromotedActionsToRender = computed<number>(() => {
   return clamp(counter, 0, props.promotedActions.length);
 });
 
-const hasActions = computed(() => {
-  return Boolean(
-    (props.promotedActions && props.promotedActions.length > 0) ||
-      (props.actions && props.actions.length > 0),
-  );
-});
-
 const actionSectionsHandler = (): BulkActionListSection[] | undefined => {
   if (!props.actions || props.actions.length === 0) {
     return;

src/components/BulkActions/utils.ts

@@ -0,0 +1,31 @@
+import type { DisableableAction, BadgeAction } from '@/utilities/interface';
+import type { ActionListSection } from '@/components/ActionList/utils';
+import type { MenuGroupDescriptor } from '@/components/ActionMenu/components/MenuGroup/utils';
+import type { Action } from '@/utilities/type';
+
+export type BulkAction = DisableableAction & BadgeAction;
+
+export type BulkActionListSection = ActionListSection;
+
+export interface BulkActionsProps {
+  /** Visually hidden text for screen readers */
+  accessibilityLabel?: string;
+  /** Whether to render the small screen BulkActions or not */
+  smallScreen?: boolean;
+  /** Label for the bulk actions */
+  label?: string;
+  /** State of the bulk actions checkbox */
+  selected?: boolean | 'indeterminate';
+  /** List is in a selectable state */
+  selectMode?: boolean;
+  /** Actions that will be given more prominence */
+  promotedActions?: (BulkAction | MenuGroupDescriptor)[];
+  /** List of actions */
+  actions?: (BulkAction | BulkActionListSection)[];
+  /** Text to select all across pages */
+  paginatedSelectAllText?: string;
+  /** Action for selecting all across pages */
+  paginatedSelectAllAction?: Action;
+  /** Disables bulk actions */
+  disabled?: boolean;
+}