update fork again

Signed-off-by: Antonette Caldwell <[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 }}

Makefile

@@ -1,24 +1,5 @@
-check:
-	golangci-lint run
-
-check-clean-cache:
-	golangci-lint cache clean
-
-protoc-setup:
-	wget -P meshes https://raw.githubusercontent.com/layer5io/meshery/master/meshes/meshops.proto
-
-proto:
-	protoc -I meshes/ meshes/meshops.proto --go_out=plugins=grpc:./meshes/
-
-
-
-
-
-site:
-	$(jekyll) serve --drafts --livereload
-
 build:
-	$(jekyll) build --drafts
+	yarn run build-all
 
-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:
+	yarn run format

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

@@ -33,4 +33,4 @@
       "eslint --fix"
     ]
   }
-}
+}

packages/components/src/buttongroup.tsx

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Card as MuiCard, CardProps } from '@mui/material';
+
+export const Card = (props: CardProps) => {
+  return <MuiCard {...props} />;
+};

packages/components/src/index.tsx

@@ -17,3 +17,11 @@ export { Tabs } from './tabs';
 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';

packages/components/src/list.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { List as MuiList, ListProps } from '@mui/material';
+
+export const List = (props: ListProps) => {
+  return <MuiList {...props} />;
+};

packages/components/src/menu.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Menu as MuiMenu, MenuProps } from '@mui/material';
+
+export const Menu = (props: MenuProps) => {
+  return <MuiMenu {...props} />;
+};

packages/components/src/select.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Select as MuiSelect, SelectProps } from '@mui/material';
+
+export const Select = (props: SelectProps) => {
+  return <MuiSelect {...props} />;
+};

packages/components/src/switch.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Switch as MuiSwitch, SwitchProps } from '@mui/material';
+
+export const Switch = (props: SwitchProps) => {
+  return <MuiSwitch {...props} />;
+};

packages/components/src/table.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Table as MuiTable, TableProps } from '@mui/material';
+
+export const Table = (props: TableProps) => {
+  return <MuiTable {...props} />;
+};

packages/components/src/textfield.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextField as MuiTextField, TextFieldProps } from '@mui/material';
+
+export const TextField = (props: TextFieldProps) => {
+  return <MuiTextField {...props} />;
+};

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,
+        },
+    },
+};

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

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(<AddIcon width={24} height={24} />);
+  });
+
+  it('applies width and height', () => {
+    const { getByTestId } = render(<AddIcon width={24} height={24} />);
+    const svgElement = getByTestId('add-icon-svg');
+    expect(svgElement.getAttribute('width')).toBe('24');
+    expect(svgElement.getAttribute('height')).toBe('24');
+  });
+});

packages/svg/src/icons/Add/AddIcon.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { IconProps } from '../types';
+import { DEFAULT_WIDTH, DEFAULT_HEIGHT, DEFAULT_FILL_NONE } from '../../constants/constants';
+
+export const AddIcon: FC<IconProps> = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  fill = DEFAULT_FILL_NONE,
+  ...props
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      data-testid="add-icon-svg"
+      {...props}
+    >
+      <path d="M0 0h24v24H0z" fill={fill} />
+      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+    </svg>
+  );
+};
+
+export default AddIcon;

packages/svg/src/icons/Add/AddIconCircleBordered.tsx

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { IconProps } from '../types';
+import { DEFAULT_WIDTH, DEFAULT_HEIGHT, DEFAULT_FILL_NONE } from '../../constants/constants';
+
+export const AddIconCircleBordered: FC<IconProps> = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  fill = DEFAULT_FILL_NONE,
+  ...props
+}) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 48 48"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M0 0h48v48h-48z" fill={fill} />
+      <path d="M26 14h-4v8h-8v4h8v8h4v-8h8v-4h-8v-8zm-2-10c-11.05 0-20 8.95-20 20s8.95 20 20 20 20-8.95 20-20-8.95-20-20-20zm0 36c-8.82 0-16-7.18-16-16s7.18-16 16-16 16 7.18 16 16-7.18 16-16 16z" />
+    </svg>
+  );
+};
+
+export default AddIconCircleBordered;

packages/svg/src/icons/Add/index.ts

@@ -0,0 +1,2 @@
+export { default as AddIcon } from './AddIcon';
+export { default as AddIconCircleBordered } from './AddIconCircleBordered';