gd-design-library 0.0.11 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,75 @@
+# [Versions](https://www.npmjs.com/package/gd-design-library?activeTab=versions)
+
+# Changelog
+
+## [0.1.0]
+
+### Features
+
+- **Icon Stories**: Enhanced Icon stories with custom icons registration (#138)
+- **Custom Icons**: Added support for custom icons (#137)
+- **Header**: Simplified Header component and registered custom icons (#110)
+- **Card Components**: Refactored Card components and improved styles (#135)
+- **Progress Bar**: Added base functionality for progress bar (#199)
+- **Accordion**: Implemented accordion base functionality (#185)
+- **Typography**: Improved Typography component formatting and added "Small" style (#195)
+- **Select**: Added keyboard events and improved select state handling (#113)
+- **Rating**: Added rating view and component (#50)
+- **Theme**: Improved theme switching and custom theme support (#71)
+- **Loader**: Added base Loader component with multiple sizes (#42)
+- **Modal**: Added base modal window functionality (#39)
+- **Tooltip**: Added tooltip component (#35)
+- **Layout**: Created layout container components (Row/Column) (#20)
+
+### Refactor
+
+- **Theme Handling**: Updated typing for theme change handler
+- **Imports**: Removed unused imports from Header component (multiple commits)
+- **Typography**: Refactored typography style handling (#156)
+- **Button**: Enhanced Button component with improved styling support
+- **Components**: Simplified components and aligned imports (#124)
+- **Tokens**: Updated color, radius, and spacing tokens (#65)
+
+### Fixes
+
+- **Console Warnings**: Fixed console warnings in App.tsx (#194)
+- **Snapshot Tests**: Updated snapshots across multiple components
+- **Focus Styles**: Implemented focus styles for checkbox and radio inputs (#186)
+- **Select**: Fixed styles and theme integration (#188)
+- **Textarea**: Skipped snapshot test in textarea (#82)
+
+### CI/CD
+
+- **NPM Publishing**: Added release pipeline for publishing to NPM (#111)
+- **Slack Notifications**: Added Slack notifications to CI (#75)
+- **Playwright**: Added initial Playwright test setup (#69)
+
+### Documentation
+
+- **README**: Updated README with component creation script (#99)
+- **Storybook**: Enhanced Storybook docs for multiple components
+
+---
+
+## Previous Changes
+
+<details>
+<summary>Expand full history</summary>
+
+### Older Features
+
+- **Search**: Added search functionality based on select (#102)
+- **Tabs**: Implemented Tabs component (#139)
+- **Stepper**: Added stepper view (#46)
+- **Form**: Added base form concept (#32)
+- **Textarea**: Added core textarea functionality (#26)
+- **Link**: Added Link component (#27)
+- **Input**: Added base input component (#13)
+
+### Infrastructure
+
+- **Monorepo**: Integrated Nx monorepo setup
+- **Linting**: Configured ESLint and Prettier (#6)
+- **Testing**: Added Jest and React Testing Library (#11)
+
+</details>

package/README.md

@@ -1,201 +1,184 @@
-# GD Design System
+# GridKit – Grid Dynamics Design System
 
-Welcome to the GD Design System project!
-This design system is built using React and Vite, and it aims to provide a comprehensive set of reusable components and styles for Grid Dynamics.
+![](./gridKit_logo.png)
 
-## Project Structure
+**GridKit** is the official design system and component library from Grid Dynamics.  
+It provides a set of reusable, accessible, and themeable React UI components designed to accelerate the development of consistent, scalable applications – with a focus on e-commerce and enterprise platforms.
 
-The project structure is as follows:
-gd-design-system/
+---
 
-```
-├── dist
-├── [src](src)
-│ ├── App.css
-│ ├── App.tsx
-│ ├── assets
-│ │ └── index.ts
-│ ├── [components](src/components)
-│ │ ├── [core](src/components/core)
-│ │ │ ├── [types](src/components/core/types)
-│ │ │ │ ├── common.ts
-│ │ │ │ ├── cursors.ts
-│ │ │ │ └── index.ts
-│ │ │ ├── [Button](src/components/core/Button)
-│ │ │ │ ├── index.ts
-│ │ │ │ ├── constants.ts
-│ │ │ │ ├── Button.stories.tsx
-│ │ │ │ ├── Button.test.tsx
-│ │ │ │ ├── Button.types.ts
-│ │ │ │ ├── Button.tsx
-│ │ │ │ └── StyledButton.ts
-│ │ │ ├── [Input](src/components/core/Input)
-│ │ │ │ ├── index.ts
-│ │ │ │ ├── constants.ts
-│ │ │ │ ├── Input.stories.tsx
-│ │ │ │ ├── Input.test.tsx
-│ │ │ │ ├── Input.types.ts
-│ │ │ │ ├── input.tsx
-│ │ │ │ └── StyledInput.ts
-│ │ │ ├── [Label](src/components/core/Label)
-│ │ │ │ ├── index.ts
-│ │ │ │ ├── constants.ts
-│ │ │ │ ├── Label.stories.tsx
-│ │ │ │ ├── Label.test.tsx
-│ │ │ │ ├── Label.types.ts
-│ │ │ │ ├── Label.tsx
-│ │ │ │ └── StyledLabel.ts
-│ │ │ ├── [Form](src/components/core/Form)
-│ │ │ │ ├── index.ts
-│ │ │ │ ├── constants.ts
-│ │ │ │ ├── utils.ts
-│ │ │ │ ├── Form.stories.tsx
-│ │ │ │ ├── Form.test.tsx
-│ │ │ │ ├── Form.types.ts
-│ │ │ │ ├── Form.tsx
-│ │ │ │ └── StyledForm.ts
-│ │ │ ├── [Typography](src/components/core/Typography)
-│ │ │ │ ├── index.ts
-│ │ │ │ ├── constants.ts
-│ │ │ │ ├── Typography.stories.tsx
-│ │ │ │ ├── Typography.test.tsx
-│ │ │ │ ├── Typography.types.ts
-│ │ │ │ ├── Typography.tsx
-│ │ │ │ └── StyledTypography.ts
-│ │ │ └── index.ts
-│ │ ├── [domainSpecific](src/components/domainSpecific)
-│ │ │ └── index.ts
-│ │ └── index.ts
-│ ├── [hooks](src/hooks)
-│ │ └── [useTheme](src/hooks/useTheme)
-│ │   ├── index.ts
-│ │   ├── types.ts
-│ │   └── useTheme.ts
-│ ├── index.css
-│ ├── main.tsx
-│ ├── [tokens](src/tokens)
-│ │ ├── borders.ts
-│ │ ├── button.ts
-│ │ ├── colors.ts
-│ │ ├── defaultTheme.ts
-│ │ ├── index.ts
-│ │ ├── utils.ts
-│ │ ├── spacing.ts
-│ │ ├── typography.ts
-│ │ └── values.ts
-│ ├── [utils](src/utils)
-│ │ └── index.ts
-│ └── vite-env.d.ts
-├── tsconfig.app.json
-├── tsconfig.json
-├── tsconfig.node.json
-|── vite.config.ts
-├── eslint.config.js
-├── index.html
-├── package-lock.json
-├── package.json
-└── README.md
+## ✨ Features
+
+- 🧩 35+ modular components (core, layout, domain-specific)
+- 🎨 Theming support with dynamic runtime switching
+- 🔗 Design tokens synced with Figma
+- 📦 Optimized build using Vite
+- 📚 Fully documented via Storybook
+- ♿ WCAG 2.1 AA-compliant components
+- ⚙️ Type-safe and fully tested with Vitest + RTL
+
+---
+
+## 📦 Installation
+
+```bash
+npm install gd-design-library
+# or
+yarn add gd-design-library
 ```
 
-## Getting Started
+Note: Since this package is private, you need to configure your `.npmrc` with a valid auth token:
 
-### Prerequisites
+```bash
+//registry.npmjs.org/:_authToken=<npm_token>
+```
 
-Make sure you have the following installed:
+---
 
-- Node.js (version 18 or higher)
-- npm (version 6 or higher) or yarn
+## 🧑‍💻 Getting Started
 
-### Installation
+### Prerequisites
 
-Clone the repository and install the dependencies:
+- Node.js (v18 or higher)
+- Yarn or npm
 
-```sh
+### Clone & Install
+
+```bash
 git clone https://github.com/griddynamics/cto-rnd-system-design.git
 cd gd-design-system
 yarn install
 ```
 
-### Development
+---
+
+## 🚀 Development
 
-To start the development server, run:
+Start the local dev server with Vite:
 
-```sh
-yarn run dev
+```bash
+yarn dev
 ```
 
-This will start the Vite development server and open the project in your default web browser.
+Open [http://localhost:5173](http://localhost:5173) in your browser.
 
-### Building
+### Run Storybook
 
-To build the project for production, run:
+```bash
+yarn storybook
+```
+
+---
+
+## 🏗️ Project Structure
 
-```sh
-yarn run build
+```
+gd-design-system/
+├── src/
+│   ├── components/
+│   │   ├── core/               # Core UI components (Button, Input, etc.)
+│   │   ├── domainSpecific/     # Business-specific components
+│   ├── tokens/                 # Design tokens from Figma
+│   ├── hooks/                 # Shared React hooks
+│   └── utils/                 # Utility functions
+├── .storybook/                # Storybook config
+├── vite.config.ts             # Vite config
+├── tsconfig.json              # TypeScript config
+├── README.md
 ```
 
-The output will be generated in the dist directory.
+---
 
-### Linting & Prettier
+## 🧪 Testing & Linting
 
-To lint the project, run:
+### Run Tests
 
-```sh
-yarn run lint
+```bash
+yarn test
 ```
 
-### Code Formatting with Prettier
+### Lint Code
 
-To lint the project, run:
+```bash
+yarn lint
+```
+
+### Format Code
 
-```sh
+```bash
 yarn format
 ```
 
-Check for formatting issues:
+### Check Formatting
 
-```sh
+```bash
 yarn format:check
 ```
 
-## Expanding the ESLint configuration
+---
+
+## 🧰 Component Generator
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+Use our CLI script to quickly scaffold new components:
 
-- Configure the top-level `parserOptions` property like this:
+### Add Execution Permission (first time)
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-});
+```bash
+chmod +x ./bin/create-component.js
 ```
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react';
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-});
+### Create a Component
+
+```bash
+yarn crc ButtonGroup
 ```
+
+You’ll be prompted to select:
+
+- `core`
+- `domainSpecific`
+
+The script will generate boilerplate files and update exports automatically.
+
+---
+
+## 🧩 Usage
+
+Wrap your app with the `ThemeProvider`:
+
+```tsx
+import { ThemeProvider } from 'gd-design-library';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+Use components like:
+
+```tsx
+import { Button } from 'gd-design-library';
+
+<Button variant="primary">Click Me</Button>;
+```
+
+---
+
+## 📘 Documentation
+
+Explore our hosted Storybook:
+
+👉 [https://storybook.cto-rnd-system-design.griddynamics.net](https://storybook.cto-rnd-system-design.griddynamics.net)
+
+---
+
+## 📄 License
+
+© Grid Dynamics. All rights reserved.  
+This package is for internal and authorized client use only.
+
+---

package/assets/icons/account_circle.d.ts

@@ -4,4 +4,4 @@ export declare const AccountCircleIcon: ({ width, height, fillSvg, fill, ...rest
     height?: number | undefined;
     fillSvg?: string | undefined;
     fill?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/arrow-down.d.ts

@@ -3,4 +3,4 @@ export declare const ArrowDownIcon: ({ width, height, fillSvg, fill, }: {
     height?: number | undefined;
     fillSvg?: string | undefined;
     fill?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/arrow-forward.d.ts

@@ -4,4 +4,4 @@ export declare const ArrowForwardIcon: ({ width, height, fillSvg, fill, ...rest
     height?: number | undefined;
     fillSvg?: string | undefined;
     fill?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/attachment.d.ts

@@ -0,0 +1,7 @@
+export declare const AttachmentIcon: ({ width, height, fillSvg, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/check.d.ts

@@ -4,4 +4,4 @@ export declare const CheckIcon: ({ width, height, fillSvg, fill, ...rest }: {
     height?: number | undefined;
     fillSvg?: string | undefined;
     fill?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/chevron-left.d.ts

@@ -0,0 +1,7 @@
+export declare const ChevronLeftIcon: ({ width, height, fillSvg, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/chevron-right.d.ts

@@ -4,4 +4,4 @@ export declare const ChevronRightIcon: ({ width, height, fillSvg, fill, ...rest
     height?: number | undefined;
     fillSvg?: string | undefined;
     fill?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/cross.d.ts

@@ -4,4 +4,4 @@ export declare const CrossIcon: ({ width, height, fillSvg, fill, ...rest }: {
     height?: number | undefined;
     fillSvg?: string | undefined;
     fill?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/delete_outlined.d.ts

@@ -0,0 +1,7 @@
+export declare const DeleteOutlinedIcon: ({ width, height, fillSvg, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/dot.d.ts

@@ -4,4 +4,4 @@ export declare const DotIcon: ({ width, height, fillSvg, fill, ...rest }: {
     height?: number | undefined;
     fillSvg?: string | undefined;
     fill?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/edit.d.ts

@@ -0,0 +1,7 @@
+export declare const EditIcon: ({ width, height, fillSvg, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/error_outline.d.ts

@@ -1,6 +1,8 @@
-export declare const ErrorOutlineIcon: ({ width, height, color, ...rest }: {
+export declare const ErrorOutlineIcon: ({ width, height, color, fillSvg, fill, ...rest }: {
     [x: string]: any;
     width?: number | undefined;
     height?: number | undefined;
     color?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/eye.d.ts

@@ -0,0 +1,7 @@
+export declare const EyeIcon: ({ width, height, fillSvg, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/favorite.d.ts

@@ -4,4 +4,4 @@ export declare const FavoriteIcon: ({ width, height, fillSvg, fill, ...rest }: {
     height?: number | undefined;
     fillSvg?: string | undefined;
     fill?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/favorite_outlined.d.ts

@@ -0,0 +1,7 @@
+export declare const FavoriteOutlinedIcon: ({ width, height, fillSvg, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/filter.d.ts

@@ -0,0 +1,7 @@
+export declare const FilterIcon: ({ width, height, fillSvg, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/folder.d.ts

@@ -0,0 +1,7 @@
+export declare const FolderIcon: ({ width, height, fillSvg, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/folderOpen.d.ts

@@ -0,0 +1,7 @@
+export declare const FolderOpenIcon: ({ width, height, fillSvg, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/home.d.ts

@@ -4,4 +4,4 @@ export declare const HomeIcon: ({ width, height, fillSvg, fill, ...rest }: {
     height?: number | undefined;
     fillSvg?: string | undefined;
     fill?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/keyboard-arrow-down.d.ts

@@ -0,0 +1,7 @@
+export declare const KeyboardArrowDownIcon: ({ width, height, fillSvg, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/local_shipping.d.ts

@@ -4,4 +4,4 @@ export declare const LocalShippingIcon: ({ width, height, fillSvg, fill, ...rest
     height?: number | undefined;
     fillSvg?: string | undefined;
     fill?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/minus.d.ts

@@ -4,4 +4,4 @@ export declare const MinusIcon: ({ width, height, fillSvg, fill, ...rest }: {
     height?: number | undefined;
     fillSvg?: string | undefined;
     fill?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/mobile_menu_button.d.ts

@@ -4,4 +4,4 @@ export declare const MobileMenuIcon: ({ width, height, fillSvg, fill, ...rest }:
     height?: number | undefined;
     fillSvg?: string | undefined;
     fill?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/paymentCard.d.ts

@@ -0,0 +1,7 @@
+export declare const PaymentCardIcon: ({ width, height, fillSvg, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/plus.d.ts

@@ -4,4 +4,4 @@ export declare const PlusIcon: ({ width, height, fillSvg, fill, ...rest }: {
     height?: number | undefined;
     fillSvg?: string | undefined;
     fill?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/portrait.d.ts

@@ -0,0 +1,7 @@
+export declare const PortraitIcon: ({ width, height, fillSvg, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/processing.d.ts

@@ -0,0 +1,7 @@
+export declare const ProcessingIcon: ({ width, height, fillSvg, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/ruler.d.ts

@@ -0,0 +1,7 @@
+export declare const RulerIcon: ({ width, height, fillSvg, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/search.d.ts

@@ -0,0 +1,7 @@
+export declare const SearchIcon: ({ width, height, fillSvg, fill, ...rest }: {
+    [x: string]: any;
+    width?: number | undefined;
+    height?: number | undefined;
+    fillSvg?: string | undefined;
+    fill?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/assets/icons/shopping_bag.d.ts

@@ -4,4 +4,4 @@ export declare const ShoppingBagIcon: ({ width, height, fillSvg, fill, ...rest }
     height?: number | undefined;
     fillSvg?: string | undefined;
     fill?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;