Arwes Versions Save

Thank you to all the collaborators who contributed to this release and all the support 👽 💙 !

@arwes/theme

• Update default app theme color palette.

@arwes/react-frames

• Add default z-index of -1 to FrameSVG component so it behaves as background.

Thank you to all the collaborators who contributed to this release and all the support 👽 💙 !

@arwes/theme

• Update color palette generator to remain the same for dark and light themes.
• Add app theme types.

@arwes/core

• Update global styles baseline.

@arwes/bleeps

• Disable bleeps if no AudioContext is available.

@arwes/react-bleeps

• Fix <BleepsProvider/> types.

@arwes/react

• Fix NPM package dependency versions.

Thank you @TheNetAdmin and to all the collaborators who contributed to this release and all the support 👽 💙 !

• The project packages had an API overhaul with lots of breaking changes and optimizations. This version should be taken as a new version entirely.
• Previous version 1.0.0-alpha.19 website was moved to version1-breakpoint2.arwes.dev and playground.version1-breakpoint2.arwes.dev.
• The website was updated with the use of the new framework tooling.
• The playground application can be used for examples and references until a proper API reference is built.
• The performance application can be used to test some of the most intensively used functionalities.

Thank you @Dessix and to all the collaborators who contributed to this release and all the support :alien: :blue_heart: !

Packages

@arwes/design

• Added the following design theme multipliers:
  • fontScale with factor value of 1 representing a global font scale.
  • transitionDuration with factor value of 100 representing milliseconds.
• Fixed typography setting being automatically removed when defined by theme.

Breaking Changes

• Design theme multiplier space factor value was changed from 8 to 5 pixels.
• Renamed the following design theme multipliers:
  • shadow.blur to shadowBlur.
  • shadow.spread to shadowSpread.

@arwes/animation

Breaking Changes

• "Animate Hooks" were renamed to "Animate Events". The animator animate hooks were renamed from format useAnimate[EVENT] to onAnimate[EVENT]. You can check the documentation on @arwes/animation.
  • useAnimateMount to onAnimateMount.
  • useAnimateEntering to onAnimateEntering.
  • useAnimateEntered to onAnimateEntered.
  • useAnimateExiting to onAnimateExiting.
  • useAnimateExited to onAnimateExited.
  • useAnimateUnmount to onAnimateUnmount.

@arwes/sounds

• Fixed loop bleeps not playing properly when browser audio is locked.

@arwes/core

• Added Animated component as part of the research to create a new "primitive component" to create single HTML element animations along the animation system. See #106.
  • The Animated component was used in some components internally to create animations as it is in testing for now.
  • The component was created in @arwes/core since it depends on animejs.
  • This component is internal for now as more testing is required.
• Added Frame component to build container-like components based on configurable polylines and polygon shapes with default animations.
  • Any number of polylines and polygon shapes can be defined under available dynamic frame space with the color palette provided.
  • SVG paths are used to draw the frame lines and forms and the browser ResizeObserver API is used to resize the shape on changes.
  • The point position for the SVG paths can be set as relative to the available frame space. For example: A SVG path point can be ['100% - 10', 15], where "x" equals 100% of available width minus 10 pixels, and "y" equals 15 pixels. This is a simple new way to create paths as the framework designs demand. More testing is required.
  • Polylines will be animated with a SVG motion path animation.
  • Shapes will be animated with an opacity highlight.
  • It will used only internally to adquire more experience and a more robust API is defined.
• Added FrameBox component.
• Added FrameCorners component.
• Added FramePentagon component.
• Added FrameHexagon component.
• Added FrameLines component.
• Updated FrameUnderline component with new Frame component.

• Refactored Button component to support any kind of frame component and new highlight animation.
• Fixed global styles for lists.
• Updated global styles for general decoration elements.
• Added internal utility to expand CSS box value as margin/padding CSS values.
• Added internal utility to setup bleeps on animator events on components.

Applications

Website

• Added the @arwes/core StylesBaseline component with default settings for global HTML styles.
• Added contributing basic documentation for the project packages and the applications.
• Updated roadmap with a simple and more readable layout before the new website is developed.

Project

The focus of this project release was to create a generic API for frames or container components and new APIs to simplify the animation and bleeps component setup.

The priority for the project development right now is the main visual and utility components for version 1.0. Once the pieces are built, integration tools can be developed.

Thank you to all the collaborators who contributed to this release and all the support :alien: :heart: !

Packages

@arwes/design

• New utility createThemePaletteBasic to create custom theme palette "basic colors".
• New utility createThemePaletteElevation to create custom theme palette "elevation colors".
• New utility updateColorContrastLuminance to get a light color darker or a dark color ligher based on a tone offset.
• New utility createThemeFactorMultiplier to create custom theme factor multipliers.

Breaking Changes:

• Theme typography utilities were removed. The original design included configurable global and scoped application typography styles which were basically implemented using simpler selectors.
• Theme palette "basic colors" were redefined from main, dark, light, and contrast colors to main, 3 darker variations, and 3 lighter variations.
• Theme palette colors info and warn were removed to simplify the setup. (The palette can receive any extra configurations if needed, but they are not going to be by default.)
• The default design palette (it is not the default palette of the core components) will look like:

• Theme setting contrastOffset was removed since basic colors are not going to use it.

See @arwes/design docs.

@arwes/animation

• New animator setting combine: boolean = false to allow an animator component to combine the duration or all its direct children into its own.
• The component Animator was refactored to be about 20% faster (tested in development environment). There were many experiments and tests with this component to make it consirable faster, but it was demanding too much time and since there are many use cases to be analysed, it is going to be tracked and considered in the future in #98.

See @arwes/animation docs.

@arwes/sounds

Breaking Changes:

Bleeps will not be shared by component. Instead they will be shared globally. See #99 and #101.

• The <BleepsProvider /> component will now receive the sound settings like:
  • From audio to audioSettings.
  • From players to playersSettings.
  • The bleeps settings will be received as bleepsSettings in the provider, instead of the HOC withBleeps(bleepsSettings)(Component).
• HOC withBleeps was removed to set the bleeps settings in the provider.
• The components can consume bleeps with the useBleeps hook. It will work the same way as the HOC withBleeps injected bleeps. See BleepsProvider sandbox.

See @arwes/sounds docs.

@arwes/core

First batch of components:

• They are in testing/polishing state. Not ready for production yet.
• Since their API may change and the documentation process takes a lot of time, the idea is to create an automated API documentation generation tool (as in the previous version). Most likely, it will be done after most or all of the components of the first version are ready.

Check them out in the playground:

• StylesBaseline
• Text
• List
• Blockquote
• Table
• CodeBlock
• LoadingBars
• Figure
• FrameUnderline
• Button
• Card

See @arwes/core docs.

Project

There were a lot of reviews, drafts, and experiments to define the new visual design patterns and the new components sounds.

The core visual design system may have more changes along the development to make it as accessible, extensible, and fast as possible, following more Cyberprep aesthetics instead of Cyberpunk. Many of the core components are made to fit/work for plenty of the "mainstream" futuristic sci-fi productions design guidelines.

The application sound starter package may not have polished sounds in the final release. It will be encouraged for the consumers of the project to buy and adapt external sounds for their own productions.

Thank you to all the collaborators who contributed to this release :alien: :heart: !

Packages

@arwes/design

Theming and styling tools with focus in Emotion in React.

CSS-in-JS agnostic and inspired by Material UI.

Project

New project logo:

The new UI/UX project design is under definition and development.

Thank you @jdpnielsen, @njwest, and all the collaborators who contributed to this release :alien: :heart: !

Packages

• The project packages source code has been migrated to TypeScript.
• The packages are now distributed as UMD format. CommonJS is already supported

@arwes/animation

The animation tools have been migrated to TypeScript with type documentation.

@arwes/sounds

Define, manage, and control interactive sound effects using Howler in React.

Based on the project UI/UX guidelines, the sounds tools can be used for application interface sounds management. Futuristic science fiction user interfaces usually execute short sounds such as beeps and bleeps on user events, application events, or animation state transitions. These tools are not intended for sounds with long durations such as music songs.

Project

• The documentation for the latest project version is now available in the website arwes.dev. This is a work-in-progress. The website will not have the new components until they are completed.
• The previous version of the project was moved from arwes.dev to version1-breakpoint1.arwes.dev.
• The packages components playground is now available in the website playground.arwes.dev.

The new UI/UX project design is under definition and development and new features are on the way.

New Arwes component system APIs to manage complex animated UIs as tree of nodes using a flow of enter/exit states. Nested, in staggering, as sequences, custom functions and more. 👽