@edvisor/product-language 0.10.2 → 0.10.4

package/src/lib/components/tree-view/stories/components.tsx

@@ -1,640 +0,0 @@
-import { Flex } from 'components/layout'
-import { Playground } from 'storybook-addon-jarle-monaco'
-import styled from 'styled-components'
-import { TreeView } from '../tree-view'
-import { Label } from 'components/typography'
-import { INode } from '../types'
-import { Borders, Padding, Surface, Text, Typography } from '@foundations'
-import { Checkbox } from 'components/checkbox'
-import { InputText } from 'components/input-field'
-import { is, isDefined } from '@helpers'
-
-const Wrapper = styled(Flex)`
-  gap: 12px;
-  & > div {
-    width: 100%;
-  }
-`
-
-const LeftMenu = styled(Flex)`
-  text-align: left;
-`
-
-const CheckBoxWrapper = styled.div`
-  display: flex;
-  gap: 6px;
-  padding: ${Padding.xs};
-  align-self: flex-start;
-  flex-direction: row-reverse;
-  float: left;
-  width: 250px;
-  div:last-of-type {
-    margin-right: auto;
-  }
-`
-
-const Table = styled.div`
-  background: ${Surface.Default.Default};
-  border-radius: 6px;
-  min-width: 80%;
-`
-
-const Row = styled.div<{ gray?: boolean }>`
-  display: flex;
-  flex-direction: row;
-  background-color: ${(props) => (is(props.gray) ? Surface.Default.Subdued : Surface.Default)};
-  border-bottom: 1px solid ${Borders.Default.Subdued};
-`
-
-const Column = styled.div`
-  ${Typography.Body}
-  display: flex;
-  padding: ${Padding.s};
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  justify-content: space-between;
-  &:nth-child(1) {
-    flex: 2;
-  }
-`
-
-const HeaderColumn = styled(Column)`
-  color: ${Text.Subdued};
-`
-
-const TableWrapper = styled.div`
-  display: flex;
-  align-self: baseline;
-  justify-content: center;
-`
-
-const randomText = [
-  'Lorem ipsum odor amet', 
-  'consectetuer adipiscing elit', 
-  'Dictumst eu ante pharetra senectus',
-  'Ullamcorper massa turpis sollicitudin cras',
-  'Suscipit libero pulvinar',
-  'Ridiculus arcu hac sagittis',
-  'Rhoncus fringilla curabitur enim',
-  'Risus scelerisque commodo',
-  'Libero lectus dignissim aliquam',
-  'Mauris ante mauris'
-]
-
-const SelectedHeader = () => (
-  <Row gray>
-    <HeaderColumn><Label subdued>Selected Nodes</Label></HeaderColumn>
-  </Row>
-)
-
-
-const ExpandedHeader = () => (
-  <Row gray>
-    <HeaderColumn><Label subdued>Expanded Nodes</Label></HeaderColumn>
-  </Row>
-)
-
-const multilevel: INode[] = [
-  {
-    value: 'item 1',
-    label: 'item_1',
-    children: [
-      {
-        value: 'item 1.1',
-        label: 'item_1.1',
-        children: [
-          {
-            value: 'item 1.1.1',
-            label: 'item_1.1.1'
-          },
-          {
-            value: 'item 1.1.2',
-            label: 'item_1.1.2'
-          },
-          {
-            value: 'item 1.1.3',
-            label: 'item_1.1.3'
-          },
-          {
-            value: 'item 1.1.4',
-            label: 'item_1.1.4'
-          },
-          {
-            value: 'item 1.1.5',
-            label: 'item_1.1.5'
-          }    
-        ]
-      },
-      {
-        value: 'item 1.2',
-        label: 'item_1.2'
-      },
-      {
-        value: 'item 1.3',
-        label: 'item_1.3'
-      },
-      {
-        value: 'item 1.4',
-        label: 'item_1.4',
-        children: [
-          {
-            value: 'item 1.4.1',
-            label: 'item_1.4.1',
-          },
-          {
-            value: 'item 1.4.2',
-            label: 'item_1.4.2',
-          },
-          {
-            value: 'item 1.4.3',
-            label: 'item_1.4.3',
-            children: [
-              {
-                value: 'item 1.4.3.1',
-                label: 'item_1.4.3.1',
-              },
-              {
-                value: 'item 1.4.3.2',
-                label: 'item_1.4.3.2',
-              }
-            ]
-          }
-        ]
-      }    
-    ]
-  },
-  {
-    value: 'item 2',
-    label: 'item_2',
-    children: [
-      {
-        value: 'item 2.1',
-        label: 'item_2.1'
-      },
-      {
-        value: 'item 2.2',
-        label: 'item_2.2'
-      },
-      {
-        value: 'item 2.3',
-        label: 'item_2.3',
-        children: [
-          {
-            value: 'item 2.3.1',
-            label: 'item_2.3.1',
-          },
-          {
-            value: 'item 2.3.2',
-            label: 'item_2.3.2',
-          },
-        ]
-      },
-    ]
-  },
-  {
-    value: 'item 3',
-    label: 'item_3',
-    children: [
-      {
-        value: 'item 3.1',
-        label: 'item_3.1'
-      },
-      {
-        value: 'item 3.2',
-        label: 'item_3.2'
-      },
-      {
-        value: 'item 3.3',
-        label: 'item_3.3'
-      },
-      {
-        value: 'item 3.4',
-        label: 'item_3.4'
-      },
-      {
-        value: 'item 3.5',
-        label: 'item_3.5'
-      },
-    ]
-  },
-  {
-    value: 'item 4',
-    label: 'item_4'
-  },
-  {
-    value: 'item 5',
-    label: 'item_5',
-  },
-  {
-    value: 'item 6',
-    label: 'item_6'
-  }
-]
-
-const countryNodes: INode[] = [
-  {
-    value: 'south_america',
-    label: 'South America',
-    children: [
-      {
-        value: 'brasil',
-        label: 'Brasil'
-      },
-      {
-        value: 'argentina',
-        label: 'Argentina'
-      },
-      {
-        value: 'uruguay',
-        label: 'Uruguay'
-      },
-      {
-        value: 'peru',
-        label: 'Peru'
-      },
-      {
-        value: 'chile',
-        label: 'Chile'
-      },
-      {
-        value: 'venezuela',
-        label: 'Venezuela'
-      }
-    ]
-  },
-  {
-    value: 'north_america',
-    label: 'North America',
-    children: [
-      {
-        value: 'canada',
-        label: 'Canada'
-      },
-      {
-        value: 'usa',
-        label: 'USA'
-      },
-      {
-        value: 'mexico',
-        label: 'Mexico'
-      }
-    ]
-  },
-  {
-    value: 'europe',
-    label: 'Europe',
-    children: [
-      {
-        value: 'uk',
-        label: 'United Kingdom'
-      },
-      {
-        value: 'france',
-        label: 'France'
-      },
-      {
-        value: 'portugal',
-        label: 'Portugal'
-      },
-      {
-        value: 'spain',
-        label: 'Spain'
-      },
-      {
-        value: 'ireland',
-        label: 'Ireland'
-      }
-    ]
-  },
-  {
-    value: 'africa',
-    label: 'Africa',
-    children: [
-      {
-        value: 'somalia',
-        label: 'Somalia'
-      },
-      {
-        value: 'uganda',
-        label: 'Uganda'
-      },
-      {
-        value: 'egypt',
-        label: 'Egypt'
-      }
-    ]
-  }
-]
-
-export const PlayGroundTree = () => (
-  <Playground
-    // eslint-disable-next-line no-restricted-syntax
-    code={`
-    const [checked, setChecked] = useState<string[]>();
-    const [showChildCount, setShowChildCount] = useState<boolean>(false);
-    const [title, setTitle] = useState<string>('Country Selection');
-    const [nodes, setNodes] = useState<INode[]>(JSON.parse(JSON.stringify(countryNodes)));
-    const [disabledAfrica, setDisabledAfrica] = useState<boolean>(false);
-    const [errorEurope, setErrorEurope] = useState<boolean>(false);
-    const [useCardContainer, setUseCardContainer] = useState<boolean>(true);
-    
-    
-    useEffect(() => {    
-      const newNodes = nodes.map((_node) => {
-        if(_node.value === 'europe') {
-          _node.invalid = errorEurope
-          if (isDefined(_node.children)) {
-            _node.children = _node.children.map((_childNode) => ({
-              ..._childNode,
-              invalid: errorEurope
-            }))
-          }
-        }
-        return _node
-      })
-      setNodes(newNodes);
-      
-    },[errorEurope]);
-  
-    useEffect(() => {    
-      const newNodes = nodes.map((_node) => {
-        if(_node.value === 'africa') {
-          _node.disabled = disabledAfrica
-        }
-        return _node
-      })
-      setNodes(newNodes);
-      
-    },[disabledAfrica]);
-
-    const onCheck = (newChecked: string[]) => {
-      setChecked(newChecked);
-    }
-
-    <Wrapper center>
-      <LeftMenu column>
-        <div style={{width: '260px'}}>
-          <InputText label='Change Three Label' value={title} onChange={setTitle}/>
-        </div>
-        <CheckBoxWrapper>
-          <Checkbox checked={showChildCount} onChange={() => setShowChildCount(!showChildCount)}/>
-          <Label>Show Child Count : </Label>
-        </CheckBoxWrapper>
-        <CheckBoxWrapper>
-          <Checkbox checked={disabledAfrica} onChange={() => setDisabledAfrica(!disabledAfrica)}/>
-          <Label>Disable Africa Nodes: </Label>
-        </CheckBoxWrapper>
-        <CheckBoxWrapper>
-          <Checkbox checked={useCardContainer} onChange={() => setUseCardContainer(!useCardContainer)}/>
-          <Label>Use Card Container: </Label>
-        </CheckBoxWrapper>
-        <CheckBoxWrapper>
-          <Checkbox checked={errorEurope} onChange={() => setErrorEurope(!errorEurope)}/>
-          <Label>Set error for Europe Nodes: </Label>
-        </CheckBoxWrapper>
-      </LeftMenu>
-    <div>
-      <TreeView
-        nodes={nodes}
-        checkedList={checked}
-        onCheck={onCheck}
-        title={title}
-        useCardContainer={useCardContainer}
-        showChildCount={showChildCount}
-      />
-    </div>
-    </Wrapper>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        is,
-        Label,
-        Wrapper,
-        TreeView,
-        countryNodes,
-        Checkbox,
-        InputText,
-        LeftMenu,
-        isDefined,
-        CheckBoxWrapper
-      },
-    }}
-  />
-)
-
-export const TreeOpenCheckedNodes = () => (
-  <Playground
-    // eslint-disable-next-line no-restricted-syntax
-    code={`
-    const [checked, setChecked] = useState<string[]>(['somalia', 'uganda', 'egypt', 'ireland', 'france']);
-    const [expanded, setExpanded] = useState<string[]>(['africa', 'europe']);
-
-    const onCheck = (newChecked: string[]) => {
-      setChecked(newChecked);
-    }
-
-    <Wrapper center>
-      <div>
-        <TreeView
-        checkedList={checked}
-        nodes={JSON.parse(JSON.stringify(countryNodes))}
-        onCheck={onCheck}
-        expanded={expanded}
-      />
-      </div>
-      <TableWrapper>
-        <Table>
-          <SelectedHeader/>
-          {
-            checked?.map((node, i) => 
-              <Row key={\`\${node}-\${i}\`}>
-                <Column>{node}</Column>
-              </Row>)
-          }
-        </Table>  
-      </TableWrapper>
-    </Wrapper>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Table,
-        Row, 
-        Column,
-        SelectedHeader,
-        Label,
-        Wrapper,
-        TreeView,
-        TableWrapper,
-        countryNodes
-      },
-    }}
-  />
-)
-
-
-export const NodesWithMessage = () => (
-  <Playground
-    // eslint-disable-next-line no-restricted-syntax
-    code={`
-
-    const [checked, setChecked] = useState<string[]>([]);
-    const [nodes, setNodes] = useState<INode[]>([]);
-
-    const onCheck = (newChecked: string[]) => {
-      setChecked(newChecked);
-    }
-
-      useEffect(() => {
-        setNodes(JSON.parse(JSON.stringify(countryNodes)).map((_node) => {          
-          if (isDefined(_node.children)) {
-            _node.children = _node.children.map((_childNode) => ({
-              ..._childNode,
-              helpfulMessage: randomText[Math.floor(Math.random()*randomText.length)]
-            }))
-          }
-          return _node
-        }))
-      },[]);
-
-    <Wrapper center>
-      <div style={{width: '350px', margin: 'auto'}}>
-        <TreeView
-          checkedList={checked}
-          nodes={nodes}
-          onCheck={onCheck}
-        />
-      </div>
-    </Wrapper>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Label,
-        Wrapper,
-        TreeView,
-        isDefined,
-        randomText,
-        countryNodes
-      },
-    }}
-  />
-)
-
-export const MultilevelTree = () => (
-  <Playground
-    // eslint-disable-next-line no-restricted-syntax
-    code={`
-
-    const [checked, setChecked] = useState<string[]>([]);
-
-    const onCheck = (newChecked: string[]) => {
-      setChecked(newChecked);
-    }
-
-    <Wrapper center>
-      <div style={{width: '350px', margin: 'auto'}}>
-        <TreeView
-          checkedList={checked}
-          nodes={JSON.parse(JSON.stringify(multilevel))}
-          onCheck={onCheck}
-          showChildCount
-        />
-      </div>
-    </Wrapper>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Label,
-        Wrapper,
-        TreeView,
-        isDefined,
-        multilevel
-      },
-    }}
-  />
-)
-
-export const TreeEvents = () => (
-  <Playground
-    // eslint-disable-next-line no-restricted-syntax
-    code={`
-    
-    const [checked, setChecked] = useState<string[]>()
-    const [expanded, setExpanded] = useState<string[]>()
-    
-  
-    const onCheck = (newChecked: string[], node?: ICheckNode) => {
-      setChecked(newChecked)
-      alert(\`Checked : \${JSON.stringify(node)}\`)
-    }
-  
-    const onExpand = (newExpanded: string[], node?: IExpandNode) => {
-      setExpanded(newExpanded)
-      alert(\`Expanded : \${JSON.stringify(node)}\`)
-    }
-  
-    const onClick = (node: ICheckNode) => {
-      alert(\`Clicked on label \${node.label}\`)
-    }
-
-    
-    <Wrapper center>
-    <div style={{alignSelf: 'baseline'}}> 
-      <TreeView
-        nodes={JSON.parse(JSON.stringify(countryNodes))}
-        expanded={expanded}
-        onClick={onClick}
-        onCheck={onCheck}
-        checkedList={checked}
-        onExpand={onExpand}
-      />
-    </div>
-    <TableWrapper>
-      <div style={{minWidth: '40%'}}>
-        <Table>
-          <SelectedHeader/>
-          {
-            checked?.map((node, i) => 
-              <Row key={\`\${node}-\${i}\`}>
-                <Column>{node}</Column>
-              </Row>)
-          }
-        </Table>
-      </div>
-      <div style={{minWidth: '40%'}}>
-        <Table>
-          <ExpandedHeader/>
-          {
-            expanded?.map((node, i) => 
-              <Row key={\`\${node}-\${i}\`}>
-                <Column>{node}</Column>
-              </Row>)
-          }
-        </Table>
-      </div>  
-    </TableWrapper>
-    </Wrapper>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Table,
-        Row,
-        Column, 
-        Label,
-        Wrapper,
-        TreeView,
-        isDefined,
-        randomText,
-        countryNodes,
-        TableWrapper,
-        ExpandedHeader,
-        SelectedHeader
-      },
-    }}
-  />
-)