refactor(build): no React import needed (#428)

* refactor(build): no React import needed
* Less use of FC
* refactor(notifications\): remove old notifications

BREAKING CHANGE: NotificationManager, NotificationContainer, Notification

README.md

@@ -40,8 +40,6 @@ yarn add @logicalclocks/quartz
 ### Usage
 
 ```tsx
-import React from 'react';
-
 import { ThemeProvider, Button } from '@logicalclocks/quartz';
 
 const App = () => (
@@ -103,10 +101,9 @@ Delete `node_modules` and `dist` folders then follow **Build locally** or **Run
 
 Follow **Build locally** or **Run locally** instruction
 
-
 ## Using locally
+
 You can use the library locally with the help of [yalc](https://github.com/wclr/yalc).
 Just run `yarn publish-local` here and then do a `yalc link @logicalclocks/quartz` wherever you wanna use it.
 
 To publish changes you can do `yarn dlx yalc push`. After that, the changes will be "published" to the local registry.
-

src/components/alternative-header/AlternativeHeader.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Box, BoxProps, Flex } from 'rebass';
 import Value from '../typography/value';
 import * as S from './styles';
@@ -23,7 +23,7 @@ export interface Props extends Omit<BoxProps, 'css'> {
   withBase?: boolean;
 }
 
-export const AlternativeHeader: FC<Props> = ({
+export const AlternativeHeader = ({
   title,
   tabs,
   withBase = false,

src/components/alternative-header/stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Box } from 'rebass';
 import { AlternativeHeader } from './index';
 

src/components/animated-progress/AnimatedProgress.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useNProgress } from '@tanem/react-nprogress';
 import { Options } from '@tanem/react-nprogress/dist/types';
 

src/components/animated-progress/Bar.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
 import { Flex } from 'rebass';
 
-const Bar: React.FC<{
+interface Props {
   animationDuration: number;
   progress: number;
   variant: string;
-}> = ({ animationDuration, progress, variant }) => (
+}
+const Bar = ({ animationDuration, progress, variant }: Props) => (
   <Flex
     variant={variant}
     sx={{

src/components/animated-progress/Container.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Flex } from 'rebass';
 
 const Container = ({ children }: React.PropsWithChildren) => (

src/components/animated-progress/stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Box } from '../box';
 import { Button } from '../button';
 import { Flex } from '../flex';

src/components/badge/Badge.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Flex, FlexProps, SxStyleProp } from 'rebass';
 import { useTheme } from '../../theme/theme';
 import { getIcon, IconName } from '../icon/list';

src/components/badge/stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
 import { Badge } from './Badge';
 import { IconName } from '../icon/list';
 

src/components/bar/Bar.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import * as R from 'ramda';
 
 import { Box, BoxProps } from '../box';

src/components/bar/stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
 import { Flex } from '../flex';
 import { Bar } from './Bar';
 

src/components/box/Box.tsx

@@ -1,10 +1,12 @@
-import React, { FC, forwardRef } from 'react';
+import { PropsWithChildren, forwardRef } from 'react';
 import { Box as RebassBox, BoxProps } from 'rebass';
 
 export interface Props extends Omit<BoxProps, 'css'> {}
 
-export const Box: FC<Props> = forwardRef(({ children, ...rest }, ref) => (
-  <RebassBox ref={ref} {...rest}>
-    {children}
-  </RebassBox>
-));
+export const Box = forwardRef(
+  ({ children, ...rest }: PropsWithChildren<Props>, ref) => (
+    <RebassBox ref={ref} {...rest}>
+      {children}
+    </RebassBox>
+  ),
+);

src/components/button/Button.tsx

@@ -1,5 +1,4 @@
 import * as R from 'ramda';
-import React from 'react';
 import { Button as RebassButton, ButtonProps } from 'rebass';
 
 // Styles

src/components/button/stories.tsx

@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions';
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import { Button } from './Button';

src/components/callout/index.tsx

@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Box, Flex, FlexProps, Text } from 'rebass';
 import styles from './callout.styles';
 import { Color } from '../../theme/types';
@@ -23,12 +22,7 @@ export interface ICalloutProps extends Omit<FlexProps, 'content' | 'css'> {
   cta?: React.ReactNode;
 }
 
-const Callout: FC<ICalloutProps> = ({
-  type,
-  content,
-  cta,
-  ...props
-}: ICalloutProps) => (
+const Callout = ({ type, content, cta, ...props }: ICalloutProps) => (
   <Flex
     width="100%"
     variant={`callout.${type}`}

src/components/callout/stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { Box } from 'rebass';

src/components/calloutWithButton/index.tsx

@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { FlexProps } from 'rebass';
 import Callout, { CalloutTypes } from '../callout';
 import { Button } from '../button';
@@ -14,7 +13,7 @@ export interface ICalloutWithButtonProps
   isButtonLoading?: boolean;
 }
 
-const CalloutWithButton: FC<ICalloutWithButtonProps> = ({
+const CalloutWithButton = ({
   buttonContent,
   content,
   onClick,

src/components/card-header/index.tsx

@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { Box, BoxProps, Flex } from 'rebass';
 import styles from './card-header.styles';
 
@@ -8,13 +7,13 @@ export interface CardHeaderProps extends Omit<BoxProps, 'title' | 'css'> {
   withShadow?: boolean;
   withBorderBottom?: boolean;
 }
-const CardHeader: FC<CardHeaderProps> = ({
+const CardHeader = ({
   title,
   actions,
   withShadow = false,
   withBorderBottom = false,
   ...props
-}) => (
+}: CardHeaderProps) => (
   <Box {...props} sx={{ ...styles(withShadow, withBorderBottom), ...props.sx }}>
     {title && (
       <Flex alignItems="center" as="h4">

src/components/card-header/stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { action } from '@storybook/addon-actions';
 
 import { Box, Button } from 'rebass';

src/components/card/card-secondary.tsx

@@ -1,4 +1,4 @@
-import React, { FC, memo, useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 import {
   Box,
   Flex,
@@ -18,7 +18,7 @@ export interface CardSecondaryProps
   readonly?: boolean;
 }
 
-const CardSecondary: FC<CardSecondaryProps> = ({
+const CardSecondary = ({
   title,
   children,
   maxHeight,

src/components/card/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, memo, useRef } from 'react';
+import { memo, useRef } from 'react';
 import { Box, Card as RebassCard, CardProps as RebassCardProps } from 'rebass';
 
 // Styles
@@ -20,7 +20,7 @@ export interface CardProps extends Omit<RebassCardProps, 'css' | 'title'> {
   expandable?: boolean;
 }
 
-const Card: FC<CardProps> = ({
+const Card = ({
   title,
   actions,
   children,

src/components/card/stories.tsx

@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions';
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 
 import Card from '.';

src/components/checkbox/checkbox-group.tsx

@@ -1,6 +1,5 @@
-import React, { FC, useCallback } from 'react';
+import { useCallback } from 'react';
 
-// Components
 import Label, { LabelProps } from '../label';
 import Checkbox from './index';
 import { TooltipProps } from '../tooltip';
@@ -15,7 +14,7 @@ export interface CheckboxGroupProps
   tooltipProps?: Omit<TooltipProps, 'children'>;
 }
 
-const CheckboxGroup: FC<CheckboxGroupProps> = ({
+const CheckboxGroup = ({
   label,
   options,
   value,

src/components/checkbox/group.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import CheckboxGroup from './checkbox-group';
 

src/components/checkbox/index.tsx

@@ -1,10 +1,8 @@
 import { CheckboxProps as RebassCheckboxProps } from '@rebass/forms';
-import React, { FC, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { Box, Flex } from 'rebass';
 
-// Components
 import Labeling from '../typography/labeling';
-// Styles
 import styles from './checkbox-styles';
 import Tooltip, { TooltipProps } from '../tooltip';
 
@@ -14,7 +12,7 @@ export interface CheckboxProps extends Omit<RebassCheckboxProps, 'css'> {
   tooltipProps?: Omit<TooltipProps, 'children'>;
 }
 
-const Checkbox: FC<CheckboxProps> = forwardRef(
+const Checkbox = forwardRef(
   (
     {
       label,

src/components/checkbox/stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import Checkbox from './index';
 

src/components/code-input/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { Box, Flex } from 'rebass';
 
 import { loadLanguage } from '@uiw/codemirror-extensions-langs';
@@ -31,7 +31,7 @@ export interface CodeInputProps
   intent?: Intents;
 }
 
-const CodeInput: FC<CodeInputProps> = forwardRef(
+const CodeInput = forwardRef(
   ({
     label = '',
     value,

src/components/code-input/stories.tsx

@@ -1,6 +1,5 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
 
 import CodeInput from '.';
 

src/components/code/code.styles.ts

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export const boxStyles: React.CSSProperties = {
   width: '100%',
   lineHeight: '16px',

src/components/code/index.tsx

@@ -1,5 +1,5 @@
 import { EditorView } from '@codemirror/view';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Box, Flex, FlexProps } from 'rebass';
 
 import { LanguageName, loadLanguage } from '@uiw/codemirror-extensions-langs';

src/components/code/stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import { Box } from 'rebass';
 import Code, { defaultPopupProps } from './index';

src/components/collapse/index.tsx

@@ -1,5 +1,5 @@
+import { memo, useEffect, useRef, useState } from 'react';
 import { Box, BoxProps, Flex } from 'rebass';
-import React, { FC, memo, useEffect, useRef, useState } from 'react';
 
 import Labeling from '../typography/labeling';
 import styles, { contentStyles, containerStyles } from './collapse.styles';
@@ -13,15 +13,15 @@ export interface CollapseProps extends Omit<BoxProps, 'css' | 'title'> {
   openChange?: (value: boolean) => void;
 }
 
-const Collapse: FC<CollapseProps> = ({
+const Collapse = ({
   title,
   contentProps,
   secondaryContent,
   children,
   isOpenProps = false,
   openChange,
   ...props
-}) => {
+}: CollapseProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
 

src/components/collapse/stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box } from 'rebass';
 import { StoryObj, Meta } from '@storybook/react';
 

src/components/compact-button/compact-button.tsx

@@ -1,4 +1,4 @@
-import React, { FC, memo, CSSProperties } from 'react';
+import { memo, CSSProperties } from 'react';
 import { Button, ButtonProps, Flex, Box } from 'rebass';
 import { GetIcon, IconName } from '../icon';
 
@@ -30,7 +30,7 @@ const getLinkProps = ({ href, newTab }: LinkRelatedProps): Partial<Props> =>
       }
     : {};
 
-const CompactButton: FC<Props> = ({
+const CompactButton = ({
   icon,
   href,
   children,
@@ -40,7 +40,7 @@ const CompactButton: FC<Props> = ({
   newTab = false,
   mode = 'default',
   ...props
-}) => (
+}: Props) => (
   <Button
     {...props}
     {...getLinkProps({ newTab, href })}

src/components/compact-button/stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import CompactButton from '.';

src/components/datepicker/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, forwardRef, memo, useState } from 'react';
+import { forwardRef, memo, useState } from 'react';
 import ReactDatePicker, { ReactDatePickerProps } from 'react-datepicker';
 import { Flex, SxStyleProp } from 'rebass';
 
@@ -19,12 +19,12 @@ export interface DatePickerProps extends ReactDatePickerProps {
 const getPlacement = (align: DatePickerProps['datePickerAlign']) =>
   align === 'right' ? 'bottom-end' : 'bottom-start';
 
-const DatePicker: FC<DatePickerProps> = ({
+const DatePicker = ({
   selectProps,
   datePickerAlign = 'right',
   sx,
   ...props
-}) => {
+}: DatePickerProps) => {
   const [isOpen, setOpen] = useState(false);
   return (
     <Flex flexDirection="column" sx={{ ...styles, ...sx }}>