Cornellius UI

About The Project

JSX in Vue, is something innovative, since the framework took its first steps, Vue does not stop impressing us with its improvements. For Vue2 using JSX was a big step, it helped with the commission of two worlds and created the gap for possible improvements. In Vue 3 it was decided to use JSX to decrease the complexity of the logic in some components, so that the use is not necessary extra configurations or third party libraries, everything is ready to use.

The only problem with this is that there are not so many libraries that are adapted to the use of jsx in components that are responsive or mobile first. What a headache, we can use jsx but not quite complete in a project.

For those coming from React wanting to get into Vue 3 without losing their way of writing, JSX is great but it is limited only to the logic, if you want to build your components then you must create them from scratch.

This library is dedicated to the good implementation of mobile-first (responsive), ready to use, and easy to edit/customize JSX components.

Built With

This library uses the following tools

• Vue 3
• Vite
• Vitest
• Storybook
• Sass
• Typescript

Getting Started

Installation

• npm

  npm install @mym-tech/cornellius-ui@latest 

• yarn

  yarn add @mym-tech/cornellius-ui@latest 

Usage

In a project with Vue 3 and JSX, import components you use and use them in your component return.

import CorInput from '@mym-tech/cornellius-ui';

const componentX = () => {
    return (
        <>
          <CorInput
               placeholder={'Aa'}
               onSubmit={()=>{'do something'}}
               value={0}
          />
        </>
    )
}

Roadmap

• [x] Add initial config
• [ ] Wave 1 first components
  • [x] Basics Inputs
  • [x] Layout systems
  • [x] Basics Cards
  • [x] Modals
• [ ] Wave 2
  • [ ] Complex Inputs
  • [x] Lazy load
  • [ ] Infinite Scroll
• [ ] Wave 3
  • [ ] Popups & dialogs
  • [ ] Toaster & banner
• [ ] Wave 4
  • [ ] Navigation, Menu & tab-bar
  • [ ] Collapse
• [ ] Wave 5
  • [ ] Empty states handlers

See open issues for a full list of proposed features (and known issues).

Contributing

Branch naming convention

You branch should have a name that reflects its purpose.

It should always start by the type of work you'll do (feat, chore, build, fix, docs, refacto), followed by a slash (/) and a very quick summary of the subject in [kebab case][1].

Example: feat/add-user-company.

Local Testing

To locally test this package, you can simply use npm link.

There is two ways of doing that:

cd cornellius-ui/
npm link
cd my-vue-project/
npm link @mym-tech/cornellius-ui

or you can simply do

cd my-vue-project/
npm link ../path/to/cornellius-ui

Now you can start using cornellius-ui in your local Vue 3 project and when you modify your local cornellius-ui repository and run the build command, it will automatically update in your local Vue project.

Publish

To publish a new version in the npm registry, you will need to increment the package version in the package.json file and run the npm publish command.

npm publish --registry https://registry.npmjs.org  

Now you should be able to install the new version in your Vue 3 project by using the following command:

npm i @mym-tech/cornellius-ui@latest

License

Distributed under the MIT License. See LICENSE for more information.

Acknowledgments

Use this space to list resources you find helpful and would like to give credit to. I've included a few of my favorites to kick things off!

• Render Functions & JSX
• Vite JSX