Merge pull request #597 from devtron-labs/feat/new-layout

eshankvaish · web-flow · commit 9b555814e66d · 2025-02-28T16:32:21.000+05:30
feat: add card based layout based on flag
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.8.0",
+    "version": "1.8.1",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
diff --git a/src/Assets/IconV2/ic-app-group.svg b/src/Assets/IconV2/ic-app-group.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#596168" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.125v15.75M19.875 12H4.125m.75-7.875h14.25a.75.75 0 0 1 .75.75v14.25a.75.75 0 0 1-.75.75H4.875a.75.75 0 0 1-.75-.75V4.875a.75.75 0 0 1 .75-.75Z" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-browser.svg b/src/Assets/IconV2/ic-browser.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#596168" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 9h18M3.75 4.5h16.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75H3.75a.75.75 0 0 1-.75-.75V5.25a.75.75 0 0 1 .75-.75Z" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-code.svg b/src/Assets/IconV2/ic-code.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#596168" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8.25 1.5 12 6 15.75m12-7.5L22.5 12 18 15.75m-3-12-6 16.5" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-cube.svg b/src/Assets/IconV2/ic-cube.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#596168" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 22.015a.75.75 0 0 1-.368-.097l-8.25-4.64A.75.75 0 0 1 3 16.623V7.376a.75.75 0 0 1 .382-.654l8.25-4.64a.75.75 0 0 1 .736 0l8.25 4.64a.75.75 0 0 1 .382.654v9.248a.75.75 0 0 1-.382.654l-8.25 4.64a.75.75 0 0 1-.368.097Zm0 0L12.089 12m8.808-5.004L12.089 12m0 0L3.104 6.995" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-gear.svg b/src/Assets/IconV2/ic-gear.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#596168" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" d="M4.903 8.587a7.41 7.41 0 0 1 .591-1.021l-.038-2.438c0-.225.094-.44.272-.59a9.726 9.726 0 0 1 2.963-1.716.726.726 0 0 1 .637.065l2.091 1.257a8.277 8.277 0 0 1 1.181 0l2.09-1.257a.783.783 0 0 1 .648-.065A9.677 9.677 0 0 1 18.3 4.528c.169.14.272.366.263.59l-.038 2.438c.225.328.422.666.59 1.022l2.129 1.181a.75.75 0 0 1 .375.525 9.707 9.707 0 0 1 0 3.413.748.748 0 0 1-.375.525l-2.128 1.181a7.4 7.4 0 0 1-.59 1.022l.037 2.438c0 .224-.094.44-.272.59a9.723 9.723 0 0 1-2.963 1.716.726.726 0 0 1-.637-.066l-2.09-1.256a8.286 8.286 0 0 1-1.182 0l-2.09 1.256a.783.783 0 0 1-.648.066 9.676 9.676 0 0 1-2.962-1.707.744.744 0 0 1-.263-.59l.038-2.438a7.417 7.417 0 0 1-.59-1.022l-2.129-1.18a.748.748 0 0 1-.375-.526 9.704 9.704 0 0 1 0-3.412.748.748 0 0 1 .375-.525l2.128-1.182Z" vector-effect="non-scaling-stroke"/>
+  <path stroke="#596168" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" d="M12 15.6a3.6 3.6 0 1 0 0-7.2 3.6 3.6 0 0 0 0 7.2Z" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-grid-view.svg b/src/Assets/IconV2/ic-grid-view.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#596168" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 4.5h-6v6h6v-6Zm9 0h-6v6h6v-6Zm-9 9h-6v6h6v-6Zm9 0h-6v6h6v-6Z" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-helm.svg b/src/Assets/IconV2/ic-helm.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#596168" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" d="M16.953 7.046a7.005 7.005 0 0 1 0 9.908m0-9.908a7.005 7.005 0 0 0-9.907 0m9.907 0 2.684-2.683m-2.684 12.59a7.005 7.005 0 0 1-9.907 0m9.907 0 2.684 2.684m-12.59-2.683a7.005 7.005 0 0 1 0-9.908m0 9.908-2.684 2.683m2.683-12.59L4.363 4.362M12 1.2v3.795m0 14.01V22.8M1.2 12h3.795m14.01 0H22.8m-7.297 0a3.503 3.503 0 1 1-7.006 0 3.503 3.503 0 0 1 7.006 0Z" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-k8s-job.svg b/src/Assets/IconV2/ic-k8s-job.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#596168" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 15h6m-6 0v6m0-6V9m0 6H9m12 0v6h-6m6-6V9m-6 12H9m6-12h6m-6 0V3h6v6m-6 0H9m0 6v6m0-6V9m0 6H3m6 6H3v-6m6-6H3v6" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-monitoring.svg b/src/Assets/IconV2/ic-monitoring.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#596168" stroke-width="1.5" d="M12 22C6.48 22 2 17.52 2 12S6.48 2 12 2s10 4.48 10 10-4.48 10-10 10Z" clip-rule="evenodd" vector-effect="non-scaling-stroke"/>
+  <path stroke="#596168" stroke-width="1.5" d="M12 18c-3.312 0-6-2.688-6-6s2.688-6 6-6 6 2.688 6 6-2.688 6-6 6Z" clip-rule="evenodd" vector-effect="non-scaling-stroke"/>
+  <path fill="#596168" fill-rule="evenodd" d="M12 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z" clip-rule="evenodd"/>
+  <path stroke="#596168" stroke-width="1.5" d="m12 12 7.071 7.071" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-open-box.svg b/src/Assets/IconV2/ic-open-box.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#596168" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 22.013a.652.652 0 0 1-.32-.084l-7.174-4.035a.652.652 0 0 1-.332-.569v-4.55M12 22.012a.652.652 0 0 0 .32-.084l7.174-4.035a.651.651 0 0 0 .332-.569V12.8M12 22.013l.077-8.709m0 0-2.26 2.61L2 11.564l2.26-2.608m7.817 4.347L4.261 8.957m7.816 4.347 2.262 2.61L22 11.564l-2.26-2.608m-7.663 4.347 7.662-4.347m-15.478 0L2 6.347 9.74 2 12 4.6M4.26 8.957 12 4.6m7.74 4.357L22 6.347 14.26 2 12 4.6m7.74 4.357L12 4.6" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-shield-check.svg b/src/Assets/IconV2/ic-shield-check.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#596168" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.125 9-5.5 5.25-2.75-2.625M3.75 10V6.22a1 1 0 0 1 .684-.948L12 2.75l7.566 2.522a1 1 0 0 1 .684.949V10c0 7.876-6.685 10.486-8.02 10.928a.708.708 0 0 1-.46 0C10.435 20.486 3.75 17.877 3.75 10Z" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-stack.svg b/src/Assets/IconV2/ic-stack.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#596168" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m3 16.5 9 5.25 9-5.25M3 12l9 5.25L21 12M3 7.5l9 5.25 9-5.25-9-5.25L3 7.5Z" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Common/TippyCustomized.tsx b/src/Common/TippyCustomized.tsx
@@ -86,7 +86,7 @@ export const TippyCustomized = (props: TippyCustomizedProps) => {
                     <div
                         className={`dc__word-break dc__hyphens-auto flex dc__align-start left ${
                             isWhiteTheme
-                                ? `p-12 cn-9 ${props.noHeadingBorder ? '' : 'dc__border-bottom-n1'}`
+                                ? `p-12 cn-9 ${props.noHeadingBorder ? '' : 'border__secondary-translucent--bottom'}`
                                 : 'pt-20 pb-12 pr-20 pl-20 cn-0 top'
                         }`}
                     >
diff --git a/src/Shared/Components/ConfirmationModal/confirmationModal.scss b/src/Shared/Components/ConfirmationModal/confirmationModal.scss
@@ -15,5 +15,5 @@
  */
 
 .confirmation-modal {
-    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.04), 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 3px 17px 0px rgba(0, 0, 0, 0.04), 0px 4px 30px 0px rgba(0, 0, 0, 0.13);
-}
+    box-shadow: var(--shadow-modal);
+}
diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx
@@ -1,8 +1,10 @@
 // NOTE: This file is auto-generated. Do not edit directly. Run the script `npm run generate-icon` to update.
 
 import { ReactComponent as ICAborted } from '@IconsV2/ic-aborted.svg'
+import { ReactComponent as ICAppGroup } from '@IconsV2/ic-app-group.svg'
 import { ReactComponent as ICAzure } from '@IconsV2/ic-azure.svg'
 import { ReactComponent as ICBitbucket } from '@IconsV2/ic-bitbucket.svg'
+import { ReactComponent as ICBrowser } from '@IconsV2/ic-browser.svg'
 import { ReactComponent as ICBuildColor } from '@IconsV2/ic-build-color.svg'
 import { ReactComponent as ICCancelled } from '@IconsV2/ic-cancelled.svg'
 import { ReactComponent as ICCd } from '@IconsV2/ic-cd.svg'
@@ -11,32 +13,42 @@ import { ReactComponent as ICCiWebhook } from '@IconsV2/ic-ci-webhook.svg'
 import { ReactComponent as ICCircleLoader } from '@IconsV2/ic-circle-loader.svg'
 import { ReactComponent as ICClock } from '@IconsV2/ic-clock.svg'
 import { ReactComponent as ICCloseSmall } from '@IconsV2/ic-close-small.svg'
+import { ReactComponent as ICCode } from '@IconsV2/ic-code.svg'
 import { ReactComponent as ICContainer } from '@IconsV2/ic-container.svg'
+import { ReactComponent as ICCube } from '@IconsV2/ic-cube.svg'
 import { ReactComponent as ICDockerhub } from '@IconsV2/ic-dockerhub.svg'
 import { ReactComponent as ICEcr } from '@IconsV2/ic-ecr.svg'
 import { ReactComponent as ICEnv } from '@IconsV2/ic-env.svg'
 import { ReactComponent as ICError } from '@IconsV2/ic-error.svg'
 import { ReactComponent as ICFailure } from '@IconsV2/ic-failure.svg'
+import { ReactComponent as ICGear } from '@IconsV2/ic-gear.svg'
 import { ReactComponent as ICGit } from '@IconsV2/ic-git.svg'
 import { ReactComponent as ICGithub } from '@IconsV2/ic-github.svg'
 import { ReactComponent as ICGitlab } from '@IconsV2/ic-gitlab.svg'
 import { ReactComponent as ICGoogleArtifactRegistry } from '@IconsV2/ic-google-artifact-registry.svg'
 import { ReactComponent as ICGoogleContainerRegistry } from '@IconsV2/ic-google-container-registry.svg'
+import { ReactComponent as ICGridView } from '@IconsV2/ic-grid-view.svg'
 import { ReactComponent as ICHeartGreen } from '@IconsV2/ic-heart-green.svg'
 import { ReactComponent as ICHeartRedAnimated } from '@IconsV2/ic-heart-red-animated.svg'
 import { ReactComponent as ICHeartRed } from '@IconsV2/ic-heart-red.svg'
+import { ReactComponent as ICHelm } from '@IconsV2/ic-helm.svg'
 import { ReactComponent as ICHelpOutline } from '@IconsV2/ic-help-outline.svg'
 import { ReactComponent as ICHibernate } from '@IconsV2/ic-hibernate.svg'
 import { ReactComponent as ICInProgress } from '@IconsV2/ic-in-progress.svg'
 import { ReactComponent as ICInfoFilled } from '@IconsV2/ic-info-filled.svg'
 import { ReactComponent as ICInfoOutline } from '@IconsV2/ic-info-outline.svg'
 import { ReactComponent as ICJobColor } from '@IconsV2/ic-job-color.svg'
+import { ReactComponent as ICK8sJob } from '@IconsV2/ic-k8s-job.svg'
 import { ReactComponent as ICMissing } from '@IconsV2/ic-missing.svg'
+import { ReactComponent as ICMonitoring } from '@IconsV2/ic-monitoring.svg'
 import { ReactComponent as ICNodeScript } from '@IconsV2/ic-node-script.svg'
+import { ReactComponent as ICOpenBox } from '@IconsV2/ic-open-box.svg'
 import { ReactComponent as ICOpenInNew } from '@IconsV2/ic-open-in-new.svg'
 import { ReactComponent as ICOutOfSync } from '@IconsV2/ic-out-of-sync.svg'
 import { ReactComponent as ICPaperPlaneColor } from '@IconsV2/ic-paper-plane-color.svg'
 import { ReactComponent as ICQuay } from '@IconsV2/ic-quay.svg'
+import { ReactComponent as ICShieldCheck } from '@IconsV2/ic-shield-check.svg'
+import { ReactComponent as ICStack } from '@IconsV2/ic-stack.svg'
 import { ReactComponent as ICSuccess } from '@IconsV2/ic-success.svg'
 import { ReactComponent as ICSuspended } from '@IconsV2/ic-suspended.svg'
 import { ReactComponent as ICTimeoutTwoDash } from '@IconsV2/ic-timeout-two-dash.svg'
@@ -49,8 +61,10 @@ import { IconBaseProps } from './types'
 
 export const iconMap = {
     'ic-aborted': ICAborted,
+    'ic-app-group': ICAppGroup,
     'ic-azure': ICAzure,
     'ic-bitbucket': ICBitbucket,
+    'ic-browser': ICBrowser,
     'ic-build-color': ICBuildColor,
     'ic-cancelled': ICCancelled,
     'ic-cd': ICCd,
@@ -59,32 +73,42 @@ export const iconMap = {
     'ic-circle-loader': ICCircleLoader,
     'ic-clock': ICClock,
     'ic-close-small': ICCloseSmall,
+    'ic-code': ICCode,
     'ic-container': ICContainer,
+    'ic-cube': ICCube,
     'ic-dockerhub': ICDockerhub,
     'ic-ecr': ICEcr,
     'ic-env': ICEnv,
     'ic-error': ICError,
     'ic-failure': ICFailure,
+    'ic-gear': ICGear,
     'ic-git': ICGit,
     'ic-github': ICGithub,
     'ic-gitlab': ICGitlab,
     'ic-google-artifact-registry': ICGoogleArtifactRegistry,
     'ic-google-container-registry': ICGoogleContainerRegistry,
+    'ic-grid-view': ICGridView,
     'ic-heart-green': ICHeartGreen,
     'ic-heart-red-animated': ICHeartRedAnimated,
     'ic-heart-red': ICHeartRed,
+    'ic-helm': ICHelm,
     'ic-help-outline': ICHelpOutline,
     'ic-hibernate': ICHibernate,
     'ic-in-progress': ICInProgress,
     'ic-info-filled': ICInfoFilled,
     'ic-info-outline': ICInfoOutline,
     'ic-job-color': ICJobColor,
+    'ic-k8s-job': ICK8sJob,
     'ic-missing': ICMissing,
+    'ic-monitoring': ICMonitoring,
     'ic-node-script': ICNodeScript,
+    'ic-open-box': ICOpenBox,
     'ic-open-in-new': ICOpenInNew,
     'ic-out-of-sync': ICOutOfSync,
     'ic-paper-plane-color': ICPaperPlaneColor,
     'ic-quay': ICQuay,
+    'ic-shield-check': ICShieldCheck,
+    'ic-stack': ICStack,
     'ic-success': ICSuccess,
     'ic-suspended': ICSuspended,
     'ic-timeout-two-dash': ICTimeoutTwoDash,
diff --git a/src/Shared/Components/Icon/types.ts b/src/Shared/Components/Icon/types.ts
@@ -37,5 +37,9 @@ export interface IconBaseProps extends Pick<SVGAttributes<SVGSVGElement>, 'strok
      * If `null`, the default color present in icon is used.
      * @example `'B500'`, `'N200'`, `'G50'`, `'R700'`
      */
-    color: `${'B' | 'N' | 'G' | 'Y' | 'R' | 'V' | 'O'}${`${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00` | '50'}` | null
+    color:
+        | `${'B' | 'N' | 'G' | 'Y' | 'R' | 'V' | 'O'}${`${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00` | '50'}`
+        | 'white'
+        | 'black'
+        | null
 }
diff --git a/src/Shared/Components/InvalidYAMLTippy/utils.tsx b/src/Shared/Components/InvalidYAMLTippy/utils.tsx
@@ -29,7 +29,7 @@ export const getInvalidTippyContent = ({
         <div className="flexbox-col dc__gap-8 py-6">
             <div className="flexbox-col dc__gap-4">
                 <h6 className="m-0 fs-12 fw-6 lh-18">Invalid {text}</h6>
-                <p className="m-0 cn-50 fs-12 fw-4 lh-18 dc__truncate--clamp-3">
+                <p className="m-0 fs-12 fw-4 lh-18 dc__truncate--clamp-3">
                     {parsingError || DEFAULT_INVALID_YAML_ERROR}
                 </p>
             </div>
@@ -38,10 +38,10 @@ export const getInvalidTippyContent = ({
                 <button
                     type="button"
                     data-testid="restore-last-saved-yaml"
-                    className="flexbox dc__gap-6 dc__transparent cn-0 fs-12 fw-6 lh-20 p-0 dc__align-items-center"
+                    className="flexbox dc__gap-6 dc__transparent text__white fs-12 fw-6 lh-20 p-0 dc__align-items-center"
                     onClick={restoreLastSavedYAML}
                 >
-                    <ICArrowCounterClockwise className="dc__no-shrink icon-dim-16 scn-0" />
+                    <ICArrowCounterClockwise className="dc__no-shrink icon-dim-16 icon-stroke__white" />
                     Restore last saved {text}
                 </button>
             )}
diff --git a/src/Shared/Components/ReactSelect/utils.tsx b/src/Shared/Components/ReactSelect/utils.tsx
@@ -126,6 +126,7 @@ export const getCommonSelectStyle = (styleOverrides = {}): StylesConfig => ({
     menu: (base) => ({
         ...base,
         backgroundColor: 'var(--bg-menu-primary)',
+        border: '1px solid var(--border-primary-translucent)',
     }),
     multiValue: (base) => ({
         ...base,
diff --git a/src/Shared/Components/SelectPicker/utils.ts b/src/Shared/Components/SelectPicker/utils.ts
@@ -109,7 +109,7 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
         overflow: 'hidden',
         marginBlock: '4px',
         backgroundColor: 'var(--bg-menu-primary)',
-        border: '1px solid var(--N200)',
+        border: '1px solid var(--border-primary-translucent)',
         boxShadow: '0px 2px 4px 0px rgba(0, 0, 0, 0.20)',
         width: getMenuWidthFromSize(menuSize).width,
         minWidth: getMenuWidthFromSize(menuSize).minWidth,
diff --git a/src/index.ts b/src/index.ts
@@ -93,13 +93,16 @@ export interface customEnv {
      * @default false
      */
     FEATURE_EXPERIMENTAL_THEMING_ENABLE?: boolean
+    /**
+     * If true, the experimental layout feature is enabled
+     */
+    FEATURE_EXPERIMENTAL_MODERN_LAYOUT_ENABLE?: boolean
+    // ================== Feature flags for the enterprise release ==================
     /**
      * If true, only pipelines to which the user has access will be shown across the application
      * @default false
      */
     FEATURE_DEFAULT_AUTHENTICATED_VIEW_ENABLE?: boolean
-
-    // ================== Feature flags for the enterprise release ==================
     /**
      * Enable Image promotion feature
      *

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@devtron-labs/devtron-fe-common-lib",`
`3`		`- "version": "1.8.0",`
	`3`	`+ "version": "1.8.1",`
`4`	`4`	`"description": "Supporting common component library",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/index.js",`