@web-fuse/wf-components
v1.0.9
Published
A library containing common form and display components
Downloads
26
Readme
Web-Fuse Components
A library containing common form and display components. The component requires that you use the React Framework and relies on styled-components and antd packages. If you want to use the CodeBlock you will also need to install react-copy-to-clipboard and react-syntax-highlighter.
Previewing components
You can preview and test the components by cloning the repository to your system and running storybook.
- Clone this repository to your system
- Open the directory in a terminal
- Install all dependencies by running
npm install
in the terminal - To start storybook run
npm run storybook
Local development
To make changes in the repository you should first run storybook as explained in Previewing Components. Open the component you want to edit in storybook and navigate to the corresponding file in the src
directory. Each component will have its own file or files. Stories are located in the src/stories
directory.
Each component must always be exported using export default
and each component must always be assigned to a const
variable before it is exported. If this is not done vite may have problems rebuilding the component and React will not know the name of the component.
Ant design global message API
You can create a global context for the ant design message API by using the MessageProvider
component. The messages can be styled by placing the ConfigurationProvider
higher in the component tree and customizing the theme. Use the useMessageApi
hook to access the message API and show message to the user.
It is currently not possible to create nested MessageProviders.
Custom theme algorithm for antd
If you are using the theme.darkAlgorithm
in your antd ConfigProvider
you may notice that your primary color is not preserved. Therefor this package includes the wfDarkAlgorithm
export. The only change, compared the the darkAlgorithm exported by antd, is that it takes retains your primary color.