diff --git a/packages/modal/src/stories/modal.stories.tsx b/packages/modal/src/stories/modal.stories.tsx index 265c169..e62288a 100644 --- a/packages/modal/src/stories/modal.stories.tsx +++ b/packages/modal/src/stories/modal.stories.tsx @@ -10,9 +10,9 @@ import { ModalFooter } from '../lib/ModalFooter'; import { useState } from 'react'; export default { - title: 'Components/Modal', - component: Modal, - tags: ['autodocs'], + title: 'Components/Modal', + component: Modal, + tags: ['autodocs'], } as Meta; export const Basic = () => { diff --git a/packages/tooltip/.babelrc b/packages/tooltip/.babelrc new file mode 100644 index 0000000..1ea870e --- /dev/null +++ b/packages/tooltip/.babelrc @@ -0,0 +1,12 @@ +{ + "presets": [ + [ + "@nx/react/babel", + { + "runtime": "automatic", + "useBuiltIns": "usage" + } + ] + ], + "plugins": [] +} diff --git a/packages/tooltip/.eslintrc.json b/packages/tooltip/.eslintrc.json new file mode 100644 index 0000000..a39ac5d --- /dev/null +++ b/packages/tooltip/.eslintrc.json @@ -0,0 +1,18 @@ +{ + "extends": ["plugin:@nx/react", "../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.ts", "*.tsx"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + } + ] +} diff --git a/packages/tooltip/README.md b/packages/tooltip/README.md new file mode 100644 index 0000000..bbcb0f9 --- /dev/null +++ b/packages/tooltip/README.md @@ -0,0 +1,7 @@ +# tooltip + +This library was generated with [Nx](https://nx.dev). + +## Running unit tests + +Run `nx test tooltip` to execute the unit tests via [Vitest](https://vitest.dev/). diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json new file mode 100644 index 0000000..0b3b46b --- /dev/null +++ b/packages/tooltip/package.json @@ -0,0 +1,12 @@ +{ + "name": "tooltip", + "version": "0.0.1", + "main": "./index.js", + "types": "./index.d.ts", + "exports": { + ".": { + "import": "./index.mjs", + "require": "./index.js" + } + } +} diff --git a/packages/tooltip/project.json b/packages/tooltip/project.json new file mode 100644 index 0000000..d9e40f8 --- /dev/null +++ b/packages/tooltip/project.json @@ -0,0 +1,32 @@ +{ + "name": "tooltip", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "packages/tooltip/src", + "projectType": "library", + "tags": [], + "targets": { + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["packages/tooltip/**/*.{ts,tsx,js,jsx}"] + } + }, + "build": { + "executor": "@nx/vite:build", + "outputs": ["{options.outputPath}"], + "defaultConfiguration": "production", + "options": { + "outputPath": "dist/packages/tooltip" + }, + "configurations": { + "development": { + "mode": "development" + }, + "production": { + "mode": "production" + } + } + } + } +} diff --git a/packages/tooltip/src/index.ts b/packages/tooltip/src/index.ts new file mode 100644 index 0000000..dcd7387 --- /dev/null +++ b/packages/tooltip/src/index.ts @@ -0,0 +1 @@ +export * from './lib/tooltip'; diff --git a/packages/tooltip/src/lib/tooltip.tsx b/packages/tooltip/src/lib/tooltip.tsx new file mode 100644 index 0000000..a3a4193 --- /dev/null +++ b/packages/tooltip/src/lib/tooltip.tsx @@ -0,0 +1,48 @@ +import React, { ReactNode } from "react"; + +export interface TooltipProps { + position: "top" | "bottom" | "right" | "left"; + content: ReactNode; + children: ReactNode; + color?: "dark" | "light"; +} + +const Tooltip: React.FC = ({ children, content, position, color = "dark" }) => { + return ( +
+
+
{children}
+
+
+ +
+ {content} +
+
+
+
+
+ ); +}; + +export default Tooltip; diff --git a/packages/tooltip/src/stories/tooltip.stories.tsx b/packages/tooltip/src/stories/tooltip.stories.tsx new file mode 100644 index 0000000..0dde06b --- /dev/null +++ b/packages/tooltip/src/stories/tooltip.stories.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import Tooltip, { TooltipProps } from '../lib/tooltip'; +import { Button } from "@bootwind/button" + +export default { + title: 'Components/Tooltip', + component: Tooltip, + argTypes: { + position: { + control: { type: 'select', options: ['top', 'bottom', 'left', 'right'] }, + }, + }, +} as Meta; + +const Template: Story = (args) => ( + + + +); + +export const Top = Template.bind({}); +Top.args = { + position: 'top', + content: 'Tooltip Text', +}; + +export const Bottom = Template.bind({}); +Bottom.args = { + position: 'bottom', + content: 'This is a custom tooltip content', + color: 'light' +}; + +export const Left = Template.bind({}); +Left.args = { + position: 'left', + content: 'Tooltip Text', +}; + +export const Right = Template.bind({}); +Right.args = { + position: 'right', + content: 'Tooltip Text', +}; + +export const Light = Template.bind({}); +Light.args = { + position: 'bottom', + content: 'Light Tooltip', + color: 'light' +}; + +export const Dark = Template.bind({}); +Dark.args = { + position: 'bottom', + content: 'Dark Tooltip', + color: 'dark' +}; \ No newline at end of file diff --git a/packages/tooltip/tsconfig.json b/packages/tooltip/tsconfig.json new file mode 100644 index 0000000..6734c59 --- /dev/null +++ b/packages/tooltip/tsconfig.json @@ -0,0 +1,18 @@ +{ + "compilerOptions": { + "jsx": "react-jsx", + "allowJs": false, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "types": ["vite/client"] + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + } + ], + "extends": "../../tsconfig.base.json" +} diff --git a/packages/tooltip/tsconfig.lib.json b/packages/tooltip/tsconfig.lib.json new file mode 100644 index 0000000..8d6bbf7 --- /dev/null +++ b/packages/tooltip/tsconfig.lib.json @@ -0,0 +1,23 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "types": [ + "node", + "@nx/react/typings/cssmodule.d.ts", + "@nx/react/typings/image.d.ts", + "vite/client" + ] + }, + "exclude": [ + "**/*.spec.ts", + "**/*.test.ts", + "**/*.spec.tsx", + "**/*.test.tsx", + "**/*.spec.js", + "**/*.test.js", + "**/*.spec.jsx", + "**/*.test.jsx" + ], + "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"] +} diff --git a/packages/tooltip/vite.config.ts b/packages/tooltip/vite.config.ts new file mode 100644 index 0000000..a5ebdce --- /dev/null +++ b/packages/tooltip/vite.config.ts @@ -0,0 +1,43 @@ +/// +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import dts from 'vite-plugin-dts'; +import * as path from 'path'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; + +export default defineConfig({ + cacheDir: '../../node_modules/.vite/tooltip', + + plugins: [ + react(), + nxViteTsPaths(), + dts({ + entryRoot: 'src', + tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'), + skipDiagnostics: true, + }), + ], + + // Uncomment this if you are using workers. + // worker: { + // plugins: [ nxViteTsPaths() ], + // }, + + // Configuration for building your library. + // See: https://vitejs.dev/guide/build.html#library-mode + build: { + lib: { + // Could also be a dictionary or array of multiple entry points. + entry: 'src/index.ts', + name: 'tooltip', + fileName: 'index', + // Change this to the formats you want to support. + // Don't forget to update your package.json as well. + formats: ['es', 'cjs'], + }, + rollupOptions: { + // External packages that should not be bundled into your library. + external: ['react', 'react-dom', 'react/jsx-runtime'], + }, + }, +}); diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts index 7a8100b..4000c71 100644 --- a/packages/ui/.storybook/preview.ts +++ b/packages/ui/.storybook/preview.ts @@ -9,7 +9,7 @@ const preview: Preview = { values: [ { name: 'bootwind', - value: 'white', + value: '#F3F4F6', } ] }, diff --git a/tsconfig.base.json b/tsconfig.base.json index 2861559..cace9c6 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -17,13 +17,14 @@ "@bootwind/common": ["./packages/common/src/index.ts"], "@bootwind/core": ["packages/core/src/index.ts"], "@bootwind/forms": ["packages/forms/src/index.ts"], + "@bootwind/modal": ["packages/modal/src/index.ts"], "@bootwind/pagination": ["packages/pagination/src/index.ts"], "@bootwind/title": ["./packages/title/src/index.ts"], "@bootwind/toast": ["./packages/toast/src/index.ts"], "@bootwind/typography": ["packages/typography/src/index.ts"], "@bootwind/ui": ["./packages/ui/src/index.ts"], - "@bootwind/modal": ["packages/modal/src/index.ts"], - "table": ["packages/table/src/index.ts"] + "table": ["packages/table/src/index.ts"], + "tooltip": ["packages/tooltip/src/index.ts"] } } }