Merge pull request #12 from bootwindproject/feat/tooltip

feat(tooltip): adding color props to bootwind and finalizing the tool…

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 = () => {

packages/tooltip/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

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": {}
+    }
+  ]
+}

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/).

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"
+    }
+  }
+}

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"
+        }
+      }
+    }
+  }
+}

packages/tooltip/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/tooltip';

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<TooltipProps> = ({ children, content, position, color = "dark" }) => {
+  return (
+    <div className="mb-14">
+      <div className="group relative inline-block">
+        <div className="inline-flex">{children}</div>
+        <div className="shadow-md">
+          <div
+            className={` ${(position === "right" &&
+              `absolute left-full top-1/2 z-20 ml-3 -translate-y-1/2 whitespace-nowrap rounded ${color === 'dark' ? 'bg-black' : 'bg-white'} px-4 py-[6px] text-sm font-semibold text-${color === 'dark' ? 'white' : 'black'} opacity-0 group-hover:opacity-100`) ||
+              (position === "top" &&
+                `absolute bottom-full left-1/2 z-20 mb-3 -translate-x-1/2 whitespace-nowrap rounded ${color === 'dark' ? 'bg-black' : 'bg-white'} px-4 py-[6px] text-sm font-semibold text-${color === 'dark' ? 'white' : 'black'} opacity-0 group-hover:opacity-100`) ||
+              (position === "left" &&
+                `absolute right-full top-1/2 z-20 mr-3 -translate-y-1/2 whitespace-nowrap rounded ${color === 'dark' ? 'bg-black' : 'bg-white'} px-4 py-[6px] text-sm font-semibold text-${color === 'dark' ? 'white' : 'black'} opacity-0 group-hover:opacity-100`) ||
+              (position === "bottom" &&
+                `absolute left-1/2 top-full z-20 mt-3 -translate-x-1/2 whitespace-nowrap rounded ${color === 'dark' ? 'bg-black' : 'bg-white'} px-4 py-[6px] text-sm font-semibold text-${color === 'dark' ? 'white' : 'black'} opacity-0 group-hover:opacity-100`)
+              }`}
+          >
+            <span
+              className={` ${(position === "right" &&
+                `absolute left-[-3px] top-1/2 -z-10 h-2 w-2 -translate-y-1/2 rotate-45 rounded-sm ${color === 'dark' ? 'bg-black' : 'bg-white'}`) ||
+                (position === "top" &&
+                  `absolute bottom-[-3px] left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm ${color === 'dark' ? 'bg-black' : 'bg-white'}`) ||
+                (position === "left" &&
+                  `absolute right-[-3px] top-1/2 -z-10 h-2 w-2 -translate-y-1/2 rotate-45 rounded-sm ${color === 'dark' ? 'bg-black' : 'bg-white'}`) ||
+                (position === "bottom" &&
+                  `absolute left-1/2 top-[-3px] -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm ${color === 'dark' ? 'bg-black' : 'bg-white'}`)
+                } `}
+            ></span>
+            <div className={`w-40 whitespace-normal text-center`}>
+              {content}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Tooltip;

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<TooltipProps> = (args) => (
+    <Tooltip {...args}>
+        <Button>Hover me to see the tooltip</Button>
+    </Tooltip>
+);
+
+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'
+};

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"
+}

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"]
+}

packages/tooltip/vite.config.ts

@@ -0,0 +1,43 @@
+/// <reference types='vitest' />
+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'],
+    },
+  },
+});

packages/ui/.storybook/preview.ts

@@ -9,7 +9,7 @@ const preview: Preview = {
       values: [
         {
           name: 'bootwind',
-          value: 'white',
+          value: '#F3F4F6',
         }
       ]
     },

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"]
     }
   }
 }