slippers-ui - npm Package Compare versions

Comparing version 0.6.4-alpha.3 to 0.6.5-alpha

package.json

 {
   "name": "slippers-ui",
-  "version": "0.6.4-alpha.3",
+  "version": "0.6.5-alpha",
   "description": "GitLab Marketing Design System",
@@ -75,3 +75,3 @@ "homepage": "https://gitlab-com.gitlab.io/marketing/inbound-marketing/slippers-ui/",
     "sass": "^1.32.8",
-    "sass-loader": "^10",
+    "sass-loader": "^11.0.1",
     "semantic-release": "^17.3.8",
@@ -78,0 +78,0 @@ "storybook-addon-designs": "^5.4.2",

README.md

@@ -8,34 +8,12 @@ # Slippers Marketing Design System
 We're always looking for feedback to improve the experience of working with Slippers.
-We happily accept contributions, no matter how small.
-Feel free to submit an issue or open a merge request!
+We are actively welcoming contributions, no matter how small.
+Feel free to submit an issue or open a merge request! Even opening an issue oh how to help is more than welcome.
 
-## TailwindCSS
+## Requirements
 
-With Slippers, we have an [edited configuration of Tailwind](https://tailwindcss.com/docs/configuration) with a configuration file that exists on the root directory as [`tailwind.config.js`](https://gitlab.com/gitlab-com/marketing/inbound-marketing/slippers-ui/-/blob/master/tailwind.config.js). We would recommend examining that file _before_ trying to use the library to understand how our setup compares against [TailwindCSS's default configuration](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js). While our configuration will affect which utilities are available in comparison to [their documentation](https://tailwindcss.com/docs), using their own robust search is a good place to start.
+- This repo has been built and maintained using macOS with consideration for Windows machines, with Linux not being officially supported.
+- If you don't already, make sure you have [yarn](https://yarnpkg.com/getting-started/install), [node](https://nodejs.org), and [nvm](https://github.com/nvm-sh/nvm) installed (If you have a windows machine, you will need to addiitionally install [nvm-windows](https://github.com/coreybutler/nvm-windows), and [git](https://git-scm.com/)).
 
-For example, _all_ of our utility names are [prefixed with `slp-`](https://tailwindcss.com/docs/configuration#prefix) as seen on [within the config file](https://gitlab.com/gitlab-com/marketing/inbound-marketing/slippers-ui/-/blob/master/tailwind.config.js#L26).
-
-We have changed the root em to 10px to align with how [about-gitlab](https://gitlab.com/gitlab-com/www-gitlab-com/-/blob/master/source/stylesheets/2020base.scss#L64) currently works. Note this affects how TailwindCSS is built compared to their docs, specifically classes that use `rem` as their unit of choice.
-
-## Storybook Notes
-
-[Storybook](https://storybook.js.org/) is our isolated UI to code environment for creating anything from blocks and components to layouts and webpages. We are using Vue as our front-end framework for achieving this. The main concept behind storybook is:
-
-1. Authoring a Vue component
-2. Creating a corresponding ["story"](https://storybook.js.org/docs/vue/get-started/whats-a-story) as different UI States that exist withing a `component.stories.js` file. Storybook is able to [interpret these stories](https://storybook.js.org/docs/vue/writing-stories/introduction#component-story-format) and [render out different states of that component](https://storybook.js.org/docs/vue/writing-stories/introduction#how-to-write-stories) to the browser.
-3. Add documentation to those stories within the [docs panel](https://storybook.js.org/docs/vue/writing-docs/doc-blocks) or as [standalone page](https://storybook.js.org/docs/vue/writing-docs/mdx#documentation-only-mdx).
-
-This article is a good practical example on how [Storybook works and how to use it](https://www.learnstorybook.com/intro-to-storybook/vue/en/simple-component/).
-
-Gotchas: [Args in Storybook](https://storybook.js.org/docs/vue/writing-stories/args) vs Props in Vue
-
 ## Local Development Instructions
 
-Slippers is build with [VueCLI](https://cli.vuejs.org/guide/), [Storybook](https://storybook.js.org/), and [TailwindCSS](https://tailwindcss.com/).
-
-### Requirements
-
-- This repo has been built and maintained using macOS with consideration for Windows machines, with Linux not being officially supported.
-- If you don't already, make sure you have [yarn](https://yarnpkg.com/getting-started/install), [node](https://nodejs.org), and [nvm](https://github.com/nvm-sh/nvm) installed (If you have a windows machine, you will need to addiitionally install [nvm-windows](https://github.com/coreybutler/nvm-windows), and [git](https://git-scm.com/)).
-
 1. Use `nvm install` to install the same version of node as listen in `.nvmrc`.
@@ -46,9 +24,7 @@ 1. `nvm use` to allow nvm to match your working version of node to the one found within the repository.
 
-## Building for production
+## Building Storybook
 
-### Building Storybook
-
 1. `yarn build-storybook` to build to `/storybook-static` directory
 
-### Build the Vue Library
+## Build the Vue Library
 
@@ -71,3 +47,3 @@ To build the entire library, run
 
-#### Dist files
+### Dist files
 
@@ -85,27 +61,25 @@ The build step creates these files:
 
-#### Clean mode
+### Clean mode
 
 The order of those build commands matters, since the `build` command in Vue CLI will [automatically remove the `dist/` folder first](https://cli.vuejs.org/config/#outputdir). We can disble this if need to change the ordering.
 
-## Technical Notes
+# Technical Notes
 
-### Repo Infrastructure
+## Storybook Notes
 
-- We're currently using Prettier setup with Lefthook. Before committing, Lefthook checks that files are formatted with Prettier. To check for formatting, run `yarn prettier:check`. If you would like Prettier to format your entire repo automically, run `yarn prettier:write`. You may also pass your own arguments to prettier by running `yarn prettier`.
-
-### Storybook Notes
-
 - Storybook currently must use PostCSSv7, while Tailwindv2 is using PostCSSv8. Because of this, Tailwind was installed to be compatible with PostCSSv7. [Tailwind Docs on compatibility](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build).
-- Much of [Storybook](https://storybook.js.org/docs/html/get-started/introduction) is built and written with JS frameworks in mind. However, its most popular usage with React. Much of their primary docs are written with React in mind. We should consider making a contribution to their Vue docs so that others can benefit from that as well.
+- This contains a Storybook instance with the ability to render Vue components. Much of [Storybook](https://storybook.js.org/docs/html/get-started/introduction) is built and written with JS frameworks in mind. However, its most popular usage with React. Much of their primary docs are written with React in mind. We should consider making a contribution to their Vue docs so that others can benefit from that as well.
+- This article was behind how to write [Vue Stories](https://www.learnstorybook.com/intro-to-storybook/vue/en/simple-component/)
 
-### TailwindCSS Notes
+## TailwindCSS Notes
 
 - Under the hood, TailwindCSS uses [modern-normalize](https://github.com/sindresorhus/modern-normalize) as CSS reset across browsers. [Tailwind on Preflight](https://tailwindcss.com/docs/preflight).
-- TailwindCSS was installed as a PostCSS Plugin, which allows the CSS to get built out without needing TailwindCSS as a dependency [Tailwind Docs on PostCSS](https://tailwindcss.com/docs/installation#building-your-css). CSS in this form is the most portable and allows for any web project to use our styling.
-- [PurgeCSS](https://tailwindcss.com/docs/optimizing-for-production) uses [tree shaking](https://en.wikipedia.org/wiki/Tree_shaking) to help keep our styling footprint small. Building CSS without using CSSPurge makes a CSS file around ~4MB in size. It's resonable to expect packages under 25kb.
-- We found a recommended extension that is unfortunately only supported in VSCode: [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
+- TailwindCSS was installed as a PostCSS Plugin. [Tailwind Installation Instructions](https://tailwindcss.com/docs/installation#add-tailwind-as-a-post-css-plugin).
+- TailwindCSS config lives within `tailwind.config.js`, where you can [overide or extend](https://tailwindcss.com/docs/configuration) [TailwindCSS's default configuration](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js)
+- Recommended VSCode Extension: [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
+- Building CSS without using CSSPurge makes CSS file 3.9MB in size. With PurgeCSS (used by default), it's resonable to expect packages around 12kb.
 
-### PostCSS Notes
+## PostCSS Notes
 
 - [Autoprefixer](https://autoprefixer.github.io/): PostCSS Plugin adds ventor browser prefixes
 - [PostCSS Import](https://www.npmjs.com/package/postcss-import): PostCSS plugin transform @import rules to a single file

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1547549

978.86%

Lines of code

57645

1774.63%

Worsened metrics

Number of lines in readme file

82

-24.07%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes