greenole-design-system 1.1.1

package/README.md

@@ -0,0 +1,112 @@
+# Greenole Design System
+
+[![Figma Design](https://img.shields.io/badge/Figma-Design_System-blue)](https://www.figma.com/design/Zwkbh8XGfVt2At4ln7p1WE/DS-Greenole?node-id=1017-15&p=f&t=Mjdfp67Q8ADWcm9v-0)
+
+The **Greenole Design System** is a React component library designed to create consistent and scalable user interfaces.  
+The library is constantly evolving, with new components and improvements being added over time.
+
+## Table of Contents
+
+- [Introduction](#introduction)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Development](#development)
+- [Build & Publication](#build--publication)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Introduction
+
+**Greenole Design System** gathers reusable components that follow a consistent visual identity.  
+It helps teams maintain design and usability standards across their React projects.
+
+> **Note:**  
+> This library is in constant evolution. Existing components may be updated and new ones added over time.
+
+## Installation
+
+To install the library in your React project, run:
+
+```bash
+npm install greenole-design-system
+```
+
+> **Note:**  
+> The library declares `react` and `react-dom` as peer dependencies, so ensure your project already has these installed.
+
+## Usage
+
+After installation, you can import and use the library's components as follows:
+
+```jsx
+import React from 'react';
+import { Typography } from 'greenole-design-system';
+
+function App() {
+  return (
+    <div>
+      <Typography variant="h1">
+        The quick brown fox jumps over the lazy dog.
+      </Typography>
+      {/* Additional components will be added in the future */}
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Development
+
+To contribute to or test the library locally:
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/your-username/greenole-design-system.git
+   cd greenole-design-system
+   ```
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Start the development environment using Vite:
+   ```bash
+   npm run dev
+   ```
+4. To view the documentation and components, we use **Storybook**:
+   ```bash
+   npm run storybook
+   ```
+   Storybook serves as the documentation and demo environment for the library's components.
+
+## Build & Publication
+
+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`:
+   ```bash
+   cd greenole-design-system
+   npm link
+   cd ../your-consumer-project
+   npm link greenole-design-system
+   ```
+3. When ready to publish:
+   ```bash
+   npm login
+   npm publish --access public
+   ```
+
+## Contributing
+
+Contributions are welcome! If you would like to help evolve the **Greenole Design System**, follow these steps:
+
+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.

package/dist/components/Empty/Empty.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const Empty: () => React.JSX.Element;
+export default Empty;

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

@@ -0,0 +1,20 @@
+import { StoryObj } from '@storybook/react';
+import { default as Empty } from './Empty';
+import { default as React } from 'react';
+declare const meta: {
+    title: string;
+    component: () => React.JSX.Element;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof Empty>;
+export declare const Default: Story;
+export declare const InCard: Story;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface ArrowBackProps {
+    className?: string;
+}
+export default function ArrowBack({ className }: ArrowBackProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface ArrowForwardProps {
+    className?: string;
+}
+export default function ArrowForward({ className }: ArrowForwardProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface CampaingProps {
+    className?: string;
+}
+declare const Campaing: React.FC<CampaingProps>;
+export default Campaing;

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

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface CheckboxProps {
+    checked?: boolean;
+    className?: string;
+}
+export default function Checkbox({ checked, className }: CheckboxProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface ChevronDownProps {
+    className?: string;
+}
+export default function ChevronDown({ className }: ChevronDownProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface DashEditProps {
+    className?: string;
+}
+declare const DashEdit: React.FC<DashEditProps>;
+export default DashEdit;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface DashboardProps {
+    className?: string;
+}
+declare const Dashboard: React.FC<DashboardProps>;
+export default Dashboard;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface DevicesProps {
+    className?: string;
+}
+declare const Devices: React.FC<DevicesProps>;
+export default Devices;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface FlagBRProps {
+    className?: string;
+}
+declare const FlagBR: React.FC<FlagBRProps>;
+export default FlagBR;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface FlagESProps {
+    className?: string;
+}
+declare const FlagES: React.FC<FlagESProps>;
+export default FlagES;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface FlagPTProps {
+    className?: string;
+}
+declare const FlagPT: React.FC<FlagPTProps>;
+export default FlagPT;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface FlagUKProps {
+    className?: string;
+}
+declare const FlagUK: React.FC<FlagUKProps>;
+export default FlagUK;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface FlagUSAProps {
+    className?: string;
+}
+declare const FlagUSA: React.FC<FlagUSAProps>;
+export default FlagUSA;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface HeaderSearchProps {
+    className?: string;
+}
+declare const HeaderSearch: React.FC<HeaderSearchProps>;
+export default HeaderSearch;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface HelpOutlinedProps {
+    className?: string;
+}
+declare const HelpOutlined: React.FC<HelpOutlinedProps>;
+export default HelpOutlined;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface HistoryProps {
+    className?: string;
+}
+declare const History: React.FC<HistoryProps>;
+export default History;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface HomeProps {
+    className?: string;
+}
+declare const Home: React.FC<HomeProps>;
+export default Home;

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

@@ -0,0 +1,31 @@
+export { default as ArrowBack } from './ArrowBack';
+export { default as ArrowForward } from './ArrowForward';
+export { default as ChevronDown } from './ChevronDown';
+export { default as Home } from './Home';
+export { default as Checkbox } from './Checkbox';
+export { default as DashEdit } from './DashEdit';
+export { default as HeaderSearch } from './HeaderSearch';
+export { default as MoreHorizontal } from './MoreHorizontal';
+export { default as Search } from './Search';
+export { default as Settings } from './Settings';
+export { default as Lock } from './Lock';
+export { default as Notification } from './Notification';
+export { default as PriorityHigh } from './PriorityHigh';
+export { default as Public } from './Public';
+export { default as Star } from './Star';
+export { default as WarningAmber } from './WarningAmber';
+export { default as FlagBR } from './FlagBR';
+export { default as FlagES } from './FlagES';
+export { default as FlagPT } from './FlagPT';
+export { default as FlagUK } from './FlagUK';
+export { default as FlagUSA } from './FlagUSA';
+export { default as Campaign } from './Campaing';
+export { default as Dashboard } from './Dashboard';
+export { default as Devices } from './Devices';
+export { default as History } from './History';
+export { default as Language } from './Language';
+export { default as Map } from './Map';
+export { default as PeopleAlt } from './PeopleAlt';
+export { default as Moon } from './Moon';
+export { default as WBSunny } from './WBSunny';
+export { default as Logout } from './Logout';

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

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const AllIcons: Story;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface LanguageProps {
+    className?: string;
+}
+declare const Language: React.FC<LanguageProps>;
+export default Language;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface LockProps {
+    className?: string;
+}
+declare const Lock: React.FC<LockProps>;
+export default Lock;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface LogoutProps {
+    className?: string;
+}
+declare const Logout: React.FC<LogoutProps>;
+export default Logout;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface MapProps {
+    className?: string;
+}
+declare const Map: React.FC<MapProps>;
+export default Map;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface MoonProps {
+    className?: string;
+}
+declare const Moon: React.FC<MoonProps>;
+export default Moon;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface MoreHorizontalProps {
+    className?: string;
+}
+declare const MoreHorizontal: React.FC<MoreHorizontalProps>;
+export default MoreHorizontal;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface NotificationProps {
+    className?: string;
+}
+declare const Notification: React.FC<NotificationProps>;
+export default Notification;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface PeopleAltProps {
+    className?: string;
+}
+declare const PeopleAlt: React.FC<PeopleAltProps>;
+export default PeopleAlt;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface PriorityHighProps {
+    className?: string;
+}
+declare const PriorityHigh: React.FC<PriorityHighProps>;
+export default PriorityHigh;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface PublicProps {
+    className?: string;
+}
+declare const Public: React.FC<PublicProps>;
+export default Public;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface SearchProps {
+    className?: string;
+}
+declare const Search: React.FC<SearchProps>;
+export default Search;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface SecurityProps {
+    className?: string;
+}
+declare const Security: React.FC<SecurityProps>;
+export default Security;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface SettingsProps {
+    className?: string;
+}
+declare const Settings: React.FC<SettingsProps>;
+export default Settings;

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

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface StarProps {
+    className?: string;
+    filled?: boolean;
+}
+declare const Star: React.FC<StarProps>;
+export default Star;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface WBSunnyProps {
+    className?: string;
+}
+declare const WBSunny: React.FC<WBSunnyProps>;
+export default WBSunny;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface WarningAmberProps {
+    className?: string;
+}
+declare const WarningAmber: React.FC<WarningAmberProps>;
+export default WarningAmber;

package/dist/components/Table/DataTable.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { Column } from './types';
+interface DataTableProps {
+    columns: Column[];
+    data: any[];
+    selectable?: boolean;
+    selectedRows?: string[];
+    onSelectRow?: (rowId: string, selected: boolean) => void;
+    onSelectAll?: (allSelected: boolean) => void;
+    rowIdKey?: string;
+    page?: number;
+    pageSize?: number;
+    totalItems?: number;
+    onPageChange?: (newPage: number) => void;
+    onPageSizeChange?: (newSize: number) => void;
+}
+export declare function DataTable({ columns, data, selectable, selectedRows, onSelectRow, onSelectAll, rowIdKey, page, pageSize, totalItems, onPageChange, onPageSizeChange }: DataTableProps): React.JSX.Element;
+export default DataTable;

package/dist/components/Table/DataTable.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DataTable } from './DataTable';
+declare const meta: Meta<typeof DataTable>;
+export default meta;
+type Story = StoryObj<typeof DataTable>;
+export declare const Default: Story;
+export declare const WithSelection: Story;
+export declare const WithPagination: Story;

package/dist/components/Table/Pagination.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+interface PaginationProps {
+    page: number;
+    pageSize: number;
+    totalItems: number;
+    onPageChange: (newPage: number) => void;
+    onPageSizeChange: (newSize: number) => void;
+}
+export declare function Pagination({ page, pageSize, totalItems, onPageChange, onPageSizeChange, }: PaginationProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export type Column = {
+    key: string;
+    label?: string;
+    icon?: ReactNode;
+    render?: (value: any, row: any) => ReactNode;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    minWidthClass?: string;
+};

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

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+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';
+interface TypographyProps {
+    variant?: TypographyVariant;
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+    [key: string]: any;
+}
+declare const Typography: React.FC<TypographyProps>;
+export default Typography;

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

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Typography } from './Typography';
+declare const meta: Meta<typeof Typography>;
+export default meta;
+type Story = StoryObj<typeof Typography>;
+export declare const Default: Story;
+export declare const H1: Story;
+export declare const H2: Story;
+export declare const H3: Story;
+export declare const H4: Story;
+export declare const H5: Story;
+export declare const H6: Story;
+export declare const BodyXLBold: Story;
+export declare const BodyXLSemibold: Story;
+export declare const BodyXLMedium: Story;
+export declare const BodyXLRegular: Story;
+export declare const BodyLGBold: Story;
+export declare const BodyLGSemibold: Story;
+export declare const BodyLGMedium: Story;
+export declare const BodyLGRegular: Story;
+export declare const BodyMDBold: Story;
+export declare const BodyMDSemibold: Story;
+export declare const BodyMDMedium: Story;
+export declare const BodyMDRegular: Story;
+export declare const BodySMBold: Story;
+export declare const BodySMSemibold: Story;
+export declare const BodySMMedium: Story;
+export declare const BodySMRegular: Story;
+export declare const CaptionBold: Story;
+export declare const CaptionSemibold: Story;
+export declare const CaptionMedium: Story;
+export declare const CaptionRegular: Story;