pixel-react 1.6.3 → 1.6.6

package/src/components/FieldSet/FieldSet.stories.tsx

@@ -1,103 +1,103 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import FieldSet from './FieldSet';
-
-const meta: Meta<typeof FieldSet> = {
-  title: 'Components/FieldSet',
-  component: FieldSet,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof FieldSet>;
-
-const defaultArgs = {
-  legendName: 'Default Legend',
-  height: '200px',
-  width: '300px',
-  children: 'Default content inside the FieldSet.',
-};
-
-export const Default: Story = {
-  args: {
-    ...defaultArgs,
-  },
-};
-
-export const CustomDimensions: Story = {
-  args: {
-    ...defaultArgs,
-    height: '300px',
-    width: '400px',
-    legendName: 'Custom Dimensions',
-  },
-};
-
-export const WithNestedChildren: Story = {
-  args: {
-    ...defaultArgs,
-    legendName: 'Nested Content',
-    children: (
-      <div>
-        <p>This is some nested content inside the FieldSet.</p>
-        <button>Click Me</button>
-      </div>
-    ),
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [legend, setLegend] = useState('Controlled FieldSet');
-    const [content, setContent] = useState('Initial Content');
-
-    const handleLegendChange = (event: React.ChangeEvent<HTMLInputElement>) =>
-      setLegend(event.target.value);
-
-    const handleContentChange = (event: React.ChangeEvent<HTMLInputElement>) =>
-      setContent(event.target.value);
-
-    return (
-      <>
-        <div style={{ marginBottom: '1rem' }}>
-          <label>
-            Legend:
-            <input
-              type="text"
-              value={legend}
-              onChange={handleLegendChange}
-              style={{ marginLeft: '0.5rem' }}
-            />
-          </label>
-        </div>
-        <div style={{ marginBottom: '1rem' }}>
-          <label>
-            Content:
-            <input
-              type="text"
-              value={content}
-              onChange={handleContentChange}
-              style={{ marginLeft: '0.5rem' }}
-            />
-          </label>
-        </div>
-        <FieldSet legendName={legend} height="250px" width="350px">
-          {content}
-        </FieldSet>
-      </>
-    );
-  },
-};
-
-export const EmptyFieldSet: Story = {
-  args: {
-    legendName: 'Empty FieldSet',
-    height: '32px',
-    width: '317px',
-    children: null,
-  },
-};
-
-export default meta;
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import FieldSet from './FieldSet';
+
+const meta: Meta<typeof FieldSet> = {
+  title: 'Components/FieldSet',
+  component: FieldSet,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof FieldSet>;
+
+const defaultArgs = {
+  legendName: 'Default Legend',
+  height: '200px',
+  width: '300px',
+  children: 'Default content inside the FieldSet.',
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+  },
+};
+
+export const CustomDimensions: Story = {
+  args: {
+    ...defaultArgs,
+    height: '300px',
+    width: '400px',
+    legendName: 'Custom Dimensions',
+  },
+};
+
+export const WithNestedChildren: Story = {
+  args: {
+    ...defaultArgs,
+    legendName: 'Nested Content',
+    children: (
+      <div>
+        <p>This is some nested content inside the FieldSet.</p>
+        <button>Click Me</button>
+      </div>
+    ),
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [legend, setLegend] = useState('Controlled FieldSet');
+    const [content, setContent] = useState('Initial Content');
+
+    const handleLegendChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+      setLegend(event.target.value);
+
+    const handleContentChange = (event: React.ChangeEvent<HTMLInputElement>) =>
+      setContent(event.target.value);
+
+    return (
+      <>
+        <div style={{ marginBottom: '1rem' }}>
+          <label>
+            Legend:
+            <input
+              type="text"
+              value={legend}
+              onChange={handleLegendChange}
+              style={{ marginLeft: '0.5rem' }}
+            />
+          </label>
+        </div>
+        <div style={{ marginBottom: '1rem' }}>
+          <label>
+            Content:
+            <input
+              type="text"
+              value={content}
+              onChange={handleContentChange}
+              style={{ marginLeft: '0.5rem' }}
+            />
+          </label>
+        </div>
+        <FieldSet legendName={legend} height="250px" width="350px">
+          {content}
+        </FieldSet>
+      </>
+    );
+  },
+};
+
+export const EmptyFieldSet: Story = {
+  args: {
+    legendName: 'Empty FieldSet',
+    height: '32px',
+    width: '317px',
+    children: null,
+  },
+};
+
+export default meta;

package/src/components/FieldSet/FieldSet.tsx

@@ -1,29 +1,29 @@
-import { FC } from 'react';
-import './FieldSet.scss';
-import { fieldSetProps } from './types';
-import Typography from '../Typography';
-const FieldSet: FC<fieldSetProps> = ({
-  legendName,
-  height,
-  width,
-  children,
-}) => {
-  return (
-    <div className="ff_fieldSet_container">
-      <fieldset className="ff_fieldSet" style={{ height, width }}>
-        <legend className="ff_legend_container">
-          <Typography
-            color="var(--license_header_text_color)"
-            fontSize={8}
-            lineHeight="12px"
-          >
-            {legendName}
-          </Typography>
-        </legend>
-        <div className="ff_children_container">{children}</div>
-      </fieldset>
-    </div>
-  );
-};
-
-export default FieldSet;
+import { FC } from 'react';
+import './FieldSet.scss';
+import { fieldSetProps } from './types';
+import Typography from '../Typography';
+const FieldSet: FC<fieldSetProps> = ({
+  legendName,
+  height,
+  width,
+  children,
+}) => {
+  return (
+    <div className="ff_fieldSet_container">
+      <fieldset className="ff_fieldSet" style={{ height, width }}>
+        <legend className="ff_legend_container">
+          <Typography
+            color="var(--license_header_text_color)"
+            fontSize={8}
+            lineHeight="12px"
+          >
+            {legendName}
+          </Typography>
+        </legend>
+        <div className="ff_children_container">{children}</div>
+      </fieldset>
+    </div>
+  );
+};
+
+export default FieldSet;

package/src/components/FieldSet/index.ts

@@ -1 +1 @@
-export { default } from './FieldSet';
+export { default } from './FieldSet';

package/src/components/FieldSet/types.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
-
-export interface fieldSetProps {
-  legendName: string;
-  height: string;
-  width: string;
-  children: ReactNode | string;
-}
+import { ReactNode } from 'react';
+
+export interface fieldSetProps {
+  legendName: string;
+  height: string;
+  width: string;
+  children: ReactNode | string;
+}

package/src/components/FileDropzone/Dropzone.tsx

@@ -1,57 +1,57 @@
-import { FC } from 'react';
-import classNames from 'classnames';
-import './FileDropzone.scss';
-import { DroppableProps } from './types';
-import Button from '../Button';
-import Typography from '../Typography';
-
-const Dropzone: FC<DroppableProps> = ({
-  icon,
-  primaryLabel,
-  secondaryLabel,
-  buttonLabel,
-  getRootProps,
-  getInputProps,
-  isDragActive = false,
-  height = 188,
-}) => {
-  return (
-    <div
-      {...getRootProps()}
-      className={classNames('ff-file-dropzone', {
-        'ff-file-dropzone--active': isDragActive,
-      })}
-      style={{height: height}}
-    >
-      <div className="ff-file-dropzone-content__icon">{icon}</div>
-      <div className="ff-file-dropzone-content__labels">
-        <Typography
-          as="p"
-          fontWeight="semi-bold"
-          lineHeight="18px"
-          textAlign="center"
-          color={'var(--text-color)'}
-        >
-          {primaryLabel}
-        </Typography>
-        <Typography
-          as="p"
-          lineHeight="18px"
-          textAlign="center"
-          color={'var(--text-color)'}
-        >
-          {secondaryLabel}
-        </Typography>
-        <Button
-          variant="primary"
-          label={buttonLabel}
-          className="choose-file-btn"
-        >
-          <input {...getInputProps()} />
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default Dropzone;
+import { FC } from 'react';
+import classNames from 'classnames';
+import './FileDropzone.scss';
+import { DroppableProps } from './types';
+import Button from '../Button';
+import Typography from '../Typography';
+
+const Dropzone: FC<DroppableProps> = ({
+  icon,
+  primaryLabel,
+  secondaryLabel,
+  buttonLabel,
+  getRootProps,
+  getInputProps,
+  isDragActive = false,
+  height = 188,
+}) => {
+  return (
+    <div
+      {...getRootProps()}
+      className={classNames('ff-file-dropzone', {
+        'ff-file-dropzone--active': isDragActive,
+      })}
+      style={{height: height}}
+    >
+      <div className="ff-file-dropzone-content__icon">{icon}</div>
+      <div className="ff-file-dropzone-content__labels">
+        <Typography
+          as="p"
+          fontWeight="semi-bold"
+          lineHeight="18px"
+          textAlign="center"
+          color={'var(--text-color)'}
+        >
+          {primaryLabel}
+        </Typography>
+        <Typography
+          as="p"
+          lineHeight="18px"
+          textAlign="center"
+          color={'var(--text-color)'}
+        >
+          {secondaryLabel}
+        </Typography>
+        <Button
+          variant="primary"
+          label={buttonLabel}
+          className="choose-file-btn"
+        >
+          <input {...getInputProps()} />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Dropzone;

package/src/components/FileDropzone/FileDropzone.scss

@@ -1,135 +1,135 @@
-@mixin column-flex-gap($gap: 0) {
-  display: flex;
-  flex-direction: column;
-  gap: $gap;
-}
-
-@mixin center {
-  display: grid;
-  place-items: center;
-}
-
-@mixin icon-container($height: 24px, $width: 24px) {
-  height: $height;
-  width: $width;
-}
-
-.ff-file-dropzone-wrapper {
-  @include column-flex-gap(10px);
-  
-
-  .ff-file-dropzone {
-    padding: 16px 0;
-    border-radius: 8px;
-    background: var(--file-dropzone-default-color);
-    border: 1px dashed var(--brand-color);
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    text-align: center;
-    gap: 8px;
-    transition: background-color 0.2s ease;
-
-    &:hover,
-    &--active {
-      background-color: var(--file-dropzone-selected-color);
-    }
-
-    &-content {
-      &__icon {
-        height: 80px;
-        width: 80px;
-        display: grid;
-        place-items: center;
-      }
-
-      &__labels {
-        .choose-file-btn {
-          margin: 0 auto;
-          position: relative;
-          font-weight: 600;
-          line-height: 15px;
-
-          input {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            opacity: 0;
-          }
-        }
-      }
-    }
-  }
-
-  .ff-file-details-wrapper {
-    @include column-flex-gap(10px);
-    max-height: 300px;
-    overflow-y: auto;
-    scroll-behavior: smooth;
-    padding: 2px;
-
-    ::-webkit-scrollbar {
-      width: 2px;
-    }
-    -ms-overflow-style: none;
-    scrollbar-width: thin;
-
-    .ff-file-details {
-      @include column-flex-gap(10px);
-
-      &__item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 4px;
-        border-radius: 4px;
-        background-color: var(--file-details-bg);
-        box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);
-        overflow: hidden;
-
-        .ff-file-info {
-          display: flex;
-          align-items: center;
-          gap: 4px;
-          width: 87%;
-
-          .ff-file-info__icon {
-            @include center;
-            @include icon-container;
-          }
-
-          &__name-wrapper {
-            @include column-flex-gap(2px);
-            justify-content: center;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            width: 100%;
-
-            &__name {
-              overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              display: block;
-              color: var(--text-color);
-            }
-          }
-        }
-
-        .ff-file-actions {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          &__icon-replace,
-          &__icon-remove {
-            @include icon-container;
-            @include center;
-            cursor: pointer;
-          }
-        }
-      }
-    }
-  }
-}
+@mixin column-flex-gap($gap: 0) {
+  display: flex;
+  flex-direction: column;
+  gap: $gap;
+}
+
+@mixin center {
+  display: grid;
+  place-items: center;
+}
+
+@mixin icon-container($height: 24px, $width: 24px) {
+  height: $height;
+  width: $width;
+}
+
+.ff-file-dropzone-wrapper {
+  @include column-flex-gap(10px);
+  
+
+  .ff-file-dropzone {
+    padding: 16px 0;
+    border-radius: 8px;
+    background: var(--file-dropzone-default-color);
+    border: 1px dashed var(--brand-color);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+    gap: 8px;
+    transition: background-color 0.2s ease;
+
+    &:hover,
+    &--active {
+      background-color: var(--file-dropzone-selected-color);
+    }
+
+    &-content {
+      &__icon {
+        height: 80px;
+        width: 80px;
+        display: grid;
+        place-items: center;
+      }
+
+      &__labels {
+        .choose-file-btn {
+          margin: 0 auto;
+          position: relative;
+          font-weight: 600;
+          line-height: 15px;
+
+          input {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .ff-file-details-wrapper {
+    @include column-flex-gap(10px);
+    max-height: 300px;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+    padding: 2px;
+
+    ::-webkit-scrollbar {
+      width: 2px;
+    }
+    -ms-overflow-style: none;
+    scrollbar-width: thin;
+
+    .ff-file-details {
+      @include column-flex-gap(10px);
+
+      &__item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 4px;
+        border-radius: 4px;
+        background-color: var(--file-details-bg);
+        box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);
+        overflow: hidden;
+
+        .ff-file-info {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          width: 87%;
+
+          .ff-file-info__icon {
+            @include center;
+            @include icon-container;
+          }
+
+          &__name-wrapper {
+            @include column-flex-gap(2px);
+            justify-content: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 100%;
+
+            &__name {
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              display: block;
+              color: var(--text-color);
+            }
+          }
+        }
+
+        .ff-file-actions {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          &__icon-replace,
+          &__icon-remove {
+            @include icon-container;
+            @include center;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}