Add Chip Component

Author: roshni73

src/components/Chip/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.module.css';
+
+export type ChipVariant = 'default' | 'primary' |'success'| 'danger' | 'warning';
+
+const chipVariantToClassNameMap: Record<ChipVariant, string> = {
+    default: styles.default,
+    primary: styles.primary,
+    success: styles.success,
+    danger: styles.danger,
+    warning: styles.warning,
+};
+export interface Props {
+    className?: string;
+    label: React.ReactNode;
+    variant?: ChipVariant;
+}
+
+function Chip(props: Props) {
+    const {
+        className,
+        label,
+        variant = 'primary',
+    } = props;
+
+    return (
+        <div className={_cs(
+            styles.chip,
+            chipVariantToClassNameMap[variant],
+            className,
+        )}
+        >
+            <span className={styles.label}>
+                {label}
+            </span>
+
+        </div>
+    );
+}
+
+export default Chip;

src/components/Chip/styles.module.css

@@ -0,0 +1,47 @@
+.chip {
+    --color-border: transparent;
+    --color-text: inherit;
+    --color-background: transparent;
+    --border-radius: var(--cms-ui-border-radius-full);
+    --padding: var(--cms-ui-spacing-2xs) var(--cms-ui-spacing-2xs) var(--cms-ui-spacing-2xs) var(--cms-ui-spacing-sm);
+
+    display: flex;
+    align-items: center;
+    border: var(--cms-ui-width-separator-sm) solid var(--color-border);
+    border-radius: var(--border-radius);
+    background-color: var(--color-background);
+    padding: var(--padding);
+    color: var(--color-text);
+    gap: var(--cms-ui-spacing-xs);
+
+    &.default {
+        --color-border: var(--cms-ui-color-background);
+        --color-background: var(--cms-ui-color-background);
+    }
+    &.primary {
+        --color-border: var(--cms-ui-color-blue-200);
+        --color-background: var(--cms-ui-color-blue-200);
+        --color-text: var(--cms-ui-color-blue-700);
+    }
+
+    &.success {
+        --color-background: var(--cms-ui-color-green-200);
+    }
+
+    &.warning {
+        --color-border: var(--cms-ui-color-yellow-100);
+        --color-background: var(--cms-ui-color-yellow-100);
+        --color-text: var(--cms-ui-color-yellow-550);
+    }
+    &.danger {
+        --color-background: var( --cms-ui-color-red-50);
+        --color-text: var(--cms-ui-color-red-90);
+    }
+
+    .label {
+        display: flex;
+        align-items: center;
+        flex-grow: 1;
+        padding: var(--cms-ui-spacing-2xs) var(--cms-ui-spacing-2xs) var(--cms-ui-spacing-2xs) var(--cms-ui-spacing-sm);
+    }
+}

src/configs/apollo.ts

@@ -18,7 +18,6 @@ const uploadLink = createUploadLink({
     uri: GRAPHQL_ENDPOINT,
     credentials: 'include',
 });
-
 const link: ApolloLink = ApolloLink.from([
     ApolloLink.split(
         (operation) => operation.getContext().hasUpload,

src/index.css

@@ -87,6 +87,16 @@
     --cms-ui-color-green-600: #37AD00;
 
     --cms-ui-color-red-600: #FF0000;
+    
+    --cms-ui-color-red-10: #FDD6D9;
+    --cms-ui-color-red-20: #FCC2C5;
+    --cms-ui-color-red-30: #FBADB2;
+    --cms-ui-color-red-40: #FA999F;
+    --cms-ui-color-red-50: #F9858C;
+    --cms-ui-color-red-60: #F87079;
+    --cms-ui-color-red-70: #F75C65;
+    --cms-ui-color-red-80: #F64752;
+    --cms-ui-color-red-90: #F5333F;
 
     --cms-ui-color-white-card: #FFFFFF;
     --cms-ui-color-white: #FDFDFD;

src/views/ContentManagement/index.tsx

@@ -5,13 +5,13 @@ import {
 } from '@apollo/client';
 import {
     Button,
-    Chip,
     createDateColumn,
     createStringColumn,
     Pager,
     Table,
 } from '@togglecorp/toggle-ui';
 
+import Chip, { ChipVariant } from '#components/Chip';
 import Container from '#components/Container';
 import { createElementColumn } from '#components/CreateElementColumn';
 import {
@@ -26,11 +26,11 @@ import ContentActions from './ContentActions';
 
 import styles from './styles.module.css';
 
-type ContentListTable = NonNullable<NonNullable<NonNullable<ContentListQuery['private']>['contents']>['items']>[number];
+type ContentListTable = NonNullable<NonNullable<NonNullable<ContentListQuery['private']>['contents']>['items']>[number]& {serialNumber: string; };
 
 const contentKeySelector = (option: ContentListTable) => option.id;
 
-const PAGE_SIZE = 2;
+const PAGE_SIZE = 10;
 
 const CREATE_CONTENT_QUERY = gql`
     query ContentList(
@@ -71,7 +71,7 @@ const CONTENT_ENUMS = gql`
 
 const statusVariant: Record<string, string> = {
     Pending: 'default',
-    'Text extracted': 'default',
+    'Text extracted': 'primary',
     'Added to vector': 'success',
     'Deleted from vector': 'warning',
     Failure: 'danger',
@@ -86,16 +86,24 @@ export function Component() {
         createdAtGte?: string;
         createdAtLte?: string;
         documentType?: string;
-        documentStatus?: string ;
+        documentStatus?: string;
     }>({
         pageSize: PAGE_SIZE,
         filter: {},
     });
-
     const {
         data: contentResult,
     } = useQuery<ContentListQuery, ContentListQueryVariables>(
         CREATE_CONTENT_QUERY,
+        {
+            variables: {
+                pagination: {
+                    limit: 10,
+                    offset: (page - 1) * PAGE_SIZE,
+                },
+
+            },
+        },
     );
 
     const {
@@ -108,7 +116,17 @@ export function Component() {
 
     const documentStatus = contentEnumsResponse?.enums.ContentDocumentStatus;
 
+    const data = contentResult?.private.contents.items?.map((user, index) => ({
+        ...user,
+        serialNumber: (page - 1) * PAGE_SIZE + index + 1,
+    })) as unknown as ContentListTable[];
+
     const columns = useMemo(() => ([
+        createStringColumn<ContentListTable, string>(
+            'sn',
+            'S.N',
+            (item) => String(item.serialNumber),
+        ),
         createStringColumn<ContentListTable, string>(
             'title',
             'Title',
@@ -125,8 +143,9 @@ export function Component() {
             'documentTypeDisplay',
             'File Type',
             (item) => documentType?.find(
-                (type) => type.key === item.documentType,
+                (type: { key: string; }) => type.key === item.documentType,
             )?.label,
+            { columnClassName: styles.actions },
         ),
         createStringColumn<ContentListTable, string>(
             'tag',
@@ -138,15 +157,16 @@ export function Component() {
         { status: string | undefined; variant: string }>(
             'documentStatusDisplay',
             'Status',
-            ({ status }) => (
+            ({ status, variant }) => (
                 <Chip
                     className={styles.status}
                     label={status}
+                    variant={variant as ChipVariant}
                 />
             ),
             (_key, item) => {
                 const statusLabel = documentStatus?.find(
-                    (status) => status.key === item.documentStatus,
+                    (status: { key: string; }) => status.key === item.documentStatus,
                 )?.label;
                 const variant = statusLabel ? statusVariant[statusLabel] : '';
                 return {
@@ -156,7 +176,7 @@ export function Component() {
             },
             { columnClassName: styles.actions },
         ),
-        createElementColumn<ContentListTable, string, { id: number }>(
+        createElementColumn<ContentListTable, string, { id: number}>(
             'actions',
             'Actions',
             ContentActions,
@@ -167,8 +187,6 @@ export function Component() {
         ),
     ]), [documentType, documentStatus]);
 
-    const data = contentResult?.private.contents;
-
     return (
         <Container
             className={styles.container}
@@ -178,7 +196,7 @@ export function Component() {
                 <Button
                     name="Add Content"
                     variant="primary"
-                    onClick={() => {}}
+                    onClick={() => { }}
                     disabled
                 >
                     Add
@@ -189,7 +207,7 @@ export function Component() {
                     infoHidden
                     itemsPerPageControlHidden
                     activePage={page}
-                    itemsCount={data?.count ?? 0}
+                    itemsCount={contentResult?.private?.contents?.count ?? 0}
                     maxItemsPerPage={PAGE_SIZE}
                     onActivePageChange={setPage}
                 />
@@ -199,7 +217,7 @@ export function Component() {
                 className={styles.table}
                 headerCellClassName={styles.headerCell}
                 headerRowClassName={styles.headerRow}
-                data={data?.items}
+                data={data}
                 columns={columns}
                 keySelector={contentKeySelector}
             />

src/views/ContentManagement/styles.module.css

@@ -3,7 +3,6 @@
 
     .table {
         background-color: var(--cms-ui-color-white-card);
-        overflow: auto;
         .header-row {
             .header-cell {
                 background-color: var(--cms-ui-color-blue-100);
@@ -15,10 +14,5 @@
         .actions{
             min-width:14rem;
         }
-        .status{
-            background-color:  var(--cms-ui-color-background);
-            color: var(--cms-ui-primary-text-color);
-            font-weight: var(--cms-ui-font-weight-medium);
-        }
     }
 }

src/views/UserManagement/index.tsx

@@ -13,14 +13,14 @@ import {
 } from '@apollo/client';
 import {
     Button,
-    Chip,
     createStringColumn,
     Pager,
     SelectInput,
     Table,
     TextInput,
 } from '@togglecorp/toggle-ui';
 
+import Chip from '#components/Chip';
 import Container from '#components/Container';
 import { createElementColumn } from '#components/CreateElementColumn';
 import {
@@ -201,10 +201,9 @@ export function Component() {
                 <>
                     <Chip
                         className={styles.userCount}
-                    >
-                        {userResult?.private?.users?.count}
-                        Users
-                    </Chip>
+                        variant="default"
+                        label={`${userResult?.private?.users?.count} users`}
+                    />
                     <Button
                         name="Add User"
                         variant="primary"

src/views/UserManagement/styles.module.css

@@ -1,14 +1,15 @@
 .container {
     padding: var(--cms-ui-spacing-lg) var(--cms-ui-spacing-md);
 
+    .user-count{
+        font-weight: var(--cms-ui-font-weight-bold)
+    }
+
     .actions{
         display:flex;
         gap: var(--cms-ui-spacing-md);
-
-        .user-count{
-            background-color :var(--cms-ui-color-background);
-        }
     }
+    
     .table {
         background-color: var(--cms-ui-color-white-card);
         .header-row {