Skip to content

Commit c6385e1

Browse files
shairezMakisuoreemardelarosaMaïeul
committed
docs: completed the highlight component
Co-authored-by: Makisuo <[email protected]> Co-authored-by: John Reemar Dela Rosa <[email protected]> Co-authored-by: Maïeul <[email protected]>
1 parent 7ceedc5 commit c6385e1

29 files changed

+497
-242
lines changed

‎apps/website/src/_state/root-store-context-id.ts renamed to ‎apps/website/src/_state/app-state-context-id.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import { createContextId } from '@builder.io/qwik';
22
import { AppState } from './app-state.type';
33

4-
export const ROOT_STORE_CONTEXT_ID = createContextId<AppState>('app-state-context-id');
4+
export const APP_STATE_CONTEXT_ID = createContextId<AppState>('app-state-context-id');

‎apps/website/src/_state/app-state.type.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1+
import type { Highlighter } from 'shiki';
2+
13
export interface AppState {
24
mode: 'light' | 'dark';
5+
highlighter?: Highlighter;
36
isSidebarOpened: boolean;
47
featureFlags?: {
58
showFluffy?: boolean;

‎apps/website/src/_state/use-app-state.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { useContext, useContextProvider, useStore } from '@builder.io/qwik';
2+
import { APP_STATE_CONTEXT_ID } from './app-state-context-id';
3+
import { AppState } from './app-state.type';
4+
5+
export const useAppStateProvider = () => {
6+
const appState = useStore<AppState>({
7+
mode: 'light',
8+
isSidebarOpened: false,
9+
featureFlags: {
10+
showFluffy: import.meta.env.DEV,
11+
},
12+
});
13+
14+
// useTask$(async function createHighlighter() {
15+
// const highlighter = await shiki.getHighlighter({ theme: 'css-variables' });
16+
// appState.highlighter = highlighter;
17+
// });
18+
19+
useContextProvider(APP_STATE_CONTEXT_ID, appState);
20+
21+
return appState;
22+
};
23+
24+
export const useAppState = () => {
25+
const appState = useContext(APP_STATE_CONTEXT_ID);
26+
return appState;
27+
};

‎apps/website/src/_state/use-root-store.ts

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

‎apps/website/src/global.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,16 @@
3535
--color-ring: 263 84% 25%;
3636

3737
--border-radius: 0.375rem;
38+
39+
--shiki-color-text: theme('colors.white');
40+
--shiki-token-constant: theme('colors.emerald.300');
41+
--shiki-token-string: theme('colors.emerald.300');
42+
--shiki-token-comment: theme('colors.zinc.500');
43+
--shiki-token-keyword: theme('colors.sky.300');
44+
--shiki-token-parameter: theme('colors.pink.300');
45+
--shiki-token-function: theme('colors.violet.300');
46+
--shiki-token-string-expression: theme('colors.emerald.300');
47+
--shiki-token-punctuation: theme('colors.zinc.200');
3848
}
3949

4050
.dark {

‎apps/website/src/root.tsx

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,7 @@ import {
1212
} from '@builder.io/qwik-city';
1313
import { RouterHead } from './routes/_components/router-head/router-head';
1414

15-
import { AppState } from './_state/app-state.type';
16-
import { ROOT_STORE_CONTEXT_ID } from './_state/root-store-context-id';
15+
import { useAppStateProvider } from './_state/use-app-state';
1716
import { THEME_STORAGE_KEY, useCSSTheme } from './_state/use-css-theme';
1817
import { OLD_APP_STATE_CONTEXT_ID } from './constants';
1918
import globalStyles from './global.css?inline';
@@ -28,22 +27,14 @@ export default component$(() => {
2827
*/
2928
useStyles$(globalStyles);
3029

31-
const rootStore = useStore<AppState>({
32-
mode: 'light',
33-
isSidebarOpened: false,
34-
featureFlags: {
35-
showFluffy: import.meta.env.DEV,
36-
},
37-
});
38-
39-
useContextProvider(ROOT_STORE_CONTEXT_ID, rootStore);
30+
const appState = useAppStateProvider();
4031

4132
useVisibleTask$(() => {
4233
const userStoredTheme = localStorage.getItem(THEME_STORAGE_KEY);
4334
if (userStoredTheme) {
44-
rootStore.mode = userStoredTheme === 'dark' ? 'dark' : 'light';
35+
appState.mode = userStoredTheme === 'dark' ? 'dark' : 'light';
4536
} else {
46-
rootStore.mode = window.matchMedia('(prefers-color-scheme: dark)').matches
37+
appState.mode = window.matchMedia('(prefers-color-scheme: dark)').matches
4738
? 'dark'
4839
: 'light';
4940
}
@@ -55,7 +46,7 @@ export default component$(() => {
5546
});
5647
useContextProvider(OLD_APP_STATE_CONTEXT_ID, state);
5748

58-
useCSSTheme(rootStore);
49+
useCSSTheme(appState);
5950

6051
return (
6152
<QwikCityProvider>
@@ -67,7 +58,7 @@ export default component$(() => {
6758
<body
6859
lang="en"
6960
class={{
70-
'overflow-y-hidden': rootStore.isSidebarOpened,
61+
'overflow-y-hidden': appState.isSidebarOpened,
7162
}}
7263
>
7364
<RouterOutlet />

‎apps/website/src/routes/_components/header/header.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import { $, component$, useComputed$ } from '@builder.io/qwik';
22
// eslint-disable-next-line @nx/enforce-module-boundaries
33
import { version as headlessVersion } from '../../../../../../packages/kit-headless/package.json';
44
// eslint-disable-next-line @nx/enforce-module-boundaries
5+
import { useLocation } from '@builder.io/qwik-city';
56
import { KitName } from 'apps/website/src/_state/kit-name.type';
6-
import { useRootStore } from 'apps/website/src/_state/use-root-store';
7+
import { useAppState } from 'apps/website/src/_state/use-app-state';
78
import { version as fluffyVersion } from '../../../../../../packages/kit-fluffy/package.json';
89
import { useSelectedKit } from '../../docs/use-selected-kit';
910
import { CloseIcon } from '../icons/CloseIcon';
@@ -12,7 +13,6 @@ import { MenuIcon } from '../icons/MenuIcon';
1213
import { MoonIcon } from '../icons/MoonIcon';
1314
import { SunIcon } from '../icons/SunIcon';
1415
import { Logo } from '../icons/logo';
15-
import { useLocation } from '@builder.io/qwik-city';
1616

1717
export interface HeaderProps {
1818
showVersion?: boolean;
@@ -21,7 +21,7 @@ export interface HeaderProps {
2121

2222
export default component$(
2323
({ showVersion = false, showBottomBorder = false }: HeaderProps) => {
24-
const rootStore = useRootStore();
24+
const rootStore = useAppState();
2525
const selectedKitSig = useSelectedKit();
2626
const location = useLocation();
2727

‎apps/website/src/routes/docs/_components/navigation-docs/navigation-docs.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { component$ } from '@builder.io/qwik';
2+
import { useLocation } from '@builder.io/qwik-city';
23
import { ComponentStatus } from 'apps/website/src/_state/component-status.type';
34
import { KitName } from 'apps/website/src/_state/kit-name.type';
4-
import { useRootStore } from 'apps/website/src/_state/use-root-store';
5+
import { useAppState } from 'apps/website/src/_state/use-app-state';
56
import { useSelectedKit } from '../../use-selected-kit';
67
import { StatusBadge } from '../component-status-badge/component-status-badge';
7-
import { useLocation } from '@builder.io/qwik-city';
88

99
export interface LinkGroup {
1010
name: string;
@@ -24,7 +24,7 @@ export interface DocsNavigationProps {
2424

2525
export const DocsNavigation = component$(({ linksGroups }: DocsNavigationProps) => {
2626
const location = useLocation();
27-
const rootStore = useRootStore();
27+
const rootStore = useAppState();
2828
const selectedKitSig = useSelectedKit();
2929
const linkStyles = `px-4 py-2 -ml-4 mr-8 text-xl lg:text-sm flex items-center
3030
rounded-lg hover:bg-[var(--qwik-light-blue)] dark:hover:bg-[var(--qwik-dark-purple)]`;

‎apps/website/src/routes/docs/headless/(components)/tabs/examples.tsx

Lines changed: 35 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,57 @@
1-
import {
2-
component$,
3-
QwikIntrinsicElements,
4-
Slot,
5-
useSignal,
6-
useStore,
7-
useStyles$,
8-
} from '@builder.io/qwik';
1+
import { component$, Slot, useSignal, useStore, useStyles$ } from '@builder.io/qwik';
92
import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
10-
import type { OmitSignalClass } from '../../../../../../../../../shared/src/utils';
3+
4+
import { CodeExample } from '../../../_components/code-example/code-example';
115
import { PreviewCodeExample } from '../../../_components/preview-code-example/preview-code-example';
12-
import { Example01 as Example1 } from './example';
13-
import example1Code from './example?raw';
6+
import DisabledTabsComponent from './examples/disabled-example';
7+
import disabledTabsCode from './examples/disabled-example?raw';
8+
import FirstExampleComponent from './examples/first-example';
9+
import firstExampleCode from './examples/first-example?raw';
10+
import longExampleCode from './examples/long-example?raw';
11+
import shortExampleCode from './examples/short-example?raw';
12+
import VerticalTabsComponent from './examples/vertical-example';
13+
import verticalTabsCode from './examples/vertical-example?raw';
14+
import { Highlight } from './highlight';
1415
import styles from './index.css?inline';
1516

16-
import hljs from 'highlight.js/lib/core';
17-
import css from 'highlight.js/lib/languages/css';
18-
import javascript from 'highlight.js/lib/languages/javascript';
19-
import typescript from 'highlight.js/lib/languages/typescript';
20-
import xml from 'highlight.js/lib/languages/xml';
21-
import 'highlight.js/styles/atom-one-dark.css';
22-
hljs.registerLanguage('javascript', javascript);
23-
hljs.registerLanguage('typescript', typescript);
24-
hljs.registerLanguage('xml', xml);
25-
hljs.registerLanguage('css', css);
26-
27-
export const Highlight = ({
28-
code,
29-
...props
30-
}: OmitSignalClass<QwikIntrinsicElements['pre']> & { code: string }) => (
31-
<pre
32-
{...props}
33-
class={[
34-
'theme-atom-one-dark shadow-3xl tab-size relative h-full max-w-full overflow-hidden text-sm',
35-
props.class,
36-
]}
37-
>
38-
<code
39-
dangerouslySetInnerHTML={hljs.highlight(code, { language: 'typescript' }).value}
40-
/>
41-
</pre>
42-
);
43-
44-
export const Example01 = component$(() => {
45-
console.log('example1Code', example1Code);
17+
export const FirstExample = component$(() => {
4618
useStyles$(styles);
4719

4820
return (
4921
<PreviewCodeExample>
5022
<div q:slot="actualComponent" class="tabs-example">
51-
<Example1 />
23+
<FirstExampleComponent />
5224
</div>
5325

54-
<Highlight q:slot="codeExample" code={example1Code} />
26+
<Highlight q:slot="codeExample" code={firstExampleCode} />
5527
</PreviewCodeExample>
5628
);
5729
});
5830

31+
export const ShortExample = component$(() => {
32+
return (
33+
<CodeExample>
34+
<Highlight code={shortExampleCode} />
35+
</CodeExample>
36+
);
37+
});
38+
39+
export const LongExample = component$(() => {
40+
return (
41+
<CodeExample>
42+
<Highlight code={longExampleCode} />
43+
</CodeExample>
44+
);
45+
});
46+
5947
export const VerticalTabsExample = component$(() => {
6048
return (
6149
<PreviewCodeExample>
6250
<div q:slot="actualComponent" class="tabs-example mr-auto">
63-
<h3>Danish Composers</h3>
64-
65-
<Tabs vertical class="flex flex-wrap gap-5">
66-
<TabList class="flex w-fit flex-col">
67-
<Tab>Maria Ahlefeldt</Tab>
68-
<Tab>Carl Andersen</Tab>
69-
<Tab>Ida Henriette da Fonseca</Tab>
70-
</TabList>
71-
<TabPanel>
72-
<p>Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) was a ...</p>
73-
</TabPanel>
74-
<TabPanel>
75-
<p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) was a ...</p>
76-
</TabPanel>
77-
<TabPanel>
78-
<p>Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) was a ...</p>
79-
</TabPanel>
80-
</Tabs>
51+
<VerticalTabsComponent />
8152
</div>
8253

83-
<div q:slot="codeExample">
84-
<Slot />
85-
</div>
54+
<Highlight q:slot="codeExample" code={verticalTabsCode} />
8655
</PreviewCodeExample>
8756
);
8857
});
@@ -91,30 +60,9 @@ export const DisabledTabsExample = component$(() => {
9160
return (
9261
<PreviewCodeExample>
9362
<div q:slot="actualComponent" class="tabs-example mr-auto w-full">
94-
<h3>Dad jokes</h3>
95-
<Tabs>
96-
<TabList>
97-
<Tab
98-
class="aria-disabled:cursor-not-allowed"
99-
style="width: 25%"
100-
disabled={true}
101-
>
102-
Disabled Tab
103-
</Tab>
104-
<Tab style="width: 25%">Joke 2</Tab>
105-
<Tab style="width: 25%">Joke 3</Tab>
106-
<Tab style="width: 25%">Joke 4</Tab>
107-
</TabList>
108-
<TabPanel>"What did the coffee report to the police", " A mugging."</TabPanel>
109-
<TabPanel>"What's brown and sticky", " A stick."</TabPanel>
110-
<TabPanel>"How do the trees get on the internet?", "They log on."</TabPanel>
111-
<TabPanel>"What did the fish say when he hit the wall", " Dam."</TabPanel>
112-
</Tabs>
113-
</div>
114-
115-
<div q:slot="codeExample">
116-
<Slot />
63+
<DisabledTabsComponent />
11764
</div>
65+
<Highlight q:slot="codeExample" code={disabledTabsCode} />
11866
</PreviewCodeExample>
11967
);
12068
});

‎apps/website/src/routes/docs/headless/(components)/tabs/examples/automatic-behavior-example.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
3+
4+
export default component$(() => {
5+
return (
6+
<>
7+
<h3>Dad jokes</h3>
8+
<Tabs>
9+
<TabList>
10+
<Tab
11+
class="aria-disabled:cursor-not-allowed"
12+
style="width: 25%"
13+
disabled={true}
14+
>
15+
Disabled Tab
16+
</Tab>
17+
<Tab style="width: 25%">Joke 2</Tab>
18+
<Tab style="width: 25%">Joke 3</Tab>
19+
<Tab style="width: 25%">Joke 4</Tab>
20+
</TabList>
21+
<TabPanel>"What did the coffee report to the police", " A mugging."</TabPanel>
22+
<TabPanel>"What's brown and sticky", " A stick."</TabPanel>
23+
<TabPanel>"How do the trees get on the internet?", "They log on."</TabPanel>
24+
<TabPanel>"What did the fish say when he hit the wall", " Dam."</TabPanel>
25+
</Tabs>
26+
</>
27+
);
28+
});

0 commit comments

Comments
 (0)