Skip to content

Commit fb0a2c1

Browse files
sudhanshutechsudhanshutech
authored
Merge pull request #6093 from Vidit-Kushwaha/fix/dynamicImport
Fix: Dynamic Imports of Component
2 parents 70f3ace + 7406b09 commit fb0a2c1

File tree

9 files changed

+112
-125
lines changed

9 files changed

+112
-125
lines changed

‎gatsby-node.js

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ const slugify = require("./src/utils/slugify");
1010
const { paginate } = require("gatsby-awesome-pagination");
1111
const { createFilePath } = require("gatsby-source-filesystem");
1212
const config = require("./gatsby-config");
13+
const {
14+
componentsData,
15+
} = require("./src/sections/Projects/Sistent/components/content");
1316

1417
if (process.env.CI === "true") {
1518
// All process.env.CI conditionals in this file are in place for GitHub Pages, if webhost changes in the future, code may need to be modified or removed.
@@ -723,18 +726,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
723726
}
724727
});
725728

726-
const components = [
727-
"button",
728-
"text-input",
729-
"modal",
730-
"paper",
731-
"popper",
732-
"text-field",
733-
"link",
734-
"container",
735-
"button-group",
736-
"tooltip",
737-
];
729+
const components = componentsData.map((component) => component.src.replace("/", ""));
738730

739731
const createComponentPages = (createPage, components) => {
740732
const pageTypes = [

‎src/components/SistentNavigation/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { HiOutlineChevronLeft } from "@react-icons/all-files/hi/HiOutlineChevron
33
import { Link } from "gatsby";
44
import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
55
import { IoIosArrowDropdownCircle } from "@react-icons/all-files/io/IoIosArrowDropdownCircle";
6-
import { componentsData } from "../../sections/Projects/Sistent/components";
6+
import { componentsData } from "../../sections/Projects/Sistent/components/content";
77

88
import TOCWrapper from "./toc.style";
99
import { IoIosArrowDown } from "@react-icons/all-files/io/IoIosArrowDown";

‎src/pages/projects/sistent/components/box/code.js

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/pages/projects/sistent/components/box/guidance.js

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/pages/projects/sistent/components/box/index.js

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/sections/Projects/Sistent/components/box/code.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const codes = [
5353
</Box>`,
5454
];
5555

56-
export const BoxCode = () => {
56+
const BoxCode = () => {
5757
const location = useLocation();
5858
const { isDark } = useStyledDarkMode();
5959

@@ -206,3 +206,5 @@ export const BoxCode = () => {
206206
</SistentLayout>
207207
);
208208
};
209+
210+
export default BoxCode;

‎src/sections/Projects/Sistent/components/box/guidance.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { SistentLayout } from "../../sistent-layout";
88
import TabButton from "../../../../../reusecore/Button";
99
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
1010

11-
export const BoxGuidance = () => {
11+
const BoxGuidance = () => {
1212
const location = useLocation();
1313
const { isDark } = useStyledDarkMode();
1414

@@ -177,3 +177,5 @@ export const BoxGuidance = () => {
177177
</SistentLayout>
178178
);
179179
};
180+
181+
export default BoxGuidance;

‎src/sections/Projects/Sistent/components/content.js

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
const componentsData = [
2+
{
3+
id: 1,
4+
name: "Button",
5+
description:
6+
"A button is an interactive element that triggers a specific action and also lets users know what will happen next.",
7+
url: "/projects/sistent/components/button",
8+
src: "/button",
9+
},
10+
{
11+
id: 2,
12+
name: "Text Input",
13+
description:
14+
"A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.",
15+
url: "/projects/sistent/components/text-input",
16+
src: "/text-input",
17+
},
18+
{
19+
id: 3,
20+
name: "Modal",
21+
description:
22+
"A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.",
23+
url: "/projects/sistent/components/modal",
24+
src: "/modal",
25+
},
26+
{
27+
id: 4,
28+
name: "Paper",
29+
description:
30+
"The Paper component offers an elevated surface with shadow effects, following Material Design’s elevation system.",
31+
url: "/projects/sistent/components/paper",
32+
src: "/paper",
33+
},
34+
{
35+
id: 5,
36+
name: "Popper",
37+
description:
38+
"A popper is a tooltip that appears when a user interacts with an element.",
39+
url: "/projects/sistent/components/popper",
40+
src: "/popper",
41+
},
42+
{
43+
id: 6,
44+
name: "Text Field",
45+
description:
46+
"The TextField component is a versatile input field used to capture user input in forms and user interfaces.",
47+
url: "/projects/sistent/components/text-field",
48+
src: "/text-field",
49+
},
50+
{
51+
id: 7,
52+
name: "Link",
53+
description:
54+
"Links are essential and integral components of an interface. They are primarily used for navigation, guiding users to the next step in a journey or redirecting them to relevant sections or pages.",
55+
url: "/projects/sistent/components/link",
56+
src: "/link",
57+
},
58+
{
59+
id: 8,
60+
name: "Container",
61+
description:
62+
"Containers align and center content, providing responsive layout options for different screen sizes.",
63+
url: "/projects/sistent/components/container",
64+
src: "/container",
65+
},
66+
{
67+
id: 9,
68+
name: "ButtonGroup",
69+
description:
70+
"ButtonGroup is a component that groups multiple buttons together.",
71+
url: "/projects/sistent/components/button-group",
72+
src: "/button-group",
73+
},
74+
{
75+
id: 10,
76+
name: "Box",
77+
description:
78+
"Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.",
79+
url: "/projects/sistent/components/box",
80+
src: "/box",
81+
},
82+
{
83+
id: 11,
84+
name: "Tooltip",
85+
description:
86+
"The Tooltip component is a small pop-up box that appears when a user hovers over an element.",
87+
url: "/projects/sistent/components/tooltip",
88+
src: "/tooltip",
89+
},
90+
{
91+
id: 12,
92+
name: "Backdrop",
93+
description:
94+
"Backdrop component overlays a dimmed screen to focus attention on foreground content.",
95+
url: "/projects/sistent/components/backdrop",
96+
src: "/backdrop",
97+
},
98+
];
99+
100+
module.exports = { componentsData };

‎src/sections/Projects/Sistent/components/index.js

Lines changed: 1 addition & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -7,93 +7,8 @@ import SearchBox from "../../../../reusecore/Search";
77
import useDataList from "../../../../utils/usedataList";
88
import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
99
import { Link } from "gatsby";
10+
import { componentsData } from "./content";
1011

11-
export const componentsData = [
12-
{
13-
id: 1,
14-
name: "Button",
15-
description:
16-
"A button is an interactive element that triggers a specific action and also lets users know what will happen next.",
17-
url: "/projects/sistent/components/button",
18-
},
19-
{
20-
id: 2,
21-
name: "Text Input",
22-
description:
23-
"A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.",
24-
url: "/projects/sistent/components/text-input",
25-
},
26-
{
27-
id: 3,
28-
name: "Modal",
29-
description:
30-
"A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.",
31-
url: "/projects/sistent/components/modal",
32-
},
33-
{
34-
id: 4,
35-
name: "Paper",
36-
description:
37-
"The Paper component offers an elevated surface with shadow effects, following Material Design’s elevation system.",
38-
url: "/projects/sistent/components/paper",
39-
},
40-
{
41-
id: 5,
42-
name: "Popper",
43-
description:
44-
"A popper is a tooltip that appears when a user interacts with an element.",
45-
url: "/projects/sistent/components/popper",
46-
},
47-
{
48-
id: 6,
49-
name: "Text Field",
50-
description:
51-
"The TextField component is a versatile input field used to capture user input in forms and user interfaces.",
52-
url: "/projects/sistent/components/text-field",
53-
},
54-
{
55-
id: 7,
56-
name: "Link",
57-
description:
58-
"Links are essential and integral components of an interface. They are primarily used for navigation, guiding users to the next step in a journey or redirecting them to relevant sections or pages.",
59-
url: "/projects/sistent/components/link",
60-
},
61-
{
62-
id: 8,
63-
name: "Container",
64-
description:
65-
"Containers align and center content, providing responsive layout options for different screen sizes.",
66-
url: "/projects/sistent/components/container",
67-
},
68-
{
69-
id: 9,
70-
name: "ButtonGroup",
71-
description:
72-
"ButtonGroup is a component that groups multiple buttons together.",
73-
url: "/projects/sistent/components/button-group",
74-
},
75-
{
76-
id: 10,
77-
name: "Box",
78-
description:
79-
"Box is used as a flexible container for layout and styling, allowing quick customization and responsive design adjustments.",
80-
url: "/projects/sistent/components/box",
81-
},
82-
{
83-
id: 11,
84-
name: "Tooltip",
85-
description:
86-
"The Tooltip component is a small pop-up box that appears when a user hovers over an element.",
87-
url: "/projects/sistent/components/tooltip",
88-
},
89-
{
90-
id: 12,
91-
name: "Backdrop",
92-
description:
93-
"Backdrop component overlays a dimmed screen to focus attention on foreground content.",
94-
url: "/projects/sistent/components/backdrop",
95-
},
96-
];
9712

9813
const SistentComponents = () => {
9914
const [searchQuery, setSearchQuery] = useState("");

0 commit comments

Comments
 (0)