daisyui/react-daisyui

Stats doesn not work.

pociej opened this issue · 3 comments

Im using newest version. When i do

import { Stats } from "react-daisyui";

....
        <Stats >
          <Stats.Stat>
            <Stats.Stat.Title>Active</Stats.Stat.Title>
          </Stats.Stat>
        </Stats>

it throws :

React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

because there is no Stats.Stat.Title indeed when i check the build it is typed like this

import React from 'react';
import { IComponentBaseProps } from '../types';
export type StatsProps = React.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & {
    horizontal?: boolean;
    vertical?: boolean;
};
declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & {
    horizontal?: boolean | undefined;
    vertical?: boolean | undefined;
} & React.RefAttributes<HTMLDivElement>> & {
    Stat: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & React.RefAttributes<HTMLDivElement>> & {
        Item: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & {
            variant: "title" | "value" | "desc" | "figure" | "actions";
        } & React.RefAttributes<HTMLDivElement>>;
    };
};
export default _default;

Are you sure you are using the latest version (5.0.1)? The code you pasted from Stat.tsx isn't using the current Stat structure which explains why your attempt isn't working.

@dev0T yep i have version 5.0.0. It uses storybook as usage documentation. Wehn you go to story book and check stats it is exactly like this :

    <Stats {...args} className="shadow">
      <Stats.Stat>
        <Stats.Stat.Title>Total Page Views</Stats.Stat.Title>
        <Stats.Stat.Value>89,400</Stats.Stat.Value>
        <Stats.Stat.Desc>21% more than last month</Stats.Stat.Desc>
      </Stats.Stat>
    </Stats>

Which is same structure i used i believe.

@dev0T yep i have version 5.0.0. It uses storybook as usage documentation. Wehn you go to story book and check stats it is exactly like this :

    <Stats {...args} className="shadow">
      <Stats.Stat>
        <Stats.Stat.Title>Total Page Views</Stats.Stat.Title>
        <Stats.Stat.Value>89,400</Stats.Stat.Value>
        <Stats.Stat.Desc>21% more than last month</Stats.Stat.Desc>
      </Stats.Stat>
    </Stats>

Which is same structure i used i believe.

The storybook is updated for version 5.0.1 and not for 5.0.0. You need to upgrade your version.