@ilo-org/twig 0.2.9 → 0.2.11

package/.turbo/turbo-build:lib.log

@@ -0,0 +1,8 @@
+
+> @ilo-org/twig@0.2.11 build:lib /home/runner/work/designsystem/designsystem/packages/twig
+> pnpm output
+
+
+> @ilo-org/twig@0.2.11 output /home/runner/work/designsystem/designsystem/packages/twig
+> node outputtwigs.js
+

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @ilo-org/twig
 
+## 0.2.11
+
+### Patch Changes
+
+- @ilo-org/icons@0.1.16
+- @ilo-org/styles@0.1.16
+
+## 0.2.10
+
+### Patch Changes
+
+- 8e24e57fc: We've fixed broken exports from @ilo-org/react and ensured that types are exported properly as well. We've upgraded the @ilo-org/react Storybook project to version 7.0.0-beta. This has required us to decouple the installation and build scripts of the react and storybook projects. It's no longer possible to install dependencies and then build both storybook projects together. Instead, users should run `pnpm react:install` or `pnpm twig:install` before building the respective Storbyook project. This should be fixed when Wingsuit upgrades to Webpack5.
+- Updated dependencies [8e24e57fc]
+  - @ilo-org/styles@0.1.15
+  - @ilo-org/themes@0.1.15
+  - @ilo-org/fonts@0.0.7
+  - @ilo-org/icons@0.1.15
+  - @ilo-org/utils@0.0.11
+
 ## 0.2.9
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -20,13 +20,13 @@
     "components"
   ],
   "dependencies": {
-    "@ilo-org/fonts": "0.0.6",
-    "@ilo-org/icons": "0.1.14",
-    "@ilo-org/styles": "0.1.14",
-    "@ilo-org/themes": "0.1.14",
-    "@ilo-org/utils": "0.0.10",
     "@wingsuit-designsystem/preset-scss": "^1.2.3",
-    "video.js": "^7.19.2"
+    "video.js": "^7.19.2",
+    "@ilo-org/fonts": "0.0.7",
+    "@ilo-org/icons": "0.1.16",
+    "@ilo-org/styles": "0.1.16",
+    "@ilo-org/themes": "0.1.15",
+    "@ilo-org/utils": "0.0.11"
   },
   "devDependencies": {
     "@babel/core": "^7.8.4",
@@ -47,7 +47,6 @@
     "@wingsuit-designsystem/preset-scss": "^1.2.3",
     "@wingsuit-designsystem/storybook": "1.2.1",
     "autoprefixer": "^10.4.0",
-    "core-js": "^3.4.1",
     "cross-env": "^6.0.3",
     "eslint": "^6.7.2",
     "eslint-config-airbnb-base": "^14.0.0",
@@ -79,6 +78,7 @@
     "require-context": "^1.1.0",
     "resolve-url-loader": "^3.1.1",
     "sass-loader": "^10.1.0",
+    "storybook": "^6.5.15",
     "style-loader": "^1.0.2",
     "stylelint-scss": "^3.17.2",
     "webpack": "^4.41.3",
@@ -87,10 +87,9 @@
   },
   "scripts": {
     "storybook": "node importprefix.js; node importsvgs.js; start-storybook --config-dir apps/storybook",
-    "build:storybook": "node importprefix.js; node importsvgs.js; build-storybook --config-dir apps/storybook -o ./storybook-static",
-    "build": "pnpm build:storybook",
-    "dev:drupal": "cross-env-shell NODE_ENV=development \"webpack --watch --config ./apps/drupal/webpack.config.js\"",
-    "build:drupal": "cross-env-shell NODE_ENV=production \"webpack  --config ./apps/drupal/webpack.config.js\"",
+    "build:docs": "node importprefix.js; node importsvgs.js; build-storybook --config-dir apps/storybook -o ./storybook-static",
+    "build:lib": "pnpm output",
+    "build": "pnpm build:lib",
     "lint:js": "eslint --ext .js ./",
     "lint:css": "stylelint '**/*.css'",
     "lint": "npm run lint:js; npm run lint:css;",
@@ -100,8 +99,6 @@
     "ci": "npm run lint && npm run build:drupal",
     "import:prefix": "node importprefix.js",
     "import:svgs": "node importsvgs.js",
-    "output": "node outputtwigs.js",
-    "release": ""
-  },
-  "readme": "# ILO Design System - Twig Package\n\nThis package provides the implementation of the Design System using [Twig](https://twig.symfony.com/doc/). It also includes a [Storybook](https://storybook.js.org/) project for documentation and development of Twig components, using [Wingsuit](https://wingsuit-designsystem.github.io/). Wingsuit uses [Twing](https://www.npmjs.com/package/twing), a Node port of Twig, to compile Twigs to HTML. It has dependencies on the following other @ilo-org packages:\n\n- [@ilo-org/themes](./packages/themes)\n- [@ilo-org/fonts](./packages/fonts)\n- [@ilo-org/styles](./packages/styles)\n- [@ilo-org/utils](./packages/utils)\n- [@ilo-org/icons](./packages/icons)\n\n#### Architecture\n\nBecause this is a modified version of Storybook which compliles and displays Twigs instead of React components, there are some notable differences between this and vanilla versions of Storybook. One prominent difference is in directory structure. Each component folder, located in `src/patterns/components`, contains the following files:\n\n```\ncomponent.stories.jsx\ncomponent.twig\ncomponent.wingsuit.yml\nindex.js\n```\n\nand potentially, if Javascript interactivity exists, also the following:\n\n```\ncomponent.behavior.js\ncomponent.js\n```\n\nWingsuit consumes the `component.wingsuit.yml` file, which is a [UI Pattern YAML](https://wingsuit-designsystem.github.io/components/wingsuit/) borrowed from [Drupal](https://www.drupal.org/project/ui_patterns_settings), and uses this to populate and format the Storybook story for each components. **As such, one is limited in how much one can customize the Storybook experience.**\n\n#### Javascript\n\nIn this package, Javascript is vanilla, with each component that requires Javascript functionality loading an [ES class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) named after the component, scoped and bound to the component's outermost element. Wingsuit is configured to instantiate view classes via a function that looks for a [data attribute](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) that calls the view name provided in that attribute. On page load, the app looks for elements with the data attribute `data-loadcomponent` and loads whatever modules have corresponding names, passing a reference to the `HTMLElement` containing the data attribute. All the JS is bundled by Webpack into one file, meaning the JS file can be cached and only has to be downloaded from the server once per session.\n\nThe JS is well-documented in comments, so poke around and you'll get the gist of how it works.\n\nHere's an example of HTML component markup that will automatically call some Javascript. Given the following HTML:\n\n```\n<section class=\"component componentname\" data-loadcomponent=\"ComponentName\">\n      <!-- component HTML goes here -->\n</section>\n```\n\nJavascript will look in the `ComponentMap` Class for a JS Class called `ComponentName` and then create a new instance of that class and call it. If you've added a new JS Class specific to the module you've built, you'll need to import the JS file to `ComponenetMap` and add it to `ComponenteMap`'s exports. If you've created a new Class, you'll need to make sure to pass the param `element` into the constructor - this is a reference to the DOM element with the `data-loadcomponent` attribute on it. This allows you to scope your JS to each instance of an HTML module.\n\n#### Installation and PNPM Commands\n\nTo install\n\n```bash\nnpm i @ilo-org/twig\n```\n\nTo start storybook\n\n```bash\npnpm storybook\n```\n\nTo build storybook\n\n```bash\npnpm build:storybook\n```\n\nTo build and start storybook\n\n```bash\npnpm build\n```\n\nTo build Twigs to be used in a CMS like Drupal (this will output Twigs and necessary JavaScript to a `/dist` folder.)\n\n```bash\npnpm output\n```\n\nThis package imports the `prefix` from the `themes` package; to manually import it, run\n\n```bash\npnpm import:prefix\n```\n\nThis package imports icon svgs from the `icons` package; to manually import them, run\n\n```bash\npnpm import:svgs\n```\n\n## Questions and Feedback\n\n(TBD)\n\n## Accessibility Standards\n\n(TBD)\n\n## Contributing\n\nILO Design System is an open-source project and we welcome your contributions! Before submitting a pull request, please take a moment to review the following guidelines.\n\n### Branches\n\n| Branch    | Purpose                            |\n| --------- | ---------------------------------- |\n| `main`    | The latest version of all packages |\n| `develop` | The next release of all packages   |\n\n### Contribution workflow\n\n1. Fork and clone the repo\n2. Create a new branch from the `develop` branch\n3. Make your changes and [add a changeset](#versioning) identifying the changes and affected packages\n4. Push your branch to the forked version of the repo\n5. Open a pull request back to the `develop` branch of the main repo\n\n### Versioning\n\nThe project uses [changesets](https://github.com/changesets/changesets) to manage package versioning. All pull requests that will affect the project's semantic versioning must include a changest.\n\nSee more information on [how to add a changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)\n\n### Conventions\n\nContributions should respect the following conventions for branch names, commit messages and pull request descriptions\n\n#### Commits\n\nCommits should follow [Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#commit).\n\n```\n<type>(<scope>): <subject>\n```\n\nExamples:\n\n```\nfix(react): change button color on hover\nfeat(twig): add button component\nci(github): add release workflow\nperf(react): improve modal animations\n```\n\n#### Types\n\n- build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)\n- ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)\n- docs: Documentation only changes\n- feat: A new feature\n- fix: A bug fix\n- perf: A code change that improves performance\n- refactor: A code change that neither fixes a bug nor adds a feature\n- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)\n- test: Adding missing tests or correcting existing tests\n\n#### Scopes\n\nThis should be a package name or an aspect of the project's configuration.\n\n### Branches\n\nBranch names should broadly mirror the same convention as commits.\n\nExamples:\n\n```\nfeat/react/modal-wrapper\nfix/twig/modal-wrapper\n```\n\n### Pull requests\n\nPull requests should include a descriptive name and detailed explanation of what merging the pull request will accomplish. Authors should make sure to reference Github issues that the the pull request will fix or affect.\n\n## Building the project\n\nUse [nvm](https://github.com/nvm-sh/nvm) to make sure you have the correct version of node installed.\n\n```bash\nnvm use\n```\n\nInstall [pnpm](https://pnpm.io/).\n\n```bash\nnpm i -g pnpm\n```\n\nInstall dependencies\n\n```bash\npnpm recursive install\n```\n\nBuild all packages.\n\n```bash\npnpm build:all\n```\n\nStart React storybook\n\n```bash\npnpm start:react-storybook\n```\n\nStart Twig storybook\n\n```bash\npnpm start:twig-storybook\n```\n\nCheck types\n\n```bash\npnpm check:types\n```\n\nRun all tests\n\n```bash\npnpm test:all\n```\n"
+    "output": "node outputtwigs.js"
+  }
 }