feat(context): ✨ add themecontext (#28)

* feat(context): ✨ add themecontext exp * feat(theme): ✨ finish theme provider experiment * chore: remove themeType file and added ts types for extend * test: fixed all tests * feat(theme): ✨ provide ocx through context by getting the properties generated * build(theme): 👷 fix build error & variant override issue * feat: added typescript support for extended theme values * feat(theme): ✨ add support for overridding pseudo variants aswell * feat(cli): ✨ add a cli for generating tailwind propertie npx https://gist.github.com/navin-moorthy/3f9dabd6b6c3aa0f8808a15883df7737 * fix(cli): 🐛 fix cli silent bug in window because of unix command * refactor(theme): ♻️ update types for theme file * feat(variant): ✨ add base `lib` variant (#32) * test(avatar): added avatar image loading/error tests (#27) * feat(avatar): initial avatar api * feat(avatar): added badge & fallback support both * chore: remove rfc file * chore: remove extra div layer * chore: types refactor & export all types * feat(avatar): added initial AvatarGroup * feat(avatar): added AvatarGroup component * refactor(avatar): extracted out AvatarImage * chore: added tooltip storybook to avatar * test(avatar): added test for avatar component * test(avatar): added test for AvatarGroup * style(avatar): match avatar size with figma file * chore(avatar): fix avatar icon prop * feat(avatar): added responsive badges and statuses * test(avatar): added avatar image load tests * chore: cleanups * test: added common test utils (#29) * test: added a11y test util * chore: test naming change * test: improved & extracted out mockImage * feat(variant): ✨ add before variant * feat(stack): ✨ stack with other variants * feat(variants): ✨ add missing variants with proper variant order * refactor(variants): ✨ use the base variants in the themes with pseudo classes * chore: theme css fixes * refactor(variants): ♻️ simplify config file * refactor(override): ♻️ remove overrides & fix tests * refactor(config): ♻️ remove attention seeking comments Co-authored-by: Anurag Hazra <[email protected]> * feat(button): ✨ improved the button with latest design * fix(scripts): 🐛 remove scripts * build(purge): 💚 add purge to the storybook * Improved storybook performance & migrate to forwardRefSimple (#33) * chore: improved storybook performance * chore: migrate rest of the components to forwardRefAsSimple * chore: added jsdoc comments in forwardRefWithAsSimple * build(purge): 💚 fix storybook missing styles * feat: added support for typesafe theming (#34) * feat: added support for typesafe theming * chore: global namespace instead of local, migrated all components to use getThemeValue * chore: added MergeTheme utility * feat: added theme preset support (#35) * feat: theme presert support for end users * chore: use generics to get the tailwind type from userland * chore: resolve default tailwindconfig from userland * feat: improved preset support * chore: fix test utils render types * chore: added tailwind default autocomplete support in preset * chore: migrate components to forwardRefWithAs * build(purge): 💚 update purge & improve variant generation * style(tag): matched tag styles to figma file * chore(deps): ⬆️ update deps & refactor storybook preview * test(icon): added test for Icon (#36) * test(icon): added tests for icon * chore: update snapshots * test: removed snapshot tests * build(styles): 💚 fix build by moving tailwind css to src Co-authored-by: Navin <[email protected]> Co-authored-by: Anurag <[email protected]>
adaptui · Jan 18, 2021 · 9ed0473 · 9ed0473 · vercel · Jan 18, 2021
1 parent 3ea2456
commit 9ed0473
Show file tree

Hide file tree

Showing 73 changed files with 2,927 additions and 9,134 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,4 +1,7 @@
 module.exports = {
-  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  stories: ["../src/**/stories/*.stories.@(ts|tsx)"],
+  addons: ["@storybook/addon-essentials"],
+  typescript: {
+    reactDocgen: false,
+  },
 };
diff --git a/.storybook/postcss.config.js b/.storybook/postcss.config.js
@@ -1,26 +1,3 @@
-const path = require("path");
-const scopify = require("postcss-scopify");
-const { kebabCase } = require("lodash");
-
-function addIdScope() {
-  return root => {
-    const filename = root.source.input.file;
-
-    const isTailwind = path.basename(path.dirname(filename)) === "tailwind";
-    if (isTailwind) return scopify("#tailwind")(root);
-
-    const basename = path.basename(filename, ".css");
-    const id = kebabCase(basename);
-    return scopify(`#${id}`)(root);
-  };
-}
-
 module.exports = {
-  exec: true,
-  plugins: [
-    require("postcss-import"),
-    require("tailwindcss"),
-    require("autoprefixer"),
-    addIdScope(),
-  ],
+  plugins: [require("tailwindcss"), require("autoprefixer")],
 };
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,12 +1,19 @@
-import { kebabCase } from "lodash";
+import "../src/button/stories/style.css";
+import tailwindConfig from "../tailwind.config";
+import { RenderlesskitProvider } from "../src/theme";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
 };
 
 export const decorators = [
   (Story, context) => {
-    document.body.id = kebabCase(context.kind);
-    return <Story />;
+    return (
+      <RenderlesskitProvider tailwindConfig={tailwindConfig}>
+        <div className="font-sans">
+          <Story />
+        </div>
+      </RenderlesskitProvider>
+    );
   },
 ];
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -1,8 +1,24 @@
 const path = require("path");
 
 module.exports = ({ config }) => {
+  // possible optimizations
+  /* 
+  config.optimization = {
+    splitChunks: {
+      chunks: "all",
+      minSize: 30 * 1024, // 30KB
+      maxSize: 1024 * 1024, // 1MB
+    },
+    runtimeChunk: true,
+    removeAvailableModules: false,
+    removeEmptyChunks: true,
+  };
+  */
+
   config.module.rules.push({
     test: /\.css$/,
+    exclude: /node_modules/,
+    include: path.resolve(process.cwd(), "src"),
     use: [
       {
         loader: require.resolve("postcss-loader"),

diff --git a/package.json b/package.json
@@ -37,17 +37,18 @@
     "commit": "gacp",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate",
-    "eject": "react-scripts eject",
     "format": "prettier --write \"./**/*.{js,ts,css,less,json,md,html,yml,yaml,pcss,jsx,tsx}\"",
     "format:package": "sort-package-json",
+    "generateTailwindProperties": "node ./scripts/generate-tailwind-properties.js",
     "lint": "eslint src --ext .tsx,.ts,.jsx,.js",
     "prepublishOnly": "yarn test && yarn build",
     "release": "git add . && standard-version -a",
     "postrelease": "concurrently yarn:release:*",
     "release:github": "conventional-github-releaser -p angular",
     "release:tags": "git push --follow-tags origin main",
     "storybook": "start-storybook -p 6006",
-    "test": "jest --config ./jest.config.ts --no-cache"
+    "test": "jest --config ./jest.config.ts --no-cache",
+    "typecheck": "tsc --noEmit --project tsconfig.prod.json"
   },
   "browserslist": {
     "production": [
@@ -63,36 +64,36 @@
   },
   "dependencies": {
     "@renderlesskit/react": "^0.2.0",
-    "reakit": "^1.3.2",
-    "tailwind-override": "^0.0.6"
+    "deepmerge": "^4.2.2",
+    "reakit": "^1.3.4"
   },
   "devDependencies": {
     "@babel/cli": "7.12.10",
     "@babel/core": "^7.12.10",
     "@babel/plugin-proposal-class-properties": "7.12.1",
-    "@babel/preset-env": "7.12.10",
+    "@babel/preset-env": "7.12.11",
     "@babel/preset-react": "7.12.10",
     "@babel/preset-typescript": "7.12.7",
     "@chakra-ui/babel-plugin": "1.0.0",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@storybook/addon-actions": "^6.1.11",
-    "@storybook/addon-essentials": "^6.1.11",
-    "@storybook/addon-links": "^6.1.11",
-    "@storybook/react": "^6.1.11",
-    "@testing-library/dom": "^7.29.0",
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.2",
-    "@testing-library/react-hooks": "^3.7.0",
+    "@storybook/addon-actions": "^6.1.14",
+    "@storybook/addon-essentials": "^6.1.14",
+    "@storybook/addon-links": "^6.1.14",
+    "@storybook/react": "^6.1.14",
+    "@testing-library/dom": "^7.29.4",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.3",
+    "@testing-library/react-hooks": "^5.0.0",
     "@testing-library/user-event": "^12.6.0",
-    "@types/jest": "^26.0.19",
+    "@types/jest": "^26.0.20",
     "@types/jest-axe": "^3.5.1",
-    "@types/node": "^14.14.13",
+    "@types/node": "^14.14.21",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/testing-library__jest-dom": "^5.9.5",
-    "@typescript-eslint/eslint-plugin": "^4.9.1",
-    "@typescript-eslint/parser": "^4.9.1",
+    "@typescript-eslint/eslint-plugin": "^4.13.0",
+    "@typescript-eslint/parser": "^4.13.0",
     "all-contributors-cli": "^6.19.0",
     "autoprefixer": "9.8.6",
     "babel-eslint": "^10.1.0",
@@ -102,35 +103,33 @@
     "conventional-github-releaser": "^3.1.5",
     "cross-env": "^7.0.3",
     "date-fns": "^2.16.1",
-    "eslint": "^7.15.0",
-    "eslint-config-prettier": "^7.0.0",
+    "eslint": "^7.18.0",
+    "eslint-config-prettier": "^7.1.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^24.1.3",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.3.0",
-    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-testing-library": "^3.10.1",
     "gacp": "^2.10.2",
-    "husky": "^4.3.6",
+    "husky": "^4.3.8",
     "jest": "^26.6.3",
     "jest-axe": "^4.1.0",
     "lint-staged": "^10.5.3",
     "lodash": "^4.17.20",
     "postcss": "^7.0.35",
-    "postcss-import": "^12.0.1",
-    "postcss-scopify": "^0.1.9",
     "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-icons": "^4.1.0",
     "reakit-test-utils": "^0.15.1",
     "rimraf": "^3.0.2",
-    "sort-package-json": "^1.48.0",
-    "standard-version": "^9.0.0",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
+    "sort-package-json": "^1.48.1",
+    "standard-version": "^9.1.0",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@2.0.2",
     "ts-node": "^9.1.1",
     "typescript": "^4.1.3"
   },