Styled components (#205)

* install styled-components dependencies

* initial commit
- initial package configuration
- add button primitive component

* update storybook to latest version

* create getTheme method to return default one if none provided

* extract types to a file

* unit tests Button component

* create Button stories

* remove unused dependencies

* temporary rename packages to styled-components to avoid conflicts with the current one

* fix ts config paths

* feat: remove unused styles (#151)

* Styled icon (#152)

* add alias for the styles folder to babel

* migrate Icon to styled-components

* add exports

* fix Icon stories to use the type instead of a string

* remove unnecessary expectation

* use appropriate assertion method

Co-authored-by: Pau Teruel <[email protected]>

* use appropriate assertion method

Co-authored-by: Pau Teruel <[email protected]>

Co-authored-by: Pau Teruel <[email protected]>

* Styled Typography (#153)

* feat: create typography

* feat: move props top level

Co-authored-by: Takeichi Kanzaki Cabrera <[email protected]>

* Styled Link (#154)

* migrate Link to styled-components

* remove empty class

* use color from theme

* use appropriate assertion method

* migrate Video to styled-components (#157)

* Styled NumericBadge (#158)

* migrate NumericBadge to styled-components

* add size to storybook playground

* migrate Image to styled-components (#156)

* Styled IconicBadge (#160)

* move Color to Badges folder
- this type is shared by all badges

* migrate IconicBadge to styled-components

* Styled AvatarText (#155)

* feat: create AvatarText

* feat: remove default case

* feat: add avatar text to common export

* feat: order alphabetically

Co-authored-by: Takeichi Kanzaki Cabrera <[email protected]>

* Styled Pill (#159)

* feat: create pill

* feat: add to cmmon export

* feat: reorder exports alphabetically

Co-authored-by: Takeichi Kanzaki Cabrera <[email protected]>

* migrate Asset to styled-components (#161)

* feat: create list (#164)

* allow CSS overriding (#166)

* Styled StepIndicator (#162)

* feat: create stepindicator

* feat: update stepindicator to stepper

* feat: apply feedback

* Styled Spinner (#163)

* feat: create spinner

* feat: apply feedback

* migrate ConversationSummary to styled-components (#168)

* Styled List Items (#165)

* feat: create ButtonItem

* feat: create LinkItem

* feat: apply feedback

* fix: build due to target

* feat: create conversation list (#171)

* feat: create box container (#172)

* Styled Modal (#173)

* remove react-modal dependency

* move Shapes to a shared file

* add Modal theme config

* migrate Modal to styled-components

* Styled Dropdown (#167)

* feat: drpdown

* feat: dropdown

* feat: apply changes

* feat: add story

* feat: apply feedback

* Styled Modal Improvements (#176)

* rename prop to showCloseButton

* add missing stories

* Styled Tooltip (#169)

* feat: create tooltip

* feat: apply feedback

* feat: update storybook to latest version

* feat: revert changes

* Styled Snackbar (#170)

* feat: create snackbar

* test: add test for snackbar

* feat: apply feedback

* feat:  move props type t types file

* feat: update sb

* Styled Grid (#177)

* migrate Grid to styled-components

* use appropriate assertion method

* Styled SectionChild (#179)

* migrate SectionChild to styled-components

* define BaseProps type with the common properties of all components

* define base props types with the common props for styled components

* use common types and test className

* use common types and test className in Grid

* Styled Section (#178)

* feat: create section

* feat: add custom css to section and box

* feat: use new types

* Styled ErrorField (#180)

* feat: errorfield

* feat: apply new types

* feat: add css custom props

* Styled radio button (#181)

* feat: errorfield

* feat: apply new types

* feat: create radio button

* feat: add custom css

* Styled use types (#182)

* use common types and test className in Asset

* use common types and test className in AvatarText

* use common types and test className in IconBadge

* use common types and test className in NumericBadge

* use common types and test className in Button

* use common types and test className in ConversationList

* use common types and test className in ConversationSummary

* use common types and test className in Dropdown

* use common types and test className in Icon

* use common types and test className in Image

* use common types and test className in Link

* use common types and test className in ButtonItem
- fix types file name

* use common types and test className in LinkItem

* use common types and test className in List

* use common types and test className in Modal
- add support for class name

* use common types and test className in Pill

* use common types and test className in Snackbar

* use common types and test className in Spinner

* use common types and test className in Stepper

* use common types and test className in Tooltip

* use common types and test className in Typography

* use common types and test className in Video

* Styled TextArea (#184)

* feat: create textarea

* feat: add global export

* feat: add key to items

* chore: remove unused import

* Wrap customCss call (#187)

* extract customCss call to a function

* added withCustomCSS HOC

* add appropriate types for RadioButton StyledInput

* migrate TextArea to withCustomCss HOC

* Styled TextField (#185)

* feat: create textfield

* define type TextField Type
- support forwardRef and custom attributes for Shapes and Modes

* feat: update textfield to use hoc

* feat: add proper types to styled

Co-authored-by: Takeichi Kanzaki Cabrera <[email protected]>

* Image customCss Implementation (#186)

* adding customcss implementation

* aplying suggested changes

* Remove unnecessary type, adding custome style for storybook

* Implement withCustomCss

* Use typescript config in tests and stories too (#191)

* enable typescript configuration in tests and stories
- this will fix the issue we have right now with the IDE not auto completing the code in the tests and stories files and not detecting missing required properties

* fix types errors in tests and stories

* Styled ExpandableTextfieldIcon (#189)

* feat: create expandable

* feat: create expandabletextfield icon

* feat: update customCss to expandabletextfield

* feat: add onChange prop to stories

* feat: update customCss

* feat: add required props to stories

* remove HOC and custom class

Co-authored-by: Takeichi Kanzaki Cabrera <[email protected]>

* Styled SearchField (#192)

* feat: create SearchField

* feat: remove hoc

* feat: add missing type

* Styled TextFieldButton (#193)

* feat: create TextFieldButton

* feat: add customcss

* test: add test for custom css

* feat: add missing import

* Styled CurrencyField (#190)

* currencyField component, style, storybook

* implement withCustomCss

* Adding stories

* adding unit test

* apply format

* adding CurrencyField component to index file

* change fragment for div on currency story, remove unnecessary cn.

* update styles with customCss

* refactor currencyField test

* Styled TextFieldWithLabel (#194)

* feat: create TextFieldWithLabel

* feat: add customCss to typography

* test: add coverage

* Styled TextFieldIcon (#195)

* feat: create textfieldicon

* feat: add box sizing

* test: add test for custom css

* Styled TextFieldIconButton (#196)

* feat: reuse IconPositions enum

* feat: create textfieldiconbutton

* feat: apply feedback

* Styled chat message (#183)

* adding styled-components styles

* moving code to styled-component folder

* adding types, use theme for colors

* adding MediaLoader styles

* migrate Progress Circular component to styled-components

* merge Circular component

* adding Circular component to index primitive folder file

* change styled file to suggested changes.

* adding Spiner component

* Remove unecessary Circular component

* removing unnecessary variabled

* using media query breakpoints from theme

* adjust text padding to dsm

* format with prettier

* revert tailwind message file format

* adding typescript Props

* adding Message component to the index file

* aplying suggested changes

* implement customCss

* adding customcss implementation

* aplying suggested changes

* implement Image customCss, fix merge issues

* change prop color to backgroundColor

* change key color to backgroundColor

* adding customCss

* implement customCss

* update story and test

* apply suggested changes

* feat: improve styling for image

Co-authored-by: Pau Teruel <[email protected]>

* Styled Conversation MessageError (#198)

* adding styled-components styles

* moving code to styled-component folder

* adding types, use theme for colors

* adding MediaLoader styles

* migrate Progress Circular component to styled-components

* merge Circular component

* adding Circular component to index primitive folder file

* change styled file to suggested changes.

* adding Spiner component

* Remove unecessary Circular component

* removing unnecessary variabled

* using media query breakpoints from theme

* adjust text padding to dsm

* format with prettier

* revert tailwind message file format

* adding typescript Props

* adding Message component to the index file

* chat MessageError styled-components

* unit test, storybook, implement customCss

* format with prettier, adding MessageError to index file

* adding customCss test

* Styled DropdownNativeSelect (#197)

* feat: create dropdownnativeselect

* feat: create dropdownfield

* feat: apply feedback

* Styled DropdownFieldMulti (#200)

* feat: create dropdownnativeselect

* feat: create dropdownfield

* feat: dropdownmulti

* feat: apply feedback

* feat: create dropdownfield multi

* feat: apply feedback

* add children to CurrencyField (#202)

* Replace components with styled-components (#204)

* replace components with styled-components

* generate changeset

* remove unused dependencies

Co-authored-by: Pau Teruel <[email protected]>
Co-authored-by: Dawin Valenzuela <[email protected]>

.changeset/lemon-taxis-appear.md

@@ -0,0 +1,11 @@
+---
+"@cmpsr/components": minor
+"@cmpsr/analytics": patch
+"@cmpsr/cloud-kms": patch
+"@cmpsr/cloud-logger": patch
+"@cmpsr/cloud-storage": patch
+"@cmpsr/firestore": patch
+"@cmpsr/twilio": patch
+---
+
+migrate components package from tailwind to styled-components

packages/analytics/lib/index.js

@@ -8,6 +8,7 @@ var _AnalyticsContext = require("./AnalyticsContext");
 
 Object.keys(_AnalyticsContext).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AnalyticsContext[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
@@ -20,6 +21,7 @@ var _AnalyticsProvider = require("./AnalyticsProvider");
 
 Object.keys(_AnalyticsProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AnalyticsProvider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
@@ -32,6 +34,7 @@ var _useAnalytics = require("./useAnalytics");
 
 Object.keys(_useAnalytics).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useAnalytics[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
@@ -44,6 +47,7 @@ var _types = require("./types");
 
 Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
@@ -56,6 +60,7 @@ var _types2 = require("./integrations/types");
 
 Object.keys(_types2).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types2[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {

packages/analytics/lib/integrations/ga/index.js

@@ -8,6 +8,7 @@ var _types = require("./types");
 
 Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
@@ -20,6 +21,7 @@ var _GA = require("./GA");
 
 Object.keys(_GA).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GA[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {

packages/analytics/lib/integrations/index.js

@@ -8,6 +8,7 @@ var _types = require("./types");
 
 Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
@@ -20,6 +21,7 @@ var _ga = require("./ga");
 
 Object.keys(_ga).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ga[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
@@ -32,6 +34,7 @@ var _segment = require("./segment");
 
 Object.keys(_segment).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _segment[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {

packages/analytics/lib/integrations/segment/index.js

@@ -8,6 +8,7 @@ var _types = require("./types");
 
 Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
@@ -20,6 +21,7 @@ var _Segment = require("./Segment");
 
 Object.keys(_Segment).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Segment[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {

packages/cloud-kms/lib/index.js

@@ -11,6 +11,7 @@ var _Kms = require("./Kms");
 Object.keys(_Kms).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Kms[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
@@ -24,6 +25,7 @@ var _types = require("./types");
 Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {

packages/cloud-logger/lib/index.js

@@ -21,6 +21,7 @@ var _types = require("./integration/types");
 Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {

packages/cloud-storage/lib/index.js

@@ -11,6 +11,7 @@ var _GoogleCloudStorage = require("./GoogleCloudStorage");
 Object.keys(_GoogleCloudStorage).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GoogleCloudStorage[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {

packages/components/.babelrc

@@ -6,7 +6,9 @@
       {
         "alias": {
           "components": "./src/components",
-          "utils": "./src/utils"
+          "utils": "./src/utils",
+          "tests": "./config/jest",
+          "styles": "./src/styles"
         }
       }
     ]

packages/components/.gitignore

@@ -4,5 +4,8 @@ node_modules
 # Local env files
 .env
 
+# build folder
+lib
+
 storybook-static
 yarn-error.log*

packages/components/.storybook/preview.js

@@ -1,9 +1,12 @@
+import React from 'react';
 import { addParameters, addDecorator } from '@storybook/react';
 import { withA11y } from '@storybook/addon-a11y';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
 import { withPerformance } from 'storybook-addon-performance';
 import { withKnobs } from '@storybook/addon-knobs';
+import { ThemeProvider } from 'styled-components';
+import theme from 'styles/theme';
 
 import '../src/styles/index.css';
 
@@ -19,3 +22,5 @@ addParameters({
 });
 
 addDecorator(withPerformance);
+
+addDecorator((story) => <ThemeProvider theme={theme}>{story()}</ThemeProvider>);

packages/components/.storybook/webpack.config.js

@@ -20,20 +20,6 @@ module.exports = ({ config }) => {
     ],
   });
 
-  config.module.rules.push({
-    test: /\.css$/,
-    use: [
-      {
-        loader: 'postcss-loader',
-        options: {
-          config: {
-            path: path.resolve(__dirname, './'),
-          },
-        },
-      },
-    ],
-  });
-
   config.resolve.extensions.push('.ts', '.tsx');
   return config;
 };

packages/components/config/jest/setupTests.ts

@@ -1,2 +1,3 @@
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+import 'jest-styled-components';