Repository: laboratoriobridge/bold
Pull request #431 (2019-07-11 17:46:01)

Improve documentation


Patch:
diff --git a/site/components/mdx/index.tsx b/site/components/mdx/index.tsx
index 1524ce2d8..420e09db1 100644
--- a/site/components/mdx/index.tsx
+++ b/site/components/mdx/index.tsx
@@ -61,7 +61,7 @@ const createStyles = (theme: Theme) => ({
     marginBottom: '2rem',
   } as CSSProperties,
   link: {
-    fontSize: '1rem',
+    fontSize: '1em',
   } as CSSProperties,
   heading: {
     marginBottom: '2rem',
@@ -69,6 +69,7 @@ const createStyles = (theme: Theme) => ({
   list: {
     fontSize: '1rem',
     margin: '0 0 2rem 0',
+    lineHeight: 1.5,
   } as CSSProperties,
   image: {
     maxWidth: '100%',
diff --git a/site/pages.ts b/site/pages.ts
index 28a9eac29..1633f399c 100644
--- a/site/pages.ts
+++ b/site/pages.ts
@@ -22,6 +22,16 @@ export default [
       { href: '/design-guidelines/typography', title: 'Typography' },
     ],
   },
+  {
+    title: 'Usage',
+    icon: 'code',
+    href: '/usage',
+    children: [
+      { href: '/usage/styles', title: 'Styles' },
+      { href: '/usage/theme', title: 'Theme' },
+      { href: '/usage/i18n', title: 'Internationalization' },
+    ],
+  },
   {
     title: 'Components',
     icon: 'bricksFilled',
diff --git a/site/pages/getting-started.mdx b/site/pages/getting-started.mdx
index 930f178fb..0496428d7 100644
--- a/site/pages/getting-started.mdx
+++ b/site/pages/getting-started.mdx
@@ -39,3 +39,13 @@ const App = () => {
 
 ReactDOM.render(<App />, document.querySelector('#root'))
 ```
+
+## Interactive demo ([CodeSandbox](https://codesandbox.io))
+
+<iframe
+  src='https://codesandbox.io/embed/black-violet-3ejig?autoresize=1&fontsize=14&view=preview'
+  title='bold-hello-world'
+  allow='geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media'
+  style={{ width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
+  sandbox='allow-modals allow-forms allow-popups allow-scripts allow-same-origin'
+></iframe>
diff --git a/site/pages/usage/i18n/LocaleProvider.demo.tsx b/site/pages/usage/i18n/LocaleProvider.demo.tsx
new file mode 100644
index 000000000..760de2f96
--- /dev/null
+++ b/site/pages/usage/i18n/LocaleProvider.demo.tsx
@@ -0,0 +1,13 @@
+import { LocaleContext, Paginator } from '../../../../lib'
+import ptBr from '../../../../lib/i18n/locales/pt-BR'
+
+function LocaleProviderDemo() {
+  // Using Paginator as example since it uses strings from locale context internally
+  return (
+    <LocaleContext.Provider value={ptBr}>
+      <Paginator page={5} total={10} />
+    </LocaleContext.Provider>
+  )
+}
+
+export default LocaleProviderDemo
diff --git a/site/pages/usage/i18n/index.mdx b/site/pages/usage/i18n/index.mdx
new file mode 100644
index 000000000..82d651d7c
--- /dev/null
+++ b/site/pages/usage/i18n/index.mdx
@@ -0,0 +1,15 @@
+import { Demo } from '../../../components/Demo'
+
+# Internationalization (i18n)
+
+The components use the user browser language to determine the locale.
+
+You can customize the strings used by the components using the `LocaleContent.Provider` component and access them using the `useLocale` hook.
+
+The `useLocale` hook returns a map of strings used internally by some bold components, like Calendar, Paginator etc.
+
+<Demo src='pages/usage/i18n/LocaleProvider' />
+
+## Available locales
+
+Check the available locales on the `src/i18n/locales` folder. Feel free to open a pull request if your locale is not there yet.
diff --git a/site/pages/usage/styles/Css.demo.tsx b/site/pages/usage/styles/Css.demo.tsx
new file mode 100644
index 000000000..e09a30edb
--- /dev/null
+++ b/site/pages/usage/styles/Css.demo.tsx
@@ -0,0 +1,21 @@
+import { useStyles } from '../../../../lib'
+
+function CssDemo() {
+  const { css, theme } = useStyles()
+
+  return (
+    <span
+      className={css({
+        background: theme.pallete.primary.main,
+        borderRadius: 6,
+        padding: '0.25rem 1rem',
+        color: theme.pallete.gray.c100,
+        fontWeight: 'bold',
+      })}
+    >
+      Hello
+    </span>
+  )
+}
+
+export default CssDemo
diff --git a/site/pages/usage/styles/UseStyles.demo.tsx b/site/pages/usage/styles/UseStyles.demo.tsx
new file mode 100644
index 000000000..9a2ed7dba
--- /dev/null
+++ b/site/pages/usage/styles/UseStyles.demo.tsx
@@ -0,0 +1,38 @@
+import { CSSProperties } from 'react'
+
+import { Theme, useStyles } from '../../../../lib'
+
+function UseStylesDemo() {
+  const { classes } = useStyles(createStyles)
+
+  return (
+    <div className={classes.container}>
+      <p className={classes.first}>First paragraph.</p>
+      <p className={classes.second}>Second paragraph</p>
+    </div>
+  )
+}
+
+const createStyles = (theme: Theme) => ({
+  container: {
+    textAlign: 'center',
+
+    '& > p': {
+      fontSize: '1rem',
+      lineHeight: 2,
+    },
+  } as CSSProperties,
+
+  first: {
+    color: theme.pallete.status.danger.main,
+    '&:hover': {
+      background: theme.pallete.surface.background,
+    },
+  } as CSSProperties,
+
+  second: {
+    background: theme.pallete.surface.background,
+  } as CSSProperties,
+})
+
+export default UseStylesDemo
diff --git a/site/pages/usage/styles/index.mdx b/site/pages/usage/styles/index.mdx
new file mode 100644
index 000000000..1722eebbe
--- /dev/null
+++ b/site/pages/usage/styles/index.mdx
@@ -0,0 +1,21 @@
+import { Demo } from '../../../components/Demo'
+
+# Styles
+
+Bold uses CSS-in-JS to style its components, so all the CSS is bundled together with the JS file and attached to the DOM at execution time. We use [emotion](https://emotion.sh), a CSS-in-JS library, to acomplish that.
+
+## Styling with `useStyles` hook
+
+The `useStyles` function is a [React hook](https://reactjs.org/docs/hooks-intro.html) that can be used to generate CSS stylesheets and inject to custom components. It returns an object containing:
+
+- `classes`: A map containing the generated classes, to be used as `className` of your components
+- `css`: The emotion's `css` function which is used to generate the classes
+- `theme`: The current bold theme
+
+<Demo src='pages/usage/styles/UseStyles' />
+
+### Using `css` function
+
+You can also use the `css` function to create stylesheets:
+
+<Demo src='pages/usage/styles/Css' />
diff --git a/site/pages/usage/theme/AccessTheme.demo.tsx b/site/pages/usage/theme/AccessTheme.demo.tsx
new file mode 100644
index 000000000..ae6b2d0e8
--- /dev/null
+++ b/site/pages/usage/theme/AccessTheme.demo.tsx
@@ -0,0 +1,16 @@
+import { useCss, useTheme } from '../../../../lib'
+
+function CustomizeDemo() {
+  const theme = useTheme()
+  const { css } = useCss()
+
+  return (
+    <div className={css({ overflow: 'auto', height: '300px' })}>
+      <pre>
+        <code>{JSON.stringify(theme, null, 2)}</code>
+      </pre>
+    </div>
+  )
+}
+
+export default CustomizeDemo
diff --git a/site/pages/usage/theme/CustomTheme.demo.tsx b/site/pages/usage/theme/CustomTheme.demo.tsx
new file mode 100644
index 000000000..4717f1392
--- /dev/null
+++ b/site/pages/usage/theme/CustomTheme.demo.tsx
@@ -0,0 +1,19 @@
+import { Button, colors, createTheme, HFlow, Tag, ThemeProvider } from '../../../../lib'
+
+const myTheme = createTheme({
+  pallete: {
+    primaryScale: colors.pink,
+  },
+})
+
+function CustomTheme() {
+  return (
+    <ThemeProvider theme={myTheme}>
+      <HFlow>
+        <Button kind='primary'>My custom theme!</Button>
+      </HFlow>
+    </ThemeProvider>
+  )
+}
+
+export default CustomTheme
diff --git a/site/pages/usage/theme/Customize.demo.tsx b/site/pages/usage/theme/Customize.demo.tsx
new file mode 100644
index 000000000..094596358
--- /dev/null
+++ b/site/pages/usage/theme/Customize.demo.tsx
@@ -0,0 +1,14 @@
+import { Button, darkTheme, HFlow, ThemeProvider } from '../../../../lib'
+
+function CustomizeDemo() {
+  return (
+    <ThemeProvider theme={darkTheme}>
+      <HFlow>
+        <Button kind='primary'>Hello</Button>
+        <Button>Dark theme!</Button>
+      </HFlow>
+    </ThemeProvider>
+  )
+}
+
+export default CustomizeDemo
diff --git a/site/pages/usage/theme/index.mdx b/site/pages/usage/theme/index.mdx
new file mode 100644
index 000000000..9f5204e7d
--- /dev/null
+++ b/site/pages/usage/theme/index.mdx
@@ -0,0 +1,25 @@
+import { Demo } from '../../../components/Demo'
+
+# Theme
+
+Bold exports two theme objects: `lightTheme` and `darkTheme`, using the former as default.
+
+You can switch this site documentation theme between light/dark by using the light bulb icon on the top right corner of the page.
+
+## Customizing the theme
+
+The theme can be changed using the `ThemeProvider` component:
+
+<Demo src='pages/usage/theme/Customize' />
+
+## Accessing the current theme variable
+
+Use the `useTheme` or `useStyles` hooks to access the theme variable:
+
+<Demo src='pages/usage/theme/AccessTheme' />
+
+## Custom themes
+
+Create a custom theme using the `createTheme` function.
+
+<Demo src='pages/usage/theme/CustomTheme' />
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index 49593c21e..e02c7df8f 100644
--- a/src/components/Alert/Alert.tsx
+++ b/src/components/Alert/Alert.tsx
@@ -1,7 +1,7 @@
 import { Interpolation } from 'emotion'
 import React, { CSSProperties } from 'react'
 
-import { useLocale } from '../../locale'
+import { useLocale } from '../../i18n'
 import { Theme, useStyles } from '../../styles'
 import { Button } from '../Button'
 import { Icons } from '../Icon'
diff --git a/src/components/Calendar/MonthControl.tsx b/src/components/Calendar/MonthControl.tsx
index 8d9ec8bfc..cca74cad6 100644
--- a/src/components/Calendar/MonthControl.tsx
+++ b/src/components/Calendar/MonthControl.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { useLocale } from '../../locale'
+import { useLocale } from '../../i18n'
 import { getUserLocale } from '../../util/locale'
 import { capitalize } from '../../util/string'
 import { Button } from '../Button'
diff --git a/src/components/Calendar/YearControl.tsx b/src/components/Calendar/YearControl.tsx
index 5e1579cc4..d14bcf870 100644
--- a/src/components/Calendar/YearControl.tsx
+++ b/src/components/Calendar/YearControl.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { useLocale } from '../../locale'
+import { useLocale } from '../../i18n'
 import { getUserLocale } from '../../util/locale'
 import { Button } from '../Button'
 import { HFlow } from '../Flow'
diff --git a/src/components/FormControl/FormLabel.tsx b/src/components/FormControl/FormLabel.tsx
index 9610dc8a1..f28ac1cfc 100644
--- a/src/components/FormControl/FormLabel.tsx
+++ b/src/components/FormControl/FormLabel.tsx
@@ -1,6 +1,6 @@
 import React, { CSSProperties } from 'react'
 
-import { useLocale } from '../../locale'
+import { useLocale } from '../../i18n'
 import { ExternalStyles, Theme, useStyles } from '../../styles'
 import { Omit } from '../../util/types'
 
diff --git a/src/components/Modal/ModalContainer.tsx b/src/components/Modal/ModalContainer.tsx
index 6feb2106b..a49a37b3d 100644
--- a/src/components/Modal/ModalContainer.tsx
+++ b/src/components/Modal/ModalContainer.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { useLocale } from '../../locale'
+import { useLocale } from '../../i18n'
 import { ExternalStyles, Theme, useStyles } from '../../styles'
 import { Omit } from '../../util'
 import { Button } from '../Button'
diff --git a/src/components/MonthPicker/MonthPicker/MonthPicker.tsx b/src/components/MonthPicker/MonthPicker/MonthPicker.tsx
index b15fbd213..576585465 100644
--- a/src/components/MonthPicker/MonthPicker/MonthPicker.tsx
+++ b/src/components/MonthPicker/MonthPicker/MonthPicker.tsx
@@ -1,7 +1,7 @@
 import { css } from 'emotion'
 import React, { CSSProperties, useEffect, useState } from 'react'
 
-import { useLocale } from '../../../locale'
+import { useLocale } from '../../../i18n'
 import { Theme, useStyles } from '../../../styles'
 import { getUserLocale } from '../../../util/locale'
 import { capitalize } from '../../../util/string'
diff --git a/src/components/Paginator/Paginator.tsx b/src/components/Paginator/Paginator.tsx
index 6b5bdc7cc..5c192ec0e 100644
--- a/src/components/Paginator/Paginator.tsx
+++ b/src/components/Paginator/Paginator.tsx
@@ -1,6 +1,6 @@
 import React, { CSSProperties, useEffect, useState } from 'react'
 
-import { useLocale } from '../../locale'
+import { useLocale } from '../../i18n'
 import { Theme, useStyles } from '../../styles'
 import { Button } from '../Button'
 import { Icon } from '../Icon'
diff --git a/src/components/Select/SelectMulti/SelectMultiItem.tsx b/src/components/Select/SelectMulti/SelectMultiItem.tsx
index b40c725b3..a0e40c259 100644
--- a/src/components/Select/SelectMulti/SelectMultiItem.tsx
+++ b/src/components/Select/SelectMulti/SelectMultiItem.tsx
@@ -1,6 +1,6 @@
 import React, { CSSProperties } from 'react'
 
-import { useLocale } from '../../../locale'
+import { useLocale } from '../../../i18n'
 import { ExternalStyles, Theme, useStyles } from '../../../styles'
 import Times from '../../Icon/generated/TimesDefault'
 
diff --git a/src/locale/LocaleContext.tsx b/src/i18n/LocaleContext.tsx
similarity index 100%
rename from src/locale/LocaleContext.tsx
rename to src/i18n/LocaleContext.tsx
diff --git a/src/locale/index.ts b/src/i18n/index.ts
similarity index 100%
rename from src/locale/index.ts
rename to src/i18n/index.ts
diff --git a/src/locale/locales/en-US.ts b/src/i18n/locales/en-US.ts
similarity index 100%
rename from src/locale/locales/en-US.ts
rename to src/i18n/locales/en-US.ts
diff --git a/src/locale/locales/pt-BR.ts b/src/i18n/locales/pt-BR.ts
similarity index 100%
rename from src/locale/locales/pt-BR.ts
rename to src/i18n/locales/pt-BR.ts
diff --git a/src/index.ts b/src/index.ts
index f4fc268df..3d7499276 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,4 @@
 export * from './components'
-export * from './locale'
-export * from './metaPath'
+export * from './i18n'
 export * from './styles'
 export * from './util'
diff --git a/src/metaPath/index.ts b/src/metaPath/index.ts
deleted file mode 100644
index 8e0ec1640..000000000
--- a/src/metaPath/index.ts
+++ /dev/null
@@ -1,1 +0,0 @@
-export { default as metaPath } from './metaPath'
diff --git a/src/metaPath/metaPath.ts b/src/metaPath/metaPath.ts
deleted file mode 100644
index 3f9dd5300..000000000
--- a/src/metaPath/metaPath.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-
-function wrap<T>(objToProxy: Meta<T>): MetaRoot<T> {
-    return new Proxy<any>(objToProxy, {
-        get: (target, prop) => {
-            if (target[prop] === undefined) {
-                target[prop] = wrap(new MetaImpl(objToProxy, prop as string))
-            }
-            return target[prop]
-        },
-    })
-}
-
-export type MetaRoot<T> = {
-    [P in keyof T]?: MetaPath<T[P]>
-}
-
-export type MetaPath<T> =
-    T extends any[] ? MetaArray<T[0]> :
-    T extends object ? MetaRoot<T> & Meta<T> :
-    Meta<T>
-
-export interface Meta<T> {
-    alias: string
-    readonly type: T
-    absolutePath(): string
-}
-
-export interface MetaArray<T> extends Meta<T> {
-    get(index: number): MetaPath<T>
-}
-
-export class MetaImpl<T> implements MetaArray<T> {
-    readonly type: T
-    readonly alias: string
-    private parent: Meta<any>
-    private arrayItem: boolean
-
-    constructor(parent?: Meta<any>, alias?: string, arrayItem?: boolean) {
-        this.parent = parent
-        this.alias = alias
-        this.arrayItem = arrayItem
-    }
-
-    public absolutePath = (): string => {
-        let path: string
-        if (this.parent && this.parent.absolutePath) {
-            path = this.parent.absolutePath()
-        }
-
-        if (path && !this.arrayItem) {
-            path += '.'
-        } else if (!path) {
-            path = ''
-        }
-
-        if (this.alias) {
-            path += this.alias
-        }
-
-        return path
-    }
-
-    public get = (index: number): any => {
-        return wrap(new MetaImpl<T>(this, `[${index}]`, true))
-    }
-}
-
-export default function metaPath<T extends object>(): MetaRoot<T> {
-    return wrap(new MetaImpl<T>())
-}


Test patch:
diff --git a/src/__snapshots__/index.test.ts.snap b/src/__snapshots__/index.test.ts.snap
index 007732c35..3c271aed3 100644
--- a/src/__snapshots__/index.test.ts.snap
+++ b/src/__snapshots__/index.test.ts.snap
@@ -103,7 +103,6 @@ Array [
   "Tooltip",
   "LocaleContext",
   "useLocale",
-  "metaPath",
   "DefaultGlobalCss",
   "GlobalCss",
   "useTheme",
diff --git a/src/components/Alert/Alert.test.tsx b/src/components/Alert/Alert.test.tsx
index c76144fb8..e481f7947 100644
--- a/src/components/Alert/Alert.test.tsx
+++ b/src/components/Alert/Alert.test.tsx
@@ -1,8 +1,8 @@
 import { fireEvent, render } from '@testing-library/react'
 import React from 'react'
 
-import { LocaleContext } from '../../locale'
-import ptBr from '../../locale/locales/pt-BR'
+import { LocaleContext } from '../../i18n'
+import ptBr from '../../i18n/locales/pt-BR'
 
 import { Alert } from './Alert'
 
diff --git a/src/components/Calendar/MonthControl.test.tsx b/src/components/Calendar/MonthControl.test.tsx
index d7850531d..31bea38db 100644
--- a/src/components/Calendar/MonthControl.test.tsx
+++ b/src/components/Calendar/MonthControl.test.tsx
@@ -1,8 +1,8 @@
 import { fireEvent, render } from '@testing-library/react'
 import React from 'react'
 
-import { LocaleContext } from '../../locale'
-import ptBr from '../../locale/locales/pt-BR'
+import { LocaleContext } from '../../i18n'
+import ptBr from '../../i18n/locales/pt-BR'
 
 import { MonthControl } from './MonthControl'
 
diff --git a/src/components/Calendar/YearControl.test.tsx b/src/components/Calendar/YearControl.test.tsx
index 45b8c7cfd..e8bc33703 100644
--- a/src/components/Calendar/YearControl.test.tsx
+++ b/src/components/Calendar/YearControl.test.tsx
@@ -1,8 +1,8 @@
 import { fireEvent, render } from '@testing-library/react'
 import React from 'react'
 
-import { LocaleContext } from '../../locale'
-import ptBr from '../../locale/locales/pt-BR'
+import { LocaleContext } from '../../i18n'
+import ptBr from '../../i18n/locales/pt-BR'
 
 import { YearControl } from './YearControl'
 
diff --git a/src/components/FormControl/FormLabel.test.tsx b/src/components/FormControl/FormLabel.test.tsx
index c382e108d..498c27f1c 100644
--- a/src/components/FormControl/FormLabel.test.tsx
+++ b/src/components/FormControl/FormLabel.test.tsx
@@ -1,8 +1,8 @@
 import { render } from '@testing-library/react'
 import React from 'react'
 
-import { LocaleContext } from '../../locale'
-import ptBr from '../../locale/locales/pt-BR'
+import { LocaleContext } from '../../i18n'
+import ptBr from '../../i18n/locales/pt-BR'
 
 import { FormLabel } from './'
 
diff --git a/src/components/Modal/ModalContainer.test.tsx b/src/components/Modal/ModalContainer.test.tsx
index 300536776..d6bd9eeaa 100644
--- a/src/components/Modal/ModalContainer.test.tsx
+++ b/src/components/Modal/ModalContainer.test.tsx
@@ -1,8 +1,8 @@
 import { fireEvent, render } from '@testing-library/react'
 import * as React from 'react'
 
-import { LocaleContext } from '../../locale'
-import ptBr from '../../locale/locales/pt-BR'
+import { LocaleContext } from '../../i18n'
+import ptBr from '../../i18n/locales/pt-BR'
 import * as stringUtils from '../../util/string'
 
 import { ModalContainer } from './ModalContainer'
diff --git a/src/components/Paginator/Paginator.test.tsx b/src/components/Paginator/Paginator.test.tsx
index 79b0ca405..43ba2df71 100644
--- a/src/components/Paginator/Paginator.test.tsx
+++ b/src/components/Paginator/Paginator.test.tsx
@@ -1,8 +1,8 @@
 import { fireEvent, render } from '@testing-library/react'
 import React from 'react'
 
-import { LocaleContext } from '../../locale'
-import ptBr from '../../locale/locales/pt-BR'
+import { LocaleContext } from '../../i18n'
+import ptBr from '../../i18n/locales/pt-BR'
 
 import { Paginator } from './Paginator'
 
diff --git a/src/components/Select/SelectMulti/SelectMultiItem.test.tsx b/src/components/Select/SelectMulti/SelectMultiItem.test.tsx
index c09007cf6..70cfd27fa 100644
--- a/src/components/Select/SelectMulti/SelectMultiItem.test.tsx
+++ b/src/components/Select/SelectMulti/SelectMultiItem.test.tsx
@@ -1,8 +1,8 @@
 import { fireEvent, render } from '@testing-library/react'
 import React from 'react'
 
-import { LocaleContext } from '../../../locale'
-import ptBr from '../../../locale/locales/pt-BR'
+import { LocaleContext } from '../../../i18n'
+import ptBr from '../../../i18n/locales/pt-BR'
 
 import { SelectMultiItem } from './SelectMultiItem'
 
diff --git a/src/metaPath/metaPath.test.ts b/src/metaPath/metaPath.test.ts
deleted file mode 100644
index ffa0b9c9b..000000000
--- a/src/metaPath/metaPath.test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import metaPath from './metaPath'
-
-interface ObjStructure {
-    id: number
-    name: string
-    child: ObjChildStructure
-    items: ObjChildItem[]
-    numbers: number[]
-}
-
-interface ObjChildStructure {
-    id: number
-    date: string
-}
-
-interface ObjChildItem {
-    id: number
-    names: string[]
-}
-
-describe('metaPath', () => {
-    it('should give the correct path', () => {
-        const path = metaPath<ObjStructure>()
-
-        expect(path.id.absolutePath()).toEqual('id')
-        expect(path.child.id.absolutePath()).toEqual('child.id')
-        expect(path.items.get(1).absolutePath()).toEqual('items[1]')
-        expect(path.items.get(1).id.absolutePath()).toEqual('items[1].id')
-        expect(path.items.get(2).names.absolutePath()).toEqual('items[2].names')
-        expect(path.items.get(2).names.get(1).absolutePath()).toEqual('items[2].names[1]')
-        expect(path.numbers.get(2).absolutePath()).toEqual('numbers[2]')
-    })
-})