pixel-react 1.8.0 → 1.8.1

package/src/components/Form/Form.ts

@@ -1,2 +1,2 @@
-import * as Form from 'react-hook-form';
-export default Form;
+import * as Form from 'react-hook-form';
+export default Form;

package/src/components/Form/Forms.tsx

@@ -1,39 +1,39 @@
-import React, { forwardRef, useImperativeHandle } from 'react';
-import Form from './Form';
-interface FormProps<T extends Form.FieldValues> extends Form.UseFormProps<T> {
-  id?: string;
-  onSubmit: Form.SubmitHandler<T>;
-  children: (
-    methods: ReturnType<typeof Form.useForm<T>> & {
-      Form: typeof Form;
-    }
-  ) => React.ReactNode;
-}
-
-const Forms = <T extends Form.FieldValues>(
-  { onSubmit, children, id, ...rest }: FormProps<T>,
-  ref: React.Ref<any>
-) => {
-  const methods = Form.useForm<T>(rest);
-  const { handleSubmit } = methods;
-  const extendedMethods = {
-    ...methods,
-    Form: Form,
-  };
-  useImperativeHandle(ref, () => ({
-    submit: handleSubmit(onSubmit),
-    ...extendedMethods,
-  }));
-
-  return (
-    <form id={id} onSubmit={handleSubmit(onSubmit)}>
-      {children(extendedMethods)}
-    </form>
-  );
-};
-
-const ForwardedForms = forwardRef(Forms) as <T extends Form.FieldValues>(
-  props: FormProps<T> & { ref?: React.Ref<any> }
-) => JSX.Element;
-
-export default ForwardedForms;
+import React, { forwardRef, useImperativeHandle } from 'react';
+import Form from './Form';
+interface FormProps<T extends Form.FieldValues> extends Form.UseFormProps<T> {
+  id?: string;
+  onSubmit: Form.SubmitHandler<T>;
+  children: (
+    methods: ReturnType<typeof Form.useForm<T>> & {
+      Form: typeof Form;
+    }
+  ) => React.ReactNode;
+}
+
+const Forms = <T extends Form.FieldValues>(
+  { onSubmit, children, id, ...rest }: FormProps<T>,
+  ref: React.Ref<any>
+) => {
+  const methods = Form.useForm<T>(rest);
+  const { handleSubmit } = methods;
+  const extendedMethods = {
+    ...methods,
+    Form: Form,
+  };
+  useImperativeHandle(ref, () => ({
+    submit: handleSubmit(onSubmit),
+    ...extendedMethods,
+  }));
+
+  return (
+    <form id={id} onSubmit={handleSubmit(onSubmit)}>
+      {children(extendedMethods)}
+    </form>
+  );
+};
+
+const ForwardedForms = forwardRef(Forms) as <T extends Form.FieldValues>(
+  props: FormProps<T> & { ref?: React.Ref<any> }
+) => JSX.Element;
+
+export default ForwardedForms;

package/src/components/Form/validation.json

@@ -1,29 +1,29 @@
-{
-  "username": {
-    "required": "Username is required",
-    "minLength": {
-      "value": 3,
-      "message": "Username must be at least 3 characters"
-    }
-  },
-  "email": {
-    "required": "Email is required",
-    "pattern": {
-      "value": "^\\S+@\\S+\\.\\S+$",
-      "message": "Please enter a valid email"
-    }
-  },
-  "password": {
-    "required": "Password is required",
-    "minLength": {
-      "value": 6,
-      "message": "Password must be at least 6 characters"
-    }
-  },
-  "gender": {
-    "required": "Gender is required"
-  },
-  "language": {
-    "required": "Language is required"
-  }
-}
+{
+  "username": {
+    "required": "Username is required",
+    "minLength": {
+      "value": 3,
+      "message": "Username must be at least 3 characters"
+    }
+  },
+  "email": {
+    "required": "Email is required",
+    "pattern": {
+      "value": "^\\S+@\\S+\\.\\S+$",
+      "message": "Please enter a valid email"
+    }
+  },
+  "password": {
+    "required": "Password is required",
+    "minLength": {
+      "value": 6,
+      "message": "Password must be at least 6 characters"
+    }
+  },
+  "gender": {
+    "required": "Gender is required"
+  },
+  "language": {
+    "required": "Language is required"
+  }
+}

package/src/components/GridLayout/GridLayout.scss

@@ -1,69 +1,69 @@
-/* Container */
-.ff-container {
-  margin-right: auto;
-  margin-left: auto;
-  width: 90%;
-  display: grid;
-}
-
-.ff-container-fluid {
-  width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  display: grid;
-}
-
-/* Row */
-.ff-row {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-}
-
-/* Column sizes based on a 12-column layout */
-.ff-col {
-  grid-column: span 12;
-}
-
-.ff-col-1 {
-  grid-column: span 1;
-}
-.ff-col-2 {
-  grid-column: span 2;
-}
-.ff-col-3 {
-  grid-column: span 3;
-}
-.ff-col-4 {
-  grid-column: span 4;
-}
-.ff-col-5 {
-  grid-column: span 5;
-}
-.ff-col-6 {
-  grid-column: span 6;
-}
-.ff-col-7 {
-  grid-column: span 7;
-}
-.ff-col-8 {
-  grid-column: span 8;
-}
-.ff-col-9 {
-  grid-column: span 9;
-}
-.ff-col-10 {
-  grid-column: span 10;
-}
-.ff-col-11 {
-  grid-column: span 11;
-}
-.ff-col-12 {
-  grid-column: span 12;
-}
-
-@media (max-width: 768px) {
-  /* Stacking columns on small screens */
-  .ff-col {
-    grid-column: span 12;
-  }
-}
+/* Container */
+.ff-container {
+  margin-right: auto;
+  margin-left: auto;
+  width: 90%;
+  display: grid;
+}
+
+.ff-container-fluid {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  display: grid;
+}
+
+/* Row */
+.ff-row {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+
+/* Column sizes based on a 12-column layout */
+.ff-col {
+  grid-column: span 12;
+}
+
+.ff-col-1 {
+  grid-column: span 1;
+}
+.ff-col-2 {
+  grid-column: span 2;
+}
+.ff-col-3 {
+  grid-column: span 3;
+}
+.ff-col-4 {
+  grid-column: span 4;
+}
+.ff-col-5 {
+  grid-column: span 5;
+}
+.ff-col-6 {
+  grid-column: span 6;
+}
+.ff-col-7 {
+  grid-column: span 7;
+}
+.ff-col-8 {
+  grid-column: span 8;
+}
+.ff-col-9 {
+  grid-column: span 9;
+}
+.ff-col-10 {
+  grid-column: span 10;
+}
+.ff-col-11 {
+  grid-column: span 11;
+}
+.ff-col-12 {
+  grid-column: span 12;
+}
+
+@media (max-width: 768px) {
+  /* Stacking columns on small screens */
+  .ff-col {
+    grid-column: span 12;
+  }
+}

package/src/components/GridLayout/GridLayout.stories.tsx

@@ -1,90 +1,90 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Container, Row, Col } from './GridLayout';
-import './GridLayoutStory.scss';
-
-const meta: Meta<typeof Container> = {
-  title: 'Components/GridLayout',
-  component: Container,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type ContainerStory = StoryObj<typeof Container>;
-
-const defaultContainerArgs = {
-  fluid: false,
-  gap: '20px',
-};
-
-export const Grid: ContainerStory = {
-  args: {
-    ...defaultContainerArgs,
-  },
-  render: (args) => (
-    <>
-      <Container {...args}>
-        <Row>
-          <Col size={4}>
-            <div className="one">Column 1</div>
-          </Col>
-          <Col size={4}>
-            <div className="two">Column 2</div>
-          </Col>
-          <Col size={4}>
-            <div className="three">Column 3</div>
-          </Col>
-        </Row>
-        <Row>
-          <Col size={6}>
-            <div className="four">Column 4</div>
-          </Col>
-          <Col size={6}>
-            <div className="five">Column 5</div>
-          </Col>
-        </Row>
-      </Container>
-    </>
-  ),
-};
-export const Grid2: ContainerStory = {
-  args: {
-    ...defaultContainerArgs,
-  },
-  render: (args) => (
-    <>
-      <Container {...args}>
-        <Row gap="20px">
-          <Col size={3}>
-            <div className="one">Column 1 (size 3)</div>
-          </Col>
-          <Col size={6}>
-            <div className="two">Column 2 (size 6)</div>
-          </Col>
-          <Col size={3}>
-            <div className="three">Column 3 (size 3)</div>
-          </Col>
-        </Row>
-        <Row gap="10px">
-          <Col size={4}>
-            <div className="four">Column 4 (size 4)</div>
-          </Col>
-          <Col size={4}>
-            <div className="five">Column 5 (size 4)</div>
-          </Col>
-          <Col size={4}>
-            <div className="one">Column 6 (size 4)</div>
-          </Col>
-        </Row>
-        <Row gap="15px">
-          <Col size={12}>
-            <div className="two">Full-width column (size 12)</div>
-          </Col>
-        </Row>
-      </Container>
-    </>
-  ),
-};
-
-export default meta;
+import { Meta, StoryObj } from '@storybook/react';
+import { Container, Row, Col } from './GridLayout';
+import './GridLayoutStory.scss';
+
+const meta: Meta<typeof Container> = {
+  title: 'Components/GridLayout',
+  component: Container,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type ContainerStory = StoryObj<typeof Container>;
+
+const defaultContainerArgs = {
+  fluid: false,
+  gap: '20px',
+};
+
+export const Grid: ContainerStory = {
+  args: {
+    ...defaultContainerArgs,
+  },
+  render: (args) => (
+    <>
+      <Container {...args}>
+        <Row>
+          <Col size={4}>
+            <div className="one">Column 1</div>
+          </Col>
+          <Col size={4}>
+            <div className="two">Column 2</div>
+          </Col>
+          <Col size={4}>
+            <div className="three">Column 3</div>
+          </Col>
+        </Row>
+        <Row>
+          <Col size={6}>
+            <div className="four">Column 4</div>
+          </Col>
+          <Col size={6}>
+            <div className="five">Column 5</div>
+          </Col>
+        </Row>
+      </Container>
+    </>
+  ),
+};
+export const Grid2: ContainerStory = {
+  args: {
+    ...defaultContainerArgs,
+  },
+  render: (args) => (
+    <>
+      <Container {...args}>
+        <Row gap="20px">
+          <Col size={3}>
+            <div className="one">Column 1 (size 3)</div>
+          </Col>
+          <Col size={6}>
+            <div className="two">Column 2 (size 6)</div>
+          </Col>
+          <Col size={3}>
+            <div className="three">Column 3 (size 3)</div>
+          </Col>
+        </Row>
+        <Row gap="10px">
+          <Col size={4}>
+            <div className="four">Column 4 (size 4)</div>
+          </Col>
+          <Col size={4}>
+            <div className="five">Column 5 (size 4)</div>
+          </Col>
+          <Col size={4}>
+            <div className="one">Column 6 (size 4)</div>
+          </Col>
+        </Row>
+        <Row gap="15px">
+          <Col size={12}>
+            <div className="two">Full-width column (size 12)</div>
+          </Col>
+        </Row>
+      </Container>
+    </>
+  ),
+};
+
+export default meta;

package/src/components/GridLayout/GridLayout.tsx

@@ -1,39 +1,39 @@
-import React from 'react';
-import './GridLayout.scss';
-import { ContainerProps, RowProps, ColProps } from './types';
-import cx from 'classnames';
-
-export const Container: React.FC<ContainerProps> = ({
-  children,
-  fluid = false,
-  gap = '0px',
-  className = '',
-}) => {
-  const containerClassName = fluid ? 'ff-container-fluid' : 'ff-container';
-  return (
-    <div className={cx(containerClassName, className)} style={{ gap }}>
-      {children}
-    </div>
-  );
-};
-
-export const Row: React.FC<RowProps> = ({
-  children,
-  gap = '0px',
-  className = '',
-}) => {
-  return (
-    <div className={cx('ff-row', className)} style={{ gap }}>
-      {children}
-    </div>
-  );
-};
-
-export const Col: React.FC<ColProps> = ({
-  children,
-  size = 12,
-  className = '',
-}) => {
-  const colClassName = `ff-col-${size}`;
-  return <div className={cx(colClassName, className)}>{children}</div>;
-};
+import React from 'react';
+import './GridLayout.scss';
+import { ContainerProps, RowProps, ColProps } from './types';
+import cx from 'classnames';
+
+export const Container: React.FC<ContainerProps> = ({
+  children,
+  fluid = false,
+  gap = '0px',
+  className = '',
+}) => {
+  const containerClassName = fluid ? 'ff-container-fluid' : 'ff-container';
+  return (
+    <div className={cx(containerClassName, className)} style={{ gap }}>
+      {children}
+    </div>
+  );
+};
+
+export const Row: React.FC<RowProps> = ({
+  children,
+  gap = '0px',
+  className = '',
+}) => {
+  return (
+    <div className={cx('ff-row', className)} style={{ gap }}>
+      {children}
+    </div>
+  );
+};
+
+export const Col: React.FC<ColProps> = ({
+  children,
+  size = 12,
+  className = '',
+}) => {
+  const colClassName = `ff-col-${size}`;
+  return <div className={cx(colClassName, className)}>{children}</div>;
+};

package/src/components/GridLayout/GridLayoutStory.scss

@@ -1,25 +1,25 @@
-
-@mixin p-20(){
-    padding: 20px;
-}
-
-.one{
-    background-color: var(--brand-color);
-    @include p-20;
-}
-.two{
-    background-color: var(--status-warning-text-color);
-    @include p-20;
-}
-.three{
-    background-color: var(--status-rejected-text-color);
-    @include p-20;
-}
-.four{
-    background-color: var(--status-rejected-bg-color);
-    @include p-20;
-}
-.five{
-    background-color: var(--status-skipped-bg-color);
-    @include p-20;
-}
+
+@mixin p-20(){
+    padding: 20px;
+}
+
+.one{
+    background-color: var(--brand-color);
+    @include p-20;
+}
+.two{
+    background-color: var(--status-warning-text-color);
+    @include p-20;
+}
+.three{
+    background-color: var(--status-rejected-text-color);
+    @include p-20;
+}
+.four{
+    background-color: var(--status-rejected-bg-color);
+    @include p-20;
+}
+.five{
+    background-color: var(--status-skipped-bg-color);
+    @include p-20;
+}