From 18d45575fd48288e207b6ecb762c69e4b478002a Mon Sep 17 00:00:00 2001 From: Paul Ebose Date: Tue, 21 Sep 2021 15:35:39 +0100 Subject: [PATCH 1/3] add basic typings for exported library functions - StyleReset - Container - Row - Col - Div - iconPaths - Icon - Text - Button - Input - Textarea - Label - Checkbox - Radiobox - Switch - Image - Tag - Anchor - Collapse - Modal - SideDrawer - Notification - Dropdown - scrollTo - currentDevice - ThemeProvider --- package.json | 75 +++++++++--------- src/typings/THEME.d.ts | 153 ++++++++++++++++++++++++++++++++++++ src/typings/index.d.ts | 174 +++++++++++++++++++++++++++++++++++++++++ yarn.lock | 19 +++++ 4 files changed, 384 insertions(+), 37 deletions(-) create mode 100644 src/typings/THEME.d.ts create mode 100644 src/typings/index.d.ts diff --git a/package.json b/package.json index aa7fac3..d7a6486 100644 --- a/package.json +++ b/package.json @@ -1,39 +1,40 @@ { - "name": "atomize", - "version": "1.0.21", - "main": "index.js", - "license": "MIT", - "files": [ - "dist" - ], - "scripts": { - "start": "webpack-dev-server", - "docs": "NODE_ENV=production webpack -p", - "build": "babel src -d dist", - "clean": "rm -rf dist", - "dist": "yarn run clean && yarn run build" - }, - "devDependencies": { - "@babel/cli": "^7.4.4", - "@babel/core": "^7.4.5", - "@babel/preset-env": "^7.4.5", - "@babel/preset-react": "^7.0.0", - "babel-loader": "^8.0.6", - "prism-react-renderer": "^0.1.6", - "react": "^16.8.6", - "react-dom": "^16.8.6", - "react-transition-group": "^4.1.1", - "styletron-engine-atomic": "^1.4.0", - "styletron-react": "^5.2.0", - "webpack": "^4.32.2", - "webpack-cli": "^3.3.2", - "webpack-dev-server": "^3.4.1" - }, - "peerDependencies": { - "react": ">= 16", - "react-dom": ">= 16", - "react-transition-group": ">= 4", - "styletron-engine-atomic": "^1.4.0", - "styletron-react": "^5.2.0" - } + "name": "atomize", + "version": "1.0.21", + "main": "index.js", + "license": "MIT", + "files": [ + "dist" + ], + "scripts": { + "start": "webpack-dev-server", + "docs": "NODE_ENV=production webpack -p", + "build": "babel src -d dist", + "clean": "rm -rf dist", + "dist": "yarn run clean && yarn run build" + }, + "devDependencies": { + "@babel/cli": "^7.4.4", + "@babel/core": "^7.4.5", + "@babel/preset-env": "^7.4.5", + "@babel/preset-react": "^7.0.0", + "@types/react": "^16.8.6", + "babel-loader": "^8.0.6", + "prism-react-renderer": "^0.1.6", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "react-transition-group": "^4.1.1", + "styletron-engine-atomic": "^1.4.0", + "styletron-react": "^5.2.0", + "webpack": "^4.32.2", + "webpack-cli": "^3.3.2", + "webpack-dev-server": "^3.4.1" + }, + "peerDependencies": { + "react": ">= 16", + "react-dom": ">= 16", + "react-transition-group": ">= 4", + "styletron-engine-atomic": "^1.4.0", + "styletron-react": "^5.2.0" + } } diff --git a/src/typings/THEME.d.ts b/src/typings/THEME.d.ts new file mode 100644 index 0000000..3649e2f --- /dev/null +++ b/src/typings/THEME.d.ts @@ -0,0 +1,153 @@ +const THEME = { + colors: { + black900: '#0A1F44', + black800: '#14284B', + black700: '#283A5B', + black600: '#364766', + black500: '#455571', + black400: '#4E5D78', + black300: '#596780', + black200: '#627088', + black100: '#717D92', + + gray900: '#8A94A6', + gray800: '#98A1B1', + gray700: '#A7AEBB', + gray600: '#B0B7C3', + gray500: '#C9CED6', + gray400: '#E1E4E8', + gray300: '#F1F2F4', + gray200: '#F7F8F9', + gray100: '#FAFBFB', + + brand900: '#FF584A', + brand800: '#FE6C61', + brand700: '#FF867E', + brand600: '#FFA29B', + brand500: '#FFBDB8', + brand400: '#FFCAC6', + brand300: '#FFD7D4', + brand200: '#FFE4E3', + brand100: '#FFEEED', + + success900: '#136A4A', + success800: '#23825F', + success700: '#36AB80', + success600: '#6FCAA8', + success500: '#A9DCC9', + success400: '#D0EDDF', + success300: '#EAF7F1', + success200: '#F5FBF8', + success100: '#FAFDFC', + + warning900: '#EF8511', + warning800: '#F69D2C', + warning700: '#F7AF22', + warning600: '#FBC050', + warning500: '#FBE0A1', + warning400: '#FDEECB', + warning300: '#FEF7E6', + warning200: '#FEFAF1', + warning100: '#FFFDF8', + + danger900: '#A32801', + danger800: '#D13A06', + danger700: '#F4541D', + danger600: '#F7926F', + danger500: '#FABEAA', + danger400: '#FCD7CA', + danger300: '#FDE8E1', + danger200: '#FEF6F3', + danger100: '#FFFBFA', + + info900: '#01408F', + info800: '#026DD6', + info700: '#0284FE', + info600: '#4BA7FE', + info500: '#83C3FE', + info400: '#B3DAFF', + info300: '#DCEEFF', + info200: '#EEF7FF', + info100: '#F8FBFF', + + white: '#FFFFFF', + black: '#000000', + transparent: 'rgba(0,0,0,0)', + + disabled: '#B0B7C3', + light: '#A7AAB0', + medium: '#505256', + dark: '#000000', + }, + + grid: { + containerMaxWidth: { + xs: '540px', + sm: '720px', + md: '960px', + lg: '1156px', + xl: '1200px', + }, + gutterWidth: '16px', + colCount: 12, + }, + + shadows: { + 0: 'none', + 1: '0 0 1px 0 rgba(8, 11, 14, 0.06), 0 1px 1px 0 rgba(8, 11, 14, 0.1)', + 2: '0 0 1px 0 rgba(8, 11, 14, 0.06), 0 3px 3px -1px rgba(8, 11, 14, 0.1)', + 3: '0 0 1px 0 rgba(8, 11, 14, 0.06), 0 6px 6px -1px rgba(8, 11, 14, 0.1)', + 4: '0 0 1px 0 rgba(8, 11, 14, 0.06), 0 16px 16px -1px rgba(8, 11, 14, 0.1)', + 5: '0 0 1px 0 rgba(8, 11, 14, 0.06), 0 32px 40px -1px rgba(8, 11, 14, 0.1)', + }, + + fontFamily: { + primary: + '"SF Pro Text", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"', + secondary: 'SF Pro Text', + code: 'monospace', + }, + + rounded: { + 0: '0px', + xs: '2px', + sm: '4px', + md: '6px', + lg: '8px', + xl: '12px', + circle: '1000rem', + }, + + transition: { + true: 'all 0.4s ease-in-out', + }, + + textSize: { + size: { + tiny: '10px', + caption: '12px', + body: '14px', + paragraph: '14px', + subheader: '17px', + title: '22px', + heading: '26px', + display1: '32px', + display2: '40px', + display3: '56px', + }, + height: { + tiny: '16px', + caption: '20px', + body: '24px', + paragraph: '26px', + subheader: '30px', + title: '32px', + heading: '40px', + display1: '48px', + display2: '48px', + display3: '64px', + }, + }, +} + +export default THEME diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts new file mode 100644 index 0000000..90f0dc0 --- /dev/null +++ b/src/typings/index.d.ts @@ -0,0 +1,174 @@ +import * as React from 'react' +import THEME from './THEME' + +export class StyleReset extends React.Component {} + +// ----- Atoms ----- +export function Container(props: React.PropsWithChildren): JSX.Element +export function Row(props: React.PropsWithChildren): JSX.Element +export function Col(props: React.PropsWithChildren): JSX.Element +export function Div(props: React.PropsWithChildren): JSX.Element +export function Icon(props: unknown): JSX.Element +export function Text(props: React.PropsWithChildren): JSX.Element +export function Button(props: React.PropsWithChildren): JSX.Element +export function Input(props: unknown): JSX.Element +export function Textarea(props: unknown): JSX.Element +export function Label(props: React.PropsWithChildren): JSX.Element +export function Checkbox(props: unknown): JSX.Element +export function Radiobox(props: unknown): JSX.Element +export function Switch(props: unknown): JSX.Element +export function Image(props: unknown): JSX.Element +export function Tag(props: React.PropsWithChildren): JSX.Element +export function Anchor(props: React.PropsWithChildren): JSX.Element + +// ----- Molecules ----- +export class Collapse extends React.Component {} +export class Modal extends React.Component {} +export class SideDrawer extends React.Component {} +export class Notification extends React.Component {} +export class Dropdown extends React.Component {} + +// ----- Functions ----- +export function scrollTo( + goTo: string, + offset?: number, + goToNumber?: number, + time?: number, +): void + +export function currentDevice(): + | 'xs' + | 'sm' + | 'md' + | 'lg' + | 'xl' + | "Couldn't find device" + +// ----- Theme ----- +export type DefaultTheme = Partial + +export function ThemeProvider( + props: React.PropsWithChildren<{ theme: DefaultTheme }>, +): JSX.Element + +// ----- IconPaths ----- +// @todo: improve props +type IconPath = (props: { [x: string]: any; color: string }) => JSX.Element + +export const iconPaths: { + Add: IconPath + AlertSolid: IconPath + Alert: IconPath + Attachment: IconPath + Back: IconPath + Bag: IconPath + Behance: IconPath + BookmarkSolid: IconPath + Bookmark: IconPath + Bulk: IconPath + CameraSolid: IconPath + Camera: IconPath + Card: IconPath + Checked: IconPath + CloseSolid: IconPath + Close: IconPath + Cross: IconPath + DeleteSolid: IconPath + Delete: IconPath + Dot: IconPath + DownArrowCircle: IconPath + DownArrowSolid: IconPath + DownArrow: IconPath + Down: IconPath + Download: IconPath + Draft: IconPath + Dribbble: IconPath + EditSolid: IconPath + Edit: IconPath + Email: IconPath + Expand: IconPath + External: IconPath + EyeSolid: IconPath + Eye: IconPath + Facebook: IconPath + FolderSolid: IconPath + Folder: IconPath + Github: IconPath + HeartSolid: IconPath + Heart: IconPath + History: IconPath + HomeSolid2: IconPath + HomeSolid: IconPath + Home: IconPath + InfoSolid: IconPath + Info: IconPath + Instagram: IconPath + LeftArrowSolid: IconPath + LeftArrow: IconPath + LeftUp: IconPath + Link: IconPath + Linkedin: IconPath + Loading: IconPath + Loading2: IconPath + Loading3: IconPath + LocationSolid: IconPath + Location: IconPath + LockSolid: IconPath + Lock: IconPath + Logout: IconPath + LongLeft: IconPath + LongRight: IconPath + Mail: IconPath + MasterCard: IconPath + Menu: IconPath + MessageSolid: IconPath + Message: IconPath + Minus: IconPath + Next: IconPath + NotificationSolid: IconPath + Notification: IconPath + OptionsVertical: IconPath + Options: IconPath + Photo: IconPath + Pause: IconPath + Play: IconPath + PlayNext: IconPath + PlayPrev: IconPath + Plus: IconPath + Power: IconPath + Print: IconPath + QuestionSolid: IconPath + Question: IconPath + Refresh: IconPath + RemoveSolid: IconPath + Remove: IconPath + Rename: IconPath + RightArrowSolid: IconPath + RightArrow: IconPath + RightUp: IconPath + Search: IconPath + SettingsSolid: IconPath + Settings: IconPath + StarSolid: IconPath + Status: IconPath + Stop: IconPath + Store: IconPath + Success: IconPath + TimestampSolid: IconPath + Timestamp: IconPath + Twitter: IconPath + UpArrowSolid: IconPath + UpArrow: IconPath + Up: IconPath + Upload: IconPath + UserCircle: IconPath + UserSolid: IconPath + User: IconPath + Visa: IconPath + CBChecked: IconPath + CBDisabled: IconPath + CBIndetermine: IconPath + CBUnchecked: IconPath + RBChecked: IconPath + RBUnchecked: IconPath +} diff --git a/yarn.lock b/yarn.lock index cfec93a..e3089e6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -981,6 +981,25 @@ resolved "https://registry.npmjs.org/@types/node/-/node-15.12.2.tgz#1f2b42c4be7156ff4a6f914b2fb03d05fa84e38d" integrity sha512-zjQ69G564OCIWIOHSXyQEEDpdpGl+G348RAKY0XXy9Z5kU9Vzv1GMNnkar/ZJ8dzXB3COzD9Mo9NtRZ4xfgUww== +"@types/prop-types@*": + version "15.7.4" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" + integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== + +"@types/react@^16.8.6": + version "16.14.15" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.15.tgz#95d8fa3148050e94bcdc5751447921adbe19f9e6" + integrity sha512-jOxlBV9RGZhphdeqJTCv35VZOkjY+XIEY2owwSk84BNDdDv2xS6Csj6fhi+B/q30SR9Tz8lDNt/F2Z5RF3TrRg== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "*" + csstype "^3.0.2" + +"@types/scheduler@*": + version "0.16.2" + resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39" + integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew== + "@webassemblyjs/ast@1.9.0": version "1.9.0" resolved "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964" From a2128e7c1a7d130119e245aed1de687ec59382fa Mon Sep 17 00:00:00 2001 From: Paul Ebose Date: Tue, 21 Sep 2021 15:42:37 +0100 Subject: [PATCH 2/3] add typings for Container props (using the docs) - using the docs at https://atomizecode.com/docs/react/grid/ --- src/typings/index.d.ts | 5 +- src/typings/props.d.ts | 546 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 550 insertions(+), 1 deletion(-) create mode 100644 src/typings/props.d.ts diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts index 90f0dc0..2640f64 100644 --- a/src/typings/index.d.ts +++ b/src/typings/index.d.ts @@ -1,10 +1,13 @@ import * as React from 'react' +import { ContainerProps } from './props' import THEME from './THEME' export class StyleReset extends React.Component {} // ----- Atoms ----- -export function Container(props: React.PropsWithChildren): JSX.Element +export function Container( + props: React.PropsWithChildren, +): JSX.Element export function Row(props: React.PropsWithChildren): JSX.Element export function Col(props: React.PropsWithChildren): JSX.Element export function Div(props: React.PropsWithChildren): JSX.Element diff --git a/src/typings/props.d.ts b/src/typings/props.d.ts new file mode 100644 index 0000000..b9a6b76 --- /dev/null +++ b/src/typings/props.d.ts @@ -0,0 +1,546 @@ +import * as CSSType from 'csstype' +import { DefaultTheme } from '.' + +// @todo: remove values +export type Responsive = Partial<{ + xs: string | Object + sm: string | Object + md: string | Object + lg: string | Object + xl: string | Object +}> + +export type Direction = Partial<{ + t: T | { [key in keyof Responsive]: T } + b: T | { [key in keyof Responsive]: T } + r: T | { [key in keyof Responsive]: T } + l: T | { [key in keyof Responsive]: T } +}> + +export type BorderDirection = Direction & + Partial<{ + tr: T | { [key in keyof Responsive]: T } + br: T | { [key in keyof Responsive]: T } + tl: T | { [key in keyof Responsive]: T } + tb: T | { [key in keyof Responsive]: T } + }> + +export type ContainerProps = Partial<{ + /** + * Set display property. + * + * @example + * // Inline-block + * d="inline-block" + * + * // None on Mobile, Flex on Desktop + * d={{ xs: "none", md: "flex" }} + */ + d: + | CSSType.Property.Display + | { [key in keyof Responsive]: CSSType.Property.Display } + + /** + * Note: align only works when display is `flex`. + * + * @example + * // center + * align="center" + * + * // space-around on mobile, center on large device + * align={{ xs: "space-around", lg: "center" }} + */ + align: + | CSSType.Property.AlignContent + | { [key in keyof Responsive]: CSSType.Property.AlignContent } + + /** + * Note: justify only works when display is `flex`. + * + * @example + * // space-around + * justify="space-around" + * + * // space-around on mobile, center on large device + * justify={{ xs: "space-around", lg: "center" }} + */ + justify: + | CSSType.Property.JustifyContent + | { [key in keyof Responsive]: CSSType.Property.JustifyContent } + + /** + * Note: flexDir only works when display is `flex`. + * + * @example + * // Row + * flexDir="row" + * + * // Column in mobile, Row in large device + * flexDir={{ xs: 'column', lg: 'row' }} + */ + flexDir: + | CSSType.Property.FlexDirection + | { [key in keyof Responsive]: CSSType.Property.FlexDirection } + + /** + * Note: flexGrow only works when the outer component display is `flex`. + * + * @example + * // Flex Grow + * flexGrow="1" + * + * // Responsive Flex Grow + * flexGrow={{ xs: '1', sm: '4', md: '2', lg: '3', xl: '2' }} + */ + flexGrow: + | CSSType.Property.FlexGrow + | { [key in keyof Responsive]: CSSType.Property.FlexGrow } + + /** + * Note: flexWrap only works when display is `flex`. + * + * @example + * // Reverse Wrap + * flexWrap="wrap-reverse" + * + * // Responsive Flex Wrap + * flexWrap={{ xs: 'nowrap', md: 'wrap' }} + */ + flexWrap: + | CSSType.Property.FlexWrap + | { [key in keyof Responsive]: CSSType.Property.FlexWrap } + + /** + * Set border radius. + * + * @example + * // Rounded large + * rounded="lg" + * + * // Rounded top left & bottom right + * rounded={{ tl: "circle", br: "circle" }} + * + * // Rounded top + * rounded={{ t: "circle" }} + * + * // Responsive + * rounded={{ t: { xs: "circle", md: 'xs'} }} + */ + rounded: + | keyof DefaultTheme['rounded'] + | BorderDirection + + /** + * Set background color. + * + * @example + * // bg danger + * bg="danger700" + * + * // bg success + * bg="success700" + */ + bg: keyof DefaultTheme['colors'] + + /** + * Set background color on hover. + * + * @example + * // hoverBg warning + * hoverBg="warning700" + * + * // hoverBg info + * hoverBg="info700" + */ + hoverBg: keyof DefaultTheme['colors'] + + /** + * It is equivalent to `background-image` of css. + * + * @example + * // With background Image + * bgImg="https://images.unsplash.com/photo-1561212024-cb9ad0c33195?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&dpr=1&auto=format&fit=crop&w=2199&h=594&q=80" + */ + bgImg: CSSType.Property.BackgroundImage + + /** + * It is equivalent to `background-position` of css. + * + * @example + * // Bottom + * bgPos="bottom" + * + * // in % + * bgPos="50%, 10%" + */ + bgPos: CSSType.Property.BackgroundPosition + + /** + * It is equivalent to `background-size` of css. + * + * @example + * // Contain + * bgSize="contain" + */ + bgSize: CSSType.Property.BackgroundSize + + /** + * It is equivalent to `background-repeat` of css. + * + * @example + * // No repeat + * bgRepeat="no-repeat" + */ + bgRepeat: CSSType.Property.BackgroundRepeat + + /** + * Set height property. + * + * @example + * // Normal Height + * h="3rem" + * + * // Responsive Height + * h={{ xs: 'auto', md: '100vh' }} + */ + h: + | CSSType.Property.Height + | { [key in keyof Responsive]: CSSType.Property.Height } + + /** + * Set max height property. + * + * @example + * // Normal + * maxH="3rem" + * + * // Responsive + * maxH={{ xs: 'auto', md: '100vh' }} + */ + maxH: + | CSSType.Property.MaxHeight + | { [key in keyof Responsive]: CSSType.Property.MaxHeight } + + /** + * Set min height property. + * + * @example + * // Normal + * minH="3rem" + * + * // Responsive + * minH={{ xs: 'auto', md: '100vh' }} + */ + minH: + | CSSType.Property.MinHeight + | { [key in keyof Responsive]: CSSType.Property.MinHeight } + + /** + * Set min height property. + * + * @example + * // Normal + * minW="3rem" + * + * // Responsive + * minW={{ xs: 'auto', md: '100vw' }} + */ + minW: + | CSSType.Property.MinWidth + | { [key in keyof Responsive]: CSSType.Property.MinWidth } + + /** + * Set border width & border style properties. + * + * @example + * // 2px solid + * border="2px solid" + * + * // 1px dashed + * border="1px dashed" + */ + border: CSSType.Property.BorderStyle /* BorderWidth */ | (string & {}) + + /** + * Set border color property. + * + * @example + * // Danger + * borderColor="danger700" + * + * // Success + * borderColor="success700" + */ + borderColor: keyof DefaultTheme['colors'] + + /** + * Set border color property on hover. + * + * @example + * // Danger + * hoverBorderColor="danger700" + * + * // Success + * hoverBorderColor="success700" + */ + hoverBorderColor: keyof DefaultTheme['colors'] + + /** + * Set font size & line height properties. + * + * @example + * // Caption + * textSize="caption" + * + * // Responsive + * textSize={{ xs: "tiny", md: "body" }} + */ + textSize: + | keyof DefaultTheme['textSize']['size'] + | { [key in keyof Responsive]: keyof DefaultTheme['textSize']['size'] } + + /** + * Set font weight property. + * + * @example + * // 300 + * textWeight="300" + * + * // Responsive + * textWeight={{ xs: '400', md: '500' }} + */ + textWeight: + | CSSType.Property.FontWeight + | { [key in keyof Responsive]: CSSType.Property.FontWeight } + + /** + * Set text decoration property. + * + * @example + * // line-through + * textDecor="line-through" + * + * // underline + * textDecor="underline" + */ + textDecor: CSSType.Property.TextDecoration + + /** + * Set text transform property. + * + * @example + * // line-through + * textTransform="uppercase" + * + * // underline + * textTransform="capitalize" + */ + textTransform: CSSType.Property.TextTransform + + /** + * Set text align property. + * + * @example + * // justify + * textAlign="justify" + * + * // Responsive + * textAlign={{ xs: "center", lg: "left" }} + */ + textAlign: + | CSSType.Property.TextAlign + | { [key in keyof Responsive]: CSSType.Property.TextAlign } + + /** + * Set text color. + * + * @example + * // info + * textColor="info700" + * + * // Responsive + * textColor={{ xs: 'medium', md: 'black' }} + */ + textColor: + | keyof DefaultTheme['colors'] + | { [key in keyof Responsive]: keyof DefaultTheme['colors'] } + + /** + * Set text color on hover. + * + * @example + * // info + * hoverTextColor="info700" + * + * // Responsive + * hoverTextColor={{ xs: 'medium', md: 'black' }} + */ + hoverTextColor: + | keyof DefaultTheme['colors'] + | { [key in keyof Responsive]: keyof DefaultTheme['colors'] } + + /** + * Set font family. + * + * @example + * // Code + * fontFamily="code" + * + * // Responsive + * fontFamily={{ xs: 'primary', lg: 'secondary' }} + */ + fontFamily: + | keyof DefaultTheme['fontFamily'] + | { [key in keyof Responsive]: keyof DefaultTheme['fontFamily'] } + + /** + * Set box shadow. + * + * @example + * // Shadow 1 + * shadow="1" + * + * // Responsive + * shadow={{ xs: '4', md: '3', lg: '1' }} + */ + shadow: + | keyof DefaultTheme['shadows'] + | { [key in keyof Responsive]: keyof DefaultTheme['shadows'] } + + /** + * Set box shadow on hover. + * + * @example + * // hoverShadow 1 + * hoverShadow="1" + * + * // Responsive + * hoverShadow={{ xs: '4', md: '3', lg: '1' }} + */ + hoverShadow: + | keyof DefaultTheme['shadows'] + | { [key in keyof Responsive]: keyof DefaultTheme['shadows'] } + + /** + * Set element positioning. + * + * @example + * // Relative + * pos="relative" + * + * // Responsive + * pos={{ xs: 'fixed', lg: 'static' }} + */ + pos: + | CSSType.Property.Position + | { [key in keyof Responsive]: CSSType.Property.Position } + + /** + * Set `top` property of a positioned element. + * + * @example + * // Absolute + * pos="absolute" + * top="0" + * + * // Fixed + * pos="fixed" + * top="50%" + */ + top: CSSType.Property.Top + + /** + * Set `left` property of a positioned element. + * + * @example + * // Absolute + * pos="absolute" + * left="20%" + * + * // Fixed + * pos="fixed" + * left="5rem" + */ + left: CSSType.Property.Left + + /** + * Set `right` property of a positioned element. + * + * @example + * // Absolute + * pos="absolute" + * right="0" + * + * // Fixed + * pos="fixed" + * right="0" + */ + right: CSSType.Property.Right + + /** + * Set `bottom` property of a positioned element. + * + * @example + * // Absolute + * pos="absolute" + * bottom="2rem" + * + * // Fixed + * pos="fixed" + * bottom="10%" + */ + bottom: CSSType.Property.Bottom + + /** + * Set transform property. + * + * @example + * // Scale + * transform='scale(1.3, 1)' + * + * // Responsive Transform + * transform={{ xs: 'translateY(50%)', md: 'translateY(0)' }} + */ + transform: + | CSSType.Property.Transform + | { [key in keyof Responsive]: CSSType.Property.Transform } + + /** + * Set element transition value. + * + * @example + * // Default theme transition + * transition + * + * // Custom transition + * transition='slow-faster' + */ + transition: boolean | keyof DefaultTheme['transition'] + + /** + * Set element overflow. + * + * @example + * // hidden + * overflow="hidden" + * + * // Directional + * overflow="visible scroll" + */ + overflow: CSSType.Property.Overflow + + /** + * Set `cursor` property. + * + * @example + * // not-allowed + * cursor="not-allowed" + * + * // pointer + * cursor="pointer" + * + * // crosshair + * cursor="crosshair" + */ + cursor: CSSType.Property.Cursor +}> From f52af9bdafad4c1c3c502cfe5e0552efcb397e50 Mon Sep 17 00:00:00 2001 From: Paul Ebose Date: Tue, 21 Sep 2021 18:05:53 +0100 Subject: [PATCH 3/3] add typings location to package.json --- package.json | 4 +++- {src/typings => typings}/THEME.d.ts | 0 {src/typings => typings}/index.d.ts | 0 {src/typings => typings}/props.d.ts | 0 4 files changed, 3 insertions(+), 1 deletion(-) rename {src/typings => typings}/THEME.d.ts (100%) rename {src/typings => typings}/index.d.ts (100%) rename {src/typings => typings}/props.d.ts (100%) diff --git a/package.json b/package.json index d7a6486..c6a398a 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,10 @@ "version": "1.0.21", "main": "index.js", "license": "MIT", + "typings": "typings/index.d.ts", "files": [ - "dist" + "dist", + "typings" ], "scripts": { "start": "webpack-dev-server", diff --git a/src/typings/THEME.d.ts b/typings/THEME.d.ts similarity index 100% rename from src/typings/THEME.d.ts rename to typings/THEME.d.ts diff --git a/src/typings/index.d.ts b/typings/index.d.ts similarity index 100% rename from src/typings/index.d.ts rename to typings/index.d.ts diff --git a/src/typings/props.d.ts b/typings/props.d.ts similarity index 100% rename from src/typings/props.d.ts rename to typings/props.d.ts