@emulsify/core 0.0.0-development

package/README.md

@@ -0,0 +1,72 @@
+> [!WARNING]  
+> Work in progress.
+
+![Emulsify Core Design System](https://github.com/emulsify-ds/.github/blob/6bd435be881bd820bddfa05d88905efe29176a0a/assets/images/header.png)
+
+# Emulsify Core
+
+An open-source toolset for creating and implementing design systems.
+
+### Storybook development and Webpack build
+
+**Emulsify Core** provides a [Storybook](https://storybook.js.org/) component library and a [Webpack](https://webpack.js.org/) development environment. It is meant to make project setup and ongoing development easier by bundling all necessary configuration and providing it as an extendable package for your theme or standalone project.
+
+## Documentation
+
+[docs.emulsify.info](https://emulsify.info/docs)
+
+### Quick Links
+
+1. [Installation](https://www.emulsify.info/docs/emulsify-drupal)
+2. [Usage](https://www.emulsify.info/docs/emulsify-drupal/basic-usage/commands)
+
+## Demo
+
+1. [Storybook](http://storybook.emulsify.info/)
+
+## Contributing
+
+### [Code of Conduct](https://github.com/emulsify-ds/emulsify-drupal/blob/master/CODE_OF_CONDUCT.md)
+
+The project maintainers have adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
+
+### Contribution Guide
+
+Please also follow the issue template and pull request templates provided. See below for the correct places to post issues:
+
+1. [Emulsify Drupal](https://github.com/emulsify-ds/emulsify-drupal/issues)
+2. [Emulsify Twig Extensions](https://github.com/emulsify-ds/emulsify-twig-extensions/issues)
+3. [Emulsify Tools (Drupal module)](https://www.drupal.org/project/issues/emulsify_tools)
+
+### Committing Changes
+
+To facilitate automatic semantic release versioning, we utilize the [Conventional Changelog](https://github.com/conventional-changelog/conventional-changelog) standard through Commitizen. Follow these steps when commiting your work to ensure semantic release can version correctly.
+
+1. Stage your changes, ensuring they encompass exactly what you wish to change, no more.
+2. Run the `commit` script via `yarn commit` or `npm run commit` and follow the prompts to craft the perfect commit message.
+3. Your commit message will be used to create the changelog for the next version that includes that commit.
+
+## Author
+
+Emulsify® is a product of [Four Kitchens](https://fourkitchens.com).
+
+### Contributors
+
+<table>
+<tr>
+    <td align="center" style="word-wrap: break-word; width: 150.0; height: 150.0">
+        <a href=https://github.com/callinmullaney>
+            <img src=https://avatars.githubusercontent.com/u/369018?v=4 width="100;"  style="border-radius:50%;align-items:center;justify-content:center;overflow:hidden;padding-top:10px" alt=Callin Mullaney/>
+            <br />
+            <sub style="font-size:14px"><b>Callin Mullaney</b></sub>
+        </a>
+    </td>
+    <td align="center" style="word-wrap: break-word; width: 150.0; height: 150.0">
+        <a href=https://github.com/amazingrando>
+            <img src=https://avatars.githubusercontent.com/u/409903?v=4 width="100;"  style="border-radius:50%;align-items:center;justify-content:center;overflow:hidden;padding-top:10px" alt=Randy Oest/>
+            <br />
+            <sub style="font-size:14px"><b>Randy Oest</b></sub>
+        </a>
+    </td>
+</tr>
+</table>

package/assets/images/emulsify-logo-sb.svg

@@ -0,0 +1,8 @@
+<svg width="758" height="299" viewBox="0 0 758 299" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.028 233.265V281.419H34.5831C49.0993 281.419 57.6756 272.442 57.6756 257.058C57.6756 241.708 49.1327 233.265 34.5831 233.265H15.028ZM27.275 243.143H32.9814C40.7233 243.143 45.2283 248.048 45.2283 257.092C45.2283 266.703 40.9569 271.541 32.9814 271.541H27.275V243.143ZM96.619 271.541H75.8625V261.73H95.3843V252.72H75.8625V243.143H96.619V233.265H63.6155V281.419H96.619V271.541ZM101.958 267.236C102.125 276.714 110.067 282.253 122.081 282.253C134.795 282.253 142.37 276.113 142.37 266.436C142.37 258.86 137.698 254.689 127.42 252.72L122.481 251.786C117.242 250.785 115.039 249.383 115.039 246.847C115.039 244.011 117.676 242.008 122.114 242.008C126.552 242.008 129.823 244.077 130.023 247.548H141.402C141.269 238.371 134.127 232.431 122.014 232.431C110.935 232.431 102.893 238.404 102.893 247.681C102.893 255.023 107.865 259.728 117.476 261.53L122.414 262.464C128.121 263.566 130.19 264.934 130.19 267.604C130.19 270.54 127.086 272.676 122.314 272.676C117.609 272.676 113.905 270.674 113.338 267.236H101.958ZM160.29 281.419V233.265H148.043V281.419H160.29ZM211.914 261.063V255.156H191.291V263.566H200.101L200.068 264.3C199.734 269.139 195.863 272.409 190.323 272.409C183.282 272.409 178.744 266.636 178.744 257.092C178.744 247.715 182.848 242.275 189.789 242.275C194.495 242.275 198.099 244.878 199.3 249.15H211.414C210.179 239.339 201.436 232.431 189.756 232.431C175.207 232.431 166.263 241.641 166.263 257.259C166.263 273.076 175.207 282.253 190.056 282.253C203.772 282.253 211.914 274.211 211.914 261.063ZM229.601 281.419V253.154H229.868L250.39 281.419H260.068V233.265H248.455V261.263H248.188L227.765 233.265H217.988V281.419H229.601ZM279.089 267.236C279.256 276.714 287.198 282.253 299.211 282.253C311.926 282.253 319.501 276.113 319.501 266.436C319.501 258.86 314.829 254.689 304.551 252.72L299.612 251.786C294.373 250.785 292.17 249.383 292.17 246.847C292.17 244.011 294.807 242.008 299.245 242.008C303.683 242.008 306.953 244.077 307.154 247.548H318.533C318.4 238.371 311.258 232.431 299.145 232.431C288.066 232.431 280.023 238.404 280.023 247.681C280.023 255.023 284.996 259.728 294.606 261.53L299.545 262.464C305.252 263.566 307.32 264.934 307.32 267.604C307.32 270.54 304.217 272.676 299.445 272.676C294.74 272.676 291.036 270.674 290.468 267.236H279.089ZM349.267 281.419V264.867L365.852 233.265H352.938L343.394 253.288H343.16L333.583 233.265H320.435L337.02 264.867V281.419H349.267ZM366.854 267.236C367.02 276.714 374.963 282.253 386.976 282.253C399.69 282.253 407.265 276.113 407.265 266.436C407.265 258.86 402.593 254.689 392.315 252.72L387.376 251.786C382.137 250.785 379.935 249.383 379.935 246.847C379.935 244.011 382.571 242.008 387.009 242.008C391.448 242.008 394.718 244.077 394.918 247.548H406.297C406.164 238.371 399.023 232.431 386.909 232.431C375.83 232.431 367.788 238.404 367.788 247.681C367.788 255.023 372.76 259.728 382.371 261.53L387.31 262.464C393.016 263.566 395.085 264.934 395.085 267.604C395.085 270.54 391.982 272.676 387.21 272.676C382.504 272.676 378.8 270.674 378.233 267.236H366.854ZM436.331 281.419V243.143H449.612V233.265H410.836V243.143H424.117V281.419H436.331ZM487.788 271.541H467.032V261.73H486.554V252.72H467.032V243.143H487.788V233.265H454.785V281.419H487.788V271.541ZM547.555 281.419V233.265H533.406L521.259 264.734H520.992L508.845 233.265H494.696V281.419H505.475V251.352H505.742L517.622 281.419H524.629L536.543 251.352H536.776V281.419H547.555Z" fill="white"/>
+<path d="M405.911 2.6543C404.432 2.6543 402.064 2.85092 401.275 4.81706C392.2 39.8143 381.251 101.256 376.615 141.758C376.122 141.758 375.728 141.758 375.432 141.758C375.432 141.758 370.105 165.352 359.945 165.352C352.449 165.352 350.278 154.735 350.772 147.558C351.265 130.748 361.129 82.0862 362.115 71.9606C362.312 67.8317 349.588 60.3604 340.612 60.3604C336.765 60.3604 333.806 61.3435 333.608 63.5062C329.465 87.5914 313.584 140.284 297.605 161.42L294.448 160.437C292.771 136.351 302.142 98.6017 311.118 70.8792C309.146 67.7334 300.465 62.9164 290.601 62.9164C279.258 62.9164 264.265 125.046 264.265 153.162C264.265 155.128 264.561 156.996 265.054 158.962C262.292 165.254 258.05 171.939 252.724 171.939C246.411 171.939 243.55 166.433 243.55 154.833C243.55 129.765 257.064 93.1948 260.418 68.9131C261.404 61.2451 246.214 54.462 234.377 54.462C230.727 54.462 226.683 55.445 225.696 57.3129C212.38 81.5946 204.489 110.497 195.315 135.565H194.329C195.315 117.772 199.36 92.7033 201.135 76.8759C202.122 69.6995 189.792 63.6045 177.264 63.6045C174.601 63.6045 170.261 64.096 169.275 65.9639C161.778 82.7743 153.295 108.334 143.924 133.107H142.938C143.431 118.656 150.632 89.7541 155.958 67.6351C156.945 63.8011 145.108 57.8044 135.441 57.8044C129.03 57.8044 116.798 107.646 114.727 147.952C99.5363 147.755 75.8627 151.786 45.0871 159.06C46.5667 142.25 48.2436 126.128 50.6109 110.497C64.6178 108.334 80.7947 106.171 94.6043 105.876C98.7471 105.876 98.9444 102.534 98.9444 100.863C98.9444 98.8966 93.9138 91.2287 89.5737 87.0998C86.7131 84.4455 78.2301 85.4286 66.8865 86.1168L54.8525 87.2964C57.5157 72.8453 60.8695 58.3942 64.7164 44.2381C78.0328 42.0753 89.0804 40.4041 102.101 39.421C102.101 39.421 100.128 44.0414 100.128 46.8923C99.9308 49.5466 107.625 49.0551 113.642 46.4008C116.502 44.7296 132.186 33.9159 132.186 32.2446C132.186 30.2785 126.859 19.2682 125.676 18.0885C119.363 12.0918 109.696 14.2545 100.819 15.2376C94.3083 15.9257 84.1484 17.2037 72.3117 19.3664L73.9886 14.746C69.3525 11.1087 58.3048 8.94595 49.8218 7.96289C46.9613 12.9765 44.298 18.7766 41.6347 25.2649C30.4884 27.9191 18.9476 31.065 8.5904 34.4074C3.55978 36.0786 15.5938 53.6755 22.1041 52.4958C26.2469 51.8077 30.0939 50.8246 33.7435 50.1365C30.0939 63.6045 26.9374 78.2522 24.0769 93.1948C15.8898 95.3576 8.88633 97.5203 6.22305 99.1915C2.08019 102.042 11.7469 117.477 19.7367 116.002H20.4272C17.7639 133.599 15.5938 150.901 14.4102 166.532L1.38971 169.874C-3.93683 171.349 7.20946 189.339 15.1993 187.963L16.6789 187.471C24.6687 191.305 42.2266 197.597 42.7198 192.091L43.213 182.457C73.0022 176.756 96.2811 172.922 115.91 171.644C118.968 183.539 126.662 190.224 138.4 190.224C144.417 190.224 149.251 186.39 149.251 186.39C149.744 165.45 161.087 131.534 168.584 111.578H170.557C168.584 129.372 167.203 150.999 166.907 169.579C166.71 186.685 172.727 197.302 188.411 197.302C194.921 197.302 199.557 193.959 199.557 193.959C200.05 173.02 211.394 131.141 221.258 111.185H223.921C221.258 122.785 216.72 145.789 216.424 155.423C215.734 174.888 222.737 191.502 245.918 191.502C260.023 191.502 269.788 183.834 275.115 175.281C281.822 182.064 290.503 186.685 297.605 186.685C311.612 186.685 322.265 162.403 326.112 151.294L328.085 151.491C327.098 165.254 330.452 183.932 353.435 183.932C361.129 183.932 368.132 180.59 373.755 175.871C373.656 178.82 373.853 181.179 374.642 182.556C376.122 186.685 400.486 196.515 403.84 192.386C404.037 185.898 404.826 179.41 405.319 172.922C409.462 120.426 419.524 65.5706 430.473 14.8444C431.262 10.6172 413.112 2.6543 405.911 2.6543Z" fill="white"/>
+<path d="M486.303 93.8829C493.997 93.8829 512.146 80.6115 512.146 71.469C512.146 67.1435 503.466 55.3467 500.507 55.3467C495.871 55.3467 423.765 73.6317 422.483 83.7573C421.792 90.049 426.132 103.517 429.979 106.859C446.65 109.022 472 126.128 472 149.23C472 164.369 464.997 174.691 451.187 174.691C438.66 174.691 435.207 164.565 435.503 162.403C435.503 160.437 446.156 141.955 446.354 134.68C446.354 132.714 437.377 124.555 428.993 124.555C418.143 124.555 410.843 141.857 410.843 153.162C410.843 172.135 436.194 196.22 461.84 196.22C482.85 196.22 501.395 185.898 501.395 158.176C501.395 116.297 452.173 97.3237 452.173 97.3237L451.976 96.3406C454.146 94.3745 471.309 87.3947 479.299 87.1981C482.456 87.3947 483.146 93.8829 486.303 93.8829Z" fill="white"/>
+<path d="M545.684 49.1534C567.187 49.1534 574.191 33.5226 574.191 25.0683C574.191 17.8919 569.16 14.9427 564.031 12.7799C566.398 4.32553 561.367 2.6543 552.884 2.6543C535.721 2.6543 531.381 25.0682 531.381 32.2446C531.479 44.3364 540.357 49.1534 545.684 49.1534Z" fill="white"/>
+<path d="M715.246 59.4756C708.242 59.4756 699.759 123.277 697.589 132.124C694.926 142.25 685.259 164.369 678.058 164.369C673.916 164.369 673.225 158.864 673.225 152.769C674.211 125.538 682.596 97.6186 690.882 71.469C690.388 65.6689 680.524 60.3603 671.844 60.3603C671.154 60.3603 670.562 60.3603 669.871 60.4587C667.603 57.5094 664.742 55.3467 661.388 55.3467C652.708 55.3467 638.405 58.6891 617.691 61.6383C621.538 45.7126 628.048 24.5767 628.048 12.7799C628.048 4.3255 619.565 0 606.545 0C601.711 0 598.357 0.983068 598.357 0.983068C595.99 12.5833 590.17 43.8448 586.028 64.7841C562.847 68.913 564.031 68.4215 564.031 73.4351C564.031 78.0555 567.385 86.4116 571.527 89.5575L580.01 96.3406C578.531 106.958 574.783 122.195 571.133 140.284C568.075 139.694 565.609 139.89 565.609 139.89C564.919 149.033 559.296 173.315 545.783 173.315C542.133 173.315 539.272 169.481 539.47 161.026C539.667 143.43 551.306 99.8797 557.817 77.564C560.677 67.7333 535.327 64.096 531.973 64.096C529.803 64.096 527.337 64.5875 526.449 67.2418C520.432 84.3472 506.918 138.023 506.918 160.83C506.918 182.261 517.769 192.583 536.116 192.583C547.558 192.583 557.126 188.356 564.524 182.162C563.735 188.749 563.242 195.139 563.242 200.742C563.242 216.373 569.752 227.482 584.745 227.482C599.738 227.482 636.432 196.22 636.432 146.182C636.432 118.755 628.936 104.5 612.759 87.6896L612.956 86.5099C626.766 84.5438 642.252 82.4794 655.174 81.0048C648.368 101.846 643.436 125.734 643.436 149.033C643.436 163.189 648.072 183.637 669.97 183.637C680.327 183.637 687.824 175.969 691.671 168.498C689.501 186.783 681.314 217.553 681.314 226.695C681.314 230.529 682.004 231.512 684.47 232.692C689.303 234.855 702.324 239.475 706.171 239.475C708.834 239.475 710.807 239.279 711.497 234.167C713.174 211.261 721.164 161.518 725.701 137.138C728.365 120.327 740.695 92.8999 740.695 69.9944C740.596 64.7841 727.082 59.4756 715.246 59.4756ZM617.198 153.359C616.211 190.42 600.034 207.034 596.878 207.034C594.017 207.034 593.228 203.2 593.524 197.891C593.721 192.386 594.708 185.407 595.497 179.606C599.344 150.704 604.868 122.097 606.643 108.826C616.211 121.605 617.691 139.104 617.198 153.359Z" fill="white"/>
+<path d="M742.437 201.722C750.974 201.722 757.702 194.75 757.702 186.526V186.443C757.702 178.218 751.058 171.33 742.521 171.33C733.984 171.33 727.256 178.302 727.256 186.526V186.61C727.256 194.834 733.9 201.722 742.437 201.722ZM742.437 200.052C734.783 200.052 729.022 193.999 729.022 186.61V186.526C729.022 179.137 734.825 173 742.521 173C750.175 173 755.936 179.053 755.936 186.443V186.526C755.936 193.915 750.133 200.052 742.437 200.052ZM735.793 194.124H740.292V189.24H742.185H742.269L745.549 194.124H750.721L746.853 188.53C748.871 187.695 750.175 186.067 750.175 183.604V183.52C750.175 181.976 749.712 180.765 748.787 179.846C747.652 178.719 745.885 178.051 743.32 178.051H735.793V194.124ZM740.292 185.775V181.892H743.194C744.708 181.892 745.675 182.518 745.675 183.812V183.896C745.675 185.065 744.792 185.775 743.236 185.775H740.292Z" fill="white"/>
+</svg>

package/commitlint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+};

package/config/.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

package/config/.stylelintrc.json

@@ -0,0 +1,61 @@
+{
+  "extends": [
+    "stylelint-config-standard-scss"
+  ],
+  "plugins": [
+    "stylelint-prettier"
+  ],
+  "customSyntax": "postcss-scss",
+  "rules": {
+    "at-rule-empty-line-before": [
+      "always",
+      {
+        "ignoreAtRules": [
+          "content",
+          "each",
+          "else",
+          "extend",
+          "forward",
+          "function",
+          "if",
+          "import",
+          "include",
+          "mixin",
+          "return",
+          "use",
+          "media"
+        ]
+      }
+    ],
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": [
+          "content",
+          "each",
+          "else",
+          "extend",
+          "error",
+          "forward",
+          "function",
+          "if",
+          "import",
+          "include",
+          "mixin",
+          "return",
+          "use"
+        ]
+      }
+    ],
+    "function-no-unknown": null,
+    "import-notation": null,
+    "media-feature-range-notation": null,
+    "prettier/prettier": true,
+    "property-no-vendor-prefix": null,
+    "selector-class-pattern": null,
+    "selector-not-notation": null,
+    "value-keyword-case": null,
+    "scss/operator-no-newline-after": null,
+    "scss/at-extend-no-missing-placeholder": null
+  }
+}

package/config/a11y.config.js

@@ -0,0 +1,61 @@
+module.exports = {
+  storybookBuildDir: '../../../.out',
+  pa11y: {
+    includeNotices: false,
+    includeWarnings: false,
+    runners: ['axe'],
+  },
+  // A11y linting is done on a component-by-component
+  // basis, which results in the linter reporting some errors that
+  // should be ignored. These codes and descriptions allow for those
+  // errors to be targeted specifically.
+  ignore: {
+    codes: ['landmark-one-main', 'page-has-heading-one'],
+    descriptions: ['Ensures all page content is contained by landmarks'],
+  },
+  // List of storybook component IDs defined and used in this project.
+  components: [
+    'base-colors--palettes',
+    'base-motion--usage',
+    'atoms-button--twig',
+    'atoms-button--twig-alt',
+    'atoms-forms--checkboxes',
+    'atoms-forms--radio-buttons',
+    'atoms-forms--select-dropdowns',
+    'atoms-forms--textfields-examples',
+    'atoms-images--images',
+    'atoms-images--figures',
+    'atoms-images--icons',
+    'atoms-links--links',
+    'atoms-lists--definition-list',
+    'atoms-lists--unordered-list',
+    'atoms-lists--ordered-list',
+    'atoms-tables--table',
+    'atoms-text--headings-examples',
+    'atoms-text--blockquote-example',
+    'atoms-text--preformatted',
+    'atoms-text--random',
+    'atoms-videos--wide',
+    'atoms-videos--full',
+    'molecules-cards--card-example',
+    'molecules-cards--card-with-background',
+    'molecules-cta--cta-example',
+    'molecules-menus--breadcrumbs',
+    'molecules-menus--inline',
+    'molecules-menus--main',
+    'molecules-menus--social',
+    'molecules-menus-pager--pager-example',
+    'molecules-status--status-examples',
+    'molecules-tabs--js-tabs',
+    'organisms-grids--default-grid',
+    'organisms-grids--card-grid',
+    'organisms-grids--cta-grid',
+    'organisms-site--footer',
+    'organisms-site--header',
+    'templates-layouts--full-width',
+    'templates-layouts--with-sidebar',
+    'templates-place-holder--place-holder',
+    'pages-content-types--article',
+    'pages-landing-pages--home',
+  ],
+};

package/config/babel.config.js

@@ -0,0 +1,18 @@
+module.exports = (api) => {
+  api.cache(true);
+
+  const presets = [
+    [
+      '@babel/preset-env',
+      {
+        useBuiltIns: 'entry',
+        corejs: 3,
+      },
+    ],
+    ['minify', { builtIns: false }],
+  ];
+
+  const comments = false;
+
+  return { presets, comments };
+};

package/config/eslintrc.config.json

@@ -0,0 +1,68 @@
+{
+  "extends": [
+    "airbnb-base",
+    "eslint:recommended",
+    "plugin:import/recommended",
+    "plugin:security/recommended-legacy",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": [
+    "import",
+    "security",
+    "prettier"
+  ],
+  "root": true,
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "globals": {
+    "expect": true,
+    "it": true,
+    "describe": true
+  },
+  "rules": {
+    "strict": 0,
+    "prettier/prettier": "error",
+    "consistent-return": ["off"],
+    "no-underscore-dangle": ["off"],
+    "max-nested-callbacks": ["warn", 3],
+    "import/extensions": ["off"],
+    "import/no-unresolved": ["off"],
+    "import/no-extraneous-dependencies": ["warn"],
+    "import/no-mutable-exports": ["warn"],
+    "no-plusplus": ["warn", {
+      "allowForLoopAfterthoughts": true
+    }],
+    "no-param-reassign": ["off"],
+    "no-prototype-builtins": ["off"],
+    "valid-jsdoc": ["warn", {
+      "prefer": {
+        "returns": "return",
+        "property": "prop"
+      },
+      "requireReturn": false
+    }],
+    "no-unused-vars": ["warn"],
+    "operator-linebreak": ["error", "after", { "overrides": { "?": "ignore", ":": "ignore" } }]
+  },
+  "settings": {
+    "import/ignore": [
+      "\\.(scss|less|css)$"
+    ],
+    "import/resolver": {
+      "node": {
+        "extensions": [
+          ".js",
+          ".jsx"
+        ],
+        "moduleDirectory": [
+          "src",
+          "node_modules"
+        ]
+      }
+    }
+  }
+}
+        

package/config/jest.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  coverageDirectory: '.coverage',
+  // @TODO: once every file has 100% test coverage,
+  // these thresholds should be updated.
+  coverageThreshold: {
+    global: {
+      branches: 0,
+      functions: 0,
+      lines: 0,
+      statements: 0,
+    },
+  },
+  testPathIgnorePatterns: [
+    '<rootDir>/dist',
+    '<rootDir>/vendor',
+    '<rootDir>/.out',
+  ],
+};

package/config/postcss.config.js

@@ -0,0 +1,5 @@
+const autoPrefixer = require('autoprefixer');
+
+module.exports = {
+  plugins: [autoPrefixer()],
+};

package/config/webpack/app.js

@@ -0,0 +1 @@
+// Empty (needed for webpack)

package/config/webpack/css/style.js

@@ -0,0 +1 @@
+import '../../../../../components/style.scss';

package/config/webpack/css.js

@@ -0,0 +1 @@
+import '../../../../components/style.scss';

package/config/webpack/loaders.js

@@ -0,0 +1,87 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const globImporter = require('node-sass-glob-importer');
+const fs = require('fs-extra');
+
+let babelConfig;
+let postcssConfig;
+
+// Check if custom babel config is available.
+if (fs.existsSync('./config/babel.config.js')) {
+  babelConfig = './config/babel.config.js';
+} else {
+  babelConfig = './node_modules/emulsify-core/config/babel.config.js';
+}
+
+// Check if custom postcss config is available.
+if (fs.existsSync('./config/postcss.config.js')) {
+  postcssConfig = './config/postcss.config.js';
+} else {
+  postcssConfig = './node_modules/emulsify-core/config/postcss.config.js';
+}
+
+const JSLoader = {
+  test: /^(?!.*\.(stories|component)\.js$).*\.js$/,
+  exclude: /node_modules/,
+  loader: 'babel-loader',
+  options: {
+    configFile: babelConfig,
+  },
+};
+
+const ImageLoader = {
+  test: /\.(png|svg|jpg|gif)$/i,
+  exclude: /icons\/.*\.svg$/,
+  loader: 'file-loader',
+};
+
+const CSSLoader = {
+  test: /\.s[ac]ss$/i,
+  exclude: /node_modules/,
+  use: [
+    MiniCssExtractPlugin.loader,
+    {
+      loader: 'css-loader',
+      options: {
+        sourceMap: true,
+        url: false,
+      },
+    },
+    {
+      loader: 'postcss-loader',
+      options: {
+        sourceMap: true,
+        postcssOptions: {
+          config: postcssConfig,
+          plugins: [['autoprefixer']],
+        },
+      },
+    },
+    {
+      loader: 'sass-loader',
+      options: {
+        sourceMap: true,
+        sassOptions: {
+          importer: globImporter(),
+          outputStyle: 'compressed',
+        },
+      },
+    },
+  ],
+};
+
+const SVGSpriteLoader = {
+  test: /icons\/.*\.svg$/, // your icons directory
+  loader: 'svg-sprite-loader',
+  options: {
+    extract: true,
+    runtimeCompat: true,
+    spriteFilename: './icons.svg',
+  },
+};
+
+module.exports = {
+  JSLoader,
+  CSSLoader,
+  SVGSpriteLoader,
+  ImageLoader,
+};

package/config/webpack/plugins.js

@@ -0,0 +1,48 @@
+/* eslint-disable no-underscore-dangle */
+const path = require('path');
+const webpack = require('webpack');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const _MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const _ImageminPlugin = require('imagemin-webpack-plugin').default;
+const _SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
+const glob = require('glob');
+
+const imagePath = path.resolve(__dirname, '../../../../assets/images');
+
+const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
+  filename: '[name].css',
+  chunkFilename: '[id].css',
+});
+
+const ImageminPlugin = new _ImageminPlugin({
+  disable: process.env.NODE_ENV !== 'production',
+  externalImages: {
+    context: imagePath,
+    sources: glob.sync(path.resolve(imagePath, '**/*.{png,jpg,gif,svg}')),
+    destination: imagePath,
+  },
+});
+
+const SpriteLoaderPlugin = new _SpriteLoaderPlugin({
+  plainSprite: true,
+});
+
+const ProgressPlugin = new webpack.ProgressPlugin();
+
+module.exports = {
+  ProgressPlugin,
+  MiniCssExtractPlugin,
+  ImageminPlugin,
+  SpriteLoaderPlugin,
+  CleanWebpackPlugin: new CleanWebpackPlugin({
+    protectWebpackAssets: false, // Required for removal of extra, unwanted dist/css/*.js files.
+    cleanOnceBeforeBuildPatterns: ['!*.{png,jpg,gif,svg}'],
+    cleanAfterEveryBuildPatterns: [
+      'remove/**',
+      '!js',
+      'css/**/*.js', // Remove all unwanted, auto generated JS files from dist/css folder.
+      'css/**/*.js.map',
+      '!*.{png,jpg,gif,svg}',
+    ],
+  }),
+};

package/config/webpack/svgSprite.js

@@ -0,0 +1,5 @@
+function requireAll(r) {
+  r.keys().forEach(r);
+}
+
+requireAll(require.context('../../../../assets/icons/', true, /\.svg$/));

package/config/webpack/webpack.common.js

@@ -0,0 +1,72 @@
+const path = require('path');
+const glob = require('glob');
+const loaders = require('./loaders');
+const plugins = require('./plugins');
+
+const webpackDir = path.resolve(__dirname);
+const rootDir = path.resolve(__dirname, '../../../..');
+const distDir = path.resolve(__dirname, '../../../../dist');
+
+// Glob pattern for scss files that ignore file names prefixed with underscore.
+const scssPattern = path.resolve(rootDir, 'components/**/!(_*).scss');
+// Glob pattern for JS files.
+const jsPattern = path.resolve(
+  rootDir,
+  'components/**/!(*.stories|*.component|*.min|*.test).js',
+);
+
+// Prepare list of scss and js file for "entry".
+function getEntries(scssMatcher, jsMatcher) {
+  const entries = {};
+
+  // SCSS entries
+  glob.sync(scssMatcher).forEach((file) => {
+    const filePath = file.split('components/')[1];
+    const newfilePath = `css/${filePath.replace('.scss', '')}`;
+    entries[newfilePath] = file;
+  });
+
+  // JS entries
+  glob.sync(jsMatcher).forEach((file) => {
+    const filePath = file.split('components/')[1];
+    const newfilePath = `js/${filePath.replace('.js', '')}`;
+    entries[newfilePath] = file;
+  });
+
+  entries.svgSprite = path.resolve(webpackDir, 'svgSprite.js');
+
+  // CSS Files.
+  glob.sync(`${webpackDir}/css/*js`).forEach((file) => {
+    const baseFileName = path.basename(file);
+    const newfilePath = `css/${baseFileName.replace('.js', '')}`;
+    entries[newfilePath] = file;
+  });
+
+  return entries;
+}
+
+module.exports = {
+  stats: {
+    errorDetails: true,
+  },
+  entry: getEntries(scssPattern, jsPattern),
+  module: {
+    rules: [
+      loaders.CSSLoader,
+      loaders.SVGSpriteLoader,
+      loaders.ImageLoader,
+      loaders.JSLoader,
+    ],
+  },
+  plugins: [
+    plugins.MiniCssExtractPlugin,
+    plugins.ImageminPlugin,
+    plugins.SpriteLoaderPlugin,
+    plugins.ProgressPlugin,
+    plugins.CleanWebpackPlugin,
+  ],
+  output: {
+    path: distDir,
+    filename: '[name].js',
+  },
+};

package/config/webpack/webpack.dev.js

@@ -0,0 +1,7 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'source-map',
+});

package/config/webpack/webpack.prod.js

@@ -0,0 +1,6 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'production',
+});