├── .eslintrc ├── .gitignore ├── .prettierrc ├── .storybook ├── customtheme.js ├── index.d.ts ├── logo.png ├── main.js ├── manager.js ├── preview-head.html ├── preview.js └── webpack.config.js ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── src ├── components │ ├── atoms │ │ ├── Avatar │ │ │ ├── Avatar.stories.tsx │ │ │ ├── Avatar.styles.ts │ │ │ ├── Avatar.tsx │ │ │ └── Avatar.types.ts │ │ ├── Button │ │ │ ├── Button.stories.tsx │ │ │ ├── Button.styles.ts │ │ │ ├── Button.tsx │ │ │ └── Button.types.ts │ │ ├── Card │ │ │ ├── Card.stories.tsx │ │ │ ├── Card.styles.ts │ │ │ ├── Card.tsx │ │ │ └── Card.types.ts │ │ ├── Checkbox │ │ │ ├── Checkbox.stories.tsx │ │ │ ├── Checkbox.styles.ts │ │ │ ├── Checkbox.tsx │ │ │ ├── Checkbox.types.ts │ │ │ └── svgs │ │ │ │ ├── checked.svg │ │ │ │ └── unchecked.svg │ │ ├── Divider │ │ │ ├── Divider.stories.tsx │ │ │ ├── Divider.styles.ts │ │ │ ├── Divider.tsx │ │ │ └── Divider.types.ts │ │ ├── Form │ │ │ ├── Form.stories.tsx │ │ │ ├── Form.tsx │ │ │ └── Form.types.ts │ │ ├── Heading │ │ │ ├── Heading.stories.tsx │ │ │ ├── Heading.styles.ts │ │ │ ├── Heading.tsx │ │ │ └── Heading.types.ts │ │ ├── Image │ │ │ ├── Image.stories.tsx │ │ │ ├── Image.styles.ts │ │ │ ├── Image.tsx │ │ │ └── Image.types.ts │ │ ├── Input │ │ │ ├── Input.stories.tsx │ │ │ ├── Input.styles.ts │ │ │ ├── Input.tsx │ │ │ └── Input.types.ts │ │ ├── Link │ │ │ ├── Link.stories.tsx │ │ │ ├── Link.styles.ts │ │ │ ├── Link.tsx │ │ │ └── Link.types.ts │ │ ├── Progressbar │ │ │ ├── Progressbar.stories.tsx │ │ │ ├── Progressbar.styles.ts │ │ │ ├── Progressbar.tsx │ │ │ └── Progressbar.types.ts │ │ ├── Radio │ │ │ ├── Radio.stories.tsx │ │ │ ├── Radio.styles.ts │ │ │ ├── Radio.tsx │ │ │ └── Radio.types.ts │ │ ├── Switch │ │ │ ├── Switch.stories.tsx │ │ │ ├── Switch.styles.ts │ │ │ ├── Switch.tsx │ │ │ └── Switch.types.ts │ │ ├── Table │ │ │ ├── Table.stories.tsx │ │ │ ├── Table.styles.ts │ │ │ ├── Table.tsx │ │ │ ├── Table.types.ts │ │ │ ├── TableBody.tsx │ │ │ ├── TableDescription.tsx │ │ │ ├── TableHead.tsx │ │ │ ├── TableHeading.tsx │ │ │ └── TableRow.tsx │ │ └── Text │ │ │ ├── Text.stories.tsx │ │ │ ├── Text.styles.ts │ │ │ ├── Text.tsx │ │ │ └── Text.types.ts │ ├── index.ts │ ├── layouts │ │ ├── Container │ │ │ ├── Container.tsx │ │ │ └── Container.types.ts │ │ ├── Portal │ │ │ ├── Portal.tsx │ │ │ └── Portal.types.ts │ │ └── Stack │ │ │ ├── Stack.tsx │ │ │ └── Stack.types.ts │ └── molecules │ │ ├── Accordion │ │ ├── Accordion.stories.tsx │ │ ├── Accordion.styles.ts │ │ ├── Accordion.tsx │ │ ├── Accordion.types.ts │ │ └── AccordionItem.tsx │ │ ├── Alert │ │ ├── Alert.stories.tsx │ │ ├── Alert.styles.ts │ │ ├── Alert.tsx │ │ ├── Alert.types.ts │ │ └── svgs │ │ │ ├── error.svg │ │ │ ├── info.svg │ │ │ ├── success.svg │ │ │ ├── tip.svg │ │ │ └── warning.svg │ │ ├── CopyText │ │ ├── CopyText.stories.tsx │ │ ├── CopyText.styles.tsx │ │ ├── CopyText.tsx │ │ ├── CopyText.types.ts │ │ └── svgs │ │ │ └── copy.svg │ │ ├── DatePicker │ │ ├── DatePicker.stories.tsx │ │ ├── DatePicker.styles.ts │ │ ├── DatePicker.tsx │ │ ├── TimePicker.tsx │ │ ├── TimePicker.types.ts │ │ ├── constants.ts │ │ ├── icons │ │ │ ├── left.svg │ │ │ └── right.svg │ │ ├── useTimePicker.tsx │ │ └── utils.ts │ │ ├── Floater │ │ ├── Floater.stories.tsx │ │ ├── Floater.styles.ts │ │ ├── Floater.tsx │ │ └── Floater.types.ts │ │ ├── InfoTooltip │ │ ├── InfoTooltip.stories.tsx │ │ ├── InfoTooltip.tsx │ │ ├── InfoTooltip.types.ts │ │ └── icons │ │ │ └── info.svg │ │ ├── Modal │ │ ├── Modal.stories.tsx │ │ ├── Modal.styles.ts │ │ ├── Modal.tsx │ │ └── Modal.types.ts │ │ ├── Navbar │ │ ├── Navbar.stories.tsx │ │ ├── Navbar.styles.ts │ │ ├── Navbar.tsx │ │ ├── Navbar.types.ts │ │ └── NavbarLogo.tsx │ │ ├── Paginator │ │ ├── Paginator.stories.tsx │ │ ├── Paginator.styles.ts │ │ ├── Paginator.tsx │ │ └── Paginator.types.ts │ │ ├── Select │ │ ├── Select.stories.tsx │ │ ├── Select.styles.ts │ │ ├── Select.tsx │ │ └── Select.types.ts │ │ ├── Slider │ │ ├── Slider.stories.tsx │ │ ├── Slider.styles.ts │ │ ├── Slider.tsx │ │ └── Slider.types.ts │ │ ├── Tabs │ │ ├── ControlledTabs.tsx │ │ ├── Tab.tsx │ │ ├── Tabs.stories.tsx │ │ ├── Tabs.styles.ts │ │ ├── Tabs.tsx │ │ └── Tabs.types.ts │ │ ├── Toast │ │ ├── Toast.stories.tsx │ │ ├── Toast.styles.ts │ │ ├── Toast.tsx │ │ ├── Toast.types.ts │ │ ├── ToastProvider.tsx │ │ ├── reducer │ │ │ ├── toast.reducer.ts │ │ │ └── toastreducer.spec.ts │ │ └── svgs │ │ │ ├── cross-icon.svg │ │ │ ├── error.svg │ │ │ ├── info.svg │ │ │ ├── success.svg │ │ │ └── warning.svg │ │ └── Tooltip │ │ ├── Tooltip.stories.tsx │ │ ├── Tooltip.tsx │ │ └── Tooltip.types.ts ├── custom.d.ts ├── helpers │ ├── atom.js │ ├── constants.ts │ ├── datasize.ts │ ├── date.ts │ ├── helpers.types.ts │ ├── index.ts │ ├── mediaqueries.ts │ ├── resolver.ts │ ├── stylegun.ts │ ├── tests │ │ ├── resolver.spec.ts │ │ ├── stylegun.spec.ts │ │ └── utils.spec.ts │ └── utils.ts ├── hooks │ ├── date │ │ └── useCalendar.ts │ ├── form │ │ ├── rules.ts │ │ ├── useForm.ts │ │ ├── useForm.types.ts │ │ └── utils.ts │ ├── index.tsx │ ├── useClickOutside.ts │ ├── useHover.ts │ ├── useInfiniteScroll.ts │ ├── useTabs.ts │ ├── useTheme.tsx │ └── useToast.ts ├── index.tsx ├── theme.ts └── types │ └── index.ts ├── tsconfig.json └── webpack.config.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "node": true, 5 | "es6": true, 6 | "jest/globals": true 7 | }, 8 | "extends": [ 9 | "eslint:recommended", 10 | "plugin:react/recommended", 11 | "plugin:jest/all" 12 | ], 13 | "globals": { 14 | "Atomics": "readonly", 15 | "SharedArrayBuffer": "readonly" 16 | }, 17 | "parser": "@typescript-eslint/parser", 18 | "parserOptions": { 19 | "ecmaFeatures": { 20 | "jsx": true 21 | }, 22 | "ecmaVersion": 2018, 23 | "sourceType": "module" 24 | }, 25 | "plugins": ["babel", "jest", "react", "react-hooks", "@typescript-eslint"], 26 | "settings": { 27 | "react": { 28 | "version": "detect" 29 | } 30 | }, 31 | "rules": { 32 | "jest/prefer-expect-assertions": "off", 33 | "jest/consistent-test-it": "off", 34 | "jest/prefer-inline-snapshots": "off", 35 | "react/prop-types": "off", 36 | "react/display-name": "off", 37 | "react-hooks/rules-of-hooks": "error", 38 | "react-hooks/exhaustive-deps": "warn", 39 | "no-unused-vars": "off", 40 | "@typescript-eslint/no-unused-vars": "error", 41 | "no-undef": "off", 42 | "no-redeclare": "off", 43 | "no-use-before-define": "off", 44 | "@typescript-eslint/no-use-before-define": "off", 45 | "no-useless-escape": "off", 46 | "no-prototype-builtins": "off" 47 | }, 48 | "overrides": [ 49 | { 50 | "files": ["*.ts", "*.tsx"], 51 | "rules": { 52 | "@typescript-eslint/no-unused-vars": [2, { "args": "none" }] 53 | } 54 | } 55 | ] 56 | } 57 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .vscode 3 | .expo 4 | es 5 | cjs 6 | coverage 7 | node_modules 8 | docs 9 | npm-debug.log* 10 | .DS_Store 11 | dist 12 | storybook-static -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "tabWidth": 4, 4 | "singleQuote": false, 5 | "overrides": [ 6 | { 7 | "files": ["*.json", ".prettierrc"], 8 | "options": { 9 | "tabWidth": 2 10 | } 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /.storybook/customtheme.js: -------------------------------------------------------------------------------- 1 | import { create } from "@storybook/theming"; 2 | 3 | export default create({ 4 | base: "light", 5 | brandTitle: "typhoon-ui", 6 | brandUrl: "https://github.com/dgraph-io/typhoon-ui", 7 | brandImage: `https://user-images.githubusercontent.com/11137394/130053143-498c0d26-0111-479c-a99c-31b82968ac1d.png`, 8 | }); 9 | -------------------------------------------------------------------------------- /.storybook/index.d.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | declare module "*.svg" { 18 | import React = require("react"); 19 | export const ReactComponent: React.FunctionComponent>; 22 | const src: string; 23 | export default src; 24 | } 25 | -------------------------------------------------------------------------------- /.storybook/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dgraph-io/typhoon-ui/56b8e78efaff1009150b98f84a78d010c44b419f/.storybook/logo.png -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | module.exports = { 18 | stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], 19 | addons: [ 20 | "@storybook/addon-links", 21 | "@storybook/addon-essentials", 22 | ], 23 | typescript: { 24 | check: false, 25 | checkOptions: {}, 26 | reactDocgen: "react-docgen-typescript", 27 | reactDocgenTypescriptOptions: { 28 | shouldExtractLiteralValuesFromEnum: true, 29 | propFilter: (prop) => 30 | prop.parent ? !/node_modules/.test(prop.parent.fileName) : true, 31 | }, 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from "@storybook/addons"; 2 | import customtheme from "./customtheme"; 3 | 4 | addons.setConfig({ 5 | theme: customtheme, 6 | }); 7 | -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from "react"; 18 | import { addDecorator } from "@storybook/react"; 19 | 20 | export const parameters = { 21 | actions: { argTypesRegex: "^on[A-Z].*" }, 22 | viewMode: "docs", 23 | }; 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🌀 typhoon-ui 2 | [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://github.com/dgraph-io/typhoon-ui/blob/main/LICENSE) [![node](https://img.shields.io/badge/node-10.14.6-brightgreen.svg)](https://github.com/dgraph-io/typhoon-ui) [![npm version](https://badge.fury.io/js/%40dgraph-io%2Ftyphoon-ui.svg)](https://badge.fury.io/js/%40dgraph-io%2Ftyphoon-ui) 3 | 4 | [➡ View Component Library](https://typhoon-ui.dgraph.io/?path=/story/atoms-avatar--default) 5 | 6 | 7 | [Note: This is a work in progress, API is subject to change] 8 | ## Installation 9 | 10 | ``` 11 | npm i @dgraph-io/typhoon-ui 12 | ``` 13 | 14 | ## Design System Concepts 15 | 16 | ### **Theme** 17 | 18 | Theme is just a map of tokens & components 19 | 20 | ``` 21 | { tokens: { ... }, components: { ... }} 22 | ``` 23 | 24 | Theme can be accessed from `useTheme` hook, which gets access to theme object from the `ThemeContext`. You only need this while creating atoms or molecules. 25 | 26 | ### **Tokens** 27 | 28 | Tokens is a map of values which allow us to build a contraint based design. There is a mapping of CSS properties with the tokens, which can be found in `helpers/constants`. Every component in the design system is able to resolve the styles against these tokens. Lets see some examples - 29 | 30 | Example - 31 | 32 | 1. `marginTop: 1` 33 | 34 | Since `marginTop` is mapped to `tokens.space` 35 | 36 | This will resolve to `marginTop: tokens.space[1]` => `marginTop: 8px` 37 | 38 | 2. `background : "pink.light"` 39 | 40 | Since `background` is mapped to `tokens.colors` 41 | 42 | This will resolve to `background: tokens.colors.pink.light` => `background: #ffc0d6` 43 | 44 | Every component in the design system is able to resolve the styles 45 | 46 | **Shortcuts** 47 | 48 | There are shortcuts configured as well which are defined in `helpers/constants` 49 | 50 | Example - 51 | 52 | `marginX: ...` 53 | 54 | will be resolved to - 55 | 56 | ``` 57 | marginLeft: ... , 58 | marginRight: ... 59 | ``` 60 | 61 | **Advanced** 62 | 63 | We can resolve tokens within a string as well like - 64 | 65 | Example- 66 | 67 | `border: {{lineThickness.1}} solid {{colors.pink.light}}` 68 | 69 | This resolves to 70 | 71 | `border: {{lineThickness.1}} solid {{colors.pink.light}}` 72 | 73 | Any valid key between `{{ }}` will be resolved against token values. 74 | 75 | --- 76 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@dgraph-io/typhoon-ui", 3 | "version": "0.2.7", 4 | "description": "Dgraph's design system", 5 | "main": "index.js", 6 | "typings": "index.d.ts", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1", 9 | "storybook": "start-storybook -p 6006", 10 | "build": "webpack --mode production && npm run copypackage", 11 | "build-storybook": "build-storybook", 12 | "copypackage": "cp -rf package.json dist && cp README.md dist" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/dgraph-io/typhoon-ui.git" 17 | }, 18 | "author": "Thiyagaraj T (tstreamDOTh)", 19 | "license": "ISC", 20 | "bugs": { 21 | "url": "https://github.com/dgraph-io/typhoon-ui/issues" 22 | }, 23 | "homepage": "https://github.com/dgraph-io/typhoon-ui#readme", 24 | "dependencies": { 25 | "react-docgen-typescript": "^1.22.0", 26 | "typescript": "^4.0.3" 27 | }, 28 | "devDependencies": { 29 | "@babel/core": "^7.13.15", 30 | "@babel/preset-env": "^7.13.15", 31 | "@babel/preset-react": "^7.13.13", 32 | "@emotion/babel-plugin": "^11.3.0", 33 | "@emotion/babel-preset-css-prop": "^11.2.0", 34 | "@storybook/addon-actions": "6.1.10", 35 | "@storybook/addon-essentials": "^6.3.2", 36 | "@storybook/addon-links": "6.1.10", 37 | "@storybook/addon-storyshots": "^6.1.9", 38 | "@storybook/node-logger": "6.1.10", 39 | "@storybook/preset-create-react-app": "^3.1.4", 40 | "@storybook/react": "^6.3.2", 41 | "@svgr/webpack": "^5.5.0", 42 | "@types/jest": "^26.0.22", 43 | "@types/react-dom": "^17.0.3", 44 | "babel-loader": "^8.2.2", 45 | "dts-bundle": "^0.7.3", 46 | "dts-bundle-webpack": "^1.0.2", 47 | "file-loader": "^6.2.0", 48 | "optimize-css-assets-webpack-plugin": "^6.0.0", 49 | "history": "^5.0.0", 50 | "postcss": "^8.2.15", 51 | "react-docgen-typescript-loader": "^3.7.2", 52 | "resolve-url-loader": "^3.1.2", 53 | "source-map-loader": "^3.0.0", 54 | "terser-webpack-plugin": "^4.2.3", 55 | "ts-loader": "^8.2.0", 56 | "webpack": "^4.0.0", 57 | "webpack-cli": "^4.6.0", 58 | "webpack-node-externals": "^2.5.2" 59 | }, 60 | "peerDependencies": { 61 | "react": ">=16.12.0", 62 | "react-dom": ">=16.12.0", 63 | "@emotion/react": ">=11.4.0", 64 | "framer-motion": ">=4.0.0" 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/components/atoms/Avatar/Avatar.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from "react"; 18 | import Avatar from "./Avatar"; 19 | import { Stack } from "components"; 20 | import { ThemeProvider } from "hooks"; 21 | import { theme } from "theme"; 22 | 23 | export default { 24 | title: "Atoms/Avatar", 25 | component: Avatar, 26 | }; 27 | 28 | export const Default = () => ( 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | ); 41 | 42 | export const AvatarWithText = () => ; 43 | 44 | export const AvatarWithTextColor = () => ( 45 | 46 | ); 47 | 48 | export const AvatarWithBackgroundColor = () => ( 49 | 50 | ); 51 | 52 | export const AvatarWithImage = () => ( 53 | 57 | ); 58 | -------------------------------------------------------------------------------- /src/components/atoms/Avatar/Avatar.styles.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export const styles: Record = { 20 | Avatar: {}, 21 | Round: { 22 | borderRadius: "100%", 23 | }, 24 | Image: { 25 | verticalAlign: "middle", 26 | borderStyle: "none", 27 | width: "100%", 28 | height: "100%", 29 | objectFit: "cover", 30 | }, 31 | Text: { 32 | position: "relative", 33 | margin: "auto", 34 | }, 35 | }; 36 | -------------------------------------------------------------------------------- /src/components/atoms/Avatar/Avatar.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** @jsx jsx */ 18 | import { jsx } from "@emotion/react"; 19 | import { styles } from "./Avatar.styles"; 20 | 21 | import { stylegun } from "helpers/stylegun"; 22 | import { useTheme } from "hooks/useTheme"; 23 | import { AvatarPropsType } from "./Avatar.types.js"; 24 | 25 | import { Stack, Text } from "components"; 26 | 27 | const Avatar = ({ 28 | variant = 4, 29 | round = true, 30 | text, 31 | bgColor = "black", 32 | src = "https://svgshare.com/i/QA1.svg", 33 | color = "white", 34 | styles: stylesProp = {}, 35 | }: AvatarPropsType): JSX.Element => { 36 | const theme = useTheme(); 37 | return ( 38 | 51 | {text ? ( 52 | 63 | {text} 64 | 65 | ) : ( 66 | avatar 77 | )} 78 | 79 | ); 80 | }; 81 | 82 | export default Avatar; 83 | -------------------------------------------------------------------------------- /src/components/atoms/Avatar/Avatar.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | export interface AvatarPropsType { 19 | src?: string; 20 | styles?: StylesObject; 21 | round?: boolean; 22 | bgColor?: string; 23 | color?: string; 24 | text?: string; 25 | variant?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8; 26 | } 27 | -------------------------------------------------------------------------------- /src/components/atoms/Button/Button.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from "react"; 18 | import Button from "./Button"; 19 | import { Stack } from "components"; 20 | 21 | export default { 22 | title: "Atoms/Button", 23 | component: Button, 24 | }; 25 | 26 | export const LoudnessScale = () => ( 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | ); 36 | -------------------------------------------------------------------------------- /src/components/atoms/Button/Button.styles.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export const styles: Record = { 20 | Button: { 21 | fontSize: "3", 22 | paddingX: 2, 23 | borderRadius: 2, 24 | outline: 0, 25 | height: 5, 26 | boxSizing: "border-box", 27 | justifyContent: "center", 28 | alignItems: "center", 29 | width: "auto", 30 | minWidth: "fit-content", 31 | cursor: "pointer", 32 | fontWeight: 600, 33 | ":disabled": { 34 | opacity: 0.5, 35 | cursor: "default", 36 | pointerEvents: "none", 37 | }, 38 | ":focus": { 39 | outline: 0, 40 | }, 41 | }, 42 | }; 43 | -------------------------------------------------------------------------------- /src/components/atoms/Button/Button.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** @jsx jsx */ 18 | import React from "react"; 19 | import { jsx } from "@emotion/react"; 20 | import { styles } from "./Button.styles"; 21 | import { stylegun } from "helpers/stylegun"; 22 | import { useTheme } from "hooks/useTheme"; 23 | 24 | import { ButtonPropsType } from "./Button.types"; 25 | 26 | const Button = React.forwardRef( 27 | ( 28 | { 29 | fullWidth, 30 | variant = "yell", 31 | styles: stylesProp = {}, 32 | children, 33 | ...props 34 | }: ButtonPropsType, 35 | ref?: React.Ref 36 | ) => { 37 | const width = fullWidth ? "100%" : "auto"; 38 | const theme = useTheme(); 39 | return ( 40 | 59 | ); 60 | } 61 | ); 62 | 63 | export default Button; 64 | -------------------------------------------------------------------------------- /src/components/atoms/Button/Button.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export type ButtonVariantType = 20 | | "scream" 21 | | "yell" 22 | | "cheer" 23 | | "murmur" 24 | | "whistle" 25 | | "ghost"; 26 | export interface ButtonPropsType 27 | extends React.ButtonHTMLAttributes { 28 | fullWidth?: boolean; 29 | variant?: ButtonVariantType; 30 | styles?: StylesObject; 31 | theme?: Object; 32 | children?: React.ReactNode; 33 | onClick?: () => void; 34 | disabled?: boolean; 35 | } 36 | -------------------------------------------------------------------------------- /src/components/atoms/Card/Card.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from "react"; 18 | import Card from "./Card"; 19 | import { Stack, Heading, Text } from "components"; 20 | 21 | export default { 22 | title: "Atoms/Card", 23 | component: Card, 24 | }; 25 | 26 | export const Default = () => ( 27 | 28 | 29 | Heading 30 | Description 31 | 32 | 33 | ); 34 | -------------------------------------------------------------------------------- /src/components/atoms/Card/Card.styles.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export const styles: Record = { 20 | Card: { 21 | paddingX: 3, 22 | paddingY: 3, 23 | borderRadius: 1, 24 | outline: 0, 25 | textAlign: "unset", 26 | border: "{{lineThickness.1}} solid {{colors.grey.border}}", 27 | ":focus": { 28 | outline: "none", 29 | border: 0, 30 | }, 31 | }, 32 | FocusedCard: { 33 | boxShadow: "{{focus.boxShadow}}", 34 | }, 35 | }; 36 | -------------------------------------------------------------------------------- /src/components/atoms/Card/Card.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** @jsx jsx */ 18 | import { jsx } from "@emotion/react"; 19 | import React from "react"; 20 | 21 | import { styles } from "./Card.styles"; 22 | import { stylegun } from "helpers/stylegun"; 23 | import { useTheme } from "hooks/useTheme"; 24 | 25 | import { CardPropsType } from "./Card.types"; 26 | 27 | const Card = React.forwardRef( 28 | ( 29 | { 30 | styles: stylesProp = {}, 31 | clickable = false, 32 | children, 33 | ...props 34 | }: CardPropsType, 35 | ref?: any 36 | ) => { 37 | const theme = useTheme(); 38 | const Element = clickable ? "button" : "div"; 39 | return ( 40 | 56 | {children} 57 | 58 | ); 59 | } 60 | ); 61 | 62 | export default Card; 63 | -------------------------------------------------------------------------------- /src/components/atoms/Card/Card.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export interface CardPropsType { 20 | clickable?: boolean; 21 | children: React.ReactNode; 22 | styles?: StylesObject; 23 | theme?: Object; 24 | role?: string; 25 | onClick?: () => void; 26 | id?: string; 27 | } 28 | -------------------------------------------------------------------------------- /src/components/atoms/Checkbox/Checkbox.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React, { useState } from "react"; 18 | import Checkbox from "./Checkbox"; 19 | 20 | export default { 21 | title: "Atoms/Checkbox", 22 | component: Checkbox, 23 | }; 24 | 25 | export const ControlledCheckbox = () => { 26 | const [checked, setChecked] = useState(true); 27 | 28 | return ( 29 | { 34 | setChecked(!checked); 35 | }} 36 | /> 37 | ); 38 | }; 39 | 40 | export const CheckboxUnchecked = () => ; 41 | 42 | export const CheckboxChecked = () => ; 43 | -------------------------------------------------------------------------------- /src/components/atoms/Checkbox/Checkbox.styles.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export const styles: Record = { 20 | CheckboxLabelContainer: { 21 | cursor: "pointer", 22 | }, 23 | CheckboxInput: { 24 | position: "absolute", 25 | size: 0, 26 | clip: "rect(0,0,0,0)", 27 | margin: 0, 28 | borderRadius: 2, 29 | border: 0, 30 | opacity: 0, 31 | pointerEvents: "none", 32 | }, 33 | 34 | CheckboxSvg: { 35 | cursor: "pointer", 36 | size: 3, 37 | }, 38 | Disabled: { filter: "grayscale(1)", opacity: 0.7, pointerEvents: "none" }, 39 | }; 40 | -------------------------------------------------------------------------------- /src/components/atoms/Checkbox/Checkbox.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** @jsx jsx */ 18 | import { jsx } from "@emotion/react"; 19 | import { styles } from "./Checkbox.styles"; 20 | import { stylegun } from "helpers/stylegun"; 21 | import { useTheme } from "hooks/useTheme"; 22 | 23 | import { ReactComponent as Checked } from "./svgs/checked.svg"; 24 | import { ReactComponent as Unchecked } from "./svgs/unchecked.svg"; 25 | 26 | import { Stack, Text } from "components"; 27 | import { CheckboxPropsType } from "./Checkbox.types"; 28 | 29 | const Checkbox = ({ 30 | checked, 31 | label, 32 | disabled = false, 33 | styles: stylesProp = {}, 34 | ...props 35 | }: CheckboxPropsType): JSX.Element => { 36 | const theme = useTheme(); 37 | const CheckboxSvgStyles = stylegun({ 38 | css: styles.CheckboxSvg, 39 | theme, 40 | }); 41 | 42 | const CheckboxLabelStyles = stylegun({ 43 | css: { 44 | ...styles.CheckboxLabelContainer, 45 | ...(disabled ? styles.Disabled : {}), 46 | ...stylesProp, 47 | ":focus-visible": { 48 | cursor: "pointer", 49 | ":focus-within svg": { 50 | borderRadius: 1, 51 | boxShadow: "{{focus.boxShadow}}", 52 | }, 53 | }, 54 | }, 55 | theme, 56 | component: "Checkbox", 57 | }); 58 | 59 | return ( 60 | 75 | ); 76 | }; 77 | 78 | export default Checkbox; 79 | -------------------------------------------------------------------------------- /src/components/atoms/Checkbox/Checkbox.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export interface CheckboxPropsType { 20 | id?: string; 21 | checked?: boolean; 22 | styles?: StylesObject; 23 | label?: string; 24 | disabled?: boolean; 25 | onChange?: () => void; 26 | onClick?: () => void; 27 | } 28 | -------------------------------------------------------------------------------- /src/components/atoms/Checkbox/svgs/checked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/components/atoms/Checkbox/svgs/unchecked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/atoms/Divider/Divider.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from "react"; 18 | import Divider from "./Divider"; 19 | 20 | export default { 21 | title: "Atoms/Divider", 22 | component: Divider, 23 | }; 24 | 25 | export const DividerLine = () => ; 26 | 27 | export const DashedLine = () => ; 28 | 29 | export const LineWithWidth = () => ; 30 | -------------------------------------------------------------------------------- /src/components/atoms/Divider/Divider.styles.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export const styles: Record = { 20 | Divider: {}, 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/atoms/Divider/Divider.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** @jsx jsx */ 18 | import { jsx } from "@emotion/react"; 19 | 20 | import { styles } from "./Divider.styles"; 21 | import { stylegun } from "helpers/stylegun"; 22 | import { useTheme } from "hooks/useTheme"; 23 | import { DividerPropsType } from "./Divider.types"; 24 | 25 | const Divider = ({ 26 | variant = "solid", 27 | width = "100%", 28 | styles: stylesProp = {}, 29 | ...props 30 | }: DividerPropsType): JSX.Element => { 31 | const theme = useTheme(); 32 | return ( 33 |
42 | ); 43 | }; 44 | 45 | export default Divider; 46 | -------------------------------------------------------------------------------- /src/components/atoms/Divider/Divider.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export interface DividerPropsType { 20 | styles?: StylesObject; 21 | theme?: StylesObject; 22 | variant?: "solid" | "dashed"; 23 | width?: string; 24 | } 25 | -------------------------------------------------------------------------------- /src/components/atoms/Form/Form.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** @jsx jsx */ 18 | import React from "react"; 19 | import { jsx } from "@emotion/react"; 20 | import { stylegun } from "helpers/stylegun"; 21 | import { useTheme } from "hooks/useTheme"; 22 | import { FormPropsType } from "./Form.types"; 23 | 24 | const Form = React.forwardRef( 25 | ( 26 | { 27 | fullWidth, 28 | styles: stylesProp = {}, 29 | children, 30 | ...props 31 | }: FormPropsType, 32 | ref?: React.Ref 33 | ) => { 34 | const width = fullWidth ? "100%" : "auto"; 35 | const theme = useTheme(); 36 | return ( 37 |
49 | {children} 50 |
51 | ); 52 | } 53 | ); 54 | 55 | export default Form; 56 | -------------------------------------------------------------------------------- /src/components/atoms/Form/Form.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export interface FormPropsType extends React.HTMLProps { 20 | fullWidth?: boolean; 21 | styles?: StylesObject; 22 | } 23 | -------------------------------------------------------------------------------- /src/components/atoms/Heading/Heading.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from "react"; 18 | import Heading from "./Heading"; 19 | import { Stack } from "components"; 20 | 21 | export default { 22 | title: "Atoms/Heading", 23 | component: Heading, 24 | }; 25 | 26 | export const Sizes = () => ( 27 | 28 | This is Default (H3) 29 | This is H1 - Only one in the entire page 30 | This is H2 - Sub section of a page 31 | 32 | This is H3 - Article level/ Modal heading/ Card header 33 | 34 | This is H4 - At form level division 35 | 36 | H3 in pink 37 | 38 | 39 | H3 in pink with 100 weight 40 | 41 | 42 | ); 43 | -------------------------------------------------------------------------------- /src/components/atoms/Heading/Heading.styles.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export const styles: Record = { 20 | Heading: { 21 | margin: 0, 22 | padding: 0, 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /src/components/atoms/Heading/Heading.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** @jsx jsx */ 18 | import { jsx } from "@emotion/react"; 19 | 20 | import { styles } from "./Heading.styles"; 21 | import { stylegun } from "helpers/stylegun"; 22 | import { useTheme } from "hooks/useTheme"; 23 | import { HeadingPropsType } from "./Heading.types"; 24 | 25 | const Heading = ({ 26 | variant = 3, 27 | weight = 500, 28 | color, 29 | styles: stylesProp = {}, 30 | children, 31 | ...props 32 | }: HeadingPropsType) => { 33 | const theme = useTheme(); 34 | const HX = "h3" || `h${variant}`; 35 | return ( 36 | 50 | {children} 51 | 52 | ); 53 | }; 54 | 55 | export default Heading; 56 | -------------------------------------------------------------------------------- /src/components/atoms/Heading/Heading.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export interface HeadingPropsType { 20 | styles?: Object; 21 | theme?: StylesObject; 22 | children: React.ReactNode; 23 | variant?: number; 24 | weight?: number; 25 | color?: string; 26 | } 27 | -------------------------------------------------------------------------------- /src/components/atoms/Image/Image.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from "react"; 18 | import Image from "./Image"; 19 | 20 | export default { 21 | title: "Atoms/Image", 22 | component: Image, 23 | }; 24 | 25 | export const Default = () => ( 26 | design system 30 | ); 31 | 32 | export const ImageWithWidth = () => ( 33 | design system 38 | ); 39 | -------------------------------------------------------------------------------- /src/components/atoms/Image/Image.styles.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export const styles: Record = { 20 | Image: {}, 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/atoms/Image/Image.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** @jsx jsx */ 18 | import { jsx } from "@emotion/react"; 19 | 20 | import { styles } from "./Image.styles"; 21 | import { stylegun } from "helpers/stylegun"; 22 | import { useTheme } from "hooks/useTheme"; 23 | import { ImagePropsType } from "./Image.types"; 24 | 25 | const Image = ({ 26 | fullWidth = true, 27 | alt, 28 | src, 29 | styles: stylesProp = {}, 30 | ...props 31 | }: ImagePropsType): JSX.Element => { 32 | const theme = useTheme(); 33 | 34 | let width = fullWidth ? "100%" : "auto"; 35 | 36 | return ( 37 | {alt} 47 | ); 48 | }; 49 | 50 | export default Image; 51 | -------------------------------------------------------------------------------- /src/components/atoms/Image/Image.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export interface ImagePropsType { 20 | alt?: string; 21 | src?: string; 22 | fullWidth?: boolean; 23 | styles?: StylesObject; 24 | } 25 | -------------------------------------------------------------------------------- /src/components/atoms/Input/Input.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from "react"; 18 | import Input from "./Input"; 19 | import { Stack } from "components"; 20 | 21 | export default { 22 | title: "Atoms/Input", 23 | component: Input, 24 | }; 25 | 26 | export const InputStory = () => ( 27 | 28 | 29 | 30 | 31 | 32 | 33 | ); 34 | -------------------------------------------------------------------------------- /src/components/atoms/Input/Input.styles.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export const styles: Record = { 20 | Input: { 21 | display: "block", 22 | paddingX: 2, 23 | paddingY: 1, 24 | borderRadius: 1, 25 | boxSizing: "border-box", 26 | ":disabled": { 27 | opacity: 0.6, 28 | }, 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /src/components/atoms/Input/Input.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** @jsx jsx */ 18 | import { jsx } from "@emotion/react"; 19 | import React from "react"; 20 | import { styles } from "./Input.styles"; 21 | import { stylegun } from "helpers/stylegun"; 22 | import { useTheme } from "hooks/useTheme"; 23 | import { InputPropsType } from "./Input.types"; 24 | 25 | const Input = React.forwardRef( 26 | ( 27 | { 28 | fullWidth = false, 29 | variant = "small", 30 | styles: stylesProp = {}, 31 | ...props 32 | }: InputPropsType, 33 | ref?: React.Ref 34 | ) => { 35 | let width = fullWidth ? "100%" : "auto"; 36 | const theme = useTheme(); 37 | return ( 38 | 48 | ); 49 | } 50 | ); 51 | 52 | export default Input; 53 | -------------------------------------------------------------------------------- /src/components/atoms/Input/Input.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from "react"; 18 | import { StylesObject } from "../../../types"; 19 | 20 | export interface InputPropsType extends React.HTMLProps { 21 | variant?: "small" | "medium" | "large"; 22 | styles?: StylesObject; 23 | fullWidth?: boolean; 24 | disabled?: boolean; 25 | placeholder?: string; 26 | ref?: any; 27 | maxLength?: number; 28 | onChange?: (e: React.ChangeEvent) => void; 29 | } 30 | -------------------------------------------------------------------------------- /src/components/atoms/Link/Link.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from "react"; 18 | import Link from "./Link"; 19 | import { Stack, Text } from "components"; 20 | 21 | 22 | export default { 23 | title: "Atoms/Link", 24 | component: Link, 25 | }; 26 | 27 | export const ExternalLink = () => ( 28 | 29 | 30 | 31 | Link with new tab 32 | 33 | 34 | Link 35 | 36 | 37 | 38 | ); 39 | -------------------------------------------------------------------------------- /src/components/atoms/Link/Link.styles.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export const styles: Record = { 20 | Link: { 21 | textDecoration: "none", 22 | ":hover": { 23 | textDecoration: "none", 24 | }, 25 | }, 26 | 27 | focusStyles: { 28 | outline: "none", 29 | boxShadow: "{{focus.boxShadow}}", 30 | }, 31 | }; 32 | -------------------------------------------------------------------------------- /src/components/atoms/Link/Link.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** @jsx jsx */ 18 | import { jsx } from "@emotion/react"; 19 | 20 | import { styles } from "./Link.styles"; 21 | import { stylegun } from "helpers/stylegun"; 22 | import { useTheme } from "hooks/useTheme"; 23 | import { LinkPropsType } from "./Link.types"; 24 | 25 | const ensureScheme = (value: any, defaultScheme = "https") => { 26 | if (!value || value.length === 0 || value[0] === "/") return value; 27 | 28 | if (value.indexOf("://") < 0) return `${defaultScheme}://${value}`; 29 | 30 | return value; 31 | }; 32 | 33 | const Link = ({ 34 | children, 35 | href, 36 | openInNewTab, 37 | onClick, 38 | download, 39 | target, 40 | rel = "", 41 | disabled, 42 | defaultScheme = "https", 43 | isContent = false, 44 | styles: stylesProp = {}, 45 | }: LinkPropsType): JSX.Element => { 46 | const finalHref = ensureScheme(href, defaultScheme); 47 | const theme = useTheme(); 48 | 49 | const linkProps = { 50 | href: finalHref, 51 | onClick, 52 | download, 53 | target, 54 | rel, 55 | }; 56 | 57 | if (disabled) { 58 | delete linkProps.href; 59 | } 60 | 61 | if (openInNewTab) { 62 | linkProps.target = "_blank"; 63 | linkProps.rel = "noreferrer noopener"; 64 | } 65 | 66 | return ( 67 | 83 | {children || finalHref} 84 | 85 | ); 86 | }; 87 | 88 | export default Link; 89 | -------------------------------------------------------------------------------- /src/components/atoms/Link/Link.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export interface LinkPropsType { 20 | styles?: StylesObject; 21 | children?: React.ReactNode; 22 | openInNewTab?: boolean; 23 | download?: boolean; 24 | rel?: string; 25 | target?: string; 26 | onClick?: (e: React.MouseEvent) => void; 27 | defaultScheme?: string; 28 | href?: string; 29 | disabled?: boolean; 30 | isContent?: boolean; 31 | } 32 | -------------------------------------------------------------------------------- /src/components/atoms/Progressbar/Progressbar.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from "react"; 18 | import Progressbar from "./Progressbar"; 19 | 20 | export default { 21 | title: "Atoms/Progressbar", 22 | component: Progressbar, 23 | }; 24 | 25 | export const ProgressbarDefault = () => ( 26 | 27 | ); 28 | 29 | export const ProgressBarWithBackgroundAndHeight = () => { 30 | return ; 31 | }; 32 | -------------------------------------------------------------------------------- /src/components/atoms/Progressbar/Progressbar.styles.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export const styles = { 20 | ProgressbarContainer: { 21 | width: "100%", 22 | height: 2, 23 | borderRadius: 4, 24 | background: "grey.surface", 25 | }, 26 | ProgressbarFill: { 27 | height: 2, 28 | borderRadius: 4, 29 | background: "green", 30 | transition: "0.2s ease-in", 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /src/components/atoms/Progressbar/Progressbar.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** @jsx jsx */ 18 | import { jsx } from "@emotion/react"; 19 | 20 | import { styles } from "./Progressbar.styles"; 21 | import { stylegun } from "helpers/stylegun"; 22 | import { useTheme } from "hooks/useTheme"; 23 | import { ProgressBarPropsType } from "./Progressbar.types"; 24 | 25 | const Progressbar = ({ 26 | width = "100%", 27 | styles: stylesProp = {}, 28 | fillStyles = {}, 29 | progress = 0, 30 | }: ProgressBarPropsType): JSX.Element => { 31 | const theme = useTheme(); 32 | return ( 33 |
39 |
49 |
50 | ); 51 | }; 52 | 53 | export default Progressbar; 54 | -------------------------------------------------------------------------------- /src/components/atoms/Progressbar/Progressbar.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export interface ProgressBarPropsType { 20 | progress: number; 21 | styles?: StylesObject; 22 | fillStyles?: StylesObject; 23 | width?: string; 24 | bgcolor?: string; 25 | height?: number; 26 | } 27 | -------------------------------------------------------------------------------- /src/components/atoms/Radio/Radio.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React, { useState } from "react"; 18 | import Radio from "./Radio"; 19 | 20 | 21 | export default { 22 | title: "Atoms/Radio", 23 | component: Radio, 24 | }; 25 | 26 | export const RadioControlled = () => { 27 | const [checked, setChecked] = useState(true); 28 | 29 | return ( 30 | 31 | { 35 | setChecked(!checked); 36 | }} 37 | id="radio" 38 | /> 39 | 40 | ); 41 | }; 42 | 43 | export const RadioUnchecked = () => ; 44 | 45 | export const RadioChecked = () => ; 46 | -------------------------------------------------------------------------------- /src/components/atoms/Radio/Radio.styles.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | export const styles = { 18 | Radio: { 19 | cursor: "pointer", 20 | }, 21 | FocusedRadio: { 22 | boxShadow: "{{focus.boxShadow}}", 23 | }, 24 | 25 | RadioUnchecked: { 26 | boxSizing: "content-box", 27 | cursor: "pointer", 28 | size: 2, 29 | border: "{{lineThickness.1}} solid {{colors.pink}}", 30 | borderRadius: 3, 31 | }, 32 | RadioChecked: { 33 | boxSizing: "content-box", 34 | cursor: "pointer", 35 | size: 2, 36 | border: "{{lineThickness.1}} solid {{colors.pink}}", 37 | borderRadius: 3, 38 | position: "relative", 39 | ":after": { 40 | boxSizing: "content-box", 41 | content: '""', 42 | position: "absolute", 43 | size: 3, 44 | transform: "translate(-50%, -50%) scale(0.5)", 45 | top: "50%", 46 | left: "50%", 47 | borderRadius: 3, 48 | background: "pink", 49 | }, 50 | }, 51 | }; 52 | -------------------------------------------------------------------------------- /src/components/atoms/Radio/Radio.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export interface RadioPropsType { 20 | id?: string; 21 | checked?: boolean; 22 | styles?: StylesObject; 23 | label?: string; 24 | onChange?: () => void; 25 | onClick?: () => void; 26 | } 27 | -------------------------------------------------------------------------------- /src/components/atoms/Switch/Switch.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React, { useState } from "react"; 18 | import Switch from "./Switch"; 19 | 20 | export default { 21 | title: "Atoms/Switch", 22 | component: Switch, 23 | }; 24 | 25 | export const SwitchDefault = () => { 26 | const [checked, setChecked] = useState(false); 27 | return ( 28 | { 32 | setChecked(!checked); 33 | }} 34 | label="Click me to toggle" 35 | /> 36 | ); 37 | }; 38 | -------------------------------------------------------------------------------- /src/components/atoms/Switch/Switch.styles.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export const styles: Record = { 20 | SwitchLabel: { 21 | position: "relative", 22 | }, 23 | SwitchSlider: { 24 | position: "relative", 25 | display: "inline-block", 26 | cursor: "pointer", 27 | width: 8, 28 | height: 4, 29 | top: 0, 30 | left: 0, 31 | right: 0, 32 | bottom: 0, 33 | backgroundColor: "grey.border", 34 | borderRadius: "64px", 35 | "::before": { 36 | position: "absolute", 37 | size: 3, 38 | left: "4px", 39 | bottom: "4px", 40 | content: '""', 41 | backgroundColor: "white", 42 | borderRadius: "50%", 43 | transition: "0.2s", 44 | }, 45 | }, 46 | SwitchInput: { 47 | opacity: 0, 48 | width: 0, 49 | height: 0, 50 | display: "none", 51 | 52 | "&:checked + div > span": { 53 | backgroundColor: "pink", 54 | }, 55 | 56 | "&:checked + div > span::before": { 57 | transform: "translateX({{space.4}})", 58 | }, 59 | }, 60 | SwitchOn: { 61 | marginTop: 1, 62 | marginLeft: "12px", 63 | }, 64 | SwitchOff: { marginLeft: 4, marginTop: 1 }, 65 | Disabled: { 66 | pointerEvents: "none", 67 | filter: "grayscale(1)", 68 | opacity: 0.4, 69 | position: "relative", 70 | }, 71 | }; 72 | -------------------------------------------------------------------------------- /src/components/atoms/Switch/Switch.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export interface SwitchPropsType { 20 | checked: boolean; 21 | label?: string; 22 | styles?: StylesObject; 23 | disabled?: boolean; 24 | id: string; 25 | onClick?: () => void; 26 | onChange?: () => void; 27 | } 28 | -------------------------------------------------------------------------------- /src/components/atoms/Table/Table.styles.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export const styles: Record = { 20 | Table: { 21 | tableLayout: "fixed", 22 | borderCollapse: "collapse", 23 | }, 24 | TableBody: {}, 25 | TableHead: {}, 26 | TableHeading: { 27 | paddingY: 1, 28 | borderBottom: "1px solid", 29 | borderColor: "grey.border", 30 | }, 31 | TableDescription: { 32 | paddingY: 1, 33 | borderBottom: "1px solid", 34 | borderColor: "grey.border", 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /src/components/atoms/Table/Table.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /**@jsx jsx */ 18 | import { jsx } from "@emotion/react"; 19 | import { stylegun } from "helpers/stylegun"; 20 | import { useTheme } from "hooks/useTheme"; 21 | import { styles } from "./Table.styles"; 22 | import { TablePropsType } from "./Table.types"; 23 | 24 | const Table = ({ 25 | styles: stylesProp = {}, 26 | children, 27 | fullWidth = true, 28 | ...props 29 | }: TablePropsType): JSX.Element => { 30 | const theme = useTheme(); 31 | 32 | return ( 33 | 45 | {children} 46 |
47 | ); 48 | }; 49 | 50 | export default Table; 51 | -------------------------------------------------------------------------------- /src/components/atoms/Table/Table.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export interface TablePropsType { 20 | children: React.ReactNode; 21 | fullWidth?: boolean; 22 | styles?: StylesObject; 23 | } 24 | 25 | export interface TableBodyPropsType { 26 | children: React.ReactNode; 27 | styles?: StylesObject; 28 | } 29 | 30 | export interface TableDescriptionPropsType { 31 | children: React.ReactNode | string; 32 | styles?: StylesObject; 33 | colSpan?: number; 34 | } 35 | 36 | export interface TableHeadPropsType { 37 | align?: "left" | "right" | "center"; 38 | children: React.ReactNode; 39 | styles?: StylesObject; 40 | } 41 | 42 | export interface TableRowPropsType 43 | extends React.HTMLProps { 44 | children?: React.ReactNode; 45 | styles?: StylesObject; 46 | clickable?: boolean; 47 | onClick?: () => void; 48 | tabIndex?: number; 49 | onKeyPress?: any; 50 | ref?: any; 51 | } 52 | 53 | export interface TableHeadingPropsType { 54 | children?: React.ReactNode; 55 | styles?: StylesObject; 56 | colSpan?: number; 57 | } 58 | -------------------------------------------------------------------------------- /src/components/atoms/Table/TableBody.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /**@jsx jsx */ 18 | import { jsx } from "@emotion/react"; 19 | import { stylegun } from "helpers/stylegun"; 20 | import { styles } from "./Table.styles"; 21 | import { useTheme } from "hooks/useTheme"; 22 | import { TableBodyPropsType } from "./Table.types"; 23 | 24 | const TableBody = ({ 25 | children, 26 | styles: stylesProp = {}, 27 | ...props 28 | }: TableBodyPropsType): JSX.Element => { 29 | const theme = useTheme(); 30 | return ( 31 | 41 | {children} 42 | 43 | ); 44 | }; 45 | 46 | export default TableBody; 47 | -------------------------------------------------------------------------------- /src/components/atoms/Table/TableDescription.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /**@jsx jsx */ 18 | import { jsx } from "@emotion/react"; 19 | 20 | import { Text } from "components"; 21 | import { stylegun } from "helpers/stylegun"; 22 | import { styles } from "./Table.styles"; 23 | import { useTheme } from "hooks/useTheme"; 24 | import { TableDescriptionPropsType } from "./Table.types"; 25 | 26 | const TableDescription = ({ 27 | children, 28 | styles: stylesProp = {}, 29 | ...props 30 | }: TableDescriptionPropsType): JSX.Element => { 31 | const theme = useTheme(); 32 | 33 | return ( 34 | 45 | {typeof children === "string" ? ( 46 | 47 | {children} 48 | 49 | ) : ( 50 | children 51 | )} 52 | 53 | ); 54 | }; 55 | 56 | export default TableDescription; 57 | -------------------------------------------------------------------------------- /src/components/atoms/Table/TableHead.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /**@jsx jsx */ 18 | import { jsx } from "@emotion/react"; 19 | import { stylegun } from "helpers/stylegun"; 20 | import { styles } from "./Table.styles"; 21 | import { useTheme } from "hooks/useTheme"; 22 | import { TableHeadPropsType } from "./Table.types"; 23 | 24 | const TableHead = ({ 25 | children, 26 | align = "left", 27 | styles: stylesProp = {}, 28 | ...props 29 | }: TableHeadPropsType): JSX.Element => { 30 | const theme = useTheme(); 31 | return ( 32 | 44 | {children} 45 | 46 | ); 47 | }; 48 | 49 | export default TableHead; 50 | -------------------------------------------------------------------------------- /src/components/atoms/Table/TableHeading.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /**@jsx jsx */ 18 | import { jsx } from "@emotion/react"; 19 | import { stylegun } from "helpers/stylegun"; 20 | import { styles } from "./Table.styles"; 21 | import { useTheme } from "hooks/useTheme"; 22 | import { TableHeadingPropsType } from "./Table.types"; 23 | 24 | import { Text } from "components"; 25 | 26 | const TableHeading = ({ 27 | children, 28 | styles: stylesProp = {}, 29 | ...props 30 | }: TableHeadingPropsType): JSX.Element => { 31 | const theme = useTheme(); 32 | return ( 33 | 44 | 45 | {children} 46 | 47 | 48 | ); 49 | }; 50 | 51 | export default TableHeading; 52 | -------------------------------------------------------------------------------- /src/components/atoms/Table/TableRow.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /**@jsx jsx */ 18 | import { jsx } from "@emotion/react"; 19 | import React from "react"; 20 | import { styles } from "./Table.styles"; 21 | import { useTheme } from "hooks/useTheme"; 22 | import { stylegun } from "helpers/stylegun"; 23 | import { TableRowPropsType } from "./Table.types"; 24 | 25 | const TableRow = React.forwardRef( 26 | ( 27 | { 28 | children, 29 | styles: stylesProp = {}, 30 | clickable = false, 31 | onClick, 32 | tabIndex, 33 | ...props 34 | }: TableRowPropsType, 35 | ref?: React.Ref 36 | ) => { 37 | const theme = useTheme(); 38 | return ( 39 | 54 | {children} 55 | 56 | ); 57 | } 58 | ); 59 | 60 | export default TableRow; 61 | -------------------------------------------------------------------------------- /src/components/atoms/Text/Text.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from "react"; 18 | import Text from "./Text"; 19 | import Stack from "../../layouts/Stack/Stack"; 20 | 21 | export default { 22 | title: "Atoms/Text", 23 | component: Text, 24 | }; 25 | 26 | export const Sizes = () => ( 27 | 28 | Default typography 29 | 30 | With color 31 | 32 | 33 | With color and weight 34 | 35 | Variant 1 size 36 | Variant 2 size 37 | Variant 3 size 38 | 39 | Bigger variant of text? Checkout heading, will be a better option 40 | symantic wise. 41 | 42 | 43 | ); 44 | -------------------------------------------------------------------------------- /src/components/atoms/Text/Text.styles.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export const styles:Record = { 20 | Text: { 21 | color: "grey.dark", 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /src/components/atoms/Text/Text.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** @jsx jsx */ 18 | import { jsx } from "@emotion/react"; 19 | 20 | import { styles } from "./Text.styles"; 21 | import { stylegun } from "helpers/stylegun"; 22 | import { useTheme } from "hooks/useTheme"; 23 | import { TextPropsType } from "./Text.types"; 24 | 25 | const Text = ({ 26 | variant = 3, 27 | weight, 28 | color = "grey.dark", 29 | styles: stylesProp = {}, 30 | children, 31 | ...props 32 | }: TextPropsType): JSX.Element => { 33 | const theme = useTheme(); 34 | return ( 35 |
49 | {children} 50 |
51 | ); 52 | }; 53 | 54 | export default Text; 55 | -------------------------------------------------------------------------------- /src/components/atoms/Text/Text.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export interface TextPropsType { 20 | styles?: StylesObject; 21 | children: React.ReactNode; 22 | variant?: number; 23 | weight?: number; 24 | color?: string; 25 | } 26 | -------------------------------------------------------------------------------- /src/components/layouts/Container/Container.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** @jsx jsx */ 18 | import React from "react"; 19 | import { jsx } from "@emotion/react"; 20 | import { stylegun } from "helpers/stylegun"; 21 | import { useTheme } from "hooks/useTheme"; 22 | 23 | import { ContainerPropsType } from "./Container.types"; 24 | 25 | const Container = React.forwardRef( 26 | ( 27 | { 28 | fullWidth = false, 29 | styles: stylesProp = {}, 30 | ...props 31 | }: ContainerPropsType, 32 | ref?: React.Ref 33 | ): JSX.Element => { 34 | const theme = useTheme(); 35 | 36 | const styles = { 37 | ...(fullWidth ? { width: "100%" } : {}), 38 | }; 39 | 40 | return ( 41 |
49 | ); 50 | } 51 | ); 52 | 53 | export default Container; 54 | -------------------------------------------------------------------------------- /src/components/layouts/Container/Container.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export interface ContainerPropsType extends React.HTMLProps { 20 | styles?: StylesObject; 21 | fullWidth?: true | false; 22 | children?: React.ReactNode; 23 | onClick?: () => void; 24 | } 25 | -------------------------------------------------------------------------------- /src/components/layouts/Portal/Portal.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { useEffect, useMemo } from "react"; 18 | import { createPortal } from "react-dom"; 19 | import { PortalType } from "./Portal.types"; 20 | 21 | const Portal = ({ children }: PortalType) => { 22 | const portalRoot = document.body; 23 | const mountElement = useMemo(() => document.createElement("div"), []); 24 | useEffect(() => { 25 | portalRoot.appendChild(mountElement); 26 | return () => { 27 | portalRoot.removeChild(mountElement); 28 | }; 29 | }, [mountElement, portalRoot]); 30 | return createPortal(children, mountElement); 31 | }; 32 | 33 | export default Portal; 34 | -------------------------------------------------------------------------------- /src/components/layouts/Portal/Portal.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | export interface PortalType { 18 | children: React.ReactNode; 19 | } 20 | -------------------------------------------------------------------------------- /src/components/layouts/Stack/Stack.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** @jsx jsx */ 18 | import { jsx } from "@emotion/react"; 19 | import { stylegun } from "helpers/stylegun"; 20 | import { useTheme } from "hooks/useTheme"; 21 | import { StackPropsType } from "./Stack.types"; 22 | 23 | const Stack = ({ 24 | fullWidth, 25 | justify, 26 | inline, 27 | align, 28 | direction, 29 | gap, 30 | wrap = "wrap", 31 | styles: stylesProp = {}, 32 | ...props 33 | }: StackPropsType): JSX.Element => { 34 | const theme = useTheme(); 35 | 36 | const styles = { 37 | ...(fullWidth ? { width: "100%" } : {}), 38 | display: inline ? "inline-flex" : "flex", 39 | justifyContent: justify, 40 | alignItems: align, 41 | flexWrap: wrap, 42 | flexDirection: direction === "vertical" ? "column" : "row", 43 | "> * + *": 44 | direction === "vertical" 45 | ? { 46 | marginTop: `{{space.${gap}}}`, 47 | marginInlineStart: 0, 48 | } 49 | : { 50 | marginLeft: `{{space.${gap}}}`, 51 | }, 52 | }; 53 | 54 | return ( 55 |
63 | ); 64 | }; 65 | 66 | Stack.defaultProps = { 67 | gap: 0, 68 | direction: "horizontal", 69 | }; 70 | 71 | export default Stack; 72 | -------------------------------------------------------------------------------- /src/components/layouts/Stack/Stack.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export interface StackPropsType { 20 | align?: string; 21 | styles?: StylesObject; 22 | direction: "horizontal" | "vertical"; 23 | wrap?: "wrap" | "nowrap" | "wrap-reverse"; 24 | gap?: number; 25 | inline?: boolean; 26 | justify?: string; 27 | fullWidth?: boolean; 28 | children: React.ReactNode; 29 | onClick?: () => void; 30 | } 31 | -------------------------------------------------------------------------------- /src/components/molecules/Accordion/Accordion.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React, { useState } from "react"; 18 | import Accordion from "./Accordion"; 19 | import AccordionItem from "./AccordionItem"; 20 | import { Text } from "components"; 21 | 22 | 23 | export default { 24 | title: "Molecules/Accordion", 25 | component: Accordion, 26 | }; 27 | 28 | export const AccordionDefault = () => { 29 | const [activeId, setActiveId] = useState(null); 30 | return ( 31 | 32 | { 35 | setActiveId(id); 36 | }} 37 | > 38 | 39 | This is Home Section 40 | 41 | 42 | 43 | This is About Section 44 | 45 | 46 | 47 | This is Contact Section 48 | 49 | 50 | 51 | ); 52 | }; 53 | -------------------------------------------------------------------------------- /src/components/molecules/Accordion/Accordion.styles.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export const styles: Record = { 20 | ChevronStyles: { 21 | cursor: "pointer", 22 | marginX: 2, 23 | size: 1, 24 | borderBottom: "2px solid {{colors.grey}} ", 25 | borderRight: "2px solid {{colors.grey}} ", 26 | }, 27 | AccordionItemContent: { 28 | paddingY: 1, 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /src/components/molecules/Accordion/Accordion.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | 20 | export interface AccordionPropsType { 21 | selected: string | null; 22 | children: React.ReactNode; 23 | styles?: StylesObject; 24 | onSelect: (id: string | null) => void; 25 | } 26 | 27 | export interface AccordionItemPropsType { 28 | children: any; 29 | label: string; 30 | id: string; 31 | open?: boolean; 32 | } 33 | 34 | export type ChevronContainerPropsType = { 35 | isOpen: boolean; 36 | }; 37 | -------------------------------------------------------------------------------- /src/components/molecules/Accordion/AccordionItem.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | /** @jsx jsx */ 18 | 19 | import { AccordionItemPropsType } from "./Accordion.types"; 20 | 21 | const AccordionItem = ({ children }: AccordionItemPropsType) => { 22 | return children; 23 | }; 24 | 25 | export default AccordionItem; 26 | -------------------------------------------------------------------------------- /src/components/molecules/Alert/Alert.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from "react"; 18 | import Alert from "./Alert"; 19 | 20 | export default { 21 | title: "Molecules/Alert", 22 | component: Alert, 23 | }; 24 | 25 | export const AlertDefault = () => { 26 | return ( 27 | 28 | Here is something that you might like to know 29 | 30 | ); 31 | }; 32 | 33 | export const AlertWarning = () => { 34 | return ( 35 | 36 | Your information has not been saved. 37 | 38 | ); 39 | }; 40 | 41 | export const AlertSuccess = () => { 42 | return ( 43 | 44 | Congrats on the internet loading your request. 45 | 46 | ); 47 | }; 48 | 49 | export const AlertError = () => { 50 | return ( 51 | 52 | Sorry! There was a problem with your request. 53 | 54 | ); 55 | }; 56 | 57 | export const AlertTip = () => { 58 | return ( 59 | 60 | Here are some tips. 61 | 62 | ); 63 | }; 64 | -------------------------------------------------------------------------------- /src/components/molecules/Alert/Alert.styles.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export const styles: Record = { 20 | AlertStyles: { 21 | border: "none", 22 | boxShadow: "none", 23 | padding: 1, 24 | borderRadius: 2, 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /src/components/molecules/Alert/Alert.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export interface AlertPropsType { 20 | variant?: "info" | "warning" | "error" | "success" | "tip"; 21 | heading?: string; 22 | children?: React.ReactNode; 23 | styles?: StylesObject; 24 | } 25 | -------------------------------------------------------------------------------- /src/components/molecules/Alert/svgs/error.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /src/components/molecules/Alert/svgs/info.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /src/components/molecules/Alert/svgs/success.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /src/components/molecules/Alert/svgs/tip.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /src/components/molecules/Alert/svgs/warning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /src/components/molecules/CopyText/CopyText.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from "react"; 18 | 19 | import CopyText from "./CopyText"; 20 | 21 | export default { 22 | title: "Molecules/CopyText", 23 | component: CopyText, 24 | }; 25 | 26 | export const CopyTextDefault = () => { 27 | return ( 28 | 29 | 30 | 31 | ); 32 | }; 33 | -------------------------------------------------------------------------------- /src/components/molecules/CopyText/CopyText.styles.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export const styles: Record = { 20 | CopyTextContainer: { 21 | position: "relative", 22 | }, 23 | Input: { 24 | borderRadius: "100px 0 0 100px", 25 | borderRight: 0, 26 | ":disabled": { 27 | opacity: 1, 28 | }, 29 | flexGrow: 1, 30 | color: "pink", 31 | border: 0, 32 | background: "pink.translucent", 33 | fontWeight: 500, 34 | overflow: "hidden", 35 | textOverflow: "ellipsis", 36 | paddingRight: 0, 37 | }, 38 | Button: { 39 | display: "flex", 40 | borderRadius: "0 100px 100px 0", 41 | background: "pink.translucent", 42 | ":hover": { 43 | background: "pink.light", 44 | }, 45 | }, 46 | CopiedToast: { 47 | zIndex: "tooltip", 48 | top: "50%", 49 | transform: "translateY(-50%)", 50 | position: "absolute", 51 | left: "calc(100% + {{space.1}})", 52 | paddingX: 1, 53 | paddingY: "2px", 54 | background: "grey.default", 55 | borderRadius: 1, 56 | color: "white", 57 | transition: "opacity 250ms ease-out", 58 | }, 59 | }; 60 | -------------------------------------------------------------------------------- /src/components/molecules/CopyText/CopyText.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export interface CopyTextPropsType { 20 | styles?: StylesObject; 21 | text: string; 22 | onClick?: (text: string | undefined) => void; 23 | } 24 | -------------------------------------------------------------------------------- /src/components/molecules/CopyText/svgs/copy.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | -------------------------------------------------------------------------------- /src/components/molecules/DatePicker/DatePicker.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { noop } from "helpers/utils"; 18 | 19 | import React from "react"; 20 | import DatePicker from "./DatePicker"; 21 | 22 | export default { 23 | title: "Molecules/DatePicker", 24 | component: DatePicker, 25 | }; 26 | 27 | export const Default = () => ( 28 | 29 | 35 | 36 | ); 37 | 38 | export const DatePickerWithTime = () => ( 39 | 40 | 47 | 48 | ); 49 | -------------------------------------------------------------------------------- /src/components/molecules/DatePicker/TimePicker.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | export type TimePickerForm = { 18 | startTimezone: { 19 | default: string; 20 | }; 21 | endTimezone: { 22 | default: string; 23 | }; 24 | startTimeHour: { 25 | default: number; 26 | }; 27 | startTimeMinute: { 28 | default: number; 29 | }; 30 | endTimeHour: { 31 | default: number; 32 | }; 33 | endTimeMinute: { 34 | default: number; 35 | }; 36 | }; 37 | -------------------------------------------------------------------------------- /src/components/molecules/DatePicker/constants.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | export const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]; 18 | 19 | export const monthLabels = [ 20 | "Jan", 21 | "Feb", 22 | "Mar", 23 | "Apr", 24 | "May", 25 | "Jun", 26 | "Jul", 27 | "Aug", 28 | "Sep", 29 | "Oct", 30 | "Nov", 31 | "Dec", 32 | ]; 33 | -------------------------------------------------------------------------------- /src/components/molecules/DatePicker/icons/left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/components/molecules/DatePicker/icons/right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/components/molecules/Floater/Floater.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from "react"; 18 | import Floater from "./Floater"; 19 | import { Button } from "components"; 20 | export default { 21 | title: "Molecules/Floater", 22 | component: Floater, 23 | }; 24 | 25 | export const FloaterRight = () => { 26 | return ( 27 | <> 28 | 29 | 30 | 31 | 32 | ); 33 | }; 34 | 35 | export const FloaterLeft = () => { 36 | return ( 37 | <> 38 | 39 | 40 | 41 | 42 | ); 43 | }; 44 | 45 | export const FloaterTop = () => { 46 | return ( 47 | <> 48 | 49 | 50 | 51 | 52 | ); 53 | }; 54 | 55 | export const FloaterBottom = () => { 56 | return ( 57 | <> 58 | 59 | 60 | 61 | 62 | ); 63 | }; 64 | -------------------------------------------------------------------------------- /src/components/molecules/Floater/Floater.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export type FloaterPosition = "top" | "left" | "right" | "bottom" | "rightTop"; 20 | export interface FloaterPropType { 21 | children: React.ReactNode; 22 | onClick?: () => void; 23 | position: FloaterPosition; 24 | show?: boolean; 25 | styles?: StylesObject; 26 | content?: string | any; 27 | color?: string; 28 | } 29 | -------------------------------------------------------------------------------- /src/components/molecules/InfoTooltip/InfoTooltip.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from "react"; 18 | import { Stack, Text } from "components"; 19 | import InfoTooltip from "./InfoTooltip"; 20 | export default { 21 | title: "Molecules/InfoTooltip", 22 | component: InfoTooltip, 23 | }; 24 | 25 | export const DefaultInfoTooltip = () => { 26 | return ( 27 | ( 30 | 31 | Sampling Ratio 32 | 33 | Adjust the trace sampling rate for Dgraph queries with 34 | the --trace option for Dgraph Alphas. By default, 35 | --trace is set to 0.01 to trace 1% of queries. 36 | 37 | 38 | )} 39 | /> 40 | ); 41 | }; 42 | -------------------------------------------------------------------------------- /src/components/molecules/InfoTooltip/InfoTooltip.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from "react"; 18 | import Container from "components/layouts/Container/Container"; 19 | import { ReactComponent as InfoIcon } from "./icons/info.svg"; 20 | import Tooltip from "../Tooltip/Tooltip"; 21 | import { InfoToolTipPropsType } from "./InfoTooltip.types"; 22 | 23 | const InfoTooltip = ({ 24 | content, 25 | position = "rightTop", 26 | styles: stylesProp, 27 | }: InfoToolTipPropsType) => { 28 | return ( 29 | 30 | 31 | 32 | 33 | 34 | ); 35 | }; 36 | 37 | export default InfoTooltip; 38 | -------------------------------------------------------------------------------- /src/components/molecules/InfoTooltip/InfoTooltip.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | import { FloaterPosition } from "../Floater/Floater.types"; 19 | 20 | export type InfoToolTipPropsType = { 21 | content: React.ReactNode; 22 | position?: FloaterPosition; 23 | styles?: StylesObject; 24 | }; 25 | -------------------------------------------------------------------------------- /src/components/molecules/InfoTooltip/icons/info.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | -------------------------------------------------------------------------------- /src/components/molecules/Modal/Modal.styles.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { StylesObject } from "../../../types"; 18 | 19 | export const styles: Record = { 20 | Overlay: { 21 | background: "grey.dark", 22 | position: "fixed", 23 | zIndex: "overlay", 24 | top: 0, 25 | left: 0, 26 | right: 0, 27 | bottom: 0, 28 | transition: "200ms opacity ease-out", 29 | willChange: "opacity", 30 | }, 31 | ShowOverlay: { 32 | opacity: 0.3, 33 | pointerEvents: "unset", 34 | }, 35 | HideOverlay: { 36 | opacity: 0, 37 | pointerEvents: "none", 38 | }, 39 | ModalContainer: { 40 | minWidth: "450px", 41 | position: "absolute", 42 | top: "50%", 43 | left: "50%", 44 | transform: "translate(-50%, -50%)", 45 | zIndex: "modal", 46 | transition: "200ms opacity ease-out, 200ms transform ease-out", 47 | willChange: "opacity, transform", 48 | }, 49 | ShowModal: { 50 | transform: "translate(-50%, -50%) scale(1)", 51 | opacity: 1, 52 | }, 53 | HideModal: { 54 | opacity: 0, 55 | transition: "none", 56 | transform: "translate(-50%, -50%) scale(1.05)", 57 | pointerEvents: "none", 58 | visibility: "hidden", 59 | }, 60 | }; 61 | -------------------------------------------------------------------------------- /src/components/molecules/Modal/Modal.types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { ButtonVariantType } from "components/atoms/Button/Button.types"; 18 | import { StylesObject } from "../../../types"; 19 | 20 | export interface ModalPropsType { 21 | children?: React.ReactNode; 22 | closeLabel?: string; 23 | continueLabel?: string; 24 | styles?: StylesObject; 25 | heading?: string; 26 | isOpen: boolean; 27 | onClose?: () => void; 28 | onContinue?: () => void; 29 | hideCloseButton?: boolean; 30 | continueButtonVariant?: ButtonVariantType; 31 | disableEscape?: boolean; 32 | disableOverlay?: boolean; 33 | disableContinueButton?: boolean; 34 | } 35 | -------------------------------------------------------------------------------- /src/components/molecules/Navbar/Navbar.stories.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Dgraph Labs, Inc. and Contributors 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React, { useState } from "react"; 18 | 19 | import { Button, Select, Navbar, NavbarLogo } from "components"; 20 | 21 | export default { 22 | title: "Molecules/Navbar", 23 | component: Navbar, 24 | }; 25 | 26 | interface SelectValueType { 27 | value: any; 28 | } 29 | 30 | export const NavbarStory = () => { 31 | const [selected, setSelected] = useState(null); 32 | 33 | return ( 34 | 35 | 36 | 37 | { 36 | setSelected(value); 37 | }} 38 | values={Array(15) 39 | .fill(0) 40 | .map((x, index) => ({ 41 | label: `Option ${index}`, 42 | value: `option${index}`, 43 | id: `op${index}`, 44 | }))} 45 | /> 46 | 47 | ); 48 | }; 49 | 50 | export const SelectLongName = () => { 51 | const [selected, setSelected] = useState({ 52 | label: "It is going to be a long long long long option", 53 | }); 54 | 55 | return ( 56 | 57 |