v4.x

. npmignore

@@ -1,3 +1,4 @@
 node_modules
 .npmrc
-docs/
+docs/
+examples

.eslintignore

@@ -2,4 +2,5 @@ node_modules/
 public/
 coverage/
 docs/
-rollup.*
+rollup.*
+examples

.github/workflows/main.yml

@@ -5,7 +5,7 @@ on:
       - master
 jobs:
   release:
-    # uncomment next line as soon as visual tesing starts working
+    # uncomment next line as soon as visual testing starts working
     # needs: visual_test
     name: Release tag
     runs-on: ubuntu-latest

.github/workflows/next.yml

@@ -0,0 +1,59 @@
+name: "Release next"
+on:
+  push:
+    branches:
+      - v4.x
+jobs:
+  release: 
+    name: Release tag
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '20.x'
+
+      - name: npm install
+        run: npm ci
+
+      - name: setup git
+        run: git checkout -b preparing-module-for-npm-publish && git config --global user.email "release-bot@innovaccer.com" && git config --global user.name "release-bot"
+
+      - name: bump module version
+        run: npm version --no-commit-hooks prerelease -m "Released %s [skip ci]"
+
+      - name: generate .npmrc
+        run: cp .npmrc.stub .npmrc
+
+      - name: Publish to npm js
+        run: npm publish --access public --tag=next
+        env:
+          NPM_TOKEN: ${{secrets.NPM_TOKEN}}
+
+      - name: remove .npmrc
+        run: rm -rf .npmrc
+
+      - name: push tag to github
+        run: git push https://${{ secrets.GH_TOKEN }}@github.com/$GITHUB_REPOSITORY.git $(node ./getVersion.js)
+
+      - name: remove css/dist dist/ from commit
+        run: |
+          git reset HEAD~1
+          git add package.json
+          git commit -m "Released $(node ./getVersion.js) [skip ci]" --no-verify
+
+      - name: push version to github
+        run: git push https://${{ secrets.GH_TOKEN }}@github.com/$GITHUB_REPOSITORY.git HEAD:next
+
+      - name: deploy storybook
+        run: npm run deploy-storybook -- --bucket-path=webui-mds-sb-next --aws-profile=NONE --ci
+        env:
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.DOCS_KEY }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.DOCS_KEY_ID }}
+          AWS_REGION: ${{ secrets.DOCS_REGION }}
+
+      - name: notify release
+        uses: /innovaccer/design-system/actions/notify-release@next
+        env:
+          GCHAT_PATH: ${{ secrets.GCHAT_PATH }}

.github/workflows/pull_request.yml

@@ -16,9 +16,6 @@ jobs:
       - name: npm install
         run: npm ci
 
-      - name: lint
-        run: npm run lint:check
-
       - name: test
         run: npm run test
 

.storybook/main.js

@@ -1,5 +1,10 @@
 const path = require('path');
 
+const cssTokenFiles = [
+  path.resolve(__dirname, '../css/src/variables/index.css'),
+  path.resolve(__dirname, '../css/src/tokens/index.css')
+];
+
 module.exports = {
   stories: ['../core/components/**/*.story.@(js|jsx|ts|tsx)', '../core/ai-components/**/*.story.@(js|jsx|ts|tsx)'],
   addons: [
@@ -16,6 +21,33 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
     '@storybook/addon-knobs',
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+          postcssOptions: {
+            plugins: [
+              require('autoprefixer'),
+              require('postcss-color-mod-function')({
+                importFrom: cssTokenFiles,
+              }),
+            ],
+          },
+        },
+      },
+    },
+    {
+      name: 'storybook-css-modules',
+      options: {
+        cssModulesLoaderOptions: {
+          importLoaders: 1,
+          modules: {
+            localIdentName: '[local]', // Use local class names directly
+          },
+        },
+      },
+    },
   ],
   typescript: {
     check: false,
@@ -33,6 +65,7 @@ module.exports = {
   },
   webpackFinal: async (config, { configType }) => {
     config.resolve.alias['@'] = path.resolve(__dirname, '../core');
+    config.resolve.alias['@css'] = path.resolve(__dirname, '../css/src');
     config.resolve.alias['@innovaccer/mds-images/ui-states'] = path.resolve(__dirname, '../mds-images/ui-states');
     // Return the altered config
     return config;

CHANGELOG.md

@@ -1,3 +1,49 @@
+## 3.5.0 (2024-12-12)
+
+### Highlights
+
+- feat(avatar): add presence indicator support in avatar component (ce945f26)
+- feat(avatar): add status indicator support in avatar (58857846)
+- fix(input): update cursor position on input type change (8f45613f)
+- fix(table): update table stories structure on storybook (9e3b4d53)
+- feat(statusHint): update color for default appearance (a64c5128)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(avatar): add presence indicator support in avatar component (ce945f26)
+- feat(avatar): add status indicator support in avatar (58857846)
+- feat(statusHint): update color for default appearance (a64c5128)
+
+### Fixes
+
+- fix(input): update cursor position on input type change (8f45613f)
+
+### Improvements
+
+- chore: fix lint error in dropzone component & toast figma connect (9c8a41ec)
+- fix(progressIndicators): update story of spinner and progress ring (506ca9b1)
+- fix(table): update table stories structure on storybook (9e3b4d53)
+- refactor(table): update table props description on storybook (f041f10f)
+
+### Documentation
+
+- docs(docs): add status and presence indicator documentation in avatar (dc14464c)
+- docs(docs): update table preview link in documentation (1df056c2)
+
+---
+
 ## 3.4.0 (2024-11-18)
 
 ### Highlights

CONTRIBUTING.md

@@ -279,28 +279,28 @@ const AvatarAppearance =
   appearance || colors[(initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % 8] || DefaultAppearance;
 ```
 
-- [ClassNames](https://www.npmjs.com/package/classnames) is a utility for conditionally joining CSS classNames together.
-- CSS is added according to [BEM Convention](http://getbem.com/naming/).
+- CSS Module has been used to define the class names.
+
+1. Create a CSS file inside `css` directory with the file extension `module.css` (e.g `avatar.module.css`)
+2. Import the CSS file inside your component's `.tsx` file using: 
+
+```jsx
+import styles from './avatar.module.css';
+```
+
+3. Use [ClassNames](https://www.npmjs.com/package/classnames), a utility for conditionally joining CSS classNames together.
+4. Follow the [BEM Convention](http://getbem.com/naming/) and use CSS Modules for naming CSS classes.
 
 ```jsx
 const classes = classNames(
   {
-    Avatar: true,
-    [`Avatar--${size}`]: size,
-    [`Avatar--${AvatarAppearance}`]: AvatarAppearance,
-    ['Avatar--disabled']: !initials || !withTooltip,
+    [styles.Avatar]: true,
+    [styles[`Avatar--${size}`]]: size,
+    [styles[`Avatar--${AvatarAppearance}`]]: AvatarAppearance,
+    [styles['Avatar--disabled']]: !initials || !withTooltip,
   },
   className
 );
-
-const ContentClass = classNames({
-  [`Avatar-content--${size}`]: size,
-  [`Avatar-content--${AvatarAppearance}`]: AvatarAppearance,
-});
-
-const IconClass = classNames({
-  [`Avatar-content--${AvatarAppearance}`]: AvatarAppearance,
-});
 ```
 
 - Add rendering logic and `data-test` attribute.

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

core/ai-components/AIButton/index.tsx

@@ -4,6 +4,7 @@ import { TButtonAppearance, TButtonType, TBaseHtmlProps } from '../common.type';
 import BasicIcon from './icons/Basic.svg';
 import BasicDisabledIcon from './icons/BasicDisabled.svg';
 import PrimaryIcon from './icons/Primary.svg';
+import styles from '@css/ai-components/button.module.css';
 
 export interface AIButtonProps extends TBaseHtmlProps<HTMLButtonElement> {
   /**
@@ -53,15 +54,15 @@ export const AIButton = (props: AIButtonProps) => {
 
   const buttonClassNames = classNames(
     {
-      AIButton: true,
-      'AIButton--primary': appearance === 'primary',
-      'AIButton--basic': appearance === 'basic',
+      [styles.AIButton]: true,
+      [styles['AIButton--primary']]: appearance === 'primary',
+      [styles['AIButton--basic']]: appearance === 'basic',
     },
     className
   );
 
   const IconClassNames = classNames({
-    'AIButton-Icon': true,
+    [styles['AIButton-Icon']]: true,
   });
 
   const buttonIcon = appearance === 'primary' ? PrimaryIcon : disabled ? BasicDisabledIcon : BasicIcon;

core/ai-components/AIChip/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import styles from '@css/ai-components/chip.module.css';
 
 export interface AIChipProps extends React.ComponentProps<'button'> {
   /**
@@ -29,22 +30,22 @@ export const AIChip = (props: AIChipProps) => {
 
   const ChipClassNames = classNames(
     {
-      AIChip: true,
-      'AIChip--disabled': disabled,
+      [styles.AIChip]: true,
+      [styles['AIChip--disabled']]: disabled,
     },
     className
   );
 
   const IconClassNames = classNames({
-    'AIChip-icon': true,
-    'AIChip-icon--disabled': disabled,
+    [styles['AIChip-icon']]: true,
+    [styles['AIChip-icon--disabled']]: disabled,
     ['material-symbols']: true,
     ['material-symbols-rounded']: true,
   });
 
   const TextClassNames = classNames({
-    'AIChip-text': true,
-    'AIChip-text--disabled': disabled,
+    [styles['AIChip-text']]: true,
+    [styles['AIChip-text--disabled']]: disabled,
   });
 
   return (

core/ai-components/AIIconButton/SaraIcon.tsx

@@ -5,6 +5,7 @@ import SaraIconTop from './icons/SaraIconTop';
 import SaraIconBottom from './icons/SaraIconBottom';
 import SaraDisabledTop from './icons/SaraDisabledTop';
 import SaraDisabledBottom from './icons/SaraDisabledBottom';
+import styles from '@css/ai-components/iconButton.module.css';
 
 interface SaraIconProp {
   size: TSize2Hierarchy;
@@ -16,11 +17,11 @@ export const SaraIcon = (props: SaraIconProp) => {
   const { size, position, disabled } = props;
 
   const AIIconClassNames = classNames({
-    'AIIconButton-AIIcon': true,
-    'AIIconButton-AIIcon--largeTop': position === 'top' && size === 'large',
-    'AIIconButton-AIIcon--regularTop': position === 'top' && size === 'regular',
-    'AIIconButton-AIIcon--regularBottom': position === 'bottom' && size === 'regular',
-    'AIIconButton-AIIcon--largeBottom': position === 'bottom' && size === 'large',
+    [styles['AIIconButton-AIIcon']]: true,
+    [styles['AIIconButton-AIIcon--largeTop']]: position === 'top' && size === 'large',
+    [styles['AIIconButton-AIIcon--regularTop']]: position === 'top' && size === 'regular',
+    [styles['AIIconButton-AIIcon--regularBottom']]: position === 'bottom' && size === 'regular',
+    [styles['AIIconButton-AIIcon--largeBottom']]: position === 'bottom' && size === 'large',
   });
 
   if (disabled && position === 'bottom') {

core/ai-components/AIIconButton/index.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { TIconPosition, TButtonType, TSize2Hierarchy, TBaseHtmlProps } from '../common.type';
 import { Tooltip } from '@/index';
 import SaraIcon from './SaraIcon';
+import styles from '@css/ai-components/iconButton.module.css';
 
 export interface AIIconButtonProps extends Omit<TBaseHtmlProps<HTMLButtonElement>, 'size'> {
   /**
@@ -64,13 +65,13 @@ export const AIIconButton = (props: AIIconButtonProps) => {
 
   const buttonClassNames = classNames(
     {
-      AIIconButton: true,
+      [styles.AIIconButton]: true,
     },
     className
   );
 
   const IconClassNames = classNames({
-    'AIIconButton-icon': true,
+    [styles['AIIconButton-icon']]: true,
     ['material-symbols']: true,
     ['material-symbols-rounded']: true,
   });

core/ai-components/AIResponse/ChatActionBar.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { TBaseHtmlProps } from '../common.type';
+import styles from '@css/ai-components/chat.module.css';
 
 export interface ChatActionBarProps extends TBaseHtmlProps<HTMLDivElement> {
   /**
@@ -22,7 +23,7 @@ export const ChatActionBar = (props: ChatActionBarProps) => {
 
   const actionBarClassNames = classNames(
     {
-      'AIResponse-actionBar': true,
+      [styles['AIResponse-actionBar']]: true,
     },
     className
   );

core/ai-components/AIResponse/ChatBox.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { TBaseHtmlProps } from '../common.type';
+import styles from '@css/ai-components/chat.module.css';
 
 export interface ChatBoxProps extends TBaseHtmlProps<HTMLDivElement> {
   /**
@@ -22,7 +23,7 @@ export const ChatBox = (props: ChatBoxProps) => {
 
   const chatBoxClassNames = classNames(
     {
-      'AIResponse-box': true,
+      [styles['AIResponse-box']]: true,
     },
     className
   );