@cloudquery/cloud-ui

@cloudquery/cloud-ui

Cloud UI for CloudQuery Cloud App.

Description

@cloudquery/cloud-ui is a library that provides various UI components and utilities that are used in CloudQuery Cloud App.

Installation

To install the library, you can use npm:

npm install @cloudquery/cloud-ui

Documentation

Components

TableSelector

This component is used to select one or multiple tables from a list of plugin tables.

import { TableSelector } from '@cloudquery/cloud-ui';

const tableList = []; // List of plugin tables

const [value, setValue] = React.useState({});
const callbacks = React.useRef([]);

const subscribeToTablesValueChange = React.useCallback((callback) => {
  callbacks.current.push(callback);

  return () => {
    callbacks.current = callbacks.current.filter((cb) => cb !== callback);
  };
}, []);

const handleChange = React.useCallback((value) => {
  setValue(value);
  callbacks.forEach((callback) => callback(value));
}, []);

const App = () => (
  <TableSelector
    subscribeToTablesValueChange={subscribeToTablesValueChange}
    value={value}
    onChange={handleChange}
    tableList={tableList}
  />
);

FormFieldGroup

This component is used to visually wrap one or more form fields.

import { FormFieldGroup } from '@cloudquery/cloud-ui';
import TextField from '@mui/material/TextField';

const App = () => {
  return (
    <FormFieldGroup>
      <TextField />
    </FormFieldGroup>
  )
}

Theme

createThemeOptions

The createThemeOptions function is a function that returns the theme options for the theme that can be passed to the createTheme Material-UI function.

export function createThemeOptions(): ThemeOptions

Example:

import { createThemeOptions } from '@cloudquery/cloud-ui';
import createMuiTheme from '@mui/material/styles/createTheme';

const themeOptions = createThemeOptions();

const theme = createMuiTheme(themeOptions);

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      {/* your app code */}
    </ThemeProvider>
  )
}

Breakpoints

The breakpoints object is an object that contains the breakpoint values for the theme.

export const breakpoints: Record<keyof BreakpointOverrides, number>

Colors

The colors object is an object that contains the color options for the theme.

export const colors: {
  neutral: PaletteColor
  primary: PaletteColor
  secondary: PaletteColor
  error: PaletteColor
  warning: PaletteColor
  info: PaletteColor
  success: PaletteColor
}

createThemePaletteOptions

The createThemePaletteOptions function is a function that returns the palette options for the theme.

export function createThemePaletteOptions(): PaletteOptions

createThemeTypographyOptions

The createThemeTypographyOptions function is a function that returns the typography options for the theme.

export function createThemeTypographyOptions(): TypographyOptions

createThemeShadows

The createThemeShadows function is a function that returns the shadow options for the theme.

export function createThemeShadows(): Shadows

createThemeComponents

The createThemeComponents function is a function that returns the component options for the theme. It requires paletteOptions and typographyOptions as parameters that should satisfy the return type of createThemePaletteOptions and createThemeTypographyOptions respectively.

export function createThemeComponents({ paletteOptions, typographyOptions }: {
  paletteOptions: ReturnType<typeof createThemePaletteOptions>;
  typographyOptions: TypographyOptions;
}): Components

Development

Building the Library

To build the library, run:

npm run build

Running Tests

To run the test suite, execute:

npm test

Contributing

If you encounter any issues or have feature requests, please feel free to open an issue on the GitHub repository.

License

This project is licensed under the Mozilla Public License..