diff --git a/.changeset/README.md b/.changeset/README.md
deleted file mode 100644
index e5b6d8d6a..000000000
--- a/.changeset/README.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# Changesets
-
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
-
-We have a quick list of common questions to get you started engaging with this project in
-[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
diff --git a/.changeset/config.json b/.changeset/config.json
deleted file mode 100644
index ccf2e4cbc..000000000
--- a/.changeset/config.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
- "$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json",
- "changelog": "@changesets/cli/changelog",
- "commit": false,
- "fixed": [],
- "linked": [],
- "access": "public",
- "baseBranch": "master",
- "updateInternalDependencies": "patch",
- "ignore": ["@layer5/design-system"]
-}
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index 05d84757c..a89d3958b 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -1,15 +1,18 @@
-name: Release
+name: Publish NPM Package
on:
- push:
- branches:
- - master
+ release:
+ types: [published]
+ workflow_dispatch:
+ inputs:
+ release-type:
+ required: true
concurrency: ${{ github.workflow }}-${{ github.ref }}
jobs:
- release:
- name: Release
+ build:
+ name: Build
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
@@ -20,20 +23,30 @@ jobs:
with:
node-version: 18
- - name: Install Dependencies
- run: yarn
+ - name: Install deps and build
+ run: |
+ yarn
+ yarn build-all
+
+ publish-gpr:
+ needs: build
+ runs-on: ubuntu-latest
+ permissions:
+ contents: read
+ packages: write
+ steps:
+ - name: Checkout Repo
+ uses: actions/checkout@v3
- - name: Create Release Pull Request or Publish to npm
- id: changesets
- uses: changesets/action@v1
+ - name: Setup Node.js 18.x
+ uses: actions/setup-node@v3
with:
- # This expects you to have a script called release which does a build for your packages and calls changeset publish
- publish: yarn release
+ node-version: 18
+ registry-url: "https://registry.npmjs.org"
+ scope: "@layer5"
+
+ - name: Publish to npm
+ run: yarn publish --release
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
- #- name: Send a Slack notification if a publish happens
- #if: steps.changesets.outputs.published == 'true'
- # You can do something when a publish happens.
- #run: my-slack-bot send-notification --message "A new version of ${GITHUB_REPOSITORY} was published!"
+ NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
\ No newline at end of file
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 000000000..fffd42f0f
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn format:check && yarn lint-staged
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..215b371a7
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,4 @@
+# Ignore artifacts:
+dist
+coverage
+
diff --git a/.prettierrc b/.prettierrc
index fe3db1483..203afc140 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,8 +1,8 @@
{
- "semi": true,
- "tabWidth": 2,
- "printWidth": 100,
- "singleQuote": true,
- "trailingComma": "none",
- "jsxBracketSameLine": true
+ "semi": true,
+ "tabWidth": 2,
+ "printWidth": 100,
+ "singleQuote": true,
+ "trailingComma": "none",
+ "plugins": ["prettier-plugin-organize-imports"]
}
diff --git a/Makefile b/Makefile
index e62496978..fbe4868d5 100644
--- a/Makefile
+++ b/Makefile
@@ -1,24 +1,11 @@
-check:
- golangci-lint run
+setup:
+ yarn install
-check-clean-cache:
- golangci-lint cache clean
+build: install
+ yarn run build-all
-protoc-setup:
- wget -P meshes https://raw.githubusercontent.com/layer5io/meshery/master/meshes/meshops.proto
+format-check:
+ yarn run format:check
-proto:
- protoc -I meshes/ meshes/meshops.proto --go_out=plugins=grpc:./meshes/
-
-
-
-
-
-site:
- $(jekyll) serve --drafts --livereload
-
-build:
- $(jekyll) build --drafts
-
-docker:
- docker run --name site -d --rm -p 4000:4000 -v `pwd`:"/srv/jekyll" jekyll/jekyll:4.0.0 bash -c "bundle install; jekyll serve --drafts --livereload"
+format-fix:
+ yarn run format:write
diff --git a/README.md b/README.md
index 7cd3bc0d0..6fe0097a2 100644
--- a/README.md
+++ b/README.md
@@ -5,13 +5,21 @@ The Sistent Design System from Layer5 provides the open source building blocks t
### Packages
- Design System components in React.js
-- npm package: `@layer5/sistent-components`
+- npm package:
+
+`@layer5/sistent-components`
+`@layer5/sistent-svg`
### Brand
- Layer5 Brand Guide ([PDF](https://layer5.io/brand/brand-guide.pdf))
- [Layer5 Logos](https://layer5.io/company/brand) (more assets available in shared Community drive).
+### How to get started
+
+1. Install `yarn@1.22.19`
+2. Use `yarn` to install dependencies
+
## Join the Layer5 community!
diff --git a/package.json b/package.json
index 942271efc..49d8e375a 100644
--- a/package.json
+++ b/package.json
@@ -8,17 +8,25 @@
"packages/*"
],
"packageManager": "yarn@1.22.1",
- "dependencies": {
- "@changesets/cli": "^2.26.2"
- },
"devDependencies": {
- "prettier": "^3.0.2"
+ "eslint": "^8.48.0",
+ "husky": "^8.0.3",
+ "lint-staged": "^14.0.1",
+ "prettier": "^3.0.2",
+ "prettier-plugin-organize-imports": "^3.2.3"
},
"scripts": {
"build-all": "yarn workspaces run build",
- "format": "prettier --write \"**/*.{ts,tsx,md}\" --config ./.prettierrc",
- "changeset": "changeset",
- "version-packages": "changeset version",
- "release": "yarn run build-all && changeset publish"
+ "format:check": "prettier --check \"**/*.{ts,tsx,md}\" --config ./.prettierrc",
+ "format:write": "prettier --write \"**/*.{ts,tsx,md}\" --config ./.prettierrc",
+ "postinstall": "husky install",
+ "prepack": "pinst --disable",
+ "postpack": "pinst --enable"
+ },
+ "lint-staged": {
+ "*.{ts,tsx,md}": [
+ "eslint --fix",
+ "yarn format:write"
+ ]
}
}
diff --git a/packages/components/.prettierrc b/packages/components/.prettierrc
index fe3db1483..f829f0a09 100644
--- a/packages/components/.prettierrc
+++ b/packages/components/.prettierrc
@@ -1,8 +1,8 @@
{
- "semi": true,
- "tabWidth": 2,
- "printWidth": 100,
- "singleQuote": true,
- "trailingComma": "none",
- "jsxBracketSameLine": true
+ "semi": true,
+ "tabWidth": 2,
+ "printWidth": 100,
+ "singleQuote": true,
+ "trailingComma": "none",
+ "jsxBracketSameLine": true
}
diff --git a/packages/components/src/accordion.tsx b/packages/components/src/accordion.tsx
index e8c67f8fd..998caf59b 100644
--- a/packages/components/src/accordion.tsx
+++ b/packages/components/src/accordion.tsx
@@ -1,5 +1,5 @@
+import { AccordionProps, Accordion as MuiAccordion } from '@mui/material';
import React from 'react';
-import { Accordion as MuiAccordion, AccordionProps } from '@mui/material';
export function Accordion(props: AccordionProps) {
return ;
diff --git a/packages/components/src/accordionactions.tsx b/packages/components/src/accordionactions.tsx
index 30d2cd4e3..0489a8c99 100644
--- a/packages/components/src/accordionactions.tsx
+++ b/packages/components/src/accordionactions.tsx
@@ -1,5 +1,5 @@
+import { AccordionActionsProps, AccordionActions as MuiAccordionActions } from '@mui/material';
import React from 'react';
-import { AccordionActions as MuiAccordionActions, AccordionActionsProps } from '@mui/material';
export function AccordionActions(props: AccordionActionsProps) {
return ;
diff --git a/packages/components/src/accordiondetails.tsx b/packages/components/src/accordiondetails.tsx
index 95f0b800a..b67710ced 100644
--- a/packages/components/src/accordiondetails.tsx
+++ b/packages/components/src/accordiondetails.tsx
@@ -1,5 +1,5 @@
+import { AccordionDetailsProps, AccordionDetails as MuiAccordionDetails } from '@mui/material';
import React from 'react';
-import { AccordionDetails as MuiAccordionDetails, AccordionDetailsProps } from '@mui/material';
export function AccordionDetails(props: AccordionDetailsProps) {
return ;
diff --git a/packages/components/src/accordionsummary.tsx b/packages/components/src/accordionsummary.tsx
index 979f035d8..17bb344a9 100644
--- a/packages/components/src/accordionsummary.tsx
+++ b/packages/components/src/accordionsummary.tsx
@@ -1,5 +1,5 @@
+import { AccordionSummaryProps, AccordionSummary as MuiAccordionSummary } from '@mui/material';
import React from 'react';
-import { AccordionSummary as MuiAccordionSummary, AccordionSummaryProps } from '@mui/material';
export function AccordionSummary(props: AccordionSummaryProps) {
return ;
diff --git a/packages/components/src/appbar.tsx b/packages/components/src/appbar.tsx
index fa7296df1..d06dff4cb 100644
--- a/packages/components/src/appbar.tsx
+++ b/packages/components/src/appbar.tsx
@@ -1,5 +1,5 @@
+import { AppBarProps, AppBar as MuiAppBar } from '@mui/material';
import React from 'react';
-import { AppBar as MuiAppBar, AppBarProps } from '@mui/material';
export function AppBar(props: AppBarProps) {
return ;
diff --git a/packages/components/src/avatar.tsx b/packages/components/src/avatar.tsx
index 9327c13fb..c4b98bb72 100644
--- a/packages/components/src/avatar.tsx
+++ b/packages/components/src/avatar.tsx
@@ -1,5 +1,5 @@
+import { AvatarProps, Avatar as MuiAvatar } from '@mui/material';
import React from 'react';
-import { Avatar as MuiAvatar, AvatarProps } from '@mui/material';
export function Avatar(props: AvatarProps) {
return ;
diff --git a/packages/components/src/avatargroup.tsx b/packages/components/src/avatargroup.tsx
index 5d9617351..eb4a0c2aa 100644
--- a/packages/components/src/avatargroup.tsx
+++ b/packages/components/src/avatargroup.tsx
@@ -1,5 +1,5 @@
+import { AvatarGroupProps, AvatarGroup as MuiAvatarGroup } from '@mui/material';
import React from 'react';
-import { AvatarGroup as MuiAvatarGroup, AvatarGroupProps } from '@mui/material';
export function AvatarGroup(props: AvatarGroupProps) {
return ;
diff --git a/packages/components/src/backdrop.tsx b/packages/components/src/backdrop.tsx
index 1dd748f1c..8a1f75f6e 100644
--- a/packages/components/src/backdrop.tsx
+++ b/packages/components/src/backdrop.tsx
@@ -1,5 +1,5 @@
+import { BackdropProps, Backdrop as MuiBackdrop } from '@mui/material';
import React from 'react';
-import { Backdrop as MuiBackdrop, BackdropProps } from '@mui/material';
export function Backdrop(props: BackdropProps) {
return ;
diff --git a/packages/components/src/badge.tsx b/packages/components/src/badge.tsx
index 7b21ef5ef..4c83f5364 100644
--- a/packages/components/src/badge.tsx
+++ b/packages/components/src/badge.tsx
@@ -1,5 +1,5 @@
+import { BadgeProps, Badge as MuiBadge } from '@mui/material';
import React from 'react';
-import { Badge as MuiBadge, BadgeProps } from '@mui/material';
export function Badge(props: BadgeProps) {
return ;
diff --git a/packages/components/src/box.tsx b/packages/components/src/box.tsx
index 016ea80f3..3645c121e 100644
--- a/packages/components/src/box.tsx
+++ b/packages/components/src/box.tsx
@@ -1,5 +1,5 @@
+import { BoxProps, Box as MuiBox } from '@mui/material';
import React from 'react';
-import { Box as MuiBox, BoxProps } from '@mui/material';
export function Box(props: BoxProps) {
return ;
diff --git a/packages/components/src/button.tsx b/packages/components/src/button.tsx
index 3f60e5c6a..b33799890 100644
--- a/packages/components/src/button.tsx
+++ b/packages/components/src/button.tsx
@@ -1,5 +1,5 @@
+import { ButtonProps, Button as MuiButton } from '@mui/material';
import * as React from 'react';
-import { Button as MuiButton, ButtonProps } from '@mui/material';
export const BaseButton = (props: ButtonProps) => {
return ;
diff --git a/packages/components/src/buttongroup.tsx b/packages/components/src/buttongroup.tsx
index e931175b5..4fd16bff6 100644
--- a/packages/components/src/buttongroup.tsx
+++ b/packages/components/src/buttongroup.tsx
@@ -1,5 +1,5 @@
+import { ButtonGroupProps, ButtonGroup as MuiButtonGroup } from '@mui/material';
import React from 'react';
-import { ButtonGroup as MuiButtonGroup, ButtonGroupProps } from '@mui/material';
export const ButtonGroup = (props: ButtonGroupProps) => {
return ;
diff --git a/packages/components/src/card.tsx b/packages/components/src/card.tsx
index 2ae6f2695..ccfc7cda7 100644
--- a/packages/components/src/card.tsx
+++ b/packages/components/src/card.tsx
@@ -1,5 +1,5 @@
+import { CardProps, Card as MuiCard } from '@mui/material';
import React from 'react';
-import { Card as MuiCard, CardProps } from '@mui/material';
export const Card = (props: CardProps) => {
return ;
diff --git a/packages/components/src/checkbox.tsx b/packages/components/src/checkbox.tsx
index b59e706b1..7dacb3385 100644
--- a/packages/components/src/checkbox.tsx
+++ b/packages/components/src/checkbox.tsx
@@ -1,5 +1,5 @@
+import { CheckboxProps, Checkbox as MuiCheckbox } from '@mui/material';
import React from 'react';
-import { Checkbox as MuiCheckbox, CheckboxProps } from '@mui/material';
export function Checkbox(props: CheckboxProps) {
return ;
diff --git a/packages/components/src/chip.tsx b/packages/components/src/chip.tsx
index fc1223f17..7173d3fb1 100644
--- a/packages/components/src/chip.tsx
+++ b/packages/components/src/chip.tsx
@@ -1,5 +1,5 @@
+import { ChipProps, Chip as MuiChip } from '@mui/material';
import React from 'react';
-import { Chip as MuiChip, ChipProps } from '@mui/material';
export function Chip(props: ChipProps) {
return ;
diff --git a/packages/components/src/dialog.tsx b/packages/components/src/dialog.tsx
index 3a3c0bfd9..6be06494d 100644
--- a/packages/components/src/dialog.tsx
+++ b/packages/components/src/dialog.tsx
@@ -1,5 +1,5 @@
+import { DialogProps, Dialog as MuiDialog } from '@mui/material';
import React from 'react';
-import { Dialog as MuiDialog, DialogProps } from '@mui/material';
export function Dialog(props: DialogProps) {
return ;
diff --git a/packages/components/src/dialogactions.tsx b/packages/components/src/dialogactions.tsx
index 7ce5b812c..6ca7f5296 100644
--- a/packages/components/src/dialogactions.tsx
+++ b/packages/components/src/dialogactions.tsx
@@ -1,5 +1,5 @@
+import { DialogActionsProps, DialogActions as MuiDialogActions } from '@mui/material';
import React from 'react';
-import { DialogActions as MuiDialogActions, DialogActionsProps } from '@mui/material';
export function DialogActions(props: DialogActionsProps) {
return ;
diff --git a/packages/components/src/dialogcontent.tsx b/packages/components/src/dialogcontent.tsx
index d2e96e1d3..dcca8007f 100644
--- a/packages/components/src/dialogcontent.tsx
+++ b/packages/components/src/dialogcontent.tsx
@@ -1,5 +1,5 @@
+import { DialogContentProps, DialogContent as MuiDialogContent } from '@mui/material';
import React from 'react';
-import { DialogContent as MuiDialogContent, DialogContentProps } from '@mui/material';
export function DialogContent(props: DialogContentProps) {
return ;
diff --git a/packages/components/src/dialogcontenttext.tsx b/packages/components/src/dialogcontenttext.tsx
index bdbaaaa0d..a0b5b7bc7 100644
--- a/packages/components/src/dialogcontenttext.tsx
+++ b/packages/components/src/dialogcontenttext.tsx
@@ -1,5 +1,5 @@
+import { DialogContentTextProps, DialogContentText as MuiDialogContentText } from '@mui/material';
import React from 'react';
-import { DialogContentText as MuiDialogContentText, DialogContentTextProps } from '@mui/material';
export function DialogContentText(props: DialogContentTextProps) {
return ;
diff --git a/packages/components/src/dialogtitle.tsx b/packages/components/src/dialogtitle.tsx
index af4036dee..c8ad656f8 100644
--- a/packages/components/src/dialogtitle.tsx
+++ b/packages/components/src/dialogtitle.tsx
@@ -1,5 +1,5 @@
+import { DialogTitleProps, DialogTitle as MuiDialogTitle } from '@mui/material';
import React from 'react';
-import { DialogTitle as MuiDialogTitle, DialogTitleProps } from '@mui/material';
export function DialogTitle(props: DialogTitleProps) {
return ;
diff --git a/packages/components/src/divider.tsx b/packages/components/src/divider.tsx
index 8d947a8f9..e1efb0235 100644
--- a/packages/components/src/divider.tsx
+++ b/packages/components/src/divider.tsx
@@ -1,5 +1,5 @@
+import { DividerProps, Divider as MuiDivider } from '@mui/material';
import React from 'react';
-import { Divider as MuiDivider, DividerProps } from '@mui/material';
export function Divider(props: DividerProps) {
return ;
diff --git a/packages/components/src/drawer.tsx b/packages/components/src/drawer.tsx
index 92da834d1..c90312f3a 100644
--- a/packages/components/src/drawer.tsx
+++ b/packages/components/src/drawer.tsx
@@ -1,5 +1,5 @@
+import { DrawerProps, Drawer as MuiDrawer } from '@mui/material';
import React from 'react';
-import { Drawer as MuiDrawer, DrawerProps } from '@mui/material';
export function Drawer(props: DrawerProps) {
return ;
diff --git a/packages/components/src/iconbutton.tsx b/packages/components/src/iconbutton.tsx
index 72f0b9a9a..5346002bd 100644
--- a/packages/components/src/iconbutton.tsx
+++ b/packages/components/src/iconbutton.tsx
@@ -1,4 +1,4 @@
-import { IconButton as MuiIconButton, IconButtonProps } from '@mui/material';
+import { IconButtonProps, IconButton as MuiIconButton } from '@mui/material';
import React from 'react';
export function IconButton(props: IconButtonProps) {
diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
index aeacd8082..18378f760 100644
--- a/packages/components/src/index.tsx
+++ b/packages/components/src/index.tsx
@@ -1,7 +1,9 @@
export { AppBar } from './appbar';
export { Avatar } from './avatar';
-export { BaseButton } from './button';
export { Box } from './box';
+export { BaseButton } from './button';
+export { ButtonGroup } from './buttongroup';
+export { Card } from './card';
export { Chip } from './chip';
export { Dialog } from './dialog';
export { DialogActions } from './dialogactions';
@@ -10,21 +12,19 @@ export { DialogContentText } from './dialogcontenttext';
export { DialogTitle } from './dialogtitle';
export { Divider } from './divider';
export { IconButton } from './iconbutton';
+export { List } from './list';
+export { Menu } from './menu';
export { Paper } from './paper';
+export { Select } from './select';
export { Stack } from './stack';
+export { Switch } from './switch';
export { Tab } from './tab';
+export { Table } from './table';
export { Tabs } from './tabs';
+export { TextField } from './textfield';
export { Toolbar } from './toolbar';
export { Tooltip } from './tooltip';
export { Typography } from './typography';
-export { Card } from './card';
-export { Menu } from './menu';
-export { Table } from './table';
-export { List } from './list';
-export { TextField } from './textfield';
-export { Switch } from './switch';
-export { Select } from './select';
-export { ButtonGroup } from './buttongroup';
export { Accordion } from './accordion';
export { AccordionActions } from './accordionactions';
export { AccordionDetails } from './accordiondetails';
diff --git a/packages/components/src/list.tsx b/packages/components/src/list.tsx
index f39b97641..7ba3b16e2 100644
--- a/packages/components/src/list.tsx
+++ b/packages/components/src/list.tsx
@@ -1,5 +1,5 @@
+import { ListProps, List as MuiList } from '@mui/material';
import React from 'react';
-import { List as MuiList, ListProps } from '@mui/material';
export const List = (props: ListProps) => {
return ;
diff --git a/packages/components/src/menu.tsx b/packages/components/src/menu.tsx
index 17285c38b..e661fc2ba 100644
--- a/packages/components/src/menu.tsx
+++ b/packages/components/src/menu.tsx
@@ -1,5 +1,5 @@
+import { MenuProps, Menu as MuiMenu } from '@mui/material';
import React from 'react';
-import { Menu as MuiMenu, MenuProps } from '@mui/material';
export const Menu = (props: MenuProps) => {
return ;
diff --git a/packages/components/src/paper.tsx b/packages/components/src/paper.tsx
index ba27cb293..96a0c317a 100644
--- a/packages/components/src/paper.tsx
+++ b/packages/components/src/paper.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
import { Paper as MuiPaper, PaperProps } from '@mui/material';
+import React from 'react';
export function Paper(props: PaperProps) {
return {props.children};
diff --git a/packages/components/src/radiogroup.tsx b/packages/components/src/radiogroup.tsx
index dfef5fd6b..879549f00 100644
--- a/packages/components/src/radiogroup.tsx
+++ b/packages/components/src/radiogroup.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
import { RadioGroup as MuiRadioGroup, RadioGroupProps } from '@mui/material';
+import React from 'react';
export function RadioGroup(props: RadioGroupProps) {
return ;
diff --git a/packages/components/src/select.tsx b/packages/components/src/select.tsx
index cf7501926..534860c95 100644
--- a/packages/components/src/select.tsx
+++ b/packages/components/src/select.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
import { Select as MuiSelect, SelectProps } from '@mui/material';
+import React from 'react';
export const Select = (props: SelectProps) => {
return ;
diff --git a/packages/components/src/slide.tsx b/packages/components/src/slide.tsx
index a45a20b37..dff7c9a5b 100644
--- a/packages/components/src/slide.tsx
+++ b/packages/components/src/slide.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
import { Slide as MuiSlide, SlideProps } from '@mui/material';
+import React from 'react';
export function Slide(props: SlideProps) {
return ;
diff --git a/packages/components/src/switch.tsx b/packages/components/src/switch.tsx
index 3e9483bb4..2387e6f48 100644
--- a/packages/components/src/switch.tsx
+++ b/packages/components/src/switch.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
import { Switch as MuiSwitch, SwitchProps } from '@mui/material';
+import React from 'react';
export const Switch = (props: SwitchProps) => {
return ;
diff --git a/packages/components/src/tab.tsx b/packages/components/src/tab.tsx
index 6a068abef..576dd53d4 100644
--- a/packages/components/src/tab.tsx
+++ b/packages/components/src/tab.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
import { Tab as MuiTab, TabProps } from '@mui/material';
+import React from 'react';
export function Tab(props: TabProps) {
return ;
diff --git a/packages/components/src/table.tsx b/packages/components/src/table.tsx
index 9b3b86768..735983b88 100644
--- a/packages/components/src/table.tsx
+++ b/packages/components/src/table.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
import { Table as MuiTable, TableProps } from '@mui/material';
+import React from 'react';
export const Table = (props: TableProps) => {
return ;
diff --git a/packages/components/src/textfield.tsx b/packages/components/src/textfield.tsx
index 2412893aa..78993570b 100644
--- a/packages/components/src/textfield.tsx
+++ b/packages/components/src/textfield.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
import { TextField as MuiTextField, TextFieldProps } from '@mui/material';
+import React from 'react';
export const TextField = (props: TextFieldProps) => {
return ;
diff --git a/packages/components/src/toolbar.tsx b/packages/components/src/toolbar.tsx
index bf3b3b4ed..5c8fe9f9a 100644
--- a/packages/components/src/toolbar.tsx
+++ b/packages/components/src/toolbar.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
import { Toolbar as MuiToolbar, ToolbarProps } from '@mui/material';
+import React from 'react';
export function Toolbar(props: ToolbarProps) {
return ;
diff --git a/packages/components/src/tooltip.tsx b/packages/components/src/tooltip.tsx
index 6cb8d780f..9e83669b9 100644
--- a/packages/components/src/tooltip.tsx
+++ b/packages/components/src/tooltip.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
import { Tooltip as MuiTooltip, TooltipProps } from '@mui/material';
+import React from 'react';
export function Tooltip(props: TooltipProps) {
return ;
diff --git a/packages/design-system/.eslintrc.cjs b/packages/design-system/.eslintrc.cjs
index 48ea13570..bfef8706d 100644
--- a/packages/design-system/.eslintrc.cjs
+++ b/packages/design-system/.eslintrc.cjs
@@ -1,24 +1,24 @@
module.exports = {
- env: {
- browser: true,
- es2021: true
- },
- extends: ['standard-with-typescript', 'plugin:react/recommended', 'plugin:prettier/recommended'],
- overrides: [
- {
- env: {
- node: true
- },
- files: ['.eslintrc.{js,cjs}'],
- parserOptions: {
- sourceType: 'script'
- }
- }
- ],
- parserOptions: {
- ecmaVersion: 'latest',
- sourceType: 'module'
- },
- plugins: ['react'],
- rules: {}
+ env: {
+ browser: true,
+ es2021: true
+ },
+ extends: ['standard-with-typescript', 'plugin:react/recommended', 'plugin:prettier/recommended'],
+ overrides: [
+ {
+ env: {
+ node: true
+ },
+ files: ['.eslintrc.{js,cjs}'],
+ parserOptions: {
+ sourceType: 'script'
+ }
+ }
+ ],
+ parserOptions: {
+ ecmaVersion: 'latest',
+ sourceType: 'module'
+ },
+ plugins: ['react'],
+ rules: {}
};
diff --git a/packages/design-system/.prettierrc b/packages/design-system/.prettierrc
index fe3db1483..f829f0a09 100644
--- a/packages/design-system/.prettierrc
+++ b/packages/design-system/.prettierrc
@@ -1,8 +1,8 @@
{
- "semi": true,
- "tabWidth": 2,
- "printWidth": 100,
- "singleQuote": true,
- "trailingComma": "none",
- "jsxBracketSameLine": true
+ "semi": true,
+ "tabWidth": 2,
+ "printWidth": 100,
+ "singleQuote": true,
+ "trailingComma": "none",
+ "jsxBracketSameLine": true
}
diff --git a/packages/design-system/.storybook/main.js b/packages/design-system/.storybook/main.js
index 24a6820a8..74957904a 100644
--- a/packages/design-system/.storybook/main.js
+++ b/packages/design-system/.storybook/main.js
@@ -1,18 +1,18 @@
/** @type { import('@storybook/react-vite').StorybookConfig } */
const config = {
- stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
- staticDirs: ["../public"],
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ staticDirs: ['../public'],
addons: [
- "@storybook/addon-links",
- "@storybook/addon-essentials",
- "@storybook/addon-interactions",
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions'
],
framework: {
- name: "@storybook/react-vite",
- options: {},
+ name: '@storybook/react-vite',
+ options: {}
},
docs: {
- autodocs: "tag",
- },
+ autodocs: 'tag'
+ }
};
export default config;
diff --git a/packages/design-system/.storybook/preview.js b/packages/design-system/.storybook/preview.js
index 49cc24420..24c025c35 100644
--- a/packages/design-system/.storybook/preview.js
+++ b/packages/design-system/.storybook/preview.js
@@ -1,18 +1,18 @@
-import { CssBaseline, ThemeProvider } from "@mui/material";
-import { lightTheme, darkTheme } from "../src/stories/themes/app";
-import { withThemeFromJSXProvider } from "@storybook/addon-styling";
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import { lightTheme, darkTheme } from '../src/stories/themes/app';
+import { withThemeFromJSXProvider } from '@storybook/addon-styling';
/** @type { import('@storybook/react').Preview } */
const preview = {
parameters: {
- actions: { argTypesRegex: "^on[A-Z].*" },
+ actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
- date: /Date$/,
- },
- },
- },
+ date: /Date$/
+ }
+ }
+ }
};
export default preview;
@@ -23,8 +23,8 @@ export const decorators = [
light: lightTheme,
dark: darkTheme
},
- defaultTheme: "light",
+ defaultTheme: 'light',
Provider: ThemeProvider,
GlobalStyles: CssBaseline
- }),
+ })
];
diff --git a/packages/design-system/index.html b/packages/design-system/index.html
index 79c470191..0c589eccd 100644
--- a/packages/design-system/index.html
+++ b/packages/design-system/index.html
@@ -1,4 +1,4 @@
-
+
diff --git a/packages/design-system/src/App.jsx b/packages/design-system/src/App.jsx
index 3245dcc1a..b56a31f03 100644
--- a/packages/design-system/src/App.jsx
+++ b/packages/design-system/src/App.jsx
@@ -1,12 +1,12 @@
import { BaseButton } from '@layer5/sistent-components';
function App() {
- return (
-
- Hello
- Welcome To Sistent Design System for Layer5
-
- );
+ return (
+
+ Hello
+ Welcome To Sistent Design System for Layer5
+
+ );
}
export default App;
diff --git a/packages/design-system/src/main.jsx b/packages/design-system/src/main.jsx
index 865f907ae..d76b75874 100644
--- a/packages/design-system/src/main.jsx
+++ b/packages/design-system/src/main.jsx
@@ -1,9 +1,9 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
-ReactDOM.createRoot(document.getElementById("root")).render(
-
-
-
+ReactDOM.createRoot(document.getElementById('root')).render(
+
+
+
);
diff --git a/packages/design-system/src/stories/Tab.stories.jsx b/packages/design-system/src/stories/Tab.stories.jsx
index 2992cdb98..6a05d8372 100644
--- a/packages/design-system/src/stories/Tab.stories.jsx
+++ b/packages/design-system/src/stories/Tab.stories.jsx
@@ -33,7 +33,6 @@ export const Tab = ({ textColor, disabled, ...rest }) => {
const handleChange = (event, newValue) => {
setValue(newValue);
};
-
return (
diff --git a/packages/design-system/src/stories/themes/app.js b/packages/design-system/src/stories/themes/app.js
index dfbc72976..1069dcb63 100644
--- a/packages/design-system/src/stories/themes/app.js
+++ b/packages/design-system/src/stories/themes/app.js
@@ -1,99 +1,100 @@
-import { createTheme } from "@mui/material";
-import { blueGrey } from "@mui/material/colors";
+import { createTheme } from '@mui/material';
+import { blueGrey } from '@mui/material/colors';
const createCustomTheme = (paletteType) => {
- const commonPalette = {
- primary: {
- main: blueGrey[500],
- dark: blueGrey[700],
- light: blueGrey[400]
- },
- secondary: {
- main: "#00D3A9",
- dark: "#00B39F",
- darker: "#3C494F"
- },
- neutral: {
- main: '#64748B',
- contrastText: '#FFF',
- }
- };
+ const commonPalette = {
+ primary: {
+ main: blueGrey[500],
+ dark: blueGrey[700],
+ light: blueGrey[400]
+ },
+ secondary: {
+ main: '#00D3A9',
+ dark: '#00B39F',
+ darker: '#3C494F'
+ },
+ neutral: {
+ main: '#64748B',
+ contrastText: '#FFF'
+ }
+ };
- const palette = paletteType === "dark"
- ? {
- mode: "dark",
- ...commonPalette,
- secondary: {
- ...commonPalette.secondary
- },
- }
- : {
- mode: "light",
- ...commonPalette,
- secondary: {
- ...commonPalette.secondary,
- }
+ const palette =
+ paletteType === 'dark'
+ ? {
+ mode: 'dark',
+ ...commonPalette,
+ secondary: {
+ ...commonPalette.secondary
+ }
}
+ : {
+ mode: 'light',
+ ...commonPalette,
+ secondary: {
+ ...commonPalette.secondary
+ }
+ };
- const theme = createTheme({
- palette,
- typography: {
- h5: {
- fontWeight: "bolder",
- fontSize: 26,
- letterSpacing: 0.5
- },
- },
- shape: { borderRadius: 8 },
- breakpoints: {
- values: {
- xs: 0,
- sm: 600,
- md: 960,
- lg: 1280,
- xl: 1920,
- },
- },
- components: {
- MuiAppBar: {
- styleOverrides: {
- colorPrimary: {
- backgroundColor: blueGrey[500],
- },
- colorSecondary: {
- backgroundColor: blueGrey[600],
- }
- }
- }
+ const theme = createTheme({
+ palette,
+ typography: {
+ h5: {
+ fontWeight: 'bolder',
+ fontSize: 26,
+ letterSpacing: 0.5
+ }
+ },
+ shape: { borderRadius: 8 },
+ breakpoints: {
+ values: {
+ xs: 0,
+ sm: 600,
+ md: 960,
+ lg: 1280,
+ xl: 1920
+ }
+ },
+ components: {
+ MuiAppBar: {
+ styleOverrides: {
+ colorPrimary: {
+ backgroundColor: blueGrey[500]
+ },
+ colorSecondary: {
+ backgroundColor: blueGrey[600]
+ }
}
- })
-
- const overrides = {
- //
+ }
}
+ });
+
+ const overrides = {
+ //
+ };
- theme.overrides = {
- ...overrides,
- MuiCssBaseline: {
- '@global': {
- body: {
- backgroundColor: paletteType === 'dark' ? '#303030' : '#eaeff1',
- color: paletteType === 'dark' ? '#000000' : '#FFFFFF'
- },
- h5: {
- color: paletteType === 'dark' ? '#000000' : '#FFFFFF'
- },
- p: {
- color: paletteType === 'dark' ? '#000000' : '#FFFFFF'
- }
- }
+ theme.overrides = {
+ ...overrides,
+ MuiCssBaseline: {
+ '@global': {
+ body: {
+ backgroundColor: paletteType === 'dark' ? '#303030' : '#eaeff1',
+ color: paletteType === 'dark' ? '#000000' : '#FFFFFF'
+ },
+ h5: {
+ color: paletteType === 'dark' ? '#000000' : '#FFFFFF'
+ },
+ p: {
+ color: paletteType === 'dark' ? '#000000' : '#FFFFFF'
}
+ }
}
+ };
- return theme
-}
+ return theme;
+};
const darkTheme = createCustomTheme('dark');
const lightTheme = createCustomTheme('light');
-export { darkTheme, lightTheme };
\ No newline at end of file
+export { darkTheme, lightTheme };
diff --git a/packages/design-system/vite.config.js b/packages/design-system/vite.config.js
index 5a33944a9..654918240 100644
--- a/packages/design-system/vite.config.js
+++ b/packages/design-system/vite.config.js
@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
- plugins: [react()],
-})
+ plugins: [react()]
+});
diff --git a/packages/svg/.babelrc b/packages/svg/.babelrc
index f7a82210f..bd96608f8 100644
--- a/packages/svg/.babelrc
+++ b/packages/svg/.babelrc
@@ -1,7 +1,3 @@
{
- "presets": [
- "@babel/preset-env",
- "@babel/preset-typescript",
- "@babel/preset-react"
- ]
-}
\ No newline at end of file
+ "presets": ["@babel/preset-env", "@babel/preset-typescript", "@babel/preset-react"]
+}
diff --git a/packages/svg/jest.config.js b/packages/svg/jest.config.js
new file mode 100644
index 000000000..701b86eef
--- /dev/null
+++ b/packages/svg/jest.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+ preset: 'ts-jest',
+ testEnvironment: 'jsdom',
+ coverageThreshold: {
+ global: {
+ branches: 80,
+ functions: 80,
+ lines: 80,
+ statements: 80,
+ },
+ },
+};
diff --git a/packages/svg/package.json b/packages/svg/package.json
index f5041ab85..36845ac17 100644
--- a/packages/svg/package.json
+++ b/packages/svg/package.json
@@ -14,10 +14,6 @@
"test": "jest",
"coverage": "jest --coverage"
},
- "jest": {
- "preset": "ts-jest",
- "testEnvironment": "jsdom"
- },
"devDependencies": {
"@babel/preset-react": "^7.22.5",
"@swc/core": "^1.3.78",
@@ -36,5 +32,8 @@
},
"publishConfig": {
"access": "public"
+ },
+ "dependencies": {
+ "@testing-library/react": "^14.0.0"
}
}
diff --git a/packages/svg/src/__testing__/AddIcon.test.tsx b/packages/svg/src/__testing__/AddIcon.test.tsx
new file mode 100644
index 000000000..412d774cf
--- /dev/null
+++ b/packages/svg/src/__testing__/AddIcon.test.tsx
@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+import { AddIcon } from '../icons';
+
+describe('AddIcon', () => {
+ it('renders without errors', () => {
+ render();
+ });
+
+ it('applies width and height', () => {
+ const { getByTestId } = render();
+ const svgElement = getByTestId('add-icon-svg');
+ expect(svgElement.getAttribute('width')).toBe('24');
+ expect(svgElement.getAttribute('height')).toBe('24');
+ });
+});
diff --git a/packages/svg/src/icons/Add/AddIcon.tsx b/packages/svg/src/icons/Add/AddIcon.tsx
new file mode 100644
index 000000000..0e4d5b4d9
--- /dev/null
+++ b/packages/svg/src/icons/Add/AddIcon.tsx
@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const AddIcon: FC = ({
+ width = DEFAULT_WIDTH,
+ height = DEFAULT_HEIGHT,
+ fill = DEFAULT_FILL_NONE,
+ ...props
+}) => {
+ return (
+
+ );
+};
+
+export default AddIcon;
diff --git a/packages/svg/src/icons/Add/AddIconCircleBordered.tsx b/packages/svg/src/icons/Add/AddIconCircleBordered.tsx
new file mode 100644
index 000000000..e8cb26fa2
--- /dev/null
+++ b/packages/svg/src/icons/Add/AddIconCircleBordered.tsx
@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const AddIconCircleBordered: FC = ({
+ width = DEFAULT_WIDTH,
+ height = DEFAULT_HEIGHT,
+ fill = DEFAULT_FILL_NONE,
+ ...props
+}) => {
+ return (
+
+ );
+};
+
+export default AddIconCircleBordered;
diff --git a/packages/svg/src/icons/Add/index.ts b/packages/svg/src/icons/Add/index.ts
new file mode 100644
index 000000000..31ee6bcf9
--- /dev/null
+++ b/packages/svg/src/icons/Add/index.ts
@@ -0,0 +1,2 @@
+export { default as AddIcon } from './AddIcon';
+export { default as AddIconCircleBordered } from './AddIconCircleBordered';
diff --git a/packages/svg/src/icons/AddIcon.tsx b/packages/svg/src/icons/AddIcon.tsx
deleted file mode 100644
index 26c3ddd44..000000000
--- a/packages/svg/src/icons/AddIcon.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { FC } from 'react';
-import { IconProps } from './types';
-
-export const AddIcon: FC = ({ width, height, ...props }) => {
- return (
-
- );
-};
-
-export default AddIcon;
diff --git a/packages/svg/src/icons/AddIconCircleBorder.tsx b/packages/svg/src/icons/AddIconCircleBorder.tsx
deleted file mode 100644
index 2a988fbdf..000000000
--- a/packages/svg/src/icons/AddIconCircleBorder.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { FC } from 'react';
-import { IconProps } from './types';
-
-export const AddIconCircleBordered: FC = ({ width, height, color, ...props }) => {
- return (
-
- );
-};
-
-export default AddIconCircleBordered;
diff --git a/packages/svg/src/icons/Application/ApplicationIcon.tsx b/packages/svg/src/icons/Application/ApplicationIcon.tsx
index 185546100..177c70781 100644
--- a/packages/svg/src/icons/Application/ApplicationIcon.tsx
+++ b/packages/svg/src/icons/Application/ApplicationIcon.tsx
@@ -1,6 +1,6 @@
import { FC } from 'react';
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
import { IconProps } from '../types';
-import { DEFAULT_WIDTH, DEFAULT_HEIGHT } from '../../constants/constants';
const ApplicationIcon: FC = ({
width = DEFAULT_WIDTH,
diff --git a/packages/svg/src/icons/Application/KeppelApplicationIcon.tsx b/packages/svg/src/icons/Application/KeppelApplicationIcon.tsx
index cda9e51c8..9810dbe66 100644
--- a/packages/svg/src/icons/Application/KeppelApplicationIcon.tsx
+++ b/packages/svg/src/icons/Application/KeppelApplicationIcon.tsx
@@ -1,11 +1,11 @@
import { FC } from 'react';
-import { IconProps } from '../types';
import {
- DEFAULT_WIDTH,
+ CARIBBEAN_GREEN_FILL,
DEFAULT_HEIGHT,
- KEPPEL_GREEN_FILL,
- CARIBBEAN_GREEN_FILL
+ DEFAULT_WIDTH,
+ KEPPEL_GREEN_FILL
} from '../../constants/constants';
+import { IconProps } from '../types';
type KeppelApplicationIconProps = {
primaryFill: string;
diff --git a/packages/svg/src/icons/Application/OutlinedApplicationIcon.tsx b/packages/svg/src/icons/Application/OutlinedApplicationIcon.tsx
index 33ed81e85..588ff1676 100644
--- a/packages/svg/src/icons/Application/OutlinedApplicationIcon.tsx
+++ b/packages/svg/src/icons/Application/OutlinedApplicationIcon.tsx
@@ -1,11 +1,11 @@
import { FC } from 'react';
-import { IconProps } from '../types';
import {
- DEFAULT_WIDTH,
- DEFAULT_HEIGHT,
DEFAULT_FILL_NONE,
- DEFAULT_STROKE
+ DEFAULT_HEIGHT,
+ DEFAULT_STROKE,
+ DEFAULT_WIDTH
} from '../../constants/constants';
+import { IconProps } from '../types';
export const OutlinedApplicationIcon: FC = ({
width = DEFAULT_WIDTH,
diff --git a/packages/svg/src/icons/Application/index.ts b/packages/svg/src/icons/Application/index.ts
index 2ee36a0e1..9854399b4 100644
--- a/packages/svg/src/icons/Application/index.ts
+++ b/packages/svg/src/icons/Application/index.ts
@@ -1,3 +1,3 @@
export { default as ApplicationIcon } from './ApplicationIcon';
-export { default as OutlinedApplicationIcon } from './OutlinedApplicationIcon';
export { default as KeppelApplicationIcon } from './KeppelApplicationIcon';
+export { default as OutlinedApplicationIcon } from './OutlinedApplicationIcon';
diff --git a/packages/svg/src/icons/ApplicationIcon.tsx b/packages/svg/src/icons/ApplicationIcon.tsx
deleted file mode 100644
index 6f49a2513..000000000
--- a/packages/svg/src/icons/ApplicationIcon.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { FC } from 'react';
-import { IconProps } from './types';
-
-const ApplicationIcon: FC = ({ width, height, ...props }) => {
- return (
-
- );
-};
-
-export default ApplicationIcon;
diff --git a/packages/svg/src/icons/Bell/BellIcon.tsx b/packages/svg/src/icons/Bell/BellIcon.tsx
new file mode 100644
index 000000000..99216f57e
--- /dev/null
+++ b/packages/svg/src/icons/Bell/BellIcon.tsx
@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const BellIcon: FC = ({
+ width = DEFAULT_WIDTH,
+ height = DEFAULT_HEIGHT,
+ ...props
+}) => {
+ return (
+
+ );
+};
+
+export default BellIcon;
diff --git a/packages/svg/src/icons/Bell/index.ts b/packages/svg/src/icons/Bell/index.ts
new file mode 100644
index 000000000..da92c82fb
--- /dev/null
+++ b/packages/svg/src/icons/Bell/index.ts
@@ -0,0 +1 @@
+export { default as BellIcon } from './BellIcon';
diff --git a/packages/svg/src/icons/BellIcon.tsx b/packages/svg/src/icons/BellIcon.tsx
deleted file mode 100644
index b9a11d13c..000000000
--- a/packages/svg/src/icons/BellIcon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { FC } from 'react';
-import { IconProps } from './types';
-
-export const BellIcon: FC = ({ width, height, color, ...props }) => {
- return (
-
- );
-};
-
-export default BellIcon;
diff --git a/packages/svg/src/icons/Bus.tsx b/packages/svg/src/icons/Bus.tsx
deleted file mode 100644
index 8b06b720c..000000000
--- a/packages/svg/src/icons/Bus.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { FC } from 'react';
-import { IconProps } from './types';
-
-export const Bus: FC = ({ width, height, ...props }) => {
- return (
-
- );
-};
-
-export default Bus;
diff --git a/packages/svg/src/icons/Bus/BusIcon.tsx b/packages/svg/src/icons/Bus/BusIcon.tsx
index 33fa95d35..a5416f1e1 100644
--- a/packages/svg/src/icons/Bus/BusIcon.tsx
+++ b/packages/svg/src/icons/Bus/BusIcon.tsx
@@ -1,6 +1,6 @@
import { FC } from 'react';
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
import { IconProps } from '../types';
-import { DEFAULT_WIDTH, DEFAULT_HEIGHT } from '../../constants/constants';
export const BusIcon: FC = ({
width = DEFAULT_WIDTH,
diff --git a/packages/svg/src/icons/ChatIcon.tsx b/packages/svg/src/icons/Chat/ChatIcon.tsx
similarity index 70%
rename from packages/svg/src/icons/ChatIcon.tsx
rename to packages/svg/src/icons/Chat/ChatIcon.tsx
index 7b4280f55..c864caa56 100644
--- a/packages/svg/src/icons/ChatIcon.tsx
+++ b/packages/svg/src/icons/Chat/ChatIcon.tsx
@@ -1,7 +1,12 @@
import { FC } from 'react';
-import { IconProps } from './types';
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
-export const ChatIcon: FC = ({ width, height, color, ...props }) => {
+export const ChatIcon: FC = ({
+ width = DEFAULT_WIDTH,
+ height = DEFAULT_HEIGHT,
+ ...props
+}) => {
return (