fix(everything): fix 1.3 craziness

Author: thejackshelton

.eslintrc.json

@@ -6,6 +6,7 @@
  {
  "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
  "rules": {
+ "qwik/no-use-visible-task": ["off"],
  "@nx/enforce-module-boundaries": [
  "error",
  {

apps/website/src/components/highlight/highlight.tsx

@@ -8,7 +8,7 @@ import {
 import { OmitSignalClass } from '@qwik-ui/utils';
 import { CodeCopy } from '../code-copy/code-copy';
 
-export type HighlightProps = OmitSignalClass<QwikIntrinsicElements['pre']> & {
+export type HighlightProps = OmitSignalClass<QwikIntrinsicElements['div']> & {
  code: string;
  copyCodeClass?: ClassList;
  language?: 'tsx' | 'html' | 'css';
@@ -29,6 +29,7 @@ export const Highlight = component$(
 
  useVisibleTask$(
  async function createHighlightedCode() {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const highlighter = await (window as any).shikiji;
  let modifiedCode: string = code;
 

apps/website/src/components/mdx-components/index.tsx

@@ -15,7 +15,7 @@ export const components: Record<string, any> = {
  <p
  {...props}
  class={[
- ' mb-6',
+ 'mb-6 last:mb-0',
  (props.class as Signal<string>)?.value ?? (props.class as string),
  ]}
  >
@@ -127,7 +127,7 @@ export const components: Record<string, any> = {
  }
  >(({ __rawString__, ...props }) => {
  return (
- <div class="code-example relative mx-6 max-h-[31.25rem] rounded-xl bg-slate-900 lg:mx-8">
+ <div class="code-example relative -mx-6 max-h-[31.25rem] rounded-xl bg-slate-900 lg:-mx-8">
  <CodeCopy
  class={[
  'absolute right-4 top-4 border-2 text-slate-50 hover:bg-slate-800 hover:text-slate-50',

apps/website/src/components/navigation-docs/navigation-docs.tsx

@@ -30,7 +30,7 @@ export const DocsNavigation = component$(({ linksGroups }: DocsNavigationProps)
  rounded-lg hover:bg-[var(--qwik-light-blue)] dark:hover:bg-[var(--qwik-dark-purple)]`;
  return (
  <nav
- class={`fixed inset-0 top-20 z-10 flex-col gap-4 overflow-y-auto border-r-[1px] pb-6 [grid-area:nav] lg:w-80
+ class={`bg-background fixed inset-0 top-20 z-10 flex-col gap-4 overflow-y-auto border-r-[1px] pb-6 [grid-area:nav] lg:w-80
  ${rootStore.isSidebarOpened ? 'w-100 flex' : 'hidden lg:flex'} `}
  >
  <ul class="show mt-8 flex flex-col gap-2 pl-12 lg:hidden">

apps/website/src/components/note/note.tsx

@@ -46,7 +46,7 @@ export const Note = component$<NoteProps>(({ status, ...props }) => {
  <aside
  class={`${getBackgroundByStatus(
  status ?? NoteStatus.Info,
- )} note-link relative mx-[-24px] px-5 py-4 lg:mx-[-32px] lg:px-8 lg:pt-6`}
+ )} note-link relative mx-[-24px] px-5 py-4 lg:mx-[-32px] lg:px-8 lg:py-6 `}
  >
  <div class="absolute left-[-17.5px] top-[-17.5px] hidden h-8 w-8 rounded-full bg-white dark:bg-slate-900 lg:block">
  <div class="flex h-8 w-8 items-center justify-center ">

apps/website/src/routes/docs/fluffy/(getting-started)/introduction/index.mdx

@@ -18,4 +18,4 @@ The Fluffy Kit offers a powerful solution for developers looking to create visua
 
 The Headless Kit is designed to work hand-in-hand with the Qwik framework. This means that, as a developer, you can enjoy the performance benefits and SEO advantages of Qwik while having a beautiful, consistent design out of the box. It's the perfect combination: the cutting-edge technology of Qwik, paired with the modern design aesthetics of Tailwind CSS.
 
-<image src={FluffyCreatureScreen} />;
+<image src={FluffyCreatureScreen} />

apps/website/src/routes/docs/fluffy/pagination/_index.tsx

@@ -2,7 +2,7 @@ import { component$, useSignal } from '@builder.io/qwik';
 import { Toggle } from '@qwik-ui/tailwind';
 
 export default component$(() => {
- const page = useSignal(5);
+ // const page = useSignal(5);
  const pages = useSignal(10);
 
  const showFirstButton = useSignal(true);
@@ -65,7 +65,7 @@ export default component$(() => {
  }}
  value={pages.value}
  onChange$={(e) => {
- pages.value = Number(e.target.value);
+ pages.value = Number((e.target as HTMLInputElement).value);
  }}
  />
  </label>
@@ -81,7 +81,7 @@ export default component$(() => {
  }}
  value={siblingCount.value}
  onChange$={(e) => {
- siblingCount.value = Number(e.target.value);
+ siblingCount.value = Number((e.target as HTMLInputElement).value);
  }}
  />
  </label>
@@ -97,7 +97,7 @@ export default component$(() => {
  }}
  value={boundaryCount.value}
  onChange$={(e) => {
- boundaryCount.value = Number(e.target.value);
+ boundaryCount.value = Number((e.target as HTMLInputElement).value);
  }}
  />
  </label>

apps/website/src/routes/docs/headless/checkbox/index.tsx

@@ -16,7 +16,7 @@ export default component$(() => {
  id="test"
  name="test"
  value="test"
- onChange={$(() => console.log('clicked'))}
+ onChange$={$(() => console.log('clicked'))}
  class="checkbox-secondary checkbox-margin-right"
  />
  test

apps/website/src/routes/docs/headless/pagination/examples/interactive.tsx

@@ -1,4 +1,4 @@
-import { component$, useSignal, Slot, useStylesScoped$ } from '@builder.io/qwik';
+import { component$, useSignal, useStylesScoped$ } from '@builder.io/qwik';
 import { Pagination } from '@qwik-ui/headless';
 import { Toggle } from '@qwik-ui/tailwind';
 import styles from '../index.css?inline';
@@ -51,7 +51,7 @@ export default component$(() => {
  }}
  value={totalPages.value}
  onChange$={(e) => {
- totalPages.value = Number(e.target.value);
+ totalPages.value = Number((e.target as HTMLInputElement).value);
  }}
  />
  </label>
@@ -67,7 +67,7 @@ export default component$(() => {
  }}
  value={siblingCount.value}
  onChange$={(e) => {
- siblingCount.value = Number(e.target.value);
+ siblingCount.value = Number((e.target as HTMLInputElement).value);
  }}
  />
  </label>

apps/website/src/routes/docs/headless/radio/index.tsx

@@ -22,21 +22,21 @@ export default component$(() => {
  value="first"
  checked
  onChange$={(e) => {
- radioValue.value = e.target.value;
+ radioValue.value = (e.target as HTMLInputElement).value;
  }}
  />
  <Radio
  name="two"
  value="second"
  onChange$={(e) => {
- radioValue.value = e.target.value;
+ radioValue.value = (e.target as HTMLInputElement).value;
  }}
  />
  <Radio
  name="two"
  value="third"
  onChange$={(e) => {
- radioValue.value = e.target.value;
+ radioValue.value = (e.target as HTMLInputElement).value;
  }}
  />
  </div>