Skip to content

ashishmishra-bit/next-gen-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Logo


Next-Gen-UI

Next Gen UI is a home for front-end & UI/Ux developers. We provide all the necessary components required to build a scalable front-end application which suits the user experience in a unique way.
we provide :

  1. NPM package support with latest updates.
  2. HTML & ReactJs/NextJs based per-build templates which uses advance CSS Library called Tailwind CSS
  3. List your UI design.
  4. Developers support.

Visit Us on:

1. Website : nextgenui.in
2. Npm Package: next-gen-ui
3. Github: next-gen-ui Repo

Usage

Components We Provide:

  • Navbars
  • Footers
  • Forms
  • Cards
  • Hero Sections
  • Buttons
  • FAQs
  • 404

NPM Components We Provide:

  • button
  • Form Control
  • Link
  • Login
  • Search
  • Select
  • Skeleton
  • Spinner Loader
  • TextInput

NPM Usage

$ npm i 'next-gen-ui'

Imports

1. Buttons
import { Button } from 'next-gen-ui'

const App = () => {
    return(
        <Button>Click Me</Button>
    );
}

export default App;
Varients:
<Button type="danger">Click Me</Button>
<Button type="Secondary">Click Me</Button>
<Button type="Ghost">Click Me</Button>
<Button type="Disable">Click Me</Button>
<Button Loading>Secondary Button</Button>
<Button icon={(`props`) => {}}> Download  </Button>
<Button size='large | default | small'>Large</Button>
2. Form Control
import React, { useState } from 'react';

import { FormControl, TextInput } from 'next-gen-ui'
import { validate as validateEmail } from 'email-validator';

const App = () => {
    const [value, setValue] = React.useState('');
    const [isValid, setIsValid] = React.useState(false);
    const [isVisited, setIsVisited] = React.useState(false);
    const shouldShowError = !isValid && isVisited;
    const onChange = (event: React.FormEvent<HTMLInputElement>) => {
        const {value} = event.currentTarget;
        setIsValid(validateEmail(value));
        setValue(value);
    };

    return (
        <FormControl
            label='Email'
            htmlFor='email'
            error={
                shouldShowError
                ? 'Please type a valid email address'
                : undefined
            }
            hint="You won't be able to change it later"
            onBlur={() => setIsVisited(true) }
        >
            <TextInput
                id='email'
                width='250px'
                value={value}
                placeholder='Enter your email'
                onChange={onChange}
                error={shouldShowError}
            />
        </FormControl>
    )
}

export default App;
Varients:
import React from 'react';
import { FormControl, TextInput } from 'next-gen-ui'

const App = () => {

    return (
            <FormControl
                label='Username'
                htmlFor='username'
                hint="You can't change this field"
                disabled
            >
                <TextInput
                    id='username'
                    width='250px'
                    value='john_doe'
                    disabled
                />
            </FormControl>
    )
}

export default App;
() => {
    const [option, setOption] = React.useState<SelectOption | undefined>(
        selectOptions[0]
    );
    const [isVisited, setIsVisited] = React.useState(false);
    const shouldShowError = !option && isVisited;

    return (
        <FormControl
            label='Country'
            htmlFor='country'
            error={
                shouldShowError
                ? 'Required field'
                : undefined
            }
            hint="The country of residence"
            forceLabel={!!option}
            onBlur={() => setIsVisited(true) }
        >
            <Select
                id='country'
                error={shouldShowError}
                width='250px'
                placeholder='Select option'
                option={option}
                listOptions={selectOptions}
                onChange={(option) => { 
                setOption(option);
                }}
            />
        </FormControl>
    )
}
3. Link
import { Link } from 'next-gen-ui'

const App = () => {
    return(
        <Link href="#">Link</Link>
    );
}

export default App;
Varients:
<Link as="span" href="#">I am span</Link>
<Link disabled href="#">
4. Auth(Login/Signup)
import { Login, Signup } from 'next-gen-ui'

const App = () => {
    return(
        <Login onSubmit={() => {}} />
        <Signup onSubmit={() => {}} />
    );
}

export default App;
5. Search
import { Search } from 'next-gen-ui'

const App = () => {
    const [value, setValue] = useState('');
    return(
        <Search
            placeholder='Search the site'
            width='400px'
            value={value}
            onChange={e => setValue(e.currentTarget.value)}
        />
    );
}

export default App;
6. Select
import { Select } from 'next-gen-ui'

const App = () => {
    const [option, setOption] = useState<SelectOption | undefined>(listOptions[1]);
    return(
       <Select
            width='250px'
            placeholder='Select option'
            option={option}
            listOptions={listOptions}
            onChange={(option) => { 
            setOption(option);
            }}
        />
    );
}

export default App;
Varients:
//with Error
() => {
  const [option, setOption] = useState<SelectOption | undefined>(listOptions[1]);
  return <Select
    error
    width='250px'
    placeholder='Select option'
    option={option}
    listOptions={listOptions}
    onChange={(option) => { 
      setOption(option);
    }}
  />
}

//Disable
() => {
  const [option, setOption] = useState<SelectOption | undefined>(listOptions[1]);
  return <Select
    disabled
    width='250px'
    placeholder='Select option'
    option={option}
    listOptions={listOptions}
    onChange={(option) => { 
      setOption(option);
    }}
  />
}

//Size
() => {
  return (
    <Row>
      <Select placeholder='large' size='large' listOptions={listOptions} />
      <Select placeholder='default' size='default' listOptions={listOptions} />
      <Select placeholder='small' size='small' listOptions={listOptions} />
    </Row>
  );
}
7. Skeleton
import { Skeleton } from 'next-gen-ui'

const App = () => {
    return(
       <Skeleton
            height={150}
            width={150}
        />
    );
}

export default App;
Varients:
<Skeleton
  borderRadius="50%" //for rounded skeleton
  height={150}
  width={150}
/>
8. Spinner
import { Spinner } from 'next-gen-ui'

const App = () => {
    return(
       <Spinner size={50} />
    );
}

export default App;
Varients:
() => (
  <DarkBackground>
    <Spinner size={50} light />
  </DarkBackground>
)
8. Text Input
import { TextInput } from 'next-gen-ui'

const App = () => {
    return(
       <TextInput width="250px" />
    );
}

export default App;
Varients:
<TextInput placeholder="Placeholder" width="250px" />

<TextInput  error  placeholder="Wrong input" width="250px"/>

<TextInput disabled placeholder="Disabled" width="250px" />

<TextInput placeholder="Not editable" readonly width="250px" />
//with icon
<TextInput
    icon={() => {}}
    placeholder="Login"  width="250px"
/>
//Clearable
() => {
  const [value, setValue] = useState('');
  return (
    <TextInput
      placeholder='Type and clear'
      width='250px'
      value={value}
      onChange={e => setValue(e.currentTarget.value)}
      clearable
    />
  );
}
//Size
() => {
  return (
    <>
      <Row>
        <TextInput placeholder='large' size='large' />
        <TextInput placeholder='default' size='default' />
        <TextInput placeholder='small' size='small' />
      </Row>
    </>
  );
}

License

MIT License

Copyright (c) 2021 Next Gen UI Developers.

Permission is hereby granted, at affordable cost, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Tech & Tools:

Front-end:

next react react-routermaterial-ui pwa tailwind-cssstorybook html css sass javascript

Back-end:

Design:

Backend as a Service (BaaS)

firebase vercel heroku

Version Control:

Package:

Developers

Ashish Kumar Mishra

ashishmishra ashishmishra   ashishmishra


Ankit Raj

ashishmishra ashishmishra   ashishmishra


Om Prakash

ashishmishra ashishmishra   ashishmishra


Shivam Sinha

ashishmishra ashishmishra   ashishmishra


Shubham Singh

ashishmishra ashishmishra   ashishmishra