feat: updates and working with next.js (#43)

* feat: add email-check-outline icon

* fix: circle icons bg

* feat: add CameraFrontVariant icon

* fix: make input wrapper without padding

* feat: add canada and usa icons

* fix: select component icons

* feat: country-selector component

* fix: country-selector props

* fix: border radius on select component

* fix: add width prop to inputs

* fix: inline button color

* fix: radio font variant

* chore: remove react from dev dep

* chore: package-lock update

package.json

@@ -32,7 +32,9 @@
   },
   "dependencies": {
     "@tippyjs/react": "^4.2.5",
+    "country-region-data": "^2.6.0",
     "focus-visible": "^5.2.0",
+    "lodash": "^4.17.21",
     "moment": "^2.29.1",
     "react-day-picker": "^7.4.10",
     "react-dropzone": "^14.2.3",
@@ -55,6 +57,7 @@
     "@svgr/cli": "^5.5.0",
     "@svgr/webpack": "^5.5.0",
     "@types/jest": "^26.0.24",
+    "@types/lodash": "^4.14.186",
     "@types/node": "^16.3.0",
     "@types/react-select": "^4.0.17",
     "@types/react-table": "^7.7.2",
@@ -88,7 +91,7 @@
     "webpack-cli": "^4.9.1"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "17 - 18",
+    "react-dom": "17 - 18"
   }
 }

src/components/CountrySelector/CountrySelector.stories.tsx

@@ -0,0 +1,23 @@
+import { ComponentProps } from 'react';
+import { Story } from '@storybook/react';
+import { CountrySelector } from './CountrySelector';
+
+const Template: Story<ComponentProps<typeof CountrySelector>> = (props) => (
+  <CountrySelector {...props} />
+);
+
+export default {
+  title: 'Polyblocks/CountrySelector',
+  component: CountrySelector,
+};
+
+export const Basic = Template.bind({});
+Basic.args = {
+  label: 'Select country',
+};
+
+export const CertainCountries = Template.bind({});
+CertainCountries.args = {
+  label: 'Select country',
+  countries: ['Canada', 'United States'],
+};

src/components/CountrySelector/CountrySelector.tsx

@@ -0,0 +1,34 @@
+import { allCountries, countryNames } from 'country-region-data';
+import { isEmpty } from 'lodash';
+import { ComponentProps } from 'react';
+import { polyIcons } from '../../theme';
+import { Select } from '../Select';
+
+const countryOptions = allCountries.map(([country]) => {
+  const countryIcon = country.replace(/\W/gi, '');
+
+  return {
+    // NOTE: country icon name must match with country name from 'country-region-data' package
+    // @ts-ignore
+    icon: polyIcons[countryIcon],
+    value: country,
+    label: country,
+  };
+});
+
+type CountrySelectProps = Omit<
+  ComponentProps<typeof Select>,
+  'variant' | 'options'
+> & {
+  countries?: typeof countryNames;
+};
+
+export function CountrySelector(props: CountrySelectProps) {
+  const { countries, ...selectProps } = props;
+
+  const options = isEmpty(countries)
+    ? countryOptions
+    : countryOptions.filter((option) => countries?.includes(option.value));
+
+  return <Select {...selectProps} variant="basic" options={options} />;
+}

src/components/CountrySelector/index.ts

@@ -0,0 +1 @@
+export * from './CountrySelector';

src/components/Input/Input.tsx

@@ -40,6 +40,7 @@ export type InputProps = {
   isDivisible?: boolean;
   inputRef?: any;
   readOnly?: boolean;
+  width?: string;
 };
 
 export type InputWrapperProps = GridProps & {
@@ -56,6 +57,7 @@ const InputWrapper = styled(Grid)<InputWrapperProps>(
     border: (theme.INPUT || { border: 0 }).border,
     borderRadius: (theme.INPUT || { borderRadius: 0 }).borderRadius,
     transition: (theme.INPUT || { transition: 'unset' }).transition,
+    width: '100%',
     ...(error
       ? {
           borderColor: theme.COLOR.danger2,
@@ -116,6 +118,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       disabled,
       readOnly,
       iconPosition,
+      width = 'fit-content',
       ...props
     } = inputProps;
 
@@ -155,8 +158,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
 
     return (
       <Flex
-        width="fit-content"
-        variant="basic"
+        width={width}
+        variant="raw"
         align={labelPosition === LablePosition.Left ? 'center' : 'start'}
         dir={labelPosition === LablePosition.Left ? 'row' : 'column'}
         margin={margin}

src/components/Radio/Radio.tsx

@@ -70,7 +70,7 @@ export const Radio = (props: Props) => {
       <Text
         margin="0 5px"
         as="span"
-        variant="b3"
+        variant="b1"
         color={disabled ? 'gray2' : 'highlightText'}
       >
         {label}

src/components/Select/Select.tsx

@@ -60,23 +60,25 @@ const DropdownIndicator = (props: DropdownIndicatorProps) => {
   );
 };
 
-const Option = ({ children, ...props }: SelectOptionProps) => (
-  <components.Option {...props} isDisabled>
-    {!props.selectProps.noIcon && (
-      <Icon
-        variant="basic"
-        icon={polyIcons.Image}
-        size="22px"
-        color="gray3"
-        margin="0 9px -5px 0"
-      />
-    )}
-    {children}
-    {/* {oProps.isDisabled && oProps.selectProps.disabledOptionText && (
+const Option = ({ children, ...props }: SelectOptionProps) => {
+  return (
+    <components.Option {...props} isDisabled>
+      {!props.selectProps.noIcon && (
+        <Icon
+          variant="basic"
+          icon={props.data.icon || polyIcons.Image}
+          size="22px"
+          color="gray3"
+          margin="0 9px -5px 0"
+        />
+      )}
+      {children}
+      {/* {oProps.isDisabled && oProps.selectProps.disabledOptionText && (
         <Tooltip>{oProps.selectProps.disabledOptionText}</Tooltip>
       )} */}
-  </components.Option>
-);
+    </components.Option>
+  );
+};
 
 export const Select = ({
   margin,

src/index.ts

@@ -36,6 +36,7 @@ export * from './components/Tooltip';
 export * from './components/DropZone';
 // export * from './components/TextArea';
 // export * from './components/TextCopy'; // (tx hash)
+export * from './components/CountrySelector';
 
 // CONTAINERS
 export * from './components/Box';

src/theme/definitions/launchpad.ts

@@ -238,7 +238,7 @@ export const ICON: Record<IconVariant, CSSPropertiesExtended> = {
   },
   circle: {
     fill: COLOR.brandMain,
-    backgroundColor: COLOR.brandMain,
+    backgroundColor: COLOR.brandLightest,
     borderRadius: '50%',
   },
 };
@@ -343,7 +343,7 @@ export const BUTTON: Record<ButtonVariant, CSSPropertiesExtended> = {
     fontWeight: 'inherit',
     fontSize: 'inherit',
     letterSpacing: 'inherit',
-    color: 'inherit',
+    color: COLOR.brandMain,
     background: 'transparent',
     cursor: 'pointer',
   },
@@ -556,7 +556,7 @@ export const SELECT: any = {
   control: (styles: any, state: any) => ({
     ...styles,
     backgroundColor: state.selectProps.readonly ? COLOR.gray5 : COLOR.light,
-    borderRadius: RADIUS.m,
+    borderRadius: RADIUS.s,
     ...(state.selectProps.isDisabled
       ? {
           borderColor: COLOR.gray5,

src/theme/types.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 
 export type CSSPropertiesExtended = CSSProperties & Record<string, any>;
 
@@ -21,6 +21,7 @@ export const propValueMap: Record<string, string> = {
 export type OptionType = {
   value: string;
   label: string;
+  icon?: ReactNode;
 };
 
 export type Gap = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';