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

Comparing version 0.0.25 to 0.0.26

package.json

 {
   "name": "@croud-ui/solid-foundations",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "Croud's Solid foundations",
@@ -12,2 +12,3 @@ "scripts": {
     "build-storybook": "build-storybook",
+    "tokens:generate": "theo ./src/tokens/config/index.yml --transform web --format common.js --dest ./src/tokens",
     "prepublishOnly": "npm run build-npm"
@@ -29,2 +30,3 @@ },
     "faker": "^5.5.3",
+    "optimist": "^0.6.1",
     "postcss": "^8.3.5",
@@ -34,2 +36,3 @@ "storybook-addon-jsx": "^7.3.14",
     "tailwindcss": "^2.2.4",
+    "theo": "^8.1.5",
     "vite": "^2.4.0",
@@ -42,2 +45,3 @@ "vite-plugin-solid": "^2.0.0"
     "solid-app-router": "^0.1.9",
+    "solid-bootstrap-core": "^0.1.10",
     "solid-element": "^1.1.6",
@@ -44,0 +48,0 @@ "solid-js": "^1.0.0",

README.md

 # Solid Foundations
+
 Croud's Solid based component library
 
 ## Installation
+
 This package uses Yarn to manage the dependencies.
+
 ```sh
@@ -11,4 +14,5 @@ yarn
 # Storybook
-Our components are documented in Storybook. 
 
+Our components are documented in Storybook.
+
 Netlify publishes the latest version of Storybook when we merge anything into Master. The latest version of Storybook is deployed to the following url
@@ -19,7 +23,9 @@
 ### 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. 
 
+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
@@ -32,2 +38,3 @@
 ## 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.
@@ -41,6 +48,34 @@
 
+# Design tokens
+
+Design tokens are generated using [theo](https://github.com/salesforce-ux/theo) which allows us to export our tokens in multiple formats.
+
+## Defining design tokens
+
+All design tokens are defined in `yml` format in the `~/src/tokens/config` directory.
+
+The design token definitions are broken down, categorised and split out to make it easier to maintain. All new files must be imported into the root `index.yml` file in order to be processed
+
+## Generating design tokens
+
+To generate our design tokens in our desired formats we need to run the following command
+
+```sh
+yarn tokens:generate
+```
+
+## Consuming design tokens
+
+The specifics of how we consume our generated design tokens depends on the language we need to reference them in.
+
+All generated design token files are added to the `~/src/tokens/` directory.
+
+For more info, including guidence on maintaining existing tokens and adding defining new tokens, please refer to the [theo docs](https://www.npmjs.com/package/theo)
+
 # 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
@@ -50,6 +85,6 @@ 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>
+customElement('some-component', { foo: undefined }, props => (
+  <WebComponentWrapper>
+    <SomeComponent {...props} />
+  </WebComponentWrapper>
 ))
@@ -61,2 +96,3 @@ ```
 ## Build NPM package
+
 After we have defined our `customElement`, we can build a production ready build of our Web Components using the following command
@@ -67,5 +103,7 @@
 ```
+
 The assets from this build we be output into the `dist` dir (which is ignored by Git)
 
 ## Publish new package
+
 Bump the package version
@@ -81,2 +119,2 @@
 npm publish
-```
+```

No alert changes

Improved metrics

Total package byte prevSize

473934

increased by8.04%

Lines of code

11077

increased by5.65%

Number of lines in readme file

113

increased by52.7%

Worsened metrics

Dependency count

7

increased by16.67%

Dev dependency count

20

increased by11.11%

Dependency changes

• + Addedsolid-bootstrap-core@^0.1.10

• + Added@babel/runtime@7.26.9(transitive)

• + Added@popperjs/core@2.11.8(transitive)

• + Addeddom-helpers@5.2.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedsolid-bootstrap-core@0.1.11(transitive)

• + Addedsolid-react-transition@0.1.10(transitive)