fix: resolve lint issues

remirror · Jun 16, 2019 · 0b8ea65 · 0b8ea65
1 parent 1752e65
commit 0b8ea65
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 64 deletions.
diff --git a/@remirror/react-utils/src/__tests__/helpers-server.spec.tsx b/@remirror/react-utils/src/__tests__/helpers-server.spec.tsx
@@ -4,53 +4,7 @@
 
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
-import {
-  cloneElement,
-  getElementProps,
-  isManagedRemirrorProvider,
-  isReactDOMElement,
-  isRemirrorExtension,
-  isRemirrorProvider,
-  uniqueClass,
-  updateChildWithKey,
-} from '../helpers';
-import { RemirrorElementType, RemirrorFC } from '../types';
-
-describe('updateChildWithKey', () => {
-  it('handles simple use cases', () => {
-    expect.assertions(2);
-    const original = <div key='test' />;
-    const expected = <div key='test' id='updated' />;
-    const element = <div>{original}</div>;
-    const fn = (child: JSX.Element) => {
-      expect(child).toEqual(original);
-      return expected;
-    };
-
-    expect(updateChildWithKey(element, 'test', fn)[0]).toMatchInlineSnapshot(`
-      <div
-        id="updated"
-      />
-    `);
-  });
-
-  it('handles nested use cases', () => {
-    expect.assertions(2);
-    const original = <div key='test' />;
-    const expected = <div key='test' id='updated' />;
-    const element = <div>{original}</div>;
-    const fn = (child: JSX.Element) => {
-      expect(child).toEqual(original);
-      return expected;
-    };
-
-    expect(updateChildWithKey(element, 'test', fn)[0]).toMatchInlineSnapshot(`
-      <div
-        id="updated"
-      />
-    `);
-  });
-});
+import { cloneElement } from '../helpers';
 
 describe('cloneElement', () => {
   it('clones flat components', () => {

diff --git a/@remirror/react/src/components/__tests__/providers.spec.tsx b/@remirror/react/src/components/__tests__/providers.spec.tsx
@@ -44,7 +44,7 @@ describe('ManagedRemirrorProvider', () => {
   });
 
   it('supports getRootProps via HOC', () => {
-    const { getByRole, getByTestId, debug } = render(
+    const { getByRole, getByTestId } = render(
       <RemirrorManager>
         <ManagedRemirrorProvider initialContent={docNodeBasicJSON}>
           <TestComponentHOC />
@@ -54,7 +54,6 @@ describe('ManagedRemirrorProvider', () => {
     const target = getByTestId('target');
     const editor = getByRole('textbox');
     expect(target).toContainElement(editor);
-    debug();
     expect(editor).toHaveTextContent('basic');
   });
 });
diff --git a/@remirror/react/src/components/providers.tsx b/@remirror/react/src/components/providers.tsx
@@ -18,7 +18,6 @@ export type RemirrorProviderProps = MakeOptional<Omit<RemirrorProps, 'children'>
  * the element is actually rendered that the getRootProp in any nested components is called.
  */
 const RemirrorContextProvider: RemirrorFC<ProviderProps<InjectedRemirrorProps>> = props => {
-  console.log('WRAPPED REMIRROR_CONTEXT_PROVIDER');
   return <RemirrorContext.Provider {...props} />;
 };
 
@@ -39,7 +38,6 @@ export const RemirrorProvider: RemirrorFC<RemirrorProviderProps> = ({ children,
   return (
     <Remirror {...props}>
       {value => {
-        console.log('Within <RemirrorProvider />');
         return <RemirrorContextProvider value={value}>{children}</RemirrorContextProvider>;
       }}
     </Remirror>

diff --git a/@remirror/react/src/components/remirror.tsx b/@remirror/react/src/components/remirror.tsx
@@ -201,7 +201,6 @@ export class Remirror extends Component<RemirrorProps, CompareStateParams> {
   private getRootProps = <GRefKey extends string = 'ref'>(
     options?: GetRootPropsConfig<GRefKey>,
   ): RefKeyRootProps<GRefKey> => {
-    console.log('CALLING GET_ROOT_PROPS');
     if (this.rootPropsConfig.called) {
       throw new Error(
         '`getRootProps` has been called MULTIPLE times. It should only be called ONCE during render.',
@@ -640,12 +639,10 @@ export class Remirror extends Component<RemirrorProps, CompareStateParams> {
         props,
         this.renderChildren(
           updateChildWithKey(children, this.uid, child => {
-            console.log('The child has been found');
             return cloneElement(child, getElementProps(child), ...this.renderChildren(child.props.children));
           }),
         ),
       );
-      console.log('Has getRootProps been called yet..?', this.rootPropsConfig.called);
       return clonedElement;
     } else {
       return isReactDOMElement(element) ? (

diff --git a/@remirror/ui-twitter/src/__tests__/twitter.spec.tsx b/@remirror/ui-twitter/src/__tests__/twitter.spec.tsx
@@ -5,7 +5,7 @@ import { docNodeBasicJSON } from '@test-fixtures/object-nodes';
 import { TwitterUI } from '../';
 
 test('should place the editor within the correct element', () => {
-  const { baseElement, debug, getByTestId, getByRole } = render(
+  const { getByTestId, getByRole } = render(
     <TwitterUI
       userData={[]}
       tagData={[]}
@@ -18,5 +18,4 @@ test('should place the editor within the correct element', () => {
   const editor = getByRole('textbox');
   const wrapper = getByTestId('remirror-editor');
   expect(wrapper).toContainElement(editor);
-  // expect(reactString).toInclude('basic');
 });
diff --git a/@remirror/ui-twitter/src/components/emoji-picker.tsx b/@remirror/ui-twitter/src/components/emoji-picker.tsx
@@ -125,6 +125,10 @@ export const StyledPickerWrapper = styled.div`
     padding: 12px 4px;
     overflow: hidden;
     transition: color 0.1s ease-out;
+    margin: 0;
+    box-shadow: none;
+    background: none;
+    border: none;
   }
   .emoji-mart-anchor:hover,
   .emoji-mart-anchor-selected {
@@ -152,7 +156,7 @@ export const StyledPickerWrapper = styled.div`
 
   .emoji-mart-anchors svg,
   .emoji-mart-anchors img {
-    fill: currentColor;
+    fill: #858585;
     height: 18px;
     width: 18px;
   }
@@ -180,12 +184,22 @@ export const StyledPickerWrapper = styled.div`
     outline: 0;
   }
 
+  .emoji-mart-search input,
+  .emoji-mart-search input::-webkit-search-decoration,
+  .emoji-mart-search input::-webkit-search-cancel-button,
+  .emoji-mart-search input::-webkit-search-results-button,
+  .emoji-mart-search input::-webkit-search-results-decoration {
+    /* remove webkit/blink styles for <input type="search">
+   * via https://stackoverflow.com/a/9422689 */
+    -webkit-appearance: none;
+  }
+
   .emoji-mart-search-icon {
     position: absolute;
-    top: 9px;
-    right: 16px;
+    top: 7px;
+    right: 11px;
     z-index: 2;
-    padding: 0;
+    padding: 2px 5px 1px;
     border: none;
     background: none;
   }
@@ -226,14 +240,32 @@ export const StyledPickerWrapper = styled.div`
     background-color: rgba(255, 255, 255, 0.95);
   }
 
+  .emoji-mart-category-list {
+    margin: 0;
+    padding: 0;
+  }
+
+  .emoji-mart-category-list li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+  }
+
   .emoji-mart-emoji {
     position: relative;
     display: inline-block;
     font-size: 0;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    box-shadow: none;
   }
 
   .emoji-mart-emoji-native {
-    font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'Apple Color Emoji';
+    font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'Apple Color Emoji', 'Twemoji Mozilla',
+      'Noto Color Emoji', 'EmojiOne Color', 'Android Emoji';
   }
 
   .emoji-mart-no-results {
@@ -476,4 +508,16 @@ export const StyledPickerWrapper = styled.div`
   .emoji-mart-skin-tone-6 {
     background-color: #594539;
   }
+
+  /* For screenreaders only, via https://stackoverflow.com/a/19758620 */
+  .emoji-mart-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
 `;
diff --git a/@remirror/ui-twitter/src/components/styled.tsx b/@remirror/ui-twitter/src/components/styled.tsx
@@ -1,4 +1,3 @@
-import { EDITOR_CLASS_SELECTOR } from '@remirror/core';
 import { styled } from '../theme';
 
 /* Styled Components */

diff --git a/@remirror/ui-wysiwyg/src/__tests__/wysiwyg.spec.tsx b/@remirror/ui-wysiwyg/src/__tests__/wysiwyg.spec.tsx
@@ -5,9 +5,8 @@ import { docNodeBasicJSON } from '@test-fixtures/object-nodes';
 import { WysiwygUI } from '..';
 
 test('it renders within an ssr environment', () => {
-  const { debug, getByRole, getByTestId } = render(<WysiwygUI initialContent={docNodeBasicJSON} />);
+  const { getByRole, getByTestId } = render(<WysiwygUI initialContent={docNodeBasicJSON} />);
   const editor = getByRole('textbox');
   const wrapper = getByTestId('remirror-wysiwyg-editor');
   expect(wrapper).toContainElement(editor);
-  // debug();
 });