arwes / arwes Goto Github PK

Hi. I loved this framework since i saw it, but it had me a little disapointed that there was no direct way to add custom layers for the components. One option was customize the default layers, but this apply to all the elements that use theme, not just the ones that you specify with the 'layer' option.
Anyway, it can be done editing the files of the 'lib' folder, and its relatively easy. This is how i did it.
First go to your Arwes module folder inside node_modules. The files that are needed to edit are all in the lib folder.

Inside lib, open the file at tools/createTheme/theme.js. You will see on the exports.default an object with the default properties for every option for the elements. In the property 'color' and 'background' are all the posible layers and their default colors, generated by the functions declarated on top. So here i added four more layers named 'extraOne', 'extraTwo', etc; all with the same color because i pretended to edit them later on the app. It ended like this

  {
    color: {
      primary: generateColor('#26dafd'),
      secondary: generateColor('#df9527'),
      header: generateColor('#a1ecfb'),
      control: generateColor('#acf9fb'),
      success: generateColor('#00ff00'),
      alert: generateColor('#ff0000'),
      disabled: generateColor('#999999'),
      extraOne: generateColor('#fc0086'),
      extraTwo: generateColor('#fc0086'),
      extraThree: generateColor('#fc0086'),
      extraFour: generateColor('#fc0086')
    },

    background: {
      primary: generateBackground('#021114'),
      secondary: generateBackground('#180f02'),
      header: generateBackground('#032026'),
      control: generateBackground('#041e1f'),
      success: generateBackground('#081402'),
      alert: generateBackground('#140202'),
      disabled: generateBackground('#141414'),
      extraOne: generateBackground('#1B0711'),
      extraTwo: generateBackground('#1B0711'),
      extraThree: generateBackground('#1B0711'),
      extraFour: generateBackground('#1B0711')
    }
  }

Is important to add both the color and background property with the same name, so they are linked. If not you will get an error.
Now, to be able to use this on the elements, you need to edit every file that you want to use with these. In my case, every element that have the 'layer' option, wich are: Button, Frame, Highlight, Image, Line, Loading and Words
Every element has a file on his folder named after his name, like Button.js, Frame.js, etc.
On that files, find a line where the 'layer' option is declared, it looks like this

     layer: _propTypes2.default.oneOf(['primary', 'secondary', 'header', 'control', 'success', 'alert', 'disabled']),

Now add the new layers

     layer: _propTypes2.default.oneOf(['primary', 'secondary', 'header', 'control', 'success', 'alert', 'disabled', 'extraOne', 'extraTwo', 'extraThree', 'extraFour']),

And thats all. Now in your code you can pass the layer option in an element like the default ones.

    <Button animate layer='extraOne'></Button>

And you can edit the colors as well

        const myTheme = {
          color: {
            extraOne: {
              base: '#be26fc',
              dark: '#8e1bbd',
              light: '#c95bf6'
            },
            extraTwo: {
              base: '#fc26fa',
              dark: '#a818a7',
              light: '#f458f2'
            }
          }
        };

        const App = () => (
          <ThemeProvider theme={createTheme(myTheme)}>
            <Arwes>
              <div style={{ padding: 20 }}>
                <Heading layer='extraTwo'>My App</Heading>
              </div>
            </Arwes>
          </ThemeProvider>
        );

I hope someone find this usefull, it is for me. And if there is a better way to do it, please tell me.

Warning using the any of the component
Warning: [JSS] Could not find the referenced rule hover in Component, Themed, Dynamic.

It is a warning I can see in the console that doesn't prevent the rendering, but it's quite annoying and I fear it creates other problems. I imagine it's a change within react.

The problem happens with arwes alpha5 as in alpha14.
The version are the last default versions of react.
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"

node v12.16.1

To reproduce, just try to render any of the content components such as Project or Frame.

There are other deprecated functions, is there any hope to have the project updated?

Thanks

For version 1.0.0-alpha.8, the linter ESLint was set up with standardjs and now most components in the package arwes got broken. These linting errors should be fixed.

• Remove linting ignore in .eslintignore for the arwes package components.
• Fix the linting issues without altering their components functionality.

Most if not all components in the package are broken due to the refactor. There is no need to test/fix them since there is a plan to reuse their code but not fix them.

Don't use the standard --fix command to fix the issues, since the ESLint has custom setup and doesn't match the default standard settings.

add modal and input components to arwes framework

hi, i was recently making a project using the arwes framework and i created some input and modal components that i think could be added to the main framework with a bit of refactoring (which i'm happy to make and pull in). i think these additions could help turn arwes into a more full-feature UI framework, suitable for webapps.

i've attached a picture of the components in action below. are you interested in these additions?

the project (star wars startrader application 🤓) can be found here: https://startrader-app.herokuapp.com/
with the frontend source code here: https://github.com/bpmutter/startrader

if you don't want to add to the core package here, i'll go ahead and make some separate arwes-modal / arwes-forms packages.

cheers,
Ben Perlmutter

p.s. tambien estoy basado en Medellin 🇨🇴

The link at page

https://arwes.dev/docs/design-system

for docs regarding creating styles is broken. It points to:

https://github.com/arwes/arwes/blob/master/src/tools/createTheme/theme.js

Since the structures and functionalities are still under construction, this task is blocked and subject to change.

I noticed you can for example change the primary color passing the theme object:

const myTheme = {
  animTime: 250,
    color: {
      primary: {
        base: '#be26fc',
        dark: '#8e1bbd',
        light: '#c95bf6'
    },
}

Is that possible to change the color for the animation provided by animate props of the Arwes container (the raising balls)? I noticed it get the primary base color, so if I changed it to a dark color, it will also affect the other areas.

Im wondering if there is something like:

const myTheme = {
    animated: {
    color: 'green'
   }
}

Form Design Proposal

Visual Design

800px by 600px view:

JSX Design

<Frame>
  <Form>
    <FormTitle>FORM</FormTitle>

    <FormGroup>
        <Label>PLANET</Label>
        <TextInput />
    </FormGroup>

    <FormGroup>
        <Label>SYSTEM</Label>
        <TextInput />
    </FormGroup>

    <FormGroup>
        <Label>GALAXY</Label>
        <TextInput />
    </FormGroup>

    <FormGroup>
        <Label>DIMENSION</Label>
        <TextInput />
    </FormGroup>

    <FormButtons>
      <Button onClick={ [some submit code here] }>
        Submit 
      </Button> 
      <Button onClick={ [some redirect to previous route code here]}>
        Cancel
      </Button>
    </FormButtons>
  </Form>
</Frame>

Component style overview

• <FormTitle> is basically a Header but centered
• <FormGroup> is parent of Labels + Inputs, so Label + Inputs fall inline-block
• <Label> has the styles of the Intergalactic Link, highlighted when its sibling <TextInput/> is active
• <Label> also ends with a : by default, and all Labels are justifed to the right, with all : (colons) aligned
• When active, <TextInput/> has the blinking text entry light from the <Words animate show={anim.entered}> animation
• <FormButtons> contains inline-block submit/cancel/etc s, is a centered div at end of form

Pixel Grid View

DEPENDS ON #64 #65

Create the main index page for the project website.

To configure animation components in a React application tree, we need to create an animation settings provider.

The provider should have the following features:

• Create a React provider component named ´AnimationProvider´.
• It can receive the following props:
  • animate as boolean.
  • duration as object or number.
    • It should create an empty object and extend it if an object was provided.
    • It should create an empty object and set the enter and exit properties if a number was provided.
    • The duration object should have the structure: { enter, exit }, all as numbers.
• The React provider should provide the props animate and duration as an object.
• It should not provide props not configured.
• It should extend the settings of another provider if found up in the tree.
• Create useAnimation to read animation context.

The specification is written in Animation System.

Subject of the issue

Warning: Prop `className` did not match. Server: "Arwes-background-0-1-812" Client: "Arwes-background-0-1-2"
    in div (created by Transition)
    in div (created by Transition)
    in Transition (created by Animation)
    in Animation (created by Arwes)
    in Arwes (created by Jss(Arwes))
    in Jss(Arwes) (at cyberpunk/index.tsx:40)
    in ThemeProvider (at cyberpunk/index.tsx:39)
    in Cyberpunk (at _app.tsx:5)
    in App
    in Container (created by AppContainer)
    in AppContainer

Steps to reproduce

in dev enviroment, everytimes save new code and restart dev server

Actual behavior

the page show html without style

My Code

export default function Cyberpunk() {
    return (
        <ThemeProvider theme={createTheme(myTheme)}>
            <Arwes animate background="/cyberpunk/img/background-xlarge.jpg" pattern="/cyberpunk/img/glow.png">
                <div className={globalStyle["absolute-center"]}>
                    <Wrap abc="123" className={globalStyle["flex-column-center"]}>
                        <Row>
                            <MyHeader>Hello Cyberpunk</MyHeader>
                        </Row>
                        <Row>
                            <Image animate resources="/cyberpunk/img/James.jpeg">
                                <p>The King of NBA</p>
                                <p>Lebron James</p>
                            </Image>
                        </Row>
                        <Row nested noMargin>
                            <Col s={12} m={6}>
                                1111
                            </Col>
                            <Col s={12} m={6}>
                                2222
                            </Col>
                        </Row>
                    </Wrap>
                </div>
            </Arwes>
        </ThemeProvider>
    );
}

Arwes not supported for SSR?

I was trying to get Arwes to work with NextJS, but started to running into rendering exceptions like this

Any idea how to solve this issue?

Repo: https://github.com/DennisSSDev/cyberplay

DEPENDS ON #64

The website arwes.dev needs to be set up in the project repository to work along the current components, documentation, APIs, and playground application.

• Define the website framework and the website architecture.
• Setup the website application tools in this repository.
• Setup the website application in the server as arwes.dev.

This task does not include UI/UX design. Only the tooling setup.

Update the sounds package with the latest findings.

• SoundsProvider
  • Update context provider to the new React Context.
  • It should update all project sounds if settings change. All previous players should be stopped to prevent zombie sounds on transition.
• withSounds
  • It should use the React forwardRef API and remove React component hosting.

It should implement the sounds package specification.

Description

When hovering over button elements, the border color does not change.

To reproduce

Live demo: Plunkr

Code example (placed in index.jsx):

import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider, createTheme, Button, Arwes } from "arwes";

function App() {
  return (
    <ThemeProvider theme={createTheme()}>
      <Arwes>
        <Button>Test</Button>
      </Arwes>
    </ThemeProvider>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));

Expected behavior

When hovering over a Button element, the border color should brighten, as seen in the Playground

Development environment

• Packages version: 1.0.0-alpha.5
• OS: Windows 10
• Browser: Chrome 86.0.4240.75; Firefox 82.0b9

Additional context

I was able to use a workaround by passing the following custom Frame element to Button (note that setting "hover" on true in the Frame element did not work):

const ButtonFrame = ({ children }) => {
  const [mouseOver, setMouseOver] = useState(false);
  return (
    <Frame
      corners={1}
      animate={true}
      layer={mouseOver ? "control" : "primary"}
      onMouseEnter={() => setMouseOver(true)}
      onMouseLeave={() => setMouseOver(false)}
    >
      {children}
    </Frame>
  );
};

I need to handle the source in case the image does not exist.
How can I pass onError event handler to Image as the same way below.

Working code using img html tag.

<img
    src={photoUrl}
    onError={e => {
      if (e.target.src !== photoFallBack) {
        e.target.src = photoFallBack
      }
    }}
  />

However if I change the img to arwes Image component, updating the 'src' to 'resources' it does not work.

Subject of the issue

I have many React JSS errors that go like this:
index.js:1446 Warning: [JSS] Could not find the referenced rule hover in ArwesSounds(Frame), Themed, Dynamic.
function.console.(anonymous function) @ index.js:1446
warning @ browser.js:43
(anonymous) @ index.js:49
onProcessStyle @ index.js:108
onProcessStyle @ PluginsRegistry.js:97
onProcessRule @ PluginsRegistry.js:84
process @ RuleList.js:184
StyleSheet @ StyleSheet.js:93
createStyleSheet @ Jss.js:162
createState @ createHoc.js:315
Jss(ArwesSounds(Frame)) @ createHoc.js:223
constructClassInstance @ react-dom.development.js:13107
updateClassComponent @ react-dom.development.js:15086
beginWork @ react-dom.development.js:15980
performUnitOfWork @ react-dom.development.js:19102
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:6
webpack_require @ bootstrap:782
fn @ bootstrap:150
0 @ serviceWorker.js:135
webpack_require @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1

index.js:1446 Warning: [JSS] Could not find the referenced rule circle2 in Loading, Themed, Dynamic.
function.console.(anonymous function) @ index.js:1446
warning @ browser.js:43
(anonymous) @ index.js:49
onProcessStyle @ index.js:108
onProcessStyle @ PluginsRegistry.js:97
onProcessRule @ PluginsRegistry.js:84
process @ RuleList.js:184
StyleSheet @ StyleSheet.js:93
createStyleSheet @ Jss.js:162
createState @ createHoc.js:315
Jss(ArwesSounds(Frame)) @ createHoc.js:223
constructClassInstance @ react-dom.development.js:13107
updateClassComponent @ react-dom.development.js:15086
beginWork @ react-dom.development.js:15980
performUnitOfWork @ react-dom.development.js:19102
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:6
webpack_require @ bootstrap:782
fn @ bootstrap:150
0 @ serviceWorker.js:135
webpack_require @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1

index.js:1446 Warning: [JSS] Could not find the referenced rule hover in ArwesSounds(Frame), Themed, Dynamic.
function.console.(anonymous function) @ index.js:1446
warning @ browser.js:43
(anonymous) @ index.js:49
onProcessStyle @ index.js:108
onProcessStyle @ PluginsRegistry.js:97
onProcessRule @ PluginsRegistry.js:84
process @ RuleList.js:184
StyleSheet @ StyleSheet.js:93
createStyleSheet @ Jss.js:162
createState @ createHoc.js:315
Jss(ArwesSounds(Frame)) @ createHoc.js:223
constructClassInstance @ react-dom.development.js:13107
updateClassComponent @ react-dom.development.js:15086
beginWork @ react-dom.development.js:15980
performUnitOfWork @ react-dom.development.js:19102
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:6
webpack_require @ bootstrap:782
fn @ bootstrap:150
0 @ serviceWorker.js:135
webpack_require @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1446 Warning: [JSS] Could not find the referenced rule hover in ArwesSounds(Frame), Themed, Dynamic.
function.console.(anonymous function) @ index.js:1446
warning @ browser.js:43
(anonymous) @ index.js:49
onProcessStyle @ index.js:108
onProcessStyle @ PluginsRegistry.js:97
onProcessRule @ PluginsRegistry.js:84
process @ RuleList.js:184
StyleSheet @ StyleSheet.js:93
createStyleSheet @ Jss.js:162
createState @ createHoc.js:315
componentWillUpdate @ createHoc.js:252
updateClassInstance @ react-dom.development.js:13453
updateClassComponent @ react-dom.development.js:15093
beginWork @ react-dom.development.js:15980
performUnitOfWork @ react-dom.development.js:19102
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:6
webpack_require @ bootstrap:782
fn @ bootstrap:150
0 @ serviceWorker.js:135
webpack_require @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1446 Warning: [JSS] Could not find the referenced rule circle2 in Loading, Themed, Dynamic.
function.console.(anonymous function) @ index.js:1446
warning @ browser.js:43
(anonymous) @ index.js:49
onProcessStyle @ index.js:108
onProcessStyle @ PluginsRegistry.js:97
onProcessRule @ PluginsRegistry.js:84
process @ RuleList.js:184
StyleSheet @ StyleSheet.js:93
createStyleSheet @ Jss.js:162
createState @ createHoc.js:315
componentWillUpdate @ createHoc.js:252
updateClassInstance @ react-dom.development.js:13453
updateClassComponent @ react-dom.development.js:15093
beginWork @ react-dom.development.js:15980
performUnitOfWork @ react-dom.development.js:19102
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:6
webpack_require @ bootstrap:782
fn @ bootstrap:150
0 @ serviceWorker.js:135
webpack_require @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1446 Warning: [JSS] Could not find the referenced rule hover in ArwesSounds(Frame), Themed, Dynamic.
function.console.(anonymous function) @ index.js:1446
warning @ browser.js:43
(anonymous) @ index.js:49
onProcessStyle @ index.js:108
onProcessStyle @ PluginsRegistry.js:97
onProcessRule @ PluginsRegistry.js:84
process @ RuleList.js:184
StyleSheet @ StyleSheet.js:93
createStyleSheet @ Jss.js:162
createState @ createHoc.js:315
componentWillUpdate @ createHoc.js:252
updateClassInstance @ react-dom.development.js:13453
updateClassComponent @ react-dom.development.js:15093
beginWork @ react-dom.development.js:15980
performUnitOfWork @ react-dom.development.js:19102
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:6
webpack_require @ bootstrap:782
fn @ bootstrap:150
0 @ serviceWorker.js:135
webpack_require @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1446 Warning: [JSS] Could not find the referenced rule hover in ArwesSounds(Frame), Themed, Dynamic.
function.console.(anonymous function) @ index.js:1446
warning @ browser.js:43
(anonymous) @ index.js:49
onProcessStyle @ index.js:108
onProcessStyle @ PluginsRegistry.js:97
onProcessRule @ PluginsRegistry.js:84
process @ RuleList.js:184
StyleSheet @ StyleSheet.js:93
createStyleSheet @ Jss.js:162
createState @ createHoc.js:315
componentWillUpdate @ createHoc.js:252
updateClassInstance @ react-dom.development.js:13453
updateClassComponent @ react-dom.development.js:15093
beginWork @ react-dom.development.js:15980
performUnitOfWork @ react-dom.development.js:19102
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
enqueueSetState @ react-dom.development.js:12936
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:356
(anonymous) @ Arwes.js:272
Promise.then (async)
loadResources @ Arwes.js:271
componentDidMount @ Arwes.js:155
commitLifeCycles @ react-dom.development.js:16998
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:6
webpack_require @ bootstrap:782
fn @ bootstrap:150
0 @ serviceWorker.js:135
webpack_require @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1446 Warning: [JSS] Could not find the referenced rule circle2 in Loading, Themed, Dynamic.
function.console.(anonymous function) @ index.js:1446
warning @ browser.js:43
(anonymous) @ index.js:49
onProcessStyle @ index.js:108
onProcessStyle @ PluginsRegistry.js:97
onProcessRule @ PluginsRegistry.js:84
process @ RuleList.js:184
StyleSheet @ StyleSheet.js:93
createStyleSheet @ Jss.js:162
createState @ createHoc.js:315
componentWillUpdate @ createHoc.js:252
updateClassInstance @ react-dom.development.js:13453
updateClassComponent @ react-dom.development.js:15093
beginWork @ react-dom.development.js:15980
performUnitOfWork @ react-dom.development.js:19102
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
enqueueSetState @ react-dom.development.js:12936
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:356
(anonymous) @ Arwes.js:272
Promise.then (async)
loadResources @ Arwes.js:271
componentDidMount @ Arwes.js:155
commitLifeCycles @ react-dom.development.js:16998
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:6
webpack_require @ bootstrap:782
fn @ bootstrap:150
0 @ serviceWorker.js:135
webpack_require @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1446 Warning: [JSS] Could not find the referenced rule hover in ArwesSounds(Frame), Themed, Dynamic.

Your environment

• Which browser and its version is affected.
• Which node and npm are used.

Steps to reproduce

Any browser does this....

I just dont want the sounds from the project that is all.
Thanks

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 use mode: 'production'.

Expected behaviour

N/A

Actual behaviour

N/A

I would find it really useful if you included some instructions for deploying to and running on a server.

This has a really nice background animation and color scheme for a cyberpunk retro theme,
https://theden.sh/

RELATES TO #52

The project is currently written in JavaScript ES2015+. The idea is to have more reliability on the functionality for scalability, documentation, and extensibility. The project packages source code should be migrated to TypeScript in strict mode.

• Setup repository with TS tools for linting and testing.
• Setup typed CommonJS distribution scripts.
• Migrate @arwes/animation package code to TS.
• Setup playground application to use TS.
• Migrate playground code to TS.

Considerations:

• The current CommonJS distribution process is using babel.
• Packages @arwes/tools, @arwes/sounds, and @arwes/design are yet to be built so they do not need a migration.
• Package @arwes/arwes is deprecated and source is only preserved for traceability. So this code should not be migrated.

You should have the ability to set up nested sound settings providers so the configurations can be extended and divided throughout an application.

• The SoundsProvider should check if there is another one up in the tree and extend its settings if found.
• Add unit tests.

A public web page using Arwes animation-enabled components should be able to be optimized for web crawling and support SEO recommendations.

Since an animated component by default is mounted with the status "exited" and the HTML elements are usually hidden, there should be research to find out what are the best practices for the website using Arwes to have a good SEO score.

Since a website using Arwes may use SSR (server-side-rendering) when the components are enabled to be animated, an example hypothetical component for a page may look like this:

<main class="main">
    <h1>Bird</h1>
    <p>Birds are a group of warm-blooded vertebrates constituting the class Aves, characterized by feathers, toothless beaked
    jaws, the laying of hard-shelled eggs, a high metabolic rate, a four-chambered heart, and a strong yet lightweight
    skeleton.</p>
</main>

The initial styles may be:

.main {
  opacity: 0;
}

Using the anime animation library on page load:

anime({
  targets: document.querySelector('.main'),
  opacity: [0, 1]
});

Using the example animated component above:

• Research SEO support and recommendations for animated HTML elements.
• Are there better alternatives to animated components with initial hidden features on page load for SEO purposes?
• Discuss the findings in this ticket.

According to the results of this finding, there may be following tasks.

Currently, the playground only accepts one sandbox per component defined as standard. There should be an option to add multiple sandboxes with one component to add more testing scenarios.

• Add ability to the playground application to receive a list of sandboxes per component per package.
• There should be a selection interface to navigate all the sandboxes available.

DEPENDS ON #18

To ensure everyone follows a convention when documenting in markdown, a markdown linter would be useful to be set up in the project workflow.

• Research markdown linter solutions.
• Set it up in the project.

Great work! I cannot wait to utilize this project UI kit right away at the first sight of arwes. But as I went through the demo code, seems it's best used with reactjs? Is it possible to apply it in non-reactjs project? like vuejs or plain html files?

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

DEPENDS ON #29

To create animated components, we need to create an internal component to manage and control animation flow and a high-order component to convert a React component into an animated component.

• Create an Energy component.
  • It can receive the following props:
    • animate as boolean.
    • root as boolean.
    • activate as boolean.
    • duration as object or number.
      • Default value: { enter: 200, exit: 200 }.
      • It object is provided, it extends defaults.
      • It number is provided, it extends enter and exit.
  • The initial props values should extend the AnimationProvider settings if found.
  • This component has an state value with the animation energy flow. (entering, entered, exited, exiting).
  • Its initial energy state is entered if animate = false or exited otherwise.
  • This component is a provider. It provides its current energy state.
  • If this component does not find another Energy component up in the tree, it is considered a root component. Or if the root prop is provided as true.
  • If animated:
    • If root, it will transition flow state according to activate prop value. Otherwise, it will react to its parent flow state.
    • The time to transition is determined by the duration value according to the transition to do.
• Create a withEnergy HOC.
  • It should use the Energy component internally to manage animations.
  • It should receive an options object with the prop cycles as boolean. Default true.
  • It should pass to the component provided the animation energy state and update it when it changes.
  • It should call the component provided methods enter and exit when the energy state transitions to entering and exiting respectively, if cycles = true.
  • The HOC should forward reference to the provided component if set.

The specification is written in Animation System.

Some sounds are used in a loop. For example, the "typing/writing" sound which is played when the text is being "created/transitionedIn/appeared", is repeated over and over again until the text is completely shown.

Example: https://github.com/arwes/arwes/blob/main/playground/static/sounds/typing.mp3

MP3 files have a problem. They add extra time in the beginning and at the end of the audio on Chrome. Apparently, in Firefox this does not occur. Since the audio is on loop, the sound is played, paused for a few milliseconds, and then restarted, even if the sound can be really played in a loop.

Research has to be done to find a new file format supported by major browsers or a workaround to play sound effects without side-effects like that one.

For browser compatibility, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

• Research sound file formats for sound effects without side-effects for loop playing.
• Document your findings on this ticket.
• Check if loop playback is now supported in howlerjs.com or what we need to make it work.

I can't access the doc :(

DEPENDS ON #33

To handle serial and staggering animations, we need a new component called Stream. It would behave the same way as the Energy component, but with some API updates.

• Create Stream component.
  • It will work with the same props as Energy.
  • serial: boolean = false prop.
    • If disabled, children nodes will transition in staggering mode.
    • If enabled, children nodes will transition in serial model.
  • duration.stagger: number = 50 prop. It is the duration to animate children nodes when staggerting is enabled.
  • duration.offset: number = 0 prop. The time to delay transitions to entered from this node and the following, when this node is inside Stream.
  • merge is not available.
  • getDuration().enter: number method. If serial, it sums all children duration,
    otherwise it calculates the time they take to enter in staggering mode.
  • getDuration().exit; number method. Get the duration the first children node lasts
    exiting.

Since this component shares most of the Energy component API, a refactor to make this component would be tentative.

Read animation system specs.

As I´m not familiar with GitHub and these packages I want to ask you if you can deploy a package useable for windows ?
A little documentation for production usage was already requested, so I don´t ask for that once again ;)
I´m looking forward to use the framework for some projects, keep on coding.

Add support for SoundsProvider provider and withSounds HOC to support audio settings.

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

Currently, withEnergy accepts only class components since they are referenced. We need to be able to pass function components when options.cycles = false, since then we wouldn't need a reference and we let the component to handle its animations.

• Allow withEnergy HOC to accept function components when options.cycles = false.

Normally Providers like ThemeProvider are used in wrappers so you don't need to use them in every component, in Nextjs such a wrapper is the _app.js but using the arwes ThemeProvider there to wrap around the whole app does not work, it is still not recognized in separate components when using withStyles for example, it says withStyles needs a ThemeProvider to be able to use it, I clearly have one in the _app.js wrapper.

Error:
(node:11834) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=4 <=9".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

DEPENDS ON #35

Add support for stagger, sequence and custom animator children flow transition management.

Need input fields for creating some login or feedback forms in same design

The project can be consumed in CommonJS but there is no way to consume it in UMD inside/outside of bundling tools.

• Setup a script to build UMD distribution (unminified and minified) files at dist subfolder in each package folder.
  • Unminified version /dist/[packageName].js.
  • Minified version /dist/[packageName].min.js.
  • Exported library name should be the arwes.[packageName] except for the @arwes/arwes package, which would be arwes alone.

Considerations:

• Each package name is the window.arwes.[packageName]. All packages should be able to be imported in the same window scope.
• Webpack should be used to generate the distribution files.

Subject of the issue

Hi.
I want to know List component has animation or not

In this site(https://arwes.dev/docs), I think List has animation.
So I use List tag in my application made by referring to Arwes website(https://arwes.dev/play#list), but there is no animation.

Would you please answer that is List component has animation or not?

If List component doesn't have animation, what is the component that seems like List in (https://arwes.dev/docs) ?

To allow animated components to control animations, we need to add the following features:

Props

• duration.delay: number = 0
  • Energy component should extend its value if defined.
  • AnimationProvider should provide its value if defined.
  • It is the time to delay the Energy flow only before transitioning from exited to entering.
• merge: boolean = false - If enabled and it is not root, the node will enter in the flow when its parent changes to entering.
• onActivate: Function(boolean) Get notified when the component is activated or de-activated. It is a function. It provides 1 parameter with the boolean value of activate.

Methods

• getFlow(): flow - Returns the current node flow state.
• hasEntered(): boolean - If the node has entered in the system flow at least once.
• hasExited(): boolean - If the node has exited in the system flow at least once.
• getDurationIn(): number - Get the duration the node lasts entering,
  including delay.
• getDurationOut(); number - Get the duration the node lasts exiting.
• updateDuration(duration: number | Object) - Update the animation duration.

Provider

• The Energy should provide the methods using an interface object along with the flow object.
• It should not be a reference to the component itself.

Read Animation System specs.

The withEnergy HOC should be able to extend general Energy props if user defines it.
They should act as default props for the Energy component wrapped.

• HOC should accept the options: animate, root, merge, and duration.
• HOC should extend these values with the provided energy prop and provide it to the Energy component.

Feel free to use React-JSS theming solution directly, just in case you missed when it was added.

I love this project. I recommend the introduction of a parallax effect, which I've seen in sci-fi video games and emulated on worktree.sh (in "extended" mode)

Fonts are non-standard to change

I want to use. a custom local font. When I bring it in as a font-face in CSS it isnt working

Your environment

• Mac Catalina
• Chrome 85
• Node 14.9, npm 6.14

Steps to reproduce

Look for documentation about replacing a font

Fail in finding said documentation

Create a fonts/ >> Your Font << / >> Your Font >> .otf

in index.css

@font-face {
  font-family: 'SigmaFive';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/sigma_five/SigmaFive.otf'),
  format('opentype')
}

Expected behavior

The font shows up

Actual behavior

The font does not show up

Currently, the playground sets up the ThemeProvider and the SoundsProvider in the root component. Since the components should be isolated to be tested properly, we need to remove these providers and update the current sandboxes to make sure they work as they are.

• Remove component providers at playground root in playground/playground.js.
• Update current component sandboxes and test them.

The Arwes project needs to have a design specification for the user interfaces and the user experience to share across all projects built in the project, such as the UI component library, the design architecture, the website, and the playground. It should allow users to extend it to specific project needs using the framework.

• Create a requirements document for the project product applications.
• Create the wireframes for the project product applications.
• Update project logo.
• Define color palette.
• Create a UI component library for the project components.
  • Structural components.
  • Content components.
  • Interaction components.
• Website application design.
• Playground application design.

The artifact formats to be delivered are yet to be defined.

Subject of the issue

a set of .css is better.

is there any plan about it?

Currently, Chrome has some audio policies which prevent sounds being played before a user interacts with a website. Usually, the applications would need to play sounds at start time, we need to identify possible and proper ways to handle this scenario.

1. Should we always show an alert/button/modal component to ask the user to interact with the page to experience it properly?
2. Should we let the user enter the website right away and resume playing sounds once the user interacts with the website?
3. Should we let the user enter the website without checking for interactions?
4. Should there be any functionality by default in the components to handle these scenarios?