Releases: arwes/arwes
v1.0.0-alpha.23
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
toFrameSVG
component so it behaves as background.
v1.0.0-alpha.22
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.
v1.0.0-alpha.21
@arwes/react
- Fix NPM package dependency versions.
v1.0.0-alpha.20
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.
v1.0.0-alpha.19
Thank you @Dessix and to all the collaborators who contributed to this release and all the support 👽 💙 !
Packages
@arwes/design
- Added the following design theme multipliers:
fontScale
with factor value of1
representing a global font scale.transitionDuration
with factor value of100
representing milliseconds.
- Fixed
typography
setting being automatically removed when defined by theme.
Breaking Changes
- Design theme multiplier
space
factor value was changed from8
to5
pixels. - Renamed the following design theme multipliers:
shadow.blur
toshadowBlur
.shadow.spread
toshadowSpread
.
@arwes/animation
Breaking Changes
- "Animate Hooks" were renamed to "Animate Events". The animator animate hooks were renamed from format
useAnimate[EVENT]
toonAnimate[EVENT]
. You can check the documentation on@arwes/animation
.useAnimateMount
toonAnimateMount
.useAnimateEntering
toonAnimateEntering
.useAnimateEntered
toonAnimateEntered
.useAnimateExiting
toonAnimateExiting
.useAnimateExited
toonAnimateExited
.useAnimateUnmount
toonAnimateUnmount
.
@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.
- The
- 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 newFrame
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.
v1.0.0-alpha.18
Thank you to all the collaborators who contributed to this release and all the support 👽 ❤️ !
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
, andcontrast
colors tomain
, 3 darker variations, and 3 lighter variations. - Theme palette colors
info
andwarn
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.
@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
toaudioSettings
. - From
players
toplayersSettings
. - The bleeps settings will be received as
bleepsSettings
in the provider, instead of the HOCwithBleeps(bleepsSettings)(Component)
.
- From
- 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 HOCwithBleeps
injectedbleeps
. 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:
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.
v1.0.0-alpha.17
Thank you to all the collaborators who contributed to this release 👽 ❤️ !
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.
v1.0.0-alpha.16
Thank you @jdpnielsen, @njwest, and all the collaborators who contributed to this release 👽 ❤️ !
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.
v1.0.0-alpha.15
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. 👽
v1.0.0-alpha.5
[chore] release v1.0.0-alpha.5