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/Makefile b/Makefile
index e62496978..2aef2b4cd 100644
--- a/Makefile
+++ b/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
\ No newline at end of file
diff --git a/README.md b/README.md
index 7cd3bc0d0..cc802ca5c 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 3301e8902..a4024b90d 100644
--- a/package.json
+++ b/package.json
@@ -33,4 +33,4 @@
"eslint --fix"
]
}
-}
+}
\ No newline at end of file
diff --git a/packages/components/src/buttongroup.tsx b/packages/components/src/buttongroup.tsx
new file mode 100644
index 000000000..e931175b5
--- /dev/null
+++ b/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 ;
+};
diff --git a/packages/components/src/card.tsx b/packages/components/src/card.tsx
new file mode 100644
index 000000000..2ae6f2695
--- /dev/null
+++ b/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 ;
+};
diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
index 6582fc350..0369a3989 100644
--- a/packages/components/src/index.tsx
+++ b/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';
diff --git a/packages/components/src/list.tsx b/packages/components/src/list.tsx
new file mode 100644
index 000000000..f39b97641
--- /dev/null
+++ b/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 ;
+};
diff --git a/packages/components/src/menu.tsx b/packages/components/src/menu.tsx
new file mode 100644
index 000000000..17285c38b
--- /dev/null
+++ b/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 ;
+};
diff --git a/packages/components/src/select.tsx b/packages/components/src/select.tsx
new file mode 100644
index 000000000..cf7501926
--- /dev/null
+++ b/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 ;
+};
diff --git a/packages/components/src/switch.tsx b/packages/components/src/switch.tsx
new file mode 100644
index 000000000..3e9483bb4
--- /dev/null
+++ b/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 ;
+};
diff --git a/packages/components/src/table.tsx b/packages/components/src/table.tsx
new file mode 100644
index 000000000..9b3b86768
--- /dev/null
+++ b/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 ;
+};
diff --git a/packages/components/src/textfield.tsx b/packages/components/src/textfield.tsx
new file mode 100644
index 000000000..2412893aa
--- /dev/null
+++ b/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 ;
+};
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..c9c67ee65
--- /dev/null
+++ b/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 = ({
+ 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..08903cc86
--- /dev/null
+++ b/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 = ({
+ 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/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..02a98ae98
--- /dev/null
+++ b/packages/svg/src/icons/Bell/BellIcon.tsx
@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { IconProps } from '../types';
+import { DEFAULT_WIDTH, DEFAULT_HEIGHT } from '../../constants/constants';
+
+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/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..f65736f58 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 { IconProps } from '../types';
+import { DEFAULT_WIDTH, DEFAULT_HEIGHT } from '../../constants/constants';
-export const ChatIcon: FC = ({ width, height, color, ...props }) => {
+export const ChatIcon: FC = ({
+ width = DEFAULT_WIDTH,
+ height = DEFAULT_HEIGHT,
+ ...props
+}) => {
return (