@newtonschool/grauity 0.0.13 → 0.1.10

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@newtonschool/grauity",
-    "version": "0.0.13",
-    "description": "",
+    "version": "0.1.10",
+    "description": "Design System for Newton School",
     "keywords": [
         "Newton School",
         "Grauity",
@@ -17,6 +17,11 @@
             "name": "Praduman Goyal",
             "email": "goyal.praduman611@gmail.com",
             "homepage": "https://github.com/pradumangoyal"
+        },
+        {
+            "name": "Mihir Sachdeva",
+            "email": "mihirsachdeva.ms@gmail.com",
+            "homepage": "https://github.com/mihirsachdeva"
         }
     ],
     "repository": {
@@ -28,8 +33,8 @@
         "url": "https://github.com/Newton-School/grauity/issues"
     },
     "engines": {
-        "node": "^16.14.0",
-        "npm": ">=9.1.2"
+        "npm": ">=9",
+        "node": ">=18.0.0"
     },
     "source": "ui/index.ts",
     "main": "dist/main.cjs",
@@ -58,7 +63,7 @@
         "../node_modules/@types"
     ],
     "scripts": {
-        "build": "npm run build-icons && npm run build-lib",
+        "build": "rm -rf .parcel-cache && npm run build-icons && npm run build-lib",
         "build-lib": "npm run extract-typings && parcel build",
         "build-icons": "npm run build-icons:optimize && npm run build-icons:generate",
         "build-icons:optimize": "rimraf ./iconland/optimised/*.svg & svgo -q -p 8 -f ./iconland/seeds -o ./iconland/optimised",
@@ -70,8 +75,9 @@
         "lint:staged": "lint-staged",
         "prettify": "prettier --write",
         "extract-typings": "tsc --project tsconfig.types.json",
-        "storybook": "start-storybook -p 6006",
-        "build-storybook": "build-storybook -o docs && echo 'grauity.newtonschool.co' > docs/CNAME"
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build -o docs && echo 'grauity.newtonschool.co' > docs/CNAME",
+        "test": "jest"
     },
     "pre-commit": "lint:staged",
     "lint-staged": {
@@ -88,39 +94,53 @@
     "devDependencies": {
         "@babel/core": "^7.20.12",
         "@babel/preset-env": "^7.20.2",
+        "@babel/preset-flow": "^7.24.7",
         "@babel/preset-react": "^7.18.6",
         "@babel/preset-typescript": "^7.18.6",
+        "@chromatic-com/storybook": "^1.8.0",
         "@parcel/packager-ts": "^2.8.2",
         "@parcel/transformer-sass": "^2.8.2",
         "@parcel/transformer-typescript-tsc": "^2.8.2",
         "@parcel/transformer-typescript-types": "^2.8.2",
-        "@storybook/addon-actions": "^6.5.15",
-        "@storybook/addon-docs": "^6.5.15",
-        "@storybook/addon-essentials": "^6.5.15",
-        "@storybook/addon-interactions": "^6.5.15",
-        "@storybook/addon-links": "^6.5.15",
-        "@storybook/addons": "^6.5.15",
-        "@storybook/builder-webpack5": "^6.5.15",
-        "@storybook/manager-webpack5": "^6.5.15",
-        "@storybook/react": "^6.5.15",
-        "@storybook/testing-library": "^0.0.13",
-        "@storybook/theming": "^6.5.15",
+        "@storybook/addon-a11y": "^8.2.9",
+        "@storybook/addon-actions": "^8.2.9",
+        "@storybook/addon-docs": "^8.2.9",
+        "@storybook/addon-essentials": "^8.2.9",
+        "@storybook/addon-interactions": "^8.2.9",
+        "@storybook/addon-links": "^8.2.9",
+        "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+        "@storybook/manager-api": "^8.2.9",
+        "@storybook/preview-api": "^8.2.9",
+        "@storybook/react": "^8.2.9",
+        "@storybook/react-webpack5": "^8.2.9",
+        "@storybook/test": "^8.2.9",
+        "@storybook/theming": "^8.2.9",
+        "@testing-library/jest-dom": "^6.5.0",
+        "@testing-library/react": "^16.0.1",
+        "@types/jest": "^29.5.12",
         "@types/node": "^18.11.18",
-        "@types/react": "^18.0.26",
-        "@types/react-dom": "^18.0.10",
+        "@types/react": "18.2.0",
+        "@types/react-dom": "18.2.0",
         "@types/styled-components": "^5.1.26",
-        "@typescript-eslint/eslint-plugin": "^5.48.0",
+        "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.48.0",
+        "ajv": "^8.17.1",
         "babel-loader": "^9.1.0",
         "css-loader": "^6.7.3",
         "eslint": "^7.32.0",
         "eslint-config-airbnb": "^18.2.1",
         "eslint-config-prettier": "^8.6.0",
+        "eslint-import-resolver-alias": "^1.1.2",
+        "eslint-import-resolver-typescript": "^3.6.3",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-jsx-a11y": "^6.6.1",
+        "eslint-plugin-prettier": "^5.2.1",
         "eslint-plugin-react": "^7.31.11",
+        "eslint-plugin-simple-import-sort": "^12.1.1",
         "fantasticon": "^2.0.0",
         "http-server": "^14.1.1",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
         "lint-staged": "^13.1.0",
         "mini-css-extract-plugin": "^2.7.2",
         "parcel": "^2.8.2",
@@ -129,14 +149,15 @@
         "path": "^0.12.7",
         "pre-commit": "^1.2.2",
         "prettier": "2.8.1",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0",
+        "raw-loader": "^4.0.2",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
         "rimraf": "^3.0.2",
         "sass": "^1.57.1",
         "sass-loader": "^13.2.0",
         "scss": "^0.2.4",
-        "storybook": "^6.5.15",
-        "storybook-addon-code-editor": "^0.3.7",
+        "storybook": "^8.2.9",
+        "storybook-addon-code-editor": "^3.1.0",
         "style-loader": "^3.3.1",
         "styled-components": "^5.3.6",
         "svgo": "^3.0.2",
@@ -148,11 +169,15 @@
         "prop-types": "^15.8.1"
     },
     "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0",
-        "styled-components": ">4.0.0"
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "styled-components": "4.2.0"
     },
     "resolutions": {
         "@storybook/react/webpack": "^5"
+    },
+    "optionalDependencies": {
+        "@parcel/watcher-linux-x64-glibc": "^2.4.2-alpha.0",
+        "@swc/core-linux-x64-gnu": "^1.7.24"
     }
 }

package/ui/core/colors/colorTypes.ts

@@ -1,21 +1,3 @@
-export type grauityColorName =
-    | 'white'
-    | 'black'
-    | 'grey'
-    | 'blue'
-    | 'red'
-    | 'green'
-    | 'orange'
-    | 'yellow'
-    | 'purple';
+// export type grauityColorName = string;
 
-export type grauityIconColorName =
-    | 'white'
-    | 'black'
-    | 'grey'
-    | 'blue'
-    | 'red'
-    | 'green'
-    | 'orange'
-    | 'yellow'
-    | 'purple';
+// export type grauityIconColorName = string;

package/ui/core/colors/index.ts

@@ -1,25 +1,25 @@
-export type { grauityColorName, grauityIconColorName } from './colorTypes';
+// export type { grauityColorName, grauityIconColorName } from './colorTypes';
 
-export enum GRAUITY_COLOR {
-    WHITE = 'white',
-    BLACK = 'black',
-    GREY = 'grey',
-    BLUE = 'blue',
-    RED = 'red',
-    GREEN = 'green',
-    ORANGE = 'orange',
-    YELLOW = 'yellow',
-    PURPLE = 'purple',
-}
+// export enum GRAUITY_COLOR {
+//     WHITE = 'white',
+//     BLACK = 'black',
+//     GREY = 'grey',
+//     BLUE = 'blue',
+//     RED = 'red',
+//     GREEN = 'green',
+//     ORANGE = 'orange',
+//     YELLOW = 'yellow',
+//     PURPLE = 'purple',
+// }
 
-export const GRAUITY_ICON_COLORS = [
-    GRAUITY_COLOR.WHITE,
-    GRAUITY_COLOR.BLACK,
-    GRAUITY_COLOR.GREY,
-    GRAUITY_COLOR.BLUE,
-    GRAUITY_COLOR.RED,
-    GRAUITY_COLOR.GREEN,
-    GRAUITY_COLOR.ORANGE,
-    GRAUITY_COLOR.YELLOW,
-    GRAUITY_COLOR.PURPLE,
-];
+// export const GRAUITY_ICON_COLORS = [
+//     GRAUITY_COLOR.WHITE,
+//     GRAUITY_COLOR.BLACK,
+//     GRAUITY_COLOR.GREY,
+//     GRAUITY_COLOR.BLUE,
+//     GRAUITY_COLOR.RED,
+//     GRAUITY_COLOR.GREEN,
+//     GRAUITY_COLOR.ORANGE,
+//     GRAUITY_COLOR.YELLOW,
+//     GRAUITY_COLOR.PURPLE,
+// ];

package/ui/core/icons/index.ts

@@ -1,5 +1,3 @@
-export { GRAUITY_ICONS } from './iconTypes';
-
 export { ICON_TAGS, TAG_ICONS } from './iconTags';
-
 export type { grauityIconKey, grauityIconName } from './iconTypes';
+export { GRAUITY_ICONS } from './iconTypes';

package/ui/core/index.ts

@@ -1,17 +1,14 @@
-export type { grauityIconSizeName, grauitySizeName } from './sizes';
-export { GRAUITY_ICON_SIZES, GRAUITY_SIZE } from './sizes';
-
-export type { grauityIconColorName, grauityColorName } from './colors';
-export { GRAUITY_ICON_COLORS, GRAUITY_COLOR } from './colors';
-
-export type { grauityIconName, grauityIconKey } from './icons';
+// export type { grauityColorName, grauityIconColorName } from './colors';
+// export { GRAUITY_COLOR, GRAUITY_ICON_COLORS } from './colors';
+export type { grauityIconKey, grauityIconName } from './icons';
 export { GRAUITY_ICONS, ICON_TAGS, TAG_ICONS } from './icons';
-
 export type {
-    grauityRotatedChoiceName,
     grauityFlippedChoiceName,
+    grauityRotatedChoiceName,
 } from './miscellaneous-choices';
 export {
-    GRAUITY_ICON_ROTATED_CHOICES,
     GRAUITY_ICON_FLIPPED_CHOICES,
+    GRAUITY_ICON_ROTATED_CHOICES,
 } from './miscellaneous-choices';
+export type { grauityIconSizeName, grauitySizeName } from './sizes';
+export { GRAUITY_ICON_SIZES, GRAUITY_SIZE } from './sizes';

package/ui/core/sizes/sizeTypes.ts

@@ -16,6 +16,7 @@ export type grauityIconSizeName =
     | '4'
     | '8'
     | '12'
+    | '14'
     | '16'
     | '20'
     | '24'

package/ui/css/fonts.scss

@@ -1,14 +1,6 @@
 @use "sass:math";
 
-@font-face {
-    font-family: 'Switzer';
-    font-weight: 100 900;
-    src: url('fonts/Switzer-Variable.ttf') format("truetype-variations");
-}
-
 .grauity-init {
-    font-family: 'Switzer', sans-serif;
-
     @for $i from 1 through 10 {
         .font-size-#{4 * $i} {
             font-size: calc(var(--multiplier) * #{math.div((4 * $i), 16)}em);

package/ui/css/index.scss

@@ -1,11 +1,3 @@
 @import "reset";
-@import "fonts";
 @import "grauity-icons";
-@import "colors";
 @import "animations";
-
-@import "icons";
-
-.grauity-init {
-    font-size: calc(var(--multiplier) * 16px);
-}

package/ui/css/reset.scss

@@ -49,12 +49,9 @@ html {
     line-height: 1.15;
 
     /* 1 */
-    -ms-text-size-adjust: 100%;
-
-    /* 2 */
     -webkit-text-size-adjust: 100%;
-
-    /* 2 */
+    -ms-text-size-adjust: 100%;
+    text-size-adjust: 100%;
 }
 
 /* Sections

package/ui/elements/Alert/Alert.styles.ts

@@ -0,0 +1,66 @@
+import styled, { css } from 'styled-components';
+
+import {
+    AlertBodyProps,
+    AlertContainerProps,
+    AlertDescriptionProps,
+    AlertTitleProps,
+} from './types';
+
+export const StyledAlertContainer = styled.div<AlertContainerProps>`
+    display: flex;
+    width: 100%;
+    ${({ maxWidth }) => maxWidth && `max-width: ${maxWidth};`}
+    min-height: var(--spacing-48px, 48px);
+    align-items: flex-start;
+    border-radius: var(--spacing-8px, 8px);
+    border: var(--spacing-1px, 1px) solid ${({ borderColor }) => borderColor};
+    background: ${({ backgroundColor }) => backgroundColor};
+    padding: var(--spacing-12px, 12px);
+    gap: var(--spacing-20px, 20px);
+`;
+
+export const StyledAlertBody = styled.div<AlertBodyProps>`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: var(--spacing-4px, 4px);
+    margin-right: var(--spacing-4px, 4px);
+    flex: 1 0 0;
+
+    ${({ inlineButtons }) =>
+        inlineButtons &&
+        css`
+            flex-direction: row;
+            align-items: flex-start;
+        `};
+`;
+
+export const StyledAlertContent = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: var(--spacing-4px, 4px);
+`;
+
+export const StyledAlertTitle = styled.h2<AlertTitleProps>`
+    align-self: stretch;
+    color: ${({ textColor }) => textColor};
+    font-size: var(--font-size-14px, 14px);
+    font-weight: var(--font-weight-semibold, 600);
+    line-height: 160%;
+    letter-spacing: 0.014px;
+    margin: 0;
+`;
+
+export const StyledAlertDescription = styled.div<AlertDescriptionProps>`
+    align-self: stretch;
+    color: ${({ textColor }) => textColor};
+    font-size: var(--font-size-14px, 14px);
+    font-weight: var(--font-weight-medium, 500);
+    line-height: 160%;
+    letter-spacing: 0.1px;
+    margin-bottom: var(--spacing-4px, 4px);
+`;

package/ui/elements/Alert/Alert.test.tsx

@@ -0,0 +1,81 @@
+import '@testing-library/jest-dom';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { ButtonProps } from '../Button';
+import Alert from './Alert';
+import { AlertProps } from './types';
+
+describe('Alert', () => {
+    const defaultProps: AlertProps = {
+        type: 'default',
+        variant: 'primary',
+        title: 'This is an alert',
+        description: 'This is a description',
+        showCloseButton: true,
+        onClose: jest.fn(),
+    };
+
+    it('renders the alert title and description', () => {
+        render(<Alert {...defaultProps} />);
+        expect(screen.getByText('This is an alert')).toBeInTheDocument();
+        expect(screen.getByText('This is a description')).toBeInTheDocument();
+    });
+
+    it('renders the alert close button', () => {
+        render(<Alert {...defaultProps} />);
+        expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('calls onClose when close button is clicked', () => {
+        render(<Alert {...defaultProps} />);
+        fireEvent.click(screen.getByRole('button'));
+        expect(defaultProps.onClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders with different types and variants', () => {
+        render(<Alert {...defaultProps} type="outlined" variant="success" />);
+        expect(screen.getByText('This is an alert')).toBeInTheDocument();
+    });
+
+    it('renders with a custom icon', () => {
+        render(<Alert {...defaultProps} icon="bell" />);
+        const customIcon = screen.queryAllByTestId('testid-icon');
+        const targetIcon = customIcon.filter(
+            (icon) => icon.classList.contains('grauity-icon-bell')
+        );
+        expect(targetIcon.length).toBe(1);
+    });
+
+    it('renders without icon when stated explicitly', () => {
+        render(<Alert {...defaultProps} icon={null} />);
+        const icons = screen.queryAllByTestId('testid-icon');
+        const nonCloseIcons = icons.filter(
+            (icon) => !icon.classList.contains('grauity-icon-close')
+        );
+        expect(nonCloseIcons.length).toBe(0);
+    });
+
+    it('renders action buttons', () => {
+        const actionButtons: ButtonProps[] = [
+            { children: 'Button 1', variant: 'primary', size: 'small' },
+        ];
+        render(<Alert {...defaultProps} actionButtons={actionButtons} />);
+        expect(screen.getByText('Button 1')).toBeInTheDocument();
+    });
+
+    it('calls action button onClick', () => {
+        const actionButtons: ButtonProps[] = [
+            {
+                children: 'Button 1',
+                variant: 'primary',
+                size: 'small',
+                onClick: jest.fn(),
+            },
+        ];
+        render(<Alert {...defaultProps} actionButtons={actionButtons} />);
+        fireEvent.click(screen.getByText('Button 1'));
+        expect(actionButtons[0].onClick).toHaveBeenCalledTimes(1);
+    });
+});

package/ui/elements/Alert/Alert.tsx

@@ -0,0 +1,153 @@
+import PropTypes from 'prop-types';
+import React, { forwardRef, useId } from 'react';
+
+import {
+    getAlertBannerColors,
+    getAlertIconName,
+    getButtonVariantFromAlertBannerTypeVariant,
+} from '../AlertBanner/utils';
+import Button from '../Button';
+import ButtonGroup from '../Button/ButtonGroup';
+import IconButton from '../Button/IconButton';
+import { Icon } from '../Icon';
+import {
+    StyledAlertBody,
+    StyledAlertContainer,
+    StyledAlertContent,
+    StyledAlertDescription,
+    StyledAlertTitle,
+} from './Alert.styles';
+import { ALERT_TYPES, ALERT_VARIANTS } from './constants';
+import { AlertProps } from './types';
+
+/**
+ * An alert component is used to display important messages to the user.
+ */
+const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
+    const {
+        type,
+        variant,
+        icon,
+        title,
+        description,
+        top,
+        bottom,
+        left,
+        right,
+        position,
+        onClose,
+        showCloseButton,
+        actionButtons,
+        maxWidth,
+        inlineButtons,
+    } = props;
+    const id = useId();
+    const iconName = getAlertIconName(icon, variant);
+    const { iconColor, textColor, backgroundColor, borderColor } =
+        getAlertBannerColors(variant, type);
+
+    const hasButton = !!actionButtons?.length || showCloseButton;
+
+    return (
+        <StyledAlertContainer
+            position={position}
+            top={top}
+            bottom={bottom}
+            left={left}
+            right={right}
+            backgroundColor={backgroundColor}
+            borderColor={borderColor}
+            ref={ref}
+            role="alert"
+            aria-labelledby={`alert-title-${id}`}
+            aria-describedby={`alert-description-${id}`}
+            maxWidth={maxWidth}
+        >
+            {iconName && (
+                <Icon
+                    name={iconName}
+                    color={iconColor || 'inherit'}
+                    size="20"
+                />
+            )}
+            <StyledAlertBody inlineButtons={inlineButtons}>
+                <StyledAlertContent>
+                    {title && (
+                        <StyledAlertTitle
+                            textColor={textColor}
+                            id={`alert-title-${id}`}
+                        >
+                            {title}
+                        </StyledAlertTitle>
+                    )}
+                    {description && (
+                        <StyledAlertDescription
+                            textColor={textColor}
+                            id={`alert-description-${id}`}
+                        >
+                            {description}
+                        </StyledAlertDescription>
+                    )}
+                </StyledAlertContent>
+                {hasButton && (
+                    <ButtonGroup>
+                        {actionButtons?.map((button) => (
+                            <Button {...button} key={button.variant}>
+                                {button.children}
+                            </Button>
+                        ))}
+                    </ButtonGroup>
+                )}
+            </StyledAlertBody>
+            {showCloseButton && (
+                <IconButton
+                    icon="close"
+                    variant={getButtonVariantFromAlertBannerTypeVariant(
+                        variant,
+                        type
+                    )}
+                    onClick={onClose}
+                    size="small"
+                />
+            )}
+        </StyledAlertContainer>
+    );
+});
+
+Alert.defaultProps = {
+    type: 'default',
+    variant: 'primary',
+    icon: null,
+    title: 'This is an alert',
+    description: 'This is a description',
+    top: null,
+    bottom: null,
+    left: null,
+    right: null,
+    position: 'static',
+    onClose: undefined,
+    showCloseButton: false,
+    actionButtons: [],
+    inlineButtons: false,
+    maxWidth: '440px',
+};
+
+Alert.propTypes = {
+    type: PropTypes.oneOf(ALERT_TYPES),
+    variant: PropTypes.oneOf(ALERT_VARIANTS),
+    icon: PropTypes.any,
+    title: PropTypes.string,
+    description: PropTypes.string,
+    top: PropTypes.string,
+    bottom: PropTypes.string,
+    left: PropTypes.string,
+    right: PropTypes.string,
+    position: PropTypes.oneOf(['static', 'fixed', 'absolute', 'relative']),
+    onClose: PropTypes.func,
+    showCloseButton: PropTypes.bool,
+    actionButtons: PropTypes.array,
+    inlineButtons: PropTypes.bool,
+    maxWidth: PropTypes.string,
+};
+
+export default Alert;