@luscii-healthtech/web-ui 0.3.0 → 0.4.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.0",
+  "version": "0.4.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -12,7 +12,7 @@
   },
   "scripts": {
     "start": "tsdx watch",
-    "build": "tsdx build",
+    "build": "tsdx build && yarn build-tailwind",
     "test": "tsdx test --passWithNoTests",
     "lint": "eslint src --ext .jsx --ext .js --ext .ts --ext .tsx --cache",
     "lint:fix": "eslint src --ext .jsx --ext .js --ext .ts --ext .tsx --fix",
@@ -20,7 +20,8 @@
     "analyze": "size-limit --why",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "chromatic": "chromatic --exit-zero-on-changes"
+    "chromatic": "chromatic --exit-zero-on-changes",
+    "build-tailwind": "NODE_ENV=production yarn run tailwindcss build -o ./dist/web-ui-tailwind.css --minify"
   },
   "peerDependencies": {
     "react": ">=16"
@@ -68,7 +69,7 @@
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "@typescript-eslint/parser": "^5.29.0",
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^9.0.0",
     "babel-loader": "^8.2.5",
     "chromatic": "^6.6.3",
     "css-loader": "^0.28.11",
@@ -80,6 +81,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-scss": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "sass-loader": "^6.0.7",
@@ -115,5 +117,11 @@
     "react-modal": "^3.15.1",
     "react-quill": "^1.3.5",
     "react-select": "^5.3.2"
-  }
+  },
+  "browserslist": [
+    "last 1 chrome version",
+    "last 1 firefox version",
+    "last 1 edge version",
+    "ie 11"
+  ]
 }

package/src/components/{ListItem/ListItem.tsx → Section/SectionItem.tsx}

@@ -1,15 +1,15 @@
-import React from "react";
+import React, { SyntheticEvent } from "react";
 import classNames from "classnames";
 
-import "./ListItem.scss";
+import "./SectionItem.scss";
 
-export interface ListItemProps {
+export interface SectionItemProps {
   className?: string;
-  onClick?: any; // func
-  children?: any;
+  onClick?: (event: SyntheticEvent) => void; // func
+  children?: React.ReactNode;
 }
 
-export const ListItem: React.FC<ListItemProps> = (props) => {
+export const SectionItem: React.FC<SectionItemProps> = props => {
   const { children, className, onClick, ...rest } = props;
 
   const classes = classNames("cweb-list-item", className, {
@@ -23,4 +23,4 @@ export const ListItem: React.FC<ListItemProps> = (props) => {
   );
 };
 
-export default ListItem;
+export default SectionItem;

package/src/components/{TextListItem/TextListItem.js → Section/SectionItemWithContent.js}

@@ -3,24 +3,25 @@ import PropTypes from "prop-types";
 import classNames from "classnames";
 
 import LegacyText from "../Text/LegacyText";
-import "./TextListItem.scss";
-import ListItem from "../ListItem/ListItem";
 
-function TextListItem(props) {
+import "./SectionItemWithContent.scss";
+import SectionItem from "./SectionItem";
+
+function SectionItemWithContent(props) {
   const { text, icon, className, iconClass, onClick, ...rest } = props;
 
-  const mergedClasses = classNames("cweb-text-list-item", className);
-  const iconClasses = classNames("cweb-text-list-item-icon", iconClass);
+  const mergedClasses = classNames("cweb-section-text-item", className);
+  const iconClasses = classNames("cweb-section-text-item-icon", iconClass);
 
   return (
-    <ListItem className={mergedClasses} onClick={onClick} {...rest}>
+    <SectionItem className={mergedClasses} onClick={onClick} {...rest}>
       {icon && <img className={iconClasses} src={icon} alt="" />}
       <LegacyText text={text} />
-    </ListItem>
+    </SectionItem>
   );
 }
 
-TextListItem.propTypes = {
+SectionItemWithContent.propTypes = {
   text: PropTypes.string.isRequired,
   icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   className: PropTypes.string,
@@ -28,4 +29,4 @@ TextListItem.propTypes = {
   onClick: PropTypes.func,
 };
 
-export default TextListItem;
+export default SectionItemWithContent;

package/src/components/{TextListItem/TextListItem.scss → Section/SectionItemWithContent.scss}

@@ -1,8 +1,8 @@
 @import "../../styles/colors";
 @import "../../styles/layout";
 
-.cweb-text-list-item {
-  .cweb-text-list-item-icon {
+.cweb-section-text-item {
+  .cweb-section-text-item-icon {
     width: 24px;
     height: 24px;
     margin-right: 16px;

package/src/components/Tag/Tag.tsx

@@ -3,7 +3,7 @@ import classNames from "classnames";
 
 import { Text, TextColor } from "../Text/Text";
 
-import { TagSize } from "./TagGroup";
+import { TagSize } from "./Tag.utils";
 
 export enum TagColorTheme {
   Red = "red",

package/src/components/Tag/Tag.utils.ts

@@ -0,0 +1,4 @@
+export enum TagSize {
+  "small" = "small",
+  "base" = "base",
+}

package/src/components/Tag/TagGroup.tsx

@@ -2,11 +2,7 @@ import React from "react";
 import classNames from "classnames";
 
 import Tag, { TagProps } from "./Tag";
-
-export enum TagSize {
-  "small" = "small",
-  "base" = "base",
-}
+import { TagSize } from "./Tag.utils";
 
 interface TagGroupProps {
   tags: TagProps[];
@@ -14,10 +10,18 @@ interface TagGroupProps {
   className?: string;
 }
 
-const TagGroup = ({ tags, tagSize = TagSize.base, className }: TagGroupProps): JSX.Element => (
+const TagGroup = ({
+  tags,
+  tagSize = TagSize.base,
+  className,
+}: TagGroupProps): JSX.Element => (
   <div className={classNames("flex flex-row flex-wrap", className)}>
-    {tags.map((tag) => (
-      <Tag size={tagSize} {...tag} className={classNames("mr-2 last:mr-0 mb-2")} />
+    {tags.map(tag => (
+      <Tag
+        size={tagSize}
+        {...tag}
+        className={classNames("mr-2 last:mr-0 mb-2")}
+      />
     ))}
   </div>
 );

package/src/index.tsx

@@ -24,9 +24,9 @@ export { InfoField } from "./components/InfoField/InfoField";
 export { INPUT_TYPES, default as Input } from "./components/Input/Input";
 export { default as Line } from "./components/Line/Line";
 export {
-  default as ListItem,
-  ListItemProps,
-} from "./components/ListItem/ListItem";
+  default as SectionItem,
+  SectionItemProps,
+} from "./components/Section/SectionItem";
 export {
   ListTable,
   ListTableProps,
@@ -75,7 +75,7 @@ export { default as TextArea } from "./components/Textarea/Textarea";
 export { default as TextEditor } from "./components/TextEditor/TextEditor";
 export { default as TextEditorV2 } from "./components/TextEditorV2/TextEditorV2";
 export { TextLink, TextLinkProps } from "./components/TextLink/TextLink";
-export { default as TextListItem } from "./components/TextListItem/TextListItem";
+export { default as SectionItemWithContent } from "./components/Section/SectionItemWithContent";
 export { Title, TitleStyle } from "./components/Title/Title";
 export { ViewItem, ViewItemProps } from "./components/ViewItem/ViewItem";
 

package/dist/components/ListItem/ListItem.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-import "./ListItem.scss";
-export interface ListItemProps {
-    className?: string;
-    onClick?: any;
-    children?: any;
-}
-export declare const ListItem: React.FC<ListItemProps>;
-export default ListItem;