From f31c76492d513b038b8767ca74a6ffd79a39dee6 Mon Sep 17 00:00:00 2001 From: TheoryOfNekomata Date: Sun, 15 Aug 2021 13:06:22 +0800 Subject: [PATCH] Migrate to pridepack, reorganize documentation The build system has been migrated from rollup to pridepack, and the propTypes for the components have been deprecated, as the prop typing is now done in TypeScript type declarations. The documentation is in the process of migration from Next to Storybook. Issues with docgen remain for components with forwarded refs. --- .env.example | 9 - .../src/components/Header/Header.tsx | 3 +- .../src/components/Sidebar/Sidebar.tsx | 3 +- .../src/pages/components/TextInput.mdx | 6 +- packages/react-common/.eslintrc | 9 + packages/react-common/.gitignore | 107 + .../react-common/.npmignore | 1 - packages/react-common/.storybook/main.js | 22 + .../react-common/.storybook/preview-head.html | 5 + packages/react-common/.storybook/preview.js | 19 + LICENSE => packages/react-common/LICENSE | 0 README.md => packages/react-common/README.md | 0 .../docs/00-introduction.stories.mdx | 9 + .../react-common/docs/01-theming.stories.mdx | 100 + .../react-common/global.d.ts | 2 +- packages/react-common/package.json | 78 + packages/react-common/pridepack.json | 6 + .../src/components/Button/Button.stories.tsx | 95 + .../src/components/Button/Button.test.tsx | 2 +- .../Button/{Button.tsx => index.tsx} | 145 +- .../components/Checkbox/Checkbox.stories.tsx | 56 + .../src/components/Checkbox/Checkbox.test.tsx | 2 +- .../Checkbox/{Checkbox.tsx => index.tsx} | 132 +- .../src/components/Icon/Icon.stories.tsx | 42 + .../src/components/Icon/Icon.test.tsx | 2 +- .../components/Icon/{Icon.tsx => index.tsx} | 24 +- .../MultilineTextInput/TextInput.test.tsx | 136 + .../index.tsx} | 132 +- .../RadioButton/RadioButton.stories.tsx | 74 + .../RadioButton/RadioButton.test.tsx | 2 +- .../{RadioButton.tsx => index.tsx} | 128 +- .../src/components/Select/Select.stories.tsx | 181 + .../src/components/Select/Select.test.tsx | 2 +- .../Select/{Select.tsx => index.tsx} | 193 +- .../src/components/Slider/Slider.test.tsx | 2 +- .../Slider/{Slider.tsx => index.tsx} | 0 .../TextInput/TextInput.stories.tsx | 125 + .../components/TextInput/TextInput.test.tsx | 30 +- .../src/components/TextInput/index.tsx | 322 + packages/react-common/src/index.ts | 25 +- .../src/stories/Button.stories.tsx | 37 + packages/react-common/src/stories/Button.tsx | 48 + .../src/stories/Header.stories.tsx | 19 + packages/react-common/src/stories/Header.tsx | 47 + .../src/stories/Introduction.stories.mdx | 211 + .../react-common/src/stories/Page.stories.tsx | 22 + packages/react-common/src/stories/Page.tsx | 67 + .../src/stories/assets/code-brackets.svg | 1 + .../src/stories/assets/colors.svg | 1 + .../src/stories/assets/comments.svg | 1 + .../src/stories/assets/direction.svg | 1 + .../react-common/src/stories/assets/flow.svg | 1 + .../src/stories/assets/plugin.svg | 1 + .../react-common/src/stories/assets/repo.svg | 1 + .../src/stories/assets/stackalt.svg | 1 + packages/react-common/src/stories/button.css | 30 + packages/react-common/src/stories/header.css | 26 + packages/react-common/src/stories/page.css | 69 + packages/react-common/test/index.test.tsx | 13 + packages/react-common/tsconfig.eslint.json | 21 + packages/react-common/tsconfig.json | 21 + packages/react-common/yarn.lock | 12043 ++++++++++++++++ rollup.config.js | 23 - 63 files changed, 14427 insertions(+), 509 deletions(-) delete mode 100644 .env.example create mode 100644 packages/react-common/.eslintrc create mode 100644 packages/react-common/.gitignore rename .npmignore => packages/react-common/.npmignore (91%) create mode 100644 packages/react-common/.storybook/main.js create mode 100644 packages/react-common/.storybook/preview-head.html create mode 100644 packages/react-common/.storybook/preview.js rename LICENSE => packages/react-common/LICENSE (100%) rename README.md => packages/react-common/README.md (100%) create mode 100644 packages/react-common/docs/00-introduction.stories.mdx create mode 100644 packages/react-common/docs/01-theming.stories.mdx rename global.d.ts => packages/react-common/global.d.ts (51%) create mode 100644 packages/react-common/package.json create mode 100644 packages/react-common/pridepack.json create mode 100644 packages/react-common/src/components/Button/Button.stories.tsx rename packages/react-common/src/components/Button/{Button.tsx => index.tsx} (54%) create mode 100644 packages/react-common/src/components/Checkbox/Checkbox.stories.tsx rename packages/react-common/src/components/Checkbox/{Checkbox.tsx => index.tsx} (56%) create mode 100644 packages/react-common/src/components/Icon/Icon.stories.tsx rename packages/react-common/src/components/Icon/{Icon.tsx => index.tsx} (70%) create mode 100644 packages/react-common/src/components/MultilineTextInput/TextInput.test.tsx rename packages/react-common/src/components/{TextInput/TextInput.tsx => MultilineTextInput/index.tsx} (72%) create mode 100644 packages/react-common/src/components/RadioButton/RadioButton.stories.tsx rename packages/react-common/src/components/RadioButton/{RadioButton.tsx => index.tsx} (58%) create mode 100644 packages/react-common/src/components/Select/Select.stories.tsx rename packages/react-common/src/components/Select/{Select.tsx => index.tsx} (58%) rename packages/react-common/src/components/Slider/{Slider.tsx => index.tsx} (100%) create mode 100644 packages/react-common/src/components/TextInput/TextInput.stories.tsx create mode 100644 packages/react-common/src/components/TextInput/index.tsx create mode 100644 packages/react-common/src/stories/Button.stories.tsx create mode 100644 packages/react-common/src/stories/Button.tsx create mode 100644 packages/react-common/src/stories/Header.stories.tsx create mode 100644 packages/react-common/src/stories/Header.tsx create mode 100644 packages/react-common/src/stories/Introduction.stories.mdx create mode 100644 packages/react-common/src/stories/Page.stories.tsx create mode 100644 packages/react-common/src/stories/Page.tsx create mode 100644 packages/react-common/src/stories/assets/code-brackets.svg create mode 100644 packages/react-common/src/stories/assets/colors.svg create mode 100644 packages/react-common/src/stories/assets/comments.svg create mode 100644 packages/react-common/src/stories/assets/direction.svg create mode 100644 packages/react-common/src/stories/assets/flow.svg create mode 100644 packages/react-common/src/stories/assets/plugin.svg create mode 100644 packages/react-common/src/stories/assets/repo.svg create mode 100644 packages/react-common/src/stories/assets/stackalt.svg create mode 100644 packages/react-common/src/stories/button.css create mode 100644 packages/react-common/src/stories/header.css create mode 100644 packages/react-common/src/stories/page.css create mode 100644 packages/react-common/test/index.test.tsx create mode 100644 packages/react-common/tsconfig.eslint.json create mode 100644 packages/react-common/tsconfig.json create mode 100644 packages/react-common/yarn.lock delete mode 100644 rollup.config.js diff --git a/.env.example b/.env.example deleted file mode 100644 index 16c8890..0000000 --- a/.env.example +++ /dev/null @@ -1,9 +0,0 @@ -# If we are using TypeScript? -DOCZ_TYPESCRIPT= - -# Base path of the routes -DOCZ_BASE= - -# Port where Docz runs -DOCZ_PORT= - diff --git a/packages/react-common-docs/src/components/Header/Header.tsx b/packages/react-common-docs/src/components/Header/Header.tsx index db6db96..a311c96 100644 --- a/packages/react-common-docs/src/components/Header/Header.tsx +++ b/packages/react-common-docs/src/components/Header/Header.tsx @@ -5,7 +5,6 @@ import unified from 'unified' import parse from 'remark-parse' import remark2react from 'remark-react' import docgen from '../../docgen.json' -import pkg from '../../../../../package.json' const propTypes = { of: PropTypes.string, @@ -35,7 +34,7 @@ const Header: React.FC = ({ of: ofAttr }) => { - {docs.displayName} | {pkg['title'] || pkg.name} + {docs.displayName} | {process.env.NEXT_PUBLIC_APP_TITLE} diff --git a/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx b/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx index ad8dc26..082add4 100644 --- a/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx +++ b/packages/react-common-docs/src/components/Sidebar/Sidebar.tsx @@ -1,7 +1,6 @@ import * as React from 'react' import * as PropTypes from 'prop-types' import { Icon } from '../../../../react-common/src' -import pkg from '../../../../../package.json' import styled from 'styled-components' import Link from 'next/link' import Nav from '../Nav/Nav' @@ -202,7 +201,7 @@ const Sidebar: React.FC = ({ initialTheme={initialTheme} /> diff --git a/packages/react-common-docs/src/pages/components/TextInput.mdx b/packages/react-common-docs/src/pages/components/TextInput.mdx index 9632a02..34cef03 100644 --- a/packages/react-common-docs/src/pages/components/TextInput.mdx +++ b/packages/react-common-docs/src/pages/components/TextInput.mdx @@ -10,7 +10,7 @@ import Header from '../../components/Header/Header'
I am and I live in . @@ -51,7 +51,7 @@ some content that is best displayed outside the component instead of putting in + :root { + font-family: var(--font-family-base, sans-serif); + } + diff --git a/packages/react-common/.storybook/preview.js b/packages/react-common/.storybook/preview.js new file mode 100644 index 0000000..c93d479 --- /dev/null +++ b/packages/react-common/.storybook/preview.js @@ -0,0 +1,19 @@ + +export const parameters = { + actions: { argTypesRegex: "^on[A-Z].*" }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + backgrounds: { + grid: { + cellSize: 16, + opacity: 0.5, + cellAmount: 5, + offsetX: 16, // default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded' + offsetY: 16, // default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded' + }, + }, + }, +} diff --git a/LICENSE b/packages/react-common/LICENSE similarity index 100% rename from LICENSE rename to packages/react-common/LICENSE diff --git a/README.md b/packages/react-common/README.md similarity index 100% rename from README.md rename to packages/react-common/README.md diff --git a/packages/react-common/docs/00-introduction.stories.mdx b/packages/react-common/docs/00-introduction.stories.mdx new file mode 100644 index 0000000..c4fb9cb --- /dev/null +++ b/packages/react-common/docs/00-introduction.stories.mdx @@ -0,0 +1,9 @@ +import { Meta } from '@storybook/addon-docs/blocks'; +import Readme from '../README.md'; + + + + diff --git a/packages/react-common/docs/01-theming.stories.mdx b/packages/react-common/docs/01-theming.stories.mdx new file mode 100644 index 0000000..05a3419 --- /dev/null +++ b/packages/react-common/docs/01-theming.stories.mdx @@ -0,0 +1,100 @@ +import { Meta } from '@storybook/addon-docs' + + + + +# Theming + +The components can be styled through CSS custom properties, meaning browsers that support custom properties are expected +to support theming for Tesseract components. It is a huge advantage for Tesseract to have used this feature because of +its ease of use upon application, compared to using preprocessors such as Sass, which employs its own language as well +as potentially increasing the size of the bundled stylesheets. + +## Properties + +Tesseract uses a few properties as much as possible in order to produce lightweight themes. + +### Colors + +#### `color-accent` + +Default value: `blue` + +The accent color of the components. Used to designate components that can be interacted with. + +#### `color-fg` + +Default value: `black` + +The reference color for text, borders, and anything in the foreground. + +#### `color-bg` + +Default value: `white` + +The reference color for anything in the background. + +#### `color-active` + +Default value: `Highlight` + +The version of the accent color for activated (i.e. clicked or focused) components. + +### Fonts + +#### `font-family-base` + +Default value: `sans-serif` + +The base font family. Used for body text. + +## Usage + +You should have a global theme rule applied to `:root`. Below is an example of using a global theme to apply styles: + +```css title=theme.css +:root { + /* This will be our reference background color */ + --color-negative: #eee; + /* This will be our reference foreground color */ + --color-positive: #222; + --color-accent: #ba6a9c; + --color-active: #f90; + --font-family-body: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui; +} + +@media (prefers-color-scheme: dark) { + /* Dark mode, because why not? */ + :root { + --color-negative: #222; + --color-positive: #eee; + --color-accent: #C78AB3; + } +} + +:root { + /* We use our reference colors to set global fg and bg, but we could apply them to other elements later on. + * + * See below for example usage. + */ + --color-bg: var(--color-negative, white); + --color-fg: var(--color-positive, black); + + background-color: var(--color-bg); + color: var(--color-fg); + font-family: var(--font-family-body, sans-serif), sans-serif; +} + +/* + * Here is an example usage of overriding bg and fg. + */ +.inverted-colors { + --color-bg: var(--color-positive, black); + --color-fg: var(--color-negative, white); +} +``` + +Since the components use the same styles, the created theme will be applied to them as well. diff --git a/global.d.ts b/packages/react-common/global.d.ts similarity index 51% rename from global.d.ts rename to packages/react-common/global.d.ts index 9f022a8..69bb7e1 100644 --- a/global.d.ts +++ b/packages/react-common/global.d.ts @@ -1,3 +1,3 @@ import 'jest-enzyme' import 'jest-extended' -import './utilities/jest/extensions' +import '../../utilities/jest/extensions' diff --git a/packages/react-common/package.json b/packages/react-common/package.json new file mode 100644 index 0000000..6eeafea --- /dev/null +++ b/packages/react-common/package.json @@ -0,0 +1,78 @@ +{ + "version": "0.5.0", + "types": "dist/types/index.d.ts", + "main": "dist/cjs/index.js", + "module": "dist/esm/index.js", + "exports": { + "require": "./dist/cjs/index.js", + "import": "./dist/esm/index.js" + }, + "files": [ + "dist", + "src" + ], + "engines": { + "node": ">=10" + }, + "author": "TheoryOfNekomata ", + "license": "MIT", + "private": false, + "bugs": { + "url": "https://code.modal.sh/tesseract-design/react-common/issues" + }, + "keywords": [ + "components", + "react" + ], + "name": "@tesseract-design/react-common", + "homepage": "https://make.modal.sh/tesseract/web/react/common", + "title": "React Common", + "org": "Tesseract Design", + "description": "Common front-end components for Web using the Tesseract design system, written in React.", + "repository": "https://code.modal.sh/tesseract-design/react-common.git", + "devDependencies": { + "@babel/core": "^7.15.0", + "@storybook/addon-actions": "^6.3.7", + "@storybook/addon-essentials": "^6.3.7", + "@storybook/addon-links": "^6.3.7", + "@storybook/react": "^6.3.7", + "@testing-library/jest-dom": "^5.14.1", + "@testing-library/react": "^12.0.0", + "@testing-library/react-hooks": "^7.0.1", + "@types/jest": "^27.0.1", + "@types/node": "^16.6.1", + "@types/react": "^17.0.17", + "@types/styled-components": "^5.1.12", + "babel-loader": "^8.2.2", + "eslint": "^7.32.0", + "eslint-config-lxsmnsyc": "^0.2.3", + "pridepack": "^0.10.0", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-test-renderer": "^17.0.2", + "styled-components": "^5.3.0", + "tslib": "^2.3.1", + "typescript": "^4.3.5" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0", + "styled-components": "^5.3.0" + }, + "scripts": { + "prepublish": "pridepack clean && pridepack build", + "build": "pridepack build", + "type-check": "pridepack check", + "lint": "pridepack lint", + "test": "pridepack test --passWithNoTests", + "clean": "pridepack clean", + "watch": "pridepack watch", + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook" + }, + "dependencies": { + "@reach/slider": "^0.16.0", + "pascal-case": "^3.1.2", + "react-feather": "^2.0.9" + } +} diff --git a/packages/react-common/pridepack.json b/packages/react-common/pridepack.json new file mode 100644 index 0000000..7bd5180 --- /dev/null +++ b/packages/react-common/pridepack.json @@ -0,0 +1,6 @@ +{ + "jest": { + "testEnvironment": "jsdom" + }, + "target": "es2017" +} \ No newline at end of file diff --git a/packages/react-common/src/components/Button/Button.stories.tsx b/packages/react-common/src/components/Button/Button.stories.tsx new file mode 100644 index 0000000..9bca4f1 --- /dev/null +++ b/packages/react-common/src/components/Button/Button.stories.tsx @@ -0,0 +1,95 @@ +import * as React from 'react' +import { Button, ButtonElement, ButtonSize, ButtonVariant, Props } from '.' +import { Meta, Story } from '@storybook/react' + +const meta: Meta = { + title: 'components/Button', + component: Button, + argTypes: { onClick: { action: 'clicked' } }, +} + +const Template: Story = ({ ref, ...args }) => ( +