refactor(catalog): storybook for each package & composed storybook

.storybook/Welcome.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Typography } from '@map-colonies/react-core/dist/typography';
+import '@map-colonies/react-core/dist/typography/styles';
+
+export default {
+  title: 'Welcome'
+};
+
+export const ToCatalog = () => <div>
+  <Typography tag="div" style={{ margin: '16px 0' }} use="headline3">
+    Welcome to Map Colonies Catalog
+  </Typography><br/>
+  <Typography tag="div" style={{ margin: '16px 0' }} use="subtitle1">
+    Shared components for Map Colonies organization.
+  </Typography>
+</div>;
+
+ToCatalog.story = {
+  name: 'to Catalog',
+};

.storybook/main.js

@@ -0,0 +1,21 @@
+module.exports = {
+  stories: ['./Welcome.stories.js'],
+  addons: [
+    '@storybook/addon-storysource',
+    '@storybook/addon-actions',
+    '@storybook/addon-knobs',
+    '@storybook/addon-links',
+    '@storybook/addon-docs',
+    'storybook-dark-mode'
+  ],
+  refs: {
+    react_components: { 
+      title: "React Components", 
+      url: "http://localhost:9010"
+    },
+    react_ui_components: { 
+      title: "React UI Components", 
+      url: "http://localhost:9011"
+    }
+  }
+};

.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});

.storybook/preview.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { addParameters } from '@storybook/react';
+import { themes } from '@storybook/theming';
+
+addParameters({
+  docs: {
+    theme: themes.dark,
+  },
+});

.storybook/theme.js

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming';
+import logo from '../public/assets/logo.png';
+
+export default create({
+  base: 'light',
+
+  brandTitle: 'Map Colonies-Catalog',
+  brandImage: logo,
+});

package.json

@@ -49,6 +49,11 @@
     "start:reactstencildemo": "cd demoapp-stencil && yarn start",
     "start:reactdemo": "cd demoapp-react && yarn start",
 
+    "storybook:react-core": "lerna exec --scope @map-colonies/react-core -- yarn storybook",
+    "storybook:react": "lerna exec --scope @map-colonies/react-components -- yarn storybook",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public",
+
     "test:react-core": "lerna exec --scope @map-colonies/react-core -- yarn test:nowatch",
     "test:react": "lerna exec --scope @map-colonies/react-components -- yarn test:nowatch",
     "test:all": "yarn test:react-core && yarn test:react",
@@ -60,6 +65,16 @@
     "prettier:check": "prettier --check ."
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^6.0.21",
+    "@storybook/addon-docs": "^6.0.21",
+    "@storybook/addon-knobs": "^6.0.21",
+    "@storybook/addon-links": "^6.0.21",
+    "@storybook/addon-storysource": "^6.0.21",
+    "@storybook/addons": "^6.0.21",
+    "@storybook/preset-create-react-app": "^3.1.4",
+    "@storybook/react": "^6.0.21",
+    "@storybook/theming": "^6.0.21",
+    "storybook-dark-mode": "^1.0.0",
     "@commitlint/cli": "^9.1.1",
     "@commitlint/config-conventional": "^9.1.1",
     "@map-colonies/eslint-config": "^1.0.3",

packages/react-components/.storybook/main.js

@@ -0,0 +1,12 @@
+module.exports = {
+  stories: ['../src/**/*.stories.tsx'],
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-storysource',
+    '@storybook/addon-actions',
+    '@storybook/addon-knobs',
+    '@storybook/addon-links',
+    '@storybook/addon-docs',
+    'storybook-dark-mode'
+  ],
+};

packages/react-components/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});

packages/react-components/.storybook/preview-head.html

@@ -0,0 +1,10 @@
+<style>
+    #story--map--basic {
+      height: 300px;
+      position: relative;
+    }
+    #story--map--with-drawer {
+      height: 300px;
+      position: relative;
+    }
+</style>

packages/react-components/.storybook/preview.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { addParameters, addDecorator } from '@storybook/react';
+import { ThemeProvider, Themes } from '@map-colonies/react-core';
+import { themes } from '@storybook/theming';
+import { useDarkMode } from 'storybook-dark-mode';
+import '@map-colonies/react-core/dist/rmwc/styles';
+
+addParameters({
+  docs: {
+    theme: themes.dark,
+  },
+});
+
+addDecorator((story) => {
+  const prefersDarkMode = useDarkMode();
+  const theme = prefersDarkMode ? Themes.darkTheme : Themes.lightTheme;
+  return <ThemeProvider options={theme}>
+      {story()}
+    </ThemeProvider>
+});

packages/react-components/.storybook/theme.js

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming';
+import logo from '../../../public/assets/logo.png';
+
+export default create({
+  base: 'light',
+
+  brandTitle: 'Map Colonies-Catalog',
+  brandImage: logo,
+});

packages/react-components/package.json

@@ -49,6 +49,8 @@
     "test:nowatch": "react-scripts test --coverage --watchAll=false --reporters='default' --reporters='jest-html-reporters'",
     "eject": "react-scripts eject",
     "postbuild": "copyfiles -u 2 -e \"**/*.ts\" -e \"**/*.tsx\" \"src/lib/**/*\" dist",
+    "storybook": "start-storybook -p 9010 -s public",
+    "build-storybook": "build-storybook -s public",
     "eslint-check": "npx eslint . --ext .ts,.tsx"
   },
   "browserslist": {
@@ -64,15 +66,6 @@
     ]
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^5.3.19",
-    "@storybook/addon-docs": "^5.3.19",
-    "@storybook/addon-knobs": "^5.3.19",
-    "@storybook/addon-links": "^5.3.19",
-    "@storybook/addon-storysource": "^5.3.19",
-    "@storybook/addons": "^5.3.19",
-    "@storybook/preset-create-react-app": "^3.1.4",
-    "@storybook/react": "^5.3.19",
-    "@storybook/theming": "^5.3.19",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/react-test-renderer": "^16.9.2",

packages/react-components/src/lib/date-range-picker/stories/DateRangePicker.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { DateTimeRangePicker } from '../date-range-picker';
+
+export default {
+  title: 'Picker',
+  component: DateTimeRangePicker,
+};
+
+export const DateTime = () => <DateTimeRangePicker onChange={action('date changed')}/>;
+
+DateTime.story = {
+    name: 'Date time range',
+};

packages/react-components/src/lib/map-filter-container/map-filter-container.tsx

@@ -13,7 +13,7 @@ const useStyle = makeStyles((theme: Theme) =>
     map: {
       height: '100%',
       width: '100%',
-      position: 'fixed',
+      position: 'absolute',
     },
     absolute: {
       position: 'absolute',

packages/react-components/src/lib/map-filter-container/stories/Map.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ContainerMap } from '../container-map';
+import { MapFilterContainer } from '../map-filter-container';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Map',
+  component: ContainerMap,
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+const mapDivStyle = {
+  "height": "100%",
+  "width": "100%",
+  "position": "absolute" as const
+};
+export const Basic = () => <div style={mapDivStyle}>
+    <ContainerMap onPolygonSelection={action('shape selected')}/>
+  </div>;
+
+export const withDrawer = () => <MapFilterContainer
+    handlePolygonReset={action('vector source cleared')}
+    handlePolygonSelected={action('shape selected')}/>;
+
+withDrawer.story = {
+  name: 'with Drawer',
+};

packages/react-components/src/lib/map-filter-container/stories/Select.stories.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { PolygonSelectionUi } from '../polygon-selection-ui';
+import { action } from '@storybook/addon-actions';
+import { DrawType } from '../../models';
+
+export default {
+    title: 'Select',
+    component: PolygonSelectionUi,
+};
+
+export const PolygonBox = () => {    
+    const [active, setActive] = useState(false); 
+
+    const handleStartDraw = (type: DrawType) => {
+        setActive(true);
+        action('draw started')(type);
+    };
+
+    const handleCancelDraw = () => {
+        setActive(false);
+        action('draw canceled')();
+    };
+
+    return <PolygonSelectionUi 
+    isSelectionEnabled={active} 
+    onStartDraw={handleStartDraw}
+    onCancelDraw={handleCancelDraw}
+    onReset={action('cleared')}/>;
+}
+
+PolygonBox.story = {
+    name: 'Shape',
+};

packages/react-components/src/lib/smart-table/stories/SmartTable.stories.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { SmartTable, CellMetadata } from '..';
+import { button } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Smart Table',
+  component: SmartTable,
+};
+
+interface Person {
+  firstName: string;
+  lastName: string;
+  age: number;
+  birthday: string;
+}
+
+const metadata: CellMetadata<Person>[] = [
+  {
+    id: "firstName",
+    label: "First Name",
+    disablePadding: false,
+    numeric: false,
+  },  
+  {
+    id: "lastName",
+    label: "Last Name",
+    disablePadding: false,
+    numeric: false,
+  },  
+  {
+    id: "age",
+    label: "Age",
+    disablePadding: false,
+    numeric: true,
+  },  
+  {
+    id: "birthday",
+    label: "Birthday",
+    disablePadding: false,
+    numeric: false,
+  },  
+];
+
+const persons:Person[] = [
+  {
+    firstName: "Dan",
+    lastName: "Walker",
+    age: 24,
+    birthday: "8-3-1996"
+  },
+  {
+    firstName: "Emily",
+    lastName: "Jhonson",
+    age: 45,
+    birthday: "13-5-1975"
+  },
+  {
+    firstName: "Ron",
+    lastName: "Elen",
+    age: 13,
+    birthday: "7-7-2007"
+  },
+  {
+    firstName: "Michael",
+    lastName: "Wall",
+    age: 60,
+    birthday: "28-9-1960"
+  }
+];
+
+const getRandomPerson = () => persons[Math.floor(Math.random() * persons.length)];
+
+interface TableStroyProps {
+  numberOfItems: number;
+}
+
+const TableStory: React.FC<TableStroyProps> = (props) => {
+  const [rowsPerPage, setRowsPerPage] = useState(5);
+  const [page, setPage] = useState(0);
+  const [items, setItems] = useState([...new Array(props.numberOfItems)].map(getRandomPerson));
+
+  button("ADD ITEM", () => setItems([...items, getRandomPerson()]));
+  button("REMOVE ITEM", () => setItems(items.slice(0, -1))); //remove last
+  button("CLEAR TABLE", () => setItems([]));
+
+  return <SmartTable
+    rowsPerPage={rowsPerPage as (5 | 10)}
+    handleChangePage={(e, newPage) => setPage(newPage)}
+    handleChangeRowsPerPage={(e) => setRowsPerPage(+e.target.value)}
+    page={page}
+    count={items.length}
+    items={items}
+    isCollapseable={true}
+    onRequestSort={action('sort requested')}
+    cellsMetadata={metadata}
+    onRowSelected={action('row selected')}
+    isDense={true}/>
+};
+
+export const Small = () => <TableStory numberOfItems={4}/>
+export const Large = () => <TableStory numberOfItems={60}/>