├── .eslintignore ├── site ├── README.md ├── next-env.d.ts ├── manifest.json ├── static │ └── favicons │ │ ├── favicon.ico │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── apple-touch-icon.png │ │ └── safari-pinned-tab.svg ├── next.config.js ├── tsconfig.json ├── .gitignore ├── pages │ ├── _app.tsx │ └── index.tsx ├── package.json ├── components │ └── HtmlHead.tsx └── build-manifest.js ├── babel.config.js ├── .gitignore ├── design-system └── textfield │ ├── CHANGELOG.md │ ├── package.json │ └── src │ └── index.tsx ├── elemental-ui ├── radio │ ├── package.json │ └── src │ │ └── index.tsx ├── reset │ ├── package.json │ └── src │ │ └── index.tsx ├── button │ ├── package.json │ └── src │ │ └── index.tsx ├── checkbox │ ├── package.json │ └── src │ │ └── index.tsx ├── textarea │ ├── package.json │ └── src │ │ └── index.tsx └── textinput │ ├── package.json │ └── src │ └── index.tsx ├── .changeset ├── README.md └── config.js ├── tsconfig.json ├── TODO.md ├── .eslintrc.json ├── LICENSE ├── .circleci └── config.yml ├── package.json └── README.md /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist -------------------------------------------------------------------------------- /site/README.md: -------------------------------------------------------------------------------- 1 | # Design System Website -------------------------------------------------------------------------------- /site/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /site/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "@elemental/textfield", 4 | "@unstyled/textfield" 5 | ] 6 | } -------------------------------------------------------------------------------- /site/static/favicons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/design-systems-framework/design-system/HEAD/site/static/favicons/favicon.ico -------------------------------------------------------------------------------- /site/static/favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/design-systems-framework/design-system/HEAD/site/static/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /site/static/favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/design-systems-framework/design-system/HEAD/site/static/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /site/static/favicons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/design-systems-framework/design-system/HEAD/site/static/favicons/apple-touch-icon.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@babel/preset-env', 4 | '@babel/preset-react', 5 | '@babel/preset-typescript', 6 | ], 7 | }; 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | 6 | # misc 7 | .DS_Store 8 | .env 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | 13 | dist/ 14 | -------------------------------------------------------------------------------- /design-system/textfield/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @design-system/textfield 2 | 3 | ## 0.1.2 4 | 5 | ### Patch Changes 6 | 7 | - af4c756: Convert to TypeScript 8 | 9 | ## 0.1.1 10 | 11 | ### Patch Changes 12 | 13 | - 10564ac: Change to test release automation 14 | -------------------------------------------------------------------------------- /site/next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | webpack(config, options) { 3 | config.module.rules.push({ 4 | test: /\.+(js|jsx|ts|tsx)$/, 5 | use: options.defaultLoaders.babel, 6 | exclude: [/node_modules/], 7 | }); 8 | return config; 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /site/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // next creates a tsconfig even if there's one in a higher directory 3 | "extends": "../tsconfig.json", 4 | "compilerOptions": { 5 | // it also sets things so we need to do this 6 | "allowJs": false, 7 | "strict": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /site/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | 6 | # production 7 | /build 8 | /dist 9 | /.next 10 | 11 | # misc 12 | .DS_Store 13 | .env 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | -------------------------------------------------------------------------------- /site/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import App, { Container } from 'next/app'; 3 | 4 | export default class CustomApp extends App { 5 | render() { 6 | const { Component, pageProps } = this.props; 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /site/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@design-system/site", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next", 7 | "build": "next build", 8 | "start": "next start" 9 | }, 10 | "dependencies": { 11 | "glob": "^7.1.3", 12 | "glob-promise": "^3.4.0", 13 | "next": "^9.0.2", 14 | "react": "^16.8.9", 15 | "react-dom": "^16.8.3" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /elemental-ui/radio/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@elemental-ui/radio", 3 | "version": "0.0.1", 4 | "main": "dist/radio.cjs.js", 5 | "module": "dist/radio.esm.js", 6 | "author": "Thinkmill", 7 | "license": "MIT", 8 | "dependencies": { 9 | "@babel/runtime": "^7.4.3", 10 | "@emotion/core": "^10.0.7", 11 | "@types/react": "^16.8.23" 12 | }, 13 | "peerDependencies": { 14 | "react": "^16.8.9" 15 | }, 16 | "devDependencies": { 17 | "react": "^16.8.9" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /elemental-ui/reset/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@elemental-ui/reset", 3 | "version": "0.0.1", 4 | "main": "dist/reset.cjs.js", 5 | "module": "dist/reset.esm.js", 6 | "author": "Thinkmill", 7 | "license": "MIT", 8 | "dependencies": { 9 | "@babel/runtime": "^7.4.3", 10 | "@emotion/core": "^10.0.7", 11 | "@types/react": "^16.8.23" 12 | }, 13 | "peerDependencies": { 14 | "react": "^16.8.9" 15 | }, 16 | "devDependencies": { 17 | "react": "^16.8.9" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /elemental-ui/button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@elemental-ui/button", 3 | "version": "0.0.1", 4 | "main": "dist/button.cjs.js", 5 | "module": "dist/button.esm.js", 6 | "author": "Thinkmill", 7 | "license": "MIT", 8 | "dependencies": { 9 | "@babel/runtime": "^7.4.3", 10 | "@emotion/core": "^10.0.7", 11 | "@types/react": "^16.8.23" 12 | }, 13 | "peerDependencies": { 14 | "react": "^16.8.9" 15 | }, 16 | "devDependencies": { 17 | "react": "^16.8.9" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /elemental-ui/checkbox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@elemental-ui/checkbox", 3 | "version": "0.0.1", 4 | "main": "dist/checkbox.cjs.js", 5 | "module": "dist/checkbox.esm.js", 6 | "author": "Thinkmill", 7 | "license": "MIT", 8 | "dependencies": { 9 | "@babel/runtime": "^7.4.3", 10 | "@emotion/core": "^10.0.7", 11 | "@types/react": "^16.8.23" 12 | }, 13 | "peerDependencies": { 14 | "react": "^16.8.9" 15 | }, 16 | "devDependencies": { 17 | "react": "^16.8.9" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /elemental-ui/textarea/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@elemental-ui/textarea", 3 | "version": "0.0.1", 4 | "main": "dist/textarea.cjs.js", 5 | "module": "dist/textarea.esm.js", 6 | "author": "Thinkmill", 7 | "license": "MIT", 8 | "dependencies": { 9 | "@babel/runtime": "^7.4.3", 10 | "@emotion/core": "^10.0.7", 11 | "@types/react": "^16.8.23" 12 | }, 13 | "peerDependencies": { 14 | "react": "^16.8.9" 15 | }, 16 | "devDependencies": { 17 | "react": "^16.8.9" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /elemental-ui/textinput/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@elemental-ui/textinput", 3 | "version": "0.0.1", 4 | "main": "dist/textinput.cjs.js", 5 | "module": "dist/textinput.esm.js", 6 | "author": "Thinkmill", 7 | "license": "MIT", 8 | "dependencies": { 9 | "@babel/runtime": "^7.4.3", 10 | "@emotion/core": "^10.0.7", 11 | "@types/react": "^16.8.23" 12 | }, 13 | "peerDependencies": { 14 | "react": "^16.8.9" 15 | }, 16 | "devDependencies": { 17 | "react": "^16.8.9" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /design-system/textfield/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@design-system/textfield", 3 | "version": "0.1.2", 4 | "main": "dist/textfield.cjs.js", 5 | "module": "dist/textfield.esm.js", 6 | "license": "MIT", 7 | "dependencies": { 8 | "@babel/runtime": "^7.4.3", 9 | "@emotion/core": "^10.0.7", 10 | "@types/react": "^16.8.23" 11 | }, 12 | "peerDependencies": { 13 | "react": "^16.8.9" 14 | }, 15 | "devDependencies": { 16 | "react": "^16.8.9", 17 | "react-dom": "^16.8.3" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works with mono-repos or single package repos to help you verion and release your code. You can find the full documentation for it [in our repository](https://github.com/changesets/changesets) 4 | 5 | We have a quick list of common questions to get you started engaging with this project in [our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md) 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "skipLibCheck": true, 6 | "forceConsistentCasingInFileNames": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "node", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve" 14 | }, 15 | "exclude": ["node_modules"], 16 | "include": ["./site/next-env.d.ts", "**/*.ts", "**/*.tsx"] 17 | } 18 | -------------------------------------------------------------------------------- /TODO.md: -------------------------------------------------------------------------------- 1 | # design-system 2 | 3 | ## TODO 4 | 5 | ### Infra: 6 | - [ ] Setup CI 7 | - [ ] Setup Netlify and integrate with CI 8 | - [ ] Setup build step for non website workspaces. 9 | - [ ] Integrate with change-sets 10 | - [ ] Setup initial dev workflow with Next.js 11 | - [ ] Setup dev loop external of Next.js site* 12 | 13 | ### Unstyled Components: 14 | - [ ] Button 15 | - [ ] Textfield 16 | - [ ] ??? 17 | ### Elemental Components: 18 | - [ ] Button 19 | - [ ] Textfield 20 | 21 | \* = probably not high priority till we decide to make this thing public) 22 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["standard", "standard-react", "prettier", "prettier/react"], 3 | "plugins": ["prettier"], 4 | "parser": "babel-eslint", 5 | "rules": { 6 | "prettier/prettier": "error", 7 | "react/prop-types": 0, 8 | "react/no-unused-prop-types": 0, 9 | "standard/computed-property-even-spacing": 0, 10 | "no-template-curly-in-string": 0, 11 | "camelcase": 0, 12 | "import/no-duplicates": 0, 13 | "import/no-unresolved": 2 14 | }, 15 | "env": { 16 | "browser": true 17 | }, 18 | "overrides": [ 19 | { 20 | "files": ["*.test.js", "**/__tests__/**"], 21 | "env": { 22 | "jest": true 23 | } 24 | } 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /site/components/HtmlHead.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Head from 'next/head'; 3 | 4 | type Props = { 5 | title: string; 6 | children?: React.ReactNode; 7 | }; 8 | 9 | export default ({ title = 'Design System™', children }: Props) => ( 10 | 11 | {title} 12 | 18 | 24 | 25 | {children} 26 | 27 | ); 28 | -------------------------------------------------------------------------------- /elemental-ui/reset/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Global, css } from '@emotion/core'; 3 | 4 | // TODO: Pull these font stacks from a theme package 5 | 6 | const resetCSS = css` 7 | html { 8 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 9 | 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 10 | 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; 11 | line-height: 1.5; 12 | } 13 | pre, 14 | code, 15 | kbd, 16 | samp { 17 | font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', 18 | monospace; 19 | } 20 | `; 21 | 22 | export default function Reset() { 23 | return ; 24 | } 25 | -------------------------------------------------------------------------------- /site/build-manifest.js: -------------------------------------------------------------------------------- 1 | const { workspaces } = require('../package.json'); 2 | const fs = require('fs'); 3 | const path = require('path'); 4 | const glob = require('glob-promise'); 5 | 6 | (async () => { 7 | try { 8 | const files = await Promise.all( 9 | workspaces.map(async key => { 10 | const globPath = path.resolve(__dirname, `../${key}`); 11 | if (key === 'site') return; 12 | const filePaths = await glob(globPath); 13 | return filePaths.map(filePath => { 14 | const { name } = require(path.resolve(filePath, './package.json')); 15 | return name; 16 | }); 17 | }) 18 | ); 19 | const formattedFiles = files 20 | .reduce((acc, curr) => acc.concat(curr), []) 21 | .filter(f => f); 22 | fs.writeFileSync( 23 | 'manifest.json', 24 | JSON.stringify({ files: formattedFiles }, null, 1) 25 | ); 26 | } catch (e) { 27 | console.error(e); 28 | } 29 | })(); 30 | -------------------------------------------------------------------------------- /site/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import HtmlHead from '../components/HtmlHead'; 3 | import Reset from '@elemental-ui/reset'; 4 | import Button from '@elemental-ui/button'; 5 | import Checkbox from '@elemental-ui/checkbox'; 6 | import Radio from '@elemental-ui/radio'; 7 | import Textarea from '@elemental-ui/textarea'; 8 | import TextInput from '@elemental-ui/textinput'; 9 | 10 | const Home = () => ( 11 | <> 12 | 13 | 14 |

Design System™

15 |

16 |

Button

17 | 18 |

Checkbox

19 | 20 | Check Me 21 |

Radio

22 | 23 | Check Me 24 |

Textarea

25 |

26 |     <h2>Text Input</h2>
27 |     <TextInput />
28 |   </>
29 | );
30 | 
31 | export default Home;
32 |

--------------------------------------------------------------------------------
/elemental-ui/textinput/src/index.tsx:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx } from '@emotion/core';
 3 | 
 4 | const defaultInputStyles = (state: Record<string, any>) => ({
 5 |   display: 'inline-block',
 6 | });
 7 | 
 8 | const defaults: Record<string, any> = {
 9 |   Input: {
10 |     component: (props: Record<string, any>) => <input type="text" {...props} />,
11 |     styles: defaultInputStyles,
12 |   },
13 | };
14 | 
15 | function getOverrides(key: string, overrides: Record<string, any> = {}) {
16 |   if (!overrides[key]) {
17 |     return defaults[key];
18 |   } else {
19 |     return {
20 |       ...defaults[key],
21 |       ...overrides[key],
22 |     };
23 |   }
24 | }
25 | 
26 | export interface TextInputProps {
27 |   overrides?: Record<string, any>;
28 | }
29 | 
30 | export default function Input({ overrides, ...props }: TextInputProps) {
31 |   const { styles, attributes, component: InputComponent } = getOverrides(
32 |     'Input',
33 |     overrides
34 |   );
35 |   return <InputComponent css={styles(props)} {...props} />;
36 | }
37 |

--------------------------------------------------------------------------------
/elemental-ui/textarea/src/index.tsx:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx } from '@emotion/core';
 3 | 
 4 | const defaultInputStyles = (state: Record<string, any>) => ({
 5 |   display: 'inline-block',
 6 | });
 7 | 
 8 | const defaults: Record<string, any> = {
 9 |   Input: {
10 |     component: (props: Record<string, any>) => (
11 |       <input type="textarea" {...props} />
12 |     ),
13 |     styles: defaultInputStyles,
14 |   },
15 | };
16 | 
17 | function getOverrides(key: string, overrides: Record<string, any> = {}) {
18 |   if (!overrides[key]) {
19 |     return defaults[key];
20 |   } else {
21 |     return {
22 |       ...defaults[key],
23 |       ...overrides[key],
24 |     };
25 |   }
26 | }
27 | 
28 | export interface TextAreaProps {
29 |   overrides?: Record<string, any>;
30 | }
31 | 
32 | export default function Input({ overrides, ...props }: TextAreaProps) {
33 |   const { styles, attributes, component: InputComponent } = getOverrides(
34 |     'Input',
35 |     overrides
36 |   );
37 |   return <InputComponent css={styles(props)} {...props} />;
38 | }
39 |

--------------------------------------------------------------------------------
/elemental-ui/button/src/index.tsx:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx } from '@emotion/core';
 3 | 
 4 | const defaultInputStyles = (state: Record<string, any>) => ({
 5 |   display: 'inline-block',
 6 | });
 7 | 
 8 | const defaults: Record<string, any> = {
 9 |   Input: {
10 |     component: (props: Record<string, any>) => <button {...props} />,
11 |     styles: defaultInputStyles,
12 |   },
13 | };
14 | 
15 | function getOverrides(key: string, overrides: Record<string, any> = {}) {
16 |   if (!overrides[key]) {
17 |     return defaults[key];
18 |   } else {
19 |     return {
20 |       ...defaults[key],
21 |       ...overrides[key],
22 |     };
23 |   }
24 | }
25 | 
26 | export interface ButtonProps {
27 |   overrides?: Record<string, any>;
28 | }
29 | 
30 | const Button: React.ComponentType<ButtonProps> = function Button({ overrides, ...props }: ButtonProps) {
31 |   const { styles, attributes, component: InputComponent } = getOverrides(
32 |     'Input',
33 |     overrides
34 |   );
35 |   return <InputComponent css={styles(props)} {...props} />;
36 | }
37 | 
38 | export default Button
39 |

--------------------------------------------------------------------------------
/elemental-ui/radio/src/index.tsx:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx } from '@emotion/core';
 3 | 
 4 | const defaultInputStyles = (state: Record<string, any>) => ({
 5 |   display: 'inline-block',
 6 | });
 7 | 
 8 | const defaults: Record<string, any> = {
 9 |   Input: {
10 |     component: (props: Record<string, any>) => (
11 |       <input type="radio" {...props} />
12 |     ),
13 |     styles: defaultInputStyles,
14 |   },
15 | };
16 | 
17 | function getOverrides(key: string, overrides: Record<string, any> = {}) {
18 |   if (!overrides[key]) {
19 |     return defaults[key];
20 |   } else {
21 |     return {
22 |       ...defaults[key],
23 |       ...overrides[key],
24 |     };
25 |   }
26 | }
27 | 
28 | export interface TextAreaProps extends React.AllHTMLAttributes<HTMLInputElement>{
29 |   overrides?: Record<string, any>;
30 | }
31 | 
32 | export default function Input({ overrides, ...props }: TextAreaProps) {
33 |   const { styles, attributes, component: InputComponent } = getOverrides(
34 |     'Input',
35 |     overrides
36 |   );
37 |   return <InputComponent css={styles(props)} {...props} />;
38 | }
39 |

--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Thinkmill Pty Ltd
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |

--------------------------------------------------------------------------------
/elemental-ui/checkbox/src/index.tsx:
--------------------------------------------------------------------------------
 1 | /** @jsx jsx */
 2 | import { jsx } from '@emotion/core';
 3 | 
 4 | const defaultInputStyles = (state: Record<string, any>) => ({
 5 |   display: 'inline-block',
 6 | });
 7 | 
 8 | const defaults: Record<string, any> = {
 9 |   Input: {
10 |     component: (props: Record<string, any>) => (
11 |       <input type="checkbox" {...props} />
12 |     ),
13 |     styles: defaultInputStyles,
14 |   },
15 | };
16 | 
17 | function getOverrides(key: string, overrides: Record<string, any> = {}) {
18 |   if (!overrides[key]) {
19 |     return defaults[key];
20 |   } else {
21 |     return {
22 |       ...defaults[key],
23 |       ...overrides[key],
24 |     };
25 |   }
26 | }
27 | 
28 | export interface TextAreaProps extends React.AllHTMLAttributes<HTMLInputElement>{
29 |   overrides?: Record<string, any>;
30 | }
31 | const Input: React.ComponentType<TextAreaProps> = function Input({ overrides, ...props }: TextAreaProps) {
32 |   const { styles, attributes, component: InputComponent } = getOverrides(
33 |     'Input',
34 |     overrides
35 |   );
36 |   return <InputComponent css={styles(props)} {...props} />;
37 | }
38 | 
39 | export default Input

--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | jobs:
 3 |   lint:
 4 |     docker:
 5 |       - image: circleci/node:10.6.0
 6 |     working_directory: ~/repo
 7 |     steps:
 8 |       - checkout
 9 |       - restore_cache:
10 |           keys:
11 |             - v2-dependencies-{{ checksum "yarn.lock" }}
12 |             # fallback to using the latest cache if no exact match is found
13 |             - v2-dependencies-
14 |       - run:
15 |           name: Install
16 |           command: yarn install --pure-lockfile
17 |       - run:
18 |           name: 'ESLint'
19 |           command: yarn eslint .
20 |   types:
21 |     docker:
22 |       - image: circleci/node:10.6.0
23 |     working_directory: ~/repo
24 |     steps:
25 |       - checkout
26 |       - restore_cache:
27 |           keys:
28 |             - v2-dependencies-{{ checksum "yarn.lock" }}
29 |             # fallback to using the latest cache if no exact match is found
30 |             - v2-dependencies-
31 |       - run:
32 |           name: Install
33 |           command: yarn install --pure-lockfile
34 |       - run:
35 |           name: 'Type Checking'
36 |           command: yarn tsc
37 | 
38 |   release:
39 |     docker:
40 |       - image: circleci/node:10.6.0
41 |     working_directory: ~/repo
42 |     steps:
43 |       - checkout
44 |       - restore_cache:
45 |           keys:
46 |             - v2-dependencies-{{ checksum "yarn.lock" }}
47 |             # fallback to using the latest cache if no exact match is found
48 |             - v2-dependencies-
49 |       - run:
50 |           name: Install
51 |           command: yarn install --pure-lockfile
52 |       - run:
53 |           name: 'Release'
54 |           command: yarn experimental-changesets-auto-release
55 | 
56 | workflows:
57 |   version: 2
58 |   test:
59 |     jobs:
60 |       - lint
61 |       - types
62 |   release:
63 |     jobs:
64 |       - release:
65 |           filters:
66 |             branches:
67 |               only: master
68 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@design-system/monorepo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "workspaces": [
 6 |     "elemental-ui/*",
 7 |     "design-system/*",
 8 |     "site"
 9 |   ],
10 |   "dependencies": {
11 |     "@babel/core": "^7.4.5",
12 |     "@babel/preset-env": "^7.4.5",
13 |     "@babel/preset-react": "^7.0.0",
14 |     "@babel/preset-typescript": "^7.3.3",
15 |     "@babel/runtime": "^7.4.3",
16 |     "@changesets/cli": "^1.2.0",
17 |     "@emotion/core": "^10.0.7",
18 |     "@mitchellhamilton/experimental-changesets-auto-release": "^0.0.2",
19 |     "babel-eslint": "^10.0.2",
20 |     "bolt-check": "^0.3.0",
21 |     "eslint": "^5.14.1",
22 |     "eslint-config-prettier": "^6.0.0",
23 |     "eslint-config-standard": "^12.0.0",
24 |     "eslint-config-standard-react": "^7.0.2",
25 |     "eslint-plugin-import": "^2.18.0",
26 |     "eslint-plugin-node": "^9.1.0",
27 |     "eslint-plugin-prettier": "^3.1.0",
28 |     "eslint-plugin-promise": "^4.2.1",
29 |     "eslint-plugin-react": "^7.14.2",
30 |     "eslint-plugin-standard": "^4.0.0",
31 |     "glob": "^7.1.3",
32 |     "glob-promise": "^3.4.0",
33 |     "next": "^9.0.2",
34 |     "preconstruct": "^0.0.82",
35 |     "prettier": "^1.18.2",
36 |     "react": "^16.8.9",
37 |     "react-dom": "^16.8.3",
38 |     "typescript": "^3.5.3",
39 |     "@types/react": "^16.8.23"
40 |   },
41 |   "browserslist": [
42 |     ">0.2%",
43 |     "not dead",
44 |     "not ie <= 11",
45 |     "not op_mini all"
46 |   ],
47 |   "prettier": {
48 |     "trailingComma": "es5",
49 |     "singleQuote": true
50 |   },
51 |   "scripts": {
52 |     "watch": "preconstruct watch",
53 |     "build": "preconstruct build",
54 |     "version-packages": "changeset bump",
55 |     "release": "yarn build && changeset release",
56 |     "start": "cd ./site && yarn dev",
57 |     "postinstall": "preconstruct dev && bolt-check",
58 |     "lint": "eslint .",
59 |     "lint:fix": "yarn lint --fix"
60 |   },
61 |   "preconstruct": {
62 |     "packages": [
63 |       "elemental-ui/*",
64 |       "design-system/*"
65 |     ]
66 |   }
67 | }
68 |

--------------------------------------------------------------------------------
/design-system/textfield/src/index.tsx:
--------------------------------------------------------------------------------
  1 | /** @jsx jsx */
  2 | 
  3 | import { useState, useRef } from 'react';
  4 | import { jsx, CSSObject } from '@emotion/core';
  5 | 
  6 | type BaseProps = {
  7 |   isDisabled: boolean;
  8 |   isReadOnly: boolean;
  9 |   isRequired: boolean;
 10 |   isInvalid: boolean;
 11 | };
 12 | 
 13 | type StyleProps = BaseProps & {
 14 |   isFocused: boolean;
 15 | } & React.InputHTMLAttributes<HTMLInputElement>;
 16 | 
 17 | type StyleFunc = (props: StyleProps) => CSSObject;
 18 | 
 19 | const inputWrapperStyles: StyleFunc = props => ({
 20 |   display: 'flex',
 21 |   background: 'white',
 22 |   flex: '1 0 auto',
 23 |   boxSizing: 'border-box',
 24 | });
 25 | const inputStyles: StyleFunc = props => ({
 26 |   width: '100%',
 27 | });
 28 | 
 29 | type StylesProp<StyleProps, TypeOfDefaultStyles> = {
 30 |   [K in keyof TypeOfDefaultStyles]?: (
 31 |     defaultStyles: CSSObject,
 32 |     props: StyleProps
 33 |   ) => CSSObject;
 34 | };
 35 | 
 36 | const defaultStyles = {
 37 |   input: inputStyles,
 38 |   inputWrapper: inputWrapperStyles,
 39 | } as const;
 40 | 
 41 | type Props = Partial<BaseProps> &
 42 |   React.InputHTMLAttributes<HTMLInputElement> & {
 43 |     styles?: StylesProp<StyleProps, typeof defaultStyles>;
 44 |   };
 45 | 
 46 | const Textfield = ({
 47 |   styles,
 48 |   isDisabled = false,
 49 |   isReadOnly = false,
 50 |   isRequired = false,
 51 |   isInvalid = false,
 52 |   ...rest
 53 | }: Props) => {
 54 |   const [isFocused, setFocused] = useState(false);
 55 |   const inputEl = useRef(null);
 56 | 
 57 |   const getStyles = (
 58 |     key: keyof typeof defaultStyles,
 59 |     styleProps: StyleProps
 60 |   ) => {
 61 |     // If there's an existing styles prop
 62 |     // check for styles[key](theme[key](styleProps))
 63 |     // otherwise just return theme[key](styleProps);
 64 |     const defaultStyle = defaultStyles[key](styleProps);
 65 | 
 66 |     return styles && styles[key]
 67 |       ? styles[key](defaultStyle, styleProps)
 68 |       : defaultStyle;
 69 |   };
 70 | 
 71 |   const handleOnFocus = (event: React.FocusEvent<HTMLInputElement>) => {
 72 |     setFocused(true);
 73 |     if (rest.onFocus) {
 74 |       rest.onFocus(event);
 75 |     }
 76 |   };
 77 | 
 78 |   const handleOnBlur = (event: React.FocusEvent<HTMLInputElement>) => {
 79 |     setFocused(false);
 80 |     if (rest.onBlur) {
 81 |       rest.onBlur(event);
 82 |     }
 83 |   };
 84 | 
 85 |   const styleProps = {
 86 |     isDisabled,
 87 |     isFocused,
 88 |     isReadOnly,
 89 |     isRequired,
 90 |     isInvalid,
 91 |     ...rest,
 92 |   };
 93 | 
 94 |   return (
 95 |     <div css={getStyles('inputWrapper', styleProps)}>
 96 |       <input
 97 |         css={getStyles('input', styleProps)}
 98 |         ref={inputEl}
 99 |         disabled={isDisabled}
100 |         required={isRequired}
101 |         readOnly={isReadOnly}
102 |         {...rest}
103 |         onFocus={handleOnFocus}
104 |         onBlur={handleOnBlur}
105 |       />
106 |     </div>
107 |   );
108 | };
109 | 
110 | export default Textfield;
111 |

--------------------------------------------------------------------------------
/site/static/favicons/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="600.000000pt" height="600.000000pt" viewBox="0 0 600.000000 600.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | <metadata>
 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013
 9 | </metadata>
10 | <g transform="translate(0.000000,600.000000) scale(0.100000,-0.100000)"
11 | fill="#000000" stroke="none">
12 | <path d="M2829 5496 c-2 -2 -38 -6 -79 -10 -231 -19 -530 -98 -768 -202 -59
13 | -26 -112 -51 -118 -56 -6 -4 -37 -22 -70 -39 -291 -154 -606 -432 -816 -719
14 | -136 -187 -259 -422 -338 -645 -93 -266 -138 -535 -137 -830 0 -564 182 -1089
15 | 535 -1545 83 -106 291 -316 397 -400 201 -159 500 -327 721 -403 113 -40 268
16 | -83 329 -93 22 -3 42 -7 45 -9 3 -2 26 -6 50 -9 73 -10 124 -18 145 -23 51
17 | -12 438 -10 540 2 168 20 377 61 444 87 14 5 33 11 41 13 8 2 49 15 90 30 248
18 | 89 521 243 730 410 153 122 356 338 473 502 220 310 392 749 433 1103 3 30 8
19 | 64 11 75 9 38 11 420 2 495 -20 181 -36 268 -73 410 -131 500 -431 966 -836
20 | 1296 -91 74 -92 75 -220 160 -196 131 -541 283 -747 329 -92 21 -238 47 -278
21 | 51 -27 3 -57 8 -65 11 -18 6 -434 15 -441 9z m358 -350 c152 -12 443 -75 548
22 | -120 16 -7 66 -28 110 -46 258 -107 511 -283 712 -495 95 -99 222 -260 270
23 | -343 86 -145 183 -345 183 -375 0 -7 4 -17 9 -22 24 -26 104 -341 116 -458 2
24 | -25 7 -67 11 -93 12 -93 6 -393 -10 -481 -2 -10 -7 -38 -11 -63 -4 -25 -9 -56
25 | -12 -70 -2 -14 -15 -70 -29 -125 -144 -566 -549 -1079 -1069 -1355 -184 -97
26 | -438 -187 -605 -215 -19 -3 -60 -10 -90 -15 -124 -20 -447 -31 -515 -16 -11 2
27 | -49 7 -85 11 -36 3 -72 8 -80 10 -8 2 -31 7 -50 10 -19 3 -85 19 -146 35 -505
28 | 134 -956 460 -1245 900 -103 156 -213 392 -259 550 -7 25 -16 56 -21 70 -11
29 | 34 -46 212 -54 280 -3 30 -9 69 -11 85 -7 40 -7 339 0 393 3 23 8 61 11 85 3
30 | 23 7 53 10 67 2 14 7 41 10 60 17 101 74 292 125 415 216 519 632 937 1153
31 | 1159 216 92 468 152 687 163 63 3 116 6 117 7 4 3 138 -2 220 -8z"/>
32 | <path d="M1980 3670 c-5 -3 -11 -64 -12 -135 l-3 -129 -87 0 -88 1 0 -92 0
33 | -92 87 -1 c47 -1 88 -3 89 -5 2 -2 4 -145 4 -318 1 -391 12 -450 95 -516 57
34 | -46 125 -62 247 -59 59 1 110 5 113 8 3 3 6 45 7 94 l2 89 -67 1 c-73 2 -105
35 | 16 -134 61 -16 24 -18 59 -20 335 l-1 308 36 1 c20 1 67 1 105 1 l67 -1 1 40
36 | c4 162 12 148 -88 147 -49 0 -96 0 -105 1 -16 1 -18 13 -17 99 1 53 0 113 0
37 | 132 l-1 35 -110 0 c-61 0 -115 -2 -120 -5z"/>
38 | <path d="M3054 3412 c-53 -19 -120 -66 -153 -108 -10 -13 -21 -24 -23 -24 -2
39 | 0 -3 24 -3 53 1 28 0 57 -2 63 -3 8 -40 11 -116 10 l-112 -1 0 -535 0 -535
40 | 120 -3 121 -3 -1 293 c0 333 6 412 39 483 40 85 92 124 174 130 86 5 148 -32
41 | 184 -113 20 -45 21 -65 23 -412 2 -201 3 -369 4 -373 1 -4 54 -6 119 -5 l117
42 | 3 1 321 c1 196 6 342 13 374 30 141 119 217 239 204 59 -6 108 -38 134 -88 35
43 | -68 37 -88 37 -488 l1 -328 120 0 121 0 -1 381 c-2 346 -3 387 -21 452 -48
44 | 174 -148 256 -323 265 -146 7 -247 -36 -330 -139 l-39 -48 -27 42 c-60 95
45 | -143 138 -275 144 -69 3 -102 -1 -141 -15z"/>
46 | </g>
47 | </svg>
48 |

--------------------------------------------------------------------------------
/.changeset/config.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Hey, welcome to the changeset config! This file has been generated
 3 | for you with the default configs we use, and some comments around
 4 | what options mean, so that it's easy to customise your workflow.
 5 | 
 6 | You should update this as you need to craft your workflow.
 7 | 
 8 | Config provided by a CI command takes precedence over the contents of this file.
 9 | 
10 | If a config option isn't present here, we will fall back to the defaults.
11 | */
12 | 
13 | const changesetOptions = {
14 |   // If true, we will automatically commit the changeset when the command is run
15 |   commit: false,
16 | };
17 | 
18 | // This function takes information about a changeset to generate an entry for it in your
19 | // changelog. We provide the full changeset object as well as the version.
20 | // It may be a good idea to replace the commit hash with a link to the commit.
21 | 
22 | /* the default shape is:
23 | ### Bump Type
24 | 
25 | - GIT_HASH: A summary message you wrote, indented?
26 | */
27 | 
28 | const getReleaseLine = async (changeset, type) => {
29 |   const [firstLine, ...futureLines] = changeset.summary
30 |     .split('\n')
31 |     .map(l => l.trimRight());
32 | 
33 |   return `- ${changeset.commit}: ${firstLine}\n${futureLines
34 |     .map(l => `  ${l}`)
35 |     .join('\n')}`;
36 | };
37 | 
38 | // This function takes information about what dependencies we are updating in the package.
39 | // It provides an array of related changesets, as well as the dependencies updated.
40 | 
41 | /*
42 | - Updated dependencies: [ABCDEFG]:
43 | - Updated dependencies: [HIJKLMN]:
44 |   - dependencyA@1.0.1
45 |   - dependencyb@1.2.0
46 | */
47 | const getDependencyReleaseLine = async (changesets, dependenciesUpdated) => {
48 |   if (dependenciesUpdated.length === 0) return '';
49 | 
50 |   const changesetLinks = changesets.map(
51 |     changeset => `- Updated dependencies [${changeset.commit}]:`
52 |   );
53 | 
54 |   const updatedDepenenciesList = dependenciesUpdated.map(
55 |     dependency => `  - ${dependency.name}@${dependency.version}`
56 |   );
57 | 
58 |   return [...changesetLinks, ...updatedDepenenciesList].join('\n');
59 | };
60 | 
61 | const versionOptions = {
62 |   // If true, we will automatically commit the version updating when the command is run
63 |   commit: false,
64 |   // Adds a skipCI flag to the commit - only valid if `commit` is also true.
65 |   skipCI: false,
66 |   // Do not modify the `changelog.md` files for packages that are updated
67 |   updateChangelog: true,
68 |   // A function that returns a string. It takes in options about a change. This allows you to customise your changelog entries
69 |   getReleaseLine,
70 |   // A function that returns a string. It takes in options about when a pacakge is updated because
71 |   getDependencyReleaseLine,
72 |   // An array of arrays that defines packages that are linked.
73 |   // Linked packages are packages that should be at the same version when they're released.
74 |   // If you've used Lerna to version packages before, this is very similar.
75 |   linked: [[]],
76 | };
77 | 
78 | const publishOptions = {
79 |   // This sets whether unpublished packages are public by default. We err on the side of caution here.
80 |   public: true,
81 | };
82 | 
83 | module.exports = {
84 |   versionOptions,
85 |   changesetOptions,
86 |   publishOptions,
87 | };
88 |

--------------------------------------------------------------------------------