Merge pull request #4 from chenz24/feat/components

Add components package and setup storybook and unit testing

configs/jest/enzyme.setup.js

@@ -0,0 +1,8 @@
+const Enzyme = require('enzyme');
+const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
+const React = require('react');
+
+// Fix broken layout effects on testing environments
+React.useLayoutEffect = React.useEffect;
+
+Enzyme.configure({ adapter: new Adapter() });

configs/jest/jsdom.mocks.js

@@ -0,0 +1,13 @@
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});

configs/storybook/main.js

@@ -0,0 +1,31 @@
+/* eslint-disable no-param-reassign */
+const path = require('path');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin').default;
+
+module.exports = {
+  stories: [
+    path.resolve(__dirname, '../../packages/**/*.story.@(ts|tsx)').replace(/\\/g, '/'),
+    // path.resolve(__dirname, './stories.tsx').replace(/\\/g, '/'),
+  ],
+  addons: ['storybook-addon-turbo-build', '@storybook/addon-docs'],
+  typescript: {
+    reactDocgen: false,
+  },
+  webpackFinal: async (config) => {
+    config.resolve = {
+      ...config.resolve,
+      plugins: [
+        ...(config.resolve.plugins || []),
+        new TsconfigPathsPlugin({
+          extensions: ['.ts', '.tsx', '.js'],
+          configFile: path.join(__dirname, '../../tsconfig.json'),
+        }),
+      ],
+    };
+
+    // Turn off docgen plugin as it breaks bundle with displayName
+    config.plugins.pop();
+
+    return config;
+  },
+};

configs/storybook/preview-head.html

@@ -0,0 +1,12 @@
+<link rel="preconnect" href="https://fonts.gstatic.com" />
+
+<link
+  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
+  rel="stylesheet"
+/>
+
+<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link
+  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,500&display=swap"
+  rel="stylesheet"
+/>

configs/storybook/preview.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CssBaseline, KubedConfigProvider } from '../../packages/components/src/index';
+
+export const parameters = {};
+
+export const decorators = [
+  (Story) => (
+    <KubedConfigProvider themeType="light">
+      <CssBaseline />
+      <Story />
+    </KubedConfigProvider>
+  ),
+];

jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  transform: {
+    // https://github.com/aelbore/esbuild-jest/issues/21
+    '^.+\\.tsx?$': '@sucrase/jest-plugin',
+  },
+  testMatch: ['**/__tests__/**/*.ts?(x)', '**/?(*.)+(spec|test).ts?(x)'],
+  setupFilesAfterEnv: [
+    './configs/jest/enzyme.setup.js',
+    './configs/jest/jsdom.mocks.js',
+  ],
+  moduleNameMapper: {
+    '@kubed/(.*)': '<rootDir>/packages/$1/src',
+  },
+};

packages/components/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@kubed/components",
+  "description": "React components library for KubeSphere console.",
+  "version": "0.0.1",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "browser": "lib/index.umd.js",
+  "types": "lib/src/index.d.ts",
+  "license": "MIT",
+  "sideEffects": false,
+  "repository": {
+    "url": "https://github.com/kubesphere/kube-design.git",
+    "type": "git",
+    "directory": "packages/components"
+  },
+  "peerDependencies": {
+    "@kubed/hooks": "0.0.1",
+    "@kubed/icons": "0.0.1",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "react-is": "^17.0.2"
+  },
+  "dependencies": {
+    "@tippyjs/react": "^4.2.5",
+    "clsx": "^1.1.1",
+    "react-textarea-autosize": "^8.3.2",
+    "react-transition-group": "^4.4.2",
+    "react-feather": "^2.0.9"
+  },
+  "devDependencies": {
+    "@kubed/tests": "0.0.1"
+  }
+}

packages/components/src/Button/Button.story.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Add } from '@kubed/icons';
+import { Group } from '../Group/Group';
+import { Button } from './Button';
+
+storiesOf('@kubed/components/Button', module)
+  .addParameters({ component: Button })
+  .add('Demos', () => (
+    <Group spacing="xl">
+      <Button variant="filled" color="secondary" shadow radius="xl">
+        KubeSphere
+      </Button>
+      <Button variant="filled" color="default" radius="xl">
+        KubeSphere
+      </Button>
+      <Button variant="text" radius="xl">
+        KubeSphere
+      </Button>
+      <Button variant="filled" color="default" radius="xl" disabled>
+        KubeSphere
+      </Button>
+    </Group>
+  ));
+
+storiesOf('@kubed/components/Button', module).add('Color', () => (
+  <Button variant="filled" color="warning" shadow radius="xl">
+    KubeSphere
+  </Button>
+));
+
+storiesOf('@kubed/components/Button', module).add('Icon', () => (
+  <Button variant="filled" color="default" radius="xl" leftIcon={<Add size={16} />}>
+    KubeSphere
+  </Button>
+));