yet another Svelte ui library
Home Page: https://proi-ui.vercel.app
License: MIT License
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
histoire changelog: https://github.com/histoire-dev/histoire/blob/main/CHANGELOG.md
for instance:
https://proi-ui.vercel.app can navigate to https://proi-ui.vercel.app/story/lib-checkbox-stories-checkbox-story-svelte
but actually it is a 404.
Describe the bug
Having more inputs on the page triggers a warning regarding the uniqueness of the id.
Describe the bug
Close icon on mobile display does not stay middle centered when there is more text to show.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Close icon should stay middle centered.
Smartphone (please complete the following information):
Right now @specialdoom/proi-ui is using a from scratch solution for components docs and installation tutorial.
@specialdoom/proi-ui should be able to use an already existing solution like Storybook or Histoire
caused by contain: content css property
Describe the bug
Close icon of closable alert component does not display properly.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Close icon should be positioned centered right.
Screenshots
No screenshots.
Additional context
No additional context.
Right now the components are not tests completely. We need to configure the unit testing for components!
When displaying an error on different app the text error text is over the input.
Add padding for FormItem container.
Issue:
Is your feature request related to a problem? Please describe.
Trying to send a toast needs to specify type of toast.
Describe the solution you'd like
I would like to have a specific method to call when trying to send a specific toast.
toaster.error(message) instead of toaster.send({type: 'error', message})
Describe the bug
Width will take 50% space of parent container.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Input to take the entire container space.
Can't be used toghether with description property.
Design: https://www.figma.com/community/file/1150697835816146933
Is your feature request related to a problem? Please describe.
Don't like that when a button is disabled the cursor is still default.
Describe the solution you'd like
I want the cursor to be the not-allowed one.
Describe alternatives you've considered
No alternatives.
Additional context
No context.
Noticed that the types are not included in the package.
The documentation tells you to import @specialdoom/proi-ui/dist/proi-ui.css to my project and apply styling but there is no dist folder in the @specialdoom/proi-ui/ folder and it raises an error. Instead the proi-ui.css is in src folder inside the proi-ui folder and not in dist folder.
There is no hover style for button component.
We need to forward the $$restProps to the container of every component in the application. Currently, the $$restProps are not being passed to the container, which limits the flexibility and customization options available to the containers.
$$restProps to the container of the component.$$restProps to the container of the component.$$restProps to the container.$$restProps are correctly forwarded to the container.$$restProps to the container.The Dialog provides two properties to be able to send handlers for ok or cancel actions on Dialog component. This approach should be changed to use event dispatcher approach to dispatch ok and cancel events and to be able to handle them using on directive.
TextInput and Dropdown components have fixed width. We need to change that to be able to take the entire available width of the container.
There should be a way to define the structure of commit to be able to generate change logs based on squashed or merge commits on main branch.
Probably style issue
Alert component could be closable. There should be an event dispatched when user clicks on x
Tasks like update package version, publish new version and update docs site are done manually.
There should be an github action which does all this tasks on main branch push which is considered as the release branch
Is your feature request related to a problem? Please describe.
I'd like to add custom styles to components.
Describe the solution you'd like
Either add a class property and/or style property to components.
Describe alternatives you've considered
Add more options to components to make them more customizable.
Additional context
I like this library and want to use it.
We need to deprecate the existing toaster provider functionality in our library and rename the Toast component to Notification component. The current implementation of the toaster provider it's not in the purpose of the design system and in case of a monorepo could become a separate library that uses the Toast(Notification). By deprecating this functionality and introducing the Notification component, we aim to provide a more feasible and consumer wise way of displaying notifications.
Toast component to Notification component in all relevant files and references.Notification component thoroughly to ensure it functions correctly and provides a seamless user experience.ToasterProvider component, toast svelte store and the utility methods.Toast component to Notification component in all relevant files and references.Notification component thoroughly to ensure it functions correctly and provides a seamless user experience.New variant for Button component.
Design: https://www.figma.com/community/file/1150697835816146933
The Radio component expects a number type, but string should work as well.
We need to create a more generic spinner component for our design system that can be easily reused across different projects and applications. The existing spinner component are tightly coupled with specific implementations and lack flexibility based on the logo of the proi-ui design system. This new spinner component should provide a consistent and customizable loading indicator that can be used in various contexts.
We need to migrate our existing project from histoire to storybook 7 to take advantage of the latest features and improvements offered by Storybook. histoire is an alternative option for Storybook but right now it's offering poor support and less functionality. The version 7 of storybook will provide better performance, enhanced developer experience, and improved compatibility with the latest version of svelte.
histoire to storybook7 while preserving the existing components, stories structure, and theming configurationstorybook 7.histoire and storybook.histoire to storybook (optional).storybook 7 in the project, ensuring compatibility with the existing codebase.storybook 7 structure and format.storybook 7.histoire and related files.histoire to storybook 7, with all existing components and stories intact.storybook 7.I am making use of pnpm (which shouldn't cause any issues, in my opinion). I've tried both CSS as well as JS method, for which I am getting the same issue.
Failed to load url ./tags/Badge.svelte (resolved id: ./tags/Badge.svelte). Does the file exist?
Error: Failed to load url ./tags/Badge.svelte (resolved id: ./tags/Badge.svelte). Does the file exist?
at loadAndTransform (file:///home/ashvith/Desktop/portfolio/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-0bae2027.js:39278:21)From what I've noticed, looks like Badge.svelte is inside ./tags/badge/Badge.svelte and not ./tags/Badge.svelte
There should be a research regarding what will be the best way to achieve the dark theme.
Issue will close after we reach a deciding point. Any relevant information regarding css dark theme should be left as a comment on this issue.
The display property of Button container element is set to flex so whenever you want to use it with an Icon for example there won't be any gap between innerText and icon element.
gap property should be added with a value of 4pxWhen I run npm i @specialdoom/proi-ui I get this message:
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@specialdoom%2fproi-ui - Not found
npm ERR! 404
npm ERR! 404 '@specialdoom/proi-ui@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
New component to be used as a notification dot by using the existing Pill component.
This issue aims to update all components in the library to be Accessible Rich Internet Applications (ARIA) compliant. Currently, some components might not fully adhere to the ARIA guidelines and accessibility best practices, which can impact the usability and experience for users with disabilities.
ARIA compliance ensures that the components are accessible to individuals who use assistive technologies such as screen readers or keyboard navigation. By updating the components to follow ARIA guidelines, we can provide a more inclusive and accessible experience for all users.
Note: It is important to prioritize the components for updates based on their impact and usage. Link for ARIA patterns https://www.w3.org/WAI/ARIA/apg/
| Component | ARIA compliant |
|---|---|
Accordion |
✅ |
Alert |
🚧 |
Avatar |
❌ |
Badge |
❌ |
Breadcrumb |
❌ |
Button |
❌ |
Card |
❌ |
Checkbox |
❌ |
Pill |
❌ |
Dialog |
❌ |
Divider |
❌ |
Dropdown |
❌ |
TextInput |
❌ |
Textarea |
❌ |
PasswordInput |
❌ |
Notification |
❌ |
Progress |
❌ |
Switch |
❌ |
Spinner |
❌ |
Link |
❌ |
Dot |
❌ |
Tabs |
❌ |
adding custom styles to a Button component
Repo should provide coding standards by using linters: lslint, prettier
Commit should have a valid format like convetional-commit to be able to generate correct docs
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.