Merge pull request #415 from soramitsu/fix-tree-shaking

Fix tree shaking

.changeset/calm-pants-change.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**feat**: make library tree-shakeable, e.g. free from side-effects!

.changeset/dirty-insects-cheat.md

@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**refactor**(`SModal`): use `StyleValue` type for style props (`rootStyle`, `modalStyle` etc)

.changeset/selfish-sloths-enjoy.md

@@ -0,0 +1,36 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**BREAKING**(`SModal`): drop opinionated usage of `body-scroll-lock`, provide an unopinionated solution.
+
+**What is the change:** there is a new component - `SBodyScrollLockProvider`:
+
+```vue
+<script setup>
+import { SModal, SBodyScrollLockProvider, BodyScrollLockApi } from '@soramitsu-ui/ui'
+import { enableBodyScroll, disableBodyScroll } from 'body-scroll-lock'
+
+const lockApi: BodyScrollLockApi = {
+  lock: (el) => {
+    disableBodyScroll(el)
+  },
+  unlock: (el) => {
+    enableBodyScroll(el)
+  },
+}
+</script>
+
+<template>
+  <SBodyScrollLockProvider :api="lockApi">
+    <!-- Modal uses provided API -->
+    <SModal />
+  </SBodyScrollLockProvider>
+</template>
+```
+
+`SModal` prop `lockScroll` now is just a boolean which _reactively_ controls whether it should use provided API (if there is some) or not.
+
+**Why the change was made:** `body-scroll-lock` has little side-effects, thus it is not fully tree-shakeable.
+
+**How to migrate:** if you use `SModal`, you should now use `SBodyScrollLockProvider` if you need to lock the scroll.

.changeset/serious-steaks-pump.md

@@ -0,0 +1,39 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**BREAKING**: change exported enums format.
+
+**What is the change.** Previously enums was defined as plain TypeScript enums:
+
+```ts
+enum Status {
+  Info = 'info',
+}
+```
+
+Now we define enums as follows:
+
+```ts
+const Status = {
+  Info: 'info',
+} as const
+
+type Status = typeof Status[keyof typeof Status]
+```
+
+**Why the change was made:** it turned out that TypeScript enums are not tree-shakeable because they are compiled into IIFE.
+
+**How to migrate** - you don't need to do anything except of some cases:
+
+- If you use some enum variant as a type, e.g.
+
+  ```ts
+  function acceptOnlyInfo(status: Status.Info) {}
+  ```
+
+  then you should add `typeof`:
+
+  ```ts
+  function acceptOnlyInfo(status: typeof Status.Info) {}
+  ```

.changeset/swift-apes-tie.md

@@ -0,0 +1,7 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**BREAKING**: exclude `SJsonInput` from the library bundle
+
+**Why.** It has dirty dependencies (`jsoneditor`, `lodash`) which prevented the library from being side-effect-free. Anyway, `SJsonInput` seems to be unused and out of our Design System.

.eslintignore

@@ -2,3 +2,4 @@ node_modules
 dist
 dist-ts
 storybook-static
+/packages/ui/test/after-build/esm-tree-shaken-dist

.prettierignore

@@ -1,5 +1,7 @@
 **/dist/**
 **/node_modules/**
-packages/ui/etc
+/packages/ui/etc
+/packages/ui/test/after-build/esm-tree-shaken-dist
+/packages/ui/cypress/screenshots
 CHANGELOG.md
 storybook-static

package.json

@@ -4,12 +4,15 @@
   "scripts": {
     "sb:serve": "yarn --cwd packages/ui sb:serve",
     "sb:build": "yarn --cwd packages/ui sb:build",
-    "test:all": "run-s lint:check test:theme:unit build:theme test:ui:cy",
+    "test:all": "run-s lint:check test:theme:unit test:ui:unit build:theme test:ui:cy build:ui:only-vite test:ui:after-build",
     "test:theme:unit": "yarn --cwd packages/theme test",
+    "test:ui:unit": "yarn --cwd packages/ui test:unit",
     "test:ui:cy": "yarn --cwd packages/ui cy:ci",
+    "test:ui:after-build": "yarn --cwd packages/ui test:after-build",
     "build": "run-s build:theme build:ui",
     "build:theme": "yarn --cwd packages/theme build",
     "build:ui": "yarn --cwd packages/ui build",
+    "build:ui:only-vite": "yarn --cwd packages/ui build:vite",
     "lint:check": "run-s lint:es lint:format:check",
     "lint:es": "eslint .",
     "lint:es:fix": "yarn lint:es --fix",
@@ -27,16 +30,16 @@
     "@typescript-eslint/eslint-plugin": "^5.12.1",
     "@typescript-eslint/parser": "^5.12.1",
     "esbuild-jest": "^0.5.0",
-    "eslint": "^7.32.0",
+    "eslint": "^8.16.0",
     "eslint-config-alloy": "^4.5.1",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-vue": "^8.5.0",
+    "eslint-plugin-vue": "^9.0.1",
     "eslint-plugin-vuejs-accessibility": "^1.1.1",
     "lerna": "^4.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.4.1",
-    "prettier-eslint": "^13.0.0",
-    "prettier-eslint-cli": "^5.0.1",
-    "typescript": "^4.4.3"
+    "prettier": "^2.6.2",
+    "prettier-eslint": "^15.0.0",
+    "prettier-eslint-cli": "^6.0.1",
+    "typescript": "4.6.4"
   }
 }

packages/theme/package.json

@@ -48,6 +48,6 @@
     "sass": "^1.49.0",
     "sucrase": "^3.20.3",
     "type-fest": "^2.9.0",
-    "typescript": "^4.4.4"
+    "typescript": "4.6.4"
   }
 }

packages/ui/cypress/component/SModal.spec.cy.ts

@@ -2,9 +2,10 @@ import { mount } from '@cypress/vue'
 import { config } from '@vue/test-utils'
 import { Ref } from 'vue'
 import { bareMetalVModel } from '@/util'
-import { SModal, SModalCard, useModalApi } from '@/lib'
+import { SModal, SModalCard, useModalApi, SBodyScrollLockProvider, BodyScrollLockApi } from '@/lib'
 import { objectPick } from '@vueuse/core'
 import { Options as FocusTrapOptions } from 'focus-trap'
+import { enableBodyScroll, disableBodyScroll } from 'body-scroll-lock'
 
 const showVModel = (val: Ref<boolean>) => bareMetalVModel(val, 'show')
 const findRoot = () => cy.get('[data-testid=root]')
@@ -421,6 +422,15 @@ describe('Scroll Lock', () => {
       setup() {
         const show = ref(false)
 
+        const bodyScrollLockApi: BodyScrollLockApi = {
+          lock: (el) => {
+            disableBodyScroll(el)
+          },
+          unlock: (el) => {
+            enableBodyScroll(el)
+          },
+        }
+
         return () => [
           h(
             'button',
@@ -441,15 +451,22 @@ describe('Scroll Lock', () => {
             'A very huge element',
           ),
           h(
-            SModal as any,
+            SBodyScrollLockProvider,
+            { api: bodyScrollLockApi },
             {
-              ...showVModel(show),
-              ...params,
-              focusTrap: false,
-              modalTransition: null,
-            },
-            {
-              default: () => h('span', {}, 'Dip'),
+              default: () =>
+                h(
+                  SModal as any,
+                  {
+                    ...showVModel(show),
+                    ...params,
+                    focusTrap: false,
+                    modalTransition: null,
+                  },
+                  {
+                    default: () => h('span', {}, 'Dip'),
+                  },
+                ),
             },
           ),
         ]