greenole-design-system 1.1.44 → 1.1.45

package/README.md

@@ -96,9 +96,11 @@ To contribute to or test the library locally:
 To generate the library bundle:
 
 1. Run the build command:
+
    ```bash
    npm run build
    ```
+
    This will create the `dist` folder with both CommonJS and ESModule files, as well as type declarations (if configured).
 
 2. To test locally in another project, use `npm link`:
@@ -109,11 +111,32 @@ To generate the library bundle:
    npm link greenole-design-system
    ```
 3. When ready to publish:
+
    ```bash
    npm login
    npm publish --access public
    ```
 
+## Publishing Storybook to GitHub Pages
+
+1. Build the Storybook:
+
+   ```bash
+   npm run build-storybook
+   ```
+
+   This generates the static files for your Storybook.
+
+2. Deploy to GitHub Pages:
+
+   ```bash
+   npm run deploy-storybook
+   ```
+
+   This will automatically push the built files to the configured branch (`gh-pages`).
+
+   After that, you can access the updated Storybook at: [Design System](https://greenole-iot.github.io/greenole-design-system)
+
 ## Contributing
 
 Contributions are welcome! If you would like to help evolve the **Greenole Design System**, follow these steps:
@@ -121,4 +144,4 @@ Contributions are welcome! If you would like to help evolve the **Greenole Desig
 1. Fork the repository.
 2. Create a branch for your feature (`git checkout -b my-feature`).
 3. Commit your changes.
-4. Open a pull request for review.
+4. Open a pull request for review.

package/dist/base-components/Dropdown/Dropdown.stories.d.ts

@@ -11,3 +11,5 @@ export declare const WithLoadMore: Story;
 export declare const Invalid: Story;
 export declare const WithMessage: Story;
 export declare const OptionsWithIcons: Story;
+export declare const WithClear: Story;
+export declare const WithPortal: Story;

package/dist/base-components/Dropdown/Dropdown.types.d.ts

@@ -25,6 +25,8 @@ export interface DropdownTypes {
     className?: string;
     displayValue?: string;
     isRequired?: boolean;
+    showClearButton?: boolean;
+    container?: HTMLElement;
     t?: THookTypes;
     onChange: (value: string | string[]) => void;
     onSearch?: (searchTerm: string) => void;

package/dist/base-components/Pills/Pills.stories.d.ts

@@ -12,3 +12,4 @@ export declare const Infor: Story;
 export declare const Neutral: Story;
 export declare const WithIcons: Story;
 export declare const CustomTypography: Story;
+export declare const CustomColor: Story;

package/dist/base-components/Pills/Pills.styles.d.ts

@@ -2,5 +2,7 @@ import { PillsVariant } from './Pills.types';
 export declare const PillsWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $variant: PillsVariant;
     $padding?: string;
+    $background?: string;
+    $color?: string;
 }>> & string;
 export declare const IconWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/dist/base-components/Pills/Pills.types.d.ts

@@ -1,5 +1,5 @@
 import { TypographyVariant } from '../../components/Typography/Typography';
-export type PillsVariant = 'neutral' | 'success' | 'danger' | 'warning' | 'info' | 'primary';
+export type PillsVariant = "neutral" | "success" | "danger" | "warning" | "info" | "primary";
 export interface PillsProps {
     label: string;
     variant?: PillsVariant;
@@ -8,4 +8,6 @@ export interface PillsProps {
     iconLeft?: React.ReactNode;
     iconRight?: React.ReactNode;
     className?: string;
+    background?: string;
+    color?: string;
 }

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { BreadcrumbProps } from './Breadcrumb.types';
+export declare const Breadcrumb: React.FC<BreadcrumbProps>;
+export default Breadcrumb;

package/dist/components/Breadcrumb/Breadcrumb.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Breadcrumb } from './Breadcrumb';
+declare const meta: Meta<typeof Breadcrumb>;
+export default meta;
+type Story = StoryObj<typeof Breadcrumb>;
+export declare const Default: Story;
+export declare const WithIcons: Story;
+export declare const WithHomeIcon: Story;
+export declare const WithClickHandlers: Story;
+export declare const WithMaxItems: Story;
+export declare const CustomSeparator: Story;
+export declare const LongPath: Story;

package/dist/components/Breadcrumb/Breadcrumb.styles.d.ts

@@ -0,0 +1,13 @@
+export declare const BreadcrumbContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const BreadcrumbItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isActive: boolean;
+    $isClickable: boolean;
+}>> & string;
+export declare const BreadcrumbLink: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {
+    $isActive: boolean;
+}>> & string;
+export declare const BreadcrumbButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $isActive: boolean;
+}>> & string;
+export declare const BreadcrumbSeparator: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const IconContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/dist/components/Breadcrumb/Breadcrumb.types.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    icon?: ReactNode;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    separator?: ReactNode;
+    className?: string;
+    maxItems?: number;
+    showHomeIcon?: boolean;
+    homeIcon?: ReactNode;
+    onHomeClick?: () => void;
+}

package/dist/components/Breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+export { Breadcrumb, default } from './Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb.types';

package/dist/components/Calendar/Calendar.d.ts

@@ -1,4 +1,11 @@
 import { default as React } from 'react';
+import { InputProps } from '../../base-components/Input/Input.types';
+import { THookTypes } from '../../utils/i18n/types';
 import { CalendarProps } from './Calendar.types';
-export declare const Calendar: React.FC<CalendarProps>;
+interface ExtendedCalendarProps extends CalendarProps {
+    inputProps?: InputProps;
+    autoClose?: boolean;
+    t?: THookTypes;
+}
+export declare const Calendar: React.FC<ExtendedCalendarProps>;
 export default Calendar;

package/dist/components/Calendar/Calendar.stories.d.ts

@@ -3,7 +3,10 @@ import { Calendar } from './Calendar';
 declare const meta: Meta<typeof Calendar>;
 export default meta;
 type Story = StoryObj<typeof Calendar>;
-export declare const Docs: Story;
-export declare const Default: Story;
-export declare const CustomRange: Story;
-export declare const InsideCard: Story;
+export declare const InlineSingle: Story;
+export declare const InlineRange: Story;
+export declare const AsInputSingle: Story;
+export declare const AsInputRange: Story;
+export declare const AsInputRangeNoAutoClose: Story;
+export declare const AsInputWithMinMax: Story;
+export declare const AsInputSingleWithDisabledWeekends: Story;

package/dist/components/Calendar/Calendar.styles.d.ts

@@ -1,7 +1,7 @@
 export declare const CalendarContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const PresetsContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const PresetButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    $isActive: boolean;
+    $isActive?: boolean;
 }>> & string;
 export declare const DateRangeContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const MonthContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
@@ -11,5 +11,8 @@ export declare const NavButton: import('styled-components/dist/types').IStyledCo
 export declare const DaysOfWeekContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DaysGrid: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DayButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    $variant: "single" | "start" | "end" | "inRange" | "hover";
+    $isSelected?: boolean;
+    $inRange?: boolean;
+    $isStart?: boolean;
+    $isEnd?: boolean;
 }>> & string;

package/dist/components/Calendar/Calendar.types.d.ts

@@ -4,6 +4,14 @@ export type DateRange = {
     end: Dayjs | null;
 };
 export interface CalendarProps {
-    defaultRange?: DateRange;
-    onChange?: (range: DateRange) => void;
+    mode?: "single" | "range";
+    selectedDate?: Dayjs | null;
+    selectedRange?: DateRange;
+    onChange: (date: Dayjs | null, range?: DateRange) => void;
+    minDate?: Dayjs;
+    maxDate?: Dayjs;
+    locale?: string;
+    inline?: boolean;
+    disabledDates?: Dayjs[];
+    showPresets?: boolean;
 }

package/dist/components/Calendar/Calendar.utils.d.ts

@@ -6,5 +6,9 @@ export declare const isSameRange: (a: {
     start: Dayjs | null;
     end: Dayjs | null;
 }) => boolean | undefined;
-export declare const formatDate: (date: Dayjs | null) => string;
+export declare const formatDate: (date: Dayjs | null, locale?: string) => string;
+export declare const formatRange: (range: {
+    start: Dayjs | null;
+    end: Dayjs | null;
+}, locale?: string) => string;
 export declare const getDaysOfWeek: (locale?: string) => string[];

package/dist/components/Calendar/DateRangePicker.d.ts

@@ -1,8 +1,15 @@
+import { Dayjs } from 'dayjs';
 import { default as React } from 'react';
 import { DateRange } from './Calendar.types';
 interface Props {
-    range: DateRange;
-    onChange: (range: DateRange) => void;
+    mode: "single" | "range";
+    selectedDate?: Dayjs | null;
+    selectedRange?: DateRange;
+    onChange: (date: Dayjs | null, range?: DateRange) => void;
+    minDate?: Dayjs;
+    maxDate?: Dayjs;
+    locale: string;
+    disabledDates: Dayjs[];
 }
 export declare const DateRangePicker: React.FC<Props>;
 export {};

package/dist/components/Calendar/Presets.d.ts

@@ -1,8 +1,10 @@
 import { default as React } from 'react';
+import { THookTypes } from '../../utils/i18n/types';
 import { DateRange } from './Calendar.types';
 interface PresetsProps {
     currentRange: DateRange;
     onSelect: (range: DateRange) => void;
+    t?: THookTypes;
 }
 export declare const Presets: React.FC<PresetsProps>;
 export {};

package/dist/components/Icons/ArrowLeft.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+interface ArrowLeftProps {
+    width?: number;
+    height?: number;
+    fill?: string;
+    className?: string;
+}
+declare const ArrowLeft: React.FC<ArrowLeftProps>;
+export default ArrowLeft;

package/dist/components/Icons/ChevronRight.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+interface ChevronRightProps {
+    width?: number;
+    height?: number;
+    fill?: string;
+    className?: string;
+}
+declare const ChevronRight: React.FC<ChevronRightProps>;
+export default ChevronRight;

package/dist/components/Icons/Icons.d.ts

@@ -1,6 +1,8 @@
 export { default as ArrowBack } from './ArrowBack';
 export { default as ArrowForward } from './ArrowForward';
+export { default as ArrowLeft } from './ArrowLeft';
 export { default as ChevronDown } from './ChevronDown';
+export { default as ChevronRight } from './ChevronRight';
 export { default as Home } from './Home';
 export { default as Checkbox } from './Checkbox';
 export { default as DashEdit } from './DashEdit';

package/dist/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PageHeaderProps } from './PageHeader.types';
+export declare const PageHeader: React.FC<PageHeaderProps>;
+export default PageHeader;

package/dist/components/PageHeader/PageHeader.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { PageHeader } from './PageHeader';
+declare const meta: Meta<typeof PageHeader>;
+export default meta;
+type Story = StoryObj<typeof PageHeader>;
+export declare const Default: Story;
+export declare const WithBreadcrumb: Story;
+export declare const WithBackButton: Story;
+export declare const WithSearch: Story;
+export declare const WithButtons: Story;
+export declare const WithTabs: Story;
+export declare const Complete: Story;
+export declare const WithCustomIcons: Story;
+export declare const Responsive: Story;

package/dist/components/PageHeader/PageHeader.styles.d.ts

@@ -0,0 +1,15 @@
+export declare const PageHeaderContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const TopSection: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const MainSection: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LeftContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SubtitleWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SearchToggleButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const TitleContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BackButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const RightContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ButtonsContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TabsSection: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TabsRightContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TabsContentSection: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SearchInputWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ResponsiveContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/PageHeader/PageHeader.types.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { BreadcrumbProps } from '../Breadcrumb/Breadcrumb.types';
+import { ButtonVariant } from '../../base-components/Button/Button.types';
+export interface PageHeaderTab {
+    id: string;
+    label: string;
+    isActive?: boolean;
+    onClick?: () => void;
+}
+export interface Button {
+    id: string;
+    label: string;
+    variant?: ButtonVariant;
+    onClick?: () => void;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface PageHeaderProps {
+    title: string;
+    subtitle?: string;
+    breadcrumb?: BreadcrumbProps;
+    tabs?: PageHeaderTab[];
+    search?: {
+        placeholder?: string;
+        value?: string;
+        onChange?: (value: string) => void;
+        onSearch?: (value: string) => void;
+        onToggle?: (isOpen: boolean) => void;
+    };
+    buttons?: Button[];
+    backButton?: {
+        onClick?: () => void;
+    };
+    className?: string;
+}

package/dist/components/PageHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { default, PageHeader } from './PageHeader';
+export type { Button, PageHeaderProps } from './PageHeader.types';

package/dist/components/Typography/Typography.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body-xl-bold' | 'body-xl-semibold' | 'body-xl-medium' | 'body-xl-regular' | 'body-lg-bold' | 'body-lg-semibold' | 'body-lg-medium' | 'body-lg-regular' | 'body-md-bold' | 'body-md-semibold' | 'body-md-medium' | 'body-md-regular' | 'body-sm-bold' | 'body-sm-semibold' | 'body-sm-medium' | 'body-sm-regular' | 'caption-bold' | 'caption-semibold' | 'caption-medium' | 'caption-regular';
+export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle-medium' | 'body-xl-bold' | 'body-xl-semibold' | 'body-xl-medium' | 'body-xl-regular' | 'body-lg-bold' | 'body-lg-semibold' | 'body-lg-medium' | 'body-lg-regular' | 'body-md-bold' | 'body-md-semibold' | 'body-md-medium' | 'body-md-regular' | 'body-sm-bold' | 'body-sm-semibold' | 'body-sm-medium' | 'body-sm-regular' | 'caption-bold' | 'caption-semibold' | 'caption-medium' | 'caption-regular';
 interface TypographyProps {
     variant?: TypographyVariant;
     children: React.ReactNode;

package/dist/components/Typography/Typography.styles.d.ts

@@ -5,6 +5,7 @@ declare const typographyVariants: {
     h4: import('styled-components').RuleSet<object>;
     h5: import('styled-components').RuleSet<object>;
     h6: import('styled-components').RuleSet<object>;
+    'subtitle-medium': import('styled-components').RuleSet<object>;
     'body-xl-bold': import('styled-components').RuleSet<object>;
     'body-xl-semibold': import('styled-components').RuleSet<object>;
     'body-xl-medium': import('styled-components').RuleSet<object>;