Merge pull request #149 from qwikerx/feat/create-clipboard-component

feat: creact clipboard component

Author: xmimiex

README.md

@@ -206,6 +206,11 @@ export default component$(() => {
       </td>
     </tr>
     <tr>
+      <td>
+        <a href="https://flowbite-qwik.com/docs/components/clipboard">
+          <img alt="Qwik Clipboard" src="https://flowbite.s3.amazonaws.com/github/clipboard.jpg" />
+        </a>
+      </td>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/drawer">
           <img alt="Qwik Drawer" src="https://flowbite.s3.amazonaws.com/github/drawer.jpg" />
@@ -216,13 +221,13 @@ export default component$(() => {
           <img alt="Qwik Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg" />
         </a>
       </td>
+    </tr>
+    <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/footer">
           <img alt="Qwik Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg" />
         </a>
       </td>
-    </tr>
-    <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/typography/hr">
           <img alt="Qwik HR" src="https://flowbite.s3.amazonaws.com/github/hr.jpg" />
@@ -233,13 +238,13 @@ export default component$(() => {
           <img alt="Qwik Heading" src="https://flowbite.s3.amazonaws.com/github/heading.jpg" />
         </a>
       </td>
+    </tr>
+    <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/forms/input">
           <img alt="Qwik Input" src="https://flowbite.s3.amazonaws.com/github/input-field.jpg" />
         </a>
       </td>
-    </tr>
-    <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/jumbotron">
           <img alt="Qwik Jumbotron" src="https://flowbite.s3.amazonaws.com/github/jumbotron.jpg" />
@@ -250,13 +255,13 @@ export default component$(() => {
           <img alt="Qwik Kbd" src="https://flowbite.s3.amazonaws.com/github/kbd.jpg" />
         </a>
       </td>
+    </tr>
+    <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/typography/link">
           <img alt="Qwik Link" src="https://flowbite.s3.amazonaws.com/github/link.jpg" />
         </a>
       </td>
-    </tr>
-    <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/typography/list">
           <img alt="Qwik List" src="https://flowbite.s3.amazonaws.com/github/list.jpg" />
@@ -267,13 +272,13 @@ export default component$(() => {
           <img alt="Qwik ListGroup" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg" />
         </a>
       </td>
+    </tr>
+    <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/modal">
           <img alt="Qwik Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg" />
         </a>
       </td>
-    </tr>
-    <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/navbar">
           <img alt="Qwik Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg" />
@@ -284,13 +289,13 @@ export default component$(() => {
           <img alt="Qwik Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg" />
         </a>
       </td>
+    </tr>
+    <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/forms/radio">
           <img alt="Qwik Radio" src="https://flowbite.s3.amazonaws.com/github/radio.jpg" />
         </a>
       </td>
-    </tr>
-    <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/rating">
           <img alt="Qwik Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg" />
@@ -301,13 +306,13 @@ export default component$(() => {
           <img alt="Qwik Select" src="https://flowbite.s3.amazonaws.com/github/select.jpg" />
         </a>
       </td>
+    </tr>
+    <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/sidebar">
           <img alt="Qwik Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg" />
         </a>
       </td>
-    </tr>
-    <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/spinner">
           <img alt="Qwik Spinner" src="https://flowbite.s3.amazonaws.com/github/spinner.jpg" />
@@ -318,13 +323,13 @@ export default component$(() => {
           <img alt="Qwik Table" src="https://flowbite.s3.amazonaws.com/github/tables.jpg" />
         </a>
       </td>
+    </tr>
+    <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/tabs">
           <img alt="Qwik Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg" />
         </a>
       </td>
-    </tr>
-    <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/forms/textarea">
           <img alt="Qwik Textarea" src="https://flowbite.s3.amazonaws.com/github/textarea.jpg" />
@@ -335,20 +340,19 @@ export default component$(() => {
           <img alt="Qwik ToastList" src="https://flowbite.s3.amazonaws.com/github/toast.jpg" />
         </a>
       </td>
+    </tr>
+    <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/forms/toggle">
           <img alt="Qwik Toggle" src="https://flowbite.s3.amazonaws.com/github/toggle.jpg" />
         </a>
       </td>
-    </tr>
-    <tr>
       <td>
         <a href="https://flowbite-qwik.com/docs/components/tooltip">
           <img alt="Qwik Tooltip" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg" />
         </a>
       </td>
       <td></td>
-      <td></td>
     </tr>
   </table>
 </div>

apps/web/src/components/DocumentPage/DocumentPages.tsx

@@ -13,8 +13,9 @@ export const DocumentPage = component$(() => {
   const sections = useStore<Array<string>>([])
 
   useVisibleTask$(() => {
-    const sectionsTitles = document.querySelectorAll('h2')
-    sectionsTitles.forEach((sectionTitle) => {
+    const sectionsTitles = page.value?.querySelectorAll('h2')
+
+    sectionsTitles?.forEach((sectionTitle) => {
       const slug = toSlug(sectionTitle.textContent || '')
       sections.push(sectionTitle.textContent || '')
       sectionTitle.setAttribute('id', slug)

apps/web/src/components/homepage/ComponentSection/components.ts

@@ -11,6 +11,7 @@ export const componentsNaming: Record<string, { folder: string; img: string; doc
   Card: { folder: 'components', img: 'cards', doc: 'card' },
   Carousel: { folder: 'components', img: 'carousel', doc: 'carousel' },
   Checkbox: { folder: 'forms', img: 'checkbox', doc: 'checkbox' },
+  Clipboard: { folder: 'components', img: 'clipboard', doc: 'clipboard' },
   Drawer: { folder: 'components', img: 'drawer', doc: 'drawer' },
   Dropdown: { folder: 'components', img: 'dropdown', doc: 'dropdown' },
   Footer: { folder: 'components', img: 'footer', doc: 'footer' },

apps/web/src/components/homepage/HeroSection/CopyPackageInput.tsx

@@ -1,34 +1,18 @@
-import { Input, Tooltip } from 'flowbite-qwik'
-import { $, component$, useSignal } from '@builder.io/qwik'
-import { IconClipboardCheckSolid } from 'flowbite-qwik-icons'
+import { Input, Clipboard } from 'flowbite-qwik'
+import { component$, useSignal } from '@builder.io/qwik'
 
 type CopyPackageInputProps = {
   value: string
 }
 
 export const CopyPackageInput = component$<CopyPackageInputProps>(({ value }) => {
-  const copy = useSignal('')
-  const justCopied = useSignal(false)
-
-  const copyToClipboard = $(() => {
-    justCopied.value = true
-    navigator.clipboard.writeText(value)
-    setTimeout(() => (justCopied.value = false), 2000)
-  })
+  const inputValue = useSignal('')
 
   return (
-    <Tooltip style="dark">
-      <Input
-        bind:value={copy}
-        q:slot="trigger"
-        onClick$={copyToClipboard}
-        placeholder={value}
-        readOnly
-        suffix={<IconClipboardCheckSolid />}
-        size="md"
-      />
+    <div class="w-full relative">
+      <Input placeholder={value} bind:value={inputValue} disabled readOnly class="w-full" />
 
-      <div q:slot="content">{justCopied.value ? 'Copied!' : 'Copy to clipboard'}</div>
-    </Tooltip>
+      <Clipboard.WithIcon valueToCopy={value} class="absolute end-2 top-1/2 inline-flex -translate-y-1/2" />
+    </div>
   )
 })

apps/web/src/generated-docs.ts

@@ -14,6 +14,7 @@ export const allDocs = {
     'button-group',
     'card',
     'carousel',
+    'clipboard',
     'drawer',
     'dropdown',
     'footer',

apps/web/src/generated-examples.ts

@@ -813,6 +813,34 @@ export const examples: Record<string, Example[]> = {
       height: '100',
     },
   ],
+  clipboard: [
+    {
+      title: 'Default copy to clipboard',
+      description: 'Use this example to copy the content of an input text field by clicking on a button and update the button text.',
+      url: '/examples/[theme-rtl]/clipboard/01-default',
+      content:
+        'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Clipboard, Input } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  const inputValue = useSignal(\'\')\n  return (\n    <>\n      <div class="flex gap-3 pt-8 max-w-80">\n        <Input placeholder="npm install flowbite-qwik" bind:value={inputValue} disabled readOnly class="block w-full" />\n        <Clipboard valueToCopy="npm install flowbite-react" label="Copy" class="h-full" />\n      </div>\n    </>\n  )\n})',
+      height: '200',
+    },
+    {
+      title: 'Input with copy button',
+      description:
+        'This example can be used to copy the content of an input field by clicking on a button with an icon positioned inside the form element and also show a tooltip with a message when the text has been copied.',
+      url: '/examples/[theme-rtl]/clipboard/02-with-icon',
+      content:
+        'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Clipboard, Input } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  const inputValue = useSignal(\'\')\n  return (\n    <div class="grid w-full max-w-64 pt-8">\n      <div class="relative">\n        <Input placeholder="npm install flowbite-qwik" bind:value={inputValue} disabled readOnly class="col-span-6 block w-full" />\n\n        <Clipboard.WithIcon valueToCopy="npm install flowbite-react" class="absolute end-2 top-1/2 inline-flex -translate-y-1/2" />\n      </div>\n    </div>\n  )\n})',
+      height: '200',
+    },
+    {
+      title: 'Copy button with text',
+      description:
+        'Use this example to show a copy button inside the input field with a text label and icon that updates to a success state when the text has been copied.',
+      url: '/examples/[theme-rtl]/clipboard/03-with-icon-text',
+      content:
+        'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Clipboard, Input } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  const inputValue = useSignal(\'\')\n  return (\n    <div className="grid w-full max-w-80 pt-8">\n      <div class="relative">\n        <Input placeholder="npm install flowbite-qwik" bind:value={inputValue} disabled readOnly class="col-span-6 block w-full" />\n\n        <Clipboard.WithIconText valueToCopy="npm install flowbite-react" class="absolute end-2 top-1/2 inline-flex -translate-y-1/2" />\n      </div>\n    </div>\n  )\n})',
+      height: '200',
+    },
+  ],
   drawer: [
     {
       title: 'Drawer',

apps/web/src/routes/docs/components/clipboard/index.tsx

@@ -0,0 +1,30 @@
+import { component$ } from '@builder.io/qwik'
+import { Hr } from 'flowbite-qwik'
+import { ComponentDocPage } from '~/components/ComponentDocPage/ComponentDocPage'
+
+export default component$(() => {
+  return (
+    <ComponentDocPage name="clipboard">
+      <div q:slot="description">
+        Use the clipboard component to copy text, data or lines of code to the clipboard with a single click based on various styles and examples
+        coded with Tailwind CSS and Flowbite
+        <Hr />
+        The copy to clipboard component allows you to copy text, lines of code, contact details or any other data to the clipboard with a single click
+        on a trigger element such as a button. This component can be used to copy text from an input field, textarea, code block or even address
+        fields in a form element. These components are built with Tailwind CSS and Flowbite Qwik and can be found on the internet on websites such as
+        Bitly, Cloudflare, Amazon AWS and almost all open-source projects and documentations.
+      </div>
+    </ComponentDocPage>
+  )
+})
+
+export const head = () => ({
+  title: 'Qwik Clipboard - Flowbite',
+  meta: [
+    {
+      name: 'description',
+      content:
+        'The copy to clipboard component allows you to copy text, lines of code, contact details or any other data to the clipboard with a single click on a trigger element such as a button',
+    },
+  ],
+})

apps/web/src/routes/docs/getting-started/introduction/index.tsx

@@ -20,17 +20,27 @@ export default component$(() => {
             <Link target="_blank" rel="noreferrer" href="https://github.com/qwikerx/flowbite-qwik">
               Flowbite Qwik
             </Link>{' '}
-            is a free and open-source UI component library based on the core{' '}
+            is a free and open-source UI component library based on the core Flowbite components and built with native Qwik components and
+            interactivity handling.
             <Link href="https://flowbite.com/" target="_blank" rel="noreferrer">
               Flowbite
             </Link>{' '}
             components and built with Qwik components and interactivity handling.
           </p>
+          <p>
+            This library features hundreds of interactive elements such as navbars, dropdowns, modals, and sidebars all handled by Svelte and based on
+            the utility classes from Tailwind CSS.
+          </p>
+          <Heading tag="h2">Getting started</Heading>
+          <p>
+            Learn how to get started with Flowbite Qwik by following the quickstart guide and start leveraging the interactive Qwik components coupled
+            with Flowbite and Tailwind CSS.
+          </p>
+          <Button tag={Link} href="/docs/getting-started/quickstart" size="lg">
+            Get started
+          </Button>
         </div>
       </DocumentPage>
-      <Button tag={Link} href="/docs/getting-started/quickstart" class="mt-8">
-        Quickstart
-      </Button>
     </>
   )
 })

apps/web/src/routes/examples/[theme-rtl]/clipboard/01-default/index.tsx

@@ -0,0 +1,26 @@
+/**
+ * title: Default copy to clipboard
+ * description: Use this example to copy the content of an input text field by clicking on a button and update the button text.
+ * height: 200
+ */
+
+import { component$, useSignal } from '@builder.io/qwik'
+import { staticGenerateHandler } from '~/routes/examples/layout'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+import { Clipboard, Input } from 'flowbite-qwik'
+
+export default component$(() => {
+  const inputValue = useSignal('')
+  return (
+    <>
+      <div class="flex gap-3 pt-8 max-w-80">
+        <Input placeholder="npm install flowbite-qwik" bind:value={inputValue} disabled readOnly class="block w-full" />
+        <Clipboard valueToCopy="npm install flowbite-react" label="Copy" class="h-full" />
+      </div>
+    </>
+  )
+})
+
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}

apps/web/src/routes/examples/[theme-rtl]/clipboard/02-with-icon/index.tsx

@@ -0,0 +1,26 @@
+/**
+ * title: Input with copy button
+ * description: This example can be used to copy the content of an input field by clicking on a button with an icon positioned inside the form element and also show a tooltip with a message when the text has been copied.
+ * height: 200
+ */
+
+import { component$, useSignal } from '@builder.io/qwik'
+import { staticGenerateHandler } from '~/routes/examples/layout'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+import { Clipboard, Input } from 'flowbite-qwik'
+
+export default component$(() => {
+  const inputValue = useSignal('')
+  return (
+    <div class="grid w-full max-w-64 pt-8">
+      <div class="relative">
+        <Input placeholder="npm install flowbite-qwik" bind:value={inputValue} disabled readOnly class="col-span-6 block w-full" />
+
+        <Clipboard.WithIcon valueToCopy="npm install flowbite-react" class="absolute end-2 top-1/2 inline-flex -translate-y-1/2" />
+      </div>
+    </div>
+  )
+})
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}

apps/web/src/routes/examples/[theme-rtl]/clipboard/03-with-icon-text/index.tsx

@@ -0,0 +1,26 @@
+/**
+ * title: Copy button with text
+ * description: Use this example to show a copy button inside the input field with a text label and icon that updates to a success state when the text has been copied.
+ * height: 200
+ */
+
+import { component$, useSignal } from '@builder.io/qwik'
+import { staticGenerateHandler } from '~/routes/examples/layout'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+import { Clipboard, Input } from 'flowbite-qwik'
+
+export default component$(() => {
+  const inputValue = useSignal('')
+  return (
+    <div className="grid w-full max-w-80 pt-8">
+      <div class="relative">
+        <Input placeholder="npm install flowbite-qwik" bind:value={inputValue} disabled readOnly class="col-span-6 block w-full" />
+
+        <Clipboard.WithIconText valueToCopy="npm install flowbite-react" class="absolute end-2 top-1/2 inline-flex -translate-y-1/2" />
+      </div>
+    </div>
+  )
+})
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}