README.md

This directory contains utility files which enable some visual features of the React Buddy plugin. Files in the directory should be committed to source control.

React Buddy palettes describe reusable components and building blocks. React Palette tool window becomes available when an editor with React components is active. You can drag and drop items from the tool window to the code editor or JSX Outline. Alternatively, you can insert components from the palette using code generation action (alt+insert / ⌘ N).

Add components to the palette using Add to React Palette intention or via palette editor (look for the corresponding link in palette.tsx). There are some ready-to-use palettes for popular React libraries which are published as npm packages and can be added as a dependency:

import AntdPalette from "@react-buddy/palette-antd";
import ReactIntlPalette from "@react-buddy/palette-react-intl";

export const PaletteTree = () => (
  <Palette>
    <AntdPalette/> 
    <ReactIntlPalette/>
    <Category name="App templates">
      <Component name="Card">
        <Variant name="Loading">
          <Card title="Card title">
            <Skeleton loading={true} avatar active>
                Card content
            </Skeleton>
          </Card>
        </Variant>
      </Component>
      <Component name="Form">
        <Variant proto={FormTemplate}/>
      </Component>
    </Category>
  </Palette>
)

React Buddy explicitly registers any previewed component in the previews.tsx file so that you can specify required props.

<ComponentPreview path="/Page">
    <Page title={'Hello'}/>
</ComponentPreview>

You can add some global initialization logic for the preview mode in useInitital.ts, e.g. implicitly obtain user session:

export const useInitial: () => InitialHookStatus = () => {
    const [loading, setLoading] = useState<boolean>(false);
    const [error, setError] = useState<boolean>(false);

    useEffect(() => {
        setLoading(true);
        async function login() {
            const response = await loginRequest(DEV_LOGIN, DEV_PASSWORD);
            if (response?.status !== 200) {
                setError(true);
            }
            setLoading(false);
        }
        login();
    }, []);
    return { loading, error };
};