The props remain but the components are missing.

Example issue from a storybook

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? 

Check the render method of `Styled(Component)`. 
    at http://localhost:6006/vendors~main.ab3ba32b17a7f0de2017.bundle.js:1290:16
    at Styled(Component) (http://localhost:6006/vendors~main.ab3ba32b17a7f0de2017.bundle.js:58034:28)
    at div
    at ThemeProvider (http://localhost:6006/vendors~main.ab3ba32b17a7f0de2017.bundle.js:56966:24)
    at ControlledThemeProvider (http://localhost:6006/vendors~main.ab3ba32b17a7f0de2017.bundle.js:3339:20)
    at ThemeController (http://localhost:6006/vendors~main.ab3ba32b17a7f0de2017.bundle.js:3295:71)
    at CustomThemeProvider
    at ThemeProvider
    at storyFn
    at ErrorBoundary 

Based on Radix Dropdown Menu

Trigger should use Slot like our Dialog.
Menu parts should be exposed as MenuXxxx
Parts with subparts may be simplified i.e. the MenuCheckboxItem and MenuRadioItem should be constructed to use our own <Check />Icon. (As shown in Custom APIs)

Storybook should give examples covering all sub components.

Thoughts:

https://heydesigner.com/blog/how-to-design-delightful-dark-themes/

Difficulty is the primary button, as already dark.

React & React Dom should be allow | 17.0.0. types for react and react-dom are not 17.0.0. THis will align with material ui (currently template wants 17, but this components doesnt).

React script is now 4.0.1, but looks like 4.0.2 will be support TS 4.1 (then we can bump both to the latest versions).

Tthis is through npm install on template, it won't let me complete at the moment though next issues with be storybook etc).

Add the button component according to Figma styles

To put things in a max width based container

As I understand the spacing is now exponential theres no need to go beyond 7 (as its very large).

But it would be very helpful to throw an error/warning if an incorrect value (say when copying a material-ui example that uses a large value). Currently spacing=8 simply returns undefined.

Simple Box with no special requirements

Then they are simpler to obtain, smaller api surface to remember
and the provided theme switch can work without further props.

Using @committed/components 3.0.0

createOverrides in the ThemeProvider should pass the committed defaults

 createOverrides={(palette) =>
// have to define text, action
        deepmerge(theme.baseCommittedOverrides(palette, text, action), {
...

Components uses a scroll trigger to add hover effect. This may require a new hook.

Add separate label and integrate into other Components that need a Label

This confines the contents to a fixed width, can be conditioned on breakpoints.

Should have Row and Column extensions

4.2.0

import { Typography } from "@committed/components"
import { Header,  Root } from "@committed/layout"
...

return <Root> <Header> <Typography>{name}</Typography> </Header> </Root>

Swapping Typography for Link:

import { Link } from "@committed/components"
import { Header,  Root } from "@committed/layout"
...
return <Root> <Header> <Link>{name}</Link> </Header> </Root>

ThemeSwitch has the wrong colour in light mode too when in the header:

Current components

Component covered by Radix
Component covered by Radix (Coming Soon)
Component Candidate for retirement

• Accordion
• Alert
• Autocomplete
• AppBar
• Avatar
• Backdrop
• Badge
• Box
• Button
• Caption
• Card
• Checkbox
• Checktoken
• Chip
• CodeStyle
• Container
• Dialog
• Divider (Separator)
• Display
• Drawer
• Flex
• Form
• FormControl
• Grid
• Heading
• #233
• IconButton
• Link
• List
• Loader Spinner
• Logo
• Menu
• Monospace
• Pagination
• #157
• Progress
• Radio
• Skeleton
• Slider
• Stepper
• Switch
• Tab
• Table
• Text
• TextField
• Theme Provider
• Theme Switch
• Timeline
• ToggleButton
• Toolbar
• Tooltip
• Typography

Additional components to consider

• Collapsible
• Context Menu
• Scroll Area
• Label
• Described Selector
• Empty State
• Error boundary
• Error message
• Datetime picker (https://github.com/deseretdigital/dayzed ?)

As its pulled in by @material-ui/core.

Having styles as a peer prompts the user to install it separately. Doing so causes multiple styles versions to linger which breaks the theme provider.

Options

• Material-UI
• Radix
• HeroIcons
• Get our own done?
• Do our own

In material-ui link the component prop allows for composition which is necessary for say react-router-dom.

https://material-ui.com/guides/composition/#link

This gets lost through here.

I'd added it back by declaring it:

import React from 'react'
import {
  Link as RouterLink,
  LinkProps as RouterLinkProps
} from 'react-router-dom'
import { Link as ComponentsLink } from '@committed/components'

/**
 * The underlying Material UI allows the component used to render the Link to be changed.
 * This is function is not publicised by @committed/components Link.
 * We add that property (component) back and then declare our new Link takes the
 * options from RouterLink too (which is does, these are passed to the component).
 */
const LinkWithComponent = ComponentsLink as React.FC<
  RouterLinkProps & {
    component: React.ElementType
  }
>

interface Props extends RouterLinkProps {
  children: React.ReactNode
}

export const Link: React.FC<Props> = props => {
  // If an external link?
  if (typeof props.to === 'string' && props.to.startsWith('http')) {
    return (
      <ComponentsLink href={props.to} target="_blank">
        {props.children}
      </ComponentsLink>
    )
  }

  // Else use a internal link, rendered using RouterLink
  return (
    <LinkWithComponent component={RouterLink} {...props}>
      {props.children}
    </LinkWithComponent>
  )
}

copyToClipboard() doesnt work inside modals (Dialog component)

The props are complex and difficult to use.
The complexity should be extracted to a separate function and exported separately to the ThemeProvider, The provider should just take full themes.

The api should allow simpler overriding of elements of the theme without having to supply everything. There should be options to override in both themes and separately in the light and the dark.

Ideas

const {light, dark} = createCommittedThemes() // default committed setup
const {light, dark} = createMaterialThemes() // a way to return to near material defaults

// To simply override a single element of both themes use a `common` key - rest deep merged
const const {light, dark} = createCommittedThemes({ common: {fonts: { fontSize: 20 }}})

// To override using default styles
const const {light, dark} = createCommittedThemes({ common: {fonts: (fontDefaults) => ({ ...fontDefaults:  typography: fontDefaults.text }}})

// For different light/dark config use `light` and `dark` keys
const const {light, dark} = createCommittedThemes({light: {}, dark: {}})

e.g. Typing

export interface ThemeConfig
  fonts?: FontOptions | (fonts: FontOptions) => FontOptions
  palette?: PaletteOptions | (palette: PaletteOptions) => PaletteOptions
  createShape?: ShapeOptions | (shape: ShapeOptions) => ShapeOptions
  createSpacing?: SpacingOptions | (spacing: SpacingOptions) => SpacingOptions
  createTypography?: TypographyOptions | (typography: TypographyOptions, palette: Palette)) => TypographyOptions
  overrides?: Overrides | (overrides: Overrides, palette: Palette) => Overrides
}

export interface ThemesConfig {
  common?: ThemeConfig
  light?: ThemeConfig
  dark?: ThemeConfig
}

Create the design tokens from the Figma file in stitches.

On build:

Module not found: @committed/components tried to access @material-ui/styles, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

This appears to be correct in that @material-ui/styles in not a peer dependency but is imported (e.g. in src/styles/index.ts).

[Could be more of these but that I only see this first one].

Using version 1.0.2

FormControl mb={2}>.... doesn't compile, nor does <FormControl flexGrow={1} (which is code in the docs)

Husky currently has a issue with npm 7
Add back in when fixed

"husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged --pattern '**/*.*(ts|tsx|json|md)'; tsdx lint",
      "pre-push": "npm test && npm run build && npm danger:local"
    }
  },

When using <Divider /> I get the error:

No overload matches this call.
  Overload 1 of 2, '(props: (Pick<DividerProps, "ref" | "style" | "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | ... 249 more ... | "light"> & StyledComponentProps<...> & { ...; } & Pick<...> & { ...; }) | (Pick<...> & ... 3 more ... & { ...; }), context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type '{}' is not assignable to type '(IntrinsicAttributes & Pick<DividerProps, "ref" | "style" | "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 250 more ... | "light"> & StyledComponentProps<...> & { ...; } & Pick<...> & { ...; }) | (IntrinsicAttributes & ... 4 more ... & {...'.
      Property 'color' is missing in type '{}' but required in type 'Pick<PropsWithChildren<DividerProps>, "ref" | "style" | "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 250 more ... | "light">'.
  Overload 2 of 2, '(props: PropsWithChildren<(Pick<DividerProps, "ref" | "style" | "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | ... 249 more ... | "light"> & StyledComponentProps<...> & { ...; } & Pick<...> & { ...; }) | (Pick<...> & ... 3 more ... & { ...; })>, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type '{}' is not assignable to type '(IntrinsicAttributes & Pick<DividerProps, "ref" | "style" | "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 250 more ... | "light"> & ... 4 more ... & { ...; }) | (IntrinsicAttributes & ... 5 more ... & { ...; })'.
      Property 'color' is missing in type '{}' but required in type 'Pick<PropsWithChildren<DividerProps>, "ref" | "style" | "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 250 more ... | "light">'.ts(2769)

May be similar to #17

This would simplify the overriding of themes.

• UI JsonForm support
• DescribedSelector
• PageHeading / ButtonBar
• TextIconButton
• EmptyState
• ConfirmDialog
• Wizard

Our paginaton is zero indexed. I think this should be the norm (ie PaginationControl)

onChange gets exported with incorrect typing.
Seems to be omitted, but the one from Span still appears and clashes with the correct Slider type.

onChange gets exported with incorrect typing.
Seems to be omitted, but the one from Span still appears and clashes with the correct Slider type.

This a warning I get in D3 which doesnt have any custom fonts so I assume this is a components issue but not sure how to confirm.

I get as a warning:

http://localhost:3000/83dc5921761a7c3d.ttf
localhost/:1 OTS parsing error: invalid version tag

Add a system for adding our code styling to other sites.

Make the css directly dependent on the theme and expose via a components that
either makes the css available in nested components (or globally).

To start the development of the beta we'll look to set up a clean branch with minimal carried over from the main.
The plan will be to move supporting elements, such as the test/storybook over on a component by component basis.

Should support
'sticky' - stays in the same place on the page - things scroll under it - ideally would push content down
'normal' - just positions in normal block flow so stays in natural position when scrolled.

Simple br

See #81

This should not include any dependencies on MDX but define the general component model used in them. This will centralise our use in other areas.

Using the Avatar component in the form:

<Avatar m={1} alt="John Smith" src={"https://images-na.ssl-images-amazon.com/images/I/811Ij8XEr4L._SL1500_.jpg"} /> (as per one of the stories)

gives a compilation error:

Property 'childrenClassName' is missing in type '{ m: number; alt: string; src: string; }' but required in type 'Pick<PropsWithChildren<AvatarProps>, "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | ... 285 more ... | "srcSet">'.ts(2769)

using radix accordion

Using 3.0.0

const useStyles = makeStyles({
  content: { flex: 1 },
})

...
// error - requires props parameters
useStyles()

I have to use useStyles({}) as a workaround.

Will be important to check designs in light and dark mode so makes sense to add this early.

The reducer is missing the correct start value.

The label should also be shown on focus (when in hover mode).
May need to add a new hook for useFocus.

What fonts to use.
Do we have separate Display, Text, Typography, Heading, Monospace component or a single component with variants?

Would be nice to be able to have the loader in top left of menu and then 'spin' when we are downloading data

eg with react-query

const isFetching = useIsFetching()

return (
<Loader loading={isFetching > 0) /> 
)