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 }) => ( +