@innovaccer/design-system 2.7.0 → 2.9.0-0

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

@@ -0,0 +1,142 @@
+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

@@ -0,0 +1,182 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,126 @@
+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

@@ -0,0 +1,53 @@
+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',
+};