Add support for styled components about agrippa HOT 12 CLOSED

Glad I could help❗
I have looked a bit into the library. Looks very useful: Really great work! Keep it up: Love the idea of automating some of the trivial tasks when creating a project in React 🙌❗

from agrippa.

Sorry for the delay.

As for the layout/customization bit - I do want to provide a solution for different use-cases, but I'd rather not fill Agrippa's API with styling solution specific flags that might seldom be used; therefore, if we find that different arrangements are actually needed by users of the CLI, I'd gladly add different options or layouts, but I'd like to start with something simple.

It seems that an import (1) and component declaration (2) will be present in every component using styled-components. passing the className prop to the JSX root (3) is just a minor "touch", and I don't see much value in having it set one way or the other (that is, keeping it or removing it).
Also, you do need some way to export the component, so I don't exactly understand what you meant by not having 5. Did you mean you don't like the "renamed" export? what would you prefer?

With all of those aside, we're left with only (4). Putting (4) above (2) means that the component needs to be changed from a arrow-function const to a function declaration, which is totally OK.

My main question with (4), though, is how often do you style the component itself, as opposed to styling a native HTML tag? In other words, how often do you use

const AComponentStyled = styled(AComponent)``

as opposed to styling native tags, like

const Button = styled.button``

I'm asking because the latter appears in the majority of the snippets I've seen, but the former makes much more sense to me for an acutal project.

from agrippa.

Hi @nonameolsson, thanks for reaching out!

I think your request deserves its own issue - let us continue the discussion on #42.

from agrippa.

v1.4.0 RC is out, and this feature is in it 🚀
Closing this issue, thanks again everyone.

from agrippa.

Hi!
Would something like this (generalized, of course) work for you?

import React from 'react';
import styled from 'styled-components'; // 1. Import styled-components

const AComponent = ({ className }) => { // 2. Receive className prop

  //...

  return (
    <div className={className} /> // 3. Pass className prop to JSX root
  )
} 

const AComponentStyled = styled(AComponent)`` // 4. Create styled variant

export { AComponentStyled as AComponent }; // 5. Export styled variant under original name

I've never used styled-components in practice, so I'm sorry if I've got this completely wrong, but this seems like it covers the general actions needed when working with styled-components.

from agrippa.

Hi,

I'm no expert with Styled Components but yes, generally this seems ok, am I right at assuming these would be optional or would every component be generated like this? because it would be much more useful if I could chose the exact layout. lets say I would like to only have 1. the import and 2. the component and also 3 and 4 but not 5, is this possible? Also usually 4 would go between 1 and 2.

from agrippa.

Following the addition of an options to export the component as a default export (#7), I'm guessing the component can be exported as I've mentioned above in the case of a named export, and as export default styled(AComponent) in the case of a default export.

I'm planning to implement this sometime after #11, hopefully in v1.2.0.

from agrippa.

This is a good suggestion! I want to use Agrippa, but we have a component file structure that I can't create with Agrippa.

Below is the default structure of each component. I have a template folder on my desktop that I just copy when I want to create a new component.

Folder structure
src/components/component-name

Content of a component

component-name.interfaces.ts
component-name.styles.ts
component-name.tsx
index.ts

File content

component-name.interfaces.ts

export interface OptionalStyleProps {
}

export interface RequiredStyleProps {
}

export interface ComponentProps {
}

export interface Props
  extends ComponentProps,
    Partial<RequiredStyleProps>,
    OptionalStyleProps {}

component-name.styles.ts

import tw from 'twin.macro'
export const StyledComponentName = tw.div``

component-name.tsx

import { Props } from './component-name.interfaces'
import { StyledComponentName } from './component-name.styles'

/**
 * Primary UI component for user interaction
 */
export function ComponentName(props: Props) {
  return (
    <StyledComponentName>
      {children}
    </StyledComponentName>
  )
}

index.ts

export * from './component-name'
export type { Props as ComponentNameProps } from './component-name.interfaces'

Would it be possible to add support for some configuration so that Agrippa could generate something this?

from agrippa.

Hi, wondering where is this issue standing regarding milestones?

from agrippa.

Hi! Sorry for the delayed response.

Following the discussion on Dev.to, we've got a basic understanding of some way people use styled-components; I think we're finally ready to implement this in the next minor version, v1.4.

from agrippa.

Ok, it's implemented in version 1.4.0-alpha.4 🥳 🎉
You can install it using npm i -g [email protected].

styled-components styles can be generated by using the styled-components option for the styling flag, either through the CLI or through .agripparc.json.

The implementation is based on @LarsEjaas's suggestion on dev.to. Thanks!

@hannanel100 (and anyone else who uses styled-components), please test it out!
Your feedback as styled-component users is super important here.

This version is technically an unstable one, but the tests I set up for the feature pass and it seems to behave smoothly. Either way, if you come across any bugs or have any other feedback, please reply here!

Note: this alpha version contains some features that previous alpha versions were released for - most notably, the CLI's printing is now much much prettier 🖌️ ✨
There shouldn't be much overlap, but if you encounter unexpected behavior from Agrippa, please report it!

I'm quite excited for that this feature is finally implemented. Thanks for your patience!

from agrippa.

Thanks a lot!

from agrippa.