build: clean up project structure

.gitignore

@@ -7,16 +7,11 @@ node_modules
 storybook-static
 
 # kickstartDS
-static/index.css.map
-/storybook
 *.dereffed.json
 *-tokens.json
-src/token/tokens.css
-src/token/icons/IconSprite.js
-src/token/storybook/tokens.js
-src/token/storybook/tokens.css
-src/token/storybook/icons.svg
-src/token/icons/icon-sprite.html
-static/index.css
-static/manager.css
+src/token
+!src/token/dictionary
+!src/token/branding-token.json
+static/*.css
+static/*.css.map
 dist

.storybook/preview.js

@@ -1,12 +1,6 @@
 import { actions } from "@storybook/addon-actions";
 import { DocsContainer } from "@storybook/addon-docs";
-// TODO is this actually needed, when it's also imported as part of `src/dist.js`?
-// feels like one should be able to go?
-// @see https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/attrchange
-import "lazysizes/plugins/attrchange/ls.attrchange";
-import {
-  unpackDecorator,
-} from "@kickstartds/core/lib/storybook/helpers";
+import { unpackDecorator } from "@kickstartds/core/lib/storybook/helpers";
 
 import "@kickstartds/base/lib/global/base.js";
 import "@kickstartds/base/lib/global/base.css";
@@ -35,17 +29,7 @@ export const parameters = {
     },
   },
   options: {
-    storySort(a, b) {
-      // welcome page to top!
-      if (a[0].includes("welcome")) {
-        return -1;
-      }
-
-      // alphabetically
-      return a[1].kind === b[1].kind
-        ? 0
-        : a[1].id.localeCompare(b[1].id, undefined, { numeric: true });
-    },
+    storySort: { order: ["Docs", ["Welcome"]] },
   },
   designToken: {
     disable: true,
@@ -61,7 +45,10 @@ export const parameters = {
     ),
   },
   playroom: {
-    url: process.env.NODE_ENV === 'production' ? 'http://localhost:9000/playroom/' : 'http://localhost:9000',
+    url:
+      process.env.NODE_ENV === "production"
+        ? "http://localhost:9000/playroom/"
+        : "http://localhost:9000",
   },
 };
 

.storybook/themes.js

@@ -1,5 +1,5 @@
 import { create } from "@storybook/theming";
-import * as tokens from '../src/token/storybook/tokens';
+import * as tokens from '../src/token/tokens';
 
 export const light = create({
   base: "light",

package.json

@@ -2,51 +2,62 @@
   "name": "@kickstartds/ds-starter-wip",
   "version": "1.0.0",
   "description": "",
+  "homepage": "https://github.com/kickstartDS/ds-starter-wip#readme",
+  "bugs": {
+    "url": "https://github.com/kickstartDS/ds-starter-wip/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kickstartDS/ds-starter-wip.git"
+  },
+  "license": "ISC",
+  "author": "",
   "main": "index.js",
   "types": "dist/types.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
     "build-storybook": "yarn build-tokens && run-p sass sass-manager schema && build-storybook --output-dir storybook",
-    "build-tokens": "kickstartDS tokens compile --cleanup --rc-only --token-path src/token/dictionary",
+    "build-tokens": "kickstartDS tokens compile",
     "chromatic": "chromatic --storybook-build-dir 'storybook' --skip \"@(renovate/**|dependabot/**)\" --exit-zero-on-changes --exit-once-uploaded",
     "dist:components": "node scripts/bundleComponents.js",
     "dist:fonts": "cp -r static/fonts dist/",
     "dist:iconsprite": "mkdir -p dist/components && cp src/token/icons/IconSprite.js dist/components/",
     "dist:images": "cp -r static/img static/logo.svg dist/",
     "dist:favicons": "cp -r static/favicon dist/",
     "dist:sass": "sass --load-path=node_modules src/dist.scss dist/index.css",
-    "dist:schema": "yarn schema && node scripts/copySchema.js && yarn typings",
+    "dist:schema": "yarn schema && node scripts/copySchema.js && yarn tsc",
     "dist:js": "esbuild index=src/dist.js --outdir=dist --format=esm --bundle --minify --splitting",
-    "init-tokens": "kickstartDS tokens init --cleanup --rc-only --token-path src/token/dictionary",
+    "init-tokens": "kickstartDS tokens init",
     "playroom": "run-p watch:* playroom:start",
     "playroom:start": "playroom start",
     "playroom:build": "playroom build",
     "prepublishOnly": "rm -rf dist && mkdir -p dist && yarn build-tokens && run-p dist:*",
     "sass": "sass --load-path=node_modules src/index.scss static/index.css",
     "sass-manager": "sass --load-path=node_modules .storybook/manager.scss static/manager.css",
-    "schema": "node scripts/schema.js",
+    "schema": "run-p schema:*",
+    "schema:dereference": "kickstartDS schema dereference --schema-domain schema.mydomain.com",
+    "schema:generate-props": "kickstartDS schema types --schema-domain schema.mydomain.com",
     "start": "run-p watch:* storybook",
     "storybook": "start-storybook -p 6006",
     "token": "node scripts/customPropertyExtract.js",
-    "typings": "tsc",
     "watch:sass": "yarn sass --watch",
     "watch:sass-manager": "yarn sass-manager --watch",
-    "watch:schema": "yarn schema && chokidar \"src/**/*.schema.json\" -c \"yarn schema {path}\"",
+    "watch:schema": "yarn schema && chokidar \"src/**/*.schema.json\" -c \"yarn schema\"",
     "watch:token": "yarn build-tokens && yarn token && chokidar \"src/**/*-tokens.scss\" -c \"yarn token {path}\"",
     "watch:dictionary": "chokidar \"src/token/dictionary/*.json\" -c \"yarn build-tokens\""
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/kickstartDS/ds-starter-wip.git"
+  "resolutions": {
+    "@types/react": "17.0.2"
   },
-  "author": "",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/kickstartDS/ds-starter-wip/issues"
+  "dependencies": {
+    "@bedrock-layout/primitives": "^2.2.1",
+    "@kickstartds/base": "2.0.0-canary.922.4954.0",
+    "@kickstartds/content": "2.0.0-canary.922.4954.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
   },
-  "homepage": "https://github.com/kickstartDS/ds-starter-wip#readme",
   "devDependencies": {
     "@auto-it/npm": "^10.37.6",
     "@auto-it/released": "^10.37.6",
@@ -80,7 +91,7 @@
     "json-schema-merge-allof": "^0.8.1",
     "json-schema-ref-parser": "^9.0.9",
     "json-schema-to-typescript": "^11.0.2",
-    "kickstartds": "^0.2.39",
+    "kickstartds": "1.0.0-beta.7",
     "lazysizes": "^5.3.2",
     "npm-run-all": "^4.1.5",
     "playroom": "^0.28.0",
@@ -89,18 +100,8 @@
     "storybook-design-token": "^2.7.1",
     "typescript": "^4.8.4"
   },
-  "dependencies": {
-    "@bedrock-layout/primitives": "^2.2.1",
-    "@kickstartds/base": "2.0.0-canary.922.4954.0",
-    "@kickstartds/content": "2.0.0-canary.922.4954.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "resolutions": {
-    "@types/react": "17.0.2"
-  },
   "publishConfig": {
-    "registry": "https://registry.npmjs.org",
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
   }
 }

scripts/customPropertyExtract.js

@@ -5,9 +5,8 @@ const sass = require("sass");
 
 const createTokens = (scssPath) => {
   try {
-    const result = sass.renderSync({
-      file: scssPath,
-      includePaths: ["node_modules"],
+    const result = sass.compile(scssPath, {
+      loadPaths: ["node_modules"],
     });
     const dest = scssPath.replace(
       /(.*\/)_?(.*)-tokens\.scss/,

sd.config.cjs

@@ -22,7 +22,7 @@ module.exports = StyleDictionary.extend(config).extend({
     },
     js: {
       transforms: ["attribute/cti", "name/cti/pascal", "size/rem", "color/css"],
-      buildPath: "src/token/storybook/",
+      buildPath: "src/token/",
       files: [
         {
           destination: "tokens.js",