Merge remote-tracking branch 'upstream/master' into feature/kunal7000…

…6/60

Signed-off-by: Kunaldeep singh <[email protected]>

.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 }}

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn format:check && yarn lint-staged

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+dist
+coverage
+

.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"]
 }

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

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 `[email protected]`
+2. Use `yarn` to install dependencies
+
 <div>&nbsp;</div>
 
 ## Join the Layer5 community!

package.json

@@ -8,17 +8,25 @@
     "packages/*"
   ],
   "packageManager": "[email protected]",
-  "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"
+    ]
   }
 }

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
 }

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 <MuiAccordion {...props} />;

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 <MuiAccordionActions {...props} />;

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 <MuiAccordionDetails {...props} />;

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 <MuiAccordionSummary {...props} />;

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 <MuiAppBar {...props} />;

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 <MuiAvatar {...props} />;

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 <MuiAvatarGroup {...props} />;

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 <MuiBackdrop {...props} />;

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 <MuiBadge {...props} />;

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 <MuiBox {...props} />;

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 <MuiButton {...props} />;

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 <MuiButtonGroup {...props} />;

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 <MuiCard {...props} />;

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 <MuiCheckbox {...props} />;

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 <MuiChip {...props} />;

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 <MuiDialog {...props} />;

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 <MuiDialogActions {...props} />;

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 <MuiDialogContent {...props} />;

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 <MuiDialogContentText {...props} />;

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 <MuiDialogTitle {...props} />;

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 <MuiDivider {...props} />;

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 <MuiDrawer {...props} />;

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) {