trendmicro-frontend / tonic-ui

Tonic UI is a UI component library for React, built with Emotion and Styled System. It is designed to be easy to use and easy to customize.

Tonic UI

Tonic UI is a UI component library for React, built with Emotion and Styled System. It is designed to be easy to use and easy to customize.

Documentation

For older versions, head over here => https://trendmicro-frontend.github.io/tonic-ui/react/v0/

Latest version (v1) => https://trendmicro-frontend.github.io/tonic-ui/

Features

• A unified color theme provider that can easily switch between dark and light mode
• Low barriers to customize UI components using building block components
• A standarized styled system and theme

Contributing

If you're interested in contributing to Tonic UI, check out the contribution guide.

License

MIT

tonic-ui's Issues

[Demo Page][Side Menu] Active & hover style not ready

[ Demo Page ] - Code Block lose top border

Should we use "px" or "rem" value units for the v1.0 release?

Alert enhancement

https://material-ui.com/components/alert/

• Add AlertTitle component to display a formatted title above the content.
• Rename status to severity to reflect success, info, warning, error
• (optional) Add variant prop: filled and outline

Add transition component examples

• Scale
• Slide
• SlideIn

Add `NumberInput` component

[Feature Request] Implement a `color-yiq` function that can help determine the best color to use for a given background

Customized icon question

https://github.com/trendmicro-frontend/styled-ui/blob/0dbc689265aeb37dd5432b778f35f3cd5829e446/packages/react-styled-ui/src/Icon/index.js#L6-L20

Questions

If I'd like to use my customized icon, it seems that I have to to add tmicon- prefix for my icon, otherwise, it won't work.
Is this a constraint? or is this a minor issue?

const customIcons = {
  icon1: {
    path: (
      <path fill="currentColor" d="..." />
    ),
  }
};

const customTheme = {
  ...theme,
  icons: {
    ...theme.icons,
    ...customIcons,
  },
};

not working

<Icon icon="icon1" color="blue:50" />

works

<Icon icon="tmicon-icon1" color="blue:50" />

[Feature Request] Support Typescirpt index.d.ts file for all shared components

Color Mode Enhancement

Context API

ColorModeProvider

// use default style
<ColorModeProvider value="dark"/> // One of: 'dark', 'light'

// override default style
<ColorModeProvider
  value={{
    colorMode, // One of: 'dark', 'light'
    colorModeStyle, // or colorStyle ??
  }}
/>

colorMode

One of: 'dark', 'light'

colorModeStyle (or colorStyle)

const colorModeStyle = {
  dark: {
    // Text color
    text: {
      emphasis: 'colors.white:emphasis',
      primary: 'colors.white:primary',
      secondary: 'colors.white:secondary',
      tertiary: 'colors.white:tertiary',
      disabled: 'colors.white:disabled',
      link: 'colors.blue:40',
      success: 'colors.green:40',
      info: 'colors.blue:50',
      warning: 'colors.orange:50',
      error: 'colors.red:50',
    },

    // Shadow color
    // Note: The shadow style props will be removed from `styled-ui-theme`.
    shadow: {
      sm: '0 2px 8px 0 rgba(0, 0, 0, 0.48), 0 1px 2px 0 rgba(0, 0, 0, 0.16)',
      md: '0 4px 16px 0 rgba(0, 0, 0, 0.48), 0 2px 4px 0 rgba(0, 0, 0, 0.16)',
      lg: '0 8px 32px 0 rgba(0, 0, 0, 0.48), 0 4px 8px 0 rgba(0, 0, 0, 0.16)',
    },

    // Severity color: critical, high, medium, low, none
    severity: {
      critical: 'colors.red:50',
      high: 'colors.red:50',
      medium: 'colors.orange:50',
      low: 'colors.yellow:50',
      none: 'colors.gray:50',
    },

    // Chart color scheme
    // https://docs.appian.com/suite/help/20.2/Chart_Color_Scheme.html
    chart: {
      classic: {
        0: 'colors.gray:50',
        1: 'colors.blue:50',
        2: 'colors.green:40',
        3: 'colors.orange:50',
        4: 'colors.cyan:40',
        5: 'colors.red:50',
        6: 'colors.purple:50',
        7: 'colors.teal:40',
        8: 'colors.magenta:40',
        9: 'colors.green:30',
        10: 'colors.yellow:50',
      },
    },
  },
  light: {
   // Text color
    text: {
      emphasis: 'colors.black:emphasis',
      primary: 'colors.black:primary',
      secondary: 'colors.black:secondary',
      tertiary: 'colors.black:tertiary',
      disabled: 'colors.black:disabled',
      link: 'colors.blue:60',
      success: 'colors.green:50',
      info: 'colors.blue:60',
      warning: 'colors.orange:50',
      error: 'colors.red:60',
    },

    // Shadow color
    // Note: The shadow style props will be removed from `styled-ui-theme`.
    shadow: {
      sm: '0 2px 8px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.08)',
      md: '0 4px 16px 0 rgba(0, 0, 0, 0.16), 0 2px 4px 0 rgba(0, 0, 0, 0.08)',
      lg: '0 8px 32px 0 rgba(0, 0, 0, 0.16), 0 4px 8px 0 rgba(0, 0, 0, 0.08)',
    },

    // Severity color: critical, high, medium, low, none
    severity: {
      critical: 'colors.red:60',
      high: 'colors.red:60',
      medium: 'colors.orange:50',
      low: 'colors.yellow:50',
      none: 'colors.gray:50',
    },

    // Chart color scheme
    // https://docs.appian.com/suite/help/20.2/Chart_Color_Scheme.html
    chart: {
      classic: {
        0: 'colors.gray:50',
        1: 'colors.blue:60',
        2: 'colors.green:50',
        3: 'colors.orange:50',
        4: 'colors.cyan:40',
        5: 'colors.red:60',
        6: 'colors.purple:60',
        7: 'colors.teal:40',
        8: 'colors.magenta:50',
        9: 'colors.green:30',
        10: 'colors.yellow:50',
      },
    },
  },
};

Hook

Proposal 1: Extend the useColorMode Hook

const {
  colorMode,
  colorModeStyle, // or colorStyle
  setColorMode,
  toggleColorMode,
} = useColorMode();

const primartText = colorModeStyle.get('text.primary');
// => 'rgba(255, 255, 255, .92)' (= `get(theme, 'colors.white:primary')`)

const disabledText = colorModeStyle.get('text.disabled');
// => 'rgba(255, 255, 255, .28)' (= `get(theme, 'colors.white:disabled')`)

const smallShadow = colorModeStyle.get('shadow.sm');
// => '0 2px 8px 0 rgba(0, 0, 0, 0.48), 0 1px 2px 0 rgba(0, 0, 0, 0.16)'

Proposal 2: Add a new useColorModeStyle (or useColorStyle) Hook

const colorModeStyle = useColorModeStyle();

const primartText = colorModeStyle.get('text.primary');
// => 'rgba(255, 255, 255, .92)' (= `get(theme, 'colors.white:primary')`)

const disabledText = colorModeStyle.get('text.disabled');
// => 'rgba(255, 255, 255, .28)' (= `get(theme, 'colors.white:disabled')`)

const smallShadow = colorModeStyle.get('shadow.sm');
// => '0 2px 8px 0 rgba(0, 0, 0, 0.48), 0 1px 2px 0 rgba(0, 0, 0, 0.16)'

[Feature Request] SearchInput component

The SearchInput component is necessary for the react-styled-ui package.

[Feature Request] DatePicker components: Calendar / DateInput / TimeInput

• Calendar
• DateInput
• TimeInput

[Alert/ToastAlert/Toast] The close button width is not equal to 32px

Problem

The button width is not 32px

How to fix

Add flex: none to the close button

The toast object returned by the useToast Hook should be memoized

[Feature Request] Scroll component

PR #315

Use `line-height: 1` as the default for the `ButtonBase` component

As a base component, I suggest that we set its line-height to 1 in the ButtonBase component rather than inheriting button styles from browser default or CSS normalize. This can make sure the ButtonBase has an exact height as the children when implementing an IconButton like below:

<ButtonBase>
    <Icon name="icon-name" /> /* 16px x 16px */
</ButtonBase>

[Feature Request] TMIcon component & package

Change the color value of `yellow:50`

Change #faca2a to #faba2a

Migrate Guide from trendmicro-ui to styled-ui

@cheton @joshuatai @austinhung81 @tinaClin

As we provide the new ecosystem on styled-system, we need to help the product got the migrate guide from

https://github.com/trendmicro-frontend/trendmicro-ui

to

https://github.com/trendmicro-frontend/styled-ui

and

@freewill0918 @chiouchu @Ginioo @purepennons the Worry-Free Family member

we need your feedback and discussion here

=========================

Other product like XDR/Apex Central would follow the Worry-Free basic migrate guide and
check the special issue or not

styled-ui-arkit.json

{
  "$schema": "https://arkit.pro/schema.json",
  "components": [
    {
      "type": "node_modules",
      "patterns": [
        "node_modules/*",
        "packages/**/node_modules/*"
      ]
    },
    {
      "type": "Components",
      "patterns": [
        "packages/react-styled-ui/src"
      ]
    },
    {
      "type": "Themes",
      "patterns": [
        "packages/styled-ui-theme/src/**/*.js"
      ]
    }
  ],
  "excludePatterns": [
    "test",
    "tests",
    "dist",
    "coverage",
    "**/*.test.*",
    "**/*.spec.*",
    "**/*.min.*"
  ],
  "output": [
    {
      "path": [
        "arkit.svg"
      ],
      "groups": [
        {
          "type": "Dependencies",
          "components": [
            "node_modules"
          ]
        },
        {
          "first": true,
          "type": "Themes",
          "components": [
            "Themes"
          ]
        },
        {
          "first": true,
          "type": "Components",
          "components": [
            "Components"
          ]
        }
      ]
    }
  ]
}

Create a provider that allows customizing default values as well as the theme

MUI

Open MUI and access the theme object directly in the console:

Example:

components: {
  Link: {
    defaultProps: {
      underline: 'none',
    },
    styleOverrides: {
      root: {
        alignItems: 'center',
        display: 'inline-flex',
        fontWeight: 700,
      },
    },
    variants: [
      {
        props: { color: 'primary' },
        style: f (e),
      }
    ],
  },
}

Ant Design - ConfigProvider

https://ant.design/components/config-provider-cn/#header
https://ant.design/components/config-provider-cn/#API

Use a flat structure to build color palettes in styled-theme

Lets continue the discussion in #48 (comment).

After a lot of thinking over the last few days, I tend to believe that the flat structure is possibly the best approach to build the color palette, it can also mitigate the issue that we cannot assign the base color name (e.g. red, blue) that was overridden with an object form in the theme.

A color palette with the flat structure is shown as below, each color name and number are separated with a colon:

{
  'red:100': '#6e0002',
  'red:90': '#9d0003',
  'red:80': '#b80003',
  'red:70': '#d71920',
  'red:60': '#e52630',
  'red:50': '#f24c4f',
  'red:40': '#f46f71',
  'red:30': '#fd999a',
  'red:20': '#fcc3c4',
  'red:10': '#fee1e2',
}

<PseudoBox
  color="red:60"
  _hover={{
    color: 'red:50',
  }}
/>

With this approach, it is possible to use the original color name in a styled component:

<Box color="red" borderColor="red" bg="red" />

Enhance the getting started guide

Provides a recommended setup in the getting started guide:

Recommended setup

<ThemeProvider>
    <ColorModeProvider value="dark">
        <CSSBaseline />
        <Layout>
            <App />
        </Layout>
    </ColorModeProvider>
</ThemeProvider>

Layout component

Mobile view for the website

The website is working on desktop but not on mobile device. We need to enhance the navigation to make responsive web design work correctly on mobile device.

Console error when using v2 checkbox component: The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type"

[theme] remove "_core" from icons

https://github.com/trendmicro-frontend/styled-ui/blob/master/packages/styled-ui-theme/src/icons.js

const icons = {
  _core: {
    // `_core` is a reserved key for internal use
  },
};

export default icons;

[URGENT] react-toast is injected to DOM by default causes multiple web app using Style UI 2.x to fail on load

Business Impact

• An on going issue on all deployed environments (dev, stage, prod)
• Blocking teams from adopting Styled UI 2.x

Problem

Root Cause

1. react-toast component is injected to DOM by default when using Styled UI even if web application doesn't use Toast component.

<html class="ext-strict">
  <head>
    ...
  </head>
  <body>
    <header id="top-header">...</header>
    <main id="app" class="app">...</main>
    <div id="react-toast" class="Toaster">  <!-- <==== injected to DOM by default when using Styled UI -->
      ...
    </div>
  </body>
</html>

2. The underlying 3rd party library toast-note used by Toast component has the assumption that Toast component is only used by a single web app with a fixed ID: https://github.com/bmcmahen/toasted-notes/blob/master/src/Alert/Toast.tsx#L27

Effect & Impact

• This becomes an issue if we dynamically mount and unmount microfrontend web apps (e.g. with single-spa) that uses Styled UI, as single-spa is the container for it.

• <body> element in DOM is littered with instance of react-toast element injected from last microfrontend web apps using Styled UI

Reproduced Steps

The reproduced steps are very simple and captured on the internal JIRA, since it's causing an incident and impacting our production environment, those details are only shared within the JIRA case. Please consult @ultralabed for detail.

Proposed Solutions

Workaround

• Change the default behaviour of Styled UI so it does not inject Toast component by default.
  However, without the proper fix (as proposed below) the of root cause, the problem will against resurface if multiple web app begin using Toast component.

Proper Fix on the Root Cause

1. Fork the 3rd party library toast-note of that toaster component and modify the code to be able to pass in an ID where to inject the toast component.
   OR
2. Find a new (and better) 3rd party component that only adds the notification component to the DOM on demand and removes itself from DOM immediately afterwards.

The pseudo class ":first-child" is potentially unsafe.

Hi there,

Me and C1 folks got this warning from the console when some of the components are mounted. That would be lovely if it could be fixed sometime soon.

The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type".

Deprecate toggleColorMode and remove it from the useColorMode Hook for the v1 release

Allowing components to be SSR-friendly by changing pseudo class ":first-child" to ":first-of-type"

A warning message reported by Next.js that the pseudo class :first-child is potentially unsafe when doing server-side rendering. Try changing it to :first-of-type.

Here are the component list that use the pseudo class ":first-child". It's suggested that we replace it with ":first-of-type" to make components to be SSR-friendly.

src/Checkbox/styles.js:      '& > :first-child': {
src/Input/styles.js:    '&:not(:first-child)': {
src/InputGroupAppend/styles.js:    '& > *:first-child': notFirstChildStyle,
src/InputGroupAppend/styles.js:    '&:not(:last-child) > *:first-child': notLastChildStyle,
src/InputGroupPrepend/styles.js:    '& > *:first-child': notLastChildStyle,
src/InputGroupPrepend/styles.js:    '&:not(:first-child) > *:first-child': notFirstChildStyle,
src/Modal/ModalFooter.js:        '&:first-child': {
src/Modal/ModalBody.js:        '&:first-child': {

Move `canUseDom` to a common utility function

packages/react-styled-ui/src/utils/useNodeRef.js

import exenv from 'exenv';

const { canUseDOM } = exenv;

[Feature Request] Dropdown component

We really need this!!!!

[theme] add "half" and "quarter" to the space object

const space = {
  // quarter
  'quarter': '.0625rem', // 1px

  // half
  'half': '.125rem' // 2px

  // whole
  '1x': '.25rem', // 4px
  '2x': '.5rem', // 8px
};

or

const space = {
  // quarter
  '1q': '.0625rem', // 1px
  '2q': '.125rem', // 2px
  '3q': '.375rem', // 3px

  // half
  '1h': '.125rem' // 2px

  // whole
  '1x': '.25rem', // 4px
  '2x': '.5rem', // 8px
};

MDX Component not ready on <a />

https://github.com/trendmicro-frontend/styled-ui/blob/dev/packages/styled-docs/components/MDXComponents.jsx#L228

Theme import documentation

import { theme } from '@trendmicro/styled-ui-theme';
This doesn't work as per the documentation on getting started page.

import { theme } from "@trendmicro/react-styled-ui";
This works. So maybe we need to update the documentation.

[MDXComponent] Content not be set min-height

The darkmode would display as bellow:

Popover component accessibility for keyboard users

So far it is not possible to press Enter to toggle a popover. It would be nice if we can fix this issue for accessibility improvement.

MDXComponent: Need copy button on code block

as chakra ui

[Component][Collapse] Buttons prop "variantColor" value in collapse need to be changed

The value "emphasis" of variant color prop does not exist.

Only keep ES6 named import for the v1 release

Related to #220

Add displayName to each component as the identifier

MDXComponent table layout

現在 document在呈現 props table的時候 相當不容易閱讀

Add examples for "what you should do" and "what you should not do" with React

Toast as an example

Check box styling post new release

The tick mark inside the checkbox has started taking the color rgb(0,0,0,92) instead of the white shade it had earlier. We noticed this issue when we updated the version of styled-ui from 0.2.1 to 0.3.0 or 0.4.0

Update CHANGELOG.md file based on current version and git commits

Auto-complete component is needed with infinite loading

The `useToast` Hook should return object type for future expansion

Before

const toast = useToast();
toast();

After

const toast = useToast();
toast.notify();

or

const { notify } = useToast();
notify();

[Dark Mode] Git Page layout color issue

清Cache or 無痕模式會有

Firefox 一樣

[Feature Request] Skeleton component

Add `Container` component

https://mui.com/material-ui/react-container/