open-index/open-npm huggingface dataset:
npm package: @mycujoo/mcls-components-grid
Description: The Grid component is a customizable grid component that displays a collection of items/cards in a grid format. It provides options for sorting, loading more items, and handling user interactions.
Latest version: 1.0.0-rc.6

# Grid

The Grid component is a customizable grid component that displays a collection of items/cards in a grid format. It provides options for sorting, loading more items, and handling user interactions.

This is intended to be used inside an mcls list data provider like:
[Events Context](https://www.npmjs.com/package/@mycujoo/mcls-data-providers) or [Packages Context](https://www.npmjs.com/package/@mycujoo/mcls-data-providers).

Please check this [CodeSandbox](https://codesandbox.io/s/sad-pateu-w2mvys?file=/src/Grid.tsx) example.

```tsx
import { Grid } from '@mycujoo/mcls-components-grid'
import { MatchCard } from '@mycujoo/mcls-components-card'

const config = {
  title: {
    // Customize the title text styles
  },
  seeAll: {
    // Customize the "See All" text styles
  },
  layout: {
    marginTop: '10px', // Set the top margin of the grid layout
    marginBottom: '20px', // Set the bottom margin of the grid layout
    gutter: 10, // Set the spacing between grid items
    gridAlign: 'left', // Set the alignment of grid items ('left', 'center', 'right')
  },
  stretchCardsToFitContainerWidth: true, // Stretch the cards to fit the container width
  hideWhenEmpty: false, // Hide the grid when there are no items
  preloadCard: {
    bgColor: '#ebebeb', // Set the background color of the preload card
  },
  sort: {
    by: 'title', // Sort the items by 'title', 'start_time', or 'popularity'
    direction: 'asc', // Set the sort direction ('asc' or 'desc')
  },
  cardsHover: {
    // Configure the hover effect for the grid cards
  },
  loadMoreType: 'infinite', // Set the type of load more functionality ('infinite', 'button', or 'none')
};


<Grid
  data={events}
  title="Upcoming events"
  lang="de"
  onSeeAll={() => { console.log("On see all click") }}
  onLoadMore={() => { console.log("Load more events") }}
  config={config}
  isLoading={isLoading}
  limitReached={limitReached}
  className="my-custom-grid"
  preloadCard={<PreloadCard />} 
  noDataContent={<NoContent />}
  card={
    <MatchCard
      dataPaths={dataPathsObj}
      onClick={handleCardClick}
      config={{
        size: 'm',
        borderRadius: 8,
        thumbnail: {
          icon: true,
          viewers: true,
        },
        primaryColor: '#f12d4b',
        showTag: true,
      }}
    />
  }
/>
```
npm package: @mycujoo/mcls-components-slider
Description: The Slider component is a customizable carousel/slider component that displays a collection of items/cards in a horizontal scrollable container. It provides options for sorting, loading more items, and handling user interactions.
Latest version: 1.0.0-rc.9

# Slider

The Slider component is a customizable carousel/slider component that displays a collection of items/cards in a horizontal scrollable container. It provides options for sorting, loading more items, and handling user interactions.

This is intended to be used inside an mcls list data provider like:
[Events Context](https://www.npmjs.com/package/@mycujoo/mcls-data-providers) or [Packages Context](https://www.npmjs.com/package/@mycujoo/mcls-data-providers).

Please check these [CodeSandbox](https://codesandbox.io/s/sad-pateu-w2mvys?file=/src/SliderWithCustomCard.tsx) examples.

**Props:**

* `data` (optional): An array of T[] representing the items to be displayed in the slider.
* `card`: A JSX.Element representing the item/card component to be rendered in the slider. The component should accept the data and lang props.
* `preloadCard` (optional): A JSX.Element representing the preload card to be displayed while loading.
* `title` (optional): A string or ReactNode representing the title of the slider.
config (optional): An object specifying the configuration options for the slider appearance and behavior.
* `lang` (optional): A value from the SupportedLanguages enum to determine the language used in the component.
* `onSeeAll` (optional): A function called when the see all action is triggered.
* `maxCards` (optional): The maximum number of cards to display in the slider.
* `className` (optional): An additional CSS class name to be applied to the slider.

This can be used with Simple cards, Event cards or any other type of card.

Example of usage:

```tsx
import { Slider } from '@mycujoo/mcls-components-slider'
import { SimpleCard, PreloadCard } from '@mycujoo/mcls-components-card'

const config = {
  title: {
    // Customize the title text styles
  },
  seeAll: {
    // Customize the "See All" text styles
  },
  layout: {
    marginTop: 10, // Set the top margin of the slider
    marginBottom: 20, // Set the bottom margin of the slider
    gutter: 10, // Set the spacing between cards
    fullBleed: true, // Set the cards to occupy the full width of the slider
  },
  arrows: {
    // Configure the arrow styles and behavior
  },
  hideWhenEmpty: false, // Hide the slider when there are no items
  sort: {
    by: 'title', // Sort the items by 'title', 'start_time', or 'popularity'
    direction: 'asc', // Set the sort direction ('asc' or 'desc')
  },
  cardsHover: {
    // Configure the hover effect for the cards
  },
  preloadCard: {
    // Configure the appearance of the preload card
  },
};

const MySlider = () => {
  return (
    <Slider
      data={/* Array of data */}
      card={<SimpleCard />}
      preloadCard={<PreloadCard />}
      title="Slider Title"
      config={config}
      lang="en"
      onSeeAll={() => {console.log("See all click")}}
      maxCards={5}
      className="my-slider"
    />
  );
};

```