Merge branch 'master' into add/status/colors

Author: Namanv0509

.eslintignore

@@ -38,4 +38,4 @@ jobs:
           token: ${{ secrets.SLACK_BOT_TOKEN }}
           payload: |
             channel: C019426UBNY
-            text: ":new: Good first issue up for grabs: <${{ github.event.issue.title }}|${{ github.event.issue.html_url }}>"
+            text: ":new: Good first issue up for grabs: <${{ github.event.issue.html_url }}|${{ github.event.issue.title }}>"

.eslintrc.js

@@ -129,6 +129,43 @@ Run the following command before commiting the changes:
 make lint
 ```
 
+# Project Directory Structure
+
+## Overview of `/src` Directory
+
+### actors
+
+### assets
+
+- Assets are the files that are used in the project. These files can be images, videos, logos or fonts etc. The assets directory is used to store all the assets that are used in the project.
+
+### base
+
+- Base directory contains all the basic components that are used in the project. These components are the building blocks of the project. The base directory contains the following subdirectories like `Buttons`, `Forms`, `Typography` etc.
+
+### constants
+
+- Constants directory contains all the constants that are used in the project. These constants can be colors, fonts, breakpoints etc.
+
+### custom
+
+- Custom directory contains all the custom components using the theme colors.
+
+### icons
+
+- Icons directory contains all the icons that are used in the project or can be used in any of other projects.
+
+### theme
+
+- Theme directory contains all the theme related files. The theme directory contains the following subdirectories like:
+  - `Colors`- contains all the colors that are used in the project or theme components.
+  - `components` - contains all the theme components like `Button`,
+  - `Typography` with brand colors.
+  - [`typography.ts`](https://github.com/layer5io/sistent/blob/master/src/theme/typography.ts) - contains all the typography related files like `font-size`, `font-family` etc.
+  - [`palette.ts`](https://github.com/layer5io/sistent/blob/master/src/theme/palette.ts) - contains all the tokens that are used in the project and used in components.
+
+Through the theme directory, we export the SistentThemeProvider which is used to provide the theme to the project.
+
 # <a name="maintaining"> Reviews</a>
 
 All contributors are invited to review pull requests. See this short video on [how to review a pull request](https://www.youtube.com/watch?v=isLfo7jfE6g&feature=youtu.be).

.github/workflows/slack.yml

@@ -0,0 +1,150 @@
+const { FlatCompat } = require("@eslint/eslintrc");
+const js = require("@eslint/js");
+const tsParser = require("@typescript-eslint/parser");
+const react = require("eslint-plugin-react");
+const reactHooks = require("eslint-plugin-react-hooks");
+const typescript = require("@typescript-eslint/eslint-plugin");
+const storybook = require("eslint-plugin-storybook");
+const globals = require("globals");
+
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+module.exports = [
+    // Global ignores
+    {
+        ignores: [
+            "**/node_modules/**",
+            "**/dist/**",
+            "**/*.md",
+            "**/jest.config.js",
+            "**/vite.config.ts",
+            "**/.eslintrc.cjs",
+            "**/site/**",
+            "apps/next-12/**",
+            "**/.yarnrc.yml",
+            "**/.eslintrc.*js",
+            "**/*.config.*js",
+            "**/eslint-config-sistent/**",
+            "apps/design-system/**",
+            "examples/**",
+            "**/build/**",
+            "**/coverage/**",
+        ]
+    },
+    
+    // Test files configuration
+    {
+        files: ["**/*.test.{js,jsx,ts,tsx}", "**/__tests__/**/*.{js,jsx,ts,tsx}"],
+        
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+                ...globals.jest,
+                React: "readonly",
+                JSX: "readonly",
+                NodeJS: "readonly",
+            },
+            parser: tsParser,
+            ecmaVersion: "latest",
+            sourceType: "module",
+            parserOptions: {
+                requireConfigFile: false,
+                ecmaFeatures: {
+                    jsx: true,
+                },
+            },
+        },
+
+        plugins: {
+            react,
+            "react-hooks": reactHooks,
+            "@typescript-eslint": typescript,
+            storybook,
+        },
+
+        rules: {
+            // ESLint recommended rules
+            ...js.configs.recommended.rules,
+            
+            // TypeScript recommended rules
+            ...typescript.configs.recommended.rules,
+            
+            // React hooks recommended rules
+            ...reactHooks.configs.recommended.rules,
+            
+            // Storybook recommended rules
+            ...storybook.configs.recommended.rules,
+        },
+
+        settings: {
+            react: {
+                version: "detect",
+            },
+        },
+
+        linterOptions: {
+            reportUnusedDisableDirectives: true,
+        },
+    },
+
+    // Main configuration - matches old .eslintrc.js 
+    {
+        files: ["**/*.{js,jsx,ts,tsx}"],
+        ignores: ["**/*.test.{js,jsx,ts,tsx}", "**/__tests__/**/*.{js,jsx,ts,tsx}"],
+        
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+                React: "readonly",
+                JSX: "readonly",
+                NodeJS: "readonly",
+            },
+            parser: tsParser,
+            ecmaVersion: "latest",
+            sourceType: "module",
+            parserOptions: {
+                requireConfigFile: false,
+                ecmaFeatures: {
+                    jsx: true,
+                },
+            },
+        },
+
+        plugins: {
+            react,
+            "react-hooks": reactHooks,
+            "@typescript-eslint": typescript,
+            storybook,
+        },
+
+        rules: {
+            // ESLint recommended rules
+            ...js.configs.recommended.rules,
+            
+            // TypeScript recommended rules
+            ...typescript.configs.recommended.rules,
+            
+            // React hooks recommended rules
+            ...reactHooks.configs.recommended.rules,
+            
+            // Storybook recommended rules
+            ...storybook.configs.recommended.rules,
+        },
+
+        settings: {
+            react: {
+                version: "detect",
+            },
+        },
+
+        linterOptions: {
+            reportUnusedDisableDirectives: true,
+        },
+    }
+];