palmetto / palmetto-components Goto Github PK
View Code? Open in Web Editor NEWA React component library to power all Palmetto UI.
Home Page: https://ux.palmetto.com
License: MIT License
A React component library to power all Palmetto UI.
Home Page: https://ux.palmetto.com
License: MIT License
This issue is to start the discussion on how to support light/dark theming for library users. Please post any thoughts, resources, recommendations, etc for what this implementation should look like.
Radio button component that allows users to select a single option from a list of options.
function RadioExample() {
const [value, setValue] = React.useState("1");
return (
<RadioInput
name="size"
title="Pick Your Size"
description="Pick your t-shirt size"
onChange={e => setValue(e.target.value)}
options={[
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
]}
value={value}
/>
);
}
RadioInput Props
prop | type | default value | description |
---|---|---|---|
name | string | name attribute that gets applied to all radios | |
className | string | additional classNames to add to the group | |
error | bool,string | render the radio group in an error state and/or display a validation message | |
onChange | func | undefined | callback function |
title | node | text used as the title for the group of radios | |
description | node | help text beneath the title | |
options | array | the radio buttons | |
isRequired | bool | at least one option must be selected | |
value | string, number | value of the radio to be 'checked' |
Radio Props
prop | type | default value | description |
---|---|---|---|
name | string | name attribute that gets applied to all radios | |
id | string | additional classNames to add to the group | |
value | bool,string | value that is returned on form submission | |
isChecked | func | if the radio is checked | |
defaultIsChecked | node | initially checked if true | |
isDisabled | bool | disable selecting the radio | |
error | bool, string | render the radio in an error state and/or display a validation message | |
onChange | node | callback when input state changes |
A single component that:
A common use case for this component(s) would be to allow a user to select a date and time for an appointment.
ToDo:
Determine what solution is currently being used for Logistics app.
Determine what solution is currently being used for Home app.
Determine general design concepts regarding look and layout.
Determine features/props that will be supported.
Components should all look like this:
const propTypes = {
// propTypes here
};
const defaultProps = {
// defaultProps here
};
const MyComponent = ({ propA, probB, etc...}) => {
// your component logic and markup here.
};
MyComponent.propTypes = propTypes;
MyComponent.defaultProps = defaultProps;
export default MyComponent
For displaying error messages, such as when a form is submitted but the api returns an error.
MVP Proposed Props
prop | type | default value | description |
---|---|---|---|
children | node | content of the alert | |
autoHideDuration | number | number of milliseconds to wait before automatically dismissing the alert | |
dismissible | bool | false | when true, display a close button so the alert can be dismissed |
onDismiss | func | callback function called when an alert is dismissed |
Post MVP
prop | type | default value | description |
---|---|---|---|
type | enum | info | success, warning, danger, info |
implement an autoprefixer
Improve dev ex by reloading storybook when styles are updated. currently we have to refresh browser manually
Add proper lint on save when running storybook in development mode.
Run linter on build processes.
In order to get our global scss classes and variables available in storybook stories, we've updated the webpack config for storybook in main.js
this uses sass-resources-loader
to inject our global scss so it's available to all components.
While the yarn storybook
command works properly and produces local storybook development build, the production build as made by yarn build-storybook
command is now broken due to this same additional scss config.
Below is the logged error when we run the build process.
=> Failed to build the preview
ERR! ./src/main.scss
ERR! Module build failed (from ./node_modules/react-scripts/node_modules/mini-css-extract-plugin/dist/loader.js):
ERR! ModuleBuildError: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ERR! Error: Didn't get a result from child compiler
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/mini-css-extract-plugin/dist/loader.js:144:23
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:343:11
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:681:15
ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
ERR! at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:678:31
ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR! at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1423:35
ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR! at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1414:32
ERR! at eval (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
ERR! at runMicrotasks (<anonymous>)
ERR! at processTicksAndRejections (internal/process/task_queues.js:97:5)
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/NormalModule.js:316:20
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/loader-runner/lib/LoaderRunner.js:367:11
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/loader-runner/lib/LoaderRunner.js:182:20
ERR! at context.callback (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/mini-css-extract-plugin/dist/loader.js:144:14
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:343:11
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:681:15
ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
ERR! at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:678:31
ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR! at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1423:35
ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR! at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1414:32
ERR! @ ./src/components/colors/Colors.stories.jsx 4:114-138
ERR! @ ./src sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^/]*?\.stories\.jsx\/?)$
ERR! @ ./.storybook/generated-entry.js
ERR! @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/generated-entry.js
ERR! ./src/components/colors/colors.scss
ERR! Module build failed (from ./node_modules/react-scripts/node_modules/mini-css-extract-plugin/dist/loader.js):
ERR! ModuleBuildError: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ERR! Error: Didn't get a result from child compiler
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/mini-css-extract-plugin/dist/loader.js:144:23
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:343:11
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:681:15
ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
ERR! at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:678:31
ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR! at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1423:35
ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR! at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1414:32
ERR! at eval (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
ERR! at runMicrotasks (<anonymous>)
ERR! at processTicksAndRejections (internal/process/task_queues.js:97:5)
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/NormalModule.js:316:20
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/loader-runner/lib/LoaderRunner.js:367:11
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/loader-runner/lib/LoaderRunner.js:182:20
ERR! at context.callback (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/mini-css-extract-plugin/dist/loader.js:144:14
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:343:11
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:681:15
ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
ERR! at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:678:31
ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR! at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1423:35
ERR! at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
ERR! at AsyncSeriesHook.lazyCompileHook (/Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/tapable/lib/Hook.js:154:20)
ERR! at /Users/palmetto/Documents/dev/palmetto/palmetto-components/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:1414:32
ERR! @ ./src/components/colors/Colors.stories.jsx 4:138-160
ERR! @ ./src sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|\/)\.).)*?)\/)?(?!\.)(?=.)[^/]*?\.stories\.jsx\/?)$
ERR! @ ./.storybook/generated-entry.js
ERR! @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js ./.storybook/generated-entry.js
(node:32519) UnhandledPromiseRejectionWarning: [object Object]
(node:32519) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:32519) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
When attempting to test a TextInput
component that has an inputMask
prop. We use the standard fireEvent.change
method from react-testing-library (RTL) however, the masked input renders a Cleave.js
component, which appears to not fire this event upward to the parent, resulting in a failing test. The value of the input itself, changes properly, but testing with jest it doesn't seem to catch it properly.
To replicate:
IN TextInput.test.js
Write a test similar to 'onChange event fires callback function'
but in this case pass a inputMask="phone"
prop to the TextInput
component. The mock onChange event will now not register firing properly.
We need to add a build script that will publish our package to npm and meet the following requirements:
Expose components on an individual basis that can be imported from the library as such import { Component } from '@palmetto/palmetto-components
Expose our global scss variables and utility classes so they can be used by the consumer as such @import '~palmetto-components/utilities.scss'
can use rollup plugins after #24 is merged
https://github.com/rollup/plugins (babel and typescript)
connect typescript types and proptypes: https://github.com/milesj/babel-plugin-typescript-to-proptypes
See #3: https://blog.newrelic.com/engineering/best-practices-shared-ui-libraries/
Article suggests normalizing at the component level, as opposed to using a global reset. This would suggest wrapping each component in a "paper" or container component which would have the styles applied to it, or using composes from CSS Modules. This way, each module has its own reset, but the consuming app can override if they choose to do so.
Using CODECOV
We mean to create formik bindings to all our form components so that they can be used seamlessly with formik.
Unify build process between storybook and distrbution.
possible component we want to copy the functionality of or just straight up use: https://github.com/stereobooster/react-ideal-image
Features
PROBLEM STATEMENT
We are hoping to implement CSS architecture that enables a great development experience for both library developers and consumers.
BASIC REQUIREMENTS
<input>
elements, just ours.OVERVIEW OF INITIAL TECH OPTIONS BROUGHT FORTH
This is a major update, and updates several dependencies. Build should be stable before we attempt.
Use the following package, or similar, to automate sorting.
This isn't directly used by consumers, but we should still create stories so we can get chromatic visual regression test coverage.
Do we assume/require react router?
We took a vote in Slack, and decided on how to organize our PropTypes. Now, we need to retroactively go back and correct existing components.
The decision was.... List required first in alphabetical order, then non-required in alphabetical order.
This ordering needs to be applied to propTypes, defaultProps, and where the props are imported into the component.
https://palmetto-team.slack.com/archives/C014E879QCX/p1595005588365300
@RyanMacBern suggests: "import/order": [ "error", { "groups": ["object", "builtin", "external", "internal", "parent", "sibling", "index"] } ],
change from esnext
to es6
Versions of prismJS below version 1.21.0 have a XSS vulnerability. We have this dependency due to react-syntax-highlighter
which is in turn a dependency in storybook
.
The storybook has an open PR to address this here: storybookjs/storybook#11838
Once that is merged we need to upgrade our storybook version to patch up the vulnerability.
Render prop in Formik is being deprecated for version 2.x. See: https://formik.org/docs/migrating-v2#all-render-props-have-been-deprecated-with-a-console-warning
I need to be able to clear the selected value on a component that does not have multi-select enabled.
We should just be able to pass the isClearable
prop through to the underlying react-select component.
For e.g. --color-brand-grey-lightest
We have started a reset.css
file, but should we just use normalize?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.