proksh / atomize Goto Github PK
View Code? Open in Web Editor NEWDesign System for developers build on styled-components & React JS.
Home Page: https://atomizecode.com/
License: Other
Design System for developers build on styled-components & React JS.
Home Page: https://atomizecode.com/
License: Other
Hi
I've just cloned and run atomize then got this issue
Fetch API cannot load webpack-internal:///./src/atoms/div/Div.js. URL scheme "webpack-internal" is not supported.
Debug worker error TypeError: Failed to fetch
at worker.js:1
at d (worker.js:1)
at worker.js:1
at add_mapped_class (worker.js:1)
at self.onmessage (worker.js:1)
What do I miss?
For example if i want to add 'mycustomclass' to a Div
something like this is not possible
<Div className='mycustomclass' />
I can't get the hoverColor property for the "Power" icon to work, but it works with other icons. You can use the following code for a quick test:
<Icon name="Power" size="1.5rem" hoverColor="info700" />
<Icon name="Refresh" size="1.5rem" hoverColor="info700" />
Hovering over the refresh icon will properly apply the hover color, but for the power icon it does not work (at least for me it doesn't).
Setting a CSS class on the icon element, and applying a fill property when hovered does work correctly, so I can use that as a workaround for now.
HTML:
<Icon className="icon-test" name="Power" size="1.5rem" />
CSS:
.icon-test:hover {
fill: red;
}
Hola!
I've been trying out your design system and we can't seem to make the layout system work. We've tried different permutations, used examples from your documentation, installed styletron, uninstalled, but it hasn't worked. There seems to be a larger issue here but we can't tell what it is.
Could you please have a look? https://gitlab.com/armlaurent/atomize-bug
Cheers
I was trying to place text (not placeholder text) in the input and textarea by default. I did not see any prop to do this but mirroring standard HTML I tried using:
<Input placeholder="Headline" value="What Fields Do You Care About?" />
This allowed for the value to appear, but not it appears to be frozen (the value can not be changed). Is there a way to place an initial value but then for the user to be able to change it?
Thank you in advance! Atomize has been game changing so I'm grateful for all of your work on it.
I'm not sure if this is already available, but it would be nice to have the ability to add a hover label to an icon or button. You can add the "title" attribute to a button and have the standard hover label/tool-tip display, but it doesn't match the aesthetic of the UI, and doesn't align with the element nicely.
<Button bg="white" title="test">
<Icon name="Logout" size="2rem" />
</Button>
This will display a label of "test" when hovering over the element, for example.
I'm not sure if what I'm asking is even possible, but just figured I would throw it out there.
Could not find a declaration file for module 'atomize'. '/home/alfonso/Documentos/Trabajo/TorrentSoftware/node_modules/atomize/index.js' implicitly has an 'any' type.
Try npm install @types/atomize
if it exists or add a new declaration (.d.ts) file containing declare module 'atomize';
Styles are not showing when importing the atomize
Can I add custom font to the fontFamily
? I know I can add Google Fonts, but how can I add custom webfonts if it's possible? I can't find anything in the docs related to this. Thanks!
Hi, can't we clone the homepage as it is? Currently, it renders only a "Start from here" and I was hoping for more.
getting an error when importing StyleReset and ThemeProvider -
Module not found: Can't resolve 'styletron-react' in 'E:\node-app\portfolio\node_modules\atomize\dist\atoms\button'
Hello, I am using atomize in one of my soon to be released project. I loved the concept how atomize works.
But I feel the documentation needs more work. Also there aren't any release changelog in github.
It would be good to have a changelog so that I can keep track with version updates.
Also any plan of moving the examples to functional components and introducing more hooks?
Also I had some confusions, Can I use styled-components with atomize if I want to? Or is styled-components actually needed? Or I can achieve almost everything without it?
Also, you designed to pass every possible styles through props, is there any special reason about this? As many developers might not like the idea of passing props for every styling, the reason we use styled-components. What are the benefits of using this pattern?
I would like to discuss more about it. These were my primary feedback.
Thank you ๐
My theme file used to work with Gatsby JS however it no longer does. Error is "Type Error: Cannot read property 'colors' of undefined"
This is how I have it in the gatsby-browser.js file to wrap my app in the ThemeProdiver component:
import React from "react"
import { ThemeProvider, StyleReset } from "atomize"
import theme from "constants/theme"
export const wrapRootElement = ({ element }) => (
<ThemeProvider theme={theme}>
<StyleReset />
{element}
</ThemeProvider>
)
The problem I'm encountering is the entire screen turning black when the Sidedrawer component is open. How can I fix this problem? The first two images show the screen on my website (which is black) when the sidedrawer is open. The last image shows what the screen should look like while the sidedrawer is open with a very opaque black screen. Sometimes when I open chrome dev tools, the black screen goes back to normal. How can I control the color of the remaining part of the screen outside of the side drawer?
When you pass multiple notifications, for, lets say reasons, they overlap. Request is that make the notifications like a list. A new notification appears, old ones slide a little down.
It would be cool to have @types/atomize
or just native support to Ts.
My page doesn't render a stylesheet correctly, the icons render as full page, and the styles from atomize are gone.
The error in console is:
Styletron has been switched to a no-op (test) mode.
A Styletron styled component was rendered, but no Styletron engine instance was provided in React context.
Did you forget to provide a Styletron engine instance to React context via using the Styletron provider component?
Note: Providers and Consumers must come from the exact same React.createContext call to work.
If your app has multiple instances of the "styletron-react" package in your node_module tree,
your Provider may be coming from a different React.createContext call, which means the styled components
will not recieve the provided engine instance. This scenario can arise, for example, when using "npm link".
First of all, thank you very much for such great job.
It is possible to see the demos? It seems that the example links are broken
React 17 is now the recommended version. More and more packages are migrating to it. Would be great if Atomize worked with React 17.
target="_blanc"
should be target="_blank"
target="_blanc"
does work, but if you go back to the webpage and click another link using target="_blanc"
it will replace the previously clicked on link, as _blanc
is the window name being opened rather than the "special" _blank
name
Reference https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target
I don't see the source code for the docs - does that still need to be pushed to GitHub? Looks like a Gatsby site.
Hi there, thanks for Atomize, it is really promising and it also has a beautiful UI!
I've been trying to accomplish a simple 3/4 column layout with atomize Row
, Col
but I'm not getting along the way it is supposed to work... I usually use reactstrap (Bootstrap 4) grid system...
Could anyone guide me towards the proper way of producing 3/4 column layout?
Here's a demo I'm working on...
I'd really appreciate any help regarding this issue. Thanks in advance.
Could a "Power" icon be added to the project? Something like: https://fontawesome.com/icons/power-off?style=solid
:)
I think the scrollTo button didn't work for me.
You can check why it doesn't work on my site: Example
This is how I wrote the component, same as the documentation code you have given:
import React from 'react'
import {Button, Div, scrollTo} from 'atomize'
import Notfound from '../Notfound/Notfound'
const Playground = () => {
// if (process.env.NODE_ENV === 'production') {
// return <Notfound/>
// }
// else{
return (
<Div>
<Div h="100vh" bg="blue100" d="flex" align="center" justify="center">
<Button
id="blueButton"
onClick={() => scrollTo("#yellowButton")}
bg="info700"
>
Scroll To Yellow Button
</Button>
</Div>
<Div h="100vh" bg="blue100" d="flex" align="center" justify="center">
<Button
id="yellowButton"
onClick={() => scrollTo("#blueButton", 100, 0, 800)}
bg="warning700"
>
Scroll To Blue Button
</Button>
</Div>
</Div>
)
}
// }
export default Playground
I'm using react-router-dom
, and routed components
, so I think it's the leading cause. I want to make a scroll to the top button. I tried using window.scrollTop(0,0)
but still not working (the button does nothing, no error caused).
Thanks for your help. Glad to get a response from you.
Would love if there are any existing Design system files for Atomize, I currently need it for Adobe xd, also someone might for figma.
Cool design system!
I was wondering how to create an autocomplete dropdown component.
I guess for the list is possible to use state and update them according on the typing, but how to put an input inside the dropdown?
Any suggestion is appreciated.
Thanks
I'm trying to use Atomize (https://atomizecode.com/) with Gatsby JS (https://www.gatsbyjs.org/) and while it is successfully installed, the atomize components are not being rendered to the page.
I am trying to import a button to start "Hey", and while it renders something it is not the standard button component. Also, even though the button component is imported, I get the warning that reads it is not being used.
I am wrapping atomize around gatsby app by the following way:
import React from "react"
import { StyleReset } from "atomize"
export const wrapRootElement = ({ element }) => (
<>
<StyleReset />
{element}
</>
)
Is there a way to clone the https://atomizecode.com/ Landing page?
Input fields at the moment do not support disabled state. Would be great to have this feature.
Hi, recently I had to open the Pull Request #30 because I had to modify the media queries in order to differentiate LG and XL screens.
However, this could not be a problem if we could just change media queries by theme provider this would make the library so much dynamic, for example, adding XXL or XXS.
Hello! Great work!
Can we please have a LICENSE.md on this repo, so we can begin to really use it ๐
Is the code for the example homepage somewhere?
Hi, atomize. Fan of your sketch library and excited to see this react library. However, there's a lot of missing accessibility on the interactive components. For example, the drop-down is rendered as a plain div with no role, tab-index, or aria to let a keyboard dependent user interact with it or know the state. Likewise, the focus is not sent to the modal component. Those are just two examples. Is accessibility in the roadmap? I'm happy to help.
<input type="password" />
It would be cool to use this beautiful desgin with Angular. I hope
Hi, on the documentation (Doc Link), example code for customizing container widths is like this:
const theme = { grid: { containerWidth: { xs: "540px", sm: "720px", md: "960px", lg: "1156px", xl: "1156px" }, gutterWidth: "12px", } };
but instead, it should be containerMaxWidth. Otherwise, it doesn't work.
const theme = { grid: { containerMaxWidth: { xs: "540px", sm: "720px", md: "960px", lg: "1156px", xl: "1156px" }, gutterWidth: "12px", } };
Currently there is a user icon that can potentially be used for a username input field, but there is not a corresponding password icon. It would be cool to have a key icon that can be used to represent password fields.
The username input field from the docs is used as an example with the UserSolid logo:
// Input With Right Button
import { Input, Icon } from "atomize";
const InputWithRightButton = () => {
return (
<Input
placeholder="User Name"
p={{ x: "2.5rem" }}
prefix={
<Icon
name="UserSolid"
color="warning800"
size="16px"
cursor="pointer"
pos="absolute"
top="50%"
left="0.75rem"
transform="translateY(-50%)"
/>
}
/>
);
}
Hi, I am using atomize for a toy project. I noticed that the collapse atom is not very snappy in it's animation, I'd like to speed up the animation. How to do this? Thank you!
Can't close the Modal when tapping the black-ish background
If I tap it it won't do anything... I want to make it close the Modal form.
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.