kapix-components-react

KAPIX-COMPONENTS-REACT library

Intro

Repository generated with https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library-2oe The aim is to provide a react UI components library for Kapix. The published material only comes from "./src/package". The rest is used for developement purposes via StoryBook. Kapix base elements have to be wrapped with "KapixElement" to be used with style and other features (responsiveness, animations, conditional style...).

For testing purposes, we use the "src/component" folder with "high level" kapix components. Don't forget that the truth source for those components in a generated React repo only comes from the repo "Reactjs-code-generation". Never copy all the "components" folder into "reactjs-code-generation". This one has specific implementations (like "_HeadMetaData"). When working on a new component, you should copy afterwards only the component's folder, and adapt code (like "import" statement to this package! (inception i know))

Process to work on a new component

• Create a story in "./stories".
• Put some generated react code that you want to run in ./generatedReact. There's a place for style too (import correctly "variables")
• Run "npm run storybook". (Hot reload doesn't work well. See "possible errors") Work on your component to make it behave like you want.
• then see "HOW TO PUBLISH"
• you may have to synchronize static files from "reactjs-code-generation" from time to time.

STACK

npm (not yarn!) rollup typescript eslint storybook sass iconify react-tooltip animate.css

Some possible errors

If storybook builds but nothing is displayed in the browser, try in "Incognito Mode" (without cache). If it works, clean your cache.

HOW TO PUBLISH

After your modifications, update version number in package.json. Then run "npm run rollup" Then "npm publish"

Tooltips

Tooltips are managed via "react-tooltip" (https://www.npmjs.com/package/react-tooltip). We expect react generated code to have a "data-tooltip" property (instead of "v-tippy" for Vue). This needs a <ReactTooltip ...options/> component at root, to display the portal of the modal.

String format from "options" prop

The inspiration for this package is a vue repo. Vue injects html text (with escaped characters). We manage it here with "decode" function (see "./helpers")

Icons

We use the Icon component from "iconify". The key argument should be formatted as needed. ( libraryKey + ":" + iconKey )

As of 10th of May, 2022, whats up

Result of mission

Initial templates of Kapix (Duckduckgo, Malt, Lostark) can be generated in React. For each of them, the code runs into a website that is, by its features and visuals, equivalent to the generated Vue website.

Still lots to do on components

• Lazyness of visibility in some components
• Labels and forms
• State-dependent style (for example, xs-selected style...)
• ClickActions that modify other elements in page. The only way to do this seems to target dom elements by their "id" attribute, as for the "scrollTo" action
• Translations
• Lots of specific components (typewriter, carousel... the ".vue" files are added in folders, waiting to be replaced)

See "Reactjs-code-generation" repo "README_internal.md" for more information on generated code