wip: starting on dropdown

@remirror/core-types/src/ui-types.ts

@@ -138,6 +138,7 @@ export interface RemirrorThemeVariants {
     default: WithVariants<SxThemeProp>;
     primary: WithVariants<SxThemeProp>;
     secondary: WithVariants<SxThemeProp>;
+    light: WithVariants<SxThemeProp>;
   };
 
   /**
@@ -147,6 +148,17 @@ export interface RemirrorThemeVariants {
     default: WithVariants<SxThemeProp>;
     inverse: WithVariants<SxThemeProp>;
   };
+
+  'remirror:text': {
+    p: WithVariants<SxThemeProp>;
+    h1: WithVariants<SxThemeProp>;
+    h2: WithVariants<SxThemeProp>;
+    h3: WithVariants<SxThemeProp>;
+    h4: WithVariants<SxThemeProp>;
+    h5: WithVariants<SxThemeProp>;
+    h6: WithVariants<SxThemeProp>;
+    label: WithVariants<SxThemeProp>;
+  };
 }
 
 export type KeyOfThemeVariant<GKey extends StringKey<RemirrorThemeVariants>> = StringKey<

@remirror/ui-menus/package.json

@@ -27,6 +27,7 @@
     "@babel/runtime": "^7.5.5",
     "@remirror/core": "0.4.2-canary.2",
     "@remirror/ui": "0.4.2-canary.2",
+    "@remirror/ui-buttons": "0.4.2-canary.2",
     "downshift": "^3.2.12"
   },
   "peerDependencies": {

@remirror/ui-menus/src/dropdown/__stories__/dropdown.stories.tsx

@@ -0,0 +1,7 @@
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { DropDown, DropdownItem } from '..';
+
+const data: DropdownItem[] = [{ label: '' }];
+
+storiesOf('dropdown', module).add('Menu Bar', () => <Dropdown></Dropdown>);

@remirror/ui-menus/src/dropdown/dropdown.tsx

@@ -0,0 +1,108 @@
+import Downshift, { DownshiftProps, DownshiftState } from 'downshift';
+import React, { createContext, FC, ReactElement, ReactNode, useContext, useState } from 'react';
+
+// const DownshiftContext = createContext<DownshiftState<any> | null>(null);
+
+// interface DownshiftProviderProps<GItem = any> extends Omit<DownshiftProps<GItem>, 'children'> {
+//   children?: ReactNode;
+// }
+
+// const DownshiftProvider: <GItem = any>(
+//   props: DownshiftProviderProps<GItem>,
+// ) => ReactElement<DownshiftProviderProps<GItem>> = ({ children, ...props }) => (
+//   <Downshift {...props}>
+//     {value => (
+//       <div>
+//         <DownshiftContext.Provider value={value}>{children}</DownshiftContext.Provider>
+//       </div>
+//     )}
+//   </Downshift>
+// );
+
+// const useDownshift = () => {
+//   const downshiftParams = useContext(DownshiftContext);
+
+//   if (!downshiftParams) {
+//     throw new Error('No context found for downshift');
+//   }
+
+//   return downshiftParams;
+// };
+
+export interface DropdownItem {
+  /**
+   * The string label to render for the dropdown
+   */
+  label: string;
+
+  /**
+   * An optional element which can be rendered in place of the label when provided.
+   */
+  element?: React.ReactNode;
+
+  /**
+   * The value this dropdown represents
+   */
+  value: string;
+
+  /**
+   * What to do when this item is selected
+   */
+  onSelect: (item: DropdownItem) => void;
+}
+
+export interface DropdownProps {
+  /**
+   * The list of items available for this dropdown.
+   */
+  items: DropdownItem[];
+
+  /**
+   * The value when the dropdown is first rendered. Defaults to
+   * the first item in the list.
+   */
+  initialValue?: string;
+}
+
+export const DropDown = ({ items, initialValue = '' }: DropdownProps) => {
+  const itemToString = (item: DropdownItem) => item.value;
+  const [selected, setSelected] = useState(initialValue);
+
+  const onChange = (item: DropdownItem | null) => {
+    if (item) {
+      setSelected(item.value);
+    }
+  };
+
+  return (
+    <Downshift onChange={onChange} selectedItem={selected} itemToString={itemToString}>
+      {({ isOpen, getToggleButtonProps, getItemProps, highlightedIndex, selectedItem: dsSelectedItem }) => (
+        <div>
+          <button className='dropdown-button' {...getToggleButtonProps()}>
+            {this.state.selectedBook !== '' ? this.state.selectedBook : 'Select a book ...'}
+          </button>
+          <div style={{ position: 'relative' }}>
+            // if the input element is open, render the div else render nothing
+            {isOpen ? (
+              <div className='downshift-dropdown'>
+                {// map through all the books and render them
+                this.books.map((item, index) => (
+                  <div
+                    className='dropdown-item'
+                    {...getItemProps({ key: index, index, item })}
+                    style={{
+                      backgroundColor: highlightedIndex === index ? 'lightgray' : 'white',
+                      fontWeight: dsSelectedItem === item ? 'bold' : 'normal',
+                    }}
+                  >
+                    {item.name}
+                  </div>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      )}
+    </Downshift>
+  );
+};

@remirror/ui-menus/src/dropdown/index.ts

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

@remirror/ui-text/jest.config.js

@@ -0,0 +1,7 @@
+const config = require('../../support/jest/jest.config');
+
+module.exports = {
+  ...config,
+  name: '@remirror/ui-text',
+  displayName: 'ui-text',
+};

@remirror/ui-text/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@remirror/ui-text",
+  "description": "ui-text utilities for remirror",
+  "license": "MIT",
+  "author": "Ifiok Jr. <ifiokotung@gmail.com>",
+  "homepage": "https://github.com/ifiokjr/remirror/tree/master/@remirror/ui-text",
+  "repository": "https://github.com/ifiokjr/remirror/tree/master/@remirror/ui-text",
+  "version": "0.4.2-canary.2",
+  "main": "lib/index.js",
+  "module": "lib/dist/ui-text.esm.js",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "build": "run-p build:*",
+    "build:babel": "babel src --out-dir lib --root-mode=upward --extensions \".ts,.tsx\" -s",
+    "build:declaration": "tsc -p ./tsconfig.prod.json --emitDeclarationOnly --declarationMap",
+    "dev": "run-p dev:*",
+    "dev:babel": "babel src --out-dir lib --root-mode=upward --extensions \".ts,.tsx\" -s --watch",
+    "dev:declaration": "tsc -p ./tsconfig.prod.json --emitDeclarationOnly --declarationMap --watch",
+    "lint": "tslint --project tsconfig.lint.json --config ../../tslint.json",
+    "typecheck": "tsc -p ./tsconfig.json --noEmit"
+  },
+  "types": "lib/index.d.ts",
+  "dependencies": {
+    "@babel/runtime": "^7.5.5",
+    "@remirror/core": "0.4.2-canary.2",
+    "@remirror/ui": "0.4.2-canary.2",
+    "@remirror/ui-icons": "0.4.2-canary.2"
+  },
+  "peerDependencies": {
+    "@emotion/core": "^10",
+    "@types/react": "^16.8.0",
+    "@types/react-dom": "^16.8.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
+  "devDependencies": {
+    "@remirror/core-extensions": "0.4.2-canary.2",
+    "prosemirror-model": "^1.7.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "cjs": "lib/dist/ui-text.cjs.js",
+  "meta": {
+    "sizeLimit": "70 KB"
+  },
+  "sideEffects": false
+}

@remirror/ui-text/readme.md

@@ -0,0 +1,11 @@
+# @remirror/ui-text
+
+[![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@remirror/ui-text.svg?style=for-the-badge)](https://bundlephobia.com/result?p=@remirror/ui-text) [![npm](https://img.shields.io/npm/dm/@remirror/ui-text.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@remirror/ui-text) [![Dependencies (path)](https://img.shields.io/david/ifiokjr/remirror.svg?logo=npm&path=@remirror%2Fui-text&style=for-the-badge)](https://github.com/ifiokjr/remirror/blob/master/@remirror/ui-text/package.json) [![NPM](https://img.shields.io/npm/l/@remirror/ui-text.svg?style=for-the-badge)](https://github.com/ifiokjr/remirror/blob/master/LICENSE) [![GitHub issues by-label](https://img.shields.io/github/issues/ifiokjr/remirror/@remirror/ui-text.svg?label=Open%20Issues&logo=github&style=for-the-badge)](https://github.com/ifiokjr/remirror/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%40remirror%2Fui-text) [![GitHub pull requests by-label](https://img.shields.io/github/issues-pr/ifiokjr/remirror/@remirror/ui-text.svg?label=Open%20Pull%20Requests&logo=github&style=for-the-badge)](https://github.com/ifiokjr/remirror/pulls?utf8=%E2%9C%93&q=is%3Apr+is%3Aopen+sort%3Aupdated-desc+label%3A%40remirror%2Fui-text)
+
+Text components for rendering your interface.
+
+## Installation
+
+```bash
+yarn add @remirror/ui-text
+```

@remirror/ui-text/src/__stories__/buttons.stories.tsx

@@ -0,0 +1,31 @@
+import { useRemirrorTheme } from '@remirror/ui';
+import { storiesOf } from '@storybook/react';
+import React, { FC } from 'react';
+import { Button } from '../../src';
+
+const Grid: FC = ({ children }) => {
+  const { sx } = useRemirrorTheme();
+
+  return (
+    <div
+      css={sx({
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',
+        gridGap: 10,
+        justifyContent: 'center',
+        justifyItems: 'center',
+        p: 3,
+      })}
+    >
+      {children}
+    </div>
+  );
+};
+
+storiesOf('Buttons', module).add('Basic', () => (
+  <Grid>
+    <Button content='Button' />
+    <Button content='Button' variant='primary' />
+    <Button content='Button' variant='secondary' />
+  </Grid>
+));

@remirror/ui-text/src/index.ts

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

@remirror/ui-text/src/text.tsx

@@ -0,0 +1,65 @@
+import { KeyOfThemeVariant, omitUndefined, RemirrorInterpolation } from '@remirror/core';
+import { useRemirrorTheme } from '@remirror/ui';
+import { IconProps } from '@remirror/ui-icons';
+import React, { ComponentType, forwardRef, ReactNode } from 'react';
+
+const BaseText = forwardRef<any, any>((props, ref) => null);
+
+export type ButtonProps = Omit<JSX.IntrinsicElements['p'], 'children'> & {
+  variant?: KeyOfThemeVariant<'remirror:buttons'>;
+  color?: string;
+
+  backgroundColor?: string;
+  /**
+   * The text string (or custom component rendered in the button)
+   */
+  content?: ReactNode;
+
+  /**
+   * The icon to display on the right side of the button
+   */
+  RightIconComponent?: ComponentType<IconProps>;
+
+  /**
+   * The icon to display on the left side of the button.
+   */
+  LeftIconComponent?: ComponentType<IconProps>;
+
+  leftIconProps?: Partial<IconProps>;
+  rightIconProps?: Partial<IconProps>;
+
+  /**
+   * Custom styles to add to the icon
+   */
+  style?: RemirrorInterpolation;
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      content,
+      RightIconComponent,
+      LeftIconComponent,
+      leftIconProps = {},
+      rightIconProps = {},
+      color,
+      backgroundColor,
+      variant = 'default',
+      ...props
+    },
+    ref,
+  ) => {
+    const { sx } = useRemirrorTheme();
+    const colorStyles = omitUndefined({ color, backgroundColor });
+    const leftIcon = LeftIconComponent && <LeftIconComponent {...colorStyles} {...leftIconProps} />;
+    const rightIcon = RightIconComponent && <RightIconComponent {...colorStyles} {...rightIconProps} />;
+
+    return (
+      <span {...props} ref={ref} css={sx({ variant: `remirror:buttons.${variant}` }, colorStyles)}>
+        {leftIcon}
+        {content}
+        {rightIcon}
+      </span>
+    );
+  },
+);

@remirror/ui-text/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../support/tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "lib"
+  },
+  "include": ["src"]
+}

@remirror/ui-text/tsconfig.lint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": { "baseUrl": "src", "paths": {} }
+}

@remirror/ui-text/tsconfig.prod.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": { "baseUrl": "src", "paths": {} },
+  "exclude": [
+    "**/*.test.{ts,tsx}",
+    "**/*.stories.{ts,tsx}",
+    "**/*.spec.{ts,tsx}",
+    "**/__mocks__/**",
+    "**/__tests__/**",
+    "**/__stories__/**"
+  ]
+}

package.json

@@ -125,7 +125,7 @@
     "chalk": "2.4.2",
     "cpy-cli": "2.0.0",
     "cross-env": "5.2.0",
-    "dtslint": "0.9.2",
+    "dtslint": "0.9.3",
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.14.0",
     "eslint": "6.2.2",

support/scripts/generate-configs.js

@@ -13,7 +13,6 @@ const baseDir = (...paths) => resolve(__dirname, '../..', join(...paths));
 
 const getAllDependencies = async () => {
   const packages = await getPackages();
-  // packages.forEach(p => console.log(p.rootPath));
   return packages.map(pkg => ({
     ...pkg.toJSON(),
     location: pkg.location,
@@ -64,15 +63,14 @@ const generateTSConfig = async () => {
       };
     }, {});
 
-  console.log(tsPaths);
-
   await writeJSON(baseDir(configs.tsconfig), {
     compilerOptions: {
       baseUrl: '../',
       paths: { ...tsPaths, '@test-fixtures/*': ['support/fixtures/*'] },
     },
   });
 };
+
 const generateStorybookResolverConfig = async () => {
   const packages = await getAllDependencies();
   const resolverConfig = packages