woby-tooltip 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2018 Justin Rhodes
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,229 @@
1
+ # woby-tooltip
2
+
3
+ <img width="250px" src="https://media.giphy.com/media/Rd6sPjQFVHOSwe9rbW/giphy.gif" />
4
+
5
+ A **powerful** and **elegant** alternative for all your tooltips and menu needs.
6
+
7
+ - **Different Types** - For every use context: Choose between _Hoverable_, _Static_ &amp; _Alert_ tooltips.
8
+ - **Fully Customizable** - Easily change default settings via props
9
+ - **Reliable Positioning** - Align your tooltip to your
10
+ target element with ease
11
+ - Tailwind CSS
12
+ - React Hooks
13
+
14
+ Ported from [react-power-tooltip](https://justinrhodes1.github.io/react-power-tooltip/) pages to see all use cases.
15
+
16
+ ## DEMO
17
+ ```
18
+ pnpm dev
19
+ ```
20
+
21
+ ## Installation
22
+
23
+ ### NPM
24
+
25
+ ```bash
26
+ pnpm install woby-tooltip
27
+ ```
28
+
29
+ ## Usage
30
+
31
+ **Important**: Set the position of the hoverable parent component to *relative*.
32
+
33
+ ```tsx
34
+ import { $, $$, useMemo } from 'woby'
35
+ import { Tooltip } from 'woby-tooltip'
36
+
37
+ export const AlignPositions = () => {
38
+ const hover = $<string | boolean>(false)
39
+
40
+ // const hoverHandler = (side: boolean) => setHover(side)
41
+
42
+ return <div class='relative text-sm w-[250px]'>
43
+ <Tooltip
44
+ show={useMemo(() => $$(hover) === 'left')}
45
+ position="left top"
46
+ arrowAlign="center"
47
+ textboxWidth="auto"
48
+ static
49
+ >
50
+ <span>Top</span>
51
+ </Tooltip>
52
+ <Tooltip
53
+ show={useMemo(() => $$(hover) === 'left')}
54
+ position="left center"
55
+ arrowAlign="center"
56
+ textboxWidth="auto"
57
+ static
58
+ >
59
+ <span>Center</span>
60
+ </Tooltip>
61
+ <Tooltip
62
+ show={useMemo(() => $$(hover) === 'left')}
63
+ position="left bottom"
64
+ arrowAlign="center"
65
+ textboxWidth="auto"
66
+ static
67
+ >
68
+ <span>Bottom</span>
69
+ </Tooltip>
70
+ <Tooltip
71
+ show={useMemo(() => $$(hover) === 'right')}
72
+ position="right top"
73
+ arrowAlign="center"
74
+ textboxWidth="auto"
75
+ static
76
+ >
77
+ <span>Top</span>
78
+ </Tooltip>
79
+ <Tooltip
80
+ show={useMemo(() => $$(hover) === 'right')}
81
+ position="right center"
82
+ arrowAlign="center"
83
+ textboxWidth="auto"
84
+ static
85
+ >
86
+ <span>Center</span>
87
+ </Tooltip>
88
+ <Tooltip
89
+ show={useMemo(() => $$(hover) === 'right')}
90
+ position="right bottom"
91
+ arrowAlign="center"
92
+ textboxWidth="auto"
93
+ static
94
+ >
95
+ <span>Bottom</span>
96
+ </Tooltip>
97
+ <Tooltip
98
+ show={useMemo(() => $$(hover) === 'top')}
99
+ position="top left"
100
+ arrowAlign="center"
101
+ textboxWidth="auto"
102
+ static
103
+ >
104
+ <span>Left</span>
105
+ </Tooltip>
106
+ <Tooltip
107
+ show={useMemo(() => $$(hover) === 'top')}
108
+ position="top center"
109
+ arrowAlign="center"
110
+ textboxWidth="auto"
111
+ static
112
+ >
113
+ <span>Center</span>
114
+ </Tooltip>
115
+ <Tooltip
116
+ show={useMemo(() => $$(hover) === 'top')}
117
+ position="top right"
118
+ arrowAlign="center"
119
+ textboxWidth="auto"
120
+ static
121
+ >
122
+ <span>Right</span>
123
+ </Tooltip>
124
+ <Tooltip
125
+ show={useMemo(() => $$(hover) === 'bottom')}
126
+ position="bottom left"
127
+ arrowAlign="center"
128
+ textboxWidth="auto"
129
+ static
130
+ >
131
+ <span>Left</span>
132
+ </Tooltip>
133
+ <Tooltip
134
+ show={useMemo(() => $$(hover) === 'bottom')}
135
+ position="bottom center"
136
+ arrowAlign="center"
137
+ textboxWidth="auto"
138
+ static
139
+ >
140
+ <span>Center</span>
141
+ </Tooltip>
142
+ <Tooltip
143
+ show={useMemo(() => $$(hover) === 'bottom')}
144
+ position="bottom right"
145
+ arrowAlign="center"
146
+ textboxWidth="auto"
147
+ static
148
+ >
149
+ <span>Right</span>
150
+ </Tooltip>
151
+ <div class="square purpleGradient">
152
+ <div class='absolute w-full h-full flex items-center justify-center text-[15px]'>
153
+ <div class='w-[70%] flex flex-row justify-between'>
154
+ <span>Left</span>
155
+ <span>Right</span>
156
+ </div>
157
+ </div>
158
+ <div class='absolute w-full h-full flex items-center justify-center text-[15px]'>
159
+ <div class='h-[70%] flex flex-col justify-between items-center'>
160
+ <span>Top</span>
161
+ <span>Bottom</span>
162
+ </div>
163
+ </div>
164
+ <div
165
+ class="left"
166
+ onMouseEnter={() => hover('left')}
167
+ onMouseLeave={() => hover(false)}
168
+ />
169
+ <div
170
+ class="top"
171
+ onMouseEnter={() => hover('top')}
172
+ onMouseLeave={() => hover(false)}
173
+ />
174
+ <div
175
+ class="right"
176
+ onMouseEnter={() => hover('right')}
177
+ onMouseLeave={() => hover(false)}
178
+ />
179
+ <div
180
+ class="bottom"
181
+ onMouseEnter={() => hover('bottom')}
182
+ onMouseLeave={() => hover(false)}
183
+ />
184
+ </div>
185
+ </div>
186
+ }
187
+
188
+ ```
189
+ ## API
190
+
191
+ | Props | Types / Options | Default | Description |
192
+ | --------------- | --------------------------------------------------------- | ------------------- | ----------------------------------------------------------------------- |
193
+ | show | bool: false, true | false | Mount tooltip if true. |
194
+ | fontFamily | string: font family | 'inherit' | Font family of text |
195
+ | fontSize | string: px | 'inherit' | Font size of text |
196
+ | fontWeight | string | 'bold' | Font weight of text |
197
+ | color | string | 'inherit' | Font color of text |
198
+ | animation | string: fade _or_ bounce | 'fade' | Mount/Unmount anmation. Custom animations: See advanced usage examples. |
199
+ | hoverBackground | string: hex colors | '#ececec' | Background color on hover |
200
+ | hoverColor | string: hex colors | '#000000' | Font color on hover |
201
+ | backgroundColor | string: hex colors | '#ffffff' | Background color |
202
+ | alert | string: rgb colors | false | Pulse animation |
203
+ | textboxWidth | string: px _or_ auto | '150px' | Width of the text box |
204
+ | padding | string: px | '15px 20px' | Padding of text |
205
+ | borderRadius | string: px | '5px' | Radius of corners |
206
+ | zIndex | string: number | '100' | Z-index of tooltip |
207
+ | moveDown | string: px | '0px' | Downward position adjustment |
208
+ | moveRight | string: px | '0px' | Right position adjustment |
209
+ | static | boolean: false _or_ true | false | Disable hover animations |
210
+ | flat | boolean: false _or_ true | false | Disable shadows |
211
+ | lineSeparated | boolean: false _or_ true _or_ string: css border property | '1px solid #ececec' | Enable &mp; specify line separation between options |
212
+ | arrowAlign | string: 'start' _or_ 'center' _or_ 'end' | 'start' | Positions arrow relative to textbox |
213
+ | position | string: 'position1 position2' | 'right center' | Positions tooltip relative to target element |
214
+
215
+
216
+
217
+ ## Development
218
+
219
+ You're welcome to contribute to woby-power-tooltip.
220
+
221
+ To set up the project:
222
+
223
+ 1. Fork and clone the repository
224
+ 2. `$ npm install`
225
+ 3. `$ npm run dev`
226
+
227
+ ## License
228
+
229
+ MIT
package/index.html ADDED
@@ -0,0 +1,20 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
8
+ <!-- <meta name="description" content="CHANGE THIS"> -->
9
+ <title>React-power-tooltip | The ultimate tooltip library</title>
10
+ <link rel="stylesheet"
11
+ href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.2/gh-fork-ribbon.min.css" />
12
+ <script type="module" src="./src/docs/index.tsx"></script>
13
+ </head>
14
+
15
+ <body>
16
+ <div id="app"></div>
17
+ <script async defer src="https://buttons.github.io/buttons.js"></script>
18
+ </body>
19
+
20
+ </html>
package/package.json ADDED
@@ -0,0 +1,51 @@
1
+ {
2
+ "name": "woby-tooltip",
3
+ "version": "1.0.2",
4
+ "description": "A powerful tooltip and menu component library for woby.",
5
+ "main": "./dist/index.cjs.js",
6
+ "module": "./dist/index.es.js",
7
+ "browser": "./dist/index.umd.js",
8
+ "types": "./dist/types/index.d.ts",
9
+ "scripts": {
10
+ "css:watch": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
11
+ "css": "tailwindcss -i ./src/input.css -o ./dist/output.css",
12
+ "declaration": "tsc --build --force --declaration --emitDeclarationOnly --verbose",
13
+ "declaration:watch": "tsc --build --force --declaration --emitDeclarationOnly --verbose --watch",
14
+ "watch": "run-p build:watch css:watch",
15
+ "build": "run-s css build:vite css",
16
+ "build:web": "vite build --config=vite.config.web.ts --force --mode production",
17
+ "web": "vite preview --config=vite.config.web.ts --host",
18
+ "dev:only": "vite --config=vite.config.web.ts --force --mode dev --host",
19
+ "dev": "run-p css:watch dev:only",
20
+ "build:vite": "vite build",
21
+ "build:watch": "vite build --watch",
22
+ "preview": "vite preview --host",
23
+ "icon": "node ./node_modules/svg2tsx/cli/index.js"
24
+ },
25
+ "keywords": [
26
+ "tooltip",
27
+ "notification",
28
+ "menu",
29
+ "woby",
30
+ "woby-component"
31
+ ],
32
+ "license": "MIT",
33
+ "peerDependencies": {
34
+ "woby": "workspace:../woby"
35
+ },
36
+ "devDependencies": {
37
+ "concurrently": "^3.6.1",
38
+ "puppeteer": "^1.20.0",
39
+ "style-loader": "^0.21.0",
40
+ "svg2tsx": "workspace:../svg2tsx",
41
+ "tailwindcss": "^3.3.3",
42
+ "vite": "^4.4.11",
43
+ "vite-plugin-dts": "^2.3.0"
44
+ },
45
+ "author": "Chi Chong <wongchichong@gmail.com>",
46
+ "homepage": "https://github.com/wongchichong/woby-tooltip",
47
+ "repository": {
48
+ "type": "git",
49
+ "url": "git@github.com:wongchichong/woby-tooltip.git"
50
+ }
51
+ }
@@ -0,0 +1,11 @@
1
+ /** @type {import('tailwindcss').Config} */
2
+ module.exports = {
3
+ content: ["./src/**/*.{html,tsx}"],
4
+ theme: {
5
+ extend: {
6
+
7
+ },
8
+ },
9
+ plugins: [],
10
+ }
11
+
package/tsconfig.json ADDED
@@ -0,0 +1,60 @@
1
+ {
2
+ "compilerOptions": {
3
+ "allowJs": false,
4
+ "allowSyntheticDefaultImports": true,
5
+ "allowUnreachableCode": false,
6
+ "allowUnusedLabels": false,
7
+ "alwaysStrict": true,
8
+ "declaration": true,
9
+ "declarationDir": "./dist/types",
10
+ "disableSizeLimit": true,
11
+ "esModuleInterop": false,
12
+ "forceConsistentCasingInFileNames": true,
13
+ // "importsNotUsedAsValues": "error",
14
+ "inlineSourceMap": false,
15
+ "inlineSources": false,
16
+ // "isolatedModules": true,
17
+ "jsx": "react-jsx",
18
+ "jsxImportSource": "woby",
19
+ "lib": [
20
+ "dom",
21
+ "esnext",
22
+ "WebWorker"
23
+ ],
24
+ "module": "esnext",
25
+ "moduleResolution": "node",
26
+ "newLine": "lf",
27
+ "noEmitOnError": false,
28
+ "noImplicitThis": true,
29
+ "noPropertyAccessFromIndexSignature": false,
30
+ "noUnusedLocals": false,
31
+ "noUnusedParameters": false,
32
+ "outDir": "dist",
33
+ "pretty": true,
34
+ "skipDefaultLibCheck": true,
35
+ "skipLibCheck": true,
36
+ "sourceMap": false,
37
+ "strict": true,
38
+ "strictBindCallApply": true,
39
+ "strictFunctionTypes": true,
40
+ "strictNullChecks": false,
41
+ "target": "es2020",
42
+ "useDefineForClassFields": false,
43
+ "useUnknownInCatchVariables": true,
44
+ "noImplicitAny": false,
45
+ "noUncheckedIndexedAccess": false,
46
+ "baseUrl": ".",
47
+ "rootDir": "./src",
48
+ "typeRoots": [
49
+ "types",
50
+ "voby/dist/types/jsx"
51
+ ],
52
+ // "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo",
53
+ // "composite": true,
54
+ },
55
+ "exclude": [
56
+ "node_modules",
57
+ "vite.config.ts",
58
+ "dist*"
59
+ ]
60
+ }
package/vite.config.ts ADDED
@@ -0,0 +1,40 @@
1
+ import { defineConfig } from 'vite'
2
+ import path from 'path'
3
+ import dts from 'vite-plugin-dts'
4
+
5
+ const config = defineConfig({
6
+ build: {
7
+ minify: false,
8
+ lib: {
9
+ entry: ["./src/lib/index.tsx"],
10
+ name: 'woby',
11
+ formats: ['cjs', 'es', 'umd'],
12
+ fileName: (format: string, entryName: string) => `${entryName}.${format}.js`
13
+ },
14
+ sourcemap: true,
15
+ rollupOptions: {
16
+ external: ['woby', 'woby/jsx-runtime', 'oby', 'woby/jsx-runtime'],
17
+ output: {
18
+ globals: {
19
+ 'woby': 'woby',
20
+ 'woby/jsx-runtime': 'woby/jsx-runtime',
21
+ }
22
+ }
23
+ }
24
+ },
25
+ esbuild: {
26
+ jsx: 'automatic',
27
+ },
28
+ plugins: [
29
+ dts({ entryRoot: './src/lib', outputDir: './dist/types' })
30
+ ],
31
+ resolve: {
32
+ alias: {
33
+ '~': path.resolve(__dirname, 'src'),
34
+ },
35
+ },
36
+ })
37
+
38
+
39
+
40
+ export default config
@@ -0,0 +1,35 @@
1
+ import { defineConfig } from 'vite'
2
+ import path from 'path'
3
+ // import dts from 'vite-plugin-dts'
4
+
5
+ const config = defineConfig({
6
+ build: {
7
+ minify: false,
8
+ lib: {
9
+ entry: ["./index.html"],
10
+ name: "woby-power-tooltip",
11
+ formats: ['cjs', 'es', 'umd'],
12
+ fileName: (format: string, entryName: string) => `${entryName}.${format}.js`
13
+ },
14
+ outDir: './build',
15
+ sourcemap: false,
16
+ },
17
+ esbuild: {
18
+ jsx: 'automatic',
19
+ },
20
+ plugins: [
21
+ // dts({ entryRoot: './src', outputDir: './dist/types' })
22
+ ],
23
+ resolve: {
24
+ alias: {
25
+ '~': path.resolve(__dirname, 'src'),
26
+ 'woby/jsx-dev-runtime': process.argv.includes('dev') ? path.resolve('../woby/src/jsx/runtime') : 'woby/jsx-dev-runtime',
27
+ 'woby/jsx-runtime': process.argv.includes('dev') ? path.resolve('../woby/src/jsx/runtime') : 'woby/jsx-runtime',
28
+ 'woby': process.argv.includes('dev') ? path.resolve('../woby/src') : 'woby'
29
+ },
30
+ },
31
+ })
32
+
33
+
34
+
35
+ export default config