Add pass through of classname & fix type issues

Description

Patch: const { ... } = props → function Component({ ... }).

Patch: moved ComponentProps near the Component itself.

Patch: Replaced React.Something with just direct import of Something for consistency.

Minor: Replaced all imports in storybook to import {} from '.' since it also checks if we export functionality, which we display in Storybook. ^^^ ℹ️ Please keep it that way moving forward.

Minor: Replaced LidoComponentProps with InferStyledComponentProps as more correct way to extract Props from StyledComponent.

The only issue is that we need to hide styled component props and replace with internal props as this

export type ButtonProps = Omit<
  ButtonStyleProps,
  | '$size'
  | '$variant'
  | '$color'
  | '$fullwidth'
  | '$square'
  | '$loading'
  | '$active'
> & {
  size?: ButtonSizes
  variant?: ButtonVariants
  color?: ButtonColors
  fullwidth?: boolean
  square?: boolean
  loading?: boolean
  active?: boolean
}

If we don't do that, then these styled component props will be required for that component, even thought we are defining them inside the wrapper component.

🚨 BREAKING CHANGE: in lido-ui@2 we exported prop types and other types incorrectly, so all props we exported as any. Fixed the issue, but now we can't use shortened imports as import * from '@lidofinance/something as it is limitation of tsc

Demo

Checked on lido-landing, everything is ok, types check is passing.

Checked on staking-widget, there are errors, because some ui-kit components were used incorrectly, that's also why this version is major.

lidofinance / ui

Add pass through of classname & fix type issues #387

Description

Demo