@ssa-ui-kit/widgets 0.0.2-alpha → 0.0.3-alpha

package/src/components/SearchBox/SearchBox.tsx

@@ -1,68 +1,70 @@
-import { KeyboardEvent, useEffect, useRef } from 'react';
-import { useWatch } from 'react-hook-form';
-import { Icon } from '@ssa-ui-kit/core';
-import { debounce } from '@ssa-ui-kit/utils';
-import { SearchBoxWrapper } from './SearchBoxWrapper';
-import { SearchBoxInput } from './SearchBoxInput';
-import { SearchBoxCrossIcon } from '.';
-import { SearchBoxProps } from './types';
-
-export const SearchBox = ({
-  name,
-  placeholder = 'Search by name',
-  control,
-  callbackDelay = 500,
-  autoSearchTrigger = true,
-  register,
-  resetField,
-  callback,
-  ...rest
-}: SearchBoxProps) => {
-  const watchResult = useWatch({ control });
-  const inputRef = useRef<HTMLInputElement>(null);
-  const debounceThrottled = useRef(debounce(callback, callbackDelay));
-  const [debouncedFn, cancel] = debounceThrottled.current;
-
-  useEffect(() => {
-    const searchTerm = watchResult[name];
-    if (autoSearchTrigger && searchTerm !== undefined) {
-      debouncedFn(searchTerm);
-    }
-  }, [watchResult]);
-
-  const crossIconHandler = () => {
-    resetField(name);
-    inputRef.current?.focus();
-  };
-
-  const EndElement = !watchResult[name] ? (
-    <div data-testid="search-icon">
-      <Icon name="search" size={15} color="#55575A" />
-    </div>
-  ) : (
-    <SearchBoxCrossIcon onClick={crossIconHandler} />
-  );
-
-  const onKeyUp = (event: KeyboardEvent) => {
-    if (event.key === 'Enter') {
-      cancel();
-      callback(watchResult[name]);
-    }
-  };
-
-  return (
-    <SearchBoxWrapper>
-      <SearchBoxInput
-        name={name}
-        endElement={EndElement}
-        register={register}
-        control={control}
-        placeholder={placeholder}
-        status="custom"
-        onKeyUp={onKeyUp}
-        {...rest}
-        ref={inputRef}
-      />
-    </SearchBoxWrapper>
-  );
-};
+import { KeyboardEvent, useEffect, useRef } from 'react';
+import { useWatch } from 'react-hook-form';
+import { Icon } from '@ssa-ui-kit/core';
+import { debounce } from '@ssa-ui-kit/utils';
+import { SearchBoxWrapper } from './SearchBoxWrapper';
+import { SearchBoxInput } from './SearchBoxInput';
+import { SearchBoxCrossIcon } from '.';
+import { SearchBoxProps } from './types';
+
+export const SearchBox = ({
+  name,
+  placeholder = 'Search by name',
+  control,
+  callbackDelay = 500,
+  autoSearchTrigger = true,
+  register,
+  resetField,
+  callback,
+  ...rest
+}: SearchBoxProps) => {
+  const watchResult = useWatch({ control });
+  const inputRef = useRef<HTMLInputElement>(null);
+  const debounceThrottled = useRef(debounce(callback, callbackDelay));
+  const [debouncedFn, cancel] = debounceThrottled.current;
+
+  useEffect(() => {
+    const searchTerm = watchResult[name];
+    if (autoSearchTrigger && searchTerm !== undefined) {
+      debouncedFn(searchTerm);
+    }
+  }, [watchResult]);
+
+  const crossIconHandler = () => {
+    resetField(name, {
+      defaultValue: '',
+    });
+    inputRef.current?.focus();
+  };
+
+  const EndElement = !watchResult[name] ? (
+    <div data-testid="search-icon">
+      <Icon name="search" size={15} color="#55575A" />
+    </div>
+  ) : (
+    <SearchBoxCrossIcon onClick={crossIconHandler} />
+  );
+
+  const onKeyUp = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      cancel();
+      callback(watchResult[name]);
+    }
+  };
+
+  return (
+    <SearchBoxWrapper>
+      <SearchBoxInput
+        name={name}
+        endElement={EndElement}
+        register={register}
+        control={control}
+        placeholder={placeholder}
+        status="custom"
+        onKeyUp={onKeyUp}
+        {...rest}
+        ref={inputRef}
+      />
+    </SearchBoxWrapper>
+  );
+};

package/src/components/SearchBox/SearchBoxCrossIcon.tsx

@@ -1,26 +1,26 @@
-import { useTheme } from '@emotion/react';
-import { Button, Icon } from '@ssa-ui-kit/core';
-
-export const SearchBoxCrossIcon = ({
-  onClick,
-}: {
-  onClick: React.MouseEventHandler<HTMLButtonElement>;
-}) => {
-  const theme = useTheme();
-  return (
-    <Button
-      onClick={onClick}
-      variant="custom"
-      data-testid="cross-icon"
-      css={{
-        padding: 0,
-        background: 'none',
-        '& svg path': {
-          strokeWidth: 1,
-          stroke: theme.colors.greyFilterIcon,
-        },
-      }}>
-      <Icon name="cross" size={15} color="#55575A" />
-    </Button>
-  );
-};
+import { useTheme } from '@emotion/react';
+import { Button, Icon } from '@ssa-ui-kit/core';
+
+export const SearchBoxCrossIcon = ({
+  onClick,
+}: {
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+}) => {
+  const theme = useTheme();
+  return (
+    <Button
+      onClick={onClick}
+      variant="custom"
+      data-testid="cross-icon"
+      css={{
+        padding: 0,
+        background: 'none',
+        '& svg path': {
+          strokeWidth: 1,
+          stroke: theme.colors.greyFilterIcon,
+        },
+      }}>
+      <Icon name="cross" size={15} color="#55575A" />
+    </Button>
+  );
+};

package/src/components/SearchBox/SearchBoxInput.tsx

@@ -1,20 +1,21 @@
-import styled from '@emotion/styled';
-import { Input } from '@ssa-ui-kit/core';
-
-export const SearchBoxInput = styled(Input)`
-  height: 40px;
-  border-radius: 5px;
-  background-color: ${({ theme }) => theme.colors.greyLighter};
-  border: 1px solid #dee0e8;
-  color: ${({ theme }) => theme.colors.greyDarker};
-  &::placeholder {
-    color: #55575a;
-    font-weight: 500;
-  }
-  &:hover {
-    border: ${({ theme }) => `1px solid ${theme.colors.greyDropdownFocused}`};
-  }
-  & + div {
-    right: 23px;
-  }
-`;
+import styled from '@emotion/styled';
+import { Input } from '@ssa-ui-kit/core';
+
+export const SearchBoxInput = styled(Input)`
+  height: 40px;
+  line-height: 40px;
+  border-radius: 5px;
+  background-color: ${({ theme }) => theme.colors.greyLighter};
+  border: 1px solid #dee0e8;
+  color: ${({ theme }) => theme.colors.greyDarker};
+  &::placeholder {
+    color: #55575a;
+    font-weight: 500;
+  }
+  &:hover {
+    border: ${({ theme }) => `1px solid ${theme.colors.greyDropdownFocused}`};
+  }
+  & + div {
+    right: 23px;
+  }
+`;

package/src/components/SearchBox/SearchBoxWrapper.tsx

@@ -1,6 +1,6 @@
-import styled from '@emotion/styled';
-
-export const SearchBoxWrapper = styled.div`
-  width: 180px;
-  height: 40px;
-`;
+import styled from '@emotion/styled';
+
+export const SearchBoxWrapper = styled.div`
+  width: 180px;
+  height: 40px;
+`;

package/src/components/SearchBox/index.ts

@@ -1,4 +1,4 @@
-export { SearchBox } from './SearchBox';
-export { SearchBoxCrossIcon } from './SearchBoxCrossIcon';
-export { SearchBoxInput } from './SearchBoxInput';
-export { SearchBoxWrapper } from './SearchBoxWrapper';
+export { SearchBox } from './SearchBox';
+export { SearchBoxCrossIcon } from './SearchBoxCrossIcon';
+export { SearchBoxInput } from './SearchBoxInput';
+export { SearchBoxWrapper } from './SearchBoxWrapper';

package/src/components/SearchBox/stories/SearchBox.stories.tsx

@@ -1,16 +1,16 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { SearchBox } from '..';
-import { StoryComponent } from './StoryComponent';
-
-type SearchBoxType = typeof SearchBox;
-
-export default {
-  title: 'Widgets/SearchBox',
-  component: SearchBox,
-  argTypes: {},
-} as Meta<SearchBoxType>;
-
-export const Default: StoryObj<SearchBoxType> = () => <StoryComponent />;
-
-Default.args = {};
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SearchBox } from '..';
+import { StoryComponent } from './StoryComponent';
+
+type SearchBoxType = typeof SearchBox;
+
+export default {
+  title: 'Widgets/SearchBox',
+  component: SearchBox,
+  argTypes: {},
+} as Meta<SearchBoxType>;
+
+export const Default: StoryObj<SearchBoxType> = () => <StoryComponent />;
+
+Default.args = {};

package/src/components/SearchBox/stories/StoryComponent.tsx

@@ -1,25 +1,25 @@
-import { FieldValues, useForm } from 'react-hook-form';
-
-import { SearchBox } from '..';
-
-export const StoryComponent = ({
-  handleCallback,
-}: {
-  handleCallback?: (searchTerm: string) => void;
-}) => {
-  const { register, control, resetField } = useForm<FieldValues>();
-
-  const onCallback = (searchTerm: string) => {
-    console.log('Searching for the term...', searchTerm);
-  };
-
-  return (
-    <SearchBox
-      register={register}
-      control={control}
-      resetField={resetField}
-      callback={handleCallback || onCallback}
-      name={'search'}
-    />
-  );
-};
+import { FieldValues, useForm } from 'react-hook-form';
+
+import { SearchBox } from '..';
+
+export const StoryComponent = ({
+  handleCallback,
+}: {
+  handleCallback?: (searchTerm: string) => void;
+}) => {
+  const { register, control, resetField } = useForm<FieldValues>();
+
+  const onCallback = (searchTerm: string) => {
+    console.log('Searching for the term...', searchTerm);
+  };
+
+  return (
+    <SearchBox
+      register={register}
+      control={control}
+      resetField={resetField}
+      callback={handleCallback || onCallback}
+      name={'search'}
+    />
+  );
+};

package/src/components/SearchBox/types.ts

@@ -1,9 +1,9 @@
-import { InputProps } from '@ssa-ui-kit/core/dist/components/Input/types';
-import { UseFormReturn } from 'react-hook-form';
-
-export type SearchBoxProps = InputProps &
-  Pick<UseFormReturn, 'control' | 'resetField'> & {
-    callback: (searchTerm: string) => void;
-    callbackDelay?: number;
-    autoSearchTrigger?: boolean;
-  };
+import { InputProps } from '@ssa-ui-kit/core/dist/components/Input/types';
+import { UseFormReturn } from 'react-hook-form';
+
+export type SearchBoxProps = InputProps &
+  Pick<UseFormReturn, 'control' | 'resetField'> & {
+    callback: (searchTerm: string) => void;
+    callbackDelay?: number;
+    autoSearchTrigger?: boolean;
+  };

package/src/components/StepsCounter/StepsCounter.spec.tsx

@@ -1,14 +1,14 @@
-import { screen } from '../../../customTest';
-import StepsCounter from './index';
-
-describe('StepsCounter', () => {
-  it('Render component with correct %', () => {
-    render(<StepsCounter max={3000} currentValue={2500} />);
-
-    const progressBar = screen.getByRole('progressbar');
-    const label = screen.getByText(/83% of your goals/i);
-
-    expect(label).toBeInTheDocument();
-    expect(progressBar).toHaveStyle('width: 83%;');
-  });
-});
+import { screen } from '../../../customTest';
+import StepsCounter from './index';
+
+describe('StepsCounter', () => {
+  it('Render component with correct %', () => {
+    render(<StepsCounter max={3000} currentValue={2500} />);
+
+    const progressBar = screen.getByRole('progressbar');
+    const label = screen.getByText(/83% of your goals/i);
+
+    expect(label).toBeInTheDocument();
+    expect(progressBar).toHaveStyle('width: 83%;');
+  });
+});

package/src/components/StepsCounter/StepsCounter.stories.tsx

@@ -1,16 +1,16 @@
-import type { Meta } from '@storybook/react';
-
-import { StepsCounter } from './StepsCounter';
-
-export default {
-  title: 'Widgets/StepsCounter',
-  component: StepsCounter,
-} as Meta<typeof StepsCounter>;
-
-export const Default = {
-  args: {
-    max: 3000,
-    currentValue: 2500,
-    unit: 'L',
-  },
-};
+import type { Meta } from '@storybook/react';
+
+import { StepsCounter } from './StepsCounter';
+
+export default {
+  title: 'Widgets/StepsCounter',
+  component: StepsCounter,
+} as Meta<typeof StepsCounter>;
+
+export const Default = {
+  args: {
+    max: 3000,
+    currentValue: 2500,
+    unit: 'L',
+  },
+};

package/src/components/StepsCounter/StepsCounter.tsx

@@ -1,74 +1,74 @@
-import { css, useTheme } from '@emotion/react';
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  ProgressBar,
-  Typography,
-  ResponsiveImage,
-} from '@ssa-ui-kit/core';
-
-import { StepsCounterProps } from './types';
-
-/**
- *
- * UI Component with a Card that shows the steps count of the user
- */
-export const StepsCounter = ({ max, currentValue }: StepsCounterProps) => {
-  const theme = useTheme();
-  const percentage = Math.round((currentValue / max) * 100);
-
-  return (
-    <Card
-      css={css`
-        box-shadow: 0 10px 40px rgba(42, 48, 57, 0.08);
-        border-radius: 20px;
-      `}>
-      <CardHeader
-        icon={
-          <ResponsiveImage
-            css={{ filter: `drop-shadow(0 5px 5px ${theme.colors.grey})` }}
-            srcSet="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fsteps%2Fsteps_64.png?alt=media&token=22d59e48-da19-448a-98e3-25f396108243 64w, https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fsteps%2Fsteps_48.png?alt=media&token=7c66d777-ddad-416a-9f07-a89dd3167ca7 48w"
-            sizes="(min-width: 1440px) 64px, 48px"
-            src="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fsteps%2Fsteps_48.png?alt=media&token=7c66d777-ddad-416a-9f07-a89dd3167ca7"
-            alt="Steps"
-          />
-        }>
-        <Typography variant="h6" weight="bold">
-          Steps
-        </Typography>
-      </CardHeader>
-
-      <CardContent
-        style={{
-          flexWrap: 'wrap',
-        }}>
-        <div>
-          <span
-            css={css`
-              font-size: 33px;
-              font-weight: bold;
-            `}>
-            {currentValue}
-          </span>
-          <span>Steps</span>
-        </div>
-        <div
-          css={css`
-            width: 100%;
-            margin: 10px 0;
-          `}>
-          <ProgressBar percentage={percentage} color="green" />
-        </div>
-        <Typography
-          variant="body1"
-          css={css`
-            color: ${theme.colors.greyDarker60};
-          `}>
-          {!Number.isNaN(percentage) && `${percentage}% of your goals`}
-        </Typography>
-      </CardContent>
-    </Card>
-  );
-};
+import { css, useTheme } from '@emotion/react';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  ProgressBar,
+  Typography,
+  ResponsiveImage,
+} from '@ssa-ui-kit/core';
+
+import { StepsCounterProps } from './types';
+
+/**
+ *
+ * UI Component with a Card that shows the steps count of the user
+ */
+export const StepsCounter = ({ max, currentValue }: StepsCounterProps) => {
+  const theme = useTheme();
+  const percentage = Math.round((currentValue / max) * 100);
+
+  return (
+    <Card
+      css={css`
+        box-shadow: 0 10px 40px rgba(42, 48, 57, 0.08);
+        border-radius: 20px;
+      `}>
+      <CardHeader
+        icon={
+          <ResponsiveImage
+            css={{ filter: `drop-shadow(0 5px 5px ${theme.colors.grey})` }}
+            srcSet="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fsteps%2Fsteps_64.png?alt=media&token=22d59e48-da19-448a-98e3-25f396108243 64w, https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fsteps%2Fsteps_48.png?alt=media&token=7c66d777-ddad-416a-9f07-a89dd3167ca7 48w"
+            sizes="(min-width: 1440px) 64px, 48px"
+            src="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fsteps%2Fsteps_48.png?alt=media&token=7c66d777-ddad-416a-9f07-a89dd3167ca7"
+            alt="Steps"
+          />
+        }>
+        <Typography variant="h6" weight="bold">
+          Steps
+        </Typography>
+      </CardHeader>
+
+      <CardContent
+        style={{
+          flexWrap: 'wrap',
+        }}>
+        <div>
+          <span
+            css={css`
+              font-size: 33px;
+              font-weight: bold;
+            `}>
+            {currentValue}
+          </span>
+          <span>Steps</span>
+        </div>
+        <div
+          css={css`
+            width: 100%;
+            margin: 10px 0;
+          `}>
+          <ProgressBar percentage={percentage} color="green" />
+        </div>
+        <Typography
+          variant="body1"
+          css={css`
+            color: ${theme.colors.greyDarker60};
+          `}>
+          {!Number.isNaN(percentage) && `${percentage}% of your goals`}
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+};

package/src/components/StepsCounter/index.ts

@@ -1,2 +1,2 @@
-export { StepsCounter as default } from './StepsCounter';
-export * from './types';
+export { StepsCounter as default } from './StepsCounter';
+export * from './types';

package/src/components/StepsCounter/types.ts

@@ -1,4 +1,4 @@
-export interface StepsCounterProps {
-  max: number;
-  currentValue: number;
-}
+export interface StepsCounterProps {
+  max: number;
+  currentValue: number;
+}