@campxdev/react-blueprint 1.9.6 → 2.0.1

package/package.json

@@ -1,57 +1,126 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.9.6",
-  "main": "./export.ts",
-  "dependencies": {
-    "@emotion/react": "^11.13.3",
+  "version": "2.0.1",
+  "description": "React UI component library for CampX applications",
+  "author": "CampX",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/campxdev/react-blueprint.git"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "campx",
+    "blueprint"
+  ],
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "rollup -c --bundleConfigAsCjs",
+    "test": "react-scripts test",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepare": "npm run build"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
-    "@hookform/resolvers": "^2.9.10",
     "@mui/icons-material": "^6.1.5",
     "@mui/lab": "^6.0.0-beta.16",
     "@mui/material": "^6.1.5",
     "@mui/x-data-grid": "^7.22.1",
     "@mui/x-date-pickers": "^7.22.1",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "react-router-dom": "^6.24.0"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@hookform/resolvers": "^2.9.10",
+    "@mui/icons-material": "^7.0.2",
+    "@mui/lab": "^7.0.0-beta.11",
+    "@mui/material": "^7.0.2",
+    "@mui/x-data-grid": "^8.1.0",
+    "@mui/x-date-pickers": "^8.1.0",
     "@reduxjs/toolkit": "^2.2.7",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
-    "@types/lodash": "^4.17.13",
-    "@types/node": "^16.7.13",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.3.0",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/uuid": "^10.0.0",
     "axios": "^1.7.2",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.1.0",
     "framer-motion": "^11.2.9",
-    "global": "^4.4.0",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "pullstate": "^1.24.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "react-error-boundary": "^3.1.4",
     "react-hook-form": "^7.52.0",
     "react-joyride": "^2.8.2",
     "react-query": "^3.39.3",
     "react-redux": "^9.1.2",
-    "react-router-dom": "^6.24.0",
-    "react-scripts": "^5.0.1",
+    "react-router-dom": "6",
     "recharts": "^2.12.7",
     "redux": "^5.0.1",
+    "uuid": "^10.0.0",
+    "yup": "^1.4.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.9",
+    "@babel/preset-typescript": "^7.23.9",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-url": "^8.0.2",
+    "@storybook/addon-backgrounds": "^8.6.12",
+    "@storybook/addon-designs": "^8.0.3",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-mdx-gfm": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/preset-create-react-app": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-webpack5": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@svgr/rollup": "^8.1.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
+    "@types/js-cookie": "^3.0.5",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^16.7.13",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/uuid": "^10.0.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "prop-types": "^15.8.1",
+    "react-scripts": "^5.0.1",
+    "rollup": "^4.10.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dts": "^6.2.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "sass": "^1.71.1",
+    "storybook": "^8.6.12",
     "storybook-dark-mode": "^4.0.1",
     "typescript": "^5.5.2",
     "web-vitals": "^2.1.0",
-    "yup": "^1.4.0"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts  build",
-    "test": "react-scripts  test",
-    "eject": "react-scripts eject",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "webpack": "^5.91.0"
   },
   "eslintConfig": {
     "extends": [
@@ -71,26 +140,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@chromatic-com/storybook": "^2.0.2",
-    "@storybook/addon-backgrounds": "^8.3.1",
-    "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-essentials": "^8.3.1",
-    "@storybook/addon-interactions": "^8.3.1",
-    "@storybook/addon-links": "^8.3.1",
-    "@storybook/addon-mdx-gfm": "^8.3.1",
-    "@storybook/addon-onboarding": "^8.3.1",
-    "@storybook/blocks": "^8.3.1",
-    "@storybook/preset-create-react-app": "^8.3.1",
-    "@storybook/react": "^8.3.1",
-    "@storybook/react-webpack5": "^8.3.1",
-    "@storybook/test": "^8.3.1",
-    "@types/js-cookie": "^3.0.5",
-    "eslint-plugin-storybook": "^0.8.0",
-    "prop-types": "^15.8.1",
-    "storybook": "^8.3.1",
-    "webpack": "^5.91.0"
   }
 }

package/.prettierrc

@@ -1,8 +0,0 @@
-{
-  "bracketSpacing": true,
-  "singleQuote": true,
-  "trailingComma": "all",
-  "useTabs": false,
-  "bracketSameLine": false
-}
-

package/.storybook/main.ts

@@ -1,30 +0,0 @@
-import type { StorybookConfig } from "@storybook/react-webpack5";
-
-const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    "@storybook/preset-create-react-app",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
-    "@storybook/addon-mdx-gfm",
-    "storybook-dark-mode",
-    "@storybook/addon-designs",
-  ],
-
-  framework: {
-    name: "@storybook/react-webpack5",
-    options: {},
-  },
-
-  docs: {},
-
-  staticDirs: ["../public"],
-
-  typescript: {
-    reactDocgen: "react-docgen-typescript",
-  },
-};
-export default config;

package/.storybook/preview.tsx

@@ -1,54 +0,0 @@
-import { CssBaseline } from '@mui/material';
-import type { Preview } from '@storybook/react';
-import React from 'react';
-import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
-import { useDarkMode } from 'storybook-dark-mode';
-import { store } from '../src/redux/store';
-import { MuiThemeProvider } from '../src/themes/MuiThemeProvider';
-import { DarkColorTokens } from '../src/themes/colorTokens/darkColorTokens';
-import { LightColorTokens } from '../src/themes/colorTokens/lightColorTokens';
-import { darkTheme } from '../src/themes/darkTheme';
-import { lightTheme } from '../src/themes/lightTheme';
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-    backgrounds: {
-      default: 'light', // name of the default background to use
-      values: [
-        { name: 'light', value: LightColorTokens.surface.defaultBackground },
-        {
-          name: 'light paper',
-          value: LightColorTokens.surface.paperBackground,
-        },
-        { name: 'dark', value: DarkColorTokens.surface.defaultBackground },
-        { name: 'dark paper', value: DarkColorTokens.surface.paperBackground },
-      ],
-    },
-  },
-  decorators: [
-    (Story) => {
-      const isDarkMode = useDarkMode();
-      const theme = isDarkMode ? darkTheme : lightTheme;
-      return (
-        <BrowserRouter>
-          <MuiThemeProvider theme={theme}>
-            <Provider store={store}>
-              <CssBaseline />
-              <Story />
-            </Provider>
-          </MuiThemeProvider>
-        </BrowserRouter>
-      );
-    },
-  ],
-  tags: ['autodocs'],
-};
-
-export default preview;

package/.vscode/settings.json

@@ -1,7 +0,0 @@
-{
-  "cSpell.words": [
-    "autodocs",
-    "Campx",
-    "Gifs"
-  ]
-}

package/bitbucket-pipelines.yml

@@ -1,60 +0,0 @@
-#  Template React Deploy
-
-#  This template allows you to deploy your React app to an AWS S3 bucket and invalidate the old AWS Cloudfront distribution.
-#  The workflow allows running tests, code linting and security scans on feature branches (as well as master).
-#  The react app will be validated, deployed to S3 and trigger an AWS Cloudfront distribution invalidation to refresh the CDN caches after the code is merged to master.
-
-# Prerequisites: $AWS_ACCESS_KEY_ID, $AWS_SECRET_ACCESS_KEY setup in the Deployment variables.
-# For advanced cases, please, follow examples from the pipe's:
-# README https://bitbucket.org/atlassian/aws-s3-deploy/src/master/README.md
-# README https://bitbucket.org/atlassian/aws-cloudfront-invalidate/src/master/README.md
-
-image: node:20
-
-# Workflow Configuration
-
-pipelines:
-  branches:
-    main:
-      - parallel:
-          - step:
-              name: Build and Test
-              size: 2x
-              caches:
-                - node
-              script:
-                - rm -rf node_modules
-                - yarn install
-                # CI=true in default variables for Bitbucket Pipelines https://support.atlassian.com/bitbucket-cloud/docs/variables-in-pipelines/
-                - CI=false
-                - yarn build-storybook
-              artifacts:
-                - storybook-static/**
-          - step:
-              name: Security Scan
-              script:
-                # Run a security scan for sensitive data.
-                # See more security tools at https://bitbucket.org/product/features/pipelines/integrations?&category=security
-                - pipe: atlassian/git-secrets-scan:0.5.1
-      - step:
-          name: Deploy to Production
-          deployment: Production
-          clone:
-            enabled: false
-          script:
-            # sync your files to S3
-            - pipe: atlassian/aws-s3-deploy:1.1.0
-              variables:
-                AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
-                AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
-                AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
-                REACT_APP_API_HOST: $REACT_APP_API_HOST
-                S3_BUCKET: 'react-blueprint-storybook'
-                LOCAL_PATH: 'storybook-static'
-            # triggering a distribution invalidation to refresh the CDN caches
-            - pipe: atlassian/aws-cloudfront-invalidate:0.6.0
-              variables:
-                AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
-                AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
-                AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
-                DISTRIBUTION_ID: 'E20JSFD4D8U8A3'

package/export.ts

@@ -1,6 +0,0 @@
-export * from './src/assets/export';
-export * from './src/components/export';
-export * from './src/hooks/export';
-export * from './src/redux/export';
-export * from './src/themes/export';
-export * from './src/utils/export';

package/public/index.html

@@ -1,78 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <!-- <script type="text/javascript" src="https://campx.atlassian.net/s/d41d8cd98f00b204e9800998ecf8427e-T/278rlr/b/9/c95134bc67d3a521bb3f4331beb9b804/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?locale=en-GB&collectorId=5fea0763"></script>
-
-    <script type="text/javascript">window.ATL_JQ_PAGE_PROPS =  {
-	"triggerFunction": function(showCollectorDialog) {
-		//Requires that jQuery is available! 
-		jQuery("#jiraIssueCollector").click(function(e) {
-			e.preventDefault();
-			showCollectorDialog();
-		});
-	}};</script> -->
-
-    <title>React Blueprint | Building Blocks</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-
-    <script
-      type="text/javascript"
-      src="https://campx.atlassian.net/s/d41d8cd98f00b204e9800998ecf8427e-T/278rlr/b/9/c95134bc67d3a521bb3f4331beb9b804/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?locale=en-GB&collectorId=82a807ed"
-    ></script>
-
-    <script type="text/javascript">
-      console.log(window, "window");
-      $(document).ready(function () {
-        window.ATL_JQ_PAGE_PROPS = {
-          triggerFunction: function (showCollectorDialog) {
-            var intId = setInterval(function () {
-              if ($("#jiraIssueCollector").length > 0) {
-                jQuery("#jiraIssueCollector").click(function (e) {
-                  e.preventDefault();
-                  showCollectorDialog();
-                });
-                clearInterval(intId);
-              }
-            }, 500);
-          },
-        };
-      });
-    </script>
-  </body>
-</html>

package/public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

package/public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

package/src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color:'white';
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/App.tsx

@@ -1,41 +0,0 @@
-import { Button } from '@mui/material';
-import { useForm } from 'react-hook-form';
-
-import './App.css';
-import { FileUpload, FormControlWrapper } from './components/export';
-
-interface RowType {
-  lastName: string;
-  firstName: string;
-  age: number;
-}
-
-function App() {
-  const { control, watch, handleSubmit } = useForm({});
-
-  const onSubmit = (formData: any) => {
-    console.log(formData);
-  };
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'flex-start',
-        paddingLeft: '16px',
-        flexDirection: 'column',
-      }}
-    >
-      <FormControlWrapper control={control}>
-        <FileUpload
-          label={'Files'}
-          name="daaku"
-          files={watch().daaku}
-          required
-        />
-      </FormControlWrapper>
-    </div>
-  );
-}
-
-export default App;

package/src/AppContent.tsx

@@ -1,13 +0,0 @@
-import { AppHeader } from './components/export';
-
-export const AppContent = () => {
-  return (
-    <AppHeader
-      clientName="Anurag University"
-      actions={[<p>Actions here</p>]}
-      userFullName="Srikanth Yellapragada"
-      collapsed={false}
-      institutionsData={[]}
-    />
-  );
-};

package/src/assets/export.ts

@@ -1,2 +0,0 @@
-export * from './fonts/export';
-export * from './images/export';

package/src/assets/fonts/export.ts

@@ -1,2 +0,0 @@
-export * from './heebo/index';
-export * from './poppins/index';

package/src/assets/fonts/heebo/index.ts

@@ -1,3 +0,0 @@
-const heeboSemiBold = require('./Heebo-SemiBold.ttf');
-const heeboMedium = require('./Heebo-Medium.ttf');
-export { heeboMedium, heeboSemiBold };

package/src/assets/fonts/poppins/index.ts

@@ -1,14 +0,0 @@
-//semibold, medium, light, regular
-const semiboldPoppins = require('./Poppins-SemiBold.ttf');
-const mediumPoppins = require('./Poppins-Medium.ttf');
-const lightPoppins = require('./Poppins-Light.ttf');
-const regularPoppins = require('./Poppins-Regular.ttf');
-const boldPoppins = require('./Poppins-Bold.ttf');
-
-export {
-  boldPoppins,
-  lightPoppins,
-  mediumPoppins,
-  regularPoppins,
-  semiboldPoppins,
-};

package/src/assets/images/gif/index.ts

@@ -1,13 +0,0 @@
-import ConfirmationAlert from '../gif/confirmation-alert.gif';
-import DeleteConfirmationAlert from '../gif/delete-confirmation-alert.gif';
-import Success from '../gif/success.gif';
-import UploadFile from '../gif/upload-file.gif';
-import UploadingFile from '../gif/uploading-file.gif';
-
-export const AnimatedGIFs = {
-  ConfirmationAlert,
-  DeleteConfirmationAlert,
-  UploadFile,
-  UploadingFile,
-  Success,
-};

package/src/assets/images/svg/index.ts

@@ -1,15 +0,0 @@
-import assignmentImage from './assignment.svg';
-import emptyImage from './empty.svg';
-import errorImage from './error-image.svg';
-import noConnectionImage from './no-connection.svg';
-import serverErrorImage from './server-error.svg';
-import unauthorizedImage from './unauthorized.svg';
-
-export const Svgs = {
-  assignmentImage,
-  emptyImage,
-  errorImage,
-  noConnectionImage,
-  serverErrorImage,
-  unauthorizedImage,
-};