@simpleview/sv-mosaic v33.0.0
One line change...
sv-mosaic
npm install sv-mosaic
Mosaic is a React user interface library designed to create admin interfaces. It is designed to be product agnostic allowing it to be utilized in any manner of Admin interface.
It is built on top of React Material-UI and is it recommended that you pin to the same version that Mosaic is using.
Storybook: https://simpleviewinc.github.io/sv-mosaic/
Changelog - See the latest changes to sv-mosaic.
Usage
- Add sv-mosaic to your package.json and pin to a specific version.
- sv-mosaic has a host of
peerDependencies
which are not bundled into the library in order to minimize the bundle size of those that are using the package. You will need to ensure all of thepeerDependencies
of the package are satisfied. See the package.json for the currentpeerDependencies
.
All components are exported individually and should be imported via destructuring to ensure proper tree-shaking.
import { DataView } from "@simpleview/sv-mosaic"
For faster import statements, import just the resource you want, exposed by package.json "exports" key.
import DataView from "@simpleview/sv-mosaic/components/DataView";
import formActions from "@simpleview/sv-mosaic/formActions";
Optimization Guidelines
Optimization Guidelines - Ensure you're properly using Mosaic and React for optimal client-side performance.
Installation
- Ensure you have sv-kubernetes installed.
- If you want your windows box to have TypeScript completions of npm packages.
Install Node via https://nodejs.org/en/download/, easiest method is the Windows Install 64-bit. It may ask you to restart your box.
In windows cmd
``` cd d:\PATH\TO\sv-kubernetes\containers\sv-mosaic npm install ```
- Putty/Shell into sv-kubernetes
Install the container
sudo sv install sv-mosaic --type=container --branch=develop
* Run the container``` cd /sv/containers/sv-mosaic sudo npm run docker yarn start ```
The service should now be accessible at http://kube.simpleview.io:10000/
Unit Testing
- Ensure you have sv-mosaic installed per the instructions above.
- Putty/Shell into sv-kubernetes
* Run the container
``` cd /sv/containers/sv-mosaic sudo npm run docker yarn test ```
Repo Structure
When external parties consume this project the assumption is that all exported components are "top-level" meaning that you can destructure all necessary imports. This is necessary to ensure optimal and easy tree shaking.
import { DataView, DataViewFilterDate, transform_get } from "@simpleview/sv-mosaic";
- /components/ - Each exported component have it's own sub-folder in this folder.
Component - e.g. DataView, DataViewFilterDate
index.ts
This file File which should re-export the primary component as default. So if in the folder /DataViewFilterDate/ then index.ts should re-export /DataViewFilterDate/DataViewFilterDate.tsx.
This file should also export all entities in the ComponentTypes.ts file. This makes the type definitions usable throughout the project and by external consumers.
Component.tsx - The primary component file.
ComponentTypes.ts - If the component needs to declare it's own typescript Interfaces or Types througout the folder, declare them here.
The props for the primary component should always be called
[Component]Props
, e.g.DataViewProps
. All TypeScripttype
andinterface
definitions should be unique across the project this way if they are exported, they are guaranteed to be unique. Prefix them with the name of theComponent
, e.g.DataViewOptions
,DataViewColumn
. Additional.tsx - For private sub-components needed by this component which are not logical to be consumed outside of the project or within the project, simply place them in this folder and do not re-export them in the index.ts. Component.stories.tsx - Definition of the component playground used to test and demonstrate this components capabilities. Component.stories.mdx - The text documentation that describes this component and how to use it. Component.test.js - Jest file for testing this component. * /internal/ - Deprecated. No new content should go here, pending refactors to move it's content into the component folders. - /types/index.ts - Used for storing Global mosaic types which are used in multiple locations across the project and aren't specific to a specific component.
- /theme/ - Definition of shared colors and theming that is used across the project. Exported globally as
theme
. - /utils/ - Folder for non-react javascript utilities. Some of these are re-exported by the root index.ts, and some are private to the project.
- index.ts - The primary entrypoint for the project. It will re-export all entities from all public components.
Good Example Components:
- /components/Button/
- /components/LeftNav/
- /components/CheckboxList/
- /components/Checkbox/
Publishing
Publishing to NPM and storybook is automated. You do not need to run build, or publish.
- Whenever a push to master changes the package.json, @simpleview/sv-mosaic and @simpleview/sv-mosaic-types will be published to NPM via the publish github action which runs scripts/conditional-publish
- Whenever a push to master occurs the storybook is automatically built and pushed to the gh-pages branch via the storybook github action.
10 days ago
11 days ago
24 days ago
25 days ago
25 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
8 months ago
10 months ago
8 months ago
6 months ago
8 months ago
10 months ago
10 months ago
11 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
9 months ago
11 months ago
10 months ago
8 months ago
8 months ago
10 months ago
9 months ago
10 months ago
6 months ago
8 months ago
10 months ago
10 months ago
8 months ago
9 months ago
9 months ago
8 months ago
10 months ago
6 months ago
10 months ago
6 months ago
9 months ago
10 months ago
9 months ago
10 months ago
9 months ago
8 months ago
10 months ago
10 months ago
7 months ago
7 months ago
6 months ago
9 months ago
10 months ago
10 months ago
8 months ago
8 months ago
9 months ago
8 months ago
9 months ago
9 months ago
10 months ago
6 months ago
8 months ago
10 months ago
6 months ago
8 months ago
8 months ago
7 months ago
9 months ago
5 months ago
8 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
11 months ago
5 months ago
7 months ago
7 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
12 months ago
12 months ago
12 months ago
1 year ago
12 months ago
1 year ago
12 months ago
12 months ago
12 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago