From acbae00f95dc627adad54fc7d696de8d544cb2f7 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Mon, 26 Jun 2023 02:21:37 +0100 Subject: [PATCH] Fix type definitions not found --- docs/package.json | 1 + docs/pnpm-lock.yaml | 7 ++++++ .../components/examples/SimpleHighlight.tsx | 15 ++++++++++++ docs/src/content/guides/basic-usage.mdx | 8 ++++--- docs/src/content/guides/installation.mdx | 24 ++++++++++++++++--- docs/src/layouts/DocsLayout.astro | 2 +- package.json | 1 + 7 files changed, 51 insertions(+), 7 deletions(-) create mode 100644 docs/src/components/examples/SimpleHighlight.tsx diff --git a/docs/package.json b/docs/package.json index f6e866a..4124090 100644 --- a/docs/package.json +++ b/docs/package.json @@ -16,6 +16,7 @@ "@types/react": "^18.0.21", "@types/react-dom": "^18.0.6", "astro": "^2.7.0", + "driver.js": "1.1.1-next.0", "react": "^18.0.0", "react-dom": "^18.0.0", "react-fast-marquee": "^1.6.0", diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml index 57a873a..e785e94 100644 --- a/docs/pnpm-lock.yaml +++ b/docs/pnpm-lock.yaml @@ -23,6 +23,9 @@ dependencies: astro: specifier: ^2.7.0 version: 2.7.0 + driver.js: + specifier: 1.1.1-next.0 + version: 1.1.1-next.0 react: specifier: ^18.0.0 version: 18.2.0 @@ -1373,6 +1376,10 @@ packages: /dlv@1.1.3: resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} + /driver.js@1.1.1-next.0: + resolution: {integrity: sha512-hXBZzvcVsU0MlNozeQbp3S49fUuPaKTDVNQe2hKK57nQCmr5WgCE3QVi2IgDMeEI6a+z7UDpbRnCHJt+Lt/NkQ==} + dev: false + /dset@3.1.2: resolution: {integrity: sha512-g/M9sqy3oHe477Ar4voQxWtaPIFw1jTdKZuomOjhCcBx9nHUNn0pu6NopuFFrTh/TRZIKEj+76vLWFu9BNKk+Q==} engines: {node: '>=4'} diff --git a/docs/src/components/examples/SimpleHighlight.tsx b/docs/src/components/examples/SimpleHighlight.tsx new file mode 100644 index 0000000..94429b6 --- /dev/null +++ b/docs/src/components/examples/SimpleHighlight.tsx @@ -0,0 +1,15 @@ +import { useEffect } from "react"; +import type { DriveStep } from "driver.js"; + +type SimpleHighlightProps = { + popover: DriveStep.Popover; +} + +export function SimpleHighlight() { + useEffect(() => { + console.log('in browser'); + }, []); + return ( + + ); +} \ No newline at end of file diff --git a/docs/src/content/guides/basic-usage.mdx b/docs/src/content/guides/basic-usage.mdx index 76f677f..5d97d8a 100644 --- a/docs/src/content/guides/basic-usage.mdx +++ b/docs/src/content/guides/basic-usage.mdx @@ -4,8 +4,11 @@ groupTitle: "Introduction" sort: 2 --- +import { SimpleHighlight } from "../../components/examples/SimpleHighlight.tsx"; + Once installed, you can import and start using the library. Given below is a simple example of how to highlight a single element. +
```js import Driver from 'driver.js'; import 'driver.js/dist/driver.min.css'; @@ -19,6 +22,5 @@ driver.highlight({ }, }); ``` - - - \ No newline at end of file + +
\ No newline at end of file diff --git a/docs/src/content/guides/installation.mdx b/docs/src/content/guides/installation.mdx index 2f8fbee..a3e540e 100644 --- a/docs/src/content/guides/installation.mdx +++ b/docs/src/content/guides/installation.mdx @@ -4,6 +4,8 @@ groupTitle: "Introduction" sort: 1 --- +import { SimpleHighlight } from "../../components/examples/SimpleHighlight.js"; + Run one of the following commands to install the package: ```bash @@ -20,11 +22,10 @@ yarn add driver.js Alternatively, you can use CDN and include the script in your HTML file: ```html - - + + ``` - ## Start Using Once installed, you can import the package in your project. The following example shows how to highlight an element: @@ -42,4 +43,21 @@ driver.highlight({ }); ``` +### Note on CDN + +If you are using the CDN, you will have to use the package from the `window` object: + +```js +const Driver = window.driver.js.driver; + +const driver = new Driver(); +driver.highlight({ + element: "#some-element", + popover: { + title: "Title", + description: "Description" + } +}); +``` + Continue reading the [Getting Started](/docs/basic-usage) guide to learn more about the package. \ No newline at end of file diff --git a/docs/src/layouts/DocsLayout.astro b/docs/src/layouts/DocsLayout.astro index 3d52212..b2d1712 100644 --- a/docs/src/layouts/DocsLayout.astro +++ b/docs/src/layouts/DocsLayout.astro @@ -22,7 +22,7 @@ const { groupTitle, sort, title } = guide.data;
-
+
diff --git a/package.json b/package.json index 23638bb..dbcde2c 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "version": "1.1.1-next.0", "main": "./dist/driver.js.cjs", "module": "./dist/driver.js.mjs", + "types": "./dist/driver.js.d.ts", "exports": { ".": { "require": "./dist/driver.js.cjs",