proksh/atomize

Design System for developers build on styled-components & React JS.

atomize's Issues

Theme does not work with Gatsby JS

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>
)

https://atomizecode.com/

Is the code for the example homepage somewhere?

is there a way to add custom classes to elements?

For example if i want to add 'mycustomclass' to a Div

something like this is not possible
<Div className='mycustomclass' />

Styletron error on [email protected]

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".

Add "Power" icon

Could a "Power" icon be added to the project? Something like: https://fontawesome.com/icons/power-off?style=solid

:)

Typescript Integration?

It would be cool to have @types/atomize or just native support to Ts.

Cloning Homepage

Hi, can't we clone the homepage as it is? Currently, it renders only a "Start from here" and I was hoping for more.

computeDivStyle - TypeError: Cannot read property 'rounded' of null

Getting an error with the Div.style.js file when running my project. Not sure if this is an atomize problem, or maybe a styletron-react issue... I've attached a screenshot of the error output

SideDrawer turns the rest of the screen black when open rather than an opaque black

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?

Password Input Mask

How could I set secure password input to my Atomize Inputs?

• I need something like the html result of:

<input type="password" />

Dynamically change media queries ?

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.

Add meta informations on the repository

Hi, thank you for your work 👍

Actually the top of your repository is empty. It suggest to fill the missing meta data:

• website
• short description
• Related topics (tags)

Collapse animation speed

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 resolve './dist' in 'node_modules/atomize'

Looks like dist folder is missing from your repo when installed

Custom theme setup container width is incorrect on documentation.

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", } };

Error integrate react and laravel!!

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

Any Design Files ?

Would love if there are any existing Design system files for Atomize, I currently need it for Adobe xd, also someone might for figma.

Custom Font

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!

Improvement needed for documentation.

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 😄

hoverColor for "Power" icon not working

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;
}

Input and textarea available prop for existing copy

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.

Can't close the Modal when tapping the black-ish background

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.

The Row, Col system doesn't work as expected in my Create-React-App project.

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

ScrollTo didn't work for me!

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.

Support disabled state in input fields

Input fields at the moment do not support disabled state. Would be great to have this feature.

Documentation is good, but I can't get along the "Grid" system

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.

Add a new "key" or "password" icon for password input fields

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%)"
        />
      }
    />
  );
}

Atomize with Angular?

It would be cool to use this beautiful desgin with Angular. I hope

Contributing to docs.

I don't see the source code for the docs - does that still need to be pushed to GitHub? Looks like a Gatsby site.

Getting error

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'

Autocomplete dropdown

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

Fetch API cannot load webpack-internal:///./src/atoms/div/Div.js. URL scheme "webpack-internal" is not supported.

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?

Request : Make Notifications not overlap.

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.

Support React 17

React 17 is now the recommended version. More and more packages are migrating to it. Would be great if Atomize worked with React 17.

LICENSE.md

Hello! Great work!

Can we please have a LICENSE.md on this repo, so we can begin to really use it 😄

Add hover label for icons and/or buttons

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.

Accessibility

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.

target="_blanc" should be target="_blank"

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

GitHub Page Example Section Have Broken Links

This is what you get when trying to access the examples

Not working with reactjs and doc is incorrect

Fix the links of the example code

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

Why is atomize not working with Gatsby JS?

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}
     </>
   )

Clone https://atomizecode.com/ Landing

Is there a way to clone the https://atomizecode.com/ Landing page?