;
+
+export const Default: Story = {
+ args: {
+ raw: "const foo = 'bar';",
+ title: "Story.tsx",
+ "data-language": "tsx",
+ children: const foo = 'bar';
+ }
+};
+
+export const WithoutTitle: Story = {
+ args: {
+ raw: "const foo = 'bar';",
+ "data-language": "tsx",
+ children: const foo = 'bar';
+ }
+};
diff --git a/apps/docs/components/ui/pre/Pre.tsx b/apps/docs/components/ui/pre/Pre.tsx
index a6e9e2be8..a6ae9c244 100644
--- a/apps/docs/components/ui/pre/Pre.tsx
+++ b/apps/docs/components/ui/pre/Pre.tsx
@@ -4,7 +4,7 @@ import React from "react";
import type { HTMLAttributes } from "react";
import cx from "classnames";
-import CodeBlockCopyButton from "@/components/copyButton/codeblockCopyButton/CodeBlockCopyButton";
+import CopyButton from "@/components/copyButton/CopyButton.tsx";
import LangIcon from "@/components/ui/pre/langIcon/LangIcon";
import "./pre.css";
@@ -23,21 +23,30 @@ const Pre = ({ children, title, "data-language": dataLanguage, raw, ...props }:
const classes = cx("hd-pre", preClasses);
+ const langContent = dataLanguage && (
+
+
+
+ );
+
+ const titleContent = {title};
+ const copyButton = raw && ;
+
return (
- {raw && }
{title &&
-
-
- {dataLanguage && (
-
-
- )
- }
-
{title}
+
+
+ {langContent}
+ {titleContent}
+
+ {copyButton}
-
}
- {children}
+ }
+
+ {children}
+
+ {!title &&
{copyButton}
}
);
};
diff --git a/apps/docs/components/ui/pre/pre.css b/apps/docs/components/ui/pre/pre.css
index 5b5454e4e..f04b40ec9 100644
--- a/apps/docs/components/ui/pre/pre.css
+++ b/apps/docs/components/ui/pre/pre.css
@@ -1,48 +1,69 @@
.hd-pre {
- position: relative;
- padding-right: 3rem;
+ overflow: hidden;
+ border: var(--hd-border-size) solid var(--hd-color-neutral-border);
+
+ /* the radius top is larger to eliminate a visual glitch with the header */
+ border-radius: 0.6rem 0.6rem 0.5rem 0.5rem;
+ color: var(--hd-color-neutral-text);
+ background-color: var(--hd-color-white-surface);
+}
+
+.hd-pre--no-title {
+ display: flex;
+ align-items: stretch;
+}
+
+.hd-pre--no-title .hd-pre__code {
+ margin-right: auto;
}
.hd-pre--no-title code {
align-content: center;
- min-height: 3rem;
+}
+
+.hd-pre--no-title .hd-pre__action {
+ padding-inline: var(--hd-space-1);
+ margin-block: auto;
}
/* pre HEADER */
.hd-pre-header {
display: flex;
- justify-content: space-between;
- padding: var(--hd-space-1) 0 var(--hd-space-1) var(--hd-space-2);
- font-size: 0.75rem;
+ padding-inline: var(--hd-space-2) var(--hd-space-1);
+ height: 3rem;
+ font-size: 0.875rem;
+ font-family: var(--hd-default-font-family);
align-items: center;
- border-bottom: var(--hd-border-size) solid var(--hd-color-border-primary-weak);
+ color: var(--hd-color-neutral-text-weakest);
+ background-color: var(--hd-color-neutral-surface);
+ border-top-left-radius: 0.5rem;
+ border-top-right-radius: 0.5rem;
+ border-bottom: var(--hd-border-size) solid var(--hd-color-neutral-border);
}
.hd-pre-header__info {
display: flex;
align-items: center;
gap: var(--hd-space-1);
+ margin-right: auto;
}
.hd-pre-header__lang {
- font-family: monospace;
display: flex;
}
.hd-pre-header__lang-icon {
width: var(--hd-space-2);
aspect-ratio: 1/1;
+ filter: grayscale(100%);
}
.hd-pre-header__title {
- font-style: italic;
line-height: 1;
- color: var(--hd-white);
}
-/* Copy Button */
-.hd-pre-copy-button {
- position: absolute;
- right: var(--hd-space-1);
- top: var(--hd-space-1);
+.hd-pre__code {
+ padding: var(--hd-space-2);
+ font-size: 0.875rem;
+ line-height: 1.5;
}
diff --git a/apps/docs/components/ui/sectionPopover/SectionPopover.stories.tsx b/apps/docs/components/ui/sectionPopover/SectionPopover.stories.tsx
new file mode 100644
index 000000000..958ffe81f
--- /dev/null
+++ b/apps/docs/components/ui/sectionPopover/SectionPopover.stories.tsx
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import SectionPopover from "./sectionPopover";
+
+const meta = {
+ title: "Mobile/SectionPopover",
+ component: SectionPopover,
+ parameters: {
+ viewport: {
+ defaultViewport: "mobile1"
+ }
+ }
+} satisfies Meta
;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ links: [
+ {
+ title: "Section 1",
+ url: "#section-1",
+ id: "section-1"
+ },
+ {
+ title: "Section 2",
+ url: "#section-2",
+ id: "section-2"
+ },
+ {
+ title: "Section 3",
+ url: "#section-3",
+ id: "section-3"
+ }
+ ]
+ }
+};
diff --git a/apps/docs/components/ui/sidebar/Sidebar.stories.tsx b/apps/docs/components/ui/sidebar/Sidebar.stories.tsx
new file mode 100644
index 000000000..f9f120b7f
--- /dev/null
+++ b/apps/docs/components/ui/sidebar/Sidebar.stories.tsx
@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Sidebar from "./Sidebar";
+
+const meta = {
+ title: "Ui/Sidebar",
+ component: Sidebar,
+ parameters: {
+ viewport: {
+ defaultViewport: "mobile1"
+ }
+ }
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ data: [
+ {
+ _id: "1",
+ title: "Getting Started",
+ _raw: {
+ flattenedPath: "/getting-started",
+ sourceFileDir: "/pages"
+ }
+ },
+ {
+ _id: "2",
+ title: "Components",
+ _raw: {
+ flattenedPath: "/components",
+ sourceFileDir: "/pages"
+ }
+ },
+ {
+ _id: "3",
+ title: "Icons",
+ _raw: {
+ flattenedPath: "/icons",
+ sourceFileDir: "/pages"
+ }
+ }
+ ],
+ isOpen: true,
+ onClose: () => {}
+ }
+};
diff --git a/apps/docs/components/ui/subHeader/SubHeader.stories.tsx b/apps/docs/components/ui/subHeader/SubHeader.stories.tsx
new file mode 100644
index 000000000..70ff1dc72
--- /dev/null
+++ b/apps/docs/components/ui/subHeader/SubHeader.stories.tsx
@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import SubHeader from "./SubHeader";
+
+const meta = {
+ title: "Mobile/SubHeader",
+ component: SubHeader,
+ parameters: {
+ viewport: {
+ defaultViewport: "mobile1"
+ }
+ }
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ links: [
+ {
+ title: "Section 1",
+ url: "#section-1",
+ id: "section-1"
+ },
+ {
+ title: "Section 2",
+ url: "#section-2",
+ id: "section-2"
+ },
+ {
+ title: "Section 3",
+ url: "#section-3",
+ id: "section-3"
+ }
+ ],
+ toggleOpenState: () => {}
+ }
+};
diff --git a/apps/docs/components/ui/switcher/Switcher.stories.tsx b/apps/docs/components/ui/switcher/Switcher.stories.tsx
new file mode 100644
index 000000000..5b7831453
--- /dev/null
+++ b/apps/docs/components/ui/switcher/Switcher.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Switcher from "./Switcher";
+
+const meta = {
+ title: "Ui/Switcher",
+ component: Switcher
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const React: Story = {
+ args: {
+ type: "react"
+ }
+};
+
+export const Svg: Story = {
+ args: {
+ type: "svg"
+ }
+};
diff --git a/apps/docs/components/ui/table/Table.stories.tsx b/apps/docs/components/ui/table/Table.stories.tsx
new file mode 100644
index 000000000..1eac27d95
--- /dev/null
+++ b/apps/docs/components/ui/table/Table.stories.tsx
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Table from "./Table";
+
+const meta = {
+ title: "Ui/Table",
+ component: Table
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ category: "react",
+ data: [
+ {
+ name: "--hop-sapphire-200",
+ value: "#95b1ff"
+ },
+ {
+ name: "--hop-primary-surface-disabled",
+ value: "#95b1ff"
+ },
+ {
+ name: "--hop-primary-surface-disabled",
+ value: "#2040c7"
+ }
+ ]
+ }
+};
diff --git a/apps/docs/components/ui/title/Title.stories.ts b/apps/docs/components/ui/title/Title.stories.ts
deleted file mode 100644
index cf243d6c0..000000000
--- a/apps/docs/components/ui/title/Title.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import Title from "./Title";
-
-const meta: Meta = {
- title: "Component/Title",
- component: Title,
- argTypes: {
- as: {
- control: { type: "select" }
- },
- level: {
- control: { type: "select" }
- }
- }
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
- args: {
- children: "Nothing is cheap"
- }
-};
diff --git a/apps/docs/components/ui/title/Title.stories.tsx b/apps/docs/components/ui/title/Title.stories.tsx
new file mode 100644
index 000000000..1db7f7afb
--- /dev/null
+++ b/apps/docs/components/ui/title/Title.stories.tsx
@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Title from "./Title";
+
+const meta = {
+ title: "Ui/Title",
+ component: Title,
+ argTypes: {
+ as: {
+ control: { type: "select" }
+ },
+ level: {
+ control: { type: "select" }
+ }
+ },
+ args: {
+ children: "Nothing is cheap"
+ }
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Level: Story = {
+ render: args => {
+ return (
+ <>
+
+
+
+
+
+
+ )
+ ;
+ }
+};
diff --git a/apps/docs/contentlayer.config.js b/apps/docs/contentlayer.config.js
index 7373c5b12..c1269f0e9 100644
--- a/apps/docs/contentlayer.config.js
+++ b/apps/docs/contentlayer.config.js
@@ -173,7 +173,6 @@ export default makeSource({
if (codeEl.tagName !== "code") {
return;
}
-
node.raw = codeEl.children?.[0].value;
}
});
diff --git a/apps/docs/styles/themes/rehype.css b/apps/docs/styles/themes/rehype.css
index 367186ead..0f02a8fe3 100644
--- a/apps/docs/styles/themes/rehype.css
+++ b/apps/docs/styles/themes/rehype.css
@@ -1,4 +1,8 @@
-/* EDITOR - THEME SPECIFIC COLORS */
+/* !* EDITOR - THEME SPECIFIC COLORS *! */
+[data-theme="light"] [data-rehype-pretty-code-fragment]{
+ --hd-codeblock-background-color: var(--hd-neutral-800);
+}
+
[data-rehype-pretty-code-fragment] {
/* NORD */
--hd-codeblock-line-highlighted-border-color: #88C0D0;
@@ -14,6 +18,7 @@
--hd-codeblock-word-value-text-color: rgb(239 194 198);
--hd-codeblock-title-background-color: rgb(59 66 82);
--hd-codeblock-title-text-color: rgb(216 222 233);
+ --hd-codeblock-background-color: var(--hd-neutral-800);
margin-bottom: var(--hd-space-3);
}
@@ -23,18 +28,17 @@
}
[data-rehype-pretty-code-fragment] pre {
- border-radius: var(--hd-space-1);
+ background-color: var(--hd-codeblock-background-color) !important;
}
[data-rehype-pretty-code-fragment] code {
/* until we create our own json theme, it's the best way to have a transparent code line */
- background-color: transparent!important;
+ background-color: transparent !important;
}
[data-rehype-pretty-code-fragment] pre code {
display: grid;
overflow-x: auto;
- padding: var(--hd-space-1) 0 var(--hd-space-1) var(--hd-space-2);
}
[data-rehype-pretty-code-fragment] .line {
@@ -88,13 +92,6 @@
/* Block Title */
[data-rehype-pretty-code-title] {
- border-radius: var(--hd-space-1) var(--hd-space-1) 0 0;
- font-weight: 500;
- font-size: .875rem;
- background-color: var(--hd-codeblock-title-background-color);
- padding: var(--hd-space-1);
- padding-inline-start: .75rem;
- color: var(--hd-codeblock-title-text-color);
display: none;
}
diff --git a/apps/docs/styles/tokens.css b/apps/docs/styles/tokens.css
index 9e6409647..18a50027d 100644
--- a/apps/docs/styles/tokens.css
+++ b/apps/docs/styles/tokens.css
@@ -52,6 +52,7 @@
}
[data-theme="light"] {
+ --hd-color-white-surface: var(--hd-white);
--hd-color-neutral-surface: var(--hd-neutral-20);
--hd-color-neutral-surface-weak: var(--hd-neutral-50);
--hd-color-surface-neutral-selection: var(--hd-neutral-75);
@@ -78,6 +79,7 @@
/* Dark Theme Overrides */
[data-theme="dark"] {
+ --hd-color-white-surface: var(--hd-neutral-800);
--hd-color-neutral-surface: var(--hd-neutral-900);
--hd-color-neutral-surface-weak: var(--hd-neutral-800);
--hd-color-surface-neutral-selection: var(--hd-neutral-300);
@@ -85,7 +87,7 @@
--hd-color-neutral-text-weak: var(--hd-neutral-300);
--hd-color-neutral-text-weak-hover: var(--hd-neutral-0);
--hd-color-neutral-text-weakest: var(--hd-neutral-300);
- --hd-color-neutral-text-weakest-hover: var(--hd-neutral-100);
+ --hd-color-neutral-text-weakest-hover: var(--hd-neutral-50);
--hd-color-primary-text: var(--hd-primary-600);
--hd-color-primary-text-hover: var(--hd-white);
--hd-color-primary-text-strong: var(--hd-primary-900);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7b6b7db0f..ad3ef572f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -124,7 +124,7 @@ importers:
version: 4.1.3(prop-types@15.8.1)(react-dom@18.2.0)(react@18.2.0)
rehype-pretty-code:
specifier: 0.10.2
- version: 0.10.2(shiki@0.14.5)
+ version: 0.10.2(shiki@0.14.6)
unist-util-visit:
specifier: 5.0.0
version: 5.0.0
@@ -4069,6 +4069,7 @@ packages:
dependencies:
is-glob: 4.0.3
micromatch: 4.0.5
+ napi-wasm: 1.1.0
dev: true
bundledDependencies:
- napi-wasm
@@ -15649,6 +15650,10 @@ packages:
resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
dev: true
+ /napi-wasm@1.1.0:
+ resolution: {integrity: sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==}
+ dev: true
+
/natural-compare@1.4.0:
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
dev: true
@@ -17429,7 +17434,7 @@ packages:
unified: 11.0.4
dev: true
- /rehype-pretty-code@0.10.2(shiki@0.14.5):
+ /rehype-pretty-code@0.10.2(shiki@0.14.6):
resolution: {integrity: sha512-yBgk3S4yXtkAWVrkoN1DqDihjsaP0ReuN9Du4Dtkl/wsgwyqGNGuIUGi2etVHAOsi40e2KRHoOulQqnKPuscPA==}
engines: {node: '>=16'}
peerDependencies:
@@ -17439,7 +17444,7 @@ packages:
hast-util-to-string: 2.0.0
parse-numeric-range: 1.3.0
rehype-parse: 8.0.5
- shiki: 0.14.5
+ shiki: 0.14.6
unified: 10.1.2
unist-util-visit: 4.1.2
dev: false
@@ -17957,8 +17962,8 @@ packages:
engines: {node: '>=8'}
dev: true
- /shiki@0.14.5:
- resolution: {integrity: sha512-1gCAYOcmCFONmErGTrS1fjzJLA7MGZmKzrBNX7apqSwhyITJg2O102uFzXUeBxNnEkDA9vHIKLyeKq0V083vIw==}
+ /shiki@0.14.6:
+ resolution: {integrity: sha512-R4koBBlQP33cC8cpzX0hAoOURBHJILp4Aaduh2eYi+Vj8ZBqtK/5SWNEHBS3qwUMu8dqOtI/ftno3ESfNeVW9g==}
dependencies:
ansi-sequence-parser: 1.1.1
jsonc-parser: 3.2.0