version: "0.2.0"

package name: "weeve-design"

weeve-design

THis is the React Component Library for weeve design system. This Project is weeve Design system which is figured in a storybook which is a tool for building. ui component and pages in isolation Storybook brings together UI, examples, and documentation in one place.

Install

npm install weeve-design

Example usage

import { WeeveTextfield } from 'weeve-design'

export default function App() {
  return (
    <WeeveTextfield
      label="Textfield"
      placeholder="Placeholder"
      value="Textfield"
      onChange={e => console.log(e.target.value)}
    />
  )
}

Peer Dependencies

• React
• Typescript
• Material Ui
• Phosphor Icon library

Demo

Screenshot :

FAQ

what is storybook and how can developer use it ?

Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack .use :

  npx storybook init

benefits of storybook ?

• helps to document component for reuse automatically
• offer visually test to your components -
• Increases developer awareness of existing components
• Offer easy way to build components in isolation, outside of your app

License

MIT

folderstructure

├── brandAssets # store of all assets used in the project .

├── components # Custom reusable components .

├── hooks # General/Special purpose hooks for the app.

├── templates # Templates used in the project .

└── theme # Material-ui theme files .

Developer quickstart

1- clone the project

  git clone [email protected]:weeveiot/weeve-design.git

2- go to the folder

  cd weeve-design

3- Install

  npm run install

4- start the server with

  npm run storybook

now the app can be accessed on http://localhost:6006/