React-Arwes v1.0.0-alpha.19: Futuristic Sci-Fi and Cyberpunk Graphical User Interface Framework for Web Apps

icon
Latest Release: v1.0.0-alpha.19

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.

arwes-v1 0 0-alpha 19-preview

  • 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.

Source code(tar.gz)
Source code(zip)
Arwes

Futuristic Sci-Fi and Cyberpunk Graphical User Interface Framework for Web Apps


Arwes is a web framework to build user interfaces for web applications based on futuristic science fiction and cyberpunk styles, animations, and sound effects. The concepts behind are opinionated and try to inspire advanced space technology and alien influence. It is built on top of React, JSS, Anime, and Howler.

The project has a working version with the package arwes and the documentation with the website arwes.dev. This is an alpha release. Modules and components are being tested and their API may change. Check out the source code at version1-breakpoint1 branch where you can find the components and the website.

Currently, the development is at master branch with the packages @arwes/[package]. They are not a working version yet, and they have major breaking changes with the arwes package. The website will be worked on once the new version is released in the arwes.dev repository. See Roadmap for more details.

Packages

Functional

The main functionalities which power the UI component system.

@arwes/design

status downloads

Styling tools using JSS with React components.

@arwes/animation

status downloads

Assemble and disassemble user interfaces using animations from React components.

@arwes/sounds

status downloads

Define, manage and control interactive sound effects from React components.

@arwes/platform

status downloads

Resource loading, responsive control, and general browser API tools.

@arwes/core

status downloads

Core UI React components.

Design

Using the core functionalities and based on the guidelines, these are design system or design component implementations.

@arwes/arwes

status downloads

Arwes design system React components.

Guidelines

Check out Arwes Guidelines for detailed information about the concepts and inspiration projects behind the framework.

Documentation

arwes.dev is for version 1.0.0-alpha.5.

docs is a work in progress of the latest version.

Need help?

Open a GitHub issue or let's chat on Discord.

Review Frequently Asked Questions.

Also, read the project code of conduct.

Showcase

SoulExtract.com

SoulExtract.com

Alternative Rock injected with electronic and cinematic elements. Proud member of the FiXT roster.

Repository: soulextract/soulextract.com

RomelPerez.com

RomelPerez.com

Romel Pérez's personal website.

Repository: romelperez/romelperez.com

Roadmap

Check out Arwes Roadmap for the project planning.

See changelog.

Want to contribute?

See how to contribute. All contributions of any kind are welcome!

Review the project boards.

Contributors

Romel Pérez
Romel Pérez

? ? ? ?
Nick West 眨眼龙
Nick West 眨眼龙

? ?

This project follows the all-contributors specification.

Comments

  • Fix LoadingBars determinate animations
    Fix LoadingBars determinate animations

    Jun 24, 2021

    RELATES TO #90


    When LoadingBars component animator mounts/unmounts, sometimes the component gets invisible or it does not appear at all if determinate is enabled. It usually happens when the component is updated in the playground sandbox.

    • [ ] Fix component unmount/mount animator updates inconsistencies on playground "determinate" sandbox re-updates.
    type: bug package: core priority: low 
    Reply
  • Add Card as link support
    Add Card as link support

    Jun 24, 2021

    RELATES TO #91 #131


    The Card component creates a block HTML element container that needs events or options/buttons to handle actions. There is no support to create a card as a link HTML a element.

    • [ ] Add support to allow the component to be a link if a URL is provided.
    • [ ] Add support for custom link components such as react-router, next.js router, or gatsby.js router.
    type: feature package: core priority: low 
    Reply
  • Update Table component animations and accessibility features
    Update Table component animations and accessibility features

    Jun 30, 2021

    RELATED TO #88


    The Table component has some issues in performance and accessibility when animations are executed.

    • [ ] Update animations to use CSS opacity and transforms as much as possible to prevent extra layout changes.
    • [ ] Review transition animations performance optimizations.
    • [ ] Add row/cell update animation transitions.
    • [ ] Fix overflow hidden layout resize on transition animations.
    • [ ] Row hover should not occur on animation flow different from entered.
    • [ ] Allow dynamic data update with transitions support.
    type: bug type: enhancement complexity: medium type: refactor package: core priority: low 
    Reply
  • Refactor Text transition animation functionality
    Refactor Text transition animation functionality

    Jun 30, 2021

    RELATES TO #85


    The Text component uses useLayoutEffect hook to check the text data for the transition animations. Though it still works for server-side rendering, React compilation throws an error about it.

    • [ ] Refactor to not use useLayoutEffect functionalities since this component will be used for server-side rendering.
    complexity: high type: refactor package: core priority: low 
    Reply
  • Add Select component
    Add Select component

    Jul 6, 2021

    Add a selection of options components with support for browser options and custom options panel.

    • [ ] Add Select component.
      • [ ] Allow custom content.
    • [ ] Support browser default options panel.
    • [ ] Support custom options panel.
      • [ ] Allow custom option content.
      • [ ] Support basic layout settings.
    • [ ] Allow multiple option.
    • [ ] Accessibility.
      • [ ] Autofocus on transitions entered if enabled.
      • [ ] Tabindex on readonly,
      • [ ] Select on mousedown.
      • [ ] Select with keyboard arrows.
      • [ ] Select with keyboard space/enter.
      • [ ] Typeahead selection.
    • [ ] Add transition animations
    • [ ] Add transition bleep.
    • [ ] Add change bleep.
    type: feature package: core priority: high 
    Reply
  • Add Click-handler to Card Image
    Add Click-handler to Card Image

    Jan 14, 2022

    The Card component has an image as a property. It'll be useful if this image property could receive a click handler, so the image becomes clickable separately from the other card content (p.ex to show the picture in fullscreen upon clicking)

    • [ ] Add ClickHandler to Card image
    type: feature package: core 
    Reply
  • Customizing css for production environment
    Customizing css for production environment

    Jul 10, 2018

    Subject of the issue

    I'm including arwes in my project, and it works great in development environment. I'd like to customize some css, so I added a couple of rules like:

    div[class*='ArwesSounds(Footer)-children'] {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    

    While it works in development environment, in production these class names are replaced by c0124 and other similar names. What can I do to customize the css in production? Or to prevent arwes from changing class names?

    Your environment

    Occurs regardless of environment.

    Steps to reproduce

    Bundle arwes via webpack and usemode: 'production'.

    Expected behaviour

    N/A

    Actual behaviour

    N/A

    type: question 
    Reply
  • Issue when using Gatsby and MDX
    Issue when using Gatsby and MDX

    Sep 27, 2021

    Production build failed when using GatsbyJS and MDX

    Hello guys, thanks for this awesome library, currently I'm trying to use @arwes with gatsby and MDX plugin, the project runs in debug mode successfully, but when I add mdx file and try to build in production mode I will get this error, It tells that the problem is related to Animator.component.js but I couldn't find the actual cause of the problem

    To reproduce

    Steps to reproduce the behavior:

    1. run 'npm run build'

    Additional context

     ERROR 
    
    Page data from page-data.json for the failed page "/educations/kharazmi-en/": {
      "componentChunkName": "component---src-pages-mdx-slug-jsx",
      "path": "/educations/kharazmi-en/",
      "result": {
        "pageContext": {
          "id": "71aaed88-e6ec-5433-bc88-cad47e4d2d54",
          "slug": "educations/kharazmi.en",
          "__params": {
            "slug": "educations"
          }
        }
      },
      "staticQueryHashes": []
    }
    
    failed Building static HTML for pages - 0.584s
    
     ERROR #95313 
    
    Building static HTML failed for path "/educations/kharazmi-en/"
    
    See our docs page for more info on this error: https://gatsby.dev/debug-html
    
    
      36 |     enter: 100,
      37 |     exit: 100,
    > 38 |     stagger: 25,
         | ^
      39 |     delay: 0,
      40 |     offset: 0
      41 | });
    
    
      WebpackError: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&a
      rgs[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
      
      - Animator.component.js:38 
        [koliber]/[@arwes]/animation/lib/Animator/Animator.component.js:38:1
      
      - Animator.component.js:34 
        [koliber]/[@arwes]/animation/lib/Animator/Animator.component.js:34:1
      
      - Animator.component.js:45 
        [koliber]/[@arwes]/animation/lib/Animator/Animator.component.js:45:1
      
      - static-entry.js:299 
        koliber/.cache/static-entry.js:299:22
      
      - Animator.component.js:151 
        [koliber]/[@arwes]/animation/lib/Animator/Animator.component.js:151:1
      
    
    not finished Caching HTML renderer compilation - 0.666s
    
    type: bug 
    Reply
  • Type Declarations
    Type Declarations

    Aug 28, 2020

    Create type declarations module and install with npm install @types/arwes

    type: feature type: request 
    Reply
  • Typo in Docs/index.md
    Typo in Docs/index.md

    Jun 4, 2018

    Fixed by #3

    Line 35 is missing the word assets:

    "Images and sounds are not provided, if you want to use the implemented in the docs"

    pull request url

    type: bug 
    Reply
  • all <li> tags
    all
  • tags "polutted" with '≫' globally
  • Mar 30, 2021

    Describe the bug

    when I render arwes, all <li> nodes in the document get an li:::before node with content '≫'.

    To reproduce

    render arwes in a DOM tree containing lists

    Expected behavior

    don't affect DOM elements outside arwes

    • Packages version: 1.0.0-alpha.18
    • Node.js 15.11 NPM 7.7.6
    • OS: windows

    Testing environment

    chrome latest on windows

    type: bug complexity: low package: core 
    Reply
  • Newly created list elements do not appear
    Newly created list elements do not appear

    Aug 1, 2021

    Describe the bug

    When mapping through list elements, and the list changes after the initial render, the list items are not rendered properly (especially when wrapped inside the Text component)

    To reproduce

    Go to the sandbox and paste following code:

    const FONT_FAMILY_ROOT = '"Titillium Web", sans-serif';
    const SOUND_TYPE_URL = '/assets/sounds/type.mp3';
    
    const audioSettings = { common: { volume: 0.25 } };
    const playersSettings = { type: { src: [SOUND_TYPE_URL], loop: true } };
    const bleepsSettings = { type: { player: 'type' } };
    const animatorGeneral = { duration: { enter: 150, exit: 150, stagger: 40 } };
    
    const Sandbox = () => {
      const [activate, setActivate] = React.useState(true);
    
      
      const [texts, setTexts] = React.useState(["foo", "bar"]);
      React.useEffect(() => {
        const timeout = setTimeout(() => setTexts([...texts, "another Text"]), 1000);
        return () => clearTimeout(timeout);
      }, [texts]);
    
      return (
        <ArwesThemeProvider>
          <BleepsProvider
            audioSettings={audioSettings}
            playersSettings={playersSettings}
            bleepsSettings={bleepsSettings}
          >
            <StylesBaseline styles={{
              body: { fontFamily: FONT_FAMILY_ROOT }
            }} />
            <AnimatorGeneralProvider animator={animatorGeneral}>
              <Animator animator={{ activate }}>
    
                <List>
                  <li><Text>Lorem ipsum lov sit amet.</Text></li>
                  <li><Text>Lorem ipsum lov sit amet.</Text></li>
                  { texts.map((text, index) => (
                    <li
                      key={index}
                    >
                       <Text>
                         {text}
                       </Text>
                    </li>
                    )) }
                </List>
    
    
              </Animator>
            </AnimatorGeneralProvider>
          </BleepsProvider>
        </ArwesThemeProvider>
      );
    };
    
    render(<Sandbox />);
    
    

    Expected behavior

    List items appear and are rendered correctly

    Development environment

    Sandbox ( v. 1.0.0-alpha.19 )

    Additional Info

    One can see that the icons are created (hovering over the not-rendered list elements yields a text-cursor) You can also see the elements with the browser development tools

    type: bug package: animator 
    Reply