juntossomosmais / atomium Goto Github PK
View Code? Open in Web Editor NEWAtomium is an internal design system for 'Juntos Somos Mais' using Web Components
Home Page: https://juntossomosmais.github.io/atomium/
License: MIT License
Atomium is an internal design system for 'Juntos Somos Mais' using Web Components
Home Page: https://juntossomosmais.github.io/atomium/
License: MIT License
REF #82
While implementing carousing within Loja Virtual, we face the issue of the Card componing looses its "connectin" with the framework. Stops to be interactible and reactive, stops to update values and other items, see the video below:
PS. I already uunderstood whats is going on and am current working on it, on the next hours i will open the PR fixint it ๐๐ป
Inputs with required, patten, or specific types aren't being validated when form is submited
Example code:
<form onsubmit="return false">
<atom-input required="true" type="text"></atom-input>
<button>submit</button>
</form>
or
<form onsubmit="return false">
<atom-input type="email"></atom-input>
<button>submit</button>
</form>
Evidence:
https://github.com/juntossomosmais/atomium/assets/6757777/52389899-58d4-4c54-8e8f-9bbf255aba18
On the README.md
file (root) we have a command npm run storybook:build
that doesn't exist, we could:
npm run start
already does the job, orscript
on package.json
.Loading
state, is enabledCode example
import React from 'react'
import { AtomButton } from '@juntossomosmais/atomium/react'
export default function Teste() {
return (
<>
<AtomButton loading onClick={() => console.log('LOADING CLICK')}>
Loading
</AtomButton>
<AtomButton disabled onClick={() => console.log('DISABLED CLICK')}>
Disabled
</AtomButton>
<AtomButton onClick={() => console.log('NORMAL CLICK')}>
Normal
</AtomButton>
</>
)
}
Video example
This issue is an live issue for us to keep track and an eye on the problem around package.json property exports with both Stencil and Jest
While development of the Carousel Component(#235) we have discover a problem when using Swiper on the project.
Swiper package.json uses the export
property to export diferent modules inside the lib
We discovered this is as issue with stencil itself, once while trying to use like explained on Swiper docs we recieve the below error while building and starting the project:
[ WARN ] Bundling Warning UNRESOLVED_IMPORT
'swiper/element/bundle' is imported by src/components/my-component/my-component.tsx, but could not be
resolved โ treating it as an external dependency
We opened the issue ionic-team/stencil#4660 on stencil's repository, and was informed to create a thread on the support discord channel.
We manage to be able to use Swiper with Stencil by change the way we import, from:
import { register } from 'swiper/element/bundle';
register();
to
import 'swiper/swiper-element-bundle.js';
This way Swiper register the custom element automaticaly using an IIFE.
We also discovered this to be an issue with Jest once our current version of jest doesn't support this property current. (jestjs/jest#9771 (comment))
This already had been reported on swipers oficial repository:
Even we had manage to work with Swiper on the element itself, we had trouble using it with stencil test suit .
In order to register a web component within the test Mock DOM we are required to pass it through components
property inside the newSpecPage
, but once we cant named import things from Swiper, it can anchieve full coverege on Swiper events, for exemple.
You can see that the PR's coverage is below the required only because of the three lines of the on
functions.
Wrapper of swiperjs.com
Example of a mask for a CPF input:
<AtomInput
placeholder='999.999.999-99'
mask='000.000.000-00'
/>
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.