pentatrion-design 0.0.7 → 0.0.9

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.0.9
+
+modal add ComponentProps to parent
+modal fix forwardRef to functional component
+
+## 0.0.8
+
+Range fix ComponentPropsWithRef import
+tsconfig remove extends from base
+
 ## 0.0.3
 
 Range add component

package/components/input/Range.tsx

@@ -1,5 +1,4 @@
-import { ComponentPropsWithRef } from "@react-spring/web";
-import { forwardRef, useMemo } from "react";
+import { forwardRef, useMemo, ComponentPropsWithRef } from "react";
 
 import clsx from "clsx";
 import { ThemeColor } from "../../types.d";

package/components/modal/Modal.stories.tsx

@@ -2,7 +2,14 @@ import { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import { Button } from "../button";
 
-import { Modal, ModalTrigger, ModalContent, ModalDescription, ModalHeader, ModalFooter } from ".";
+import {
+  Modal,
+  ModalTrigger,
+  ModalContent,
+  ModalDescription,
+  ModalHeader,
+  ModalFooter,
+} from ".";
 
 const meta = {
   title: "Components/Modal",
@@ -31,6 +38,30 @@ export const Basic: Story = {
   },
 };
 
+export const BasicLongText: Story = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: ({ children, ...args }) => {
+    return (
+      <Modal {...args}>
+        <ModalTrigger>open Modal</ModalTrigger>
+        <ModalContent>
+          <ModalHeader>Header</ModalHeader>
+          <ModalDescription>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Exercitationem voluptates amet ad recusandae a. Laudantium, aliquam!
+            Perferendis reiciendis aliquid ut repudiandae, repellat tenetur
+            harum! Ad dicta nostrum laboriosam consectetur ratione.
+          </ModalDescription>
+        </ModalContent>
+      </Modal>
+    );
+  },
+  args: {
+    initialOpen: false,
+    color: "default",
+  },
+};
+
 export const Context = () => {
   const [isOpen, setIsOpen] = useState(false);
   return (
@@ -47,7 +78,11 @@ export const Context = () => {
         <ModalDescription>Content</ModalDescription>
         <ModalFooter>
           <div className="flex justify-between">
-            <Button variant="text" color="gray" onClick={() => setIsOpen(false)}>
+            <Button
+              variant="text"
+              color="gray"
+              onClick={() => setIsOpen(false)}
+            >
               Cancel
             </Button>
             <Button color="yellow" onClick={() => setIsOpen(false)}>
@@ -76,30 +111,38 @@ export const ScrollableModal = () => {
         <ModalDescription height={160}>
           <div className="px-4 text-justify">
             <p>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
-              rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
-              Deleniti iure amet qui vero, blanditiis quos?
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Praesentium unde, blanditiis rem accusamus obcaecati enim amet,
+              voluptatibus nemo facilis illum aut itaque in? Deleniti iure amet
+              qui vero, blanditiis quos?
             </p>
             <p>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
-              rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
-              Deleniti iure amet qui vero, blanditiis quos?
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Praesentium unde, blanditiis rem accusamus obcaecati enim amet,
+              voluptatibus nemo facilis illum aut itaque in? Deleniti iure amet
+              qui vero, blanditiis quos?
             </p>
             <p>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
-              rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
-              Deleniti iure amet qui vero, blanditiis quos?
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Praesentium unde, blanditiis rem accusamus obcaecati enim amet,
+              voluptatibus nemo facilis illum aut itaque in? Deleniti iure amet
+              qui vero, blanditiis quos?
             </p>
             <p>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium unde, blanditiis
-              rem accusamus obcaecati enim amet, voluptatibus nemo facilis illum aut itaque in?
-              Deleniti iure amet qui vero, blanditiis quos?
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Praesentium unde, blanditiis rem accusamus obcaecati enim amet,
+              voluptatibus nemo facilis illum aut itaque in? Deleniti iure amet
+              qui vero, blanditiis quos?
             </p>
           </div>
         </ModalDescription>
         <ModalFooter>
           <div className="flex justify-between">
-            <Button variant="text" color="gray" onClick={() => setIsOpen(false)}>
+            <Button
+              variant="text"
+              color="gray"
+              onClick={() => setIsOpen(false)}
+            >
               Cancel
             </Button>
             <Button color="yellow" onClick={() => setIsOpen(false)}>

package/components/modal/ModalContent.tsx

@@ -10,7 +10,7 @@ import clsx from "clsx";
 import { Dialog } from "../dialog";
 
 export const ModalContent = forwardRef<HTMLDivElement, ComponentProps<"div">>(
-  ({ style, children, ...props }, propRef) => {
+  ({ style, className, children, ...props }, propRef) => {
     const context = useModalContext();
     const floatingContext = context.context;
 
@@ -31,17 +31,17 @@ export const ModalContent = forwardRef<HTMLDivElement, ComponentProps<"div">>(
           <FloatingFocusManager context={floatingContext}>
             <Dialog
               className={clsx(
-                "w-96 max-w-full",
+                "mx-4 min-w-96 max-w-full",
                 `border-${context.color}-2`,
                 "motion-safe:animate-fade-in",
+                className,
               )}
-              ref={ref}
+              style={style}
               aria-labelledby={context.labelId}
               aria-describedby={context.descriptionId}
-              style={style}
               {...context.getFloatingProps(props)}
             >
-              {children}
+              <div ref={ref}>{children}</div>
             </Dialog>
           </FloatingFocusManager>
         </FloatingOverlay>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pentatrion-design",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "",
   "keywords": [],
   "author": "Hugues Tavernier",

package/tsconfig.json

@@ -1,11 +1,42 @@
 {
-  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "declaration": true,
+    /**
+     * Base
+     */
+
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
     "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /**
+     * Package specific
+     */
+    "declaration": true,
     "types": ["react/experimental", "@testing-library/jest-dom"],
     "baseUrl": "."
   },
   "exclude": ["**/node_modules", "./dist"],
-  "include": ["components", "hooks", "lib", "redux", "styles", "*.ts", ".storybook"]
+  "include": [
+    "components",
+    "hooks",
+    "lib",
+    "redux",
+    "styles",
+    "*.ts",
+    ".storybook"
+  ]
 }