├── .gitignore ├── Atlaskit.framerfx ├── .yarnignore ├── README.md ├── build │ └── index.js ├── code │ ├── AKProps.ts │ ├── AvatarGroup │ │ └── AKAvatarGroup.tsx │ ├── Badge │ │ └── AKBadge.tsx │ ├── Banner │ │ └── akBanner.tsx │ ├── Breadcrumbs │ │ └── AKBreadcrumbs.tsx │ ├── Button │ │ └── AKButton.tsx │ ├── Checkbox │ │ └── AKCheckbox.tsx │ ├── Code │ │ ├── AKCodeBlock.tsx │ │ ├── AKCodeInline.tsx │ │ └── Code.ts │ ├── Examples.tsx │ ├── FormHeader │ │ └── AKFormHeader.tsx │ ├── GlobalNavigation │ │ └── GlobalNavigation.tsx │ ├── ProgressIndicator │ │ └── progressIndicator.tsx │ ├── Radio │ │ ├── AKRadio.tsx │ │ └── AKRadioGroup.tsx │ ├── Select │ │ └── AkSelect.tsx │ ├── TextField │ │ └── TextField.tsx │ ├── Toggle │ │ └── AKToggle.tsx │ └── canvas.tsx ├── design │ └── document.json ├── metadata │ ├── artwork.png │ └── icon.png ├── package.json ├── tsconfig.json └── yarn.lock └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | # MacOS 2 | .DS_Store 3 | 4 | # repo 5 | */node_modules/* 6 | 7 | # Framer X 8 | .cache 9 | .config.json 10 | .backups 11 | .cache 12 | ## Auth 13 | .npmrc 14 | 15 | # Editors 16 | .idea 17 | .vscode 18 | -------------------------------------------------------------------------------- /Atlaskit.framerfx/.yarnignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | Icon\r 3 | .cache 4 | .config.json 5 | .backups 6 | -------------------------------------------------------------------------------- /Atlaskit.framerfx/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atlassian/atlaskit-framerx/dfb9e4968d11073975128937305a67970362aa23/Atlaskit.framerfx/README.md -------------------------------------------------------------------------------- /Atlaskit.framerfx/code/AKProps.ts: -------------------------------------------------------------------------------- 1 | export default interface AKProps { 2 | width?: number; 3 | height?: number; 4 | } 5 | -------------------------------------------------------------------------------- /Atlaskit.framerfx/code/AvatarGroup/AKAvatarGroup.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { PropertyControls, ControlType } from "framer"; 3 | import AvatarGroup from '@atlaskit/avatar-group'; 4 | import AKProps from "../AKProps"; 5 | 6 | export const avatarUrl: string = 7 | 'https://pbs.twimg.com/profile_images/803832195970433027/aaoG6PJI_400x400.jpg'; 8 | 9 | const style: React.CSSProperties = { 10 | display: "flex", 11 | flexDirection: "row", 12 | justifyContent: "center", 13 | alignItems: "center", 14 | height: "100%" 15 | }; 16 | 17 | // Define type of property 18 | interface Props extends AKProps { 19 | appearance: string, 20 | maxCount: number, 21 | size: string, 22 | borderColor: string, 23 | numberOfAvatar: number, 24 | avatarAppearance: string, 25 | } 26 | 27 | export class AKAvatarGroup extends React.Component { 28 | // The default properties of the component. 29 | static defaultProps = { 30 | appearance: "grid", 31 | borderColor: '#FFFFFF', 32 | width: 120, 33 | avatarAppearance: 'circle', 34 | maxCount: 11, 35 | height: 38 36 | }; 37 | 38 | // The property controls for the component. 39 | static propertyControls: PropertyControls = { 40 | borderColor: { 41 | type: ControlType.Color, 42 | title: "Border Color" 43 | }, 44 | numberOfAvatar: { 45 | type: ControlType.Number, 46 | title: 'Number of Avatar' 47 | }, 48 | 49 | size: { 50 | type: ControlType.Enum, 51 | title: 'Size', 52 | optionTitles: [ 53 | "xsmall", 54 | "small", 55 | "medium", 56 | "large", 57 | "xlarge", 58 | "xxlarge" 59 | ], 60 | options: [ 61 | "xsmall", 62 | "small", 63 | "medium", 64 | "large", 65 | "xlarge", 66 | "xxlarge" 67 | ] 68 | }, 69 | appearance: { 70 | type: ControlType.Enum, 71 | title: "Appearance", 72 | optionTitles: [ 73 | "grid", 74 | "stack" 75 | ], 76 | options: [ 77 | "grid", 78 | "stack" 79 | ] 80 | }, 81 | maxCount: { 82 | type: ControlType.Number, 83 | title: 'maxCount', 84 | }, 85 | avatarAppearance: { 86 | type: ControlType.Enum, 87 | title: "avatarAppearance", 88 | optionTitles: [ 89 | "square", 90 | "circle" 91 | ], 92 | options: [ 93 | "square", 94 | "circle" 95 | ] 96 | } 97 | }; 98 | 99 | render() { 100 | const {avatarAppearance, numberOfAvatar, ...rest} = this.props; 101 | return ( 102 | ({ 103 | key: i, 104 | appearance: avatarAppearance, 105 | enableTooltip: true, 106 | name: `Grid Avatar ${i + 1}`, 107 | src: avatarUrl, 108 | size: this.props.size, 109 | }))}/> 110 | ); 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /Atlaskit.framerfx/code/Badge/AKBadge.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { PropertyControls, ControlType } from 'framer'; 3 | import Badge from '@atlaskit/badge'; 4 | import AKProps from '../AKProps'; 5 | 6 | const style: React.CSSProperties = { 7 | display: 'flex', 8 | flexDirection: 'row', 9 | justifyContent: 'center', 10 | alignItems: 'center', 11 | height: '100%' 12 | }; 13 | 14 | // Define type of property 15 | interface Props extends AKProps { 16 | text: string; 17 | appearance: string; 18 | } 19 | 20 | export class AKBadge extends React.Component { 21 | // The default properties of the component. 22 | static defaultProps = { 23 | text: '1', 24 | appearance: 'primary', 25 | 26 | width: 120, 27 | height: 38 28 | } 29 | 30 | // The property controls for the component. 31 | static propertyControls: PropertyControls = { 32 | text: { 33 | type: ControlType.String, 34 | title: 'Text' 35 | }, 36 | appearance: { 37 | type: ControlType.Enum, 38 | title: 'Appearance', 39 | optionTitles: ["added", 40 | "default", 41 | "important", 42 | "primary", 43 | "primaryInverted", 44 | "removed",], 45 | options: ["added", 46 | "default", 47 | "important", 48 | "primary", 49 | "primaryInverted", 50 | "removed"] 51 | } 52 | } 53 | 54 | render() { 55 | return ( 56 | 57 | {this.props.text} 58 | 59 | ); 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /Atlaskit.framerfx/code/Banner/akBanner.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { PropertyControls, ControlType } from "framer"; 3 | import Banner from "@atlaskit/banner"; 4 | import AKProps from "../AKProps"; 5 | 6 | const style: React.CSSProperties = { 7 | display: "flex", 8 | flexDirection: "row", 9 | justifyContent: "center", 10 | alignItems: "center", 11 | height: "100%" 12 | }; 13 | 14 | // Define type of property 15 | interface Props extends AKProps { 16 | text: string; 17 | appearance: string; 18 | isOpen: boolean; 19 | } 20 | 21 | export class AKBanner extends React.Component { 22 | // The default properties of the component. 23 | static defaultProps = { 24 | text: "This is a banner", 25 | appearance: "warning", 26 | isOpen: true, 27 | width: 120, 28 | 29 | height: 38 30 | }; 31 | 32 | // The property controls for the component. 33 | static propertyControls: PropertyControls = { 34 | text: { 35 | type: ControlType.String, 36 | title: "Text" 37 | }, 38 | appearance: { 39 | type: ControlType.Enum, 40 | title: "Appearance", 41 | optionTitles: [ 42 | "warning", 43 | "error", 44 | "announcement" 45 | ], 46 | options: [ 47 | "warning", 48 | "error", 49 | "announcement" 50 | ] 51 | }, 52 | isOpen: { 53 | type: ControlType.Boolean, 54 | title: 'isOpen', 55 | } 56 | }; 57 | 58 | render() { 59 | const {text, ...rest} = this.props; 60 | return ( 61 | 62 | {text} 63 | 64 | ); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /Atlaskit.framerfx/code/Breadcrumbs/AKBreadcrumbs.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { PropertyControls, ControlType } from "framer"; 3 | import { AtlassianIcon } from '@atlaskit/logo'; 4 | import { BreadcrumbsStateless, BreadcrumbsItem } from '@atlaskit/breadcrumbs'; 5 | 6 | const style: React.CSSProperties = { 7 | display: 'flex', 8 | flexDirection: 'row', 9 | justifyContent: 'center', 10 | alignItems: 'center', 11 | height: '100%' 12 | }; 13 | 14 | // Define type of property 15 | interface Props { 16 | isExpanded: boolean, 17 | breadCrumbs: string, 18 | maxItems: number, 19 | } 20 | 21 | export class AkFormHeader extends React.Component { 22 | 23 | // Set default properties 24 | static defaultProps = { 25 | isExpanded: false, 26 | breadCrumbs: 'Pages|Home|Item|Item2', 27 | maxItems: 2, 28 | } 29 | 30 | // Items shown in property panel 31 | static propertyControls: PropertyControls = { 32 | isExpanded: { 33 | type: ControlType.Boolean, 34 | title: "isExpanded", 35 | }, 36 | breadCrumbs: { 37 | type: ControlType.String, 38 | title: 'breadCrumbs' 39 | }, 40 | maxItems: { 41 | type: ControlType.Number, 42 | title: 'maxItems' 43 | } 44 | } 45 | 46 | render() { 47 | const { isExpanded, breadCrumbs, maxItems } = this.props; 48 | const items = (breadCrumbs === '' ? [] : breadCrumbs.split('|')).map(v => ( 49 | 50 | )) 51 | return (
52 | 56 | {items} 57 | 58 |
) 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /Atlaskit.framerfx/code/Button/AKButton.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { PropertyControls, ControlType } from 'framer'; 3 | import Button from '@atlaskit/button'; 4 | import AKProps from '../AKProps'; 5 | 6 | const style: React.CSSProperties = { 7 | display: 'flex', 8 | flexDirection: 'row', 9 | justifyContent: 'center', 10 | alignItems: 'center', 11 | height: '100%' 12 | }; 13 | 14 | // Define type of property 15 | interface Props extends AKProps { 16 | text: string; 17 | isLoading: boolean; 18 | isDisabled: boolean; 19 | appearance: string; 20 | shouldFitContainer: boolean; 21 | } 22 | 23 | export class AKButton extends React.Component { 24 | // The default properties of the component. 25 | static defaultProps = { 26 | text: 'Button Text', 27 | isLoading: false, 28 | isDisabled: false, 29 | appearance: 'primary', 30 | shouldFitContainer: false, 31 | 32 | width: 300, 33 | height: 900 34 | } 35 | 36 | // The property controls for the component. 37 | static propertyControls: PropertyControls = { 38 | text: { 39 | type: ControlType.String, 40 | title: 'Text' 41 | }, 42 | isLoading: { 43 | type: ControlType.Boolean, 44 | title: 'Loading' 45 | }, 46 | isDisabled: { 47 | type: ControlType.Boolean, 48 | title: 'Disabled' 49 | }, 50 | appearance: { 51 | type: ControlType.Enum, 52 | title: 'Appearance', 53 | optionTitles: ['😀 Default', '🔵 Primary', '⚠️ Warning', '🚨 Danger', '❓ Help', '👻 Subtle', '🔗 Link', '👻 Subtle Link 🔗'], 54 | options: ['default', 'primary', 'warning', 'danger', 'help', 'subtle', 'link', 'subtle-link'] 55 | }, 56 | shouldFitContainer: { 57 | type: ControlType.Boolean, 58 | title: 'Fit Container' 59 | } 60 | } 61 | 62 | render() { 63 | return ( 64 |
65 | 68 |
69 | ); 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /Atlaskit.framerfx/code/Checkbox/AKCheckbox.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { PropertyControls, ControlType } from 'framer'; 3 | import { Checkbox } from '@atlaskit/checkbox'; 4 | import AKProps from '../AKProps'; 5 | 6 | type Sizes = 'regular' | 'large'; 7 | 8 | // Define the properties of the component 9 | interface Props extends AKProps { 10 | label: string; 11 | isChecked: boolean; 12 | isDisabled: boolean; 13 | isInvalid: boolean; 14 | } 15 | 16 | export class AKCheckbox extends React.Component { 17 | // The default properties of the component. 18 | static defaultProps = { 19 | label: 'Checkbox', 20 | isChecked: false, 21 | isDisabled: false, 22 | isInvalid: false, 23 | 24 | width: 120, 25 | height: 28 26 | } 27 | 28 | // The property controls for the component. 29 | static propertyControls: PropertyControls = { 30 | label: { 31 | type: ControlType.String, 32 | title: 'Label' 33 | }, 34 | isChecked: { 35 | type: ControlType.Boolean, 36 | title: 'Checked?' 37 | }, 38 | isDisabled: { 39 | type: ControlType.Boolean, 40 | title: 'Disabled?' 41 | }, 42 | isInvalid: { 43 | type: ControlType.Boolean, 44 | title: 'Invalid?' 45 | } 46 | } 47 | 48 | render() { 49 | return ( 50 | 51 | ) 52 | } 53 | 54 | } -------------------------------------------------------------------------------- /Atlaskit.framerfx/code/Code/AKCodeBlock.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { PropertyControls, ControlType } from 'framer'; 3 | import { AkCodeBlock } from '@atlaskit/code'; 4 | import { displayLanguages, languages, allowedFileTypes } from './Code'; 5 | import AKProps from '../AKProps'; 6 | 7 | // Define type of property 8 | interface Props extends AKProps { 9 | usingFile: boolean; 10 | language: boolean; 11 | code: string; 12 | file: string; 13 | } 14 | 15 | interface State { 16 | code: string | undefined; 17 | } 18 | 19 | export class AKCodeBlock extends React.Component { 20 | // The default properties of the component. 21 | static defaultProps = { 22 | usingFile: false, 23 | language: 'text', 24 | code: '', 25 | 26 | width: 127, 27 | height: 38 28 | } 29 | 30 | // The property controls for the component. 31 | static propertyControls: PropertyControls = { 32 | language: { 33 | type: ControlType.Enum, 34 | title: 'Language', 35 | optionTitles: displayLanguages, 36 | options: languages 37 | }, 38 | usingFile: { 39 | type: ControlType.Boolean, 40 | title: 'From File' 41 | }, 42 | code: { 43 | type: ControlType.String, 44 | title: 'Code', 45 | hidden(props: Props) { 46 | return props.usingFile 47 | } 48 | }, 49 | file: { 50 | type: ControlType.File, 51 | title: 'Code', 52 | allowedFileTypes: allowedFileTypes, 53 | hidden(props: Props) { 54 | return !props.usingFile 55 | } 56 | } 57 | } 58 | 59 | constructor(props) { 60 | super(props); 61 | this.state = {code: props.code} 62 | if (props.usingFile) { 63 | this.downloadCode(props.file); 64 | } 65 | } 66 | 67 | componentWillReceiveProps(nextProps: Props) { 68 | if (nextProps !== this.props) { 69 | if (nextProps.usingFile) { 70 | if (nextProps.file !== this.props.file){ 71 | this.downloadCode(nextProps.file); 72 | } 73 | } 74 | else if (nextProps.code !== this.props.code) { 75 | this.setState({code: nextProps.code}) 76 | } 77 | } 78 | } 79 | 80 | downloadCode(path: string) { 81 | fetch(path) 82 | .then(response => response.text()) 83 | .then(text => this.setState({code: text})); 84 | } 85 | 86 | render() { 87 | return ( 88 | 89 | ) 90 | } 91 | 92 | } -------------------------------------------------------------------------------- /Atlaskit.framerfx/code/Code/AKCodeInline.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { PropertyControls, ControlType } from 'framer'; 3 | import { AkCode } from '@atlaskit/code'; 4 | import { displayLanguages, languages, allowedFileTypes } from './Code'; 5 | import AKProps from '../AKProps'; 6 | 7 | // Define type of property 8 | interface Props extends AKProps { 9 | usingFile: boolean; 10 | language: boolean; 11 | code: string; 12 | file: string; 13 | } 14 | 15 | interface State { 16 | code: string | undefined; 17 | } 18 | 19 | export class AKCodeInline extends React.Component { 20 | // The default properties of the component. 21 | static defaultProps = { 22 | usingFile: false, 23 | language: 'html', 24 | code: '', 25 | 26 | width: 95, 27 | height: 22 28 | } 29 | 30 | // The property controls for the component. 31 | static propertyControls: PropertyControls = { 32 | language: { 33 | type: ControlType.Enum, 34 | title: 'Language', 35 | optionTitles: displayLanguages, 36 | options: languages 37 | }, 38 | usingFile: { 39 | type: ControlType.Boolean, 40 | title: 'From File' 41 | }, 42 | code: { 43 | type: ControlType.String, 44 | title: 'Code', 45 | hidden(props: Props) { 46 | return props.usingFile 47 | } 48 | }, 49 | file: { 50 | type: ControlType.File, 51 | title: 'Code', 52 | allowedFileTypes: allowedFileTypes, 53 | hidden(props: Props) { 54 | return !props.usingFile 55 | } 56 | } 57 | } 58 | 59 | constructor(props) { 60 | super(props); 61 | this.state = {code: props.code} 62 | if (props.usingFile) { 63 | this.downloadCode(props.file); 64 | } 65 | } 66 | 67 | componentWillReceiveProps(nextProps: Props) { 68 | if (nextProps !== this.props) { 69 | if (nextProps.usingFile) { 70 | if (nextProps.file !== this.props.file){ 71 | this.downloadCode(nextProps.file); 72 | } 73 | } 74 | else if (nextProps.code !== this.props.code) { 75 | this.setState({code: nextProps.code}) 76 | } 77 | } 78 | } 79 | 80 | downloadCode(path: string) { 81 | fetch(path) 82 | .then(response => response.text()) 83 | .then(text => this.setState({code: text})); 84 | } 85 | 86 | render() { 87 | return ( 88 | 89 | ) 90 | } 91 | 92 | } -------------------------------------------------------------------------------- /Atlaskit.framerfx/code/Code/Code.ts: -------------------------------------------------------------------------------- 1 | export const languages = [ 2 | 'abap', 3 | 'actionscript', 4 | 'ada', 5 | 'arduino', 6 | 'autoit', 7 | 'c', 8 | 'c++', 9 | 'coffeescript', 10 | 'csharp', 11 | 'css', 12 | 'cuda', 13 | 'd', 14 | 'dart', 15 | 'delphi', 16 | 'elixir', 17 | 'erlang', 18 | 'fortran', 19 | 'foxpro', 20 | 'go', 21 | 'groovy', 22 | 'haskell', 23 | 'haxe', 24 | 'html', 25 | 'java', 26 | 'javascript', 27 | 'json', 28 | 'julia', 29 | 'kotlin', 30 | 'latex', 31 | 'livescript', 32 | 'lua', 33 | 'mathematica', 34 | 'matlab', 35 | 'objective-c', 36 | 'objective-j', 37 | 'objectpascal', 38 | 'ocaml', 39 | 'octave', 40 | 'perl', 41 | 'php', 42 | 'powershell', 43 | 'prolog', 44 | 'puppet', 45 | 'python', 46 | 'qml', 47 | 'r', 48 | 'racket', 49 | 'restructuredtext', 50 | 'ruby', 51 | 'rust', 52 | 'sass', 53 | 'scala', 54 | 'scheme', 55 | 'shell', 56 | 'smalltalk', 57 | 'sql', 58 | 'standardml', 59 | 'swift', 60 | 'tcl', 61 | 'tex', 62 | 'text', 63 | 'typescript', 64 | 'vala', 65 | 'verilog', 66 | 'vbnet', 67 | 'vhdl', 68 | 'xml', 69 | 'xquery' 70 | ] 71 | 72 | export const displayLanguages = [ 73 | 'ABAP', 74 | 'ActionScript', 75 | 'Ada', 76 | 'Arduino', 77 | 'autoit', 78 | 'C', 79 | 'C++', 80 | 'CoffeeScript', 81 | 'C# / CSharp', 82 | 'CSS', 83 | 'CUDA', 84 | 'D', 85 | 'Dart', 86 | 'Delphi', 87 | 'Elixir', 88 | 'Erlang', 89 | 'Fortran', 90 | 'FoxPro', 91 | 'Go', 92 | 'Groovy', 93 | 'Haskell', 94 | 'Haxe', 95 | 'HTML', 96 | 'Java', 97 | 'JavaScript', 98 | 'JSON', 99 | 'Julia', 100 | 'Kotlin', 101 | 'LaTeX', 102 | 'LiveScript', 103 | 'Lua', 104 | 'Mathematica', 105 | 'MatLab', 106 | 'Objective C', 107 | 'Objective J', 108 | 'Object Pascal', 109 | 'OCaml', 110 | 'Octave', 111 | 'Perl', 112 | 'PHP', 113 | 'Powershell', 114 | 'Prolog', 115 | 'Puppet', 116 | 'Python', 117 | 'QML', 118 | 'R', 119 | 'Racket', 120 | 'reStructuredText', 121 | 'Ruby', 122 | 'Rust', 123 | 'Sass', 124 | 'Scala', 125 | 'Scheme', 126 | 'Shell', 127 | 'SmallTalk', 128 | 'SQL', 129 | 'Standard ML', 130 | 'Swift', 131 | 'Tcl', 132 | 'Tex', 133 | 'Text', 134 | 'TypeScript', 135 | 'Vala', 136 | 'Verilog', 137 | 'Visual Basic', 138 | 'VHDL', 139 | 'XML', 140 | 'XQuery' 141 | ] 142 | 143 | // You have to explicitly set every file type for now. 144 | export const allowedFileTypes = [ 145 | 'abap', // ABAP 146 | 'as', // ActionScript 147 | 'ads', 'adb', // Ada 148 | 'ino', // Arduino 149 | 'au3', // AutoIt 150 | 'c', 'h', // C 151 | 'cpp', 'hpp', // C++ 152 | 'coffee', // CoffeeScript 153 | 'cs', // C# 154 | 'css', // CSS 155 | 'cu', // CUDA 156 | 'd', // D 157 | 'dart', // Dart 158 | 'dpr', // Delphi (Delphi Project File) 159 | 'ex', 'exs', // Elixir 160 | 'f', 'ftn', 'f90', 'f95', 'f03', 'f08', // Fortran 161 | // Todo: FoxPro 162 | 'go', // Golang 163 | 'groovy', // Groovy 164 | 'hs', 'lhs', // Haskell 165 | 'hx', // Haxe 166 | 'htm', 'html', 'xhtml', // HTML 167 | 'java', // Java 168 | 'js', 'jsx', // JavaScript 169 | 'json', // JSON 170 | 'jl', // Julia 171 | 'kt', // Kotlin 172 | 'tex', // LaTeX + Tex 173 | 'ls', // LiveScript 174 | 'lua', // Lua 175 | 'nb', 'cdf', // Mathematica 176 | 'm', // Matlab + Objective-C + Octave 177 | 'mm', // Objective-C 178 | 'j', // Objective-J 179 | 'ml', 'mli', 'o', // OCaml + UNIX object 180 | 'pl', // Perl 181 | 'php', // PHP 182 | 'ps1', // Powershell 183 | 'pro', // Prolog 184 | 'pp', // Puppet 185 | 'py', // Python 186 | 'qml', // QML 187 | 'r', // R 188 | 'rkt', // Racket 189 | 'txt', // reStructuredText + Text 190 | 'rb', // Ruby 191 | 'rs', // Rust 192 | 'sass', // Sass 193 | 'scala', // Scala 194 | 'scm', 'ss', // Scheme 195 | 'sh', // Shell 196 | 'st', // SmallTalk 197 | 'sql', // SQL 198 | 'sml', // Standard ML 199 | 'swift', // Swift 200 | 'tcl', // Tcl 201 | 'ts', 'tsx', // TypeScript 202 | 'vala', // Vala 203 | 'v', // Verilog 204 | 'vb', // Visual Basic 205 | 'vhd', 'vhdl', // VHDL 206 | 'xml', 'sln', // XML 207 | 'xq', // XQuery 208 | ] -------------------------------------------------------------------------------- /Atlaskit.framerfx/code/Examples.tsx: -------------------------------------------------------------------------------- 1 | import { Data, animate, Override, Animatable } from "framer" 2 | 3 | const data = Data({ toggle: true, scale: Animatable(1), opacity: Animatable(1), rotation: Animatable(0), rotationY: Animatable(0) }) 4 | 5 | export const Scale: Override = () => { 6 | return { 7 | scale: data.scale, 8 | onTap() { 9 | data.scale.set(0.6) 10 | animate.spring(data.scale, 1) 11 | }, 12 | } 13 | } 14 | 15 | export const Rotate: Override = props => { 16 | data.rotation.set(props.rotation) 17 | 18 | return { 19 | rotation: data.rotation, 20 | onTap() { 21 | animate.spring(data.rotation, data.rotation.get() + 90, { 22 | tension: 250, 23 | friction: 20, 24 | }) 25 | }, 26 | } 27 | } 28 | 29 | export const Fade: Override = props => { 30 | data.opacity.set(props.opacity) 31 | 32 | return { 33 | opacity: data.opacity, 34 | onTap() { 35 | animate.linear(data.opacity, 0, 0.2) 36 | }, 37 | } 38 | } 39 | 40 | export const FlipOutput: Override = () => { 41 | return { 42 | rotationY: data.rotationY, 43 | } 44 | } 45 | 46 | export const FlipInput: Override = () => { 47 | return { 48 | onTap() { 49 | const toggle = data.toggle 50 | animate.spring( 51 | { rotationY: data.rotationY }, 52 | { 53 | rotationY: toggle ? 360 : 0, 54 | }, 55 | { tension: 200, friction: 20 } 56 | ) 57 | data.toggle = !toggle 58 | }, 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /Atlaskit.framerfx/code/FormHeader/AKFormHeader.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { PropertyControls, ControlType } from "framer"; 3 | import { FormHeader } from '@atlaskit/form'; 4 | 5 | const style: React.CSSProperties = { 6 | display: 'flex', 7 | flexDirection: 'row', 8 | justifyContent: 'center', 9 | alignItems: 'center', 10 | height: '100%' 11 | }; 12 | 13 | // Define type of property 14 | interface Props { 15 | title?: string, 16 | description?: string, 17 | fixed: boolean 18 | } 19 | 20 | export class AkFormHeader extends React.Component { 21 | 22 | // Set default properties 23 | static defaultProps = { 24 | title: "Form header", 25 | description: 'Form description', 26 | fixed: false, 27 | } 28 | 29 | // Items shown in property panel 30 | static propertyControls: PropertyControls = { 31 | title: { 32 | type: ControlType.String, 33 | title: "Title", 34 | }, 35 | description: { 36 | type: ControlType.String, 37 | title: 'Description' 38 | }, 39 | fixed: { 40 | type: ControlType.Boolean, 41 | title: 'Fixed' 42 | } 43 | } 44 | 45 | render() { 46 | return ; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /Atlaskit.framerfx/code/GlobalNavigation/GlobalNavigation.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { PropertyControls, ControlType } from 'framer'; 3 | import { LayoutManager, NavigationProvider } from '@atlaskit/navigation-next'; 4 | import AppSwitcherIcon from '@atlaskit/icon/glyph/app-switcher'; 5 | import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle'; 6 | import Avatar from '@atlaskit/avatar'; 7 | import AddIcon from '@atlaskit/icon/glyph/add'; 8 | import SearchIcon from '@atlaskit/icon/glyph/search'; 9 | import { JiraIcon } from '@atlaskit/logo'; 10 | import AKProps from '../AKProps'; 11 | import { JiraWordmark } from '@atlaskit/logo'; 12 | import DashboardIcon from '@atlaskit/icon/glyph/dashboard'; 13 | import FolderIcon from '@atlaskit/icon/glyph/folder'; 14 | import IssuesIcon from '@atlaskit/icon/glyph/issues'; 15 | import AddonIcon from '@atlaskit/icon/glyph/addon'; 16 | import EditorSettingsIcon from '@atlaskit/icon/glyph/editor/settings'; 17 | import StarLargeIcon from '@atlaskit/icon/glyph/star-large'; 18 | import NotificationIcon from '@atlaskit/icon/glyph/notification'; 19 | import { 20 | GlobalNav, 21 | HeaderSection, 22 | MenuSection, 23 | Item, 24 | Wordmark 25 | } from '@atlaskit/navigation-next'; 26 | 27 | export const GlobalLink = ({ className, to, onClick, children }: any) => { 28 | return ( 29 |
30 | {children} 31 |
32 | ); 33 | }; 34 | 35 | const globalNavSecondaryItems = [ 36 | { id: 'notification', icon: NotificationIcon, label: 'notification', size: 'small' }, 37 | { id: 'app', icon: AppSwitcherIcon, label: 'App', size: 'small' }, 38 | { id: 'help', icon: QuestionCircleIcon, label: 'Help', size: 'small' }, 39 | { 40 | icon: () => ( 41 | 47 | ), 48 | label: 'Profile', 49 | size: 'small', 50 | id: 'profile', 51 | }, 52 | ]; 53 | 54 | const globalNavPrimaryItems = ({ onSearchClick }: *) => [ 55 | { 56 | id: 'jira', 57 | icon: ({ label }: { label: string }) => ( 58 | 59 | ), 60 | label: 'Jira', 61 | to: '/', 62 | component: GlobalLink, 63 | }, 64 | { id: 'star', icon: StarLargeIcon, }, 65 | { id: 'search', icon: SearchIcon, }, 66 | { id: 'create', icon: AddIcon }, 67 | ]; 68 | 69 | const Global = () => ( 70 | 76 | ); 77 | 78 | const MyProductNavigation = () => ( 79 | 80 | 81 | {({ className }) => ( 82 |
83 | 84 |
85 | )} 86 | 87 | 88 | {({ className }) => ( 89 |
90 | } text="Dashboard" /> 91 | } text="Projects" /> 92 | } text="Issues and filters" /> 93 | } text="Add-ons" /> 94 | } text="Settings" /> 95 |
96 | )} 97 | 98 | 99 | ); 100 | 101 | export class AKGlobalNavigation extends React.Component{ 102 | 103 | render() { 104 | return ( 105 | 106 | 111 | {''} 112 | 113 | 114 | ) 115 | } 116 | } -------------------------------------------------------------------------------- /Atlaskit.framerfx/code/ProgressIndicator/progressIndicator.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { PropertyControls, ControlType } from "framer"; 3 | import { ProgressDots } from "@atlaskit/progress-indicator"; 4 | import AKProps from "../AKProps"; 5 | 6 | const style: React.CSSProperties = { 7 | display: "flex", 8 | flexDirection: "row", 9 | justifyContent: "center", 10 | alignItems: "center", 11 | height: "100%" 12 | }; 13 | 14 | // Define type of property 15 | interface Props extends AKProps { 16 | selectedIndex: number; 17 | values: Array; 18 | } 19 | 20 | export class AKIndicator extends React.Component { 21 | // The default properties of the component. 22 | static defaultProps = { 23 | selectedIndex: 0, 24 | values: 3, 25 | width: 120, 26 | height: 38 27 | }; 28 | 29 | // The property controls for the component. 30 | static propertyControls: PropertyControls = { 31 | selectedIndex: { 32 | type: ControlType.Number, 33 | title: "Selected Index" 34 | }, 35 | values: { 36 | type: ControlType.Number, 37 | title: "Values" 38 | } 39 | }; 40 | 41 | valuesToArray = () => { 42 | return [...Array(this.props.values)].map((_, i) => `${i + 1}`); 43 | }; 44 | 45 | render() { 46 | return ; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /Atlaskit.framerfx/code/Radio/AKRadio.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { PropertyControls, ControlType } from "framer"; 3 | import { Radio } from "@atlaskit/radio"; 4 | import AKProps from "../AKProps"; 5 | 6 | // Define the properties of the component 7 | interface Props extends AKProps { 8 | checkedValue: string; 9 | } 10 | 11 | export class AKRadioGroup extends React.Component { 12 | // The default properties of the component. 13 | static defaultProps = { 14 | label: "Radio", 15 | isChecked: false, 16 | isDisabled: false, 17 | isInvalid: false, 18 | width: 120, 19 | height: 28 20 | }; 21 | 22 | // The property controls for the component. 23 | static propertyControls: PropertyControls = { 24 | label: { 25 | type: ControlType.String, 26 | title: "Label" 27 | }, 28 | isChecked: { 29 | type: ControlType.Boolean, 30 | title: "Checked?" 31 | }, 32 | isDisabled: { 33 | type: ControlType.Boolean, 34 | title: "Disabled?" 35 | }, 36 | isInvalid: { 37 | type: ControlType.Boolean, 38 | title: "Invalid?" 39 | } 40 | }; 41 | 42 | render() { 43 | return ; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /Atlaskit.framerfx/code/Radio/AKRadioGroup.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { PropertyControls, ControlType } from "framer"; 3 | import { RadioGroup } from "@atlaskit/radio"; 4 | import AKProps from "../AKProps"; 5 | 6 | const options = [ 7 | { name: "color", value: "red", label: "Red" }, 8 | { name: "color", value: "blue", label: "Blue" }, 9 | { name: "color", value: "yellow", label: "Yellow" }, 10 | { name: "color", value: "green", label: "Green" } 11 | ]; 12 | 13 | // Define the properties of the component 14 | interface Props extends AKProps { 15 | checkedValue: string; 16 | } 17 | 18 | export class AKRadioGroup extends React.Component { 19 | // The default properties of the component. 20 | static defaultProps = { 21 | checkedValue: "red", 22 | width: 120, 23 | height: 28 24 | }; 25 | 26 | // The property controls for the component. 27 | static propertyControls: PropertyControls = { 28 | checkedValue: { 29 | type: ControlType.Enum, 30 | title: "Checked value", 31 | optionTitles: ["red", "blue", "yellow", "green", null], 32 | options: ["red", "blue", "yellow", "green", "none"] 33 | } 34 | }; 35 | 36 | render() { 37 | return ( 38 | 39 | ); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /Atlaskit.framerfx/code/Select/AkSelect.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { PropertyControls, ControlType } from "framer"; 3 | import { Field } from '@atlaskit/form'; 4 | import Select, { 5 | components, 6 | createFilter, 7 | mergeStyles, 8 | AsyncSelect, 9 | CheckboxSelect, 10 | CountrySelect, 11 | RadioSelect, 12 | CreatableSelect, 13 | AsyncCreatableSelect, 14 | PopupSelect, 15 | } from '@atlaskit/select'; 16 | 17 | const style: React.CSSProperties = { 18 | display: 'flex', 19 | flexDirection: 'row', 20 | justifyContent: 'center', 21 | alignItems: 'center', 22 | height: '100%' 23 | }; 24 | 25 | // Define type of property 26 | interface Props { 27 | type: string; 28 | placeholder?: string; 29 | isInvalid?: string; 30 | invalidMessage?: string; 31 | helperText?: string; 32 | label?: string; 33 | isRequired?: string; 34 | options: string; 35 | } 36 | 37 | export class AkSelect extends React.Component { 38 | 39 | // Set default properties 40 | static defaultProps = { 41 | type: "default", 42 | placeholder: 'Select...', 43 | label: '', 44 | options: 'Atlassian|Sean Curtis|You' 45 | } 46 | 47 | // Items shown in property panel 48 | static propertyControls: PropertyControls = { 49 | type: { 50 | type: ControlType.Enum, 51 | title: "Select Type", 52 | optionTitles: ['😀 Default', '🔵 Async', 'Country', 'Creatable'], 53 | options: ['default', 'async', 'country', 'creatable'] 54 | }, 55 | placeholder: { 56 | type: ControlType.String, 57 | title: 'Placeholder' 58 | }, 59 | isInvalid: { 60 | type: ControlType.SegmentedEnum, 61 | title: 'isInvalid?', 62 | options: ['none', 'true', 'false'], 63 | optionTitles: ['none', 'true', 'false'] 64 | }, 65 | invalidMessage: { 66 | type: ControlType.String, 67 | title: 'invalidMessage' 68 | }, 69 | helperText: { 70 | type: ControlType.String, 71 | title: 'helperText' 72 | }, 73 | label: { 74 | type: ControlType.String, 75 | title: 'label' 76 | }, 77 | isRequired: { 78 | type: ControlType.Boolean, 79 | title: 'isRequired?' 80 | }, 81 | options: { 82 | type: ControlType.String, 83 | title: 'Options' 84 | } 85 | } 86 | 87 | Outer = ({children}) => { 88 | const { label, isInvalid, invalidMessage, helperText, isRequired } = this.props; 89 | if (isInvalid === 'none' && label === '') return {children}; 90 | if (isInvalid === 'true') { 91 | return 92 | {children} 93 | 94 | } 95 | return 96 | {children} 97 | 98 | } 99 | 100 | renderSelect() { 101 | const {type, isInvalid, invalidMessage, helperText, options, ...rest} = this.props; 102 | const selectOptions = options === '' ? [] : options.split('|').map(v => ({label: v, value: v})); 103 | switch(type){ 104 | case 'async': 105 | return 106 | case 'creatable': 107 | return 108 | case 'country': 109 | return 110 | default: 111 | return