{"id":20405727,"url":"https://github.com/cloudquery/cloud-ui","last_synced_at":"2025-04-12T15:05:41.021Z","repository":{"id":246198275,"uuid":"819470930","full_name":"cloudquery/cloud-ui","owner":"cloudquery","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-31T16:12:13.000Z","size":450,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-12T15:04:03.917Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloudquery.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-06-24T15:11:10.000Z","updated_at":"2025-03-31T16:12:18.000Z","dependencies_parsed_at":"2024-06-26T14:05:36.883Z","dependency_job_id":"f38513fd-f5f8-4a2a-9561-fdc720d91ade","html_url":"https://github.com/cloudquery/cloud-ui","commit_stats":null,"previous_names":["cloudquery/cloud-ui"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudquery%2Fcloud-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudquery%2Fcloud-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudquery%2Fcloud-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudquery%2Fcloud-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudquery","download_url":"https://codeload.github.com/cloudquery/cloud-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248586236,"owners_count":21128997,"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":[],"created_at":"2024-11-15T05:12:39.834Z","updated_at":"2025-04-12T15:05:40.985Z","avatar_url":"https://github.com/cloudquery.png","language":"TypeScript","readme":"# @cloudquery/cloud-ui\n\nCloud UI for CloudQuery Cloud App.\n\n## Description\n\n`@cloudquery/cloud-ui` is a library that provides various UI components and utilities that are used in CloudQuery Cloud App.\n\n## Installation\n\nTo install the library, you can use npm:\n\n```bash\nnpm install @cloudquery/cloud-ui\n```\n\n## Documentation\n\n### Components\n\n#### TableSelector\n\nThis component is used to select one or multiple tables from a list of plugin tables.\n\n```tsx\nimport { TableSelector } from '@cloudquery/cloud-ui';\n\nconst tableList = []; // List of plugin tables\n\nconst [value, setValue] = React.useState({});\nconst callbacks = React.useRef([]);\n\nconst subscribeToTablesValueChange = React.useCallback((callback) =\u003e {\n  callbacks.current.push(callback);\n\n  return () =\u003e {\n    callbacks.current = callbacks.current.filter((cb) =\u003e cb !== callback);\n  };\n}, []);\n\nconst handleChange = React.useCallback((value) =\u003e {\n  setValue(value);\n  callbacks.forEach((callback) =\u003e callback(value));\n}, []);\n\nconst App = () =\u003e (\n  \u003cTableSelector\n    subscribeToTablesValueChange={subscribeToTablesValueChange}\n    value={value}\n    onChange={handleChange}\n    tableList={tableList}\n  /\u003e\n);\n```\n\n#### FormFieldGroup\n\nThis component is used to visually wrap one or more form fields.\n\n```tsx\nimport { FormFieldGroup } from '@cloudquery/cloud-ui';\nimport TextField from '@mui/material/TextField';\n\nconst App = () =\u003e {\n  return (\n    \u003cFormFieldGroup\u003e\n      \u003cTextField /\u003e\n    \u003c/FormFieldGroup\u003e\n  )\n}\n```\n\n### Theme\n\n#### createThemeOptions\n\nThe `createThemeOptions` function is a function that returns the theme options for the theme that can be passed to the `createTheme` Material-UI function.\n\n```ts\nexport function createThemeOptions(): ThemeOptions\n```\n\nExample:\n\n```tsx\nimport { createThemeOptions } from '@cloudquery/cloud-ui';\nimport createMuiTheme from '@mui/material/styles/createTheme';\n\nconst themeOptions = createThemeOptions();\n\nconst theme = createMuiTheme(themeOptions);\n\nconst App = () =\u003e {\n  return (\n    \u003cThemeProvider theme={theme}\u003e\n      {/* your app code */}\n    \u003c/ThemeProvider\u003e\n  )\n}\n```\n\n#### Breakpoints\n\nThe `breakpoints` object is an object that contains the breakpoint values for the theme.\n\n```ts\nexport const breakpoints: Record\u003ckeyof BreakpointOverrides, number\u003e\n```\n\n#### Colors\n\nThe `colors` object is an object that contains the color options for the theme.\n\n```ts\nexport const colors: {\n  neutral: PaletteColor\n  primary: PaletteColor\n  secondary: PaletteColor\n  error: PaletteColor\n  warning: PaletteColor\n  info: PaletteColor\n  success: PaletteColor\n}\n```\n\n#### createThemePaletteOptions\n\nThe `createThemePaletteOptions` function is a function that returns the palette options for the theme.\n\n```ts\nexport function createThemePaletteOptions(): PaletteOptions\n```\n\n#### createThemeTypographyOptions\n\nThe `createThemeTypographyOptions` function is a function that returns the typography options for the theme.\n\n```ts\nexport function createThemeTypographyOptions(): TypographyOptions\n```\n\n#### createThemeShadows\n\nThe `createThemeShadows` function is a function that returns the shadow options for the theme.\n\n```ts\nexport function createThemeShadows(): Shadows\n```\n\n#### createThemeComponents\n\nThe `createThemeComponents` function is a function that returns the component options for the theme.\nIt requires `paletteOptions` and `typographyOptions` as parameters that should satisfy the return type of `createThemePaletteOptions` and `createThemeTypographyOptions` respectively.\n\n```ts\nexport function createThemeComponents({ paletteOptions, typographyOptions }: {\n  paletteOptions: ReturnType\u003ctypeof createThemePaletteOptions\u003e;\n  typographyOptions: TypographyOptions;\n}): Components\n```\n\n## Development\n\n### Building the Library\n\nTo build the library, run:\n\n```bash\nnpm run build\n```\n\n## Contributing\n\nIf you encounter any issues or have feature requests, please feel free to open an issue on the [GitHub repository](https://github.com/cloudquery/cloud-ui/issues).\n\n## License\n\nThis project is licensed under the [Mozilla Public License.](LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudquery%2Fcloud-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudquery%2Fcloud-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudquery%2Fcloud-ui/lists"}