@croud-ui/solid-foundations - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

package.json

 {
   "name": "@croud-ui/solid-foundations",
-  "private": false,
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Croud's Solid foundations",
@@ -10,2 +9,3 @@ "scripts": {
     "build": "vite build",
+    "build-npm": "vite build --config vite.npm.config.ts",
     "storybook": "start-storybook -p 6006",
@@ -17,2 +17,3 @@ "build-storybook": "build-storybook"
     "@babel/core": "^7.15.8",
+    "@croud-ui/css": "^0.2.0",
     "@storybook/addon-actions": "^6.3.12",
@@ -22,2 +23,3 @@ "@storybook/addon-essentials": "^6.3.12",
     "@storybook/html": "^6.3.12",
+    "@types/lodash": "^4.14.175",
     "autoprefixer": "^10.2.6",
@@ -33,2 +35,3 @@ "babel-loader": "^8.2.2",
   "dependencies": {
+    "lodash": "^4.17.21",
     "solid-app-router": "^0.0.50",
@@ -35,0 +38,0 @@ "solid-element": "^1.1.6",

README.md

@@ -1,40 +0,74 @@
-# Vite + Solid + Tailwind CSS starter
+# Solid Foundations
+Croud's Solid based component library
 
-Inspired by [posva's](https://github.com/posva) [vite-tailwind-starter](https://github.com/posva/vite-tailwind-starter)
+## Installation
+This package uses Yarn to manage the dependencies.
+```sh
+yarn
+```
 
-Note if you have access to [Tailwind UI](https://tailwindui.com), you can follow the following steps to add it:
+# Storybook
+Our components are documented in Storybook. 
 
-1. Install `@tailwindcss/ui`:
+Netlify publishes the latest version of Storybook when we merge anything into Master. The latest version of Storybook is deployed to the following url
 
+https://croud-solid-foundations.netlify.app
+
+### ESBuild
+Storybook has traditionally used Webpack to build storybook, but as our repo uses Vite (which is based on `esbuild`), we are using the experimental [storybook-builder-vite](https://www.npmjs.com/package/storybook-builder-vite) builder. 
+
+This gives us a massive speed improvment as well as a consistency with the rest of our toolchain, but not everything in the Storybook ecosystem is compatible with this builder yet
+
+## Local dev
+Use the following command to build Storybook locally for development
+
 ```sh
-yarn add @tailwindcss/ui
+yarn storybook
 ```
 
-2. Add the plugin in `tailwind.config.js` without changing anything else:
+## Production build
+We can build a production ready version of the storybook locally with the following command, but this will probably only be useful for debugging the production build.
 
-```js
-// tailwind.config.js
-module.exports = {
-  // ...
-  // rest of the config
-  plugins: [require('@tailwindcss/ui')],
-}
+```sh
+yarn build-storybook
 ```
 
-## Installation
+The assets from this build we be output into the `storybook-static` dir (which is ignored by Git)
 
+# Sharing Webcomponents
+If we want to port any components from this library to our existing CC monorepo, we will need to compile them as a Web Component. This will allow them to behave as self contained "black boxes" of interactivity within Croud Control.
+
+## Defining Web Components
+Any `customElements` defined in the `/src/webComponents.tsx` file will be bundled into our NPM package
+There is a handy `WebComponentWrapper` HOC we should use to handle some common Web Component logic
+
+```tsx
+customElement('some-component', { foo: undefined }, (props) => (
+    <WebComponentWrapper>
+        <SomeComponent { ...props } />
+    </WebComponentWrapper>
+))
+```
+
+For more info, see the [Solid Element docs](https://www.npmjs.com/package/solid-element)
+
+## Build NPM package
+After we have defined our `customElement`, we can build a production ready build of our Web Components using the following command
+
 ```sh
-yarn
+yarn build-npm
 ```
+The assets from this build we be output into the `dist` dir (which is ignored by Git)
 
-## Development
+## Publish new package
+Bump the package version
 
 ```sh
-yarn dev
+npm version [patch, minor, major]
 ```
 
-## Build
+Publish the `dist` dir to NPM
 
 ```sh
-yarn build
-```
+npm publish
+```

No alert changes

Improved metrics

Total package byte prevSize

26106

increased by7.86%

Number of lines in readme file

74

increased by80.49%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

15

increased by15.38%

Dependency changes

• + Addedlodash@^4.17.21

• + Addedlodash@4.17.21(transitive)