Merge pull request #741 from maiieul/replace-styled-imports-to->/components/ui

styled kit to dot notation

Author: maiieul

apps/website/src/components/code-copy/code-copy.tsx

@@ -1,5 +1,5 @@
 import { PropsOf, component$, useSignal } from '@builder.io/qwik';
-import { Button } from '@qwik-ui/styled';
+import { Button } from '~/components/ui';
 import { cn } from '@qwik-ui/utils';
 import copy from 'clipboard-copy';
 

apps/website/src/components/component-status-badge/component-status-badge.tsx

@@ -1,5 +1,5 @@
 import { component$ } from '@builder.io/qwik';
-import { Badge } from '@qwik-ui/styled';
+import { Badge } from '~/components/ui';
 import { ComponentStatus } from '~/_state/component-status.type';
 
 export interface StatusBadgeProps {

apps/website/src/components/copy-css-config/copy-css-config.tsx

@@ -1,6 +1,6 @@
 import { component$, useSignal } from '@builder.io/qwik';
 import { Modal } from '@qwik-ui/headless';
-import { Button } from '@qwik-ui/styled';
+import { Button } from '~/components/ui';
 import { extractThemeCSS } from '@qwik-ui/utils';
 import { LuX } from '@qwikest/icons/lucide';
 import { useTheme } from 'qwik-themes';

apps/website/src/components/make-it-yours/make-it-yours.tsx

@@ -7,7 +7,7 @@ import {
   useStyles$,
 } from '@builder.io/qwik';
 import { Modal } from '@qwik-ui/headless';
-import { Button } from '@qwik-ui/styled';
+import { Button } from '~/components/ui';
 import {
   ThemeBaseColor,
   ThemeBorderRadius,
@@ -141,7 +141,7 @@ export default component$<PropsOf<typeof Button>>(() => {
           showSig.value = true;
         }}
       >
-        <LuSlidersHorizontal class={cn('h-4 w-4 sm:mr-3')} />
+        <LuSlidersHorizontal class={cn('h-4 w-4 sm:mr-2')} />
         <span class={cn('hidden', 'sm:block')}>Make it yours</span>
       </Button>
       <Modal.Panel class="make-it-yours fixed bottom-[50%] right-0  top-[50%] mr-0 h-screen max-w-sm rounded-l-base border-y border-l bg-background px-4 py-8 text-foreground shadow-md sm:w-full">

apps/website/src/components/status-banner/status-banner.tsx

@@ -1,5 +1,5 @@
 import { component$, useSignal, useStylesScoped$ } from '@builder.io/qwik';
-import { Badge } from '@qwik-ui/styled';
+import { Badge } from '~/components/ui';
 import { cn } from '@qwik-ui/utils';
 import { ComponentStatus } from '~/_state/component-status.type';
 import { getVariantByStatus } from '../component-status-badge/component-status-badge';

apps/website/src/components/ui/index.ts

@@ -0,0 +1 @@
+export * from '@qwik-ui/styled';

apps/website/src/routes/docs/headless/introduction/index.mdx

@@ -3,12 +3,7 @@ title: Qwik UI | Introduction
 ---
 
 import headlessHero from '/public/images/qwik-ui-headless-hero.webp';
-import {
-  AccordionRoot,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-} from '@qwik-ui/styled';
+import { Accordion } from '@qwik-ui/styled';
 
 # Headless kit
 
@@ -91,41 +86,41 @@ One of the benefits of Qwik is its ability to create performant applications wit
 
 ## FAQ
 
-<AccordionRoot>
-  <AccordionItem>
-    <AccordionTrigger>
+<Accordion.Root>
+  <Accordion.Item>
+    <Accordion.Trigger>
       What kind of support or resources are available if I encounter issues with Qwik UI?
-    </AccordionTrigger>
-    <AccordionContent>
+    </Accordion.Trigger>
+    <Accordion.Content>
       If you stumble into any problems, [create an
       issue](https://github.com/qwikifiers/qwik-ui/issues) on the Qwik UI repository. We
       also have a [discord community](https://discord.gg/PVWUUejrez) with a Qwik UI
       channel where you can raise any concerns, propose ideas, or chat all things Qwik UI
       😊
-    </AccordionContent>
-  </AccordionItem>
-  <AccordionItem>
-    <AccordionTrigger>How can I contribute to the project?</AccordionTrigger>
-    <AccordionContent>
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item>
+    <Accordion.Trigger>How can I contribute to the project?</Accordion.Trigger>
+    <Accordion.Content>
       We provide a [contributing](/docs/headless/contributing) guide to help get familiar
       with the repository. Additionally, we offer a quick start [setup
       guide](https://github.com/qwikifiers/qwik-ui/blob/main/CONTRIBUTING.md) and a
       section dedicated to advanced resources below the Components navigation.
-    </AccordionContent>
-  </AccordionItem>
-  <AccordionItem>
-    <AccordionTrigger>
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item>
+    <Accordion.Trigger>
       How can I migrate my existing application to use Qwik UI?
-    </AccordionTrigger>
-    <AccordionContent>
+    </Accordion.Trigger>
+    <Accordion.Content>
       If you're using `Qwik-React`, `Qwik-Angular`, `@qwikdev/astro`, we suggest
       incrementally adding Qwik UI components to your application. Qwik, built as a
       microfrontend, allows you to incrementally integrate Qwik UI components into your
       existing application. This approach reduces migration risk and complexity, letting
       you leverage Qwik UI's benefits at your own pace.
-    </AccordionContent>
-  </AccordionItem>
-</AccordionRoot>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
 
 ## Credits
 

apps/website/src/routes/docs/styled/accordion/examples/hero.tsx

@@ -1,33 +1,28 @@
 import { component$ } from '@builder.io/qwik';
-import {
-  AccordionRoot,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@qwik-ui/styled';
+import { Accordion } from '~/components/ui';
 
 export default component$(() => {
   return (
-    <AccordionRoot behavior="single" collapsible class="w-full">
-      <AccordionItem id="item-1">
-        <AccordionTrigger>Is it accessible?</AccordionTrigger>
-        <AccordionContent>
+    <Accordion.Root behavior="single" collapsible class="w-full">
+      <Accordion.Item id="item-1">
+        <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
+        <Accordion.Content>
           Yes. It adheres to the WAI-ARIA design pattern.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem id="item-2">
-        <AccordionTrigger>Is it styled?</AccordionTrigger>
-        <AccordionContent>
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item id="item-2">
+        <Accordion.Trigger>Is it styled?</Accordion.Trigger>
+        <Accordion.Content>
           Yes. It comes with default styles that matches the other components&apos;
           aesthetic.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem id="item-3">
-        <AccordionTrigger>Is it animated?</AccordionTrigger>
-        <AccordionContent>
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item id="item-3">
+        <Accordion.Trigger>Is it animated?</Accordion.Trigger>
+        <Accordion.Content>
           Yes. It's animated by default, but you can disable it if you prefer.
-        </AccordionContent>
-      </AccordionItem>
-    </AccordionRoot>
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion.Root>
   );
 });

apps/website/src/routes/docs/styled/accordion/index.mdx

@@ -23,33 +23,33 @@ qwik-ui add accordion
 ```tsx
 import { component$, Slot, PropsOf } from '@builder.io/qwik';
 
-import { Accordion } from '@qwik-ui/headless';
+import { Accordion as HeadlessAccordion } from '@qwik-ui/headless';
 import { cn } from '@qwik-ui/utils';
 
 import { LuChevronDown } from '@qwikest/icons/lucide';
 
-export const AccordionRoot = component$<PropsOf<typeof Accordion.Root>>((props) => (
-  <Accordion.Root animated {...props}>
+const Root = component$<PropsOf<typeof HeadlessAccordion.Root>>((props) => (
+  <HeadlessAccordion.Root animated {...props}>
     <Slot />
-  </Accordion.Root>
+  </HeadlessAccordion.Root>
 ));
 
-export const AccordionItem = component$<PropsOf<typeof Accordion.Item>>((props) => {
+const Item = component$<PropsOf<typeof HeadlessAccordion.Item>>((props) => {
   return (
-    <Accordion.Item {...props} class={cn('border-b', props.class)}>
+    <HeadlessAccordion.Item {...props} class={cn('border-b', props.class)}>
       <Slot />
-    </Accordion.Item>
+    </HeadlessAccordion.Item>
   );
 });
 
-export const AccordionTrigger = component$<
-  PropsOf<typeof Accordion.Trigger> & {
-    header?: PropsOf<typeof Accordion.Header>['as'];
+const Trigger = component$<
+  PropsOf<typeof HeadlessAccordion.Trigger> & {
+    header?: PropsOf<typeof HeadlessAccordion.Header>['as'];
   }
 >(({ header = 'h3', ...props }) => {
   return (
-    <Accordion.Header as={header} class="flex">
-      <Accordion.Trigger
+    <HeadlessAccordion.Header as={header} class="flex">
+      <HeadlessAccordion.Trigger
         {...props}
         class={cn(
           'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
@@ -58,14 +58,14 @@ export const AccordionTrigger = component$<
       >
         <Slot />
         <LuChevronDown class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
-      </Accordion.Trigger>
-    </Accordion.Header>
+      </HeadlessAccordion.Trigger>
+    </HeadlessAccordion.Header>
   );
 });
 
-export const AccordionContent = component$<PropsOf<typeof Accordion.Content>>((props) => {
+const Content = component$<PropsOf<typeof HeadlessAccordion.Content>>((props) => {
   return (
-    <Accordion.Content
+    <HeadlessAccordion.Content
       {...props}
       class={cn(
         'overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
@@ -75,9 +75,16 @@ export const AccordionContent = component$<PropsOf<typeof Accordion.Content>>((p
       <div class="pb-4 pt-0">
         <Slot />
       </div>
-    </Accordion.Content>
+    </HeadlessAccordion.Content>
   );
 });
+
+export const Accordion = {
+  Root,
+  Item,
+  Trigger,
+  Content,
+};
 ```
 
 ### 2. Update your 'tailwind.config.cjs'
@@ -101,19 +108,14 @@ module.exports = {
 ## Usage
 
 ```tsx
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@/components/ui/accordion';
+import { Accordion } from '~/components/ui';
 ```
 
 ```tsx
-<Accordion behavior="single" collapsible class="w-full">
-  <AccordionItem id="item-1">
-    <AccordionTrigger>Is it accessible?</AccordionTrigger>
-    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
-  </AccordionItem>
-</Accordion>
+<Accordion.Root behavior="single" collapsible class="w-full">
+  <Accordion.Item id="item-1">
+    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
+    <Accordion.Content>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
 ```

apps/website/src/routes/docs/styled/alert/examples/alert.tsx

@@ -1,13 +1,15 @@
 import { component$ } from '@builder.io/qwik';
-import { Alert, AlertDescription, AlertTitle } from '@qwik-ui/styled';
+import { Alert } from '~/components/ui';
 import { LuAlertTriangle } from '@qwikest/icons/lucide';
 
 export default component$(() => {
   return (
-    <Alert look="alert">
+    <Alert.Root look="alert">
       <LuAlertTriangle class="h-4 w-4" />
-      <AlertTitle>Error</AlertTitle>
-      <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
-    </Alert>
+      <Alert.Title>Error</Alert.Title>
+      <Alert.Description>
+        Your session has expired. Please log in again.
+      </Alert.Description>
+    </Alert.Root>
   );
 });

apps/website/src/routes/docs/styled/alert/examples/hero.tsx

@@ -1,16 +1,15 @@
 import { component$ } from '@builder.io/qwik';
 import { LuRocket } from '@qwikest/icons/lucide';
 
-import { Alert, AlertDescription, AlertTitle } from '@qwik-ui/styled';
-
+import { Alert } from '~/components/ui';
 export default component$(() => {
   return (
-    <Alert>
+    <Alert.Root>
       <LuRocket class="h-4 w-4" />
-      <AlertTitle>Heads up!</AlertTitle>
-      <AlertDescription>
+      <Alert.Title>Heads up!</Alert.Title>
+      <Alert.Description>
         You can add components to your app using the cli.
-      </AlertDescription>
-    </Alert>
+      </Alert.Description>
+    </Alert.Root>
   );
 });

apps/website/src/routes/docs/styled/alert/examples/primary.tsx

@@ -1,13 +1,15 @@
 import { component$ } from '@builder.io/qwik';
-import { Alert, AlertDescription, AlertTitle } from '@qwik-ui/styled';
+import { Alert } from '~/components/ui';
 import { LuAlertTriangle } from '@qwikest/icons/lucide';
 
 export default component$(() => {
   return (
-    <Alert look="primary">
+    <Alert.Root look="primary">
       <LuAlertTriangle class="h-4 w-4" />
-      <AlertTitle>Error</AlertTitle>
-      <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
-    </Alert>
+      <Alert.Title>Error</Alert.Title>
+      <Alert.Description>
+        Your session has expired. Please log in again.
+      </Alert.Description>
+    </Alert.Root>
   );
 });