@thecb/components 12.0.0-beta.0 → 12.0.0-beta.2

package/src/components/molecules/module/Module.oldstories.js

@@ -1,31 +0,0 @@
-import React from "react";
-import { text, select } from "@storybook/addon-knobs";
-import Module from "./Module";
-import page from "../../../../.storybook/page";
-
-const variantsLabel = "variant";
-const variants = {
-  default: "default",
-  largeTitle: "largeTitle",
-  None: undefined
-};
-const defaultValue = "default";
-const groupId = "props";
-
-export const module = () => (
-  <Module
-    variant={select(variantsLabel, variants, defaultValue, groupId)}
-    heading={text("heading", "Module Title", groupId)}
-    spacing={text("spacing", "1rem", groupId)}
-    padding={text("padding", "1rem", groupId)}
-    spacingBottom={text("spacingBottom", "2.5rem", groupId)}
-  >
-    {text("child components", "child components go here", groupId)}
-  </Module>
-);
-
-const story = page({
-  title: "Components|Atoms/Module",
-  Component: Module
-});
-export default story;

package/src/components/molecules/pagination/Pagination.oldstories.js

@@ -1,32 +0,0 @@
-import React from "react";
-import { number, text } from "@storybook/addon-knobs";
-import Pagination from "./Pagination";
-import page from "../../../../.storybook/page";
-
-export const pagination = () => (
-  <Pagination
-    activeBorderWidth={text("activeBorderWidth", "3px", "props")}
-    ariaLabel={text("ariaLabel", "Aria Label", "props")}
-    arrowColor={text("arrowColor", "#FFFFFF", "props")}
-    borderRadius={text("borderRadius", "3px", "props")}
-    buttonHeight={text("buttonHeight", "44px", "props")}
-    buttonWidth={text("buttonWidth", "44px", "props")}
-    childGap={text("childGap", "24px", "props")}
-    currentPage={number("currentPage", 2)}
-    fontSize={text("fontSize", "17px", "props")}
-    fontWeight={text("fontWeight", "900", "props")}
-    numberColor={text("numberColor", "#15749D", "props")}
-    pageCount={number("pageCount", 3)}
-    pageNext={() => {}}
-    pagePrevious={() => {}}
-    setCurrentPage={() => {}}
-    // themeValues
-  />
-);
-
-const story = page({
-  title: "Components|Molecules/Pagination",
-  Component: Pagination
-});
-
-export default story;

package/src/components/molecules/tabs/Tabs.oldstories.js

@@ -1,241 +0,0 @@
-import React from "react";
-import { createStore } from "redux";
-import Tabs from "./Tabs";
-
-import page from "../../../../.storybook/page";
-import Text from "../../atoms/text";
-
-import { createFormState, onlyIntegers, required } from "redux-freeform";
-import DisplayBox from "../../atoms/display-box";
-import { Box } from "../../atoms/layouts";
-
-// Including commented out configs as a preliminary work for
-// https://citybase.atlassian.net/browse/KCORE-2973
-// https://citybase.atlassian.net/browse/KCORE-2974
-// https://citybase.atlassian.net/browse/KCORE-2975
-
-const ButtonTest = () => (
-  <DisplayBox>
-    <Text>Test Button Clicks</Text>
-    <Box>
-      <button onClick={() => console.log("BUTTON TEST;")}>Click me</button>
-    </Box>
-  </DisplayBox>
-);
-
-//const creditCardFormConfig = {
-//  amount: {
-//    defaultValue: "100.00",
-//    validators: [required()]
-//  }
-//};
-
-const checkFormConfig = {
-  amount: {
-    defaultValue: "100.00",
-    validators: [required()]
-  },
-  name: {
-    validators: [required()]
-  },
-  accountNumber: {
-    validators: [onlyIntegers()]
-  },
-  routingNumber: {
-    validators: [onlyIntegers()]
-  },
-  checkType: {
-    defaultValue: "Personal"
-  }
-};
-
-//const cashFormConfig = {
-//  amount: {
-//    defaultValue: "100.00",
-//    validators: [required()]
-//  }
-//};
-//
-//const MyCreditCardForm = ({ actions, fields }) => {
-//  return (
-//    <div>
-//      {fields.amount.hasErrors && fields.amount.errors.includes(required.error)
-//        ? "Amount"
-//        : "Amount"}
-//      <input
-//        value={fields.amount.rawValue}
-//        onChange={evt => actions.fields.amount.set(evt.target.value)}
-//        type="text"
-//      />
-//    </div>
-//  );
-//};
-
-const MyCheckForm = ({ actions, fields }) => (
-  <div>
-    {fields.amount.hasErrors && fields.amount.errors.includes(required.error)
-      ? "AmountError"
-      : "Amount"}
-    <input
-      value={fields.amount.rawValue}
-      onChange={evt => actions.fields.amount.set(evt.target.value)}
-      type="text"
-    />
-    {fields.name.hasErrors && fields.name.errors.includes(required.error)
-      ? "Name Error"
-      : "Name"}
-    <input
-      value={fields.name.rawValue}
-      onChange={evt => actions.fields.name.set(evt.target.value)}
-      type="text"
-    />
-    {fields.accountNumber.hasErrors &&
-    fields.accountNumber.errors.includes(required.error)
-      ? "Account Number Error"
-      : "Account Number"}
-    <input
-      value={fields.accountNumber.rawValue}
-      onChange={evt => actions.fields.accountNumber.set(evt.target.value)}
-      type="text"
-    />
-    {fields.routingNumber.hasErrors &&
-    fields.routingNumber.errors.includes(required.error)
-      ? "Routing Number Error"
-      : "Routing Number"}
-    <input
-      value={fields.routingNumber.rawValue}
-      onChange={evt => actions.fields.routingNumber.set(evt.target.value)}
-      type="text"
-    />
-    {fields.checkType.hasErrors &&
-    fields.checkType.errors.includes(required.error)
-      ? "Check Type Error"
-      : "Check Type"}
-    <input
-      value={fields.checkType.rawValue}
-      onChange={evt => actions.fields.checkType.set(evt.target.value)}
-      type="text"
-    />
-  </div>
-);
-
-//const MyCashForm = ({ actions, fields }) => (
-//  <div>
-//    {fields.amount.hasErrors && fields.amount.errors.includes(required.error)
-//      ? "Amount Error"
-//      : "Amount"}
-//    <input
-//      value={fields.amount.rawValue}
-//      onChange={evt => actions.fields.amount.set(evt.target.value)}
-//      type="text"
-//    />
-//  </div>
-//);
-
-//const {
-//  reducer: cardReducer,
-//  mapStateToProps: cardMapStateToProps,
-//  mapDispatchToProps: cardMapDispatchToProps
-//} = createFormState(creditCardFormConfig);
-
-const {
-  reducer: checkReducer,
-  mapStateToProps: checkMapStateToProps,
-  mapDispatchToProps: checkMapDispatchToProps
-} = createFormState(checkFormConfig);
-
-//const {
-//  reducer: cashReducer,
-//  mapStateToProps: cashMapStateToProps,
-//  mapDispatchToProps: cashMapDispatchToProps
-//} = createFormState(cashFormConfig);
-
-//const cardStore = createStore(
-//  cardReducer,
-//  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-//);
-
-const checkStore = createStore(
-  checkReducer,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-);
-
-//const cashStore = createStore(
-//  cashReducer,
-//  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-//);
-
-//const tabsConfig = {
-//  tabs: [
-//    {
-//      label: 'Credit Card',
-//      active: true,
-//      content: MyCreditCardForm(
-//        {...cardMapStateToProps(cardStore.getState())},
-//        {...cardMapDispatchToProps(cardStore.dispatch)}
-//      )
-//    },
-//    {
-//      label: 'Check',
-//      active: true,
-//      content: MyCheckForm(
-//        {...checkMapStateToProps(checkStore.getState())},
-//        {...checkMapDispatchToProps(checkStore.dispatch)}
-//      )
-//    },
-//    {
-//      true: 'Cash',
-//      active: true,
-//      content: MyCashForm(
-//        {...cashMapStateToProps(cashStore.getState())},
-//        {...cashMapDispatchToProps(cashStore.dispatch)}
-//      )
-//    }
-//  ]
-//};
-
-const LOREM = `
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-  deserunt mollit anim id est laborum.
-`;
-
-const tabsConfig = {
-  tabs: [
-    {
-      label: "Credit Card",
-      active: true,
-      content: <Text>{LOREM}</Text>
-    },
-    {
-      label: "Check",
-      active: true,
-      content: MyCheckForm(
-        { ...checkMapStateToProps(checkStore.getState()) },
-        { ...checkMapDispatchToProps(checkStore.dispatch) }
-      )
-    },
-    {
-      label: "Cash",
-      active: true,
-      content: <ButtonTest></ButtonTest>
-    }
-  ]
-};
-
-const HORIZONTAL = "horizontal";
-
-export const tabs = () => (
-  <Tabs tabsConfig={tabsConfig} tabsDisplayMode={HORIZONTAL} />
-);
-
-const story = page({
-  title: "Components|Molecules/Tabs",
-  Component: Tabs
-});
-
-export default story;

package/src/components/molecules/toast-notification/ToastNotification.oldstories.js

@@ -1,105 +0,0 @@
-import React, { useEffect } from "react";
-import ToastNotification from "./ToastNotification";
-import page from "../../../../.storybook/page";
-import { useToastNotification } from "../../../hooks";
-import { ToastVariants } from "../../../types/common";
-import { text } from "@storybook/addon-knobs";
-
-const groupId = "props";
-
-export const toastNotificationSuccess = () => {
-  const {
-    isToastOpen,
-    toastVariant,
-    toastMessage,
-    showToast,
-    hideToast
-  } = useToastNotification();
-
-  useEffect(() => {
-    showToast({
-      message: "Success!",
-      variant: ToastVariants.SUCCESS
-    });
-  }, []);
-
-  return (
-    <ToastNotification
-      variant={toastVariant}
-      message={toastMessage}
-      toastOpen={isToastOpen}
-      closeToastNotification={() => hideToast()}
-      role={text("role", "alert", groupId)}
-      minWidth={text("minWidth", null, groupId)}
-      maxWidth={text("maxWidth", null, groupId)}
-    />
-  );
-};
-
-toastNotificationSuccess.storyName = "Success Toast";
-
-export const toastNotificationError = () => {
-  const {
-    isToastOpen,
-    toastVariant,
-    toastMessage,
-    showToast,
-    hideToast
-  } = useToastNotification();
-
-  useEffect(() => {
-    showToast({
-      message: "An error occurred",
-      variant: ToastVariants.ERROR
-    });
-  }, []);
-
-  return (
-    <ToastNotification
-      variant={toastVariant}
-      message={toastMessage}
-      toastOpen={isToastOpen}
-      closeToastNotification={() => hideToast()}
-      role={text("role", "alert", groupId)}
-      minWidth={text("minWidth", null, groupId)}
-      maxWidth={text("maxWidth", null, groupId)}
-    />
-  );
-};
-toastNotificationError.storyName = "Error Toast";
-
-export const toastNotificationNoAutoHide = () => {
-  const {
-    isToastOpen,
-    toastMessage,
-    showToast,
-    hideToast
-  } = useToastNotification({ timeout: 0 });
-
-  useEffect(() => {
-    showToast({
-      message: "Success!",
-      variant: ToastVariants.SUCCESS
-    });
-  }, []);
-
-  return (
-    <ToastNotification
-      message={toastMessage}
-      toastOpen={isToastOpen}
-      closeToastNotification={() => hideToast()}
-      role={text("role", "alert", groupId)}
-      minWidth={text("minWidth", null, groupId)}
-      maxWidth={text("maxWidth", null, groupId)}
-    />
-  );
-};
-
-toastNotificationNoAutoHide.storyName = "No auto-hide";
-
-const story = page({
-  title: "Components|Molecules/ToastNotification",
-  Component: ToastNotification
-});
-
-export default story;

package/src/stories/Button.stories.ts

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta: Meta<typeof Button> = {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: { onClick: fn() },
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};

package/src/stories/Button.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import './button.css';
-
-interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary?: boolean;
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
-  label: string;
-  /**
-   * Optional click handler
-   */
-  onClick?: () => void;
-}
-
-/**
- * Primary UI component for user interaction
- */
-export const Button = ({
-  primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
-  ...props
-}: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={{ backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};