{content}
- {context.name}
: Upload file
- }
+ {context =>
+ context.name ? {context.name}
: Upload file
}
{context.name}
: Upload file
- }
+ {context =>
+ context.name ? {context.name}
: Upload file
}
test
}
- test
}
+
- hello there
- {checked ? {
- setChecked(e.target.checked)
- }}
- {...props}
- />
-
- checked
: unchecked
}
-
+ hello there
+ {checked ? {
+ setChecked(e.target.checked)
+ }}
+ />
+
)
-}
+})
describe('checked
: unchecked
}
+
- null, color: 'red' },
- ],
- ...props,
- }}
- >
- {children}
-
-
- outside
-
+ null, color: 'red' },
+ ],
+ ...props,
+ }}
+ >
+ {children}
+
+
)
}
-const mockIntersectionObserverCls = jest.fn()
-const mockObserve = jest.fn()
-const mockDisconnect = jest.fn()
+const mockIntersectionObserverCls = vi.fn()
+const mockObserve = vi.fn()
+const mockDisconnect = vi.fn()
const mockIntersectionObserver = makeMockIntersectionObserver(
mockIntersectionObserverCls,
@@ -65,7 +62,7 @@ describe('outside
+
- hello there
- {checked ? {
- setChecked(e.target.checked)
- }}
- {...props}
- />
-
- checked
: unchecked
}
-
+ hello there
+ {checked ? {
+ setChecked(e.target.checked)
+ }}
+ />
+
)
-}
+})
describe('checked
: unchecked
}
+ outside
@@ -92,17 +87,15 @@ describe('
+
- ,
+
,
)
+ expect(screen.queryByRole('listbox')).toBeNull()
await userEvent.click(screen.getByTestId('select-container'))
+ expect(screen.queryByRole('listbox')).not.toBeNull()
await userEvent.click(screen.getByText('outside'))
-
- await waitFor(() => {
- expect(screen.getByText('Two')).not.toBeVisible()
- })
+ expect(screen.queryByRole('listbox')).toBeNull()
})
/** Autocomplete */
it('should filter options if autocomplete is true ', async () => {
- const mockCallback = jest.fn()
+ const mockCallback = vi.fn()
render(
- outside
', () => {
]}
onChange={mockCallback}
/>
- ,
- )
- await userEvent.click(screen.getByTestId('select-container'))
- await userEvent.click(screen.getByText('Two'))
- expect(screen.getAllByText('Two').length).toEqual(1)
- })
-
- it('should close dropdown when clicking outside of element', async () => {
- const mockCallback = jest.fn()
- render(
-
-
- outside
-
-
-
- outside
-
-
+
,
)
await userEvent.click(screen.getByTestId('select-container'))
@@ -197,17 +182,15 @@ describe('', () => {
it('should update selection using arrows', async () => {
render(
- outside
+
+
-
- outside
-
-
+
,
)
await userEvent.click(screen.getByTestId('select-container'))
@@ -261,23 +242,21 @@ describe('', () => {
})
it('should show create options only if it is unique ', async () => {
- const mockCallback = jest.fn()
+ const mockCallback = vi.fn()
render(
- outside
+
+
-
- outside
-
-
+
,
)
await userEvent.click(screen.getByTestId('select-container'))
@@ -301,23 +280,21 @@ describe('', () => {
})
it('should call on create if create option is clicked', async () => {
- const mockCallback = jest.fn()
+ const mockCallback = vi.fn()
render(
- outside
+
+
-
- outside
-
-
+
,
)
await userEvent.click(screen.getByTestId('select-container'))
@@ -336,110 +313,50 @@ describe('', () => {
})
it('should call on create if create option is selected with arrows and enter is pressed', async () => {
- const mockCallback = jest.fn()
+ const mockCallback = vi.fn()
render(
- outside
+
+
-
- outside
-
-
+
,
)
await waitFor(() => {
- expect(ref.current).toBeInstanceOf(HTMLInputElement)
+ expect(screen.getByText('select')).toBeVisible()
})
- })
-
- it('should show dropdown menu when clicked and embeded in Input', async () => {
- render(
- outside
- ,
+ {option.prefix}
}
- {option.prefix}
}
+ -- )} - {/* eslint-enable react/no-array-index-key */} -- - - {tokens.map((line, i) => { - const { key, ...lineProps } = getLineProps({ line, key: i }) - return ( -- - {line.map((token, j) => { - const { key: tokenKey, ...tokenProps } = getTokenProps({ - token, - key: j, - }) - return - ) - })} -- })} -
++ )} + { } ++ + {tokens.map((line, i) => { + const { key: lineKey, ...lineProps } = getLineProps({ line, key: i }) + + return ( ++ + {line.map((token, key) => { + const { key: tokenKey, ...tokenProps } = getTokenProps({ token, key }) + return ( + + ) + })} ++ ) + })} +
+
+
+
-
-
-
-
-
-
-
-
-
-
- {/* */}
-
-
-
+ {children}
+
),
- pre: (props) => (
+ pre: props => (
),
}
diff --git a/docs/src/components/Nav.tsx b/docs/src/components/Nav.tsx
index b2161cfb..c2959758 100644
--- a/docs/src/components/Nav.tsx
+++ b/docs/src/components/Nav.tsx
@@ -1,26 +1,16 @@
import { useRouter } from 'next/dist/client/router'
import * as React from 'react'
-import styled, { css } from 'styled-components'
-import {
- Button,
- EnsSVG,
- MenuSVG,
- Space,
- Typography,
- mq,
-} from '@ensdomains/thorin'
+// import { useIsMounted } from '~/utils/isMounted'
-import { createGitHubLink } from '~/utils/github'
-// import { createPlayroomLink } from '~/utils/playroom'
-import { useIsMounted } from '~/utils/isMounted'
+import type { Link } from './Link'
+import { NavBar } from './NavBar'
+import { SideBar } from './SideBar'
-import { Link } from './Link'
-
-type Link = { name: string; route: string }
+type Link = { name: string, route: string }
export type Props = {
- links: { name: string; links: Link[] }[]
+ links: { name: string, links: Link[] }[]
}
type State = {
@@ -31,265 +21,27 @@ const initialState = {
open: false,
}
-const Container = styled.div(
- ({ theme }) => css`
- flex-direction: column;
- height: ${theme.space['full']};
- overflow: hidden;
- `,
-)
-
-const ContainerInner = styled.div(
- ({ theme }) => css`
- ${mq.lg.min(css`
- padding-bottom: ${theme.space['5']};
- `)}
- `,
-)
-
-const NavlinkContainer = styled.div(
- ({ theme }) => css`
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-direction: row;
- gap: ${theme.space['5']};
-
- ${mq.lg.min(css`
- ${css`
- flex-direction: column;
- `}
- `)}
- `,
-)
-
-const NavLinkInner = styled.div(
- ({ theme }) => css`
- display: flex;
- align-items: center;
- flex-direction: row;
- gap: ${theme.space['4']};
- `,
-)
-
-const ButtonContainer = styled.div(
- () => css`
- ${mq.lg.min(css`
- display: none;
- `)}
- `,
-)
-
-const List = styled.div<{ $open?: boolean }>(
- ({ theme, $open }) => css`
- display: ${$open ? 'block' : 'none'};
- height: ${theme.space['full']};
- padding-top: ${theme.space['10']};
- border-color: ${theme.colors.border};
- transition: border-color 0.15s ease-in-out;
-
- /* stylelint-disable-next-line selector-pseudo-element-no-unknown */
- &::-webkit-scrollbar-track {
- background-color: transparent;
- margin-bottom: ${theme.space['16']};
- }
-
- &::-webkit-scrollbar {
- width: ${theme.space['1.5']};
- background-color: transparent;
- }
-
- &::-webkit-scrollbar-thumb {
- border: none;
- border-radius: ${theme.radii.full};
- border-right-style: inset;
- border-right-width: calc(100vw + 100vh);
- border-color: inherit;
- }
-
- &::-webkit-scrollbar-button {
- display: none;
- }
-
- &:hover {
- border-color: hsla(${theme.colors.raw.greyPrimary}, 0.2);
- }
-
- ${mq.lg.min(css`
- display: block;
- padding-bottom: ${theme.space['18']};
- padding-top: ${theme.space['5']};
- `)}
- `,
-)
-
-const SubGroupLabel = styled(Typography)(
- () => css`
- text-transform: capitalize;
- `,
-)
-
-const FlexContainer = styled.div<{ $space?: Space }>(
- ({ theme, $space }) => css`
- display: flex;
- flex-direction: column;
- gap: ${theme.space[$space ?? '4']};
- `,
-)
-
export const Nav = ({ links }: Props) => {
- const isMounted = useIsMounted()
+ // const isMounted = useIsMounted()
const router = useRouter()
const [state, setState] = React.useState{children}
+-
-
+
+ {['active', 'dim', 'primary', 'bright', 'light', 'surface'].map(
+ label => (
+ {label}
+ ),
+ )}
+ {Object.entries(palette).map(([primaryColor, colors]) => {
+ if (primaryColor === 'accent') return null
+ const colorEntries = Object.entries(colors)
+ return (
+
+ {primaryColor}
+ {colorEntries.map(([shade, color]) => (
+
+ setModalProps({
+ open: true,
+ color: primaryColor,
+ shades: colorEntries,
+ selectedShade: shade,
+ })}
+ />
+ ))}
+
+ )
+ })}
+
+
- No props
-
- )}
-
-
-
- {!!props.length && (
-
-
+
-
-
- )}
-
- {sourceLink && (
+
+ ))}
+
+
+
+ )
+ : (
-
-
-
+ No props
)}
-
+
+
+ )}
+
+ {sourceLink && (
+
+
+
+ )}
+
+
+ {name}
+
+ {links.map(({ name: _name, route }) => (
+
+ {_name}
+
+ ))}
+
+ ))}
+
- }
- tone="blue"
- variant="primary"
- onClick={() => {
- toggleState('loading')
- setTimeout(() => toggleState('loading'), 1000)
- }}
- >
- Connect Wallet
-
-
-```
-
-With Playroom, you can test different screen sizes and themes, share links to prototypes, and use all system components without needing to import anything.
-
-## State and Interactivity
-
-You can control Playroom state and interactivity using the functions that are injected into the global context:
-
-### Get State
-
-The function getState requires a key that identifies the property it is getting. Use getState in place of a state variable.
-
-By default the value is undefined so it will not pass a value to the property. In this example, the property checked has been assigned getState('checked') but it still functions as if the property was undefined.
-
-```tsx live=true
-
-
- {getState('counter') != null ? getState('counter') : 2}
-
-
-```
diff --git a/docs/src/layouts/docs.tsx b/docs/src/layouts/docs.tsx
index 42422ea4..0559d2d6 100644
--- a/docs/src/layouts/docs.tsx
+++ b/docs/src/layouts/docs.tsx
@@ -1,98 +1,47 @@
import * as React from 'react'
-import { GetLayout, NextLayout } from 'next'
+import type { GetLayout, NextLayout } from 'next'
import Head from 'next/head'
-import styled, { css } from 'styled-components'
-
-import { mq } from '@ensdomains/thorin'
+import type {
+ NavProps } from '~/components'
import {
Header,
Nav,
- NavProps,
SkipNavContent,
SkipNavLink,
} from '~/components'
import { getLayout as getBaseLayout } from './site'
-
-const Container = styled.div(
- ({ theme }) => css`
- display: block;
- justify-content: center;
- margin: 0 auto;
- max-width: ${theme.space['320']};
- min-height: ${theme.space['viewHeight']};
- padding: 0 ${theme.space['6']};
-
- ${mq.lg.min(css`
- display: flex;
- justify-content: flex-end;
- `)}
-
- ${mq.xl.min(css`
- display: flex;
- justify-content: center;
- `)}
- `,
-)
-
-const Aside = styled.aside(
- ({ theme }) => css`
- padding-top: ${theme.space['6']};
-
- ${mq.lg.min(css`
- background-color: ${theme.colors.greyLight};
- margin-right: ${theme.space['10']};
- border-radius: ${theme.radii['extraLarge']};
-
- left: ${theme.space['4']};
- top: ${theme.space['4']};
- bottom: ${theme.space['4']};
-
- height: calc(${theme.space['viewHeight']} - ${theme.space['8']});
- padding: ${theme.space['4']};
- overflow: hidden;
- position: fixed;
- width: ${theme.space['48']};
- `)}
-
- ${mq.xl.min(css`
- width: ${theme.space['56']};
- `)}
- `,
+import type { BoxProps } from '@ensdomains/thorin'
+import { Box, Typography } from '@ensdomains/thorin'
+
+const Container = (props: React.ComponentProps
-
-
-
- {getState('counter') != null && getState('counter') !== 2 && (
-
- )}
-
-
-
- {setDefaultState('counter', 2)}
-
-