@campxdev/react-blueprint 0.1.55 → 0.1.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/Assets/Icons/Icons.tsx +0 -2
  3. package/src/components/Feedback/Tutorial/Tutorial.tsx +24 -22
  4. package/src/components/Navigation/Sidebar/Sidebar.tsx +6 -1
  5. package/src/components/Assets/Icons/IconComponents/ToursIcon.tsx +0 -50
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@campxdev/react-blueprint",
3
- "version": "0.1.55",
3
+ "version": "0.1.57",
4
4
  "main": "./export.ts",
5
5
  "private": false,
6
6
  "dependencies": {
package/src/components/Assets/Icons/Icons.tsx CHANGED
@@ -35,7 +35,6 @@ import { ProductFeaturesIcon } from "./IconComponents/ProductFeaturesIcon";
35
35
  import { ProfileIcon } from "./IconComponents/ProfileIcon";
36
36
  import { RightIcon } from "./IconComponents/RightIcon";
37
37
  import { TicketsIcon } from "./IconComponents/TicketsIcon";
38
- import { ToursIcon } from "./IconComponents/ToursIcon";
39
38
  import { UmsIcon } from "./IconComponents/UmsIcon";
40
39
  import { UnCheckedCheckboxIcon } from "./IconComponents/UncheckCheckBoxIcon";
41
40
  import { UnCheckedRadioIcon } from "./IconComponents/UncheckedRadioIcon";
@@ -56,7 +55,6 @@ export const Icons = {
56
55
  FilterIcon,
57
56
  ExportIcon,
58
57
  ProfileIcon,
59
- ToursIcon,
60
58
  InstitutionsIcon,
61
59
  ActiveDevicesIcon,
62
60
  NavigationIcon,
package/src/components/Feedback/Tutorial/Tutorial.tsx CHANGED
@@ -1,9 +1,7 @@
1
1
  import { axios } from "@campxdev/campx-web-utils";
2
- import { IconButton } from "@mui/material";
3
- import { ReactNode, useEffect, useState, useCallback } from "react";
4
- import ReactJoyride, { Step, CallBackProps, ACTIONS } from "react-joyride";
5
- import { ToursIcon } from "../../Assets/Icons/IconComponents/ToursIcon";
6
- import { Tooltip } from "../Tooltip/Tooltip";
2
+ import { Box, useTheme } from "@mui/material";
3
+ import { ReactNode, useCallback, useEffect, useState } from "react";
4
+ import ReactJoyride, { ACTIONS, CallBackProps, Step } from "react-joyride";
7
5
  import { Typography } from "../../DataDisplay/Typography/Typography";
8
6
 
9
7
  export interface TutorialProps {
@@ -21,16 +19,17 @@ export const Tutorial = ({
21
19
  }: TutorialProps) => {
22
20
  const [run, setRun] = useState(false);
23
21
  const userTours = localStorage.getItem("userTours") || "[]";
22
+ const theme = useTheme();
24
23
 
25
24
  const startTour = useCallback(() => {
26
25
  setRun(true);
27
26
  }, []);
28
27
 
29
- // useEffect(() => {
30
- // if (userTours && !userTours.includes(tourName)) {
31
- // startTour();
32
- // }
33
- // }, [userTours, tourName, startTour]);
28
+ useEffect(() => {
29
+ if (userTours && !userTours.includes(tourName)) {
30
+ startTour();
31
+ }
32
+ }, [userTours, tourName, startTour]);
34
33
 
35
34
  const handleJoyrideCallback = (data: CallBackProps) => {
36
35
  console.log(data);
@@ -75,19 +74,22 @@ export const Tutorial = ({
75
74
  };
76
75
 
77
76
  return (
78
- <div style={{ textAlign: iconPosition }}>
79
- <Tooltip
80
- title={<Typography variant="body1">Start Tour</Typography>}
81
- placement="left"
77
+ <div style={{ display: "flex", justifyContent: "flex-end" }}>
78
+ <Box
79
+ sx={{
80
+ background: theme.palette.surface.grey,
81
+ padding: "20px 8px",
82
+ borderRadius: "12px 0px 0px 12px",
83
+ cursor: "pointer",
84
+ width: "40px",
85
+ textAlign: "center",
86
+ }}
87
+ onClick={startTour}
82
88
  >
83
- <IconButton
84
- onClick={startTour}
85
- style={{ cursor: "pointer" }}
86
- aria-label={`Start ${tourName} tour`}
87
- >
88
- <ToursIcon />
89
- </IconButton>
90
- </Tooltip>
89
+ <Box sx={{ transform: "rotate(-90deg)", marginTop: "10px" }}>
90
+ <Typography variant="subtitle2">Tour</Typography>
91
+ </Box>
92
+ </Box>
91
93
 
92
94
  <ReactJoyride
93
95
  callback={handleJoyrideCallback}
package/src/components/Navigation/Sidebar/Sidebar.tsx CHANGED
@@ -57,7 +57,12 @@ export const Sidebar = ({
57
57
  match={match}
58
58
  className="listItem"
59
59
  >
60
- <StyledLinkButton to={path} onClick={() => {}}>
60
+ <StyledLinkButton
61
+ to={path}
62
+ onClick={() => {
63
+ setCollapsed(false);
64
+ }}
65
+ >
61
66
  <StyledListItemButton collapsed={collapsed}>
62
67
  <StyledListItemIcon collapsed={collapsed}>
63
68
  {Icon ? Icon : <Icons.HomeIcon />}
package/src/components/Assets/Icons/IconComponents/ToursIcon.tsx DELETED
@@ -1,50 +0,0 @@
1
- export const ToursIcon = ({ size = 16 }) => {
2
- return (
3
- <svg
4
- xmlns="http://www.w3.org/2000/svg"
5
- width={size}
6
- height={size}
7
- viewBox="0 0 70 70"
8
- >
9
- <g
10
- id="Group_9777"
11
- data-name="Group 9777"
12
- transform="translate(-1840 -1000)"
13
- >
14
- <g
15
- id="Group_9776"
16
- data-name="Group 9776"
17
- transform="translate(1840 1000)"
18
- >
19
- <rect
20
- id="Rectangle_24558"
21
- data-name="Rectangle 24558"
22
- width="70"
23
- height="70"
24
- rx="35"
25
- fill="#f0f0f5"
26
- />
27
- <rect
28
- id="Rectangle_24559"
29
- data-name="Rectangle 24559"
30
- width="54"
31
- height="54"
32
- rx="27"
33
- transform="translate(8 8)"
34
- fill="#d0d0e3"
35
- />
36
- </g>
37
- <path
38
- id="bulb"
39
- d="M27.892,25.169c0-4.19,1.985-5.292,1.985-5.292a6.893,6.893,0,0,0,.139-9.841,7.056,7.056,0,0,0-9.978,0,6.891,6.891,0,0,0,.137,9.841s1.985,1.1,1.985,5.292Zm-1.544,5.292H23.7m3.528-2.646H22.82M24.8,4V5.323M14,14.8h1.323m19.4,0h.882M17.164,22.445l.935-.935M31.821,7.788l.624-.624m-15.281,0L18.1,8.1M31.821,21.821l.624.624"
40
- transform="translate(1850.195 1017.771)"
41
- fill="none"
42
- stroke="#323167"
43
- stroke-linecap="round"
44
- stroke-linejoin="round"
45
- stroke-width="1.8"
46
- />
47
- </g>
48
- </svg>
49
- );
50
- };