@edvisor/product-language 0.10.0 → 0.10.2

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

@@ -0,0 +1,640 @@
+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
+      },
+    }}
+  />
+)