R3-Lib

Standardizes flow and visuals for Norce Flight (> 5.14) projects

Work in progress ⚠️

TODO

-[x]Change BoxContent from arg -> children (using ContentPositioner instead)

• Add/use Fontawesome
• Folder with own types (if they are generall otherwise they should live in component)
• Check handeling of fragments in GQL ( dependencies to core aso )
• [x]Create Animation wrapper (with a few animation styles)
• Teleprompt component (automatically types text)
• [x] ScrollSnapper
• MarqueeSlider (Finntack)
• General close button + clickcallback
• General context for lib
• Count down component
• Form component ( submit url, children with title, input, validation )
• Documentation goal -> Complete Storybook
• Documentation start -> Add docs to route for dev/stage, add content renderer with components and show info using json
• Add slightly zoom in on image hoover ( use style and Animation wrapper )
• AddToCartButton (Radne)
• QtyAdjuster (Radne)
• Checkbox (Radne)
• [x]Progressbar
• [x]ShakeStyle
• NotFoundPage
• R3-provider (contains all contexts)
• Device testing
• [x]UseJsonFetch
• Add regex to CE components
• UI page - presents all components
• [x]ScriptLoader
• [x]ScriptLoaderAttributes (files + json)
• PopupTrigger
• Payment icons
• [x]Seo components
• Price history component
• [x]Accordion component
• AccordionBlock ce components
• Change all px -> rem
• [x]Loader/spinner
• Use lottie animations ?
• [x]Curtain component
• [x]Popup component
• PartyTown 🎉
• Add notification handler (Toastify?)
• Notification component
• Add AutoAnimate
• HeadlessUI ( [x]Dialog implemented )
• [x]MaxWidth component
• ContentColumns component (Radne)
• Add H1 bool for Hero and Box
• Add general tracking
• Add video hero
• Add video box
• Add Parakllax component ( using SwiperJS)
• Add license to package.json

Installation

R3-Lib requires:

• Node.js v16+
• Linaria
• Jest

Install the package.

• not implemented yet

yarn add r3-lib

Adding component

For adding new component use existing project structure. Naming convention: CamelCase.

• Add a folder width same name as component.
• Add a TypeScript file (Component (ExampleComponent.tsx))
• Add a JavaScript file (CSS style, use suffix .style before .js (ExampleComponent.style.js))
• Add a JavaScript test file (Jest test file (ExampleComponent.test.js))

Component styling file

• import { css } from 'linaria'
• Create an exported const width component name and suffix "Style" (const exampleComponentStyle = css``)

The end