@uni-design-system/uni-core 1.0.0 → 1.0.1

package/src/core/core.types.ts

@@ -1,63 +0,0 @@
-export type Role =
-  | 'primary'
-  | 'secondary'
-  | 'tertiary'
-  | 'ghost'
-  | 'error'
-  | 'warn'
-  | 'link'
-  ;
-
-export type SupportRole =
-  | 'info'
-  | 'warn'
-  | 'success'
-  | 'error'
-  ;
-
-export type Size =
-  | 'xs'
-  | 'sm'
-  | 'md'
-  | 'lg'
-  | 'xl'
-  ;
-
-export type HorizontalBinary =
-  | 'left'
-  | 'right'
-  ;
-
-export type HorizontalAlign = HorizontalBinary
-  | 'center'
-  ;
-
-export type VerticalBinary =
-  | 'top'
-  | 'bottom'
-  ;
-
-export type VerticalAlign = VerticalBinary
-  | 'middle'
-  ;
-
-export type Apply =
-  | HorizontalBinary
-  | VerticalBinary
-  | 'vertical'
-  | 'horizontal'
-  | 'all'
-  ;
-
-export type RadiusApply =
-  | 'left'
-  | 'right'
-  | 'top'
-  | 'bottom'
-  | 'topLeft'
-  | 'topRight'
-  | 'bottomLeft'
-  | 'bottomRight'
-  | 'all'
-  | 'none'
-  ;

package/src/core/gradients/gradiennt.helper.ts

@@ -1,7 +0,0 @@
-import { IGradient } from './gradient.model';
-
-
-
-export function gradient(config: IGradient): string {
-  return ``;
-}

package/src/core/gradients/gradient.model.ts

@@ -1,7 +0,0 @@
-import { IColor } from '../color/color.model';
-
-export interface IGradient {
-  defaultColor: IColor;
-  degee: number,
-  colors: Record<string, IColor>
-}

package/src/core/iconography/icon.model.ts

@@ -1,8 +0,0 @@
-import { IColor } from '../color/color.model';
-import { IMasking } from '../masking/masking.model';
-
-export interface Icon {
-  background: IColor;
-  foreground: IColor;
-  mask: IMasking;
-}

package/src/core/iconography/icon.types.ts

@@ -1,68 +0,0 @@
-export type color = 'white' | 'black' | 'red' | 'blue' | 'green';
-
-export type style = 'solid' | 'outline' | 'gradient';
-
-export type display = 'logo'
-  | 'alert'
-  | 'warn'
-  | 'disabled'
-  | 'trash'
-  | 'user'
-  | 'back'
-  | 'next'
-  | 'unlock'
-  | 'view'
-  | 'hide'
-;
-
-export type actionable = 'add'
-  | 'create'
-  | 'copy'
-  | 'edit'
-  | 'disable'
-  | 'save'
-  | 'pin'
-  | 'fav'
-  | 'tag'
-  | 'update'
-  | 'archive'
-  | 'delete'
-  | 'lock'
-  | 'unlock'
-  | 'view'
-  | 'hide'
-;
-
-export type behavior = 'open'
-  | 'expand'
-  | 'collapse'
-;
-
-export type messaging = 'alert'
-  | 'info'
-  | 'success'
-  | 'warn'
-  | 'warning'
-;
-
-
-export type usage = 'logo'
-  | 'alert'
-  | 'chat'
-  | 'down'
-  | 'favorite'
-  | 'info'
-  | 'location'
-  | 'lock'
-  | 'message'
-  | 'profile'
-  | 'question'
-  | 'remove'
-  | 'schedule'
-  | 'search'
-  | 'send'
-  | 'settings'
-  | 'share'
-  | 'unlock'
-  | 'up'
-;

package/src/core/layout/layout.types.ts

@@ -1,5 +0,0 @@
-import { Size } from '../core.types';
-
-export type elements = 'margin' | 'border' | 'padding';
-
-export const spacings: Record<Size, number> = { xs: 5, sm: 8, md: 13, lg: 21, xl: 34 };

package/src/core/masking/masking.model.ts

@@ -1,7 +0,0 @@
-import { IColor } from '../color/color.model';
-import { MaskingShape } from './masking.types';
-
-export interface IMasking {
-  background: IColor;
-  shape: MaskingShape;
-}

package/src/core/shadow/shadow.types.ts

@@ -1,9 +0,0 @@
-export type ShadowStyle =
-  | 'Flat'
-  | 'Raised'
-  | 'Focussed'
-  | 'Pressed'
-  | 'Modal'
-  | 'Navigation'
-  | 'Drawer'
-  ;

package/src/core/theme/theme.context.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { ThemeProps } from './theme.model';
-
-const ThemeContext = React.createContext<ThemeProps>({});
-
-if (process.env.NODE_ENV !== 'production') {
-  ThemeContext.displayName = 'ThemeContext';
-}
-
-export default ThemeContext;

package/src/core/theme/theme.hook.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import ThemeContext from './theme.context';
-import { ThemeModel} from './theme.model';
-import { LightTheme } from './themes/light.theme';
-
-export default function useTheme(): ThemeModel {
-
-  const themeProps = React.useContext(ThemeContext);
-
-  const theme = themeProps && themeProps.themes && themeProps.themeId && themeProps.themes[themeProps.themeId];
-
-  if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useDebugValue(theme);
-  }
-
-  return theme || LightTheme;
-}

package/src/core/theme/theme.model.ts

@@ -1,12 +0,0 @@
-
-export interface ThemeProps {
-  themeId?: string;
-  themes?: Record<string, ThemeModel>;
-  setTheme?: any;
-}
-
-export interface ThemeModel {
-  name: string;
-  id: string;
-  colors: Record<string, string>;
-}

package/src/core/theme/theme.provider.tsx

@@ -1,56 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { DefaultThemeId } from './theme.records'
-import { ThemeModel } from './theme.model';
-import ThemeContext from './theme.context';
-
-const STORAGE_KEY = 'THEME_ID';
-
-interface ThemeProviderProps {
-  themeId: string;
-  themes: Record<string, ThemeModel>;
-  children?: React.ReactChild;
-}
-
-export const ThemeProvider = ({ children, themeId, themes }: ThemeProviderProps) => {
-
-  const [_themeId, setThemeId] = useState<string>(themeId);
-
-  useEffect(() => {
-    (async () => {
-      const id = localStorage.getItem(STORAGE_KEY);
-      if (id) {
-        setThemeId(id);
-      } else {
-        setThemeId(DefaultThemeId);
-      }
-    })();
-  }, []);
-
-  return (
-    <ThemeContext.Provider value={{themeId, themes}}>
-      {_themeId ? children : null}
-    </ThemeContext.Provider>
-  );
-};
-
-/*export function withTheme(Component: ({children, theme, themes }: (any & ThemeProps)) => JSX.Element) {
-
-  return (props: JSX.IntrinsicAttributes) => {
-    const { themeId, setThemeId } = useContext(ThemeContext);
-
-    const getTheme = (themeId: string) => themes[themeId];
-    const setTheme = (themeId: string) => {
-      localStorage.setItem(STORAGE_KEY, themeId);
-      setThemeId(themeId);
-    };
-
-    return (
-      <Component
-        {...props}
-        themes={Themes}
-        theme={getTheme(themeId)}
-        setTheme={setTheme}
-      />
-    );
-  };
-}*/

package/src/core/theme/themes/dark.theme.ts

@@ -1,9 +0,0 @@
-import { ThemeModel } from '../theme.model';
-
-export const DarkTheme: ThemeModel = {
-  id: 'DarkTheme',
-  name: 'Dark Theme',
-  colors: {
-
-  }
-}

package/src/core/theme/themes/light.theme.ts

@@ -1,13 +0,0 @@
-import { ThemeModel } from '../theme.model';
-
-export const LightTheme: ThemeModel = {
-  id: 'LightTheme',
-  name: 'Light Theme',
-  colors: {
-    primary: '#35A7FF',
-    secondary: '#38618C',
-    error: '#FFE74C',
-    warn: '#FF5964',
-    background: '#FFFFFF'
-  }
-}

package/src/core/typography/typography.types.ts

@@ -1,10 +0,0 @@
-
-export type classes = 'sanserif' | 'serif' | 'slab' | 'script' | 'display' | 'monospace';
-
-export type families = 'Open-Sans' | 'Times-New-Roman' | 'Noto-Serif-Display';
-
-export type styles = 'thin' | 'light' | 'regular' | 'medium' | 'bold' | 'semi-bold' | 'black';
-
-export type placement = 'overline' | 'title' | 'underline' | 'body' | 'label' | 'note' | 'footer';
-
-export type alignment = 'left' | 'right' | 'center';

package/src/stories/Button.stories.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-// @ts-ignore
-import { withThemes } from '@react-theming/storybook-addon';
-
-import { Button } from './Button';
-import { BuiltInThemes, DefaultThemeId } from '../core/theme/theme.records';
-import { ThemeProvider } from '../core/theme/theme.provider';
-import { ThemeProps } from '../core/theme/theme.model';
-
-// create decorator
-const themingDecorator = withThemes(ThemeProvider, [DefaultThemeId]);
-
-const providerFn = ({theme, children}: any & ThemeProps) => {
-  return <ThemeProvider themeId={theme.id} themes={BuiltInThemes}>{children}</ThemeProvider>;
-};
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Example/Button',
-  component: Button,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} as ComponentMeta<typeof Button>;
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
-};

package/src/stories/Button.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import './button.css';
-
-interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary?: boolean;
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
-  label: string;
-  /**
-   * Optional click handler
-   */
-  onClick?: () => void;
-}
-
-/**
- * Primary UI component for user interaction
- */
-export const Button = ({
-  primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
-  ...props
-}: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={{ backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};

package/src/stories/Header.stories.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { Header } from './Header';
-
-export default {
-  title: 'Example/Header',
-  component: Header,
-  parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
-  },
-} as ComponentMeta<typeof Header>;
-
-const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
-  },
-};
-
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};

package/src/stories/Header.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-
-import { Button } from './Button';
-import './header.css';
-
-type User = {
-  name: string;
-};
-
-interface HeaderProps {
-  user?: User;
-  onLogin: () => void;
-  onLogout: () => void;
-  onCreateAccount: () => void;
-}
-
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
-  <header>
-    <div className="wrapper">
-      <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
-          </g>
-        </svg>
-        <h1>Acme</h1>
-      </div>
-      <div>
-        {user ? (
-          <>
-            <span className="welcome">
-              Welcome, <b>{user.name}</b>!
-            </span>
-            <Button size="small" onClick={onLogout} label="Log out" />
-          </>
-        ) : (
-          <>
-            <Button size="small" onClick={onLogin} label="Log in" />
-            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
-          </>
-        )}
-      </div>
-    </div>
-  </header>
-);