feat: Add Table component (#1797)

razorpay · Nov 24, 2023 · 23a3e11 · 23a3e11
1 parent 8581ec1
commit 23a3e11
Show file tree

Hide file tree

Showing 43 changed files with 6,605 additions and 7 deletions.
diff --git a/.changeset/moody-moles-change.md b/.changeset/moody-moles-change.md
@@ -0,0 +1,11 @@
+---
+"@razorpay/blade": minor
+---
+
+feat: Add `Table` component
+
+### Usage Instructions for Table component
+- If you want to use Table component from Blade, make sure you install the following dependencies to your project before using Table
+```bash
+yarn add @table-library/react-table-library @emotion/react
+```
diff --git a/packages/blade/.storybook/react-native/storybook.requires.js b/packages/blade/.storybook/react-native/storybook.requires.js
@@ -100,7 +100,10 @@ const getStories = () => {
     './src/components/SkipNav/SkipNav.stories.tsx': require('../../src/components/SkipNav/SkipNav.stories.tsx'),
     './src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx': require('../../src/components/Spinner/BaseSpinner/BaseSpinner.stories.tsx'),
     './src/components/Spinner/Spinner/Spinner.stories.tsx': require('../../src/components/Spinner/Spinner/Spinner.stories.tsx'),
+    './src/components/SpotlightPopoverTour/Tour.stories.tsx': require('../../src/components/SpotlightPopoverTour/Tour.stories.tsx'),
     './src/components/Switch/Switch.stories.tsx': require('../../src/components/Switch/Switch.stories.tsx'),
+    './src/components/Table/docs/Table.stories.tsx': require('../../src/components/Table/docs/Table.stories.tsx'),
+    './src/components/Table/docs/TableExamples.stories.tsx': require('../../src/components/Table/docs/TableExamples.stories.tsx'),
     './src/components/Tabs/Tabs.stories.tsx': require('../../src/components/Tabs/Tabs.stories.tsx'),
     './src/components/Tag/Tag.stories.tsx': require('../../src/components/Tag/Tag.stories.tsx'),
     './src/components/Tooltip/Tooltip.stories.tsx': require('../../src/components/Tooltip/Tooltip.stories.tsx'),

diff --git a/packages/blade/docs/guides/Installation.stories.mdx b/packages/blade/docs/guides/Installation.stories.mdx
@@ -20,7 +20,7 @@ Before you install the package, make sure that you have performed the following
 - Run `code ~/.bashrc` or `code ~/.zshrc` in your editor and add this line
 
   ```
-  export GITHUB_ACCESS_TOKEN="<YOUR_TOKEN>"
+  export GITHUB_ACCESS_TOKEN="<YOUR_TO  KEN>"
   ```
 
   > **Note**
@@ -48,10 +48,18 @@ Blade has a peer dependency on a few libraries, you can skip adding it if you al
   >
   > Currently, blade only supports styled-components v5 only
   - `@floating-ui/react`
+  - `@table-library/react-table-library` (If you want to use the [Table component](/?path=/docs/components-table--table))
+  - `@emotion/react` (If you want to use the [Table component](/?path=/docs/components-table--table))
 
    ```shell
    yarn add @razorpay/blade styled-components@5.3.11 @floating-ui/react
    ```
+  <br/>
+
+  #### For Table Component
+   ```shell
+   yarn add @table-library/react-table-library @emotion/react
+   ```
 
 2. Follow [this guide](#-install-fonts) to install the fonts.
 

diff --git a/packages/blade/package.json b/packages/blade/package.json
@@ -135,6 +135,7 @@
     "@babel/preset-react": "7.16.5",
     "@babel/preset-typescript": "7.16.5",
     "@codesandbox/sandpack-react": "1.16.0",
+    "@emotion/react": "11.11.1",
     "@gorhom/bottom-sheet": "4.4.6",
     "@gorhom/portal": "1.0.14",
     "@react-native/metro-config": "0.72.9",
@@ -186,6 +187,7 @@
     "@types/tinycolor2": "1.4.3",
     "@types/react-router-dom": "5.3.3",
     "@types/storybook-react-router": "1.0.5",
+    "@table-library/react-table-library": "4.1.7",
     "any-leaf": "1.2.2",
     "args-parser": "1.3.0",
     "babel-jest": "29.6.1",
@@ -239,6 +241,8 @@
     "typescript-transform-paths": "3.4.6"
   },
   "peerDependencies": {
+    "@table-library/react-table-library": "^4.1.7",
+    "@emotion/react": "^11.11.1",
     "@gorhom/bottom-sheet": "^4",
     "@gorhom/portal": "1.0.14",
     "@floating-ui/react": "0.25.4",
@@ -262,6 +266,12 @@
     },
     "@gorhom/bottom-sheet": {
       "optional": true
+    },
+    "@table-library/react-table-library": {
+      "optional": true
+    },
+    "@emotion/react": {
+      "optional": true
     }
   },
   "resolutions": {

diff --git a/packages/blade/src/components/Table/Table.native.tsx b/packages/blade/src/components/Table/Table.native.tsx
@@ -0,0 +1,11 @@
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React from 'react';
+import type { TableProps } from './types';
+import { Text } from '~components/Typography';
+
+const Table = <Item,>(props: TableProps<Item>): React.ReactElement => {
+  return <Text>Table Component is not available for Native mobile apps.</Text>;
+};
+
+export { Table };