From 102828468d500030d577557aa2c457276e0c4d9e Mon Sep 17 00:00:00 2001 From: "Liujie (Jacky) Hao" <78773152+JackyxCS@users.noreply.github.com> Date: Tue, 18 Apr 2023 15:33:00 -0500 Subject: [PATCH] feat: view (#121) * feat: view * v0.9.23 * revert new version * decouple props and styling * pass padding as prop * WIP * add style props to view * Add some colors * rm unused import * add provider, spread args * create border and color types * rm unused imports * address feedback * address feedback * 0.9.23 * revert * v0.9.23 --------- Co-authored-by: Mikyo King --- package.json | 2 +- src/card/styles.ts | 8 +- src/provider/GlobalStyles.tsx | 20 +++++ src/types/core.ts | 10 ++- src/view/View.tsx | 80 +++++++++++++++++ src/view/index.tsx | 1 + stories/Card.stories.tsx | 42 +++++---- stories/Gallery.stories.tsx | 60 +++++++++++-- stories/View.stories.tsx | 161 ++++++++++++++++++++++++++++++++++ 9 files changed, 354 insertions(+), 30 deletions(-) create mode 100644 src/view/View.tsx create mode 100644 stories/View.stories.tsx diff --git a/package.json b/package.json index e255e120..d393bde9 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "0.9.22", + "version": "0.9.23", "license": "MIT", "main": "dist/index.js", "typings": "dist/index.d.ts", diff --git a/src/card/styles.ts b/src/card/styles.ts index 75f7595e..0a0e69d1 100644 --- a/src/card/styles.ts +++ b/src/card/styles.ts @@ -4,10 +4,10 @@ import theme from '../theme'; export const cardCSS = css` display: flex; flex-direction: column; - background-color: ${theme.components.card.backgroundColor}; + background-color: var(--ac-global-background-color-dark); color: ${theme.textColors.white90}; - border-radius: 8px; - border: 1px solid ${theme.components.card.borderColor}; + border-radius: var(--ac-global-rounding-medium); + border: 1px solid var(--ac-global-border-color-dark); overflow: hidden; /* variant variables */ &.ac-card--default { @@ -19,7 +19,7 @@ export const cardCSS = css` `; const headerBorderCSS = css` - border-bottom: 1px solid ${theme.components.card.borderColor}; + border-bottom: 1px solid var(--ac-global-border-color-dark); `; export const headerCSS = ({ diff --git a/src/provider/GlobalStyles.tsx b/src/provider/GlobalStyles.tsx index 9f8291d5..51b5d19f 100644 --- a/src/provider/GlobalStyles.tsx +++ b/src/provider/GlobalStyles.tsx @@ -60,6 +60,26 @@ export const globalCSS = css` --ac-global-dimension-static-grid-columns: 12; --ac-global-dimension-static-grid-fluid-width: 100%; --ac-global-dimension-static-grid-fixed-max-width: 1280px; + + /* Colors */ + --ac-global-color-gray-900: #181b1f; + --ac-global-color-gray-800: #1d2126; + --ac-global-color-gray-700: #23282e; + --ac-global-color-gray-600: #282e35; + --ac-global-color-gray-500: #2f353d; + --ac-global-color-gray-400: #3d434a; + --ac-global-color-gray-300: #4a5057; + --ac-global-color-gray-200: #585d64; + --ac-global-color-gray-100: #666b71; + + --ac-global-background-color-light: var(--ac-global-color-gray-500); + --ac-global-background-color-dark: var(--ac-global-color-gray-900); + + --ac-global-border-color-light: var(--ac-global-color-gray-100); + --ac-global-border-color-dark: var(--ac-global-color-gray-400); + + --ac-global-rounding-small: var(--ac-global-dimension-static-size-50); + --ac-global-rounding-medium: var(--ac-global-dimension-static-size-100); } `; diff --git a/src/types/core.ts b/src/types/core.ts index ee808af8..a6996c85 100644 --- a/src/types/core.ts +++ b/src/types/core.ts @@ -86,4 +86,12 @@ export type DimensionValue = | 'single-line-height' | 'single-line-width' | number - | string; + // This allows autocomplete to work properly and not collapse the above options into just `string`. + // https://github.com/microsoft/TypeScript/issues/29729. + | (string & {}); + +export type BorderRadiusValue = 'small' | 'medium'; + +export type BorderColorValue = 'light' | 'dark'; + +export type BackgroundColorValue = 'light' | 'dark'; diff --git a/src/view/View.tsx b/src/view/View.tsx new file mode 100644 index 00000000..86b19d14 --- /dev/null +++ b/src/view/View.tsx @@ -0,0 +1,80 @@ +import React, { JSXElementConstructor, ReactNode, forwardRef } from 'react'; +import { css } from '@emotion/react'; +import { + BackgroundColorValue, + BorderColorValue, + BorderRadiusValue, + DOMRef, + DimensionValue, +} from '../types'; +import { useDOMRef } from '../utils'; +import { dimensionValue } from '../utils/styleProps'; + +export interface ViewProps { + /** + * The children to be displayed in the View. + */ + children?: ReactNode; + /** + * The element to render as the node. + * @default 'div' + */ + elementType?: string | JSXElementConstructor; + padding?: Extract< + DimensionValue, + 'static-size-50' | 'static-size-100' | 'static-size-200' + >; + borderRadius?: BorderRadiusValue; + borderColor?: BorderColorValue; + backgroundColor?: BackgroundColorValue; + width?: DimensionValue; + height?: DimensionValue; + id?: string; +} + +function View(props: ViewProps, ref: DOMRef) { + const { + children, + elementType: ElementType = 'div', + padding, + borderRadius, + borderColor, + backgroundColor, + width, + height, + id, + } = props; + const domRef = useDOMRef(ref); + return ( + + {children} + + ); +} + +/** + * View is a general purpose container with no specific semantics + * that can be used for custom styling purposes, similar to a div. + */ +const _View = forwardRef(View); +export { _View as View }; diff --git a/src/view/index.tsx b/src/view/index.tsx index b39182a1..9272ca3d 100644 --- a/src/view/index.tsx +++ b/src/view/index.tsx @@ -1 +1,2 @@ export * from './Content'; +export * from './View'; diff --git a/stories/Card.stories.tsx b/stories/Card.stories.tsx index 8eae210a..37b98081 100644 --- a/stories/Card.stories.tsx +++ b/stories/Card.stories.tsx @@ -6,7 +6,7 @@ import { Card, CardProps, TabbedCard } from '../src/card'; import { Tabs } from '../src/tabs'; import { Button } from '../src/button'; import InfoTip from './components/InfoTip'; -import { Heading } from '../src'; +import { Heading, Provider } from '../src'; const { TabPane } = Tabs; @@ -185,28 +185,32 @@ const GalleryCards = (props: { variant: CardProps['variant'] }) => { export const Gallery = () => { return ( -
-
- Default variant - -
-
- Compact variant - -
-
+ +
+
+ Default variant + +
+
+ Compact variant + +
+
+ ); }; const Template: Story = args => ( - - Content goes here - + + + Content goes here + + ); // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test diff --git a/stories/Gallery.stories.tsx b/stories/Gallery.stories.tsx index f431a6b1..5c2df5be 100644 --- a/stories/Gallery.stories.tsx +++ b/stories/Gallery.stories.tsx @@ -14,8 +14,11 @@ import { RadioGroup, Radio, ButtonToolbar, + View, + Heading, + ButtonGroup, } from '../src'; -import { Icon, SearchOutline } from '../src/icon'; +import { Icon, Icons, SearchOutline } from '../src/icon'; // @ts-ignore import chartFile from './images/chart.png'; @@ -39,13 +42,14 @@ const Template: Story = args => {
{ />
- +
{
+ +
+ Drift Over Time + +
+ chart image + {holder} diff --git a/stories/View.stories.tsx b/stories/View.stories.tsx new file mode 100644 index 00000000..528cd92b --- /dev/null +++ b/stories/View.stories.tsx @@ -0,0 +1,161 @@ +import React from 'react'; +import { Meta } from '@storybook/react'; +import { + Card, + Provider, + TextField, + View, + Text, + Picker, + Item, + Button, + ButtonGroup, +} from '../src'; +import { + Icon, + PlusCircleOutline, + MinusCircleOutline, + ArrowIosForwardOutline, + ArrowIosBackOutline, +} from '../src/icon'; +import { withDesign } from 'storybook-addon-designs'; +import { css } from '@emotion/react'; + +const plusIcon = } />; +const minusIcon = } />; +const rightIcon = } />; +const leftIcon = } />; + +const meta: Meta = { + title: 'View', + component: View, + decorators: [withDesign], + argTypes: { + children: { + control: { + type: 'text', + }, + }, + padding: { + control: { + type: 'select', + options: ['static-size-50', 'static-size-100', 'static-size-200'], + }, + }, + }, + parameters: { + controls: { expanded: true }, + design: { + type: 'figma', + url: '', + }, + }, +}; + +export default meta; + +const Template = args => { + return ( + +
+ This is a View +
+ + ); +}; + +export const Gallery = args => { + return ( + +
+ + + + + + + +
+ + First Item + + +
+ + + +
+ + First Item + + +
+ + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + + +
+ + ); +}; + +export const Default = Template.bind({});