Merge branch 'styled-components' of https://github.com/cmpsr/composer …

…into styled-expandabletextfieldicon * 'styled-components' of https://github.com/cmpsr/composer: Use typescript config in tests and stories too (#191) Image customCss Implementation (#186) Styled TextField (#185)
cmpsr · Nov 2, 2020 · 3ad68fd · 3ad68fd
2 parents 6749108 + 6b49b70
commit 3ad68fd
Show file tree

Hide file tree

Showing 23 changed files with 368 additions and 41 deletions.
diff --git a/packages/styled-components/.babelrc b/packages/styled-components/.babelrc
@@ -5,7 +5,6 @@
       "module-resolver",
       {
         "alias": {
-          "src": "./src",
           "components": "./src/components",
           "utils": "./src/utils",
           "tests": "./config/jest",

diff --git a/packages/styled-components/src/components/containers/Grid/Grid.stories.tsx b/packages/styled-components/src/components/containers/Grid/Grid.stories.tsx
@@ -93,7 +93,7 @@ export const TwoColumnsDesktopOneMobileWithImages = () => (
       title="Create an Out-of-this-World website with this headline"
       subtitle="We are right now on the verge of finding out whether there is life elsewhere in the universe, and there are three ways we could find it."
       asset={{
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
         title: 'Image Title',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
       }}
@@ -102,7 +102,7 @@ export const TwoColumnsDesktopOneMobileWithImages = () => (
       title="Create an Out-of-this-World website with this headline"
       subtitle="We are right now on the verge of finding out whether there is life elsewhere in the universe, and there are three ways we could find it."
       asset={{
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
         title: 'Image Title',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
       }}
@@ -111,7 +111,7 @@ export const TwoColumnsDesktopOneMobileWithImages = () => (
       title="Create an Out-of-this-World website with this headline"
       subtitle="We are right now on the verge of finding out whether there is life elsewhere in the universe, and there are three ways we could find it."
       asset={{
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
         title: 'Image Title',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
       }}
@@ -120,7 +120,7 @@ export const TwoColumnsDesktopOneMobileWithImages = () => (
       title="Create an Out-of-this-World website with this headline"
       subtitle="We are right now on the verge of finding out whether there is life elsewhere in the universe, and there are three ways we could find it."
       asset={{
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
         title: 'Image Title',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
       }}
@@ -146,42 +146,42 @@ export const Playground = () => (
       asset={{
         title: '',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
       }}
     />
     <Asset
       asset={{
         title: '',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
       }}
     />
     <Asset
       asset={{
         title: '',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
       }}
     />
     <Asset
       asset={{
         title: '',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
       }}
     />
     <Asset
       asset={{
         title: '',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
       }}
     />
     <Asset
       asset={{
         title: '',
         url: 'https://avatars0.githubusercontent.com/u/67131017?s=200&v=4',
-        contentType: 'image',
+        contentType: Asset.ContentType.Image,
       }}
     />
   </Grid>

diff --git a/packages/styled-components/src/components/primitives/Asset/Asset.test.tsx b/packages/styled-components/src/components/primitives/Asset/Asset.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Asset } from './Asset';
+import { Asset } from '.';
+import { ContentType } from './Asset.types';
 
 describe('Asset', () => {
   it('should render an image asset type', () => {
@@ -12,7 +13,7 @@ describe('Asset', () => {
     screen.getByTestId('video');
   });
 
-  const givenComponentRendered = (type: Asset.ContentType) =>
+  const givenComponentRendered = (type: ContentType) =>
     render(
       <Asset
         asset={{

diff --git a/packages/styled-components/src/components/primitives/Asset/Asset.tsx b/packages/styled-components/src/components/primitives/Asset/Asset.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Video } from 'components/primitives/Video';
 import { Image } from 'components/primitives/Image';
-import { Props, ContentType } from './Asset.types';
+import { Props, Type, ContentType } from './Asset.types';
 
-export const Asset = ({
+export const Asset: Type = ({
   autoPlay,
   controls,
   className,

diff --git a/packages/styled-components/src/components/primitives/Asset/Asset.types.ts b/packages/styled-components/src/components/primitives/Asset/Asset.types.ts
@@ -1,3 +1,4 @@
+import { FunctionComponent } from 'react';
 import { BaseProps } from 'components/Components.types';
 
 export type Props = BaseProps & {
@@ -7,6 +8,10 @@ export type Props = BaseProps & {
   controls?: boolean;
 };
 
+export type Type = FunctionComponent<Props> & {
+  ContentType?: typeof ContentType;
+};
+
 export enum ContentType {
   Image = 'image',
   Video = 'video',

diff --git a/...d-components/src/components/primitives/Chat/ConversationList/ConversationList.stories.tsx b/...d-components/src/components/primitives/Chat/ConversationList/ConversationList.stories.tsx
@@ -24,7 +24,7 @@ export const Conversations = () => (
     <ConversationList
       conversations={[
         {
-          id: 1,
+          id: '1',
           title: 'Pau Teruel',
           description: 'Description',
           message: 'Message',
@@ -35,7 +35,7 @@ export const Conversations = () => (
           unreadMessages: 0,
         },
         {
-          id: 2,
+          id: '2',
           title: 'John Cena',
           description: 'Description',
           message: 'Message',

diff --git a/...yled-components/src/components/primitives/Chat/ConversationList/ConversationList.test.tsx b/...yled-components/src/components/primitives/Chat/ConversationList/ConversationList.test.tsx
@@ -4,7 +4,7 @@ import { ConversationList } from '.';
 
 describe('ConversationList', () => {
   const testId = 'conversationList';
-  it('should render classname', () => {
+  it('should render class name', () => {
     render(<ConversationList className="foo" conversations={[]} />);
     const conversationList = screen.getByTestId(testId);
     expect(conversationList).toHaveClass('foo');
@@ -27,7 +27,6 @@ describe('ConversationList', () => {
             title: 'title',
             description: 'description',
             message: 'message',
-            messageClassName: 'italic',
             time: 'time',
             avatarText: 'avatarText',
             isHighlighted: false,
@@ -41,7 +40,6 @@ describe('ConversationList', () => {
             title: 'title',
             description: 'description',
             message: 'message',
-            messageClassName: 'italic',
             time: 'time',
             avatarText: 'avatarText',
             isHighlighted: false,

diff --git a/packages/styled-components/src/components/primitives/Form/TextArea/TextArea.stories.tsx b/packages/styled-components/src/components/primitives/Form/TextArea/TextArea.stories.tsx
@@ -4,15 +4,20 @@ import { boolean, text, select } from '@storybook/addon-knobs';
 
 export default {
   title: 'Primitives/Form/TextArea',
-  component: TextArea
+  component: TextArea,
 };
 
 export const Shapes = () => (
   <>
     <h1>TextArea shapes</h1>
     {Object.keys(TextArea.Shapes).map((shape: any, i) => (
       <div key={i}>
-        <TextArea shape={TextArea.Shapes[shape]} value={shape} />
+        <TextArea
+          shape={TextArea.Shapes[shape]}
+          value={shape}
+          placeholder={shape}
+          name={shape}
+        />
         <br />
       </div>
     ))}
@@ -22,21 +27,27 @@ export const Shapes = () => (
 export const Disabled = () => (
   <>
     <h1>TextArea disabled</h1>
-    <TextArea disabled value="disabled" />
+    <TextArea
+      disabled
+      value="disabled"
+      placeholder="disabled"
+      name="disabled"
+    />
   </>
 );
 
 export const Invalid = () => (
   <>
     <h1>TextArea invalid</h1>
-    <TextArea invalid value="invalid" />
+    <TextArea invalid value="invalid" placeholder="invalid" name="invalid" />
   </>
 );
 
 export const Playground = () => (
   <>
     <h1>Playground</h1>
     <TextArea
+      name="text-area"
       value={text('Value', 'value')}
       placeholder={text('Placeholder', 'Placeholder')}
       disabled={boolean('Disabled', false)}

diff --git a/packages/styled-components/src/components/primitives/Form/TextArea/TextArea.test.tsx b/packages/styled-components/src/components/primitives/Form/TextArea/TextArea.test.tsx
@@ -5,33 +5,43 @@ import { TextArea } from '.';
 describe('TextArea', () => {
   const testId = 'textArea';
   it('should render element with name', () => {
-    render(<TextArea name="text-area" />);
+    render(<TextArea placeholder="placeholder" name="text-area" />);
     const textArea = screen.getByTestId(testId);
     expect(textArea).toHaveAttribute('name', 'text-area');
   });
   it('should render class', () => {
-    render(<TextArea className="foo" />);
+    render(
+      <TextArea placeholder="placeholder" name="text-area" className="foo" />
+    );
     const textArea = screen.getByTestId(testId);
     expect(textArea).toHaveClass('foo');
   });
   it('should render custom Css', () => {
-    render(<TextArea customCss="foo" />);
+    render(
+      <TextArea placeholder="placeholder" name="text-area" customCss="foo" />
+    );
     const textArea = screen.getByTestId(testId);
     expect(textArea).toHaveClass('custom');
   });
   it('should render required', () => {
-    render(<TextArea required />);
+    render(<TextArea placeholder="placeholder" name="text-area" required />);
     const textArea = screen.getByTestId(testId);
     expect(textArea).toBeRequired();
   });
   it('should render invalid', () => {
-    render(<TextArea invalid />);
+    render(<TextArea placeholder="placeholder" name="text-area" invalid />);
     const textArea = screen.getByTestId(testId);
     expect(textArea).toHaveClass('invalid');
   });
   it('should call onChange', () => {
     const mockOnChange = jest.fn();
-    render(<TextArea onChange={mockOnChange} />);
+    render(
+      <TextArea
+        placeholder="placeholder"
+        name="text-area"
+        onChange={mockOnChange}
+      />
+    );
     const textArea = screen.getByTestId(testId);
     fireEvent.change(textArea, { target: { value: 'foo' } });
     expect(mockOnChange).toBeCalledTimes(1);

diff --git a/packages/styled-components/src/components/primitives/Form/TextField/TextField.stories.tsx b/packages/styled-components/src/components/primitives/Form/TextField/TextField.stories.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { TextField } from '.';
+import { action } from '@storybook/addon-actions';
+import { boolean, text, select, number } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Primitives/Form/TextField',
+  component: TextField,
+};
+
+export const Shapes = () => (
+  <>
+    <h1>TextField shapes</h1>
+    {Object.keys(TextField.Shapes).map((shape: any, i) => (
+      <div key={i}>
+        <TextField
+          shape={TextField.Shapes[shape]}
+          placeholder={shape}
+          name={shape}
+        />
+        <br />
+      </div>
+    ))}
+  </>
+);
+
+export const Modes = () => (
+  <>
+    <h1>TextField Modes</h1>
+    {Object.keys(TextField.Modes).map((mode: any, i) => (
+      <div key={i}>
+        <TextField
+          inputMode={TextField.Modes[mode]}
+          placeholder={mode}
+          name={mode}
+        />
+        <br />
+      </div>
+    ))}
+  </>
+);
+
+export const Disabled = () => (
+  <>
+    <h1>TextField disabled</h1>
+    <TextField disabled placeholder="disabled" name="disabled" />
+  </>
+);
+
+export const Invalid = () => (
+  <>
+    <h1>TextField invalid</h1>
+    <TextField invalid placeholder="invalid" name="invalid" />
+  </>
+);
+
+export const Playground = () => (
+  <>
+    <h1>Playground</h1>
+    <TextField
+      name="name"
+      placeholder={text('Placeholder', 'Placeholder')}
+      disabled={boolean('Disabled', false)}
+      invalid={boolean('Invalid', false)}
+      required={boolean('Required', false)}
+      maxLength={number('Max length', 12)}
+      shape={select('Shape', TextField.Shapes, TextField.Shapes.Rectangle)}
+      inputMode={select('Mode', TextField.Modes, TextField.Modes.Text)}
+      onChange={action('On change')}
+      customCss={text('Custom css', 'padding: 10px; border: 1px dashed blue;')}
+    />
+  </>
+);