react-restyle-components 0.2.4 → 0.2.6

package/lib/src/core-components/molecules/color-picker/color-picker.css

@@ -0,0 +1,22 @@
+.picker {
+  position: relative;
+}
+
+.swatch {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  border: 3px solid #fff;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.1),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+}
+
+.popover {
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0;
+  border-radius: 9px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}

package/lib/src/core-components/molecules/color-picker/color-picker.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/lib/src/core-components/molecules/color-picker/color-picker.spec.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ColorPicker } from './color-picker.component';
+test('Render Autocomplete', () => {
+    render(React.createElement(ColorPicker, { color: "#000000", onChange: () => { } }));
+    expect(screen.getByRole('input')).toBeInTheDocument();
+    expect(screen.getByRole('list')).toBeInTheDocument();
+});

package/lib/src/core-components/molecules/color-picker/color-picker.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ColorPicker } from './color-picker.component';
+declare const meta: Meta<typeof ColorPicker>;
+export default meta;
+type Story = StoryObj<typeof ColorPicker>;
+export declare const Primary: Story;

package/lib/src/core-components/molecules/color-picker/color-picker.stories.js

@@ -0,0 +1,18 @@
+import { ColorPicker } from './color-picker.component';
+const meta = {
+    title: 'Design System/Molecules/ColorPicker',
+    component: ColorPicker,
+    tags: ['autodocs'],
+    parameters: {
+        componentSubtitle: `import { ColorPicker } from 'react-restyle-components'`,
+    },
+};
+export default meta;
+export const Primary = {
+    args: {
+        color: '#000000',
+        onChange: (color) => {
+            console.log({ color });
+        },
+    },
+};

package/lib/src/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './outside.hook';

package/lib/src/hooks/index.js

@@ -0,0 +1 @@
+export * from './outside.hook';

package/lib/src/hooks/outside.hook.d.ts

@@ -0,0 +1 @@
+export declare const useClickOutside: (ref: any, handler: any) => void;

package/lib/src/hooks/outside.hook.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+export const useClickOutside = (ref, handler) => {
+    useEffect(() => {
+        let startedInside = false;
+        let startedWhenMounted = false;
+        const listener = (event) => {
+            // Do nothing if `mousedown` or `touchstart` started inside ref element
+            if (startedInside || !startedWhenMounted)
+                return;
+            // Do nothing if clicking ref's element or descendent elements
+            if (!ref.current || ref.current.contains(event.target))
+                return;
+            handler(event);
+        };
+        const validateEventStart = (event) => {
+            startedWhenMounted = ref.current;
+            startedInside = ref.current && ref.current.contains(event.target);
+        };
+        document.addEventListener('mousedown', validateEventStart);
+        document.addEventListener('touchstart', validateEventStart);
+        document.addEventListener('click', listener);
+        return () => {
+            document.removeEventListener('mousedown', validateEventStart);
+            document.removeEventListener('touchstart', validateEventStart);
+            document.removeEventListener('click', listener);
+        };
+    }, [ref, handler]);
+};

package/lib/src/index.css

@@ -4,24 +4,24 @@
 
 @layer base {
   @font-face {
-    font-family: 'Arima Regular';
-    src: url('./library/assets/fonts/arima/Arima-Regular.ttf');
+    font-family: "Arima Regular";
+    src: url("./library/assets/fonts/arima/Arima-Regular.ttf");
   }
   @font-face {
-    font-family: 'NunitoSans Regular';
-    src: url('./library/assets/fonts/nunito-sans/NunitoSans-Regular.ttf');
+    font-family: "NunitoSans Regular";
+    src: url("./library/assets/fonts/nunito-sans/NunitoSans-Regular.ttf");
   }
   @font-face {
-    font-family: 'NunitoSans Bold';
-    src: url('./library/assets/fonts/nunito-sans/NunitoSans-Bold.ttf');
+    font-family: "NunitoSans Bold";
+    src: url("./library/assets/fonts/nunito-sans/NunitoSans-Bold.ttf");
   }
   @font-face {
-    font-family: 'DancingScript-Bold';
-    src: url('./library/assets/fonts/dancing-script/DancingScript-Bold.ttf');
+    font-family: "DancingScript-Bold";
+    src: url("./library/assets/fonts/dancing-script/DancingScript-Bold.ttf");
   }
   @font-face {
-    font-family: 'DancingScript-Regular';
-    src: url('./library/assets/fonts/dancing-script/DancingScript-Regular.ttf');
+    font-family: "DancingScript-Regular";
+    src: url("./library/assets/fonts/dancing-script/DancingScript-Regular.ttf");
   }
 }
 
@@ -49,7 +49,7 @@
 
 body {
   font-size: 14px;
-  font-family: 'Arima Regular';
+  font-family: "Arima Regular";
 }
 
 .ps__rail-y {
@@ -68,7 +68,7 @@ body {
 }
 
 .bg-orange1 {
-  background-color: '#EF4444';
+  background-color: "#EF4444";
 }
 
 .react-pdf__Page__canvas {