chore: storybook migrate segment, timepicker, select, toast (#137)

* chore: migrated segment

* chore: storybook addon typescript fix

* chore: segment component types

* chore: timepicker migrate

* chore: wip migrate Toast

* chore: use createPreviewTabs

* chore: migrate toast

* chore: migrate select

* chore: removed comments and add MultiCheckbox component

* chore: updated imports and improved toast components

* chore: trying to fix build

* chore: trying to fix build 2

.storybook/main.ts

@@ -1,3 +1,6 @@
+const path = require("path");
+const tsconfig = path.resolve(__dirname, "../tsconfig.json");
+
 module.exports = {
   stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
@@ -7,4 +10,16 @@ module.exports = {
     "@storybook/addon-a11y",
     "@storybook/addon-essentials",
   ],
+  // Need to configure typescript manually otherwise addons will not infer from types
+  // https://github.com/storybookjs/storybook/issues/11146#issuecomment-643878741
+  typescript: {
+    check: false,
+    checkOptions: { tsconfig },
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      tsconfigPath: tsconfig,
+      propFilter: (prop: { name: string }) => !/^(testID)$/.test(prop.name),
+    },
+  },
 };

scripts/create-preview-tabs.ts

@@ -1,4 +1,5 @@
 import {
+  CodeSandboxTemplate,
   DEFAULT_REACT_CODESANDBOX,
   DEFAULT_REACTJS_CODESANDBOX,
 } from "storybook-addon-preview";
@@ -46,3 +47,30 @@ export function createPreviewTabs(props: Props) {
 
   return tabs;
 }
+
+const joinStrs = (strs: string[]) => {
+  return `[${strs.map(str => `"${str}"`).join(", ")}]`;
+};
+
+export const CreateToastSandbox = ({
+  type = "tsx",
+  deps = [],
+}: {
+  type?: string;
+  deps?: string[];
+}) => {
+  const utilTab = type === "tsx" ? "Utils.tsx" : "Utils.jsx";
+  const ReactTab = type === "tsx" ? "React" : "ReactJS";
+
+  return new Function(`
+  var previews = arguments[0];
+  return {
+      framework: "${ReactTab.toLowerCase()}",
+      files: {
+          "src/App.${type}": previews["${ReactTab}"][0],
+          "src/styles.css": previews["CSS"] ? previews["CSS"][0] : "",
+          "src/ToastUtils.component.${type}": previews["${utilTab}"] ? previews["${utilTab}"][0] : "",
+      },
+      userDependencies: ${joinStrs(deps)},
+  };`) as CodeSandboxTemplate;
+};

src/segment/SegmentState.ts

@@ -46,7 +46,13 @@ const TYPE_MAPPING = {
 };
 
 export interface SegmentStateProps {
+  /**
+   * segment value
+   */
   value?: Date;
+  /**
+   * default segment value
+   */
   defaultValue?: Date;
   /**
    * Sets formmating of date based on Intl.DateFormatOptions
@@ -63,7 +69,13 @@ export interface SegmentStateProps {
    *
    */
   formatOptions?: DateTimeFormatOpts;
+  /**
+   * placeholder date
+   */
   placeholderDate?: Date;
+  /**
+   * callback to fire on value change
+   */
   onChange?: (value: Date, ...args: any[]) => void;
 }
 

src/segment/stories/Segment.component.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import {
+  Segment,
+  SegmentField,
+  useSegmentState,
+  SegmentStateProps,
+} from "renderless-components";
+
+interface AppProps extends SegmentStateProps {}
+
+export const App: React.FC<AppProps> = props => {
+  const state = useSegmentState(props);
+
+  return (
+    <div>
+      <SegmentField {...state} className="segment__field">
+        {state.segments.map((segment, i) => (
+          <Segment
+            key={i}
+            segment={segment}
+            className="segment__field--item"
+            {...state}
+          />
+        ))}
+      </SegmentField>
+    </div>
+  );
+};
+
+export default App;

src/segment/stories/Segment.stories.tsx

@@ -1,40 +1,37 @@
+import "./Segment.css";
 import * as React from "react";
-import { Meta } from "@storybook/react";
+import { Meta, Story } from "@storybook/react";
 
-import "./index.css";
-import { Segment } from "../Segment";
-import { SegmentField } from "../SegmentField";
-import { useSegmentState, SegmentStateProps } from "../SegmentState";
+import { App as Segment } from "./Segment.component";
+import {
+  segmentTemplate,
+  segmentTemplateJs,
+  segmentCssTemplate,
+} from "./templates";
+import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
+  component: Segment,
   title: "Segment",
+  parameters: {
+    preview: {
+      preview: createPreviewTabs({
+        ts: segmentTemplate,
+        js: segmentTemplateJs,
+        css: segmentCssTemplate,
+      }),
+    },
+  },
 } as Meta;
 
-const SegmentSpinnerComp: React.FC<SegmentStateProps> = props => {
-  const state = useSegmentState(props);
-
-  return (
-    <div>
-      <SegmentField {...state} className="segment__field">
-        {state.segments.map((segment, i) => (
-          <Segment
-            key={i}
-            segment={segment}
-            className="segment__field--item"
-            {...state}
-          />
-        ))}
-      </SegmentField>
-    </div>
-  );
-};
+const Base: Story = args => <Segment {...args} />;
 
 export const Default = () => (
   <div className="segment_demo">
     <pre>
       year: "numeric", month: "2-digit", day: "2-digit", weekday: "long",
     </pre>
-    <SegmentSpinnerComp
+    <Base
       formatOptions={{
         year: "numeric",
         month: "2-digit",
@@ -44,23 +41,23 @@ export const Default = () => (
     />
 
     <pre>timeStyle: "long", dateStyle: "short"</pre>
-    <SegmentSpinnerComp
+    <Base
       formatOptions={{
         timeStyle: "long",
         dateStyle: "short",
       }}
     />
 
     <pre>timeStyle: "short", dateStyle: "long"</pre>
-    <SegmentSpinnerComp
+    <Base
       formatOptions={{
         timeStyle: "short",
         dateStyle: "long",
       }}
     />
 
     <pre>timeStyle: "full", dateStyle: "full"</pre>
-    <SegmentSpinnerComp
+    <Base
       formatOptions={{
         timeStyle: "full",
         dateStyle: "full",

src/select/SelectState.ts

@@ -39,9 +39,30 @@ export type SelectActions = CompositeActions &
 
 export type SelectInitialState = CompositeInitialState &
   PopoverInitialState & {
+    /**
+     * default selected item
+     *
+     * @default undefined
+     */
     selected?: string;
+    /**
+     * If `true` enables multiple selections
+     *
+     * @default false
+     */
     allowMultiselect?: boolean;
+    /**
+     * If `true` arrow key navigation loops back
+     *
+     * @default false
+     */
     loop?: boolean;
+    /**
+     * If `true` enables the select to work with SelectInput
+     * which acts as combobox
+     *
+     * @default false
+     */
     isCombobox?: boolean;
   };
 

src/select/stories/Combobox.component.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import { CompositeInitialState, PopoverInitialState } from "reakit";
+import {
+  Select,
+  SelectMenu,
+  SelectInput,
+  SelectOption,
+  useSelectState,
+  SelectInitialState,
+} from "renderless-components";
+
+const countries = [
+  { name: "australia", emoji: "🇦🇺" },
+  { name: "russia", emoji: "🇷🇺" },
+  { name: "new zealand", emoji: "🇳🇿" },
+  { name: "india", emoji: "🇮🇳" },
+  { name: "niger", emoji: "🇳🇪" },
+  { name: "canada", emoji: "🇨🇦" },
+  { name: "indonesia", emoji: "🇮🇩" },
+  { name: "portugal", emoji: "🇵🇹" },
+  { name: "norway", emoji: "🇳🇴" },
+  { name: "switzerland", emoji: "🇨🇭" },
+  { name: "africa", emoji: "🇨🇫" },
+  { name: "colombia", emoji: "🇨🇴" },
+  { name: "costa rica", emoji: "🇨🇷" },
+  { name: "zimbabwe", emoji: "🇿🇼" },
+];
+
+type AppProps = Omit<
+  SelectInitialState,
+  keyof (PopoverInitialState & CompositeInitialState)
+>;
+
+export const App: React.FC<AppProps> = props => {
+  const state = useSelectState({
+    ...props,
+    allowMultiselect: true,
+    selected: "india",
+    isCombobox: true,
+  });
+
+  return (
+    <Select
+      {...state}
+      className="select"
+      onChange={(value: any) => console.log(value)}
+    >
+      <div className="select__header">
+        {state.selected.map(item => (
+          <span className="select__chip">
+            <span> {item}</span>
+            <button
+              onClick={e => {
+                e.stopPropagation();
+                state.removeSelected(item);
+              }}
+            >
+              x
+            </button>
+          </span>
+        ))}
+        <SelectInput
+          className="select__input"
+          placeholder={state.isPlaceholder ? "Select.." : ""}
+          {...state}
+        ></SelectInput>
+      </div>
+
+      <SelectMenu className="select__dropdown" {...state}>
+        {countries.map(item => {
+          return (
+            item.name.match(state.inputValue) &&
+            !state.selected.includes(item.name) && (
+              <SelectOption
+                className="select__dropdown--item"
+                {...state}
+                key={item.name}
+                value={item.name}
+              >
+                {item.name}
+              </SelectOption>
+            )
+          );
+        })}
+      </SelectMenu>
+    </Select>
+  );
+};
+
+export default App;