Xyleme Sidekick Get Info Kick

https://github.com/xyleme-sidekick/get-info-kick
Admin
A custom kick (plugin) for Xyleme Sidekick that displays extended information about selected...
Tokens:684
Snippets:5
Trust Score:1.9
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Module Federation Configuration with Vite (JavaScript)

Source: https://github.com/xyleme-sidekick/get-info-kick/blob/main/README.md

Example Vite configuration using `@originjs/vite-plugin-federation` to set up module federation. It defines the remote name, output filename, exposes the custom kicks module, and specifies shared dependencies like React.

```javascript
import federation from "@originjs/vite-plugin-federation";

export default defineConfig(({ mode }) => ({
  plugins: [
    federation({
      // you can give any name you would like
      name: "kicks",
      // you can give a name to js file
      filename: "kicks.js",
      exposes: {
        // left side should remain unchanged, right side - path to module with your custom kicks
        "./Kicks": "./src/features/index.ts",
      },
      // shared libraries, keep it unchanged
      shared: ["react", "react-dom"],
    })
  ]
}))
```

--------------------------------

### Register Custom Kick (JavaScript)

Source: https://github.com/xyleme-sidekick/get-info-kick/blob/main/README.md

This function exports the 'registerKicks' function, which is the entry point for registering custom kicks in Xyleme Sidekick. It returns an object containing an array of registered kicks, including the 'getInfoKick'.

```javascript
export const registerKicks = (): RegisteredKicks => {
  return {
    kicks: [registerGetInfoKick],
  };
};
```

--------------------------------

### Kick Execution Logic and Readiness Callback (JavaScript)

Source: https://github.com/xyleme-sidekick/get-info-kick/blob/main/README.md

Demonstrates how a custom kick component uses `useEffect` and `useCallback` to manage its execution logic and signal readiness to Xyleme Sidekick. The `onReady` callback is invoked with an `execute` function that the kick will use to perform its work.

```javascript
const execute = useCallback(
  (items: SidekickItem[]) => {
    // do kick work here
  },
  [xyFetch]
);

useEffect(() => {
  onReady({ execute });
}, [onReady, execute]);
```

--------------------------------

### Define GetInfoKick Configuration (JavaScript)

Source: https://github.com/xyleme-sidekick/get-info-kick/blob/main/README.md

Defines the configuration for the 'getInfoKick', including its unique ID, display name, description, position in the UI, the component to render, and allowed user roles. This is essential for the kick to be recognized and function correctly within Sidekick.

```javascript
export const registerGetInfoKick = (): RegisteredKick => {
  return {
    // ID of your kick (should be unique)
    id: 'getInfoKick',
    // kick name
    name: 'Get Info',
    // kick description
    description: 'Get the selected items info',
    // position inside Sidekick kick list
    position: 6000,
    // custom kick implementation
    component: GetInfoKick,
    // optional user role(s), who can use your kick
    userRoles: ['getInfo Role'],
  };
};
```

--------------------------------

### Custom Kick Component Props Interface (TypeScript)

Source: https://github.com/xyleme-sidekick/get-info-kick/blob/main/README.md

Defines the TypeScript interface for the props expected by a custom kick component. It includes `onReady` for signaling readiness and providing the execution function, and `xyFetch` for making API requests.

```typescript
export interface KickProps {
  onReady: (result: RegisterKickResult) => void;
  xyFetch: typeof fetch;
}
```
Tokens:
Raw