Add Foundational References

This release allows Figma foundation styles - Colors, Typography, and Effects
to create variable references in component styles in CSS, SASS, and Style
Dictionaries. It also adds shared style support in snippets to make it easier
to structure and reuse styles across multiple large components.

Features

• Figma foundation styles - Colors, Typography, and Effects - are now linked to
  component styles in the tokens export. This allows you to use foundation styles
  as variables in component styles in CSS, SASS, and Style Dictionaries.
  • To enable, set useVariables to true in the handoff.config.json file.
  • You can also enable variable support via the .env var
    HANDOFF_USE_VARIABLES. You can use a boolean or string ("true"/"false")
  • When enabled, Handoff will create variable references in the component styles
    for the foundation styles wherever possible instead of using the string value.
  • For example a color foundation style Blue in the Primary color group
    with value #FF0000 will be referenced as var(--color-primary-blue) in
    the component styles instead of #FF0000.
  • This feature is disabled by default.
• Added support for shared styles in snippets. Shared Styles exist to allow users
  to separate styles used across multiple components from the styles unique to
  each component.
  • To use a shared style in a snippet, add a {{ sharedStyles }} to your snippet
    HTML file. Handoff will replace this with the shared styles from the Figma
    file.
  • Created a shared.scss or shared.css file in the integration/snippets
    directory to define the shared styles.
  • If the shared styles are defined in a shared.scss file, Handoff will compile
    the shared styles to CSS and include them in the snippet.

Changes

• The default configuration now has a useVariables property set to false to
  maintain backward compatibility.
• The default snippets.html file now includes a {{ sharedStyles }} token to
  support shared styles in snippets. This value will be empty if no shared styles
  exists.

Commit Log

• fixing next env b21147b
• Prerelease build 3ea13a9
• security updates for next, webpack and cross-spawn a7f1ff3
• Fixing lint warning in tokens preview 0ce178b
• Merge pull request #168 from Convertiv/release/0.15.0 5c08c8a
• Changing reference toggle to have a single name to make it clear wjhat the checkbox does 2a8afe1
• Toggle reference d2419f9
• Fixing changelog date 9ae9c10
• Fixing reference bug e3eeef2
• Changlog spelling mistake 522dfa0
• Adding env variable support 8f502a7
• upadting changelog for 0.15.0 d1f1c5f
• reworking style dictrionary references 01138f7
• Rebase changes 1a2d962
• Merge branch 'main' into feature/compile-common-styles-variable 90d04ee
• Allowing style references to be toggled on and off 4ddf4cc
• First draft of style dictionary references a80520a
• Fixing css comment a2708c2
• Adding a comment to the css b6a578a
• Adding shared styles name to dropdown e339639
• Tweaking shared styles d65faa3
• Merge branch 'feature/styles-variable-reference' of github.com:Convertiv/handoff-app into feature/compile-common-styles-variable ecdffd8
• Fixing shared preview disk write a36a26e
• Working draft of using figma styles as token, css, and scss references 6ec8412
• Merge branch 'main' into feature/compile-common-styles-variable 19462d7
• Building prototype of shared style loader d9d4d0e
• Pulling style node ids and refrences into token stack fcdaaea
• Merge branch 'main' into feature/styles-variable-reference 7170c7b
• Merge branch 'main' into feature/styles-variable-reference 99f06e5
• Documentation f9a847a

v0.14.1...v0.15.0

Support for custom integration path. Improved handling of commands.

This release introduces greater flexibility for custom integrations and general improvements to CLI handling.

Changes

• Added support for custom integration paths with the -i <path-to-integration> CLI argument.
  • Can be used with commands like fetch, start, build:app, etc.
  • Defaults to the integration directory if the argument isn't specified, ensuring backward compatibility.

Improvements

• Enhanced CLI command management:
  • Switched to yargs for improved CLI parsing.
  • Each command now has a dedicated handler file for better modularity.
• Improved the docs app build process:
  • Introduced a cleanup procedure that ensures only files present in the working directory are included in the final build.

Commits

• Merge pull request #165 from Convertiv/release/0.14.1 69eaf9c
• 0.14.1 changelog ea63b28
• 0.14.1 changelog 7f9f98a
• Resolved issue where app directory cleanup operation would remove the bundle file. 91d5857
• 0.14.1 9f73c6c
• Merge pull request #164 from Convertiv/feature/enable-custom-integration-path b8318a8
• Resolved the issue where "Handoff" menu item would appear executing the "eject:pages" command. f999029
• Now fully wiping project app path instead of sanitizing in order to remove any files that were deleted in the working path. e8d9a3d
• Now using yargs to manage commands. Introduced initial support for custom integration path. Updated css value normalization rounding. Misc improvements. a88b74a

v0.14.0...v0.14.1

MDX support & component documentation

[0.14.0] - 2024-09-26

This release enables creation of complex documentation pages, with storybook compatible formats. It has two main features - MDX support for adding react components to your documentation pages, and Snippet Previews - a system for using Handoff's existing html build process to create complex component previews.

Features

• MDX Support Support for MDX files in Handoff Documentation App
  • MDX Files Markdown files with react components
  • Any react component can be imported
  • Handoff exposes a number of custom react components that you can use in MDX pages to build
• Snippet Previews Create html snippets that will render as a preview with html, js, css and sass code below the preview
  • Place a file ending with .html in the /integration/snippets file or run the make:snippet [name] cli command
  • Handoff will detect the file and make it available to the SnippetPreview component
  • If Handoff detects a snippet file ending in js or scss, with the same name as the html file, Handoff will automatically use webpack and node-sass to build those files and make the compiled code available to html template.
  • If Handoff detects a css file with the same name, it will use that file for styling the preview
    • The html file is a Mustache template. At present there are two variables that can be used in these files
    • {{{style}}} a compressed inline style of either the compiled sass code or the raw css code provided.
    • {{{script}}} a compressed inline script of the output of the js compilation
  • In your MDX files you can display the snippets using SnippetPreview. This component accepts 2 - 3 properties, plus a react fragment as the children.
    • title accepts a string as the h2 title. Set to false or exclude if you don't want it
    • id is the name of your snippet {name}.html The snippet will load dynamical
    • height accepts a string to set the height of the preview. If you leave it off, Handoff will set the height of the preview automatically from the contents of the snippet.

<SnippetPreview title="A Testimonial Component" id="testimonial" height="725px">
  <p>Render a testimonial inline with other content.</p>
</SnippetPreview>

Additional CLI Commands

• build:snippets <name> will either rebuild all the snippets for you, or if an optional name is passed, will rebuild a single snippet
• rename:snippet <source> <destination> will rename a snippet and its js and scss files

Bugfixes

• Fixes a bug introduced in 0.13.0 where the integration preprocess would try to execute handlebars insertion even on non text files
• Fixes a bug in the foundation page templates where the markdown would be included outside of the section wrapper
• Fixes a bug in the start command where every doc page would be flagged as changed on watch.

Changes

• Lint 5255667
• Merge pull request #158 from Convertiv/release/0.14.0 09176ad
• build 629512d
• Merge branch 'main' into release/0.14.0 76fba18
• Release note tweaks b76ae2d
• Adding quick rename command ca3a0e2
• Improving snippet and integration watch 0412600
• Merge branch 'release/0.14.0' of github.com:Convertiv/handoff-app into release/0.14.0 1e8807e
• Fixing bug in foundations page when using markdonw 19e87a1
• Reflowing snippet transformer into its own transformer 7fdc676
• Update integration build to not perform any additional processing on files that are not CSS, SCSS or JSON files. 04b90fa
• Changing make:page to address the correct directory, and allow you to choose mdx or md file db24596
• Documentation and adding cli make:snippet e206ac8
• build 0b270e9
• Merge branch 'main' into feature/mdx-pages d8194f7
• Removing grid from code in components 0d2afc7
• Allowing snippet previews to be loaded async bd61393
• Allowing js compilation to run in dev mode and adding a full breakpoint toggle 5075fd8
• removing debugging 46e8687
• adding height setting to component preview and inlining styles 6ddbed6
• Changing mdx hero and code highlight behavior 3d4b3dc
• Fixing selected bug on nav 119241b
• buidl 07ccf37
• Fixing bug in parser b228111
• removing unneded preset env 8952162
• Improving code highlighting 90f3cdd
• Working on multicolumn code 5ccde27
• Improvements to code previews for mdx c0b2837
• improving code formating for mdx 4bf0747
• Creating abstract webpack transformer 05c5c9d
• Renaming preview 31bc383
• Update 69aa948
• Adding prototype inline css transpiler 688c441
• Fixing path issue e6a0331
• Fixing build problem 66d056a
• Small tweaks to mdx building a0268a6
• Improvements to MDX component preview context dd97345
• Building context handling f3adf57
• Removing mdx debugging f4a5429
• Fixing link bugs 7b6e1c0
• Merge branch 'feature/mdx-pages' of github.com:Convertiv/handoff-app into feature/mdx-pages e3b71d2
• Reducing the alert on page change b210ff5
• Filter out mdx from l1 l2 build efe6079
• Fixing lint issues 8b66620
• adding active trail in side menus 4c53ed1
• Tweaking responsive frame layout 4e072b5
• Adding mdx recursion 641126c
• Tuning third level pages 858aca1
• Adding breakpoint config, and updating component preview to support scrolling 8e7a974
• Fixing a lint error 94f81dc
• Adding breakpoint toggle 95abc97
• Implementing simple code switcher 026ff31
• Allowing custom blocks to document js 21db22a
• Updating component list tool 363ba78
• Adding component list cbd2a09
• Removing frontmatter plugin 8bf5470
• Build cleanup 22d89b2
• First end to end clean draft of MDX rendering with frontmatter 47b5263
• Adding some helpful debugging c23d822
• Building initial working draft of mdx reader 5dd8c3d
• Updating next to 14.2.4 3991dd3
• Initial draft of mdx page builder with layout e1a344f

v0.13.2...v0.14.0

DX Improvements - Improvements to integration dev

This release addresses several developer experience issues

Bugfixes

• When an integration compiles SASS code, the token injection was injecting components that had no instances in Figma. This causes integrations to fail if the designer had published a component, but not annotated them in Figma with the plugin. This release checks to see if the component has any instances in the Figma export and skips injection for components that are not yet annotated in Figma
• When running eject:integration or make:integration the default integration is exported, but it is not built. This causes a weird developer experience if you try to build:app without build:integration first. This patch adds the build:integration logic to execute after eject or make as well as before build:app to ensure that if an integration exists, the integration is built before building or serving the app
• If an an build:app fails while building the integration preview sass code the error messages were not clear, and didn't explain that you could use --debug to make them more clear. The error message has been improved and now alerts users to the --debug flag to help them debug their integration.
• When ejecting an integration with the --force flag, the force now triggers an overwrite rather than failing.

Commits

• Merge pull request #162 from Convertiv/release/0.13.2 9c401b2
• Updating changelog format a7c1c21
• Merge pull request #161 from Convertiv/bugfix/only-inject-components-with-instances f1ab71f
• Allowing force to force integration eject 597fda1
• Adding release notes for 0.13.2 4c98a51
• Adding help text to integration build failure eda9869
• When ejecting integration, if the fetch has been run, build the integration 857c67f
• Fix a bug where a component is published but not annotated and results in an empty component set and the integration still expects it ed35e10

v0.13.1...v0.13.2

Bug fixes when running build:app from global

[0.13.1] - 2024-09-17

This release fixes a couple of small path issues that affect running 0.13.0 from the global path.

Bugfixes

• Fix a path issue in the ComponentDesignTokens component that causes an error when run from the global namespace
• Prevents typescript compile errors with the react-scroll <Link> component

Commits

• Merge pull request #160 from Convertiv/release/0.13.1 3d289df
• Merge pull request #159 from Convertiv/bugfix/fix-path-issue d3cf6d8
• Changelog style tweaks 66a4a6f
• Adding release notes for 0.13.1 2a9289a
• Fix a path issue in the ComponentDesignTokens component 780e94d

v0.13.0...v0.13.1

Integrations rework

Changes

• Integration System Overhaul

  • Local Integrations Only: From this release onward, only local (ejected) integrations are supported. Handoff will automatically use the locally found integration.
    • Create a new local integration using handoff-app make:integration (or eject:integration which is still supported as an alias).
    • Since there is no need to specify integration information, integration options in handoff.config.json such as name and version are no longer recognized, making the integration section of handoff.config.json obsolete.
  • Introduction of integration.config.json:
    • This new file replaces the old figma.options section in handoff.config.json as well as all transformer related options within the legacy schemas as this file now contains all integration-specific details, including those options previously managed manually across different places.
    • This change leaves the figma.options section in handoff.config.json no longer supported and also means that all transformer options have been removed from legacy schemas (exportables), rendering this section no longer supported as well.
  • Documentation App Configuration Changes:
    • View of the component pages is now managed from within the integration(s), more specifically within the newly introduced view.config.json files, located in the respective component’s directory within the integration’s templates folder.
    • As a result the demo options section in all legacy schemas has now been removed and is no longer supported by Handoff.

• Legacy Schema Updates

  • Local Schema Requirement: Legacy schemas (exportables) are now only supported if ejected. The use_legacy_definitions option in handoff.config.json is no longer supported.
  • Automatic Schema Consumption: Handoff now automatically consumes all locally found schemas. The figma.definitions section in handoff.config.json is deprecated.

Upgrading from Earlier Releases

• For Projects with Local Integrations:
  1. Temporarily rename your current local integration directory.
  2. Create a new local integration using handoff-app make:integration.
  3. Transfer the contents from your old integration (excluding integration.config.json) to the new directory (merge).
  4. Update options in integration.config.json if needed.
  5. Remove the old integration directory.
• For Projects Without Local Integrations:
  1. Create a new local integration using handoff-app make:integration. This will use a Bootstrap 5.3 template.
  2. If previously using Bootstrap 5.2, update the integration contents accordingly. Bootstrap 5.2 template.
  3. Update integration.config.json options if necessary.
• For Projects with Legacy Schemas:
  1. Eject legacy schemas using handoff-app eject:exportables.
  2. If schemas are already ejected:
  • Verify that transformer options are in integration.config.json.
  • Verify that demo options are in view.config.json files of respective components.
  • Temporarily rename the directory containing legacy schemas.
  • Re-eject schemas and move custom schemas into the new exportables.
  • Optionally, update custom schemas to remove obsolete options.
• For Projects with handoff.config.json:
  1. Merge options from figma.options to the integration.config.json file as necessary.
  2. Optionally remove deprecated sections: figma.options, figma.definitions, figma, integration, and use_legacy_definitions.

Commits

• [HOTFIX] Removed handoff.config.json file. 5af64b3
• Merge pull request #157 from Convertiv/release/0.13.0 008f10d
• 0.13.0 changelog 2267258
• 0.13.0 763d8b7
• Merge pull request #156 from Convertiv/feature/integration-rework 58452e3
• Integration rework. 6f7e55c

v0.12.2...v0.13.0

Removed bundle build process from fetch and integration build steps

Changes

• Integration bundle used for the docs app is no longer being built during fetch and build:integration steps.

Commits

• Merge pull request #155 from Convertiv/release/0.12.2 f1cf45d
• 0.12.2 changelog a8bca65
• 0.12.2 3e23a3e
• Merge pull request #154 from Convertiv/feature/separate-client-files-build-from-previews-build 95e0177
• Separated previews build from the client preview styles build. Client preview styles are now built when the docs app is being ran or built. 1a390b7

v0.12.1...v0.12.2

Improved support of Handoff Figma Plugin options

Changes

• Added support for the cssRootClass property in the Handoff Figma plugin metadata.

Improvements

• Enhanced handling of unnamed parts, resolving visibility issues in the documentation previews.

Commits

• Merge pull request #149 from Convertiv/changelog/0.12.1 f6c7596
• Merge pull request #148 from Convertiv/feature/improve-handoff-figma-plugin-options-support f118f87
• 0.12.1 changelog ed6f0e9
• 0.12.1 caf4a3b
• Added support for cssRootClass plugin metadata property. Improved handling of the parts without a name. 1ca56da

v0.12.0...v0.12.1

Interoperability, quality of life and security improvements

Changes

• All environment variables now contain the HANDOFF_ prefix.
  • After updating to version 0.12.0, all environment variables need to be updated to reflect the new variable names:
    • FIGMA_BASE_URL -> HANDOFF_FIGMA_BASE_URL
    • DEV_ACCESS_TOKEN -> HANDOFF_DEV_ACCESS_TOKEN
    • FIGMA_PROJECT_ID -> HANDOFF_FIGMA_PROJECT_ID
    • OUTPUT_DIR -> HANDOFF_OUTPUT_DIR
    • SITES_DIR -> HANDOFF_SITES_DIR
    • USE_HANDOFF_PLUGIN -> HANDOFF_USE_HANDOFF_PLUGIN
    • CREATE_ASSETS_ZIP_FILES -> HANDOFF_CREATE_ASSETS_ZIP_FILES
• The default integration is no longer pre-defined.
  • Bootstrap 5.3 is no longer set as the default integration.
  • To continue using the Bootstrap 5.3 integration in your project, ensure the configuration is ejected (handoff-app eject:config) and update it by setting the integration property to {name: 'bootstrap', version: '5.3'}.
• All default options specified in the configuration that are used by the exporter and transformer have been removed.
  • To continue using the defaults present before the 0.12.0 release, ensure the configuration is ejected (handoff-app eject:config) and update the figma.options property to the previous default value.
• The logo placeholder copy showing spacing and orientation has been removed allowing users to add custom content via Markdown.

Improvements

• Handoff now appends to existing .env files instead of overriding them if the file already exists.
• Introduced normalization of numeric values in .css and .scss files, along with correct indentations. This ensures that the generated files are valid for any local linting tools your project might use.
• Configuration ejected by the handoff-app eject:integration command is now the same as the one ejected by the handoff-app eject:config command.
• Handoff no longer uses the iframe-resizer package.
• Resolved potential security issues by updating to newer versions of the axios and next packages.

Commits

• Merge pull request #147 from Convertiv/release/0.12.0 9ebda1f
• Merge pull request #146 from Convertiv/changelog/0.12.0 bc27f88
• Changelog for 0.12.0. 9369ead
• Merge pull request #145 from Convertiv/ux/logo-improvements 3a519e7
• Removing debugging 05e4ead
• Removing unneded skip 7bc18c0
• Proposing change to config init when running next commands without first fetching e12083b
• Removing logo sizing defaults 89815bd
• Clean up of project id c90e805
• Removing logo section 75ece0f
• Merge pull request #144 from Convertiv/feature/consolidate-ejected-configs e949876
• Updated ejectIntegration to eject the same local configuration as the ejectConfig does. 8f66045
• Merge pull request #142 from Convertiv/feature/remove-default-options ec43417
• Merge pull request #143 from Convertiv/feature/normalize-css-number-values 2280a23
• Fixed indentations for foundation (colors, effects, typography) css files. 318e790
• Introduced css number value normalization. f7e7751
• Removed default options. Removed hardcoded cssRootClass "button" to "btn" replacement rule. Removed all specified cssRootClass properties from legacy exportable schemas. 3ad38a6
• Merge pull request #139 from Convertiv/ops/next-14-update 7506970
• Requirements update. 119717c
• Removed all iframe-resizer references. d1506d2
• Build app.js 1efba3a
• Removing iframe resizer 80059d6
• Security patches - Axios and Nextjs 20a9857
• 0.12.0 5ec1d47
• Merge pull request #141 from Convertiv/feature/disable-default-integration b45da3d
• Disabled default bootstrap 5.3 integration. No integration is generated by default. 3b260e9
• Merge pull request #140 from Convertiv/feature/append-to-env-if-already-exists 59b3ffd
• Added HANDOFF_ prefix to all handoff env variables. c3a3fe8
• Now appending to .env file if the file already exists. 274f2f6

v0.11.0...v0.12.0

Default support for plugin flow. Fixes and quality of life improvements.

Bugfixes

• Issue that was causing the handoff-app start command to malfunction has been fixed.
• The Reference error: name is not defined issue that occurred when a component specified in the schema was missing from the Figma file has been resolved. The name reference has been replaced with a correct identifier.
• Icon sizes have been corrected.

Changes

• Integration with Handoff Figma Plugin: This release now seamlessly integrates with the Handoff Figma Plugin by default.
  • As a result, the local schema will not be used by default.
  • If you prefer to continue using local schemas, set USE_HANDOFF_PLUGIN="FALSE" in your .env file.
• Internal module working directory has been relocated from ./src to ./.handoff

Commits

• Merge pull request #138 from Convertiv/release/0.11.0 fb7eb70
• Changelog for 0.11.0. ab45341
• Merge pull request #137 from Convertiv/bugfix/icon-size 714fef9
• Merge pull request #136 from Convertiv/feature/handoff-figma-plugin-prep a90046b
• Build. 29e48d8
• Fixed "Reference error: name is not defined". 82d671d
• Removed leftover commments. 32149a1
• Fixing icon size issues bbc6dad
• Added more control to the configuration file. Implemented option to choose the directory name of the docs app site. 14b2237
• Resolved webpack @handoff alias issue. 57b556d
• 0.11.0 20122dc
• Removed "classnames" lib. Moved docs app working dir(s) to a new .handoff dir in the root. Introduced @handoff alias to help move the docs app working dir(s). 993afba

v0.10.0...v0.11.0