{"id":22706821,"url":"https://github.com/bigbinary/neeto-ui","last_synced_at":"2025-04-05T08:03:47.125Z","repository":{"id":154011131,"uuid":"300793860","full_name":"bigbinary/neeto-ui","owner":"bigbinary","description":"A component library from BigBinary. ","archived":false,"fork":false,"pushed_at":"2024-10-29T08:55:08.000Z","size":42649,"stargazers_count":40,"open_issues_count":4,"forks_count":3,"subscribers_count":14,"default_branch":"main","last_synced_at":"2024-10-29T09:52:27.785Z","etag":null,"topics":["a11y","components","dark-mode","react","react-components","reactjs","ui-components","ui-library","uikit"],"latest_commit_sha":null,"homepage":"https://neeto-ui.neeto.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bigbinary.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-03T04:17:41.000Z","updated_at":"2024-10-26T14:58:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"f46e7686-1404-4b8f-9904-e5cc36847683","html_url":"https://github.com/bigbinary/neeto-ui","commit_stats":{"total_commits":1655,"total_committers":102,"mean_commits":"16.225490196078432","dds":0.8882175226586103,"last_synced_commit":"073f16e92314a1dee8750fb83d86cff73c051731"},"previous_names":[],"tags_count":56,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigbinary%2Fneeto-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigbinary%2Fneeto-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigbinary%2Fneeto-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigbinary%2Fneeto-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bigbinary","download_url":"https://codeload.github.com/bigbinary/neeto-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305930,"owners_count":20917207,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","components","dark-mode","react","react-components","reactjs","ui-components","ui-library","uikit"],"created_at":"2024-12-10T10:09:48.515Z","updated_at":"2025-04-05T08:03:47.095Z","avatar_url":"https://github.com/bigbinary.png","language":"JavaScript","readme":"[![NPM](https://img.shields.io/npm/v/@bigbinary/neetoui.svg)](https://www.npmjs.com/package/@bigbinary/neetoui)\n[![BuildStatus](https://neeto-engineering.neetoci.com/badges/neeto-ui/workflows/default.svg)](https://neeto-engineering.neetoci.com/projects/neeto-ui)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n**neetoUI** is the library that drives the experience in all\n[neeto products](https://neeto.com/) built at\n[BigBinary](https://www.bigbinary.com).\n\n## Installation\n\n```\nyarn add @bigbinary/neetoui\n```\n\nThis would install `neetoui` package inside your application. Starting `3.0.x`,\nneetoUI stylesheet has been separated from the bundle. To get the styles\nworking, please import the neetoUI stylesheet to your main `scss` entry point.\n\n```scss\n@import \"@bigbinary/neetoui\";\n```\n\n## Dependencies\n\n**neetoUI** has few peer dependencies which are required to use neetoUI\nproperly. Make sure you install all the peerDependencies mentioned in the\n[package.json](./package.json)\n\n### `react-toastify`\n\nneetoUI depends on `react-toastify` for Toasters, so the styles for toaster must\nbe imported to your main `scss` entry point.\n\n```scss\n@import \"react-toastify/dist/ReactToastify.min.css\";\n```\n\nAlso make sure to include `\u003cToastContainer /\u003e` in your application.\n\n```jsx\nimport React from \"react\";\n\nimport { ToastContainer } from \"react-toastify\";\n\nconst App = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cToastContainer /\u003e\n      // Other children\n    \u003c/\u003e\n  );\n};\n```\n\n### `formik`\n\nTo make form handling easier with neetoUI, we provide Formik binding with\nneetoUI components. To know about Formik, ref the\n[official documentation](https://formik.org/docs/overview).\n\n## Usage\n\nneetoUI exports all it’s component as named exports. You can individually import\nnecessary components in the following way:\n\n```jsx\nimport { Button, Tooltip } from \"@bigbinary/neetoui\";\n```\n\nIf you need access to an object that contains references to all the components\nyou can do a wildcard import. This way, you can render dynamic components from\nneetoUI.\n\n```jsx\nimport React from \"react\";\nimport * as NeetoUI from \"@bigbinary/neetoui\";\n\nexport default function index() {\n  const Button = NeetoUI.Button;\n\n  // get a random component\n  const componentName = Math.random() \u003e 0.5 ? \"Badge\" : \"Avatar\";\n  const MyDynamicComponent = NeetoUI[componentName];\n\n  return (\n    \u003cdiv\u003e\n      \u003cButton /\u003e\n      \u003cMyDynamicComponent /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Formik\n\nneetoUI formik exports all its component as named exports. You can individually\nimport necessary components in the following way:\n\n```jsx\nimport { Input } from \"@bigbinary/neetoui/formik\";\n```\n\nAvailable components in neetoUI formik:\n\n- Input\n- Radio\n- Button\n- Form\n- ActionBlock\n- Select\n- Switch\n- Textarea\n- CheckBox\n- BlockNavigation\n- TreeSelect\n- Slider\n\nYou can refer the\n[formik folder](https://github.com/bigbinary/neeto-ui/tree/main/src/formik) to\ncheck for latest Formik components.\n\nIn order to use the neetoUI formik components, you need to wrap your form with\nthe `Form` component.\n\n```jsx\nimport * as Yup from \"yup\";\nimport { Form } from \"@bigbinary/neetoui/formik\";\n\n\u003cForm\n  formikProps={{\n    initialValues: {\n      name: \"\",\n      email: \"\",\n    },\n    onSubmit: (values, formikBag) =\u003e {\n      console.log(values, formikBag);\n    },\n    validationSchema: Yup.object({\n      name: Yup.string().required(\"Name is required\"),\n      email: Yup.string().email(\"Invalid email\").required(\"Email is required\"),\n    }),\n  }}\n  className=\"w-full space-y-6\"\n\u003e\n  {props =\u003e {\n    return (\n      \u003c\u003e\n        \u003cInput {...props} label=\"Name\" name=\"name\" /\u003e\n        \u003cInput {...props} label=\"Email\" name=\"email\" /\u003e\n        \u003cButton label=\"Submit\" type=\"submit\" style=\"primary\" /\u003e\n      \u003c/\u003e\n    );\n  }}\n\u003c/Form\u003e;\n```\n\nIn case, you wish not to pass `children` as a function, you can use the\nfollowing syntax:\n\n```jsx\nimport * as Yup from \"yup\";\nimport { Form } from \"@bigbinary/neetoui/formik\";\n\n\u003cForm\n  formikProps={{\n    initialValues: {\n      name: \"\",\n      email: \"\",\n    },\n    onSubmit: (values, formikbag) =\u003e {\n      console.log(values, formikbag);\n    },\n    validationSchema: Yup.object({\n      name: Yup.string().required(\"Name is required\"),\n      email: Yup.string().email(\"Invalid email\").required(\"Email is required\"),\n    }),\n  }}\n  className=\"w-full space-y-6\"\n\u003e\n  \u003c\u003e\n    \u003cInput {...props} label=\"Name\" name=\"name\" /\u003e\n    \u003cInput {...props} label=\"Email\" name=\"email\" /\u003e\n    \u003cButton label=\"Submit\" type=\"submit\" style=\"primary\" /\u003e\n  \u003c/\u003e\n\u003c/Form\u003e;\n```\n\nThe `Form` component accepts the following props:\n\n- `formikProps`: Formik props object. You can pass `initialValues`,\n  `validationSchema`, `onSubmit` etc. as props to the `Form` component.\n- `children`: You can pass a function as `children` to the `Form` component. The\n  function will receive the formik props object as an argument. Or you can\n  directly pass the `children` inside the `Form` component.\n- `className`: You can use this prop to provide a custom class to the form.\n- `formProps`: Form props object. You can pass `className`, `style` etc. as\n  props to the `Form` component.\n- `scrollToErrorField`: To specify whether scroll to error field on clicking\n  submit button is enabled or not. Default value is false.\n\n---\n\n## Development\n\nInstall all the dependencies by executing following command.\n\n```\nyarn\n```\n\nYou can create new components in `src/components` and export them from\n`src/index.js`.\n\nRunning the `yarn storybook` command starts a storybook app. Use this\napplication to test out changes and see how your component behaves in the\nstorybook for **neetoUI**\n\n- To see if tests associated with your components pass run `yarn test`.\n  \u003e Tests will fail if there are some warnings or errors in the console.\n- To see if **neetoUI** gets built and bundled after changes run `yarn bundle`.\n- To see if the storybook gets built run `yarn build`.\n\nNote that nothing in the `stories` folder will be bundled with **neetoUI**.\n\n# Building and releasing.\n\nThe `@bigbinary/neetoui` package gets published to NPM when we merge a PR with\n`patch`, `minor` or `major` label to the `main` branch. The `patch` label is\nused for bug fixes, `minor` label is used for new features and `major` label is\nused for breaking changes. You can checkout the `Create and publish releases`\nworkflow in GitHub Actions to get a live update.\n\nIn case if you missed to add the label, you can manually publish the package.\nFor that first you need to create a PR to update the version number in the\n`package.json` file and merge it to the `main` branch. After merging the PR, you\nneed to create a\n[new github release](https://github.com/bigbinary/neeto-ui/releases/new) from\nmain branch. Whenever a new release is created with a new version number, the\ngithub actions will automatically publish the built package to npm. You can\ncheckout the `Publish to npm` workflow in GitHub Actions to get a live update.\n\nPlease note that before publishing the package, you need to verify the\nfunctionality in some of the neeto web-apps locally using `yalc` package\nmanager. The usage of yalc is explained in this video:\nhttps://youtu.be/F4zZFnrNTq8\n\n## Documentation\n\nRead the docs here\n\nhttps://neeto-ui.neeto.com\n\n## Other Libraries\n\n- [neetoIcons](https://github.com/bigbinary/neeto-icons): **NeetoIcons** is the\n  official icons library from BigBinary.\n- [neetoEditor](https://github.com/bigbinary/neeto-editor-tiptap):\n  **NeetoEditor** is a prose-mirror based rich-text editor used at BigBinary.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigbinary%2Fneeto-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbigbinary%2Fneeto-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigbinary%2Fneeto-ui/lists"}