Upgrade deps

.eslintrc.json

@@ -1,7 +1,18 @@
 {
-  "env": { "node": true, "browser": true, "es6": true },
-  "extends": ["airbnb-base", "prettier"],
-  "parserOptions": { "ecmaVersion": 12, "sourceType": "module" },
+  "env": {
+    "node": true,
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "airbnb-base",
+    "prettier",
+    "plugin:storybook/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
   "rules": {
     "no-lonely-if": 0,
     "no-console": 0,

.github/workflows/chromatic.yml

@@ -18,7 +18,7 @@ jobs:
     steps:
       - uses: actions/checkout@v1
       - name: Install dependencies
-        run: yarn
+        run: npm install
         # 👇 Adds Chromatic as a step in the workflow
       - name: Publish to Chromatic
         uses: chromaui/action@v1

.github/workflows/ci.yml

@@ -17,9 +17,9 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 16.x
-      - run: yarn install
-      - run: yarn run build
-      - run: yarn test
+          node-version: 20.x
+      - run: npm install
+      - run: npm run build
+      - run: npm test
         env:
           CI: true

.github/workflows/storybook.yml

@@ -20,8 +20,8 @@ jobs:
         # Install npm packages and build the Storybook files# Install npm
         # packages and build the Storybook files
         run: |
-          yarn install
-          yarn run storybook:build
+          npm install
+          npm run storybook:build
       - name: Deploy 🚀
         uses: JamesIves/[email protected]
         with:

.storybook/main.js

@@ -1,10 +1,25 @@
 // .storybook/main.js
 
-module.exports = {
+export default {
   stories: [
     '../__stories__/**/*.stories.mdx',
     '../__stories__/**/*.stories.js',
   ],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-mdx-gfm',
+  ],
+
   staticDirs: ['../__stories__/assets'],
+
+  framework: {
+    name: '@storybook/svelte-webpack5',
+    options: {},
+  },
+
+  docs: {
+    autodocs: false,
+  },
 }

__stories__/01-basic.stories.js

@@ -17,69 +17,21 @@ NotSplit.args = { types: 'none' }
 
 export const SplitLinesWordsAndChars = Template.bind({})
 SplitLinesWordsAndChars.args = { types: 'lines, words, chars' }
-SplitLinesWordsAndChars.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.target > .line')).length).toEqual(1)
-    expect((await page.$$('.line > .word')).length).toEqual(words)
-    expect((await page.$$('.word > .char')).length).toEqual(chars)
-  },
-}
 
 export const SplitLinesAndWords = Template.bind({})
 SplitLinesAndWords.args = { types: 'lines, words' }
-SplitLinesAndWords.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.target > .line')).length).toEqual(1)
-    expect((await page.$$('.line > .word')).length).toEqual(words)
-    expect((await page.$$('.char')).length).toEqual(0)
-  },
-}
 
 export const SplitLinesAndChars = Template.bind({})
 SplitLinesAndChars.args = { types: 'lines, chars' }
-SplitLinesAndChars.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.target > .line')).length).toEqual(1)
-    expect((await page.$$('.line > .char')).length).toEqual(chars)
-  },
-}
 
 export const SplitWordsAndChars = Template.bind({})
 SplitWordsAndChars.args = { types: 'words, chars' }
-SplitWordsAndChars.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.line')).length).toEqual(0)
-    expect((await page.$$('.target > .word')).length).toEqual(words)
-    expect((await page.$$('.word > .char')).length).toEqual(chars)
-  },
-}
 
 export const SplitLines = Template.bind({})
 SplitLines.args = { types: 'lines' }
-SplitLines.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.target > .line')).length).toEqual(1)
-    expect((await page.$$('.word')).length).toEqual(0)
-    expect((await page.$$('.char')).length).toEqual(0)
-  },
-}
 
 export const SplitWords = Template.bind({})
 SplitWords.args = { types: 'words' }
-SplitWords.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.line')).length).toEqual(0)
-    expect((await page.$$('.target > .word')).length).toEqual(words)
-    expect((await page.$$('.char')).length).toEqual(0)
-  },
-}
 
 export const SplitChars = Template.bind({})
 SplitChars.args = { types: 'chars' }
-SplitChars.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.line')).length).toEqual(0)
-    expect((await page.$$('.word')).length).toEqual(0)
-    expect((await page.$$('.target > .char')).length).toEqual(chars)
-  },
-}

__stories__/02-mult-line-text.stories.js

@@ -19,61 +19,18 @@ NotSplit.args = { types: 'none' }
 
 export const SplitLinesWordsAndChars = Template.bind({})
 SplitLinesWordsAndChars.args = { types: 'lines, words, chars' }
-SplitLinesWordsAndChars.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
-    expect((await page.$$('.line > .word')).length).toEqual(wordCount)
-    expect((await page.$$('.word > .char')).length).toEqual(charCount)
-  },
-}
 
 export const SplitLinesAndWords = Template.bind({})
 SplitLinesAndWords.args = { types: 'lines, words' }
-SplitLinesAndWords.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
-    expect((await page.$$('.line > .word')).length).toEqual(wordCount)
-    expect((await page.$$('.char')).length).toEqual(0)
-  },
-}
 
 export const SplitLinesAndChars = Template.bind({})
 SplitLinesAndChars.args = { types: 'lines, chars', absolute: false }
-SplitLinesAndChars.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
-    expect((await page.$$('.line > .char')).length).toEqual(charCount)
-  },
-}
 
 export const SplitWordsAndChars = Template.bind({})
 SplitWordsAndChars.args = { types: 'words, chars' }
-SplitWordsAndChars.parameters = {
-  async puppeteerTest(page) {
-    // Should not contain any line elements
-    expect((await page.$$('.line')).length).toEqual(0)
-    //
-    expect((await page.$$('.target > .word')).length).toEqual(wordCount)
-    expect((await page.$$('.word > .char')).length).toEqual(charCount)
-  },
-}
 
 export const SplitLines = Template.bind({})
 SplitLines.args = { types: 'lines' }
-SplitLines.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
-    expect((await page.$$('.word')).length).toEqual(0)
-    expect((await page.$$('.char')).length).toEqual(0)
-  },
-}
 
 export const SplitWords = Template.bind({})
 SplitWords.args = { types: 'words' }
-SplitWords.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.line')).length).toEqual(0)
-    expect((await page.$$('.target > .word')).length).toEqual(wordCount)
-    expect((await page.$$('.char')).length).toEqual(0)
-  },
-}

__stories__/03-absolute-position.stories.js

@@ -24,59 +24,18 @@ SplitLinesWordsAndChars.args = {
   types: 'lines, words, chars',
   absolute: true,
 }
-SplitLinesWordsAndChars.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
-    expect((await page.$$('.line > .word')).length).toEqual(wordCount)
-    expect((await page.$$('.word > .char')).length).toEqual(charCount)
-  },
-}
 
 export const SplitLinesAndWords = Template.bind({})
 SplitLinesAndWords.args = { types: 'lines, words', absolute: true }
-SplitLinesAndWords.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
-    expect((await page.$$('.line > .word')).length).toEqual(wordCount)
-    expect((await page.$$('.char')).length).toEqual(0)
-  },
-}
 
 export const SplitLinesAndChars = Template.bind({})
 SplitLinesAndChars.args = { types: 'lines, chars', absolute: true }
-SplitLinesAndChars.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
-    expect((await page.$$('.line > .char')).length).toEqual(charCount)
-  },
-}
 
 export const SplitWordsAndChars = Template.bind({})
 SplitWordsAndChars.args = { types: 'words, chars', absolute: true }
-SplitWordsAndChars.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.line')).length).toEqual(0)
-    expect((await page.$$('.target > .word')).length).toEqual(wordCount)
-    expect((await page.$$(' .word > .char')).length).toEqual(charCount)
-  },
-}
 
 export const SplitLines = Template.bind({})
 SplitLines.args = { types: 'lines', absolute: true }
-SplitLines.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.target > .line')).length).toEqual(lineCount)
-    expect((await page.$$('.word')).length).toEqual(0)
-    expect((await page.$$('.char')).length).toEqual(0)
-  },
-}
 
 export const SplitWords = Template.bind({})
 SplitWords.args = { types: 'words', absolute: true }
-SplitWords.parameters = {
-  async puppeteerTest(page) {
-    expect((await page.$$('.line')).length).toEqual(0)
-    expect((await page.$$('.target > .word')).length).toEqual(wordCount)
-    expect((await page.$$('.char')).length).toEqual(0)
-  },
-}

__stories__/04-nested-elements.stories.js

@@ -24,110 +24,16 @@ NotSplit.args = { types: 'none' }
 
 export const SplitLinesWordsAndChars = Template.bind({})
 SplitLinesWordsAndChars.args = { types: 'lines, words, chars' }
-SplitLinesWordsAndChars.parameters = {
-  async puppeteerTest(page) {
-    // Total number of line, word, and character elements is correct
-    expect((await page.$$('.target .line')).length).toEqual(lineCount)
-    expect((await page.$$('.target .word')).length).toEqual(words)
-    expect((await page.$$('.target .char')).length).toEqual(chars)
-    // Number of words directly inside a line element
-    expect((await page.$$('.target > .line > .word')).length).toEqual(
-      plainWords
-    )
-    // Nested link element
-    // - is immediate child of a line element
-    // - contains a single word element, which contains 9 character elements
-    expect((await page.$$('.target > .line > a')).length).toEqual(1)
-    expect((await page.$$('a > .word')).length).toEqual(1)
-    expect((await page.$$('a > .word > .char')).length).toEqual(9)
-
-    // nested `<strong>` element...
-    // - is an immediate child a line element
-    // - contains two word elements, which contain a total of 14 characters
-    expect((await page.$$('.target > .line > strong')).length).toEqual(1)
-    expect((await page.$$('strong > .word')).length).toEqual(2)
-    expect((await page.$$('strong > .word > .char')).length).toEqual(14)
-  },
-}
 
 export const SplitLinesAndWords = Template.bind({})
 SplitLinesAndWords.args = { types: 'lines, words' }
-SplitLinesAndWords.parameters = {
-  async puppeteerTest(page) {
-    // Total number of line, word, and character elements is correct
-    expect((await page.$$('.target .line')).length).toEqual(lineCount)
-    expect((await page.$$('.target .word')).length).toEqual(words)
-    expect((await page.$$('.target .char')).length).toEqual(0)
-
-    // Number of words directly inside a line element
-    expect((await page.$$('.target > .line > .word')).length).toEqual(
-      plainWords
-    )
-
-    // Nested link element(s)
-    // Are immediate children of line element
-    // Contain a total of two word elements, which contain a total of 13
-    // character elements
-    expect((await page.$$('.target > .line > a')).length).toEqual(1)
-    expect((await page.$$('.line > a > .word')).length).toEqual(1)
-
-    // nested `<strong>` element...
-    // - is an immediate child the line element
-    // - contains two word elements, which contain a total of 14 characters
-    expect((await page.$$('.target > .line > strong')).length).toEqual(1)
-    expect((await page.$$('.line > strong > .word')).length).toEqual(2)
-  },
-}
 
 export const SplitLinesAndChars = Template.bind({})
 SplitLinesAndChars.args = { types: 'lines, chars' }
 SplitLinesAndChars.parameters = {}
 
 export const SplitWordsAndChars = Template.bind({})
 SplitWordsAndChars.args = { types: 'words, chars' }
-SplitWordsAndChars.parameters = {
-  async puppeteerTest(page) {
-    // Total number of line, word, and character elements is correct
-    expect((await page.$$('.target .line')).length).toEqual(0)
-    expect((await page.$$('.target .word')).length).toEqual(words)
-    expect((await page.$$('.target .char')).length).toEqual(chars)
-
-    // Nested link element(s)
-    // Are immediate children of line element
-    // Contain a total of two word elements, which contain a total of 13
-    // character elements
-    expect((await page.$$('.target > a')).length).toEqual(1)
-    expect((await page.$$('.target a > .word')).length).toEqual(1)
-    expect((await page.$$('.target a > .word > .char')).length).toEqual(9)
-
-    // nested `<strong>` element...
-    // - is an immediate child the target element
-    // - contains two word elements, which contains a total of 14 characters
-    expect((await page.$$('.target > strong')).length).toEqual(1)
-    expect((await page.$$('strong > .word')).length).toEqual(2)
-    expect((await page.$$('strong > .word > .char')).length).toEqual(14)
-  },
-}
 
 export const SplitWords = Template.bind({})
 SplitWords.args = { types: 'words' }
-SplitWords.parameters = {
-  async puppeteerTest(page) {
-    // Total number of line, word, and character elements is correct
-    expect((await page.$$('.target .line')).length).toEqual(0)
-    expect((await page.$$('.target .word')).length).toEqual(words)
-    expect((await page.$$('.target .char')).length).toEqual(0)
-
-    // Nested link element(s)
-    // Are immediate children of target element
-    // Contain a total of two word elements
-    expect((await page.$$('.target > a')).length).toEqual(1)
-    expect((await page.$$('.target > a > .word')).length).toEqual(1)
-
-    // nested `<strong>` element...
-    // - is an immediate child the target element
-    // - contains two word elements
-    expect((await page.$$('.target > strong')).length).toEqual(1)
-    expect((await page.$$('.target > strong > .word')).length).toEqual(2)
-  },
-}