@genrate/react

GenRate React package aims to organize, expand, add more plexibility on building react web application

Install

npm install @genrate/react

Usage

Design

/**
 * Output
 */
const Output ({  
  // overriden test data
  user = {
    email: 'test@test.com', 
    password: 'passsword'
  }
}) => (
  user && <Box>
    {email} {password}
  </Box>
)

/**
 * Input
 */
const Input () => (
  <Box>
    <Typography>
      Sign in 
    </Typography>
    <Box>
      <TextField required label="Email Address" name="email" />
      <TextField label="Password" type="password" id="password" />
      <FormControlLabel
        control={<Checkbox name="remember" value="remember" color="primary" />}
        label="Remember me"
      />
      <Button type="submit" >
        Sign In
      </Button>
    </Box>
    <Output />
  </Box>
)

/**
 * Layout
 */
export const Main = () => (
  <Box>
    <Avatar>
      <LockOutlinedIcon />
    </Avatar>
    <Typography component="h1" variant="h5">
      Sign in
    </Typography>
    <Input />
    <Output />
  </Box>
)

Add Functionality

import { useConnector } from '@genrate/react';

interface Data {
  email: string;
  password: string;
};

/**
 * Input Component
 */
export const SignIn = ({
  onSubmit = (data: Data) => console.log('test', data)
}) => {

  const { view, model, pass, attach } = useConnector<Data>();

  // render only once

  return view(Input, {
    // Select components to manipulate 
    'TextField[required]': model(), // dynamic auto binding of input
    'Box TextField[name=password]': model('password'), // auto binding of input

    // prop level model auto binding
    'FormControlLabel[control]': model(['control'], (e) => e.target.checked),

    // dynamic auto binding base state data
    TextField: ({ input }) => input == 'yes' ? model('input2') : model('input'), 

    // Add on click event to button
    'Button[type=submit]':
      // subscribe to specific data
      ({ email, password }) => 
      () => ({ 
        onClick: () => {
          onSubmit({ email, password, remember })
        }
      }),
  })
}

/**
 * Main Component
 */
export default function () {
  const { view, attach, set, pass, query, each } = useConnector(
    // state
    state: { list: [1,2,3], input: [] },

    // bind react hooks
    hooks: {
      'login|isLoggedIn' => useAuth()
    }
  );

  return view(Main, {
    // Attach othe component and set prop 
    Input: attach(SignIn, { 
      // receive data from other component
      onSubmit: (data) => set('user', data)
    }),

    // search inside an element and apply data changes
    Input: query({
      TextField: model(),
      Button: 
        ({ email, login, isLoggedIn }) => 
        () => ({ 
          onClick: () => isLoggedIn ? logout(email) : login(email)
        })
    }),

    // Iterator
    Input: each(
      ({ list }) => 
      () => list.map((l, i) => {

        if (l == 1) {
          // query iterated element
          return query({
            // array model value
            TextField: model(`input.${i}`)
          })
        } 

        // iterated element props 
        return ({ test: 'value' })
      })
    ),


    // pass data to other component 
    Test: pass('user', 'input')
  })
}