Skip to content

Commit

Permalink
Remove warning in console (#307)
Browse files Browse the repository at this point in the history
  • Loading branch information
franckgaudin committed Jun 21, 2024
2 parents 63a28af + b4ccb8c commit 9610aed
Show file tree
Hide file tree
Showing 11 changed files with 900 additions and 636 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";

import { memo, type ReactNode } from "react";
import { memo, useState, useEffect, type ReactNode } from "react";
import clsx from "clsx";

import { CodeIcon } from "@/components/icon";
Expand All @@ -10,6 +10,7 @@ import { useToggle } from "@/hooks/useToggle.ts";
import ComponentPreviewWrapper from "./ComponentPreviewWrapper.tsx";

import "./componentExample.css";
import ComponentSkeleton from "@/app/ui/components/componentExample/ComponentSkeleton.tsx";

interface CommonProps {
src: string;
Expand Down Expand Up @@ -43,6 +44,11 @@ const ComponentExample = memo(({
...props
}: ComponentExampleProps) => {
const [showCode, toggleShowCode] = useToggle(isOpen);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
setIsLoading(false);
}, []);

const showBothComponent = type === "both";
const showPreviewComponent = type === "preview" || showBothComponent;
Expand All @@ -52,6 +58,10 @@ const ComponentExample = memo(({
return null;
}

if (isLoading) {
return <div data-usage={type} className="hd-component-example__skeleton"><ComponentSkeleton /></div>;
}

const renderToggleButton = () => {
if (!showBothComponent) {
return null;
Expand Down
18 changes: 11 additions & 7 deletions apps/docs/app/ui/components/componentExample/ComponentPreview.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
"use client";

import { useMemo } from "react";
import dynamic from "next/dynamic";
import { useMemo, Suspense } from "react";

import ComponentSkeleton from "./ComponentSkeleton.tsx";
import { Previews } from "@/examples/Preview.ts";

import "./componentSkeleton.css";

Expand All @@ -12,12 +12,16 @@ interface ComponentPreviewProps {
}

const ComponentPreview = ({ src }: ComponentPreviewProps) => {
const DynamicComponent = useMemo(() => dynamic(() => import(`../../../../../../packages/components/src/${src}.tsx`), {
ssr: false,
loading: () => <ComponentSkeleton overlay />
}), [src]);
const Component = useMemo(() => Previews[src]?.component, [src]);
if (!Component) {
return <div>No Preview</div>;
}

return <DynamicComponent />;
return (
<Suspense fallback={<ComponentSkeleton overlay />}>
<Component />
</Suspense>
);
};

export default ComponentPreview;
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,10 @@
}
}

.hd-component-example__skeleton {
height: 13rem;
}

.hd-component-example + p {
margin-block-start: var(--hd-space-3);
}
Expand Down
51 changes: 51 additions & 0 deletions apps/docs/examples/Preview.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/* eslint-disable */
// @ts-nocheck
/* -------------------------------------------------------------------------- */
/* GENERATED FILE, DO NOT EDIT MANUALLY! */
/* -------------------------------------------------------------------------- */

import { lazy, type LazyExoticComponent, type ReactElement } from "react";

interface Preview {
component: LazyExoticComponent<() => ReactElement>;
}

export const Previews: Record<string, Preview> = {
"buttons/docs/button/preview": {
component: lazy(() => import("@/../../packages/components/src/buttons/docs/button/preview.tsx"))
},
"buttons/docs/button/variant": {
component: lazy(() => import("@/../../packages/components/src/buttons/docs/button/variant.tsx"))
},
"buttons/docs/button/size": {
component: lazy(() => import("@/../../packages/components/src/buttons/docs/button/size.tsx"))
},
"buttons/docs/button/state": {
component: lazy(() => import("@/../../packages/components/src/buttons/docs/button/state.tsx"))
},
"buttons/docs/button/loading": {
component: lazy(() => import("@/../../packages/components/src/buttons/docs/button/loading.tsx"))
},
"buttons/docs/button/layout": {
component: lazy(() => import("@/../../packages/components/src/buttons/docs/button/layout.tsx"))
},
"buttons/docs/button/icon": {
component: lazy(() => import("@/../../packages/components/src/buttons/docs/button/icon.tsx"))
},
"buttons/docs/button/icons": {
component: lazy(() => import("@/../../packages/components/src/buttons/docs/button/icons.tsx"))
},
"buttons/docs/button/endIcon": {
component: lazy(() => import("@/../../packages/components/src/buttons/docs/button/endIcon.tsx"))
},
"buttons/docs/button/asLink": {
component: lazy(() => import("@/../../packages/components/src/buttons/docs/button/asLink.tsx"))
},
"buttons/docs/button/reactRouterLink": {
component: lazy(() => import("@/../../packages/components/src/buttons/docs/button/reactRouterLink.tsx"))
},
"buttons/docs/button/advancedCustomization": {
component: lazy(() => import("@/../../packages/components/src/buttons/docs/button/advancedCustomization.tsx"))
},
};

3 changes: 2 additions & 1 deletion apps/docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
"lint:types": "tsc --noEmit",
"storybook": "storybook dev -p 6010",
"build:storybook": "storybook build",
"build:componentData": "tsx scripts/generateComponentData.mts"
"build:componentData": "tsx scripts/generateComponentData.mts && pnpm run build:previewRef",
"build:previewRef": "tsx scripts/generatePreviewRef.mts"
},
"dependencies": {
"@tanstack/react-table": "^8.17.3",
Expand Down
1 change: 1 addition & 0 deletions apps/docs/scripts/generateComponentData.mts
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,7 @@ async function generateComponentData() {
}

const components = await generateComponentList(PACKAGES, options);
console.log('Found components:', components)

if (!components.length) {
console.error('No components found');
Expand Down
72 changes: 72 additions & 0 deletions apps/docs/scripts/generatePreviewRef.mts
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import fs from "fs";
import path from "path";
import glob from "glob";

const CONTENT_FILES = path.join(process.cwd(), "content", "components", "**", "*.mdx");
const OUTPUT_FILE = "Preview.ts";
const OUTPUT_DIR = "examples";

function getExamplePath(filePath: string[]) {
const srcValues: string[] = [];

filePath.forEach(file => {
const content = fs.readFileSync(file, 'utf-8');
const regex = /<Example\s+(?:[^>]*?\s+)?src="([^"]*)"/g;
let match;
while ((match = regex.exec(content)) !== null) {
srcValues.push(match[1]);
}
});

return srcValues;
}

function getMdxFiles() {
return glob.sync(CONTENT_FILES);
}

function generateDemoFile(content?: string) {
const dirPath = path.join(process.cwd(), OUTPUT_DIR);
const filePath = path.join(dirPath, OUTPUT_FILE);

if (!fs.existsSync(dirPath)) {
fs.mkdirSync(dirPath);
}

fs.writeFileSync(filePath, content || '');
}

function generatePreviewRef() {
console.log('Start generation Preview references...');
const files = getMdxFiles();
const examplePaths = getExamplePath(files);

let previewEntries = "";
for (const path of examplePaths) {
previewEntries += `
"${path}": {
component: lazy(() => import("@/../../packages/components/src/${path}.tsx"))
},`;
}

const previewContent = `/* eslint-disable */
// @ts-nocheck
/* -------------------------------------------------------------------------- */
/* GENERATED FILE, DO NOT EDIT MANUALLY! */
/* -------------------------------------------------------------------------- */
import { lazy, type LazyExoticComponent, type ReactElement } from "react";
interface Preview {
component: LazyExoticComponent<() => ReactElement>;
}
export const Previews: Record<string, Preview> = {${previewEntries}
};
`

generateDemoFile(previewContent)
console.log('🎉 Success')
}

generatePreviewRef();
11 changes: 5 additions & 6 deletions packages/components/src/checkbox/src/Checkbox.module.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.hop-Checkbox {
.hop-Checkbox {
/* Default */
--hop-Checkbox-box-border-size: 0.0625rem;
--hop-Checkbox-box-border-color: var(--hop-neutral-border);
Expand Down Expand Up @@ -96,8 +96,8 @@

display: flex;
column-gap: var(--hop-space-inline-xs);
align-items: start;
justify-content: start;
align-items: flex-start;
justify-content: flex-start;

box-sizing: border-box;
inline-size: max-content;
Expand Down Expand Up @@ -233,9 +233,8 @@
outline: var(--box-outline, none);
outline-offset: 0.125rem;

transition:
background-color var(--transition-duration) var(--hop-easing-productive),
border var(--transition-duration) var(--hop-easing-productive);
transition: background-color var(--transition-duration) var(--hop-easing-productive),
border var(--transition-duration) var(--hop-easing-productive);
}

/* Check */
Expand Down
11 changes: 5 additions & 6 deletions packages/components/src/radio/src/Radio.module.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.hop-Radio {
.hop-Radio {
/* Default */
--hop-Radio-box-border-size: 0.0625rem;
--hop-Radio-box-border-color: var(--hop-neutral-border);
Expand Down Expand Up @@ -95,8 +95,8 @@

display: flex;
column-gap: var(--hop-space-inline-xs);
align-items: start;
justify-content: start;
align-items: flex-start;
justify-content: flex-start;

box-sizing: border-box;
inline-size: max-content;
Expand Down Expand Up @@ -230,9 +230,8 @@
outline: var(--box-outline, none);
outline-offset: 0.125rem;

transition:
background-color var(--transition-duration) var(--hop-easing-productive),
border var(--transition-duration) var(--hop-easing-productive);
transition: background-color var(--transition-duration) var(--hop-easing-productive),
border var(--transition-duration) var(--hop-easing-productive);
}

/* Check */
Expand Down
13 changes: 6 additions & 7 deletions packages/components/src/switch/src/Switch.module.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.hop-Switch {
.hop-Switch {
/* Default */
--hop-Switch-border-size: 0.0625rem;
--hop-Switch-border-color: var(--hop-neutral-border);
Expand Down Expand Up @@ -68,9 +68,8 @@

display: inline-flex;
column-gap: var(--column-gap);
align-items: center;
align-items: start;
justify-content: start;
align-items: flex-start;
justify-content: flex-start;

box-sizing: border-box;
inline-size: max-content;
Expand Down Expand Up @@ -122,9 +121,9 @@
--background-color: var(--hop-Switch-background-color-selected);
--thumb-color: var(--hop-Switch-thumb-color-selected);
--thumb-transform: translate(calc(var(--inline-size) -
var(--thumb-size, var(--hop-Switch-thumb-size-md)) -
(2 * var(--inset-inline-start, var(--hop-Switch-inset-inline-start-md))) -
(2 * var(--border-size))), -50%);
var(--thumb-size, var(--hop-Switch-thumb-size-md)) -
(2 * var(--inset-inline-start, var(--hop-Switch-inset-inline-start-md))) -
(2 * var(--border-size))), -50%);
--text-color: var(--hop-Switch-text-color-selected);
}

Expand Down
Loading

0 comments on commit 9610aed

Please sign in to comment.