freemium-survey-components 0.1.0

package/lib/types/src/survey/widget.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './widget.css';
+declare const WidgetSurvey: ({ children }: any) => JSX.Element;
+export default WidgetSurvey;

package/lib/types/src/utils.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const withDefaults: <P, DP>(component: React.ComponentType<P>, defaultProps: DP) => React.ComponentType<Partial<DP> & Pick<P, Exclude<keyof P, keyof DP>>>;
+export { withDefaults };

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "freemium-survey-components",
+  "version": "0.1.0",
+  "description": "React Survey Ui Components",
+  "main": "lib/index.cjs.js",
+  "module": "lib/index.esm.js",
+  "types": "lib/types",
+  "directories": {
+    "lib": "lib"
+  },
+  "scripts": {
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "lint": "eslint src --fix",
+    "start": "webpack-dev-server --config webpack.config.js",
+    "build:dev": "webpack --config webpack.config.js",
+    "build": "rollup -c rollup.config.ts",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepublishOnly": "rollup -c rollup.config.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/freshdesk/freemium-survey-components.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "keywords": [
+    "Freemium survey",
+    "React",
+    "UI",
+    "Freshsurvey"
+  ],
+  "author": "Freshworks",
+  "bugs": {
+    "url": "https://github.com/freshdesk/freemium-survey-components/issues"
+  },
+  "homepage": "https://github.com/freshdesk/freemium-survey-components#readme",
+  "peerDependencies": {
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "13.0.0",
+    "@rollup/plugin-node-resolve": "8.1.0",
+    "@storybook/addon-actions": "~6.3.12",
+    "@storybook/addon-docs": "~6.3.12",
+    "@storybook/addon-info": "~5.3.19",
+    "@storybook/addon-knobs": "~6.3.0",
+    "@storybook/addon-links": "~6.3.0",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/addons": "~6.3.12",
+    "@storybook/react": "~6.3.12",
+    "@storybook/theming": "~6.3.12",
+    "@types/jest": "25.1.4",
+    "@types/node": "13.9.0",
+    "@types/react": "^17.0.30",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-transition-group": "^4.4.0",
+    "@types/storybook__addon-knobs": "5.2.1",
+    "@types/storybook__react": "5.2.1",
+    "@types/styled-components": "^5.1.0",
+    "@typescript-eslint/eslint-plugin": "^3.0.2",
+    "@typescript-eslint/parser": "^3.0.2",
+    "babel-loader": "8.1.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^6.0.1",
+    "css-loader": "^3.5.3",
+    "eslint": "^7.1.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react-hooks": "^4.0.4",
+    "file-loader": "^6.0.0",
+    "fork-ts-checker-webpack-plugin": "4.1.1",
+    "html-loader": "^1.1.0",
+    "html-webpack-plugin": "^4.3.0",
+    "jest": "25.2.0",
+    "postcss": "^8.3.11",
+    "postcss-preset-env": "^6.7.0",
+    "prettier": "^2.0.5",
+    "react": "^17.0.2",
+    "react-docgen-typescript-loader": "3.7.1",
+    "react-dom": "^17.0.2",
+    "rollup": "2.18.0",
+    "rollup-plugin-postcss": "^4.0.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "0.27.1",
+    "ts-jest": "25.2.1",
+    "ts-loader": "^7.0.5",
+    "typescript": "^3.9.3",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.0"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  // Add your installed PostCSS plugins here:
+  plugins: [require('postcss-preset-env')],
+}

package/rollup.config.ts

@@ -0,0 +1,32 @@
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+import typescript from 'rollup-plugin-typescript2'
+import postcss from 'rollup-plugin-postcss'
+import {terser} from 'rollup-plugin-terser'
+import pkg from './package.json'
+
+const external = (id) => /^react|react-dom/.test(id)
+
+export default {
+  input: 'index.ts',
+  output: [
+    {
+      file: pkg.main,
+      format: 'cjs',
+    },
+    {
+      file: pkg.module,
+      format: 'es',
+    },
+  ],
+  external,
+  plugins: [
+    resolve(),
+    commonjs(),
+    typescript({
+      useTsconfigDeclarationDir: true,
+    }),
+    postcss(),
+    terser(),
+  ],
+}

package/src/components/button/button.stories.tsx

@@ -0,0 +1,23 @@
+import {
+  // boolean,
+  // select,
+  // text,
+  withKnobs,
+} from '@storybook/addon-knobs'
+import {storiesOf} from '@storybook/react'
+import React from 'react'
+import {Button} from '.'
+
+const stories = storiesOf('Button', module)
+stories.addDecorator(withKnobs)
+stories.addDecorator((story) => {
+  return <div style={{margin: '200px'}}>{story()}</div>
+})
+
+stories.add('Variants', () => (
+  <div style={{display: 'flex'}}>
+    <Button size="normal" inline type="primary">
+      Button
+    </Button>
+  </div>
+))

package/src/components/button/index.tsx

@@ -0,0 +1,67 @@
+import React, {RefObject} from 'react'
+import './style.css'
+const Loader = () => <>...</>
+
+export const BUTTON_SIZE_VARIANTS = {
+  LARGE: 'large',
+  MINI: 'mini',
+  NORMAL: 'normal',
+}
+
+export type ButtonSizeKey = 'large' | 'mini' | 'normal' | undefined
+export type buttonHTMLType = 'button' | 'reset' | 'submit' | undefined
+export type buttonType = 'primary' | 'secondary' | 'danger' | 'link'
+
+interface ButtonContainerProps {
+  inline: boolean
+  size: ButtonSizeKey
+  ref?: RefObject<HTMLButtonElement>
+  _type: string
+  btnLoading: boolean
+}
+
+export type ButtonProps = {
+  type?: buttonType
+  htmlType?: buttonHTMLType
+  size?: ButtonSizeKey
+  inline?: boolean
+  disabled?: boolean
+  large?: boolean
+  className?: string
+  ref?: any
+  onClick?: any
+  overrideStyleClassName?: string
+  loading?: boolean
+  children: any
+}
+
+export const Button = (
+  props: ButtonProps & React.HTMLAttributes<HTMLButtonElement>,
+) => {
+  const {
+    inline = false,
+    children,
+    disabled,
+    className = '',
+    htmlType,
+    type = 'primary',
+    onClick,
+    size,
+    overrideStyleClassName = '',
+    loading = false,
+    ...rest
+  } = props
+  return (
+    <button
+      style={inline ? {display: 'inline-block'} : {}}
+      disabled={disabled}
+      className={`action-button ${className} ${overrideStyleClassName}`}
+      type={htmlType}
+      onClick={onClick}
+      //   btnLoading={Boolean(loading)}
+      {...rest}
+    >
+      {loading ? <Loader /> : children}
+    </button>
+  )
+}

package/src/components/button/style.css

@@ -0,0 +1,41 @@
+.action-button {
+  width: auto;
+  display: block;
+  margin: 0;
+  padding: 8px 16px;
+  cursor: pointer;
+  line-height: 1.5;
+  text-align: center;
+  font-weight: 500;
+  letter-spacing: 0.3px;
+  border-radius: 4px;
+  white-space: nowrap;
+  user-select: none;
+  color: #fff;
+  background: var(--primary-button-color);
+  border: 1px solid var(--primary-button-color);
+  border-radius: 4px;
+  min-width: 200px;
+}
+@media (max-width: 550px) {
+  .action-button {
+    min-width: 120px;
+  }
+}
+
+.action-button:not([disabled]):hover {
+  background: var(--primary-button-hover-color);
+  /* background-color: ${hover}; */
+}
+
+.action-button:not([disabled]):active {
+}
+
+.action-button[disabled] {
+  cursor: not-allowed;
+}
+
+button:focus:not(:active) {
+  border: 1px solid transparent;
+  /* box-shadow: 0 0 0 2px ${pseudo.focus}; */
+}

package/src/components/checkbox/checkbox.stories.tsx

@@ -0,0 +1,34 @@
+import {withKnobs} from '@storybook/addon-knobs'
+import {storiesOf} from '@storybook/react'
+import React from 'react'
+import {Checkbox, CheckboxGroup} from './'
+import {useState} from '@storybook/addons'
+
+const stories = storiesOf('Checkbox', module)
+stories.addDecorator(withKnobs)
+stories.addDecorator((story) => {
+  return <div style={{margin: '50px'}}>{story()}</div>
+})
+
+stories.add('Basic', () => {
+  const [checked, setChecked] = useState(['checkA'])
+  return (
+    <div>
+      <div className="question-container">
+        <div className="question">
+          Thank you for your score!. We would like to do better. How can we
+          improve your experience?
+        </div>
+
+        <CheckboxGroup
+          values={checked}
+          onChangeHandler={(values) => setChecked(values)}
+          options={[
+            {id: 'checkA', label: 'Option A'},
+            {id: 'checkB', label: 'Option B'},
+          ]}
+        />
+      </div>
+    </div>
+  )
+})

package/src/components/checkbox/index.tsx

@@ -0,0 +1,118 @@
+import React, {forwardRef} from 'react'
+import {withDefaults} from '../../utils'
+
+import './style.css'
+
+interface CheckboxProps {
+  checked: boolean
+  disabled?: boolean
+  readOnly?: boolean
+  children: string
+  name: string
+  value?: string | number
+  onChange: (
+    event:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.KeyboardEvent<HTMLInputElement>,
+    checked: boolean,
+  ) => void
+  id?: string
+  autoFocus?: boolean
+}
+const defaultProps = {
+  checked: false,
+}
+const TickIcon = () => (
+  <svg
+    id="tick"
+    className="tick-icon"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="title"
+    viewBox="0 0 10 10"
+  >
+    <path
+      d="M3 5.87c-.18666814.00267463-.36667109-.06932655-.5-.2L.21 3.41c-.1786328-.17863279-.24839684-.43899577-.1830127-.6830127.06538414-.24401694.25598306-.43461586.5-.5C.77100423 2.16160316 1.0313672 2.23136721 1.21 2.41L3 4.18 6.8.33c.27679776-.27455556.72320224-.27455556 1 0 .13696438.13025306.21450026.31098915.21450026.5S7.93696438 1.19974694 7.8 1.33L3.45 5.67c-.12082534.11896945-.28072735.19003701-.45.2Z"
+      fill="#fff"
+      fillRule="evenodd"
+    />
+  </svg>
+)
+type Option = {
+  id: string
+  name?: string
+  label: string
+}
+interface CheckboxGroupInterface {
+  options: Array<Option>
+  values: string[]
+  onChangeHandler: (newValues: string[]) => void
+}
+const CheckboxGroup = ({
+  values,
+  options,
+  onChangeHandler,
+}: CheckboxGroupInterface) => {
+  return (
+    <div className="checkbox-group">
+      {options.map((option, index) => (
+        <Checkbox
+          key={option.id}
+          checked={values?.includes(option.id)}
+          name={option.name ?? option.id}
+          id={option.id}
+          autoFocus={index === 0}
+          onChange={(event: any, checked: boolean) => {
+            // if this is present already, remove the value from the array
+            // else, add the value to the array
+            if (checked) {
+              onChangeHandler([...(values || []), option.id])
+            } else {
+              const index = values.indexOf(option.id)
+              if (index > -1) {
+                values.splice(index, 1)
+              }
+              onChangeHandler([...values])
+            }
+          }}
+        >
+          {option.label}
+        </Checkbox>
+      ))}
+    </div>
+  )
+}
+const CheckboxComponent = forwardRef(
+  (props: CheckboxProps, ref?: React.Ref<HTMLInputElement>) => {
+    return (
+      <label className={`checkbox-label ${props.disabled && 'disabled'}`}>
+        <input
+          ref={ref}
+          id={props.id}
+          type="checkbox"
+          name={props.name}
+          readOnly={props.readOnly}
+          disabled={props.disabled}
+          aria-disabled={props.disabled}
+          value={props.value}
+          checked={props.checked}
+          autoFocus={props.autoFocus}
+          onChange={
+            props.readOnly
+              ? () => undefined
+              : (e) => props.onChange(e, e.target.checked)
+          }
+        />
+        <div className="checkbox">
+          {props.checked && (
+            <div className="icon-container">
+              <TickIcon />{' '}
+            </div>
+          )}
+        </div>
+        <div>{props.children}</div>
+      </label>
+    )
+  },
+)
+const Checkbox = withDefaults(CheckboxComponent, defaultProps)
+export {CheckboxGroup}

package/src/components/checkbox/style.css

@@ -0,0 +1,85 @@
+.checkbox-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-direction: column;
+  white-space: nowrap;
+  flex-wrap: wrap;
+}
+.icon-container {
+  display: inline-block;
+  flex: 0 0 12px;
+  width: 12px;
+  height: 12px;
+  min-width: 12px;
+  min-height: 12px;
+  color: inherit;
+  position: absolute;
+  left: 1px;
+  top: 2px;
+}
+.tick-icon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  color: inherit;
+  fill: currentColor;
+}
+input[type='checkbox'] {
+  clip: rect(0px 0px 0px 0px);
+  width: 0px;
+  height: 0px;
+}
+input[type='checkbox']:focus ~ .checkbox {
+  /* box-shadow: ${pseudo.focus} 0px 0px 0px 2px; */
+  box-shadow: var(--input-highlight-color) 0px 0px 0px 2px;
+  border-color: transparent;
+}
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  user-select: none;
+  opacity: 1;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 500;
+  padding: 16px;
+  min-width: 200px;
+  border: 1px solid #ebeff3;
+  box-shadow: 0px 2px 5px rgb(18 52 77 / 10%);
+  border-radius: 4px;
+}
+.checkbox-label.disabled {
+  opacity: 0.5;
+  cursor: 'not-allowed';
+}
+.checkbox {
+  transition: background-color ease-in 0.2s;
+  min-width: 14px;
+  min-height: 14px;
+  border-radius: 2px;
+  position: relative;
+  margin-right: 10px;
+  background-color: #fff;
+  border: 1px solid;
+  border-color: var(--input-highlight-color);
+}
+.checkbox:hover {
+  border-color: var(--input-highlight-color);
+  box-shadow: var(--focus-box-shadow-color) 0px 0px 0px 5px;
+}
+input[type='checkbox']:checked ~ .checkbox {
+  background-color: var(--input-highlight-color);
+  border-color: var(--input-highlight-color);
+}
+input[type='checkbox']:checked ~ .checkbox:hover {
+  border-color: var(--input-highlight-color);
+}
+input[type='checkbox']:disabled ~ .checkbox:hover {
+  box-shadow: unset;
+  border-color: unset;
+}

package/src/components/index.tsx

@@ -0,0 +1,6 @@
+export * from './nps'
+export * from './text-input'
+export * from './checkbox'
+export * from './radio-button'
+export * from './progressbar'
+export * from './button'

package/src/components/nps/index.tsx

@@ -0,0 +1,69 @@
+import React, {useRef} from 'react'
+import './style.css'
+
+export type ButtonShapeType = 'rounded' | 'square' | 'curved'
+
+type NPSProps = {
+  type_info: {
+    linear_scale: {
+      button_shape: ButtonShapeType
+      button_style: any
+    }
+    validation: {
+      min: number
+    }
+    score_presets: {start: string; end: string}
+    footer_text: string
+  }
+  onChangeHandler: (value: number) => void
+  npsValue: number
+}
+
+const NPS = (props: NPSProps) => {
+  const {
+    type_info: {
+      linear_scale: {button_shape, button_style},
+      score_presets: {start, end},
+      validation: {min},
+      footer_text,
+    },
+  } = props
+  const getClassName = (value) => {
+    switch (value) {
+      case value < 4:
+        return 'detractor'
+      case value < 7:
+        return 'passive'
+      default:
+        return 'promoter'
+    }
+  }
+  const values = useRef(Array.from({length: 10}, (_, i) => i + min))
+  return (
+    <div className="container">
+      <div className={`widget ${button_shape} ${button_style}`}>
+        <div className="button-container">
+          <span className="negative-text">{start}</span>
+          <div className="choices">
+            {values.current.map((eachValue) => (
+              <button
+                onClick={(e) => {
+                  props.onChangeHandler(eachValue)
+                }}
+                className={`choice ${getClassName(eachValue)} ${
+                  props.npsValue === eachValue && 'active'
+                }`}
+              >
+                {eachValue}
+              </button>
+            ))}
+          </div>
+          <span className="positive-text">{end}</span>
+        </div>
+      </div>
+      <div className="footer">{footer_text}</div>
+    </div>
+  )
+}
+
+export {NPS}

package/src/components/nps/nps.stories.tsx

@@ -0,0 +1,34 @@
+import {
+  // boolean,
+  // select,
+  // text,
+  withKnobs,
+} from '@storybook/addon-knobs'
+import {storiesOf} from '@storybook/react'
+import React from 'react'
+import {NPSContainer} from '.'
+
+const stories = storiesOf('Nps', module)
+stories.addDecorator(withKnobs)
+stories.addDecorator((story) => {
+  return <div style={{margin: '50px'}}>{story()}</div>
+})
+
+stories.add('Desktop', () => (
+  <NPSContainer
+    onChangeHandler={(value) => {
+      console.log(value)
+    }}
+    values={{buttonShape: 'rounded'}}
+  />
+))
+stories.add('Mobile', () => (
+  <div style={{width: '420px', border: '1px solid', margin: '0 auto'}}>
+    <NPSContainer
+      onChangeHandler={(value) => {
+        console.log(value)
+      }}
+      values={{buttonShape: 'rounded'}}
+    />
+  </div>
+))