Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add prettifier #404

Merged
merged 28 commits into from
Sep 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
065c6d0
fix: add svg-prettifier to aquarium
gabyzif Sep 12, 2024
3e77649
fix: update prettifier
gabyzif Sep 12, 2024
f3610b3
feat: add mp colors to storybook and remove token to css from pre com…
gabyzif Sep 12, 2024
03f6dd9
fix: update image url
gabyzif Sep 12, 2024
6240015
fix: add svg-prettifier to aquarium
gabyzif Sep 12, 2024
aa9d81a
fix: update prettifier
gabyzif Sep 12, 2024
95adeb2
Merge branch 'main' into feat/add-prettifier
gabyzif Sep 13, 2024
4abf410
Merge branch 'main' into feat/add-prettifier
gabyzif Sep 13, 2024
8463aa2
fix: update prettifier server
gabyzif Sep 13, 2024
7a039e6
fix: update prettifier
gabyzif Sep 13, 2024
4f27f6b
fix: update prettifier
gabyzif Sep 13, 2024
9b9c158
fix: update prettifier
gabyzif Sep 13, 2024
30406ea
fix: update prettifier (security fixes)
gabyzif Sep 13, 2024
e87f152
fix: sangrep sec issues
gabyzif Sep 13, 2024
2427bf7
fix: samgrep fixes
gabyzif Sep 13, 2024
117bb55
fix: update prettifier
gabyzif Sep 13, 2024
08ee19b
fix: add samgep rule
gabyzif Sep 13, 2024
dec36e4
fix: add semgrepignore
gabyzif Sep 13, 2024
d321f7c
fix: add icon docs
gabyzif Sep 16, 2024
be5e140
Update server/prettify-server.cjs
gabyzif Sep 16, 2024
f76fbb9
Update server/prettify-server.cjs
gabyzif Sep 16, 2024
327c962
chore: pr comments
gabyzif Sep 16, 2024
5dfd4fe
fix: reformat w prettier
gabyzif Sep 16, 2024
6f7fd8f
chore: pr comments remove old un-manteind packages from prettify
gabyzif Sep 16, 2024
c6707cd
chore: remove unsued package
gabyzif Sep 16, 2024
0c3659b
fix: chore -cleanup
gabyzif Sep 16, 2024
a410969
fix: cleanup package.json
gabyzif Sep 16, 2024
a84163b
fix: cleanup
gabyzif Sep 16, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .semgrepignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
server/prettify-server.cjs
src/utils/svg-prettifier/SvgPrettifier.tsx
src/utils/svg-prettifier/prettifier.cjs
38 changes: 38 additions & 0 deletions docs/icons.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
## Icons Documentation

### Adding and Updating Icons

The Design team provides SVG files with the final icon names. These SVG files must be minified and follow the project's styling guidelines. You can prettify them using the `SVGPrettifier` tool, which ensures the correct size and properties are applied to the SVG.

#### Steps to Add a New Icon:

1. **Prettify the SVG**:
Use the SVGPrettifier Story to clean up the SVG file and ensure it meets the necessary formatting standards (size, properties, etc.).

2. **Update the Icon Type**:
Add the new icon name to the TypeScript type definition in the [src/types/icons](https://github.com/mParticle/aquarium/blob/3abc3b71916ab5a7db3c4f93e06ad2bd5845e1bf/src/types/icons.ts) file.

3. **Update Icon Components**:
Add the icon components in the [src/components/icons](https://github.com/mParticle/aquarium/blob/3abc3b71916ab5a7db3c4f93e06ad2bd5845e1bf/src/components/icons/index.ts) directory, where all icon components are stored.

4. **Update the Icons Object**:
Ensure the new icons are included in the `Icons` object located in [src/constants/Icons](https://github.com/mParticle/aquarium/blob/3abc3b71916ab5a7db3c4f93e06ad2bd5845e1bf/src/constants/Icons.ts). This object is used across the project to reference all available icons.

### The `IconTable` Component

The `IconTable` component is used to display a table of all available icons in the project.

### Using the `SVGPrettifier` Tool

The `SVGPrettifier` component is used to upload and prettify SVG files. Each SVG must follow the project's styling guidelines and have a unique name to avoid overwriting existing icons.

### Starting the Server

To process the uploaded SVGs with the `SVGPrettifier`, a server must be running locally. Follow these steps to start the server:

1. Navigate to the root of the project directory.
2. Run the following command to start the server:

```bash
npm run icons-prettifier
```
Loading
Loading