@innovaccer/design-system 2.9.1 → 3.0.0-2

package/docs/src/components/PropsTable/ArgJsDoc.tsx

@@ -1,102 +0,0 @@
-import React, { FC } from 'react';
-import { styled } from '@storybook/theming';
-import { JsDocTags } from './types';
-import { codeCommon } from './Shared';
-
-interface ArgJsDocArgs {
-  tags: JsDocTags;
-}
-
-export const Table = styled.table(({ theme }) => ({
-  '&&': {
-    // Escape default table styles
-    borderCollapse: 'collapse',
-    borderSpacing: 0,
-    border: 'none',
-
-    tr: {
-      border: 'none !important',
-      background: 'none',
-    },
-
-    'td, th': {
-      padding: 0,
-      border: 'none',
-      width: 'auto!important',
-    },
-    // End escape
-
-    marginTop: 0,
-    marginBottom: 0,
-
-    'th:first-of-type, td:first-of-type': {
-      paddingLeft: 0,
-    },
-
-    'th:last-of-type, td:last-of-type': {
-      paddingRight: 0,
-    },
-
-    td: {
-      paddingTop: 0,
-      paddingBottom: 4,
-
-      '&:not(:first-of-type)': {
-        paddingLeft: 10,
-        paddingRight: 0,
-      },
-    },
-
-    tbody: {
-      boxShadow: 'none',
-      border: 'none',
-    },
-
-    code: codeCommon(),
-
-    '& code': {
-      margin: 0,
-      display: 'inline-block',
-      fontSize: theme.typography.size.s1,
-    },
-  },
-}));
-
-export const ArgJsDoc: FC<ArgJsDocArgs> = ({ tags }) => {
-  const params = (tags.params || []).filter(
-    (x) => x.description
-  );
-  const hasDisplayableParams = params.length !== 0;
-  const hasDisplayableReturns =
-    tags.returns != null &&
-    tags.returns.description != null;
-
-  if (!hasDisplayableParams && !hasDisplayableReturns) {
-    return null;
-  }
-
-  return (
-    <Table>
-      <tbody>
-        {hasDisplayableParams &&
-          params.map((x) => {
-            return (
-              <tr key={x.name}>
-                <td>
-                  <code>{x.name}</code>
-                </td>
-                <td>{x.description}</td>
-              </tr>
-            );
-          })}
-        {hasDisplayableReturns && (
-          <tr key="returns">
-            <td>
-              <code>Returns</code>
-            </td>
-          </tr>
-        )}
-      </tbody>
-    </Table>
-  );
-};

package/docs/src/components/PropsTable/ArgRow.tsx

@@ -1,142 +0,0 @@
-import React, { FC } from 'react';
-import Markdown from 'markdown-to-jsx';
-import { transparentize } from 'polished';
-import { styled } from '@storybook/theming';
-import { ArgType, Args, TableAnnotation } from './types';
-import { ArgJsDoc } from './ArgJsDoc';
-import { ArgValue } from './ArgValue';
-import { theme } from './theme';
-// import { ArgControl, ArgControlProps } from './ArgControl';
-import { codeCommon } from './Shared';
-
-export interface ArgRowProps {
-  row: ArgType;
-  arg: any;
-  updateArgs?: (args: Args) => void;
-  compact?: boolean;
-  expandable?: boolean;
-  initialExpandedArgs?: boolean;
-}
-
-const Name = styled.span({ fontWeight: 'bold' });
-
-const Required = styled.span(() => ({
-  color: theme.color.negative,
-  fontFamily: theme.typography.fonts.mono,
-  cursor: 'help',
-}));
-
-const Description = styled.div(() => ({
-  '&&': {
-    p: {
-      margin: '0 0 10px 0',
-    },
-    a: {
-      color: theme.color.secondary,
-    },
-  },
-
-  code: codeCommon(),
-
-  '& code': {
-    margin: 0,
-    display: 'inline-block',
-  },
-}));
-
-const Type = styled.div<{ hasDescription: boolean }>(
-  ({ hasDescription }) => ({
-    color:
-      theme.base === 'light'
-        ? transparentize(0.1, theme.color.defaultText)
-        : transparentize(0.2, theme.color.defaultText),
-    marginTop: hasDescription ? 4 : 0,
-  })
-);
-
-const TypeWithJsDoc = styled.div<{
-  hasDescription: boolean;
-}>(({ hasDescription }) => ({
-  color:
-    theme.base === 'light'
-      ? transparentize(0.1, theme.color.defaultText)
-      : transparentize(0.2, theme.color.defaultText),
-  marginTop: hasDescription ? 12 : 0,
-  marginBottom: 12,
-}));
-
-const StyledTd = styled.td<{ expandable: boolean }>(
-  ({ expandable }) => ({
-    paddingLeft: '20px',
-  })
-);
-
-export const ArgRow: FC<ArgRowProps> = (props) => {
-  const {
-    row,
-    updateArgs,
-    compact,
-    initialExpandedArgs,
-  } = props;
-  const { name, description } = row;
-  const table = (row.table || {}) as TableAnnotation;
-  const type = table.type || row.type;
-  const defaultValue =
-    table.defaultValue || row.defaultValue;
-  const required = row.type?.required;
-  const hasDescription =
-    description != null && description !== '';
-
-  return (
-    <tr>
-      <StyledTd expandable={true}>
-        <Name>{name}</Name>
-        {required ? (
-          <Required title="Required">*</Required>
-        ) : null}
-      </StyledTd>
-      {compact ? null : (
-        <td>
-          {hasDescription && (
-            <Description>
-              <Markdown>{description}</Markdown>
-            </Description>
-          )}
-          {table.jsDocTags != null ? (
-            <>
-              <TypeWithJsDoc
-                hasDescription={hasDescription}
-              >
-                <ArgValue
-                  value={type}
-                  initialExpandedArgs={initialExpandedArgs}
-                />
-              </TypeWithJsDoc>
-              <ArgJsDoc tags={table.jsDocTags} />
-            </>
-          ) : (
-            <Type hasDescription={hasDescription}>
-              <ArgValue
-                value={type}
-                initialExpandedArgs={initialExpandedArgs}
-              />
-            </Type>
-          )}
-        </td>
-      )}
-      {compact ? null : (
-        <td>
-          <ArgValue
-            value={defaultValue}
-            initialExpandedArgs={initialExpandedArgs}
-          />
-        </td>
-      )}
-      {updateArgs ? (
-        <td>
-          {/* <ArgControl {...(props as ArgControlProps)} /> */}
-        </td>
-      ) : null}
-    </tr>
-  );
-};

package/docs/src/components/PropsTable/ArgValue.tsx

@@ -1,182 +0,0 @@
-import React, { FC, useState } from 'react';
-import { styled } from '@storybook/theming';
-import uniq from 'lodash/uniq';
-import { PropSummaryValue } from './types';
-import { theme } from './theme';
-import { codeCommon } from './Shared';
-
-interface ArgValueProps {
-  value?: PropSummaryValue;
-  initialExpandedArgs?: boolean;
-}
-
-interface ArgTextProps {
-  text: string;
-  simple?: boolean;
-}
-
-interface ArgSummaryProps {
-  value: PropSummaryValue;
-  initialExpandedArgs?: boolean;
-}
-
-const ITEMS_BEFORE_EXPANSION = 8;
-
-const Summary = styled.div<{ isExpanded?: boolean }>(
-  ({ isExpanded }) => ({
-    display: 'flex',
-    flexDirection: isExpanded ? 'column' : 'row',
-    flexWrap: 'wrap',
-    alignItems: 'flex-start',
-    marginBottom: '-4px',
-    minWidth: 100,
-  })
-);
-
-const Text = styled.span<{ simple?: boolean }>(
-  codeCommon,
-  ({ simple = false }) => ({
-    flex: '0 0 auto',
-    fontFamily: theme.typography.fonts.mono,
-    fontSize: '12px',
-    wordBreak: 'break-word',
-    whiteSpace: 'normal',
-    maxWidth: '100%',
-    margin: 0,
-    marginRight: '4px',
-    marginBottom: '4px',
-    paddingTop: '2px',
-    paddingBottom: '2px',
-    lineHeight: '13px',
-    ...(simple && {
-      background: 'transparent',
-      border: '0 none',
-      paddingLeft: 0,
-    }),
-  })
-);
-
-const ExpandButton = styled.button<{}>(() => ({
-  fontFamily: theme.typography.fonts.mono,
-  color: theme.color.secondary,
-  marginBottom: '4px',
-  background: 'none',
-  border: 'none',
-}));
-
-const Expandable = styled.div<{}>(
-  codeCommon,
-  ({ theme }) => ({
-    fontFamily: theme.typography.fonts.mono,
-    color: theme.color.secondary,
-    fontSize: theme.typography.size.s1, // overrides codeCommon
-    margin: 0,
-    whiteSpace: 'nowrap',
-    display: 'flex',
-    alignItems: 'center',
-  })
-);
-
-const EmptyArg = () => {
-  return <span>-</span>;
-};
-
-const ArgText: FC<ArgTextProps> = ({ text, simple }) => {
-  return <Text simple={simple}>{text}</Text>;
-};
-
-const getSummaryItems = (summary: string) => {
-  if (!summary) return [summary];
-  const splittedItems = summary.split('|');
-  const summaryItems = splittedItems.map((value) =>
-    value.trim()
-  );
-
-  return uniq(summaryItems);
-};
-
-const renderSummaryItems = (
-  summaryItems: string[],
-  isExpanded = true
-) => {
-  let items = summaryItems;
-  if (!isExpanded) {
-    items = summaryItems.slice(0, ITEMS_BEFORE_EXPANSION);
-  }
-
-  return items.map((item) => (
-    <ArgText key={item} text={item === '' ? '""' : item} />
-  ));
-};
-
-const ArgSummary: FC<ArgSummaryProps> = ({
-  value,
-  initialExpandedArgs,
-}) => {
-  const { summary, detail } = value;
-
-  const [isExpanded, setIsExpanded] = useState(
-    initialExpandedArgs || false
-  );
-
-  if (summary === undefined || summary === null)
-    return null;
-  // summary is used for the default value
-  // below check fixes not displaying default values for boolean typescript vars
-  const summaryAsString =
-    typeof summary.toString === 'function'
-      ? summary.toString()
-      : summary;
-
-  if (detail == null) {
-    const cannotBeSafelySplitted = /[(){}[\]<>]/.test(
-      summaryAsString
-    );
-
-    if (cannotBeSafelySplitted) {
-      return <ArgText text={summaryAsString} />;
-    }
-
-    const summaryItems = getSummaryItems(summaryAsString);
-    const itemsCount = summaryItems.length;
-    const hasManyItems =
-      itemsCount > ITEMS_BEFORE_EXPANSION;
-
-    return hasManyItems ? (
-      <Summary isExpanded={isExpanded}>
-        {renderSummaryItems(summaryItems, isExpanded)}
-        <ExpandButton
-          onClick={() => setIsExpanded(!isExpanded)}
-        >
-          {isExpanded
-            ? 'Show less...'
-            : `Show ${
-                itemsCount - ITEMS_BEFORE_EXPANSION
-              } more...`}
-        </ExpandButton>
-      </Summary>
-    ) : (
-      <Summary>{renderSummaryItems(summaryItems)}</Summary>
-    );
-  }
-
-  return (
-    <Expandable className="sbdocs-expandable">
-      <span>{summaryAsString}</span>
-    </Expandable>
-  );
-};
-
-export const ArgValue: FC<ArgValueProps> = ({
-  value,
-  initialExpandedArgs,
-}) => {
-  return value == null ? (
-    <EmptyArg />
-  ) : (
-    <ArgSummary
-      value={value}
-      initialExpandedArgs={initialExpandedArgs}
-    />
-  );
-};

package/docs/src/components/PropsTable/EmptyBlock.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { styled } from '@storybook/theming';
-import { withReset } from './Shared';
-
-const Wrapper = styled.div<{}>(withReset, ({ theme }) => ({
-  backgroundColor:
-    theme.base === 'light' ? 'rgba(0,0,0,.01)' : 'rgba(255,255,255,.01)',
-  borderRadius: theme.appBorderRadius,
-  border: `1px dashed ${theme.appBorderColor}`,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  padding: 20,
-  margin: '25px 0 40px',
-
-  // color: transparentize(0.3, theme.color.defaultText),
-  // fontSize: theme.typography.size.s2,
-}));
-
-export const EmptyBlock = (props: any) => (
-  <Wrapper {...props} className="docblock-emptyblock" />
-);

package/docs/src/components/PropsTable/SectionRow.tsx

@@ -1,126 +0,0 @@
-import React, { useState, FC } from 'react';
-import { transparentize } from 'polished';
-import { styled } from '@storybook/theming';
-// import { Icons } from '../../icon/icon';
-
-type Level = 'section' | 'subsection';
-
-export interface SectionRowProps {
-  label: string;
-  level: Level;
-  initialExpanded?: boolean;
-  colSpan: number;
-}
-
-const FlexWrapper = styled.span<{}>(({ theme }) => ({
-  display: 'flex',
-  lineHeight: '20px',
-  alignItems: 'center',
-}));
-
-const Section = styled.td<{}>(({ theme }) => ({
-  position: 'relative',
-  letterSpacing: '0.35em',
-  textTransform: 'uppercase',
-  fontWeight: theme.typography.weight.black,
-  fontSize: theme.typography.size.s1 - 1,
-  color:
-    theme.base === 'light'
-      ? transparentize(0.4, theme.color.defaultText)
-      : transparentize(0.6, theme.color.defaultText),
-  background: `${theme.background.app} !important`,
-  '& ~ td': {
-    background: `${theme.background.app} !important`,
-  },
-}));
-
-const Subsection = styled.td<{}>(({ theme }) => ({
-  position: 'relative',
-  fontWeight: theme.typography.weight.bold,
-  fontSize: theme.typography.size.s2 - 1,
-  background: theme.background.content,
-}));
-
-const StyledTd = styled.td<{}>(({ theme }) => ({
-  position: 'relative',
-}));
-
-const StyledTr = styled.tr<{}>(({ theme }) => ({
-  '&:hover > td': {
-    backgroundColor: `${theme.background.hoverable} !important`,
-    boxShadow: `${theme.color.mediumlight} 0 - 1px 0 0 inset`,
-    cursor: 'row-resize',
-  },
-}));
-
-const ClickIntercept = styled.button<{}>(() => ({
-  // reset button style
-  background: 'none',
-  border: 'none',
-  padding: '0',
-  font: 'inherit',
-
-  // add custom style
-  position: 'absolute',
-  top: 0,
-  bottom: 0,
-  left: 0,
-  right: 0,
-  height: '100%',
-  width: '100%',
-  color: 'transparent',
-  cursor: 'row-resize !important',
-}));
-
-export const SectionRow: FC<SectionRowProps> = ({
-  level = 'section',
-  label,
-  children,
-  initialExpanded = true,
-  colSpan = 3,
-}) => {
-  const [expanded, setExpanded] = useState(initialExpanded);
-  const Level =
-    level === 'subsection' ? Subsection : Section;
-  // @ts-ignore
-  const itemCount = children?.length || 0;
-  const caption =
-    level === 'subsection'
-      ? `${itemCount} item${itemCount !== 1 ? 's' : ''}`
-      : '';
-  const icon = expanded ? 'arrowdown' : 'arrowright';
-
-  const helperText = `${expanded ? 'Hide' : 'Side'} ${
-    level === 'subsection' ? itemCount : label
-  } item${itemCount !== 1 ? 's' : ''}`;
-
-  return (
-    <>
-      <StyledTr title={helperText}>
-        <Level colSpan={1}>
-          <ClickIntercept
-            onClick={(e) => setExpanded(!expanded)}
-            tabIndex={0}
-          >
-            {helperText}
-          </ClickIntercept>
-          <FlexWrapper>
-            {/* <ExpanderIcon icon={icon} /> */}
-            {label}
-          </FlexWrapper>
-        </Level>
-        <StyledTd colSpan={colSpan - 1}>
-          <ClickIntercept
-            onClick={(e) => setExpanded(!expanded)}
-            tabIndex={-1}
-            style={{ outline: 'none' }}
-          >
-            {helperText}
-          </ClickIntercept>
-          {expanded ? null : caption}
-        </StyledTd>
-      </StyledTr>
-      {expanded ? children : null}
-    </>
-  );
-};

package/docs/src/components/PropsTable/Shared.tsx

@@ -1,53 +0,0 @@
-import { transparentize } from 'polished';
-import { CSSObject, Theme } from '@storybook/theming';
-import { theme } from './theme';
-
-export const headerCommon = (): CSSObject => ({
-  margin: '20px 0 8px',
-  padding: 0,
-  cursor: 'text',
-  position: 'relative',
-  color: theme.color.defaultText,
-  '&:first-of-type': {
-    marginTop: 0,
-    paddingTop: 0,
-  },
-  '&:hover a.anchor': {
-    textDecoration: 'none',
-  },
-  '& tt, & code': {
-    fontSize: 'inherit',
-  },
-});
-
-export const codeCommon = (): CSSObject => ({
-  lineHeight: 1,
-  margin: '0 2px',
-  padding: '3px 5px',
-  whiteSpace: 'nowrap',
-
-  borderRadius: 4,
-  fontSize: '12px',
-  fontWeight: 'bold',
-  border: theme.base === 'light' ? `1px solid #E5E5E5` : `1px solid#E5E5E5`,
-  color:
-    theme.base === 'light'
-      ? transparentize(0.1, theme.color.defaultText)
-      : transparentize(0.3, theme.color.defaultText),
-  backgroundColor: '#F4F4F4',
-});
-
-export const withReset = (): CSSObject => ({
-  fontFamily: 'monospace',
-  fontSize: '14px',
-  margin: 0,
-
-  WebkitFontSmoothing: 'antialiased',
-  MozOsxFontSmoothing: 'grayscale',
-  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-  WebkitOverflowScrolling: 'touch',
-});
-
-export const withMargin: CSSObject = {
-  margin: '16px 0',
-};