{"id":15536438,"url":"https://github.com/atanasster/grommet-controls","last_synced_at":"2025-04-21T15:30:44.522Z","repository":{"id":30453144,"uuid":"124974463","full_name":"atanasster/grommet-controls","owner":"atanasster","description":"grommet 2 controls","archived":false,"fork":false,"pushed_at":"2023-01-08T03:02:29.000Z","size":32157,"stargazers_count":57,"open_issues_count":26,"forks_count":15,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-16T09:28:07.297Z","etag":null,"topics":["grommet","grommet-ux-library","nextjs","react","ui-components"],"latest_commit_sha":null,"homepage":"https://grommet-controls.netlify.app","language":"TypeScript","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/atanasster.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-13T01:33:59.000Z","updated_at":"2024-04-11T20:10:31.000Z","dependencies_parsed_at":"2023-01-14T17:00:52.454Z","dependency_job_id":null,"html_url":"https://github.com/atanasster/grommet-controls","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atanasster%2Fgrommet-controls","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atanasster%2Fgrommet-controls/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atanasster%2Fgrommet-controls/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atanasster%2Fgrommet-controls/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atanasster","download_url":"https://codeload.github.com/atanasster/grommet-controls/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250080492,"owners_count":21371516,"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":["grommet","grommet-ux-library","nextjs","react","ui-components"],"created_at":"2024-10-02T11:51:48.739Z","updated_at":"2025-04-21T15:30:42.963Z","avatar_url":"https://github.com/atanasster.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Grommet Controls: a pack of extensions for Grommet 2\n\nVisit the [Grommet 2](https://v2.grommet.io) website if you are not familiar with Grommet.\n\n### Documentation\n\nVisit the [grommet-controls](https://grommet-controls.netlify.app) website for more information.\n\n### Support / Contributing\n\nBefore opening an issue or pull request, please read the [Contributing](https://github.com/atanasster/grommet-controls/blob/master/CONTRIBUTING.md) guide.\n\n### Sample App\n\n  The quickest way to get started is to clone the [Grommet Controls Sample](https://github.com/atanasster/grommet-controls-sample) page.\n\n### Install\n\n  To install Grommet Controls:\n\n  ```\n    $ npm install grommet-controls\n  ```\n\n### Configuration\n\n  To avoid the entire library being pulled into your bundles when using member imports, you can use [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-imports)\n  and configure your `.babelrc` file:\n  ```\n    $npm install -save-dev babel-plugin-transform-imports\n\n    edit .babelrc:\n      ...\n      \"plugins\": [\n        [\"styled-components\", { \"ssr\": true, \"displayName\": true, \"preprocess\": false }],\n        [\"transform-imports\", {\n          \"grommet-controls\": {\n            \"transform\": \"grommet-controls/es6/components/${member}\",\n            \"preventFullImport\": true,\n            \"skipDefaultConversion\": true\n          },\n          \"grommet-controls/chartjs\": {\n            \"transform\": \"grommet-controls/es6/chartjs/${member}\",\n            \"preventFullImport\": true,\n            \"skipDefaultConversion\": true\n          },\n          \"grommet-controls/themes\": {\n            \"transform\": \"grommet-controls/es6/themes/${member}\",\n            \"preventFullImport\": true\n          },\n          \"grommet\": {\n            \"transform\": \"grommet/es6/components/${member}\",\n            \"preventFullImport\": true,\n            \"skipDefaultConversion\": true\n          },\n          \"grommet/contexts\": {\n            \"transform\": \"grommet/es6/contexts/${member}\",\n            \"preventFullImport\": true,\n            \"skipDefaultConversion\": true\n          },\n          \"grommet/themes\": {\n            \"transform\": \"grommet/es6/themes/${member}\",\n            \"preventFullImport\": true,\n            \"skipDefaultConversion\": true\n          },\n          \"grommet/components/hocs\": {\n            \"transform\": \"grommet/es6/components/hocs\",\n            \"preventFullImport\": true,\n            \"skipDefaultConversion\": true\n          },\n          \"grommet-icons/contexts\": {\n            \"transform\": \"grommet-icons/es6/contexts/${member}\",\n            \"preventFullImport\": true,\n            \"skipDefaultConversion\": true\n          },\n          \"grommet-icons\": {\n             \"transform\": \"grommet-icons/es6/icons/${member}\",\n             \"preventFullImport\": false,\n             \"skipDefaultConversion\": true\n          }\n        }]\n      ],\n      ...\n  ```\n\n### Components\n\n * [PagingTable](https://grommet-controls.netlify.app/docs/controls-pagingtable--main) A Grommet 2 table component with pagination, filtering, footer, child rows and grouping.\n * [Card](https://grommet-controls.netlify.app/docs/controls-card--main) A Card-type container.\n * [Tag](https://grommet-controls.netlify.app/docs/controls-tag--main) A tag control with a label and icon.\n * [Tags](https://grommet-controls.netlify.app/docs/input-tags--main) A list of tags that can be removed.\n * [Notification](https://grommet-controls.netlify.app/docs/controls-notification--main) A Box to display notification messages.\n * [Colors](https://grommet-controls.netlify.app/docs/controls-colors--main) A color selection element, with custom color palettes.\n * [ImageStamp](https://grommet-controls.netlify.app/docs/controls-imagestamp--main) A small image stamp used for avatars or image thumbnails.\n * [DropInput](https://grommet-controls.netlify.app/docs/input-dropinput--main) An Input control with an optional drop button with the specified 'dropContent' or widgets.\n * [MaskedInput](https://grommet-controls.netlify.app/docs/input-maskedinput--main) A masked Input control with an optional drop button with the specified 'dropContent'.\n * [DateInput](https://grommet-controls.netlify.app/docs/input-dateinput--main) A masked date entry field with a drop down calendar.\n * [NumberInput](https://grommet-controls.netlify.app/docs/input-numberinput--main) A masked number input, with widgets to increment/decrement the value. Automatically converts the value to a numeric type, so you dont have to parse strings in your onChange event.\n * [PasswordInput](https://grommet-controls.netlify.app/docs/input-passwordinput--main) A password field with show/hide password toggle.\n * [EmailInput](https://grommet-controls.netlify.app/docs/input-emailinput--main) A masked input with a default mask for handling email addresses.\n * [ColorInput](https://grommet-controls.netlify.app/docs/input-colorinput--main) A masked color entry field, with a drop button to select a color.\n * [Form](https://grommet-controls.netlify.app/docs/validation-form--main) A Form with built-in validation.\n * [Spinning](https://grommet-controls.netlify.app/docs/controls-spinning--main) A spinning process indicator.\n * [Value](https://grommet-controls.netlify.app/docs/controls-value--main) A single value with a label.\n * [Sidebar](https://grommet-controls.netlify.app/docs/layout-sidebar--main) Collapsible side bar component.\n * [VerticalMenu](https://grommet-controls.netlify.app/docs/navigation-verticalmenu--main) Hierarchical collapsible menu.\n\n### Charts ([chart.js](http://www.chartjs.org))\n```\n    $ npm install chart.js\n    $ npm install react-chartjs-2\n```\n\n * [BarChart](https://grommet-controls.netlify.app/docs/chartjs-barchart--main)\n * [DoughnutChart](https://grommet-controls.netlify.app/docs/chartjs-doughnutchart--main)\n * [HorizontalBarChart](https://grommet-controls.netlify.app/docs/chartjs-horizontalbarchart--main)\n * [LineChart](https://grommet-controls.netlify.app/docs/chartjs-linechart--main)\n * [PieChart](https://grommet-controls.netlify.app/docs/chartjs-piechart--main)\n * [PolarChart](https://grommet-controls.netlify.app/docs/chartjs-polarchart--main)\n * [RadarChart](https://grommet-controls.netlify.app/docs/chartjs-radarchart--main)\n * [ScatterChart](https://grommet-controls.netlify.app/docs/chartjs-scatterchart--main)\n \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatanasster%2Fgrommet-controls","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatanasster%2Fgrommet-controls","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatanasster%2Fgrommet-controls/lists"}