Gordon  Matlala

Gordon Matlala

1668737040

What is React Higher-order Components?

React higher-order components pattern.

Let's learn what is React higher-order components.

React’s higher-order component (or HOC for short) is a code pattern that emerges to help you reuse component logic.

Simply put, a higher-order component is a function that accepts a component and returns a new, enhanced component.

For example, let’s say you have a component that renders a simple greeting as follows:

function App({ greeting }) {
  return <h1> {greeting} </h1>;
}

<App greeting="Hello World!">

You can create a higher-order component that takes App and changes its output as follows:

function higherOrderComponent(BaseComponent) {
  return function EnhancedComponent() {
    return <BaseComponent greeting="Hola Amigo" />;
  };
}

To use the higher-order component, assign its return value into a variable:

const MyNewHOC = higherOrderComponent(App) 

You can then use MyNewHOC just like you use any other normal component.

<MyNewHOC />

It is recommended that a higher-order component doesn’t affect the output of the base component directly.

The base component should be refactored to include a conditional rendering for its output instead:

function App({ greeting, propFromHOC }) {
  if (propFromHOC) {
    return <h1> {propFromHOC} </h1>;
  }
  return <h1> {greeting} </h1>;
}

And the HOC code should be refactored to pass a new prop parameter instead of replacing the old one:

function higherOrderComponent(BaseComponent) {
  return function EnhancedComponent() {
    return <BaseComponent propFromHOC="Hola Amigo" />;
  };
}

Passing different props into the base component is just one use case of HOC.

Other use cases include adding state into function components and adding lifecycle methods to function components.

In fact, there’s a helper library for React called recompose that’s created to give you the most frequently used HOC pattern.

If you find this pattern to be confusing, then you’re right! The HOC pattern is a complex code pattern that trips up even experienced React developers.

Before the release of React hooks, the HOC pattern is frequently used to give more power to React components. You can see examples of HOCs in libraries like React Router and Redux.

Most functionalities that used to be implemented with HOC can now be replaced with hooks.

For example, withRouter() from React Router can be replaced with useHistory(), useLocation(), useRouteMatch().

Hooks also provide state and lifecycle methods for React functional components, further reducing the need to use HOC pattern.

Whenever you can, you should use hooks instead of HOCs because hooks are way easier to understand and reduce your code complexity level.

More about React hooks

Original article source at: https://sebhastian.com/

#react #components 

What is React Higher-order Components?
Mike  Kozey

Mike Kozey

1668622260

React Higher-order Components Pattern

React higher-order components pattern

Let's learn what is React higher-order components


React’s higher-order component (or HOC for short) is a code pattern that emerges to help you reuse component logic.

Simply put, a higher-order component is a function that accepts a component and returns a new, enhanced component.

For example, let’s say you have a component that renders a simple greeting as follows:

function App({ greeting }) {
  return <h1> {greeting} </h1>;
}

<App greeting="Hello World!">

You can create a higher-order component that takes App and changes its output as follows:

function higherOrderComponent(BaseComponent) {
  return function EnhancedComponent() {
    return <BaseComponent greeting="Hola Amigo" />;
  };
}

To use the higher-order component, assign its return value into a variable:

const MyNewHOC = higherOrderComponent(App) 

You can then use MyNewHOC just like you use any other normal component.

<MyNewHOC />

It is recommended that a higher-order component doesn’t affect the output of the base component directly.

The base component should be refactored to include a conditional rendering for its output instead:

function App({ greeting, propFromHOC }) {
  if (propFromHOC) {
    return <h1> {propFromHOC} </h1>;
  }
  return <h1> {greeting} </h1>;
}

And the HOC code should be refactored to pass a new prop parameter instead of replacing the old one:

function higherOrderComponent(BaseComponent) {
  return function EnhancedComponent() {
    return <BaseComponent propFromHOC="Hola Amigo" />;
  };
}

Passing different props into the base component is just one use case of HOC.

Other use cases include adding state into function components and adding lifecycle methods to function components.

In fact, there’s a helper library for React called recompose that’s created to give you the most frequently used HOC pattern.

If you find this pattern to be confusing, then you’re right! The HOC pattern is a complex code pattern that trips up even experienced React developers.

Before the release of React hooks, the HOC pattern is frequently used to give more power to React components. You can see examples of HOCs in libraries like React Router and Redux.

Most functionalities that used to be implemented with HOC can now be replaced with hooks.

For example, withRouter() from React Router can be replaced with useHistory(), useLocation(), useRouteMatch().

Hooks also provide state and lifecycle methods for React functional components, further reducing the need to use HOC pattern.

Whenever you can, you should use hooks instead of HOCs because hooks are way easier to understand and reduce your code complexity level.

More about React hooks

Original article source at: https://sebhastian.com/react-higher-order-components/

#react #components #pattern 

React Higher-order Components Pattern
Monty  Boehm

Monty Boehm

1668602892

How to Use Setinterval() Method Inside React Components

Learn how to properly use setInterval() and clearInterval() methods in React components.

Sometimes, you may want to run the setInterval() method inside a React component so that the component may run a piece of code at specific intervals.

This tutorial will show you how to run the setInterval() method as soon as your component is mounted (rendered) on the screen or when a button is clicked by the user.

This tutorial uses React function component for its code examples. For the class component equivalent, refer to this tutorial:

How to use setInterval() method inside React class components

Let’s begin with starting the interval when the component is mounted.

Run setInterval() once the component is mounted

If you want the interval to start as soon as your component is rendered on the screen, you can put your setInterval() method inside a useEffect() hook.

The code can be as simple as follows:

useEffect(() => {
  setInterval(() => {
    /*
        Run a function or set any state here
    */
  }, 1000);
}, []);

By combining the setInterval() method with useEffect and useState hooks, you can create a timer that counts how many seconds have passed since the component has mounted.

Inside the following App component:

import React, { useState, useEffect } from "react";

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
  }, []);

  return <h1>The component has been rendered for {count} seconds</h1>;
};

export default App;

Since the useEffect() hook above has an empty dependency array ([]), it will be executed only once during the lifetime of the component, calling the setInterval() method to run the setCount() method once every 1000 milliseconds.

Please note that you need to use the previous state value passed into the setCount() method to constantly increment the count value.

If you increment the count value as follows:

setCount(count + 1);

The the count will stuck at 0 + 1 = 1 because the variable count value when setInterval() is called is 0.

If you want to clear the setInterval() method and avoid memory leak, then you need to do two things:

  • Keep the interval ID returned by the setInterval() method in a variable
  • Modify the useEffect() hook to return a function that calls the clearInterval() method, passing the interval ID previously returned by the setInterval() method.

Here’s the modified useEffect() hook implementing the two steps above:

useEffect(() => {
  const intervalId = setInterval(() => {
    setCount(prevCount => prevCount + 1);
  }, 1000);

  return () => clearInterval(intervalId);
}, []);

And that’s how you can run the setInterval() method as soon as the component mounts. Now let’s see how to run the setInterval() method when the user clicks on a button.

Run setInterval() from a React button onClick event

To run the setInterval() method when the user clicks on a button, you need to put the setInterval() method inside your button’s onClick event handler property.

Here’s an example:

const App = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
  }

  return(
    <div>
      <h1>The component has been rendered for {count} seconds</h1>
      <button onClick={handleClick}>Start counting</button>
    </div>
  );
};

export default App;

To stop the interval with a button click, you need to save the interval ID returned by the setInterval() method as a state value.

For example, let’s create another state named intervalId as follows:

const [intervalId, setIntervalId] = useState(0);

const handleClick = () => {
  const newIntervalId = setInterval(() => {
    setCount(prevCount => prevCount + 1);
  }, 1000);
  setIntervalId(newIntervalId);
}

Next, modify the handleClick() function and add an if block that checks for the intervalId value first.

If the intervalId value is truthy, then:

  • Call the clearInterval() method and pass the intervalId as its argument
  • Call setIntervalId() and set the value back to 0
  • Write the return statement to stop the handleClick() function execution

The code below implements the three steps above:

const handleClick = () => {
  if(intervalId) {
    clearInterval(intervalId);
    setIntervalId(0);
    return;
  }

  const newIntervalId = setInterval(() => {
    setCount(prevCount => prevCount + 1);
  }, 1000);
  setIntervalId(newIntervalId);
}

Finally, update the button label to Start counting or Stop counting depending on the intervalId value.

Here’s the complete code:

const App = () => {
  const [count, setCount] = useState(0);
  const [intervalId, setIntervalId] = useState(0);

  const handleClick = () => {
    if (intervalId) {
      clearInterval(intervalId);
      setIntervalId(0);
      return;
    }

    const newIntervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
    setIntervalId(newIntervalId);
  };

  return (
    <div>
      <h1>The component has been rendered for {count} seconds</h1>
      <button onClick={handleClick}>
        {intervalId ? "Stop counting" : "Start counting"}
      </button>
    </div>
  );
};

export default App;

And that’s how you can use the setInterval() method properly inside a React function component.

Original article source at: https://sebhastian.com/

#react #method #components 

How to Use Setinterval() Method Inside React Components
Hunter  Krajcik

Hunter Krajcik

1668600738

How to Use Setinterval() Method Inside React Class Components

Use setInterval() and clearInterval() methods in React class components

This tutorial will show you how to run the setInterval() method as soon as your component is mounted (rendered) on the screen or when a button is clicked by the user.

This tutorial uses React class component for its code examples. For the function component equivalent, you can refer to this tutorial:

How to use setInterval() method inside React components

Let’s begin with starting the interval when the component is mounted.

React class component, calling setInterval() on mount

To start the interval as soon as the class component has been rendered on the screen, you need to call the setInterval() method inside the componentDidMount() lifecycle method.

Here’s a pattern for using the setInterval() method:

componentDidMount() {
    setInterval(() => {
      /*
          Run any function or setState here
      */
    }, 1000);
  }

You can call the this.setState() method inside the setInterval() method to increment a previous state property value.

The following example uses the state property count value as a timer that counts how many seconds have passed since the component has been rendered on the screen:

class App extends React.Component {
  state = { count: 0 };

  componentDidMount() {
    const intervalId = setInterval(() => {
      this.setState(prevState => {
        return {
          count: prevState.count + 1,
        };
      });
    }, 1000);
  }

  componentWillUnmount(){
    clearInterval(intervalId);
  }

  render() {
    return (
      <h1>The component has been rendered for {this.state.count} seconds</h1>
    );
  }
}

export default App;

The value of the count property above will be incremented by 1 every 1000 milliseconds.

To stop the interval when the component is destroyed, you need to call the clearInterval() method from inside the componentWillUnmount() lifecycle method.

First, you need add a new property to the state object named intervalId and set the initial value to 0:

state = { count: 0, intervalId: 0 };

Next, save the interval ID returned from the setInterval() method as the intervalId state value.

The complete code for the componentDidMount() method is as follows:

componentDidMount() {
  const newIntervalId = setInterval(() => {
    this.setState(prevState => {
      return {
        ...prevState,
        count: prevState.count + 1,
      };
    });
  }, 1000);

  this.setState(prevState => {
    return {
      ...prevState,
      intervalId: newIntervalId,
    };
  });
}

Although it looks complicated, the additional code only calls the setState() method to assign the newIntervalId value as the state.intervalId value.

The prevState value is expanded on the new state returned from the setState() method so that the count property won’t be removed from the state itself.

And that’s how to clear the interval before unmounting the component. Now let’s see how you can start and stop the interval method from a button click.

React class component, calling setInterval() on button click

To start the setInterval() method when the user clicks on a button, you need to put the setInterval() method call inside the button’s onClick event handler property.

In essence, you only need to place the code inside the componentDidMount() method above as the code you run when the button is clicked.

Take a look at the following code:

class App extends React.Component {
  state = { count: 0, intervalId: 0 };

  handleClick = () => {
    const newIntervalId = setInterval(() => {
      this.setState(prevState => {
        return {
          ...prevState,
          count: prevState.count + 1,
        };
      });
    }, 1000);
    
    this.setState(prevState => {
      return {
        ...prevState,
        intervalId: newIntervalId,
      };
    });
  }

  render() {
    return (
      <div>
        <h1>The component has been rendered for {this.state.count} seconds</h1>
        <button onClick={this.handleClick}>Start counter</button>
      </div>
    );
  }
}

export default App;

To stop the interval, you need to add an if block inside the handleClick() method above.

If the state.intervalId value is not zero (truthy) then you need to do the following steps:

  • Call the clearInterval() method passing the state.intervalId as its argument
  • Call the setState() method and set the intervalId value back to 0
  • Stop executing the handleClick() method by using the return statement

Here’s the code implementing the above steps:

handleClick = () => {
  if(this.state.intervalId){
    clearInterval(this.state.intervalId);
    this.setState(prevState => {
      return {
        ...prevState,
        intervalId: 0,
      };
    });
    return;
  }
  
  const newIntervalId = setInterval(() => {
    this.setState(prevState => {
      return {
        ...prevState,
        count: prevState.count + 1,
      };
    });
  }, 1000);
  
  this.setState(prevState => {
    return {
      ...prevState,
      intervalId: newIntervalId,
    };
  });
}

Don’t forget to update the button’s label to Start counting or Stop counting depending on the state.intervalId value:

<button onClick={this.handleClick}>
  {this.state.intervalId? "Stop counter": "Start counter"}
</button>

The full code for the class component is as shown below:

class App extends React.Component {
  state = { count: 0, intervalId: 0 };

  handleClick = () => {
    if(this.state.intervalId){
      clearInterval(this.state.intervalId);
      this.setState(prevState => {
        return {
          ...prevState,
          intervalId: 0,
        };
      });
      return;
    }
    
    const newIntervalId = setInterval(() => {
      this.setState(prevState => {
        return {
          ...prevState,
          count: prevState.count + 1,
        };
      });
    }, 1000);
    
    this.setState(prevState => {
      return {
        ...prevState,
        intervalId: newIntervalId,
      };
    });
  }

  render() {
    return (
      <div>
        <h1>The component has been rendered for {this.state.count} seconds</h1>
        <button onClick={this.handleClick}>
          {this.state.intervalId? "Stop counter": "Start counter"}
        </button>
      </div>
    );
  }
}

export default App;

And that’s how you can call the setInterval() method with a button click inside a React class component.

Original article source at: https://sebhastian.com/

#react #class #components 

How to Use Setinterval() Method Inside React Class Components
Monty  Boehm

Monty Boehm

1668598942

How to Use Setinterval() Method Inside React Class Components

Use setInterval() and clearInterval() methods in React class components

This tutorial will show you how to run the setInterval() method as soon as your component is mounted (rendered) on the screen or when a button is clicked by the user.

This tutorial uses React class component for its code examples. For the function component equivalent, you can refer to this tutorial:

How to use setInterval() method inside React components

Let’s begin with starting the interval when the component is mounted.

React class component, calling setInterval() on mount

To start the interval as soon as the class component has been rendered on the screen, you need to call the setInterval() method inside the componentDidMount() lifecycle method.

Here’s a pattern for using the setInterval() method:

componentDidMount() {
    setInterval(() => {
      /*
          Run any function or setState here
      */
    }, 1000);
  }

You can call the this.setState() method inside the setInterval() method to increment a previous state property value.

The following example uses the state property count value as a timer that counts how many seconds have passed since the component has been rendered on the screen:

class App extends React.Component {
  state = { count: 0 };

  componentDidMount() {
    const intervalId = setInterval(() => {
      this.setState(prevState => {
        return {
          count: prevState.count + 1,
        };
      });
    }, 1000);
  }

  componentWillUnmount(){
    clearInterval(intervalId);
  }

  render() {
    return (
      <h1>The component has been rendered for {this.state.count} seconds</h1>
    );
  }
}

export default App;

The value of the count property above will be incremented by 1 every 1000 milliseconds.

To stop the interval when the component is destroyed, you need to call the clearInterval() method from inside the componentWillUnmount() lifecycle method.

First, you need add a new property to the state object named intervalId and set the initial value to 0:

state = { count: 0, intervalId: 0 };

Next, save the interval ID returned from the setInterval() method as the intervalId state value.

The complete code for the componentDidMount() method is as follows:

componentDidMount() {
  const newIntervalId = setInterval(() => {
    this.setState(prevState => {
      return {
        ...prevState,
        count: prevState.count + 1,
      };
    });
  }, 1000);

  this.setState(prevState => {
    return {
      ...prevState,
      intervalId: newIntervalId,
    };
  });
}

Although it looks complicated, the additional code only calls the setState() method to assign the newIntervalId value as the state.intervalId value.

The prevState value is expanded on the new state returned from the setState() method so that the count property won’t be removed from the state itself.

And that’s how to clear the interval before unmounting the component. Now let’s see how you can start and stop the interval method from a button click.

React class component, calling setInterval() on button click

To start the setInterval() method when the user clicks on a button, you need to put the setInterval() method call inside the button’s onClick event handler property.

In essence, you only need to place the code inside the componentDidMount() method above as the code you run when the button is clicked.

Take a look at the following code:

class App extends React.Component {
  state = { count: 0, intervalId: 0 };

  handleClick = () => {
    const newIntervalId = setInterval(() => {
      this.setState(prevState => {
        return {
          ...prevState,
          count: prevState.count + 1,
        };
      });
    }, 1000);
    
    this.setState(prevState => {
      return {
        ...prevState,
        intervalId: newIntervalId,
      };
    });
  }

  render() {
    return (
      <div>
        <h1>The component has been rendered for {this.state.count} seconds</h1>
        <button onClick={this.handleClick}>Start counter</button>
      </div>
    );
  }
}

export default App;

To stop the interval, you need to add an if block inside the handleClick() method above.

If the state.intervalId value is not zero (truthy) then you need to do the following steps:

  • Call the clearInterval() method passing the state.intervalId as its argument
  • Call the setState() method and set the intervalId value back to 0
  • Stop executing the handleClick() method by using the return statement

Here’s the code implementing the above steps:

handleClick = () => {
  if(this.state.intervalId){
    clearInterval(this.state.intervalId);
    this.setState(prevState => {
      return {
        ...prevState,
        intervalId: 0,
      };
    });
    return;
  }
  
  const newIntervalId = setInterval(() => {
    this.setState(prevState => {
      return {
        ...prevState,
        count: prevState.count + 1,
      };
    });
  }, 1000);
  
  this.setState(prevState => {
    return {
      ...prevState,
      intervalId: newIntervalId,
    };
  });
}

Don’t forget to update the button’s label to Start counting or Stop counting depending on the state.intervalId value:

<button onClick={this.handleClick}>
  {this.state.intervalId? "Stop counter": "Start counter"}
</button>

The full code for the class component is as shown below:

class App extends React.Component {
  state = { count: 0, intervalId: 0 };

  handleClick = () => {
    if(this.state.intervalId){
      clearInterval(this.state.intervalId);
      this.setState(prevState => {
        return {
          ...prevState,
          intervalId: 0,
        };
      });
      return;
    }
    
    const newIntervalId = setInterval(() => {
      this.setState(prevState => {
        return {
          ...prevState,
          count: prevState.count + 1,
        };
      });
    }, 1000);
    
    this.setState(prevState => {
      return {
        ...prevState,
        intervalId: newIntervalId,
      };
    });
  }

  render() {
    return (
      <div>
        <h1>The component has been rendered for {this.state.count} seconds</h1>
        <button onClick={this.handleClick}>
          {this.state.intervalId? "Stop counter": "Start counter"}
        </button>
      </div>
    );
  }
}

export default App;

And that’s how you can call the setInterval() method with a button click inside a React class component.

Original article source at: https://sebhastian.com/setinterval-react-class/

#react #class #components 

How to Use Setinterval() Method Inside React Class Components
Lawrence  Lesch

Lawrence Lesch

1667936820

Aleph.js: The Full-stack Framework in Deno

Aleph.js

The Full-stack Framework in Deno

⚠️ Not yet 1.0. Many things are subject to change. Documentation is lacking in many places. Try it out and give us feedback!

Get started

Initialize a new project, you can pick a start template with --template flag, available templates: [react, vue, api, solid, yew]

deno run -A -r https://alephjs.org/init.ts

after init, you can run the app with deno tasks:

# go to the app root created by the `init`
cd APPDIR

# run the app in devlopment mode
deno task dev

# run the app in production mode
deno task start

Documentation

The new docs site is working in progress: https://aleph.deno.dev (PR). You can join the Aleph.js Discord to get helps.

Some demo apps deployed to Deno Deploy with the new architecture:

Source code: https://github.com/alephjs/aleph.js/tree/main/examples

Real-world Apps

Download Details:

Author: Alephjs
Source Code: https://github.com/alephjs/aleph.js 
License: MIT license

#typescript #react #components #framework 

Aleph.js: The Full-stack Framework in Deno
Monty  Boehm

Monty Boehm

1667718960

Story2sketch: Convert Storybook into Sketch Symbols

story2sketch 💎

Convert Storybook stories into Sketch symbols.

Uses the amazing html-sketchapp. Only supports web.

Quickstart

Firstly, get Sketch and npm. Then install asketch2sketch.sketchplugin into Sketch:

Installing Sketch plugin

Install story2sketch:

npm i story2sketch -g

Run story2sketch, pointing towards a Storybook iframe URL. You can find an existing iframe URL in Storybook by clicking 'Open canvas in new tab':

Open canvas in new tab

See configuration for more options, or if you have a lot of stories.

story2sketch --url https://localhost:9001/iframe.html --output stories.asketch.json

Import the generated file into Sketch via Plugins > From *Almost* Sketch to Sketch in Sketch menu bar.

Using sketch plugin

Success!

Storybook 3.x

If you're using Storybook 3.3 or above (but not Storybook 4 or above), you'll want to take full control of your Storybook webpack.config.js if you haven't already done so, adding:

module.exports = (storybookBaseConfig, configType) => {
  const newConfig = {
    ...storybookBaseConfig
  };

  // Add this:
  // Export bundles as libraries so we can access them on page scope.
  newConfig.output.library = "[name]";

  return newConfig;
};

Manually export the getStorybook function in your ./config/storybook/config.js file:

import { getStorybook } from "@storybook/react";

...

export { getStorybook }

Run story2sketch:

story2sketch --url https://localhost:9001/iframe.html --output stories.asketch.json

Why?

As stated by react-sketchapp, it's complicated to manage assets in a design system. Many teams building design systems or component libraries already produce Sketch files for distributing designs and use Storybook to prototype and present the developed components. It can become difficult to keep designs up to date with the latest components, with designers ever playing catchup. story2sketch generates a Sketch file from your components via Storybook, so your Sketch designs always stay up to date.

Configuration

You can configure story2sketch using the API via the CLI, configuring your package.json or adding a story2sketch.config.js file.

CLI

Simply call story2sketch with options from the API.

$ story2sketch --stories all --output dist/great-ui.asketch.json

package.json

Add the following to your package.json:

{
  "story2sketch": {
    "stories": "all",
    "output": "dist/great-ui.asketch.json"
  }
}

story2sketch.config.js

Create a file called story2sketch.config.js on the root of your project:

module.exports = {
  output: "dist/great-ui.asketch.json",
  stories: "all"
};

 

API

ParameterExplanationInput TypeDefault
outputSpecifies the filename for the generated asketch.json file or a folder when outputBy === 'kind'.string"dist/stories.asketch.json"
inputThe location of Storybook's generated iframe.html. Use this over url if possible for performance.string"dist/iframe.html"
urlStorybook iframe URL. Will end in iframe.html. Prefer input for performance if possible.string"http://localhost:9001/iframe.html"
storiesStories to extract from Storybook. You should probably override the default.object/string"all"
concurrencyNumber of headless Chrome tabs to run in parallel. Defaults to number of threads available on your machine.integerdynamic
symbolGutterGutter to place between symbols in Sketch.integer100
viewportsViewport configuration. Will be arranged left-to-right by width. Try to avoid changing the key, as this is used to identify the symbol.objectMobile viewport (320px wide) and desktop viewport (1920px wide). See example below.
querySelectorQuery selector to select your node on each page. Uses document.querySelectorAll.string"#root"
verboseVerbose logging output.booleanfalse
fixPseudoAttempt to insert real elements in place of pseudo-elementsbooleanfalse
puppeteerOptionsOptions to be passed directly to puppeteer.launch. See puppeteer docs for usage.object{}
removePreviewMarginRemove preview margin from the iframe body.booleantrue
layoutByGroup symbols in the sketch output by the "kind" or "group" key"kind" | "group"null
outputByWrite multiple sketch files by "kind" or the "group" key"kind" | "group"null

Example configurations

Basic

Automatically detect the stories, outputting two viewports for each story in a single Sketch file as symbols.

module.exports = {
  output: "dist/great-ui.asketch.json",
  input: "dist/iframe.html", // Same as default
  pageTitle: "great-ui"
};

Manual stories

Manually define stories to have granular control over what stories are output. This might help if you're getting empty output, since some stories may break story2sketch.

module.exports = {
  stories: [
    {
      kind: "Buttons/Button",
      stories: [
        {
          name: "Button"
        }
      ]
    },
    {
      kind: "Buttons/ButtonGroup",
      stories: [
        {
          name: "Default",
          displayName: "Horizontal"
        },
        {
          name: "Vertical"
        }
      ]
    },
    {
      kind: "Table",
      stories: [
        {
          name: "Table"
        }
      ]
    }
  ]
};

Custom viewports

Output symbols based on custom viewports:

module.exports = {
  viewports: {
    narrow: {
      width: 320,
      height: 1200,
      symbolPrefix: "Mobile/"
    },
    standard: {
      width: 1920,
      height: 1200,
      symbolPrefix: "Desktop/"
    }
  }
};

Split output into multiple files based on kind

Outputs one file for each Storybook "kind". Useful if managing large component libraries, allowing you to distribute smaller files.

module.exports = {
  output: "dist", // Define output directory. File names are defined by "kind"
  outputBy: "kind" // Also supports "group", see below.
};

Layout based on kind

Renders the sketch layout by kind, but keeps them in one file.

module.exports = {
  layoutBy: "kind" // Also supports "group", see below.
};

Split output into multiple files based on custom group

This example outputs two files based on a custom grouping: dist/Buttons.asketch.json and dist/Data.asketch.json.

module.exports = {
  output: "dist",
  outputBy: "group",
  stories: [
    {
      group: "Buttons",
      kind: "Buttons/Button",
      stories: [
        {
          name: "Button"
        }
      ]
    },
    {
      group: "Buttons",
      kind: "Buttons/ButtonGroup",
      stories: [
        {
          name: "Default",
          displayName: "Horizontal"
        },
        {
          name: "Vertical"
        }
      ]
    },
    {
      group: "Data",
      kind: "Table",
      stories: [
        {
          name: "Table"
        }
      ]
    }
  ]
};

Continuous Integration

If you want story2sketch to run in a CI environment you might have to add the following configuration to puppeteer in your story2sketch.config.js.

module.exports = {
  puppeteerOptions: {
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  },
  ...
};

Questions

Why does my stuff look bad?

If your stuff looks bad, either it's not supported by html-sketchapp yet (see support here), or you need to configure story2sketch.

Why don't you use react-sketchapp instead of html-sketchapp?

react-sketchapp only supports React Native, or forces you to use React Native component naming conventions. html-sketchapp supports good ol' fashioned HTML, and doesn't care what web framework you're using.

Can I use this on anything other than Storybook?

Not yet, but we have plans to add support for multiple and custom adaptors.

Download Details:

Author: Chrisvxd
Source Code: https://github.com/chrisvxd/story2sketch 
License: View license

#sketch #react #components #storybook 

Story2sketch: Convert Storybook into Sketch Symbols
Rupert  Beatty

Rupert Beatty

1667550720

Floaty: Floating Action Button for iOS

Floaty 

Floaty is simple floating action button for iOS. (formerly KCFloatingActionButton)

Why change the name?

  1. Follow the swift naming convention.
  2. KCFloatingActionButton is too long.

Preview

Preview gif

Requirements

  • iOS 10.0+
  • Swift 5.0

Installation

CocoaPods

use_frameworks!
pod 'Floaty', '~> 4.2.0'

Carthage

github "kciter/Floaty"

Swift Package Manager

Once you have your Swift package set up, adding Floaty as a dependency is as easy as adding it to the dependencies value of your Package.swift.

dependencies: [
    .package(url: "https://github.com/kciter/Floaty.git", from: "4.2.1")
]

Manually

To install manually the Floaty in an app, just drag the Floaty/*.swift file into your project.

Usage

Storyboard support

Storyboard support1 Storyboard support2

Dependent on the UIWindow.

Floaty.global.button.addItem(title: "Hello, World!")
Floaty.global.show()

Dependent on the UIWindow

Dependent on the UIViewController.

let floaty = Floaty()
floaty.addItem(title: "Hello, World!")
self.view.addSubview(floaty)

Dependent on the UIViewController

Use icon

let floaty = Floaty()
floaty.addItem("Hello, World!", icon: UIImage(named: "icon")!)
self.view.addSubview(floaty)

Use icon

Use handler

Swift

let floaty = Floaty()
floaty.addItem("I got a handler", icon: UIImage(named: "icon")!, handler: { item in
    let alert = UIAlertController(title: "Hey", message: "I'm hungry...", preferredStyle: .alert)
    alert.addAction(UIAlertAction(title: "Me too", style: .default, handler: nil))
    self.present(alert, animated: true, completion: nil)
    floaty.close()
})
self.view.addSubview(floaty)

Use handler

Use custom item

let item = FloatyItem()
item.buttonColor = UIColor.blueColor()
item.title = "Custom item"
Floaty.global.button.addItem(item: item)

Use custom item

RTL Support

You can use the rtlMode property to mirror the Floaty Button for rtl languages.

Floaty.global.rtlMode = true

Rtl Enabled Rtl Disabled

Sticky

You can use the sticky property.

floaty.sticky = true // sticking to parent UIScrollView(also UITableView, UICollectionView)
scrollView.addSubview(floaty)

Friendly Tap

You can use the friendlyTap property.

fab.friendlyTap = true
scrollView.addSubview(fab)

With the default location of the frame, the button is now tappable until the right and rightbottom of the screen. This prevents tapping behind it by accident.

Animation type

PopFadeSlide Left
Pop animation gifFade animation gifSlide left animation gif
Slide UpNone 
Slide up animation gifNone animation gif 

ToDo

  •  Labels to come at the right hand side of the FAB Item menu.

Download Details:

Author: kciter
Source Code: https://github.com/kciter/Floaty 
License: MIT license

#swift #ios #components #action #button 

Floaty: Floating Action Button for iOS
Dexter  Goodwin

Dexter Goodwin

1667460780

Rsuite: A Suite Of React Components

React Suite

React Suite is a set of react component libraries for enterprise system products. It is a well-thought-out and developer-friendly UI framework.

UI Design

React Suite Design Prototype and specification, click to view.

Supported Platforms

Browser

React Suite supports the latest, stable releases of all major browsers and platforms. IE<=10 is no longer supported since React Suite 5.0. React Suite is designed and implemented for use on modern desktop browsers rather than mobile browsers.

IEEdgeFirefoxChromeSafari
>=11>=14>= 45>= 49>= 10

Server

React Suite supports server side rendering. Support Next.js to build applications.

Supported development environment

Installation

React Suite is available as an npm package.

npm i rsuite --save

or if you prefer Yarn

yarn add rsuite

Usage

Here's a simple example

import { Button } from 'rsuite';
import 'rsuite/styles/index.less'; // or 'rsuite/dist/rsuite.min.css'

function App() {
  return <Button appearance="primary">Hello World</Button>;
}

Live preview on CodeSandbox

Documentation

You can go through full documentation or start with following sections

More examples

Vercel banner 

Previous major versions

The previous major version 4.x will no longer receive new features, and it is recommended to upgrade to the latest 5.x releases. Bug fixes for 4.x are still being supported for a period of time, and security fixes are supported until 6.x is in progress.

Documentations for previous major versions

Changelog

Detailed changes for each release are documented in the release notes.

Contribution

Make sure you've read the guidelines before you start contributing.

English | 中文版

Download Details:

Author: rsuite
Source Code: https://github.com/rsuite/rsuite 
License: MIT license

#typescript #react #components 

Rsuite: A Suite Of React Components
Nat  Grady

Nat Grady

1661248283

ShinySky: Various UI Widgets/components Not Part Of Shiny E.g. Alerts

ShinySky

Various UI widgets/components used by AnalytixWare's flagship product e.g. alerts, styled buttons

alt text

Install

To install the latest version

if (require(devtools)) install.packages("devtools")#if not already installed
devtools::install_github("AnalytixWare/ShinySky")

Quick Start

Simply the run the examples and take a look at the code included inside the example Shiny app

library(shinysky)
shinysky::run.shinysky.example()

Usage

library(shinysky)

Action Buttons

actionButton(inputId, label, styleclass = yourStyle)

Specify the style with the styleclass argument. The possible styles are "primary", "info", "success", "warning", "danger", "inverse", "link", ""

Alerts

ui.R

shinyalert(id, click.hide = TRUE, auto.close.after = NULL)

In the past clicking on the alert will hide it. Setting click.hide = FALSE can prevent this behaviour The auto.close.after can take a number and will close the alert after this many seconds.

Simply provide an id. The alert will be hidden until you show it using showshinyalert in server.R

server.R

showshinyalert(session,id,HTMLtext,styleclass)

Put some valid HTML in HTMLtext. Here you can specify the style you want using the styleclass parameter. The possible styles are "primary", "info", "success", "warning", "danger", "inverse", "link", ""

Select2

The below will create a multiple select2 with "a", "b", "c" as choices

select2Input("select2Input1","This is a multiple select2Input",choices=c("a","b","c"),selected=c("b","a"))

Video Demo

Video Demo

Typeahead Text Input

textInput.typeahead(
    id="thti"
    ,placeholder="type 'name' or '2'"
    ,local=data.frame(name=c("name1","name2"),info=c("info1","info2"))
    ,valueKey = "name"
    ,tokens=c(1,2)
    ,template = HTML("<p class='repo-language'>{{info}}</p> <p class='repo-name'>{{name}}</p> <p class='repo-description'>You need to learn more CSS to customize this further</p>")
  )

Busy Indicator

ui.R

busyIndicator(wait = 1000)

Here the wait determines how long to wait before showing the buys indicator. The default is wait=1000, which is one second. This is to prevent short computation triggering the busyIndicator.

Events Buttons

eventsButton(inputId, label, events = c("dblclick"))

This button will invalidate (become dirty) upon the events. The event does not have to be a "click", in fact the default is dblclick. You can specify multiple events. For a list of event types See: http://api.jquery.com/category/events/mouse-events/

Handsontable Input/Output

ui.R

hotable("hotable1")

This will create a handsontable which you can output using

output$hotable1 <- renderHotable({...})

server.R

something <- reactive({
    hot.to.df(input$hotable1) # this will convert your input into a data.frame
})

Do you need help with Shiny?

Contact me on Codementor

I am available for Shiny consulting! Email me to get 10% discount off the hourly rate.

Download Details:

Author: AnalytixWare
Source Code: https://github.com/AnalytixWare/ShinySky 
License: View license

#r #ui #widgets #components 

ShinySky: Various UI Widgets/components Not Part Of Shiny E.g. Alerts
Lawson  Wehner

Lawson Wehner

1660309080

FO_components: A Collection Of angularDart Components for Common

FoComponents

A collection of AngularDart components for dealing with data and user input in admin-like apps

Icons

FoComponents uses Material Icons by default. Include the following snippet in the <head> section of your index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

Custom theme

FoComponents inherits font/typography of the host application. We also encourage you to set your own color theme using the fo-colors mixin.

@import "package:fo_components/mixins";
@include fo-colors($primaryColor: red, $secondaryColor: green, $alertColor: red);

Many of the components can also be customized individually, see _mixins.scss under each component for details.

Installing

Use this package as a library

Depend on it

Run this command:

With Dart:

 $ dart pub add fo_components

With Flutter:

 $ flutter pub add fo_components

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):

dependencies:
  fo_components: ^3.1.4

Alternatively, your editor might support dart pub get or flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:fo_components/fo_components.dart';

example/README.md

Getting started

FoComponents is a collection of AngularDart 7.0.2 components. If you are unfamiliar with AngularDart, get started here: https://angulardart.xyz/

Some of the components uses Material Icons, include the following in your index.html <head>

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Documentation is a work in progress, in the meantime please refer to the components source https://github.com/afpatmin/fo_components/tree/master/lib/components

FoComponents Gallery:

https://afpatmin.github.io/fo_components/

Components Gallery: https://afpatmin.github.io/fo_components/

Download Details:

Author: Afpatmin
Source Code: https://github.com/afpatmin/fo_components 
License: MIT license

#flutter #dart #components 

FO_components: A Collection Of angularDart Components for Common
Hunter  Krajcik

Hunter Krajcik

1659733740

Helpful_components: Provides Helpful UI Components

Helpful_components

This package provides some very helpful components to use with your app.

Installing

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add helpful_components

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  helpful_components: ^0.2.0

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:helpful_components/helpful_components.dart';

Author: Vishnuagbly
Source Code: https://github.com/vishnuagbly/helpful_components 
License: GPL-2.0 license

#flutter #dart #components 

Helpful_components: Provides Helpful UI Components
Mike  Kozey

Mike Kozey

1659210720

Z_Components: A Package Composed By A Series Of Components Whose Goal

Z_Components

Z_Components is a package composed by a series of components whose goal is to facilitate, optimize and accelerate the development of iOS and Android applications by Zellar.

These components are based on the company's internal StyleGuide, which was created from Cupertino and Material Design principles, in the intent to match them with Zellar's visual identity.

A small example of how to use:

import 'package:z_components/components/z_button.dart';
import 'package:z_components/components/z_picker.dart';

          new ZButton(
                zButtonType: ZButtonType.isOutlined,
                onPressed: () {
                  new ZPicker(
                    context: context,
                    initialDate: DateTime.now(),
                    lastDate: DateTime(2090),
                    firstDate: DateTime(1090),
                    onTimerDurationChanged: (date) {
                      date;
                    },
                  );
                },
                text: "Outlined"),

Installing

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add z_components

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  z_components: ^0.9.40+13

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:z_components/api/api-settings.dart';
import 'package:z_components/api/arquivo/arquivo-service.dart';
import 'package:z_components/api/arquivo/i-arquivo-service.dart';
import 'package:z_components/api/colaborador-documento/colaborador-documento.dart';
import 'package:z_components/api/colaborador-documento/i-colaborador-documento-service.dart';
import 'package:z_components/api/colaborador/colaborador-service.dart';
import 'package:z_components/api/colaborador/i-colaborador-service.dart';
import 'package:z_components/api/confirmar-senha/confirmar-senha-service.dart';
import 'package:z_components/api/confirmar-senha/i-confirmar-senha-service.dart';
import 'package:z_components/api/conta/conta-service.dart';
import 'package:z_components/api/conta/i-conta-service.dart';
import 'package:z_components/api/contas/contas-service.dart';
import 'package:z_components/api/contas/i-contas-service.dart';
import 'package:z_components/api/endereco/endereco-service.dart';
import 'package:z_components/api/endereco/i-endereco-service.dart';
import 'package:z_components/api/formulario/formulario-service.dart';
import 'package:z_components/api/formulario/i-formulario-service.dart';
import 'package:z_components/api/identity-server/i-identity-server.dart';
import 'package:z_components/api/identity-server/identity-server.dart';
import 'package:z_components/api/input/colaborador-documento-input.dart';
import 'package:z_components/api/quadro-pessoal-service.dart';
import 'package:z_components/api/service.dart';
import 'package:z_components/api/teste-conexao/i-teste-conexao-service.dart';
import 'package:z_components/api/teste-conexao/teste-conexao-service.dart';
import 'package:z_components/api/token-parser.dart';
import 'package:z_components/api/user-info/i-user-info-service.dart';
import 'package:z_components/api/user-info/user-info-service.dart';
import 'package:z_components/api/z-estrutura-empresa/i-estrutura-epresa-service.dart';
import 'package:z_components/api/z-estrutura-empresa/nivel.dart';
import 'package:z_components/api/z-estrutura-empresa/z-estrutura-empresa-service.dart';
import 'package:z_components/api/z-log-service.dart';
import 'package:z_components/api/z-ponto/i-zponto-service.dart';
import 'package:z_components/api/z-ponto/zponto-service.dart';
import 'package:z_components/api/zcargo-service.dart';
import 'package:z_components/api/zcolaborador-service.dart';
import 'package:z_components/api/zempresa-service.dart';
import 'package:z_components/api/zescala-service.dart';
import 'package:z_components/api/zlocal-service.dart';
import 'package:z_components/api/zusuario-service.dart';
import 'package:z_components/components/confirmacao-de-previsto/atualizar-dados-previsto.dart';
import 'package:z_components/components/confirmacao-de-previsto/confirmar-previsto.dart';
import 'package:z_components/components/confirmar-senha/confirmar-senha.dart';
import 'package:z_components/components/espelho-ponto/dialog-ocorrencia.dart';
import 'package:z_components/components/espelho-ponto/espelho-de-ponto-view.dart';
import 'package:z_components/components/espelho-ponto/espelho-ponto.dart';
import 'package:z_components/components/event/event-manager.dart';
import 'package:z_components/components/event/event.dart';
import 'package:z_components/components/event/i-event-manager.dart';
import 'package:z_components/components/filtro/filter-expression.dart';
import 'package:z_components/components/filtro/filtro-campo.dart';
import 'package:z_components/components/filtro/paginated-list.dart';
import 'package:z_components/components/filtro/z-response.dart';
import 'package:z_components/components/filtro/z-searchbar.dart';
import 'package:z_components/components/fluxo-admin/detalhe-usuario-view.dart';
import 'package:z_components/components/fluxo-admin/detalhe-usuario.dart';
import 'package:z_components/components/fluxo-admin/listagem-aplicativos-view.dart';
import 'package:z_components/components/fluxo-admin/listagem-aplicativos.dart';
import 'package:z_components/components/fluxo-admin/listagem-apps-view.dart';
import 'package:z_components/components/fluxo-admin/listagem-apps.dart';
import 'package:z_components/components/fluxo-admin/listagem-usuario-view.dart';
import 'package:z_components/components/fluxo-admin/listagem-usuario.dart';
import 'package:z_components/components/fluxo-admin/modulos-view.dart';
import 'package:z_components/components/fluxo-admin/modulos.dart';
import 'package:z_components/components/fluxo-admin/usuarios-view.dart';
import 'package:z_components/components/fluxo-admin/usuarios.dart';
import 'package:z_components/components/informacoes-organizacao/informacoes-organizacao-view.dart';
import 'package:z_components/components/informacoes-organizacao/informacoes-organizacao.dart';
import 'package:z_components/components/listagem-contas.dart';
import 'package:z_components/components/listagem-contas/detalhe-conta-view.dart';
import 'package:z_components/components/listagem-contas/detalhe-conta.dart';
import 'package:z_components/components/listagem-contas/listagem-contas-view.dart';
import 'package:z_components/components/listagem-contas/listagem-contas.dart';
import 'package:z_components/components/modulo/detalhe-aplicativo-view.dart';
import 'package:z_components/components/modulo/detalhe-aplicativo.dart';
import 'package:z_components/components/modulo/detalhe-modulo-view.dart';
import 'package:z_components/components/modulo/detalhe-modulo.dart';
import 'package:z_components/components/modulo/detalhe-usuario-view.dart';
import 'package:z_components/components/modulo/detalhe-usuario.dart';
import 'package:z_components/components/utils/dialog-utils.dart';
import 'package:z_components/components/utils/documento-status.dart';
import 'package:z_components/components/utils/icone-voltar.dart';
import 'package:z_components/components/utils/novo_token.dart';
import 'package:z_components/components/utils/svg.dart';
import 'package:z_components/components/utils/theme.dart';
import 'package:z_components/components/z-aba/z-aba-view.dart';
import 'package:z_components/components/z-aba/z-aba-viewmodel.dart';
import 'package:z_components/components/z-aba/z-aba.dart';
import 'package:z_components/components/z-alert-custom.dart';
import 'package:z_components/components/z-alert-dialog.dart';
import 'package:z_components/components/z-appbar.dart';
import 'package:z_components/components/z-baseline.dart';
import 'package:z_components/components/z-button-card-box.dart';
import 'package:z_components/components/z-cadastro-usuario.dart';
import 'package:z_components/components/z-card-appbar.dart';
import 'package:z_components/components/z-cargo.dart';
import 'package:z_components/components/z-check-cpf.dart';
import 'package:z_components/components/z-checkbox/z-checkbox-view.dart';
import 'package:z_components/components/z-checkbox/z-checkbox.dart';
import 'package:z_components/components/z-collection/z-collection-bottomsheet.dart';
import 'package:z_components/components/z-collection/z-collection-item.dart';
import 'package:z_components/components/z-collection/z-collection-list.dart';
import 'package:z_components/components/z-collection/z-collection.dart';
import 'package:z_components/components/z-conta/z-conta-view.dart';
import 'package:z_components/components/z-conta/z-conta.dart';
import 'package:z_components/components/z-cuppertino-tabbar.dart';
import 'package:z_components/components/z-dashboard-chamados/z-dashboard-chamados.dart';
import 'package:z_components/components/z-documentos/presenter/foto.dart';
import 'package:z_components/components/z-documentos/presenter/lista-documentos.dart';
import 'package:z_components/components/z-documentos/presenter/scan-documento.dart';
import 'package:z_components/components/z-documentos/view/foto-view.dart';
import 'package:z_components/components/z-documentos/view/lista-documentos-view.dart';
import 'package:z_components/components/z-documentos/view/scan-documento-view.dart';
import 'package:z_components/components/z-dynamic-form/z-dynamic-form-view.dart';
import 'package:z_components/components/z-dynamic-form/z-dynamic-form.dart';
import 'package:z_components/components/z-empresa.dart';
import 'package:z_components/components/z-endereco/z-input-campos-endereco.dart';
import 'package:z_components/components/z-endereco/z-input-endereco.dart';
import 'package:z_components/components/z-escala.dart';
import 'package:z_components/components/z-estrutura-empresa/bloc/z-estrutura-emprersa-actions.dart';
import 'package:z_components/components/z-estrutura-empresa/bloc/z-estrutura-empresa-cubit-model.dart';
import 'package:z_components/components/z-estrutura-empresa/bloc/z-estrutura-empresa-cubit.dart';
import 'package:z_components/components/z-estrutura-empresa/z-estrutura-empresa.dart';
import 'package:z_components/components/z-expansion-tile.dart';
import 'package:z_components/components/z-expendable-item-tile.dart';
import 'package:z_components/components/z-float-button.dart';
import 'package:z_components/components/z-form/presenter/z-form.dart';
import 'package:z_components/components/z-form/view/z-form-view.dart';
import 'package:z_components/components/z-form/view/z-form-viewmodel.dart';
import 'package:z_components/components/z-foto-colaborador/z-foto-colaborador.dart';
import 'package:z_components/components/z-header-expansion.dart';
import 'package:z_components/components/z-header.dart';
import 'package:z_components/components/z-hero-transition-class.dart';
import 'package:z_components/components/z-hora-padrao.dart';
import 'package:z_components/components/z-hora-um-campo.dart';
import 'package:z_components/components/z-identity-server/js-channels.dart';
import 'package:z_components/components/z-identity-server/login/z-identity-server.dart';
import 'package:z_components/components/z-identity-server/register/z-register-user.dart';
import 'package:z_components/components/z-identity-server/token-info.dart';
import 'package:z_components/components/z-identity-server/vincular-conta/vinculo-conta.dart';
import 'package:z_components/components/z-identity-server/z-token-viewmodel.dart';
import 'package:z_components/components/z-injector/z-injector.dart';
import 'package:z_components/components/z-inputs/z-input-celular.dart';
import 'package:z_components/components/z-inputs/z-input-cep.dart';
import 'package:z_components/components/z-inputs/z-input-cnpj.dart';
import 'package:z_components/components/z-inputs/z-input-cpf.dart';
import 'package:z_components/components/z-inputs/z-input-data-de-nascimento.dart';
import 'package:z_components/components/z-inputs/z-input-data-expiracao.dart';
import 'package:z_components/components/z-inputs/z-input-data-padrao.dart';
import 'package:z_components/components/z-inputs/z-input-email.dart';
import 'package:z_components/components/z-inputs/z-input-generic.dart';
import 'package:z_components/components/z-inputs/z-input-name.dart';
import 'package:z_components/components/z-inputs/z-input-telefone-fixo.dart';
import 'package:z_components/components/z-item-tile-candidato.dart';
import 'package:z_components/components/z-item-tile-card-basico.dart';
import 'package:z_components/components/z-item-tile-convite.dart';
import 'package:z_components/components/z-item-tile-lista-candidato.dart';
import 'package:z_components/components/z-item-tile-modulo-adm.dart';
import 'package:z_components/components/z-item-tile-modulo-gestao.dart';
import 'package:z_components/components/z-item-tile-os.dart';
import 'package:z_components/components/z-item-tile-pergunta-adicional.dart';
import 'package:z_components/components/z-item-tile-usuario-adm.dart';
import 'package:z_components/components/z-item-tile-usuario.dart';
import 'package:z_components/components/z-item-tile.dart';
import 'package:z_components/components/z-local.dart';
import 'package:z_components/components/z-log/i-z-log-repository.dart';
import 'package:z_components/components/z-log/z-log-entity.dart';
import 'package:z_components/components/z-log/z-log-repository.dart';
import 'package:z_components/components/z-log/z-log.dart';
import 'package:z_components/components/z-new-tree-view-zgestor.dart';
import 'package:z_components/components/z-new-treeview.dart';
import 'package:z_components/components/z-news.dart';
import 'package:z_components/components/z-nome-reduzido.dart';
import 'package:z_components/components/z-perfil-colaborador.dart';
import 'package:z_components/components/z-perfil-item.dart';
import 'package:z_components/components/z-perfil.dart';
import 'package:z_components/components/z-photo-view-animation.dart';
import 'package:z_components/components/z-pin-senha.dart';
import 'package:z_components/components/z-processo-seletivo/models/processo-seletivo.dart';
import 'package:z_components/components/z-processo-seletivo/z-card-processo-seletivo.dart';
import 'package:z_components/components/z-progress-dialog.dart';
import 'package:z_components/components/z-radio-group/z-dynamic-form-type.dart';
import 'package:z_components/components/z-radio-group/z-radio-group-view.dart';
import 'package:z_components/components/z-radio-group/z-radio-group.dart';
import 'package:z_components/components/z-radio-group/z-radio-item.dart';
import 'package:z_components/components/z-selection/dialog-itens-selecionados.dart';
import 'package:z_components/components/z-selection/z-selection-item.dart';
import 'package:z_components/components/z-selection/z-selection-list.dart';
import 'package:z_components/components/z-selection/z-selection.dart';
import 'package:z_components/components/z-sequencia/sequencia.dart';
import 'package:z_components/components/z-sequencia/z-sequencia-calendario.dart';
import 'package:z_components/components/z-sequencia/z-sequencia.dart';
import 'package:z_components/components/z-size.dart';
import 'package:z_components/components/z-tab-bar/z-tab-bar-viewmodel.dart';
import 'package:z_components/components/z-tab-bar/z-tab-bar.dart';
import 'package:z_components/components/z-tab-bar/z-tav-bar-view.dart';
import 'package:z_components/components/z-take-photo.dart';
import 'package:z_components/components/z-text.dart';
import 'package:z_components/components/z-tile.dart';
import 'package:z_components/components/z-tree-view.dart';
import 'package:z_components/components/z-user-info/z-user-info-view.dart';
import 'package:z_components/components/z-user-info/z-user-info.dart';
import 'package:z_components/components/z-videos/genthumbnail.dart';
import 'package:z_components/components/z-videos/video.dart';
import 'package:z_components/components/z-videos/z-videos.dart';
import 'package:z_components/components/z_button.dart';
import 'package:z_components/components/z_loading.dart';
import 'package:z_components/components/z_navigationbar.dart';
import 'package:z_components/components/z_picker.dart';
import 'package:z_components/components/z_switch.dart';
import 'package:z_components/components/z_tabbar.dart';
import 'package:z_components/components/z_text_field.dart';
import 'package:z_components/components/zp-grafico.dart';
import 'package:z_components/config/z-button-type.dart';
import 'package:z_components/config/z-dialog.dart';
import 'package:z_components/config/z-horario-tye.dart';
import 'package:z_components/config/z-mask.dart';
import 'package:z_components/config/z-platform.dart';
import 'package:z_components/config/z-tipo-header.dart';
import 'package:z_components/config/z-tipo-senha.dart';
import 'package:z_components/config/z-tipo-textos.dart';
import 'package:z_components/config/z-tipos-baseline.dart';
import 'package:z_components/config/z-type-tile.dart';
import 'package:z_components/i-serializable.dart';
import 'package:z_components/i-view.dart';
import 'package:z_components/infra/abstract-repository.dart';
import 'package:z_components/infra/db/database-utils.dart';
import 'package:z_components/infra/db/database.dart';
import 'package:z_components/infra/entities/z-entity.dart';
import 'package:z_components/infra/interfaces/i-command.dart';
import 'package:z_components/infra/interfaces/i-context.dart';
import 'package:z_components/infra/interfaces/i-query.dart';
import 'package:z_components/infra/schema/z-column.dart';
import 'package:z_components/infra/schema/z-table.dart';
import 'package:z_components/interface/i-zcargo-service.dart';
import 'package:z_components/interface/i-zcolaborador-service.dart';
import 'package:z_components/interface/i-zempresa-service.dart';
import 'package:z_components/interface/i-zescala-service.dart';
import 'package:z_components/interface/i-zlocal-service.dart';
import 'package:z_components/interface/i-zusuario-service.dart';
import 'package:z_components/settings/api-settings.dart';
import 'package:z_components/styles/main-style.dart';
import 'package:z_components/styles/media-query-parameters.dart';
import 'package:z_components/styles/media-query.dart';
import 'package:z_components/v2/i_ui_state.dart';
import 'package:z_components/v2/z_check_box.dart';
import 'package:z_components/v2/z_icon.dart';
import 'package:z_components/v2/z_input_field/z_input_field.dart';
import 'package:z_components/v2/z_input_field/z_input_field_date.dart';
import 'package:z_components/v2/z_input_field/z_input_field_email.dart';
import 'package:z_components/v2/z_input_field/z_input_field_number.dart';
import 'package:z_components/v2/z_input_field/z_input_field_password.dart';
import 'package:z_components/v2/z_input_field/z_input_field_text.dart';
import 'package:z_components/v2/z_outlined_button.dart';
import 'package:z_components/v2/z_radio_button.dart';
import 'package:z_components/v2/z_text.dart';
import 'package:z_components/v2/z_theme.dart';
import 'package:z_components/view-model/apo-batida-detalhe-viewmodel.dart';
import 'package:z_components/view-model/app-usuario-conta-viewmodel.dart';
import 'package:z_components/view-model/app-view-model.dart';
import 'package:z_components/view-model/arquivo-viewmodel.dart';
import 'package:z_components/view-model/atualizar-dados-viewmodel.dart';
import 'package:z_components/view-model/batida-viewmodel.dart';
import 'package:z_components/view-model/buscarinfo-viewmodel.dart';
import 'package:z_components/view-model/cargo-viewmodel.dart';
import 'package:z_components/view-model/centrocusto-viewmodel.dart';
import 'package:z_components/view-model/colaborador-documento-campo-viewmodel.dart';
import 'package:z_components/view-model/colaborador-documento-imagem-viewmodel.dart';
import 'package:z_components/view-model/colaborador-documento-viewmodel.dart';
import 'package:z_components/view-model/colaborador-viewmodel.dart';
import 'package:z_components/view-model/company-components-viewmodel.dart';
import 'package:z_components/view-model/conta-v2-viewmodel.dart';
import 'package:z_components/view-model/conta-view-model.dart';
import 'package:z_components/view-model/conta.dart';
import 'package:z_components/view-model/documento-campo.dart';
import 'package:z_components/view-model/endereco-viewmodel.dart';
import 'package:z_components/view-model/escala-viewmodel.dart';
import 'package:z_components/view-model/espelhodeponto-viewmodel.dart';
import 'package:z_components/view-model/filtro-viewmodel.dart';
import 'package:z_components/view-model/foto-detalhe-viewmodel.dart';
import 'package:z_components/view-model/historico-view-model.dart';
import 'package:z_components/view-model/info-organizacao-viewmodel.dart';
import 'package:z_components/view-model/item-busca-viewmodel.dart';
import 'package:z_components/view-model/item-tile-convite-viewmodel.dart';
import 'package:z_components/view-model/lancamento-ocorrencia-viewmodel.dart';
import 'package:z_components/view-model/modulo-conta-viewmodel.dart';
import 'package:z_components/view-model/modulo-viewmodel.dart';
import 'package:z_components/view-model/noticia-viewmodel.dart';
import 'package:z_components/view-model/perfil-viewmodel.dart';
import 'package:z_components/view-model/posicao-alocacao-sequencia-viewmodel.dart';
import 'package:z_components/view-model/usuario-adm-viewmodel.dart';
import 'package:z_components/view-model/usuario-conta-viewmodel.dart';
import 'package:z_components/view-model/usuario-viewmodel.dart';
import 'package:z_components/view-model/z-checkbox-viewmodel.dart';
import 'package:z_components/view-model/z-dynamic-form-viewmodel.dart';
import 'package:z_components/view-model/z-dynamic-model-viewmodel.dart';
import 'package:z_components/view-model/z-log-viewmodel.dart';
import 'package:z_components/view-model/z-tree-view-viewmodel.dart';
import 'package:z_components/z-item-tile-conta.dart';

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:z_components/components/z-cargo.dart';
import 'package:z_components/components/z-escala.dart';
import 'package:z_components/components/z-baseline.dart';
import 'package:flutter/cupertino.dart';
import 'package:z_components/components/utils/theme.dart';
import 'package:z_components/components/z-alert-dialog.dart';
import 'package:z_components/config/z-dialog.dart';
import 'package:z_components/components/z-progress-dialog.dart';
import "package:z_components/view-model/batida-viewmodel.dart";
import "package:z_components/view-model/z-tree-view-viewmodel.dart";
import 'package:z_components/components/z-inputs/z-input-celular.dart';
import 'dart:convert' show json;
import 'package:z_components/view-model/atualizar-dados-viewmodel.dart';

import 'package:z_components/components/confirmacao-de-previsto/confirmar-previsto.dart';
import 'package:z_components/view-model/z-dynamic-form-viewmodel.dart';
import 'package:z_components/api/formulario/i-formulario-service.dart';
import 'package:z_components/api/formulario/formulario-service.dart';
import 'package:z_components/components/utils/dialog-utils.dart';
import 'package:z_components/components/z-sequencia/z-sequencia.dart';
import 'package:z_components/components/z-collection/z-collection.dart';
import 'package:z_components/components/z-collection/z-collection-item.dart';
import 'package:intl/date_symbol_data_local.dart';
import 'package:z_components/components/z-estrutura-empresa/z-estrutura-empresa.dart';
import 'package:z_components_example/main-components.dart';
import 'package:z_components_example/main-testing.dart';
import 'package:z_components_example/material_forms_sample.dart';
import 'package:z_components_example/tela-teste-card.dart';
import 'package:z_components/components/utils/theme.dart';

import 'main-components.dart';
import 'main_v2.dart';

void main() {
  initializeDateFormatting().then((_) => runApp(MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: CustomTheme.appTheme,
      home: new MainComponents(),
    );
  }
}

class ComponentExemploClasse extends StatefulWidget {
  @override
  _ComponentExemploClasseState createState() => _ComponentExemploClasseState();
}

class _ComponentExemploClasseState extends State<ComponentExemploClasse> {
  var controllerEmail = new TextEditingController();
  var controlerPadrao = new TextEditingController();
  var controllerNome = new TextEditingController();
  var controllerCPF = new TextEditingController();
  var controllerCelular = new TextEditingController();
  var controllerData = new TextEditingController();
  var controllerSenha = new TextEditingController();
  var controllerRepetirSenha = new TextEditingController();
  var controllerRua = new TextEditingController();
  var controllerCEP = new TextEditingController();
  var controllerCNPJ = new TextEditingController();
  var controllerNumero = new TextEditingController();
  var textEditingControllerNome = new TextEditingController();
  var textEditingControllerNomeB = new TextEditingController();

  final key = GlobalKey<ZProgressDialogState>();
  FocusNode inputPadraoFocus;
  FocusNode nomeFocus;
  FocusNode emailFocus;
  FocusNode cpfFocus;
  FocusNode celularFocus;
  FocusNode dataFocus;
  FocusNode ruaFocus;
  FocusNode numeroFocus;
  FocusNode cepFocus;
  FocusNode cnpjFocus;
  FocusNode focusNodeNome;
  var focusNodeNomeB = new FocusNode();

  bool value = false;
  ZBaseLine valideNome;
  ZBaseLine valideCPF;
  ZBaseLine valideData;
  ZBaseLine valideEmail;
  ZBaseLine valideCelular;
  bool isSwitched = true;

  var _controllerFim = new TextEditingController();
  var _controllerIntervalo = new TextEditingController();
  var _controllerHorarioInicio = new TextEditingController();

  var _keyEscala = new GlobalKey<ZEscalaState>();

  var _keyCargo = new GlobalKey<ZCargoState>();

  String vp;
  String nomeeee;
  String cpf;

  var _keyStatus = new GlobalKey<ZCollectionState>();

  double valuess = 0.1;

  List<String> titulos = [
    "Lista de Documentos",
    "Espelho de Ponto",
    "Gestão de Ponto",
    "Atestados",
    "Histórico Alocações",
    "Histórico Status",
    "Histórico FériasHistórico Férias",
    "Histórico Afastamento",
    "Dependentes"
  ];
  List<IconData> icones = [
    Icons.assignment,
    Icons.list,
    Icons.add_to_home_screen,
    Icons.attach_file,
    Icons.fastfood,
    Icons.add_circle_outline,
    Icons.backup,
    Icons.voice_chat,
    Icons.view_stream
  ];

  List<dynamic> listaOnTap = [
    () {
      print("1");
    },
    () {
      print("2");
    },
    () {
      print("3");
    },
    () {
      print("4");
    },
    () {
      print("5");
    },
    () {
      print("6");
    },
    () {
      print("7");
    },
    () {
      print("8");
    },
    () {
      print("9");
    },
  ];

  List<ZTreeViewViewModel> zTreeViewViewModel;

  List<ZTreeViewViewModel> zTreeViewViewModel2;

  List<ZTreeViewViewModel> zTreeViewViewModel2Filho;
  List<ZTreeViewViewModel> zTreeViewViewModel2FilhoFilho;
  List<ZTreeViewViewModel> zTreeViewViewModel2FilhoFilhoFilho;

  List<ZTreeViewViewModel> zTreeViewViewModel3;

  List<ZCollectionItem> listaTesteSkipTake;

  List<ZBatidaViewModel> listBatidas = new List();
  List<ZDynamicFormViewModel> lista = new List();
  List<ZDynamicFormViewModel> listaEnvio = new List();
  IFormularioService iFormularioService = new FormularioService(
      "eyJhbGciOiJSUzI1NiIsImtpZCI6ImM0YWQ5OTFiMzk0NDIzNzEzZDlkZGI3ZWQzYzRlN2Q3IiwidHlwIjoiSldUIn0.eyJuYmYiOjE2MjIyMTExMDYsImV4cCI6MTYyMjIxNDcwNiwiaXNzIjoiaHR0cHM6Ly9pZGVudGl0eS1zZXJ2ZXItZGV2LnplbGxhci5jb20uYnIiLCJhdWQiOlsiaHR0cHM6Ly9pZGVudGl0eS1zZXJ2ZXItZGV2LnplbGxhci5jb20uYnIvcmVzb3VyY2VzIiwibW9sdHJlcy5hY2Vzc28uYXBpIl0sImNsaWVudF9pZCI6IlpHZXN0b3IiLCJzdWIiOiJiYmMwN2RkYS1hMzQ0LTQ3ZWQtOTRkNC1mZDg0NTI2Y2E3ODgiLCJhdXRoX3RpbWUiOjE2MjIxMjcyMjYsImlkcCI6ImxvY2FsIiwiQXNwTmV0LklkZW50aXR5LlNlY3VyaXR5U3RhbXAiOiJPWjRZREFURVFYRUM3RlNHTjRHNFhDTkIyN0c1UFhBUiIsImFjY291bnQiOiJaZWxsYXIyIiwiaWRBY2NvdW50IjoiNDg2YTQ5YjMtNDdkMS00ZDc2LTgwZGYtMDc5ZWI4MmQ2ZDhmIiwiaWRDb2xhYm9yYWRvciI6IjE2QTgwNDE1LUQyODItNEFDQS04NDMxLThDN0YwNjkzQjE3QiIsInByZWZlcnJlZF91c2VybmFtZSI6IjQzOC4xOTcuNzE4LTE2IiwiZW1haWwiOiJibGFibGFAZ21haWwuY29tIiwiZW1haWxfdmVyaWZpZWQiOmZhbHNlLCJwaG9uZV9udW1iZXJfdmVyaWZpZWQiOmZhbHNlLCJuYW1lIjoiRW56byBUaWV6emkiLCJwaG9uZV9udW1iZXIiOiIoMTEpOSA5NzE3LTI1NDQiLCJzY29wZSI6WyJvcGVuaWQiLCJwcm9maWxlIiwiZW1haWwiLCJtb2x0cmVzLmFjZXNzby5hcGkuZnVsbCIsIm9mZmxpbmVfYWNjZXNzIl0sImFtciI6WyJwd2QiXX0.hr8JAZBnpOsDvzXgujbajDIAUFp_yZZHXhTHivB-4titwj3_zClaLQyZL1NlW525vknWlD8hY6S1c3mlq6g9Ws2P_sxjhRqE4eUoEJQ6-6UgUdHZDTJSdIZu7B6bp1SY3Al5QPkyLfffAmG0fAFQLTXu746ISVR_dSjOuxidnpT6KsKHG48VLUgpJd9tS3X5hUanNF3oU-rnbiLtt_5TSYTKqrIDdBCW5LxG52MMoWFXYfQtCBZUb_Bd6q68_DAdsyVCxhvmnGFSzJSLyxdQhjkHPa-MWJK4hCRecvZXQNWx-QlrzjuU0F0UcIqSMtUsIq99gkh3XPoDJi31mgKxZg");
  DialogUtils _dialogUtils;
  List<String> orem = [
    "ENTRADA",
    "SAÍDA",
    "ENTRADA",
    "SAÍDA",
    "ENTRADA",
    "SAÍDA"
  ];

  @override
  void initState() {
    zTreeViewViewModel2FilhoFilho = new List();
    zTreeViewViewModel2 = new List();
    zTreeViewViewModel = new List();
    zTreeViewViewModel3 = new List();
    zTreeViewViewModel2Filho = new List();
    zTreeViewViewModel2FilhoFilhoFilho = new List();
    listaTesteSkipTake = new List();

    listaTesteSkipTake = [
      ZCollectionItem(
          chave: "Universidade", titulo: "Universidade", valor: "Universidade"),
      ZCollectionItem(chave: "1", titulo: "1", valor: "1"),
      ZCollectionItem(chave: "2", titulo: "2", valor: "2"),
      ZCollectionItem(chave: "3", titulo: "3", valor: "3"),
      ZCollectionItem(chave: "4", titulo: "4", valor: "4"),
      ZCollectionItem(chave: "5", titulo: "5", valor: "5"),
      ZCollectionItem(chave: "6", titulo: "6", valor: "6"),
      ZCollectionItem(chave: "7", titulo: "7", valor: "7"),
      ZCollectionItem(chave: "8", titulo: "8", valor: "8"),
      ZCollectionItem(chave: "9", titulo: "9", valor: "9"),
      ZCollectionItem(chave: "10", titulo: "10", valor: "10"),
      ZCollectionItem(chave: "11", titulo: "11", valor: "11"),
      ZCollectionItem(chave: "12", titulo: "12", valor: "12"),
      ZCollectionItem(chave: "13", titulo: "13", valor: "13"),
      ZCollectionItem(chave: "14", titulo: "14", valor: "14"),
      ZCollectionItem(chave: "15", titulo: "15", valor: "15"),
      ZCollectionItem(chave: "16", titulo: "16", valor: "16"),
      ZCollectionItem(chave: "17", titulo: "17", valor: "17"),
      ZCollectionItem(chave: "18", titulo: "18", valor: "18"),
      ZCollectionItem(chave: "19", titulo: "19", valor: "19"),
      ZCollectionItem(chave: "20", titulo: "20", valor: "20"),
    ];
    zTreeViewViewModel2FilhoFilhoFilho = [
      new ZTreeViewViewModel(
          nome: "FILHOF FO FLHIFO",
          idNivelPai: "118",
          idNivel: "hghgh",
          filhos: zTreeViewViewModel3),
    ];
    super.initState();
    zTreeViewViewModel2FilhoFilho = [
      new ZTreeViewViewModel(
          nome: "FILHOF FO FLHIFO",
          idNivelPai: "11",
          idNivel: "118",
          filhos: zTreeViewViewModel2FilhoFilhoFilho),
    ];

    zTreeViewViewModel2 = [
      new ZTreeViewViewModel(
          nome: "sdfsdf",
          idNivelPai: "1",
          idNivel: "11",
          filhos: zTreeViewViewModel2FilhoFilho),
      new ZTreeViewViewModel(
          nome: "ert ",
          idNivelPai: "1",
          idNivel: "12",
          filhos: zTreeViewViewModel3),
      new ZTreeViewViewModel(
          nome: "ert ert",
          idNivelPai: "1",
          idNivel: "32",
          filhos: zTreeViewViewModel3),
      new ZTreeViewViewModel(
          nome: "Huilf",
          idNivelPai: "1",
          idNivel: "52",
          filhos: zTreeViewViewModel3)
    ];

    zTreeViewViewModel = [
      new ZTreeViewViewModel(
          nome:
              "posicao alocao alocaocalocaro alocao alocaocalocaro alocaocalocaro ",
          idNivel: "1",
          filhos: zTreeViewViewModel2),
      new ZTreeViewViewModel(
          nome: "JUsytificativadss vAMOS VEWR QUE MEH MAIS",
          idNivel: "2",
          filhos: zTreeViewViewModel2Filho),
    ];

    zTreeViewViewModel2Filho = [
      new ZTreeViewViewModel(
          nome: "Huilf",
          idNivelPai: "2",
          idNivel: "52",
          filhos: zTreeViewViewModel3)
    ];

    listBatidas = [
      ZBatidaViewModel(ordem: "ENTRADA", horarioBatidaRealizada: "07:30"),
      ZBatidaViewModel(
          ordem: "INÍCIO INTERVALO", horarioBatidaRealizada: "12:30"),
      ZBatidaViewModel(ordem: "FIM INTERVALO", horarioBatidaRealizada: "13:30"),
      ZBatidaViewModel(ordem: "SAÍDA", horarioBatidaRealizada: "14:30"),
      ZBatidaViewModel(ordem: "ENTRADA", horarioBatidaRealizada: "18:00"),
    ];
    _dialogUtils = new DialogUtils(context);
    focusNodeNome = new FocusNode();
    nomeFocus = new FocusNode();
    emailFocus = new FocusNode();
    cpfFocus = new FocusNode();
    celularFocus = new FocusNode();
    dataFocus = new FocusNode();
    ruaFocus = new FocusNode();
    numeroFocus = new FocusNode();
    cepFocus = new FocusNode();
    cnpjFocus = new FocusNode();
    inputPadraoFocus = new FocusNode();

    //montarFormulario();
//    await montarLista();
//    await enviarFormulario();
    // super.initState();

    // _db = new ZDatabase(version: 2, dbName: "teste", entities: [new Pessoa(), new Monstro()]);

    /*  _db.init().then((_){
      _query();
    });*/
  }

/*  void _query() async{
    IPessoaRepository rep = new PessoaRepository();

    rep.insert(new Pessoa(nome: "Andreza", idade: 20));

    IMonstroRepository _monstroRepository = new MonstroRepository();

    _monstroRepository.insert(new Monstro(nome: "Gustavo", habilidade: "Super forca"));

    var a = await rep.findById(1);
    var b = await rep.listarPessoas();


    var ma = await _monstroRepository.findById(1);

    print("");
  }*/

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () async {
            Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => ConfirmarPrevisto(
                          dadosViewModel: AtualizarDadosViewModel(
                              cargo: "Dev",
                              centroCusto: "Zellar",
                              escala: "5x2",
                              horaInicio: "08:00",
                              horaTermino: "17:00",
                              nomeColaborador: "Giuliano Ortiz Goria",
                              statusColaborador: "Ativo",
                              tempoIntervalo: "01:00"),
                        )));
          },
        ),
        body: new Container(
          padding: EdgeInsets.only(top: 50.0),
          child: new Column(
            children: <Widget>[
              /*   new Container(
              padding: EdgeInsets.only(top: 16.0),
              child: new ZInputCelular(
                themeData: CustomTheme.appTheme,
                  celularFocus: celularFocus,
                  controllerCelular: controllerCelular),
            ),
            new Divider(
              height: 1.0,
            ),
            new Container(
                padding: EdgeInsets.only(top: 16.0),
                child: new ZInputDataNascimento(themeData: CustomTheme.appTheme,
                  enabled: true,
                  dataFocus: dataFocus,
                  controllerData: controllerData,
                  onChange: (text) {},
                )),
            new Divider(
              height: 1.0,
            ),
            ZCollection(
              lista: listaTesteSkipTake,
              titulo: "Escala",
              themeData: Theme.of(context),
              onChange: (item) {},
            ),*/

              new ZSequencia(
                escala: "5x2",
                primeiroDiaEscala: "2020-12-25 00:00:00",
                themeData: CustomTheme.appTheme,
                data: DateTime.now(),
              ),
            ],
          ),
        ));
  }

  void showAlertDialogNew() async {
    showDialog(
        context: context,
        barrierDismissible: true,
        builder: (BuildContext context) => ZAlertDialog(
              zDialog: ZDialog.erro,
              child: new Column(
                children: <Widget>[
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new Container(
                        margin: const EdgeInsets.all(20),
                        child: new Text(
                          "Dialog Test",
                          style: new TextStyle(fontWeight: FontWeight.bold),
                        ),
                      )
                    ],
                  ),
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new Container(
                        padding: const EdgeInsets.only(
                          left: 10.0,
                          right: 10.0,
                          bottom: 10.0,
                        ),
                        width: MediaQuery.of(context).size.width * 0.7,
                        child: new Column(
                          children: <Widget>[
                            new Text("Este aqui eh um dialogo teste de um tipo",
                                style: new TextStyle(fontSize: 14),
                                textAlign: TextAlign.center),
                          ],
                        ),
                      )
                    ],
                  ),
                  new Divider(
                    color: const Color(0xffdbdbdb),
                  ),
                  new Container(
                    child: new InkWell(
                      borderRadius:
                          new BorderRadius.all(const Radius.circular(20.0)),
                      splashColor: const Color(0xffe6e6e6),
                      onTap: () {
                        Navigator.pop(context);
                      },
                      child: new Container(
                        padding: const EdgeInsets.all(12),
                        child: new Text(
                          "ENTENDI",
                          style: new TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                    margin: const EdgeInsets.only(bottom: 8),
                  )
                ],
              ),
            ));
  }

  void showAlertDialogNewAlert() async {
    showDialog(
        context: context,
        barrierDismissible: true,
        builder: (BuildContext context) => ZAlertDialog(
              zDialog: ZDialog.alert,
              child: new Column(
                children: <Widget>[
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new Container(
                        margin: const EdgeInsets.all(20),
                        child: new Text(
                          "Dialog Test",
                          style: new TextStyle(fontWeight: FontWeight.bold),
                        ),
                      )
                    ],
                  ),
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new Container(
                        padding: const EdgeInsets.only(
                          left: 10.0,
                          right: 10.0,
                          bottom: 10.0,
                        ),
                        width: MediaQuery.of(context).size.width * 0.7,
                        child: new Column(
                          children: <Widget>[
                            new Text("Este aqui eh um dialogo teste de um tipo",
                                style: new TextStyle(fontSize: 14),
                                textAlign: TextAlign.center),
                          ],
                        ),
                      )
                    ],
                  ),
                  new Divider(
                    color: const Color(0xffdbdbdb),
                  ),
                  new Container(
                    child: new InkWell(
                      borderRadius:
                          new BorderRadius.all(const Radius.circular(20.0)),
                      splashColor: const Color(0xffe6e6e6),
                      onTap: () {
                        Navigator.pop(context);
                      },
                      child: new Container(
                        padding: const EdgeInsets.all(12),
                        child: new Text(
                          "ENTENDI",
                          style: new TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                    margin: const EdgeInsets.only(bottom: 8),
                  )
                ],
              ),
            ));
  }

  void showAlertDialogNewSuccess() async {
    showDialog(
        context: context,
        barrierDismissible: true,
        builder: (BuildContext context) => ZAlertDialog(
              zDialog: ZDialog.sucess,
              child: new Column(
                children: <Widget>[
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new Container(
                        margin: const EdgeInsets.all(20),
                        child: new Text(
                          "Dialog Test",
                          style: new TextStyle(fontWeight: FontWeight.bold),
                        ),
                      )
                    ],
                  ),
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new Container(
                        padding: const EdgeInsets.only(
                          left: 10.0,
                          right: 10.0,
                          bottom: 10.0,
                        ),
                        width: MediaQuery.of(context).size.width * 0.7,
                        child: new Column(
                          children: <Widget>[
                            new Text("Este aqui eh um dialogo teste de um tipo",
                                style: new TextStyle(fontSize: 14),
                                textAlign: TextAlign.center),
                          ],
                        ),
                      )
                    ],
                  ),
                  new Divider(
                    color: const Color(0xffdbdbdb),
                  ),
                  new Container(
                    child: new InkWell(
                      borderRadius:
                          new BorderRadius.all(const Radius.circular(20.0)),
                      splashColor: const Color(0xffe6e6e6),
                      onTap: () {
                        Navigator.pop(context);
                      },
                      child: new Container(
                        padding: const EdgeInsets.all(12),
                        child: new Text(
                          "ENTENDI",
                          style: new TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                    margin: const EdgeInsets.only(bottom: 8),
                  )
                ],
              ),
            ));
  }

  void showAlertDialogNewNormal() async {
    showDialog(
        context: context,
        barrierDismissible: true,
        builder: (BuildContext context) => ZAlertDialog(
              zDialog: ZDialog.normal,
              child: new Column(
                children: <Widget>[
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new Container(
                        margin: const EdgeInsets.all(20),
                        child: new Text(
                          "Dialog Test",
                          style: new TextStyle(fontWeight: FontWeight.bold),
                        ),
                      )
                    ],
                  ),
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new Container(
                        padding: const EdgeInsets.only(
                          left: 10.0,
                          right: 10.0,
                          bottom: 10.0,
                        ),
                        width: MediaQuery.of(context).size.width * 0.7,
                        child: new Column(
                          children: <Widget>[
                            new Text("Este aqui eh um dialogo teste de um tipo",
                                textAlign: TextAlign.center),
                          ],
                        ),
                      )
                    ],
                  ),
                  new Divider(
                    color: const Color(0xffdbdbdb),
                  ),
                  new Container(
                    child: new InkWell(
                      borderRadius:
                          new BorderRadius.all(const Radius.circular(20.0)),
                      splashColor: const Color(0xffe6e6e6),
                      onTap: () {
                        Navigator.pop(context);
                      },
                      child: new Container(
                        padding: const EdgeInsets.all(12),
                        child: new Text(
                          "ENTENDI",
                          style: new TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                    margin: const EdgeInsets.only(bottom: 8),
                  )
                ],
              ),
            ));
  }

  void showAlertDialogNewProgress() async {
    showDialog(
        context: context,
        barrierDismissible: true,
        builder: (BuildContext context) => ZAlertDialog(
              zDialog: ZDialog.linearLoad,
              child: new Column(
                children: <Widget>[
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new Container(
                        margin: const EdgeInsets.all(20),
                        child: new Text(
                          "Dialog Test",
                          style: new TextStyle(fontWeight: FontWeight.bold),
                        ),
                      )
                    ],
                  ),
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new Container(
                        padding: const EdgeInsets.only(
                          left: 10.0,
                          right: 10.0,
                          bottom: 10.0,
                        ),
                        width: MediaQuery.of(context).size.width * 0.7,
                        child: new Column(
                          children: <Widget>[
                            new Text("Este aqui eh um dialogo teste de um tipo",
                                style: new TextStyle(fontSize: 14),
                                textAlign: TextAlign.center),
                          ],
                        ),
                      )
                    ],
                  ),
                  new Divider(
                    color: const Color(0xffdbdbdb),
                  ),
                  new Container(
                    child: new InkWell(
                      borderRadius:
                          new BorderRadius.all(const Radius.circular(20.0)),
                      splashColor: const Color(0xffe6e6e6),
                      onTap: () {
                        Navigator.pop(context);
                      },
                      child: new Container(
                        padding: const EdgeInsets.all(12),
                        child: new Text(
                          "ENTENDI",
                          style: new TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                    ),
                    margin: const EdgeInsets.only(bottom: 8),
                  )
                ],
              ),
            ));
  }

  void refrehs() {
    Future.delayed(Duration(seconds: 3), () {
      key.currentState.refresh(0.35, "Carregando Fotos");
    });
    Future.delayed(Duration(seconds: 6), () {
      key.currentState.refresh(0.6, "So mais um momento");
    });
    Future.delayed(Duration(seconds: 9), () {
      key.currentState.refresh(0.85,
          "Ewerweerwerwer wer wer wer weljr nweljnr wojern weojnrowjen roejwn");
    });
    Future.delayed(Duration(seconds: 12), () {
      key.currentState.refresh(1.0,
          "Ewerweerwerwer wer wer wer weljr nweljnr wojern weojnrowjen roejwn",
          success: true);
    });
    Future.delayed(Duration(seconds: 15), () {
      Navigator.pop(context);
    });
  }

  void montarLista() async {
    String data =
        await DefaultAssetBundle.of(context).loadString("assets/carlos.json");
    var responseBody = json.decode(data);

    lista = (responseBody as List)
        .map((x) => ZDynamicFormViewModel.fromJson(x))
        .toList();

    setState(() {
      print(lista);
    });
  }

  void montarFormulario() async {
    var formulario = await iFormularioService.buscarFormularios();

    var formularioSellecionado = formulario.first;

    lista = await iFormularioService
        .montarFormulario(formularioSellecionado.idModelo);

    setState(() {
      print(lista);
    });
  }

  void enviarFormulario() async {
    lista.forEach((item) async {
      ZDynamicFormViewModel zDynamicFormViewModel = new ZDynamicFormViewModel(
        sistema: "teste",
        descricao: item.descricao,
        idAtributo: item.idAtributo,
        idModelo: item.idModelo,
        idTipo: item.idTipo,
        label: item.label,
        modelo: item.modelo,
        multiplaEscolha: item.multiplaEscolha,
        nomeCampo: item.nomeCampo,
        obrigatorio: item.obrigatorio,
        opcoes: item.opcoes,
        ordem: item.ordem,
        tamanhoMaximo: item.tamanhoMaximo,
        tipo: item.tipo,
        versao: item.versao,
      );
      await listaEnvio.add(zDynamicFormViewModel);
    });

    print(listaEnvio);
  }

  Future showProgress() async {
    showDialog(
        context: context,
        barrierDismissible: true,
        builder: (BuildContext context) => ZProgressDialog(
              message: "Executando!",
              barrierDismissible: false,
              progressBarValue: valuess,
              key: key,
            ));
  }

  @override
  void afterFirstLayout(BuildContext context) {}
}

class AppSwitch with ChangeNotifier {
  AppSwitch();

  bool _value = false;
  String _text = "";

  set value(bool text) {
    _value = text;
    notifyListeners();
  }

  bool get value => _value;

  set text(String text) {
    _text = text;
    notifyListeners();
  }

  String get text => _text;
}

Author: Enzotiezzi
Source Code: https://github.com/enzotiezzi/zcomponents 
License: MIT license

#flutter #dart #components 

Z_Components: A Package Composed By A Series Of Components Whose Goal
Reid  Rohan

Reid Rohan

1658342040

Nivo: A Rich Set Of Dataviz Components, Built on top Of The Awesome D3

nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3.

Several libraries already exist for React d3 integration, but just a few provide server side rendering ability and fully declarative charts.

Installation

In order to use nivo, you have to install the @nivo/core package and then choose some of the scoped @nivo packages according to the charts you wish to use:

yarn add @nivo/core @nivo/bar

Features

Discussion

Join the nivo discord community.

Packages & components

nivo is comprised of several packages/components, for a full list, please use the Components Explorer.

Guides

Author: Plouc
Source Code: https://github.com/plouc/nivo 
License: MIT license

#javascript #react #svg #components #charts 

Nivo: A Rich Set Of Dataviz Components, Built on top Of The Awesome D3
Dexter  Goodwin

Dexter Goodwin

1653158940

Nivo Provides A Rich Set Of Dataviz Components

nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3.

Several libraries already exist for React d3 integration, but just a few provide server side rendering ability and fully declarative charts.

Installation

In order to use nivo, you have to install the @nivo/core package and then choose some of the scoped @nivo packages according to the charts you wish to use:

yarn add @nivo/core @nivo/bar

Features

Discussion

Join the nivo discord community.

Packages & components

nivo is comprised of several packages/components, for a full list, please use the Components Explorer.

Guides

Backers

Donations are welcome to help improving nivo [Become a backer]

Open Collective Sponsors

Support this project by becoming a sponsor, your logo will show up here with a link to your website. [Become a sponsor]

Author: Plouc
Source Code: https://github.com/plouc/nivo 
License: MIT license

#react #javascript #svg #components #charts 

Nivo Provides A Rich Set Of Dataviz Components