feat(slider): adding slider components and fix file directory for aut…

packages/modal/src/index.ts

@@ -1 +1 @@
-export * from './lib/Modal';
+export * from './lib/modal';

packages/modal/src/stories/modal.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react';
-import Modal from '../lib/Modal';
+import Modal from '../lib/modal';
 import { Button } from "@bootwind/button"
 import { ModalTrigger } from '../lib/ModalTrigger';
 import { ModalContent } from '../lib/ModalContent';
@@ -20,26 +20,26 @@ export const Basic = () => {
 
     return (
         <>
-        <div className="test">
-            <Modal>
-                <ModalTrigger>
-                    <Button>Open Modal</Button>
-                </ModalTrigger>
-                <ModalContent isOpen={isOpen} onModalOpen={() => setIsOpen(true)} onModalClose={() => setIsOpen(false)}>
-                    <ModalHeader>
-                        <ModalTitle>Sign In</ModalTitle>
-                    </ModalHeader>
-                    <ModalBody>
-                        <p className='mb-5'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe mollitia a, molestiae soluta cupiditate consequuntur ullam voluptates, commodi magnam unde amet similique quae! Nostrum ducimus veniam sed labore praesentium molestias.</p>
-                        <p className='mb-5'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe mollitia a, molestiae soluta cupiditate consequuntur ullam voluptates, commodi magnam unde amet similique quae! Nostrum ducimus veniam sed labore praesentium molestias.</p>
-                        <p className='mb-5'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe mollitia a, molestiae soluta cupiditate consequuntur ullam voluptates, commodi magnam unde amet similique quae! Nostrum ducimus veniam sed labore praesentium molestias.</p>
-                    </ModalBody>
-                    <ModalFooter>
-                        <Button onClick={() => setIsOpen(false)}>Close</Button>
-                    </ModalFooter>
-                </ModalContent>
-            </Modal>
-        </div>
+            <div className="test">
+                <Modal>
+                    <ModalTrigger>
+                        <Button>Open Modal</Button>
+                    </ModalTrigger>
+                    <ModalContent isOpen={isOpen} onModalOpen={() => setIsOpen(true)} onModalClose={() => setIsOpen(false)}>
+                        <ModalHeader>
+                            <ModalTitle>Sign In</ModalTitle>
+                        </ModalHeader>
+                        <ModalBody>
+                            <p className='mb-5'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe mollitia a, molestiae soluta cupiditate consequuntur ullam voluptates, commodi magnam unde amet similique quae! Nostrum ducimus veniam sed labore praesentium molestias.</p>
+                            <p className='mb-5'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe mollitia a, molestiae soluta cupiditate consequuntur ullam voluptates, commodi magnam unde amet similique quae! Nostrum ducimus veniam sed labore praesentium molestias.</p>
+                            <p className='mb-5'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe mollitia a, molestiae soluta cupiditate consequuntur ullam voluptates, commodi magnam unde amet similique quae! Nostrum ducimus veniam sed labore praesentium molestias.</p>
+                        </ModalBody>
+                        <ModalFooter>
+                            <Button onClick={() => setIsOpen(false)}>Close</Button>
+                        </ModalFooter>
+                    </ModalContent>
+                </Modal>
+            </div>
         </>
     )
 }

packages/slider/.babelrc

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

packages/slider/.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/slider/README.md

@@ -0,0 +1,7 @@
+# slider
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test slider` to execute the unit tests via [Vitest](https://vitest.dev/).

packages/slider/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "slider",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}

packages/slider/project.json

@@ -0,0 +1,32 @@
+{
+  "name": "slider",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/slider/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["packages/slider/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/packages/slider"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    }
+  }
+}

packages/slider/src/index.ts

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

packages/slider/src/lib/slider.tsx

@@ -0,0 +1,42 @@
+import React, { ReactNode, useState } from "react";
+
+export interface SliderProps {
+  min?: number;
+  max?: number;
+  leftContent?: ReactNode;
+  rightContent?: ReactNode;
+}
+
+const Slider: React.FC<SliderProps> = ({ min = 1, max = 5, leftContent, rightContent }) => {
+  const [value, setValue] = useState((min + max) / 2);
+
+  const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(parseInt(event.target.value, 10));
+  };
+
+  return (
+    <fieldset className="flex flex-nowrap items-center max-w-xs space-x-2 text-gray-100">
+      {leftContent && (
+        <label htmlFor="Slider">
+          {leftContent}
+        </label>
+      )}
+      <input
+        id="Slider"
+        type="range"
+        value={value}
+        onChange={handleSliderChange}
+        className="w-full h-2 rounded-lg cursor-pointer accent-primary"
+        min={min}
+        max={max}
+      />
+      {rightContent && (
+        <label htmlFor="Slider">
+          {rightContent}
+        </label>
+      )}
+    </fieldset>
+  );
+};
+
+export default Slider;

packages/slider/src/stories/slider.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import Slider from '../lib/slider';
+
+export default {
+    title: 'Components/Slider',
+    component: Slider,
+};
+
+export const Basic = () => {
+    return <Slider />;
+}
+
+export const WithIcons = () => {
+    return (
+        <Slider
+            leftContent={<span className='text-sm'>🔊</span>}
+            rightContent={<span className='text-sm'>🔉</span>}
+        />
+    );
+};
+
+export const CustomRange = () => {
+    return (
+        <Slider
+            min={1}
+            max={75}
+            leftContent={<span className='text-black'>1</span>}
+            rightContent={<span className='text-black'>75</span>}
+        />
+    );
+};

packages/slider/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/slider/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/slider/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/slider',
+
+  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: 'slider',
+      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'],
+    },
+  },
+});

tsconfig.base.json

@@ -23,6 +23,7 @@
       "@bootwind/toast": ["./packages/toast/src/index.ts"],
       "@bootwind/typography": ["packages/typography/src/index.ts"],
       "@bootwind/ui": ["./packages/ui/src/index.ts"],
+      "slider": ["packages/slider/src/index.ts"],
       "table": ["packages/table/src/index.ts"],
       "tooltip": ["packages/tooltip/src/index.ts"]
     }