freemium-ui 1.0.114

package/0001-chore-Adding-popper-support-to-dropdown.patch

@@ -0,0 +1,304 @@
+From 69099ea79a290dd13fc4f05c6d1a22e0db151168 Mon Sep 17 00:00:00 2001
+From: codejets <mukeshkr@freshdesk.com>
+Date: Wed, 30 Dec 2020 11:43:00 +0530
+Subject: [PATCH] chore: Adding popper support to dropdown
+
+This will remove the interaction from the dropdown and we can add that later
+---
+ package.json                                 |  1 +
+ src/components/Dropdown/Dropdown.stories.tsx |  2 +-
+ src/components/Dropdown/DropdownMenu.tsx     | 94 +++++++++-----------
+ src/components/Dropdown/index.tsx            | 71 ++++++++++++---
+ yarn.lock                                    | 22 ++++-
+ 5 files changed, 124 insertions(+), 66 deletions(-)
+
+diff --git a/package.json b/package.json
+index 1deb9b7..3fb95db 100644
+--- a/package.json
++++ b/package.json
+@@ -47,6 +47,7 @@
+     "react": ">=16.13.1",
+     "react-dates": "^21.8.0",
+     "react-dom": ">=16.13.1",
++    "react-popper": "1.3.3",
+     "react-table": "^7.2.1",
+     "react-tippy": "^1.4.0",
+     "react-transition-group": "^4.4.1",
+diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
+index 440bf74..37deb73 100644
+--- a/src/components/Dropdown/Dropdown.stories.tsx
++++ b/src/components/Dropdown/Dropdown.stories.tsx
+@@ -12,7 +12,7 @@ import {Dropdown} from './'
+ const stories = storiesOf('Dropdown', module)
+ stories.addDecorator(withKnobs)
+ stories.addDecorator((story) => {
+-  return <div style={{margin: '200px'}}>{story()}</div>
++  return <div style={{margin: '250px 200px 250px'}}>{story()}</div>
+ })
+ 
+ const allHouses = [
+diff --git a/src/components/Dropdown/DropdownMenu.tsx b/src/components/Dropdown/DropdownMenu.tsx
+index f69b8c4..9333baf 100644
+--- a/src/components/Dropdown/DropdownMenu.tsx
++++ b/src/components/Dropdown/DropdownMenu.tsx
+@@ -129,56 +129,50 @@ const DropdownMenu = withDownshift(
+       return null
+     }
+     return (
+-      <SlideFade initialOffset="-20px" timeout={200} in={isOpen} unmountOnExit>
+-        {(styles: React.CSSProperties) => (
+-          <div
+-            style={{
+-              position: 'absolute',
+-              width: '100%',
+-              zIndex: 1000,
+-              ...styles,
+-            }}
+-          >
+-            <StyledMenuContainer
+-              {...getMenuProps({
+-                onClick: (event: React.MouseEvent<HTMLElement>) => {
+-                  event.stopPropagation()
+-                },
+-              })}
+-              overrideStyles={overrideStyles}
+-            >
+-              {allItems.map((item, index) => {
+-                const canHighlightSelectedIndex =
+-                  allItems.indexOf(selectedItem) === index
+-                return (
+-                  <StyledMenuItem
+-                    {...getItemProps({
+-                      item,
+-                      key: index,
+-                      disabled: item.disabled,
+-                    })}
+-                    key={index}
+-                    isSelectedIndex={canHighlightSelectedIndex}
+-                    canHighlight={highlightedIndex === index}
+-                    disabled={item.disabled}
+-                  >
+-                    <Flex justifyContent="space-between" alignItems="center">
+-                      <Box width="90%" style={{wordBreak: 'break-word'}}>
+-                        {itemComponent
+-                          ? itemComponent(item)
+-                          : itemToString(item)}
+-                      </Box>
+-                      {canHighlightSelectedIndex ? (
+-                        <Icons glyph="check" size={12} viewBox="0 0 8 8" />
+-                      ) : null}
+-                    </Flex>
+-                  </StyledMenuItem>
+-                )
+-              })}
+-            </StyledMenuContainer>
+-          </div>
+-        )}
+-      </SlideFade>
++      <div
++        style={{
++          width: '100%',
++          zIndex: 1000,
++          position: 'relative',
++          display: isOpen ? 'block' : 'none',
++        }}
++      >
++        <StyledMenuContainer
++          {...getMenuProps({
++            onClick: (event: React.MouseEvent<HTMLElement>) => {
++              event.stopPropagation()
++            },
++          })}
++          overrideStyles={overrideStyles}
++        >
++          {allItems.map((item, index) => {
++            const canHighlightSelectedIndex =
++              allItems.indexOf(selectedItem) === index
++            return (
++              <StyledMenuItem
++                {...getItemProps({
++                  item,
++                  key: index,
++                  disabled: item.disabled,
++                })}
++                key={index}
++                isSelectedIndex={canHighlightSelectedIndex}
++                canHighlight={highlightedIndex === index}
++                disabled={item.disabled}
++              >
++                <Flex justifyContent="space-between" alignItems="center">
++                  <Box width="90%" style={{wordBreak: 'break-word'}}>
++                    {itemComponent ? itemComponent(item) : itemToString(item)}
++                  </Box>
++                  {canHighlightSelectedIndex ? (
++                    <Icons glyph="check" size={12} viewBox="0 0 8 8" />
++                  ) : null}
++                </Flex>
++              </StyledMenuItem>
++            )
++          })}
++        </StyledMenuContainer>
++      </div>
+     )
+   },
+ )
+diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
+index 6f160cc..d3262f3 100644
+--- a/src/components/Dropdown/index.tsx
++++ b/src/components/Dropdown/index.tsx
+@@ -2,6 +2,7 @@ import React from 'react'
+ import Downshift from 'downshift'
+ import hoistNonReactStatics from 'hoist-non-react-statics'
+ import styled from 'styled-components'
++import {Manager, Reference, Popper} from 'react-popper'
+ 
+ import DropdownButton from './DropdownButton'
+ import DropdownMenu from './DropdownMenu'
+@@ -54,6 +55,16 @@ export const DROPDOWN_TYPES = {
+ 
+ const DownshiftContext = React.createContext<any>(null)
+ 
++class DropdownWrapper extends React.Component<{scheduleUpdate: any}> {
++  componentDidUpdate() {
++    this.props.scheduleUpdate()
++  }
++
++  render() {
++    return this.props.children
++  }
++}
++
+ export function withDownshift(Component: any) {
+   function Wrapper(props: any, ref: any) {
+     return (
+@@ -86,6 +97,13 @@ type DropdownProps = {
+   onChange?: (value: any) => any
+   itemToString?: (a: any) => any
+   type?: 'button' | 'input'
++  defaultPlacement?:
++    | 'top'
++    | 'top-start'
++    | 'top-end'
++    | 'bottom-start'
++    | 'bottom'
++    | 'bottom-end'
+   filterKey?: string
+   label?: string
+   width?: string
+@@ -114,6 +132,7 @@ export const Dropdown = (props: DropdownProps) => {
+     width = '100%',
+     disabled,
+     isRequired,
++    defaultPlacement,
+     overrideButtonStyles,
+     overrideContainerStyles,
+     ...rest
+@@ -158,20 +177,44 @@ export const Dropdown = (props: DropdownProps) => {
+               children
+             ) : (
+               <>
+-                {DROPDOWN_TYPES.BUTTON === type && (
+-                  <DropdownButton
+-                    disabled={disabled}
+-                    overrideStyles={overrideButtonStyles}
+-                    placeholder={placeholder}
+-                  />
+-                )}
+-                {DROPDOWN_TYPES.INPUT === type && (
+-                  <DropdownInput placeholder={placeholder} />
+-                )}
+-                <DropdownMenu
+-                  itemComponent={itemComponent}
+-                  overrideStyles={overrideContainerStyles}
+-                />
++                <Manager>
++                  <Reference>
++                    {({ref}) => (
++                      <div ref={ref}>
++                        {DROPDOWN_TYPES.BUTTON === type && (
++                          <DropdownButton
++                            disabled={disabled}
++                            overrideStyles={overrideButtonStyles}
++                            placeholder={placeholder}
++                          />
++                        )}
++                        {DROPDOWN_TYPES.INPUT === type && (
++                          <DropdownInput placeholder={placeholder} />
++                        )}
++                      </div>
++                    )}
++                  </Reference>
++
++                  <Popper placement={defaultPlacement || 'top'}>
++                    {({ref, style, scheduleUpdate}) => (
++                      <DropdownWrapper scheduleUpdate={scheduleUpdate}>
++                        <div
++                          ref={ref}
++                          style={{
++                            position: 'absolute',
++                            width: '100%',
++                            ...style,
++                          }}
++                        >
++                          <DropdownMenu
++                            itemComponent={itemComponent}
++                            overrideStyles={overrideContainerStyles}
++                          />
++                        </div>
++                      </DropdownWrapper>
++                    )}
++                  </Popper>
++                </Manager>
+               </>
+             )}
+           </DownshiftContext.Provider>
+diff --git a/yarn.lock b/yarn.lock
+index 519b93f..3c5f856 100644
+--- a/yarn.lock
++++ b/yarn.lock
+@@ -5123,6 +5123,14 @@ create-react-context@0.3.0, create-react-context@^0.3.0:
+     gud "^1.0.0"
+     warning "^4.0.3"
+ 
++create-react-context@<=0.2.2:
++  version "0.2.2"
++  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
++  integrity sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==
++  dependencies:
++    fbjs "^0.8.0"
++    gud "^1.0.0"
++
+ cross-spawn@6.0.5, cross-spawn@^6.0.0:
+   version "6.0.5"
+   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+@@ -6426,7 +6434,7 @@ fb-watchman@^2.0.0:
+   dependencies:
+     bser "2.1.1"
+ 
+-fbjs@^0.8.4:
++fbjs@^0.8.0, fbjs@^0.8.4:
+   version "0.8.17"
+   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+   integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
+@@ -11140,6 +11148,18 @@ react-popper-tooltip@^2.8.3:
+     "@babel/runtime" "^7.9.2"
+     react-popper "^1.3.7"
+ 
++react-popper@1.3.3:
++  version "1.3.3"
++  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.3.tgz#2c6cef7515a991256b4f0536cd4bdcb58a7b6af6"
++  integrity sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==
++  dependencies:
++    "@babel/runtime" "^7.1.2"
++    create-react-context "<=0.2.2"
++    popper.js "^1.14.4"
++    prop-types "^15.6.1"
++    typed-styles "^0.0.7"
++    warning "^4.0.2"
++
+ react-popper@^1.3.7:
+   version "1.3.7"
+   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
+-- 
+2.20.1 (Apple Git-117)
+

package/README.md

@@ -0,0 +1,70 @@
+<h1 align="center">Freemium Ui</h1>
+
+## [DEMO](https://freemium-ui.netlify.app)
+
+[React](https://reactjs.org/) based light weight ui components based on [Styled Components](https://styled-components.com/)
+
+## Installation
+
+Peer Dependencies to be installed
+```
+npm install styled-components
+```
+
+Install the package
+
+```
+npm install @freshdesk/freemium-ui
+```
+
+Please note that `@next` will only point to pre-releases; to get the latest stable release use `@latest` instead.
+
+
+## Usage
+
+Here is a quick example to get you started, **it's all you need**:
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Button } from 'freemium-ui';
+
+function App() {
+  return (
+    <Button>
+      Freemium Button
+    </Button>
+  );
+}
+
+ReactDOM.render(<App />, document.querySelector('#app'));
+```
+
+## Contribution
+
+Install Dependencies
+
+```
+npm install
+```
+Start the app using storybook
+```
+npm run storybook
+```
+Build Freemium Ui Core Components
+```
+npm run build
+```
+
+Generate a PAT with `admin:org`, `write:packages`, `read:packages`, `delete:packages`
+
+Authenticate to npm github package
+
+```
+npm login --registry=https://registry.npmjs.org/
+```
+
+Publish the package to npm
+```
+npm publish
+```