{"id":24208615,"url":"https://github.com/nextml-code/ui-components","last_synced_at":"2025-10-15T02:38:50.582Z","repository":{"id":49087974,"uuid":"291970764","full_name":"nextml-code/ui-components","owner":"nextml-code","description":"React UI components","archived":false,"fork":false,"pushed_at":"2021-10-21T12:40:07.000Z","size":1548,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-08T13:26:25.496Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nextml-code.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-01T10:46:36.000Z","updated_at":"2021-10-21T12:39:28.000Z","dependencies_parsed_at":"2022-09-24T02:01:29.758Z","dependency_job_id":null,"html_url":"https://github.com/nextml-code/ui-components","commit_stats":null,"previous_names":["aiwizo/ui-components"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/nextml-code/ui-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextml-code%2Fui-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextml-code%2Fui-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextml-code%2Fui-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextml-code%2Fui-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nextml-code","download_url":"https://codeload.github.com/nextml-code/ui-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextml-code%2Fui-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279036988,"owners_count":26090005,"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","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-01-14T01:17:35.759Z","updated_at":"2025-10-15T02:38:50.534Z","avatar_url":"https://github.com/nextml-code.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# UI Components\n\nReact ui component library.\n\n\n- [UI Components](#ui-components)\n  - [Installation](#installation)\n    - [Peer Dependencies](#peer-dependencies)\n  - [Components](#components)\n    - [Select](#select)\n    - [Button](#button)\n    - [Checkbox](#checkbox)\n    - [Input](#input)\n    - [Label](#label)\n    - [File Input](#file-input)\n    - [File Dropzone](#file-dropzone)\n    - [File Upload](#file-upload)\n\n\n## Installation\n```\nnpm i @aiwizo/ui-components\n```\n### Peer Dependencies\n```\nnpm i styled-component axios uuid @aiwizo/application-styles\n```\n\n## Components\n\n### Select\n\n```JavaScript\nimport \"@aiwizo/application-styles\";\nimport { Select } from '@aiwizo/ui-components';\n\n\u003cSelect\n  // All selectable options as\n  // an array of objects\n  options={[\n    { name: \"foo\" },\n    { name: \"bar\" },\n  ]}\n\n  // Function that returns what should\n  // be rendered in the option component\n  renderAs={(props, index) =\u003e {\n    return props.name;\n  }}\n\n  // callback triggered when an option\n  // is selected\n  onSelect={(option) =\u003e { /* Do something */ }}\n\n  // Set index of default value in the\n  // list of options (defaults to 0)\n  defaultIndex={2}\n/\u003e\n```\n\n### Button\n\n```JavaScript\nimport \"@aiwizo/application-styles\";\nimport { Button } from '@aiwizo/ui-components';\n\n\u003cButton\n  // Sets the background color\n  // for default button style\n  // Available options: red, blue, green\n  color=\"green\"\n\n  // Optional parameter that sets\n  // the button to \"secondary\" type\n  // If not set, it uses default settings.\n  type=\"secondary\"\n/\u003e\n```\n\n### Checkbox\n\n```JavaScript\nimport \"@aiwizo/application-styles\";\nimport { Checkbox } from '@aiwizo/ui-components';\n\n\u003cCheckbox\n  // Callback function triggered whenever the\n  // checkbox is clicked\n  onChange={({checked, value}) =\u003e { /* Do something */ }}\n\n  // Value that is passed to the onChange\n  // callback\n  value=\"some value\"\n\n  // Optional label displayed to the\n  // right of the checkbox\n  label=\"Lorem Ipsum\"\n/\u003e\n```\n\n### Input\n\n```JavaScript\nimport \"@aiwizo/application-styles\";\nimport { Input } from '@aiwizo/ui-components';\n\n\u003cInput\n  // Icon that appears to the left\n  // for indicating input type/purpose\n  icon={ /* Font awesome icon */ }\n\n  // Optional label displayed on\n  // top of the right of the input\n  label=\"Lorem Ipsum\"\n\n  // ...regular input fields\n/\u003e\n```\n\n### Label\n\n```JavaScript\nimport \"@aiwizo/application-styles\";\nimport { Label } from '@aiwizo/ui-components';\n\n\u003cLabel\u003eLorem ipsum\u003c/Label\u003e\n```\n\n\n### File Input\n\nTODO\n\n### File Dropzone\n\n```javascript\nimport \"@aiwizo/application-styles\";\nimport { FileDropzone } from \"@aiwizo/ui-components\";\n\n\u003cFileDropzone\n  onChange={({ event, files }) =\u003e {\n    /* Do something */\n  }}\n\n  // Custom styling\n  styles={\n    backgroundColorDragging,\n    backgroundColor,\n    border,\n    borderTopLeftRadius,\n    borderTopRightRadius,\n    borderBottomRightRadius,\n    borderBottomLeftRadius,\n    color,\n    colorDragging,\n    fontFamily,\n    fontSize,\n    fontWeight,\n    padding,\n  }\n/\u003e\n```\n\n### File Upload\n\n\n```javascript\nimport \"@aiwizo/application-styles\";\nimport { FileUpload } from \"@aiwizo/ui-components\";\n\n\u003cFileUpload\n  // Upload url\n  url=\"https://my.awesome/api/endpoint\"\n  // The callback function is called each\n  // time we get a file upload response.\n  onUploadResponse={(fileUploadResponse, file) =\u003e {\n    // Do something with a file upload response or file\n  }}\n  // Amount of parallel file uploads.\n  // Defaults to 1.\n  requestBatchSize={1}\n  // Calls this function with the\n  // data returned from the upload request\n  // of a file\n  onRowClick={(fileResponseData) =\u003e {\n    // Do something with the data from the file upload response\n  }}\n  // Options for configuring the request made\n  // when posting the file to the specified url.\n  requestOptions={{\n    headers: {},\n    body: {\n      /* JSON */\n    },\n  }}\n/\u003e\n```\n\n**JSON**\n\nIts possible to set request headers and body through the `requestOptions` parameter.\n\nIf a body is set the `content-type` header is set to `application/json` and the file will be converted to a base64 string and passed to the `body.file.data` field i.e.\n\n```javascript\n// Request body:\n{\n  ...requestOptions.body,\n  file: {\n    ...requestOptions.body.file,\n    data: \"data:image/jpeg;base64,/9j/4AAQSkZJRgABA...\",\n  },\n}\n```\n\n**form-data**\n\nSet additional `multipart/form-data` entries through the `requestOptions.form` parameter.\n\nThe uploaded file will still be set as the entry `file`.\n\nExample:\n\n```javascript\nrequestionOptions={{\n  form: {\n    text: \"text\",\n    value: 3,\n  }\n}}\n```\n\nDoes not yet support nested `requestionOptions.form`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextml-code%2Fui-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnextml-code%2Fui-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextml-code%2Fui-components/lists"}